feat(archives): bootstrap what-is-archives from Github

src/components/ArchivesSidebar/index.tsx

@@ -0,0 +1,35 @@
+import { graphql, useStaticQuery } from "gatsby"
+import React, { FC, HTMLAttributes } from "react"
+import { IAllArchivesQuery, IFileOrFolder } from "../../types"
+import { humanize } from "../../utils"
+import { ColumnSidebar } from "../ColumnSidebar"
+import useBuildTree from "./../../hooks/useBuildTree"
+import * as SC from "./styles"
+
+const ALL_ARCHIVES = graphql`
+  query {
+    allFile(filter: { sourceInstanceName: { eq: "what-is-archive" } }) {
+      edges {
+        node {
+          relativePath
+        }
+      }
+    }
+  }
+`
+
+function plantTree(item: IFileOrFolder) {
+  return (
+    <SC.PageLink key={item.title} to={item.path} activeClassName="active">
+      {humanize(item.title)}
+    </SC.PageLink>
+  )
+}
+
+export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
+  const archives = useStaticQuery<IAllArchivesQuery>(ALL_ARCHIVES)
+  const tree = useBuildTree(archives, "/archives")
+  const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
+
+  return <ColumnSidebar {...props}>{sortedTree.map(plantTree)}</ColumnSidebar>
+}

src/components/ArchivesSidebar/styles.tsx

@@ -0,0 +1,31 @@
+import { Link } from "gatsby"
+import { transparentize } from "polished"
+import styled from "styled-components"
+
+export const PageLink = styled(Link)`
+  display: block;
+  padding: 4px 0 0;
+  margin-bottom: 4px;
+  color: ${props => props.theme.sidebar.foreground};
+  align-self: flex-start;
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+
+  &:hover {
+    border-color: ${props =>
+      transparentize(0.7, props.theme.sidebar.foreground)};
+  }
+
+  & + & {
+    margin-top: 4px;
+  }
+
+  &.active {
+    font-weight: 700;
+    color: ${props => props.theme.sidebar.active};
+  }
+
+  &.active:hover {
+    border-color: ${props => transparentize(0.7, props.theme.sidebar.active)};
+  }
+`

src/components/Breadcrumb/index.tsx

@@ -9,8 +9,9 @@ interface ILinkProps {
   item: IFileOrFolder
 }
 
-interface IResourceBreadcrumbProps {
+interface IBreadcrumbProps {
   relativePath: any
+  basePath: string
 }
 
 const Link: FC<ILinkProps> = ({ item }) => {
@@ -28,12 +29,12 @@ function flatten([
   return flatten([...currNode.children, ...previousNodes, currNode])
 }
 
-export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) {
+export function Breadcrumb({ relativePath, basePath }: IBreadcrumbProps) {
   const paths = relativePath.split("/")
-  const breadcrumbItems = flatten([traversePaths(paths)])
+  const breadcrumbItems = flatten([traversePaths(paths, basePath)])
 
   return (
-    <SC.ResourceBreadcrumbWrapper>
+    <SC.BreadcrumbWrapper>
       <SC.LinkWrapper>
         <Link
           item={{ path: "/", title: "home", type: "folder", children: [] }}
@@ -43,8 +44,8 @@ export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) {
       <SC.LinkWrapper>
         <Link
           item={{
-            path: "/resources",
-            title: "resources",
+            path: basePath,
+            title: basePath.replace(/\//, ""),
             type: "folder",
             children: [],
           }}
@@ -67,6 +68,6 @@ export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) {
           </SC.CurrentPage>
         )
       })}
-    </SC.ResourceBreadcrumbWrapper>
+    </SC.BreadcrumbWrapper>
   )
 }

src/components/Breadcrumb/styles.tsx

@@ -2,7 +2,7 @@ import { Link } from "gatsby"
 import { darken, lighten } from "polished"
 import styled from "styled-components"
 
-export const ResourceBreadcrumbWrapper = styled.div`
+export const BreadcrumbWrapper = styled.div`
   display: flex;
   align-items: flex-start;
 

src/components/ColumnHeader/index.tsx

