feat: bootstrap resource header

src/components/Markdown/styles.tsx

@@ -28,6 +28,14 @@ export const MarkdownWrapper = styled.div`
   font-size: ${BASE_FONT_SIZE}px;
   line-height: ${BASE_LINE_HEIGHT}px;
 
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :first-child {
+    margin-bottom: 0;
+  }
+
   p {
     margin: ${BASE_LINE_HEIGHT}px 0;
   }

src/components/ResourceHeader/index.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+
+import ChevronUp from "../../icons/chevron-up.svg"
+import * as SC from "./styles"
+
+interface ResourceHeaderProps {
+  title: any
+  authors: any
+  createdAt: any
+  timeToRead: any
+  recommendedReading: any
+}
+
+export function ResourceHeader({
+  title,
+  authors,
+  createdAt,
+  timeToRead,
+  recommendedReading,
+}: ResourceHeaderProps) {
+  const date = new Date(createdAt)
+  const month = date.toLocaleString("default", { month: "long" })
+  const day = date.getDate()
+  const year = date.getUTCFullYear()
+  const dateToHuman = `${month} ${day}, ${year}`
+
+  return (
+    <SC.ResourceHeaderWrapper>
+      <SC.Title>{title}</SC.Title>
+
+      <SC.Top>
+        <SC.AuthorAvatars>
+          {authors.map(author => (
+            <SC.AuthorAvatar src={author.avatar} />
+          ))}
+        </SC.AuthorAvatars>
+        <SC.Meta>
+          {authors.length} contributor{authors.lenght > 1 && "s"}
+        </SC.Meta>
+        <SC.Meta>{dateToHuman}</SC.Meta>
+        <SC.Meta>
+          {timeToRead} minute{timeToRead !== 1 && "s"} read time
+        </SC.Meta>
+      </SC.Top>
+
+      {recommendedReading && (
+        <SC.RecommendedReading>
+          Recommended reading
+          {recommendedReading.map(item => {
+            return (
+              <SC.ReadLink>
+                <ChevronUp /> <SC.ReadLinkText>{item}</SC.ReadLinkText>
+              </SC.ReadLink>
+            )
+          })}
+        </SC.RecommendedReading>
+      )}
+    </SC.ResourceHeaderWrapper>
+  )
+}

src/components/ResourceHeader/styles.tsx

@@ -0,0 +1,63 @@
+import styled from "styled-components"
+
+export const ResourceHeaderWrapper = styled.div`
+  border-bottom: 1px solid #dbdbdb;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+`
+
+export const Top = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const Title = styled.h1``
+
+export const AuthorAvatars = styled.div`
+  margin-right: 16px;
+`
+
+export const AuthorAvatar = styled.img`
+  width: 32px;
+  height: 32px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+`
+
+export const Meta = styled.div`
+  & + &::before {
+    content: "•";
+    margin: 0 8px;
+  }
+`
+
+export const RecommendedReading = styled.div`
+  margin-top: 16px;
+`
+
+export const ReadLink = styled.div`
+  display: flex;
+  align-items: center;
+  color: #04b0a6;
+  margin-top: 4px;
+  margin-left: 20px;
+  cursor: pointer;
+
+  &:hover {
+    color: #045551;
+  }
+
+  svg {
+    width: 14px;
+    transform: rotate(90deg);
+    margin-right: 6px;
+  }
+
+  svg path {
+    fill: #04b0a6;
+  }
+`
+
+export const ReadLinkText = styled.div`
+  text-decoration: underline;
+`

src/components/ResourcesLayout/index.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, { PropsWithChildren } from "react"
-import { useStaticQuery, graphql } from "gatsby"
 
 import { GlobalStyles } from "../../globalStyles"
 import { ResourcesSidebar } from "../ResourcesSidebar"
@@ -14,26 +13,13 @@ import * as SC from "./styles"
 import { SidebarProvider } from "../../SidebarProvider"
 
 export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
-  const data = useStaticQuery(graphql`
-    query {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
-
   return (
     <SidebarProvider>
       <GlobalStyles />
       <SC.Main>
         <ResourcesSidebar />
         <SC.MainContent>
-          <SC.Container>
-            <h1>{data.site.siteMetadata.title}</h1>
-            {children}
-          </SC.Container>
+          <SC.Container>{children}</SC.Container>
         </SC.MainContent>
       </SC.Main>
     </SidebarProvider>

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
       }
     }
   }