feat: support external resources

src/components/ResourceHeader/index.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Fragment } from "react"
 
 import { StackedAvatars } from "../StackedAvatars"
 import ChevronUp from "../../icons/chevron-up.svg"
@@ -10,6 +10,35 @@ interface ResourceHeaderProps {
   createdAt: any
   timeToRead: any
   recommendedReading: any
+  externalResources: any
+}
+
+function ExtraLink({
+  item,
+  external = false,
+}: {
+  item: string
+  external?: boolean
+}) {
+  const Inner = () => (
+    <Fragment>
+      <ChevronUp /> <SC.ExtraLinkText>{item}</SC.ExtraLinkText>
+    </Fragment>
+  )
+
+  if (external) {
+    return (
+      <SC.ExtraLinkExternal href={item} target="_blank">
+        <Inner />
+      </SC.ExtraLinkExternal>
+    )
+  }
+
+  return (
+    <SC.ExtraLinkInternal to={`/resources/${item}.md`}>
+      <Inner />
+    </SC.ExtraLinkInternal>
+  )
 }
 
 export function ResourceHeader({
@@ -18,6 +47,7 @@ export function ResourceHeader({
   createdAt,
   timeToRead,
   recommendedReading,
+  externalResources,
 }: ResourceHeaderProps) {
   const date = new Date(createdAt)
   const month = date.toLocaleString("default", { month: "long" })
@@ -44,14 +74,19 @@ export function ResourceHeader({
         <SC.RecommendedReading>
           Recommended reading
           {recommendedReading.map(item => {
-            return (
-              <SC.ReadLink>
-                <ChevronUp /> <SC.ReadLinkText>{item}</SC.ReadLinkText>
-              </SC.ReadLink>
-            )
+            return <ExtraLink item={item} />
           })}
         </SC.RecommendedReading>
       )}
+
+      {externalResources && (
+        <SC.ExternalResources>
+          External Resources
+          {externalResources.map(item => {
+            return <ExtraLink item={item} external />
+          })}
+        </SC.ExternalResources>
+      )}
     </SC.ResourceHeaderWrapper>
   )
 }

src/components/ResourceHeader/styles.tsx

@@ -1,4 +1,5 @@
-import styled from "styled-components"
+import styled, { css } from "styled-components"
+import { Link } from "gatsby"
 import { fontFamily, modularScale } from "../../design/typography"
 
 export const ResourceHeaderWrapper = styled.div`
@@ -26,11 +27,15 @@ export const Meta = styled.div`
   }
 `
 
-export const RecommendedReading = styled.div`
+const ExtraLinks = styled.div`
   margin-top: 16px;
 `
 
-export const ReadLink = styled.div`
+export const RecommendedReading = styled(ExtraLinks)``
+
+export const ExternalResources = styled(ExtraLinks)``
+
+const extraLink = css`
   display: flex;
   align-items: center;
   color: #04b0a6;
@@ -53,6 +58,14 @@ export const ReadLink = styled.div`
   }
 `
 
-export const ReadLinkText = styled.div`
+export const ExtraLinkInternal = styled(Link)`
+  ${extraLink};
+`
+
+export const ExtraLinkExternal = styled.a`
+  ${extraLink};
+`
+
+export const ExtraLinkText = styled.div`
   text-decoration: underline;
 `

src/templates/languagePost.tsx

@@ -17,6 +17,7 @@ function LanguagePost({ data }: any) {
         createdAt={frontmatter.created_at}
         timeToRead={timeToRead}
         recommendedReading={frontmatter.recommended_reading}
+        externalResources={frontmatter.external_resources}
       />
       <Markdown content={html} />
     </Fragment>
@@ -41,6 +42,7 @@ export const query = graphql`
           created_at
           title
           recommended_reading
+          external_resources
         }
         timeToRead
       }