Merge pull request #436 from the-programmers-hangout/techspotlight-rename

rename archive to spotlights

gatsby-config.js

@@ -68,8 +68,8 @@ module.exports = {
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `what-is-archive`,
-        path: `${__dirname}/src/content/archives`,
+        name: `spotlights`,
+        path: `${__dirname}/src/content/spotlights`,
       },
     },
     `gatsby-transformer-sharp`,

gatsby-node.js

@@ -7,7 +7,7 @@ const fs = require("fs")
 const requiredArticleFrontmatter = ["authors", "date"]
 
 const LAYOUT_RESOURCES = "resources"
-const LAYOUT_ARCHIVES = "archives"
+const LAYOUT_SPOTLIGHTS = "spotlights"
 const LAYOUT_REGULAR = "regular"
 const LAYOUT_HOME = "home"
 
@@ -20,8 +20,8 @@ function resolveLayout(path) {
     return LAYOUT_RESOURCES
   }
 
-  if (path.match(/archives/)) {
-    return LAYOUT_ARCHIVES
+  if (path.match(/spotlights/)) {
+    return LAYOUT_SPOTLIGHTS
   }
 
   return LAYOUT_REGULAR
@@ -128,12 +128,12 @@ const createResources = async ({ createPage, graphql }) => {
   }
 }
 
