Add support for attribution on header image

Previously attribution was defined, but wasn't being display anywhere.

Author: sean0x42

src/app/types.ts

@@ -30,6 +30,11 @@ export interface ArticleSummary {
   }
 }
 
+export interface Attribution {
+  author: string
+  url: string
+}
+
 export interface Article {
   id: string
   body: string
@@ -38,6 +43,7 @@ export interface Article {
     title: string
     date: string
     cover: FluidImage
+    attribution: Attribution | null
   }
 }
 

src/components/Article.treat.ts

@@ -22,3 +22,8 @@ globalStyle(`${article} strong`, (theme) => ({
   color: theme.primary,
   fontWeight: 550,
 }))
+
+export const attribution = style((theme) => ({
+  // Typography
+  color: theme.typeColourLight,
+}))

src/components/Article.tsx

@@ -4,7 +4,7 @@ import React, { FunctionComponent } from 'react'
 import { useStyles } from 'react-treat'
 import { MDXProvider } from '@mdx-js/react'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
-import { FluidImage } from '../app/types'
+import { FluidImage, Attribution } from '../app/types'
 import * as styleRefs from './Article.treat'
 
 import Figure from './Article/Figure'
@@ -23,6 +23,7 @@ const components: ComponentMap = {
 
 interface ArticleProps {
   coverImage: FluidImage
+  attribution: Attribution
   title: string
   date: string
   excerpt: string
@@ -44,6 +45,19 @@ function Article(props: ArticleProps) {
         </MDXProvider>
 
         <ThanksForReading />
+
+        {props.attribution !== null && (
+          <p className={styles.attribution}>
+            Cover image by{' '}
+            <a
+              href={props.attribution.url}
+              target="_blank"
+              rel="noopener noreferer"
+            >
+              {props.attribution.author}
+            </a>
+          </p>
+        )}
       </Wrapper>
     </article>
   )

src/components/Article/Header.treat.ts

@@ -3,9 +3,6 @@
 import { style } from 'treat'
 
 export const image = style((theme) => ({
-  // Box model
-  marginBottom: '4rem',
-
   // Visuals
   backgroundColor: theme.grey80,
   borderRadius: '3px',
@@ -27,8 +24,8 @@ export const title = style({
     '(min-width: 600px)': {
       fontSize: '3.052rem',
       lineHeight: '1.15 !important',
-    }
-  }
+    },
+  },
 })
 
 export const date = style((theme) => ({

src/components/Article/Header.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import Img from 'gatsby-image'
 import { useStyles } from 'react-treat'
 
-import { FluidImage } from '../../app/types'
+import { FluidImage, Attribution } from '../../app/types'
 import * as styleRefs from './Header.treat'
 
 interface HeaderProps {

src/templates/Article.tsx

@@ -23,6 +23,7 @@ function Container(props: ContainerProps) {
     <Layout>
       <Article
         coverImage={article.frontmatter.cover}
+        attribution={article.frontmatter.attribution}
         title={article.frontmatter.title}
         date={article.frontmatter.date}
         excerpt={article.excerpt}
@@ -50,6 +51,10 @@ export const pageQuery = graphql`
             }
           }
         }
+        attribution {
+          author
+          url
+        }
       }
     }
   }