feat: bootstrap resource header

src/templates/languagePost.tsx

@@ -3,14 +3,22 @@ import { graphql } from "gatsby"
 import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
 import { ResourcesLayout } from "../components/ResourcesLayout"
+import { ResourceHeader } from "../components/ResourceHeader"
 
 // @todo maybe find alternative type for data
 function LanguagePost({ data }: any) {
-  const { html, frontmatter } = data.file.post
+  const { html, fields, frontmatter, timeToRead } = data.file.post
   console.log(data)
   return (
     <ResourcesLayout>
       <SEO title={frontmatter.title} />
+      <ResourceHeader
+        title={frontmatter.title}
+        authors={fields.authors}
+        createdAt={frontmatter.created_at}
+        timeToRead={timeToRead}
+        recommendedReading={frontmatter.recommended_reading}
+      />
       <Markdown content={html} />
     </ResourcesLayout>
   )
@@ -31,9 +39,11 @@ export const query = graphql`
           }
         }
         frontmatter {
-          date
+          created_at
           title
+          recommended_reading
         }
+        timeToRead
       }
     }
   }