-const createArchives = async ({ createPage, graphql }) => {
-  const archive = path.resolve(`src/templates/archive.tsx`)
+const createSpotlights = async ({ createPage, graphql }) => {
+  const spotlights = path.resolve(`src/templates/spotlight.tsx`)
 
   const result = await graphql(`
-    query FetchArchives {
-      allFile(filter: { sourceInstanceName: { eq: "what-is-archive" } }) {
+    query FetchSpotlights {
+      allFile(filter: { sourceInstanceName: { eq: "spotlights" } }) {
         edges {
           node {
             relativePath
@@ -150,11 +150,11 @@ const createArchives = async ({ createPage, graphql }) => {
 
   return result.data.allFile.edges.forEach(({ node }) => {
     createPage({
-      path: path.posix.join("archives", node.relativePath),
-      component: archive,
+      path: path.posix.join("spotlights", node.relativePath),
+      component: spotlights,
       context: {
         file: node.relativePath,
-        layout: LAYOUT_ARCHIVES,
+        layout: LAYOUT_SPOTLIGHTS,
       },
     })
   })
@@ -163,7 +163,7 @@ const createArchives = async ({ createPage, graphql }) => {
 exports.onCreateNode = async ({ node, getNode, actions }) => {
   const { createPage, createNodeField } = actions
   // TODO: find a better way to avoid handling non-resources
-  // or better, attach authors to what-is archives
+  // or better, attach authors to spotlights
   if (node.internal.type === "Mdx" && node.frontmatter.authors) {
     const { frontmatter } = node
     const isDoc = Boolean(!frontmatter.path)
@@ -197,9 +197,9 @@ exports.onCreatePage = async ({ page, actions }) => {
     const oldPage = { ...page }
     page.matchPath = `/resources/*`
     deletePage(oldPage)
-  } else if (page.path.match(/^\/archives\/404/)) {
+  } else if (page.path.match(/^\/spotlights\/404/)) {
     const oldPage = { ...page }
-    page.matchPath = `/archives/*`
+    page.matchPath = `/spotlights/*`
     deletePage(oldPage)
   }
 
@@ -211,7 +211,7 @@ exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
 
   return Promise.all([
-    createArchives({ createPage, graphql }),
+    createSpotlights({ createPage, graphql }),
     createResources({ createPage, graphql }),
   ])
 }

generated/graphql.ts

@@ -2973,7 +2973,7 @@ export type Unnamed_1_QueryVariables = {};
 
 export type Unnamed_1_Query = (
   { __typename?: 'Query' }
-  & { archives: (
+  & { spotlights: (
     { __typename?: 'FileConnection' }
     & { edges: Array<(
       { __typename?: 'FileEdge' }

src/components/Home/index.tsx

@@ -78,7 +78,7 @@ export const Home: FC = () => {
           <MenuItem to="/faq">faq</MenuItem>
           <MenuItem to="/bots">bots</MenuItem>
           <MenuItem to="/resources">resources</MenuItem>
-          <MenuItem to="/archives">tech spotlights</MenuItem>
+          <MenuItem to="/spotlights">tech spotlights</MenuItem>
         </SC.Menu>
         <DiscordButton>join us</DiscordButton>
         <HomePartner />

src/components/Sidebar/index.tsx

@@ -44,7 +44,7 @@ export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
             <MenuItem to="/faq">faq</MenuItem>
             <MenuItem to="/bots">bots</MenuItem>
             <MenuItem to="/resources">resources</MenuItem>
-            <MenuItem to="/archives">tech spotlights</MenuItem>
+            <MenuItem to="/spotlights">tech spotlights</MenuItem>
           </SC.Menu>
 
           <ThemeToggler />

src/components/SpotlightsSidebar/index.tsx

@@ -9,10 +9,10 @@ import { humanize } from "../../utils"
 import { Sidebar } from "../Sidebar"
 import * as SC from "./styles"
 
-const ALL_ARCHIVES = graphql`
+const ALL_SPOTLIGHTS = graphql`
   query {
-    archives: allFile(
-      filter: { sourceInstanceName: { eq: "what-is-archive" } }
+    spotlights: allFile(
+      filter: { sourceInstanceName: { eq: "spotlights" } }
     ) {
       edges {
         node {
@@ -42,9 +42,9 @@ function Tree({ item }: { item: IFileOrFolder }) {
   )
 }
 
-export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-  const { archives } = useStaticQuery(ALL_ARCHIVES)
-  const tree = useBuildTree(archives, "/archives")
+export const SpotlightsSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
+  const { spotlights } = useStaticQuery(ALL_SPOTLIGHTS)
+  const tree = useBuildTree(spotlights, "/spotlights")
   const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
 
   return (

src/layouts/ArchivesLayout/index.tsx

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

src/layouts/SpotlightsLayout/index.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from "react"
+
+import { SpotlightsSidebar } from "../../components/SpotlightsSidebar"
+import { ColumnLayout } from "../ColumnLayout"
+
+export const SpotlightsLayout: FC = ({ children }) => {
+  return (
+    <ColumnLayout
+      title="Spotlights"
+      sidebar={SpotlightsSidebar}
+      content={children}
+    />
+  )
+}

src/layouts/index.tsx

@@ -1,7 +1,7 @@
 import { WindowLocation } from "@reach/router"
 import React, { FC, useMemo } from "react"
 import { LocationProvider } from "../LocationProvider"
-import { ArchivesLayout } from "./ArchivesLayout"
+import { SpotlightsLayout } from "./SpotlightsLayout"
 import { HomeLayout } from "./HomeLayout"
 import { PageLayout } from "./PageLayout"
 import { ResourcesLayout } from "./ResourcesLayout"
@@ -21,8 +21,8 @@ const BaseLayout: FC<IBaseLayout> = (props) => {
     switch (props.pageContext.layout) {
       case "resources":
         return ResourcesLayout
-      case "archives":
-        return ArchivesLayout
+      case "spotlights":
+        return SpotlightsLayout
       case "regular":
         return PageLayout
       default:

src/pages/spotlights/404.tsx

@@ -14,12 +14,12 @@ const FourZeroFourPage: React.FC<{ data: { allFile: FileConnection } }> = ({
   data,
 }: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
-    <SEO title="404: Archive Not found" />
-    <FourZeroFour title="ARCHIVE NOT FOUND">
+    <SEO title="404: Spotlight Not found" />
+    <FourZeroFour title="SPOTLIGHT NOT FOUND">
       <Location>
         {({ location }) => (
           <FourZeroFourHint
-            basepath="archives/"
+            basepath="spotlights/"
             location={location}
             data={data}
           />
@@ -33,7 +33,7 @@ export default FourZeroFourPage
 
 export const query = graphql`
   query {
-    allFile(filter: { sourceInstanceName: { eq: "what-is-archive" } }) {
+    allFile(filter: { sourceInstanceName: { eq: "spotlights" } }) {
       edges {
         node {
           relativePath

src/pages/spotlights/index.tsx

@@ -5,18 +5,18 @@ import { Link } from "../../components/Link"
 import { PageContent } from "../../components/PageContent"
 import { SEO } from "../../components/SEO"
 
-function ArchivesPage() {
+function SpotlightsPage() {
   return (
     <Fragment>
-      <SEO title="Tech Spotlights Archives" />
-      <HeaderBarebone title="Welcome to the TPH tech spotlights archives." />
+      <SEO title="Tech Spotlights" />
+      <HeaderBarebone title="Welcome to the TPH tech spotlights." />
 
       <PageContent
         content={
           <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{" "}
+            This is a collection of our technology spotlights that have been
+            highlighted in our discord server. Spotlights run for one month
+            within the server before appearing here. You can find those on{" "}
             <Link to="/about">The Programmer&apos;s Hangout</Link>.
           </p>
         }
@@ -25,4 +25,4 @@ function ArchivesPage() {
   )
 }
 
-export default ArchivesPage
+export default SpotlightsPage

src/templates/spotlight.tsx

@@ -7,7 +7,7 @@ import { humanize } from "../utils"
 import { PageContent } from "../components/PageContent"
 
 // @todo maybe find alternative type for data
-const Archive: FC<any> = ({ data }) => {
+const Spotlight: FC<any> = ({ data }) => {
   const { relativePath } = data.file
   const { body, excerpt, fields, timeToRead, frontmatter } = data.file.post
 
@@ -18,7 +18,7 @@ const Archive: FC<any> = ({ data }) => {
       <SEO title={title} description={excerpt} />
       <Header
         relativePath={relativePath}
-        basePath="/archives"
+        basePath="/spotlights"
         title={title}
         authors={fields.authors}
         createdAt={frontmatter.created_at}
@@ -30,10 +30,10 @@ const Archive: FC<any> = ({ data }) => {
   )
 }
 
-export default Archive
+export default Spotlight
 
 export const query = graphql`
-  query Archive($file: String!) {
+  query Spotlight($file: String!) {
     file(relativePath: { eq: $file }) {
       relativePath
       post: childMdx {

src/types/index.d.ts

@@ -32,7 +32,7 @@ export interface IFileResourceQuery {
   }
 }
 
-export interface IFileArchiveQuery {
+export interface IFileSpotlightQuery {
   node: {
     relativePath: string
   }
@@ -50,9 +50,9 @@ export interface IAllResourcesQuery extends IAllFilesQuery {
   }
 }
 
-export interface IAllArchivesQuery extends IAllFilesQuery {
+export interface IAllSpotlightsQuery extends IAllFilesQuery {
   allFile: {
-    edges: IFileArchiveQuery[]
+    edges: IFileSpotlightQuery[]
   }
 }