@@ -1,22 +1,23 @@
 import React, { FC, Fragment } from "react"
 
 import ChevronUp from "../../icons/chevron-up.svg"
-import { ResourceBreadcrumb } from "../ResourceBreadcrumb"
+import { Breadcrumb } from "../Breadcrumb"
 import { StackedAvatars } from "../StackedAvatars"
 import * as SC from "./styles"
 
-interface IResourceHeaderProps {
+interface IColumnHeaderProps {
   relativePath: string
+  basePath: string
   title: string
-  authors: Array<{
+  authors?: Array<{
     avatar: string
     hash: string
     name: string
   }>
   createdAt: string
   timeToRead: number
-  recommendedReading: string[]
-  externalResources: string[]
+  recommendedReading?: string[]
+  externalResources?: string[]
 }
 
 function ExtraLink({
@@ -47,7 +48,8 @@ function ExtraLink({
   )
 }
 
-export const ResourceHeader: FC<IResourceHeaderProps> = ({
+export const ColumnHeader: FC<IColumnHeaderProps> = ({
+  basePath,
   relativePath,
   title,
   authors,
@@ -63,24 +65,26 @@ export const ResourceHeader: FC<IResourceHeaderProps> = ({
   const dateToHuman = `${month} ${day}, ${year}`
 
   return (
-    <SC.ResourceHeaderWrapper>
-      <ResourceBreadcrumb relativePath={relativePath} />
+    <SC.ColumnHeaderWrapper>
+      <Breadcrumb relativePath={relativePath} basePath={basePath} />
 
       <SC.Title>{title}</SC.Title>
 
       <SC.Top>
-        <SC.Meta>
-          <StackedAvatars authors={authors} />
-          <SC.PopoverToggler>
-            {authors.length} contributor{authors.length > 1 && "s"}
-            <SC.Popover>
-              {authors
-                .map(author => `${author.name}#${author.hash}`)
-                .join(", ")}
-            </SC.Popover>
-          </SC.PopoverToggler>
-        </SC.Meta>
-        <SC.Meta>{dateToHuman}</SC.Meta>
+        {authors && (
+          <SC.Meta>
+            <StackedAvatars authors={authors} />
+            <SC.PopoverToggler>
+              {authors.length} contributor{authors.length > 1 && "s"}
+              <SC.Popover>
+                {authors
+                  .map(author => `${author.name}#${author.hash}`)
+                  .join(", ")}
+              </SC.Popover>
+            </SC.PopoverToggler>
+          </SC.Meta>
+        )}
+        {dateToHuman && <SC.Meta>{dateToHuman}</SC.Meta>}
         <SC.Meta>
           {timeToRead} minute{timeToRead !== 1 && "s"} read time
         </SC.Meta>
@@ -103,6 +107,6 @@ export const ResourceHeader: FC<IResourceHeaderProps> = ({
           })}
         </SC.ExternalResources>
       )}
-    </SC.ResourceHeaderWrapper>
+    </SC.ColumnHeaderWrapper>
   )
 }

src/components/ColumnHeader/styles.tsx

@@ -3,7 +3,7 @@ import { darken, lighten } from "polished"
 import styled, { css } from "styled-components"
 import { fontFamily, modularScale } from "../../design/typography"
 
-export const ResourceHeaderWrapper = styled.div`
+export const ColumnHeaderWrapper = styled.div`
   border-bottom: 1px solid #dbdbdb;
   padding-bottom: 32px;
   margin-bottom: 32px;

src/components/ColumnLink/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from "react"
+import * as SC from "./styles"
+
+interface IColumnLinkProps {
+  to: string
+}
+
+export const ColumnLink: FC<IColumnLinkProps> = ({ children, to }) => {
+  if (!to.match(/^(https?:\/\/)/)) {
+    return <SC.ColumnLinkInternal to={to}>{children}</SC.ColumnLinkInternal>
+  }
+
+  return (
+    <SC.ColumnLinkExternal href={to} target="_blank">
+      {children}
+    </SC.ColumnLinkExternal>
+  )
+}

src/components/ColumnLink/styles.tsx

@@ -15,10 +15,10 @@ const linkStyle = css`
   }
 `
 
-export const ResourcesLinkInternal = styled(Link)`
+export const ColumnLinkInternal = styled(Link)`
   ${linkStyle}
 `
 
-export const ResourcesLinkExternal = styled.a`
+export const ColumnLinkExternal = styled.a`
   ${linkStyle}
 `

src/components/ColumnSidebar/index.tsx

@@ -0,0 +1,49 @@
+import { Link } from "gatsby"
+import React, { FC, HTMLAttributes, PropsWithChildren } from "react"
+import Scrollbar from "react-perfect-scrollbar"
+import "react-perfect-scrollbar/dist/css/styles.css"
+import Banner from "../../images/tph-banner.svg"
+import { ThemeToggler } from "../ThemeToggler"
+import * as SC from "./styles"
+
+interface IMenuItemProps {
+  to: string
+}
+
+const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
+  return (
+    <SC.MenuItem to={to} activeClassName="active">
+      {children}
+    </SC.MenuItem>
+  )
+}
+
+export const ColumnSidebar: FC<
+  PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+> = props => {
+  const { children, ...restProps } = props
+
+  return (
+    <SC.ColumnSidebarWrapper {...restProps}>
+      <Scrollbar>
+        <Link to="/">
+          <Banner />
+        </Link>
+        <SC.Inner>
+          {children}
+
+          <SC.Menu>
+            <MenuItem to="/about">about</MenuItem>
+            <MenuItem to="/rules">rules</MenuItem>
+            <MenuItem to="/faq">faq</MenuItem>
+            <MenuItem to="/">hotbot</MenuItem>
+            <MenuItem to="/resources">resources</MenuItem>
+            <MenuItem to="/archives">tech spotlights</MenuItem>
+          </SC.Menu>
+
+          <ThemeToggler />
+        </SC.Inner>
+      </Scrollbar>
+    </SC.ColumnSidebarWrapper>
+  )
+}

src/components/ColumnSidebar/styles.tsx

@@ -0,0 +1,56 @@
+import { Link } from "gatsby"
+import styled from "styled-components"
+
+export const ColumnSidebarWrapper = styled.div`
+  box-sizing: border-box;
+  flex: 0 0 320px;
+  background: ${props => props.theme.sidebar.background};
+  color: ${props => props.theme.sidebar.foreground};
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 320px;
+
+  @media screen and (max-width: 767px) {
+    z-index: 100;
+    width: auto;
+    /* TODO: maybe find a less "awkward" way to animate this */
+    left: calc(-100% - 100px);
+    right: calc(100% - 0px);
+    transition: left 0.3s, right 0.3s;
+  }
+
+  &.is-open {
+    left: 0;
+    right: 100px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  }
+`
+
+export const Inner = styled.div`
+  padding: 30px 0 30px 20px;
+`
+
+export const Menu = styled.nav`
+  display: flex;
+  flex-direction: column;
+  border-top: 1px dashed #a5a5a5;
+  margin: 20px 0 40px;
+  padding-top: 20px;
+`
+
+export const MenuItem = styled(Link)`
+  padding: 4px 0;
+  font-size: 20px;
+  color: ${props => props.theme.sidebar.foreground};
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+
+  &.active {
+    font-weight: 700;
+  }
+`

src/components/Header/index.tsx

@@ -86,7 +86,7 @@ export const Header: FC<IHeaderProps> = ({ isHome }) => {
           <MenuItem to="/">faq</MenuItem>
           <MenuItem to="/">hotbot</MenuItem>
           <MenuItem to="/resources">resources</MenuItem>
-          <MenuItem to="/">tech spotlight</MenuItem>
+          <MenuItem to="/archives">tech spotlights</MenuItem>
         </SC.Menu>
         <DiscordButton>join us</DiscordButton>
         {isHome && <Partner />}

src/components/ResourcesLink/index.tsx

@@ -1,20 +0,0 @@
-import React, { FC } from "react"
-import * as SC from "./styles"
-
-interface IResourcesLinkProps {
-  to: string
-}
-
-export const ResourcesLink: FC<IResourcesLinkProps> = ({ children, to }) => {
-  if (!to.match(/^(https?:\/\/)/)) {
-    return (
-      <SC.ResourcesLinkInternal to={to}>{children}</SC.ResourcesLinkInternal>
-    )
-  }
-
-  return (
-    <SC.ResourcesLinkExternal href={to} target="_blank">
-      {children}
-    </SC.ResourcesLinkExternal>
-  )
-}

src/components/ResourcesList/useBuildTree.tsx

@@ -3,7 +3,7 @@ import { join, traversePathsToFiles } from "../../utils"
 
 export default function useBuildTree(resources: IAllResourcesQuery) {
   const objects = resources.allFile.edges.map(({ node: file }: IFileQuery) =>
-    traversePathsToFiles(file.relativePath.split("/"))
+    traversePathsToFiles(file.relativePath.split("/"), "/resources")
   )
 
   return join(objects)

src/components/ResourcesSidebar/index.tsx

@@ -1,15 +1,12 @@
-import { graphql, Link, useStaticQuery } from "gatsby"
+import { graphql, useStaticQuery } from "gatsby"
 import React, { FC, HTMLAttributes, memo, useState } from "react"
-import Scrollbar from "react-perfect-scrollbar"
-import "react-perfect-scrollbar/dist/css/styles.css"
 import TriangleDown from "../../icons/triangle-down.svg"
-import Banner from "../../images/tph-banner.svg"
 import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
 import { humanize } from "../../utils"
-import { ThemeToggler } from "../ThemeToggler"
+import { ColumnSidebar } from "../ColumnSidebar"
+import useBuildTree from "./../../hooks/useBuildTree"
 import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
-import useBuildTree from "./useBuildTree"
 import useMatchingPath from "./useMatchingPath"
 
 const ALL_RESOURCES = graphql`
@@ -93,44 +90,14 @@ const FirstLevelFolder = memo(
   }
 )
 
-interface IMenuItemProps {
-  to: string
-}
-
-const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
-  return (
-    <SC.MenuItem to={to} activeClassName="active">
-      {children}
-    </SC.MenuItem>
-  )
-}
-
 export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
-  const tree = useBuildTree(resources)
+  const tree = useBuildTree(resources, "/resources")
   const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
 
   return (
-    <SC.ResourcesSidebarWrapper {...props}>
-      <Scrollbar>
-        <Link to="/">
-          <Banner />
-        </Link>
-        <SC.Inner>
-          {sortedTree.map((node, index) => plantTree(node, index, true))}
-
-          <SC.Menu>
-            <MenuItem to="/about">about</MenuItem>
-            <MenuItem to="/rules">rules</MenuItem>
-            <MenuItem to="/faq">faq</MenuItem>
-            <MenuItem to="/">hotbot</MenuItem>
-            <MenuItem to="/resources">resources</MenuItem>
-            <MenuItem to="/">tech</MenuItem>
-          </SC.Menu>
-
-          <ThemeToggler />
-        </SC.Inner>
-      </Scrollbar>
-    </SC.ResourcesSidebarWrapper>
+    <ColumnSidebar {...props}>
+      {sortedTree.map((node, index) => plantTree(node, index, true))}
+    </ColumnSidebar>
   )
 }

src/components/ResourcesSidebar/styles.tsx

@@ -3,32 +3,6 @@ import { transparentize } from "polished"
 import styled from "styled-components"
 import ChevronUp from "../../icons/chevron-up.svg"
 
-export const ResourcesSidebarWrapper = styled.div`
-  box-sizing: border-box;
-  flex: 0 0 320px;
-  background: ${props => props.theme.sidebar.background};
-  color: ${props => props.theme.sidebar.foreground};
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 320px;
-
-  @media screen and (max-width: 767px) {
-    z-index: 100;
-    width: auto;
-    /* TODO: maybe find a less "awkward" way to animate this */
-    left: calc(-100% - 100px);
-    right: calc(100% - 0px);
-    transition: left 0.3s, right 0.3s;
-  }
-
-  &.is-open {
-    left: 0;
-    right: 100px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-  }
-`
-
 export const Children = styled.div`
   padding-left: 16px;
   padding-bottom: 8px;
@@ -131,10 +105,6 @@ export const TreeWrapper = styled.div<{ collapsed: boolean }>`
 
 export const CollapseToggler = styled(ChevronUp)``
 
-export const Inner = styled.div`
-  padding: 30px 0 30px 20px;
-`
-
 export const PageLink = styled(Link)`
   display: block;
   padding: 4px 0 0;
@@ -162,27 +132,3 @@ export const PageLink = styled(Link)`
     border-color: ${props => transparentize(0.7, props.theme.sidebar.active)};
   }
 `
-
-export const Menu = styled.nav`
-  display: flex;
-  flex-direction: column;
-  border-top: 1px dashed #a5a5a5;
-  margin: 20px 0 40px;
-  padding-top: 20px;
-`
-
-export const MenuItem = styled(Link)`
-  padding: 4px 0;
-  font-size: 20px;
-  color: ${props => props.theme.sidebar.foreground};
-  text-decoration: none;
-
-  &:hover,
-  &:active {
-    text-decoration: underline;
-  }
-
-  &.active {
-    font-weight: 700;
-  }
-`

src/components/ResourcesSidebar/useBuildTree.tsx

@@ -1,10 +0,0 @@
-import { IAllResourcesQuery, IFileQuery } from "../../types"
-import { join, traversePaths } from "../../utils"
-
-export default function useBuildTree(resources: IAllResourcesQuery) {
-  const objects = resources.allFile.edges.map(({ node: file }: IFileQuery) =>
-    traversePaths(file.relativePath.split("/"))
-  )
-
-  return join(objects)
-}

src/hooks/useBuildTree.tsx

@@ -0,0 +1,13 @@
+import { IAllFilesQuery, IFileQuery } from "../types"
+import { join, traversePaths } from "../utils"
+
+export default function useBuildTree(
+  resources: IAllFilesQuery,
+  basePath: string
+) {
+  const objects = resources.allFile.edges.map(({ node: file }: IFileQuery) =>
+    traversePaths(file.relativePath.split("/"), basePath)
+  )
+
+  return join(objects)
+}

src/layouts/ArchivesLayout/index.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from "react"
+
+import { ArchivesSidebar } from "../../components/ArchivesSidebar"
+import { ColumnLayout } from "../ColumnLayout"
+
+export const ArchivesLayout: FC = ({ children }) => {
+  return <ColumnLayout sidebar={ArchivesSidebar} content={children} />
+}

src/layouts/ColumnLayout/index.tsx

@@ -0,0 +1,48 @@
+import React, { FC, useMemo, useState } from "react"
+
+import { ColumnSidebar } from "../../components/ColumnSidebar"
+import { MobileHeader } from "../../components/MobileHeader"
+import { GlobalStyles } from "../../globalStyles"
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
+import { SidebarProvider } from "../../SidebarProvider"
+import { ThemeProvider } from "../../ThemeProvider"
+import * as SC from "./styles"
+
+interface IColumnLayoutProps {
+  sidebar: React.ReactNode
+  content: React.ReactNode
+}
+
+export const ColumnLayout: FC<IColumnLayoutProps> = ({ sidebar, content }) => {
+  const [activeMobileMenu, setActiveMobileMenu] = useState(false)
+  const { lock, unlock } = useLockBodyScroll()
+
+  function openMenu() {
+    setActiveMobileMenu(true)
+    lock()
+  }
+
+  function closeMenu() {
+    setActiveMobileMenu(false)
+    unlock()
+  }
+
+  return (
+    <ThemeProvider>
+      <SidebarProvider>
+        <GlobalStyles />
+        <SC.Main>
+          <MobileHeader openMenu={openMenu} />
+          {sidebar({ className: activeMobileMenu ? "is-open" : "" })}
+          <SC.MainContent>
+            <SC.Container>{content}</SC.Container>
+          </SC.MainContent>
+        </SC.Main>
+        <SC.Overlay
+          className={activeMobileMenu ? "is-open" : ""}
+          onClick={closeMenu}
+        />
+      </SidebarProvider>
+    </ThemeProvider>
+  )
+}

src/layouts/Layout/index.tsx

@@ -1,10 +1,3 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
 import { RouteComponentProps } from "@reach/router"
 import React, { FC, Fragment, useEffect } from "react"
 

src/layouts/ResourcesLayout/index.tsx

@@ -1,50 +1,8 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
+import React, { FC } from "react"
 
-import React, { FC, useState } from "react"
-
-import { MobileHeader } from "../../components/MobileHeader"
 import { ResourcesSidebar } from "../../components/ResourcesSidebar"
-import { GlobalStyles } from "../../globalStyles"
-import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
-import { SidebarProvider } from "../../SidebarProvider"
-import { ThemeProvider } from "../../ThemeProvider"
-import * as SC from "./styles"
+import { ColumnLayout } from "../ColumnLayout"
 
 export const ResourcesLayout: FC = ({ children }) => {
-  const [activeMobileMenu, setActiveMobileMenu] = useState(false)
-  const { lock, unlock } = useLockBodyScroll()
-
-  function openMenu() {
-    setActiveMobileMenu(true)
-    lock()
-  }
-
-  function closeMenu() {
-    setActiveMobileMenu(false)
-    unlock()
-  }
-
-  return (
-    <ThemeProvider>
-      <SidebarProvider>
-        <GlobalStyles />
-        <SC.Main>
-          <MobileHeader openMenu={openMenu} />
-          <ResourcesSidebar className={activeMobileMenu ? "is-open" : ""} />
-          <SC.MainContent>
-            <SC.Container>{children}</SC.Container>
-          </SC.MainContent>
-        </SC.Main>
-        <SC.Overlay
-          className={activeMobileMenu ? "is-open" : ""}
-          onClick={closeMenu}
-        />
-      </SidebarProvider>
-    </ThemeProvider>
-  )
+  return <ColumnLayout sidebar={ResourcesSidebar} content={children} />
 }

src/layouts/index.tsx

@@ -1,6 +1,7 @@
 import { WindowLocation } from "@reach/router"
-import React, { PropsWithChildren } from "react"
+import React, { PropsWithChildren, useMemo } from "react"
 import { LocationProvider } from "../LocationProvider"
+import { ArchivesLayout } from "./ArchivesLayout"
 import { Layout } from "./Layout"
 import { ResourcesLayout } from "./ResourcesLayout"
 
@@ -14,13 +15,20 @@ export default function BaseLayout({
   }
   location: WindowLocation
 }>) {
+  const ResolvedLayout = useMemo(() => {
+    switch (pageContext.layout) {
+      case "resources":
+        return ResourcesLayout
+      case "archives":
+        return ArchivesLayout
+      default:
+        return Layout
+    }
+  }, [pageContext.layout])
+
   return (
     <LocationProvider location={location}>
-      {pageContext.layout === "resources" ? (
-        <ResourcesLayout>{children}</ResourcesLayout>
-      ) : (
-        <Layout>{children}</Layout>
-      )}
+      <ResolvedLayout>{children}</ResolvedLayout>
     </LocationProvider>
   )
 }

src/pages/archives.tsx

@@ -0,0 +1,21 @@
+import React, { Fragment } from "react"
+
+import { ColumnLink } from "../components/ColumnLink"
+import { SEO } from "../components/SEO"
+
+function ResourcesPage() {
+  return (
+    <Fragment>
+      <SEO title="Tech Spotlights Archives" />
+      <p>Welcome to the TPH tech spotlights archives.</p>
+      <p>
+        This regroups the archives of our occasional, temporary channels that
+        cover a piece of technology that might be unknown to part of our users.
+        You can find those on{" "}
+        <ColumnLink to="/about">The Programmer's Hangout</ColumnLink>.
+      </p>
+    </Fragment>
+  )
+}
+
+export default ResourcesPage

src/pages/resources.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from "react"
 
 import packageJson from "../../package.json"
-import { ResourcesLink } from "../components/ResourcesLink"
+import { ColumnLink } from "../components/ColumnLink"
 import { ResourcesList } from "../components/ResourcesList"
 import { SEO } from "../components/SEO"
 
@@ -13,11 +13,11 @@ function ResourcesPage() {
       <p>
         This is meant as a small knowledge base for commonly answered questions
         on our Discord community,{" "}
-        <ResourcesLink to="/about">The Programmer's Hangout</ResourcesLink>.
+        <ColumnLink to="/about">The Programmer's Hangout</ColumnLink>.
       </p>
       <p>
         All of it is open source, and you can contribute to it on{" "}
-        <ResourcesLink to={packageJson.repository.url}>GitHub</ResourcesLink>.
+        <ColumnLink to={packageJson.repository.url}>GitHub</ColumnLink>.
       </p>
       <ResourcesList />
     </Fragment>

src/templates/archive.tsx

@@ -0,0 +1,44 @@
+import { graphql } from "gatsby"
+import React, { FC, Fragment } from "react"
+import { ColumnHeader } from "../components/ColumnHeader"
+import { Markdown } from "../components/Markdown"
+import { SEO } from "../components/SEO"
+import { humanize } from "../utils"
+
+// @todo maybe find alternative type for data
+const Archive: FC<any> = ({ data }) => {
+  const { relativePath, ctime } = data.file
+  const { html, excerpt, timeToRead } = data.file.post
+
+  const title = humanize(relativePath)
+
+  return (
+    <Fragment>
+      <SEO title={title} description={excerpt} />
+      <ColumnHeader
+        relativePath={relativePath}
+        basePath="/archives"
+        title={title}
+        createdAt={ctime}
+        timeToRead={timeToRead}
+      />
+      <Markdown content={html} />
+    </Fragment>
+  )
+}
+
+export default Archive
+
+export const query = graphql`
+  query Archive($file: String!) {
+    file(relativePath: { eq: $file }) {
+      relativePath
+      ctime
+      post: childMarkdownRemark {
+        html
+        excerpt
+        timeToRead
+      }
+    }
+  }
+`

src/templates/languagePost.tsx

@@ -1,7 +1,7 @@
 import { graphql } from "gatsby"
 import React, { FC, Fragment } from "react"
+import { ColumnHeader } from "../components/ColumnHeader"
 import { Markdown } from "../components/Markdown"
-import { ResourceHeader } from "../components/ResourceHeader"
 import { SEO } from "../components/SEO"
 
 import "katex/dist/katex.min.css"
@@ -14,8 +14,9 @@ const LanguagePost: FC<any> = ({ data }) => {
   return (
     <Fragment>
       <SEO title={frontmatter.title} description={excerpt} />
-      <ResourceHeader
+      <ColumnHeader
         relativePath={relativePath}
+        basePath="/resources"
         title={frontmatter.title}
         authors={fields.authors}
         createdAt={frontmatter.created_at}

src/types/index.d.ts

@@ -14,6 +14,12 @@ export interface IFolder {
 export type IFileOrFolder = IFile | IFolder
 
 export interface IFileQuery {
+  node: {
+    relativePath: string
+  }
+}
+
+export interface IFileResourceQuery {
   node: {
     relativePath: string
     childMarkdownRemark: {
@@ -25,8 +31,26 @@ export interface IFileQuery {
   }
 }
 
-export interface IAllResourcesQuery {
+export interface IFileArchiveQuery {
+  node: {
+    relativePath: string
+  }
+}
+
+export interface IAllFilesQuery {
   allFile: {
     edges: IFileQuery[]
   }
 }
+
+export interface IAllResourcesQuery extends IAllFilesQuery {
+  allFile: {
+    edges: IFileResourceQuery[]
+  }
+}
+
+export interface IAllArchivesQuery extends IAllFilesQuery {
+  allFile: {
+    edges: IFileArchiveQuery[]
+  }
+}

src/utils/index.ts

@@ -32,7 +32,7 @@ export function humanize(str: string): string {
 
 export function traversePaths(
   [head, ...tail]: string[],
-  basePath: string = "/resources"
+  basePath: string
 ): IFileOrFolder {
   const path = basePath + "/" + head
   const isFile = !tail.length
@@ -55,7 +55,7 @@ export function traversePaths(
 
 export function traversePathsToFiles(
   [head, ...tail]: string[],
-  basePath: string = "/resources",
+  basePath: string,
   depth: number = 0
 ): IFileOrFolder {
   const path = basePath + "/" + head + "/" + tail.join("/")