chore: rename docs to resources

README.md

@@ -15,7 +15,7 @@ The official website for [The Programmer's Hangout](https://discord.gg/programmi
 The site is built with [Gatsby](https://github.com/gatsbyjs/gatsby) which is used to leverage the power of React while
 allowing for static asset generation along with improved SEO.
 
-**This site and docs is still a work-in-progress and subject to change**
+**This site and resources is still a work-in-progress and subject to change**
 
 ### Setup
 
@@ -29,7 +29,7 @@ allowing for static asset generation along with improved SEO.
 
 If you're not familiar with Gatsby or React, you can still contribute by adding resources for languages you _are_ familiar with.
 
-The list of resources can be found [here](/src/content/docs)
+The list of resources can be found [here](/src/content/resources)
 
 #### Adding a new resource
 
@@ -63,4 +63,4 @@ external_resources:
 some content here
 ```
 
-You can look at other resources like [this one](/src/content/docs/javascript/promises/intro.md) for reference when creating your own. We use [ISO8601](https://en.wikipedia.org/wiki/ISO_8601) as the date format to confuse both Americans and Europeans an equal amount.
+You can look at other resources like [this one](/src/content/resources/javascript/promises/intro.md) for reference when creating your own. We use [ISO8601](https://en.wikipedia.org/wiki/ISO_8601) as the date format to confuse both Americans and Europeans an equal amount.

gatsby-config.js

@@ -44,8 +44,8 @@ module.exports = {
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `docs`,
-        path: `${__dirname}/src/content/docs`,
+        name: `resources`,
+        path: `${__dirname}/src/content/resources`,
       },
     },
     `gatsby-transformer-sharp`,

gatsby-node.js

@@ -26,12 +26,12 @@ const validateResourceArticle = node => {
   }
 }
 
-const createDocs = async ({ createPage, graphql }) => {
-  const languageDocs = path.resolve(`src/templates/languagePost.tsx`)
+const createResources = async ({ createPage, graphql }) => {
+  const languageResources = path.resolve(`src/templates/languagePost.tsx`)
 
   const result = await graphql(`
-    query FetchDocs {
-      allFile(filter: { sourceInstanceName: { eq: "docs" } }) {
+    query FetchResources {
+      allFile(filter: { sourceInstanceName: { eq: "resources" } }) {
         edges {
           node {
             relativePath
@@ -47,8 +47,8 @@ const createDocs = async ({ createPage, graphql }) => {
 
   return result.data.allFile.edges.forEach(({ node }) => {
     createPage({
-      path: path.join("docs", node.relativePath),
-      component: languageDocs,
+      path: path.join("resources", node.relativePath),
+      component: languageResources,
       context: {
         file: node.relativePath,
       },
@@ -78,5 +78,5 @@ exports.onCreateNode = async ({ node, getNode, actions }) => {
 
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
-  return createDocs({ createPage, graphql })
+  return createResources({ createPage, graphql })
 }

src/components/Header/index.tsx

@@ -23,7 +23,7 @@ export function Header() {
             <MenuItem to="/">rules</MenuItem>
             <MenuItem to="/">faq</MenuItem>
             <MenuItem to="/">hotbot</MenuItem>
-            <MenuItem to="/docs">documentation</MenuItem>
+            <MenuItem to="/resources">resources</MenuItem>
             <MenuItem to="/">tech spotlight</MenuItem>
           </SC.Menu>
         </SC.InnerWrapper>

src/components/ResourcesLayout/index.tsx

@@ -9,11 +9,11 @@ import React, { PropsWithChildren } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
 import { GlobalStyles } from "../../globalStyles"
-import { DocsSidebar } from "../DocsSidebar"
+import { ResourcesSidebar } from "../ResourcesSidebar"
 import { Footer } from "../Footer"
 import * as SC from "./styles"
 
-export function DocsLayout({ children }: PropsWithChildren<{}>) {
+export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
   const data = useStaticQuery(graphql`
     query {
       site {
@@ -28,7 +28,7 @@ export function DocsLayout({ children }: PropsWithChildren<{}>) {
     <div>
       <GlobalStyles />
       <SC.Main>
-        <DocsSidebar />
+        <ResourcesSidebar />
         <SC.MainContent>
           <h1>{data.site.siteMetadata.title}</h1>
           {children}

src/components/ResourcesSidebar/index.tsx

@@ -31,15 +31,15 @@ export interface IFileQuery {
   }
 }
 
-export interface IAllDocsQuery {
+export interface IAllResourcesQuery {
   allFile: {
     edges: IFileQuery[]
   }
 }
 
-const ALL_DOCS = graphql`
+const ALL_RESOURCES = graphql`
   query {
-    allFile(filter: { sourceInstanceName: { eq: "docs" } }) {
+    allFile(filter: { sourceInstanceName: { eq: "resources" } }) {
       edges {
         node {
           relativePath
@@ -85,13 +85,13 @@ function Folder({ item }: { item: IFolder }) {
   )
 }
 
-export function DocsSidebar() {
-  const docs = useStaticQuery<IAllDocsQuery>(ALL_DOCS)
-  const tree = useBuildTree(docs)
+export function ResourcesSidebar() {
+  const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
+  const tree = useBuildTree(resources)
 
   return (
-    <SC.DocsSidebarWrapper>
+    <SC.ResourcesSidebarWrapper>
       {tree.map(node => plantTree(node))}
-    </SC.DocsSidebarWrapper>
+    </SC.ResourcesSidebarWrapper>
   )
 }

src/components/ResourcesSidebar/styles.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components"
 import { Link } from "gatsby"
 
-export const DocsSidebarWrapper = styled.div`
+export const ResourcesSidebarWrapper = styled.div`
   box-sizing: border-box;
   padding: 0 16px;
   flex: 0 0 300px;

src/components/ResourcesSidebar/useBuildTree.tsx

@@ -5,13 +5,13 @@ import {
   IFileOrFolder,
   IFile,
   IFolder,
-  IAllDocsQuery,
+  IAllResourcesQuery,
   IFileQuery,
 } from "./index"
 
 function traverse(
   [head, ...tail]: string[],
-  basePath = "/docs"
+  basePath = "/resources"
 ): IFileOrFolder {
   const path = basePath + "/" + head
   const isFile = !tail.length
@@ -83,8 +83,8 @@ function join([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] {
   return [current, ...join(remaining)]
 }
 
-export default function useBuildTree(docs: IAllDocsQuery) {
-  const objects = docs.allFile.edges.map(({ node: file }: IFileQuery) =>
+export default function useBuildTree(resources: IAllResourcesQuery) {
+  const objects = resources.allFile.edges.map(({ node: file }: IFileQuery) =>
     traverse(file.relativePath.split("/"))
   )
 

src/components/ResourcesSidebarSection/index.tsx

@@ -1,14 +1,14 @@
 import React, { PropsWithChildren } from "react"
 import * as SC from "./styles"
 
-export interface DocsSidebarSectionProps {
+export interface ResourcesSidebarSectionProps {
   readonly title: string
 }
 
-export function DocsSidebarSection({
+export function ResourcesSidebarSection({
   title,
   children,
-}: PropsWithChildren<DocsSidebarSectionProps>) {
+}: PropsWithChildren<ResourcesSidebarSectionProps>) {
   return (
     <div>
       <SC.SidebarTitle>{title}</SC.SidebarTitle>

src/pages/docs.tsx

@@ -1,15 +0,0 @@
-import React from "react"
-
-import { DocsLayout } from "../components/DocsLayout"
-import { SEO } from "../components/SEO"
-
-function DocsPage() {
-  return (
-    <DocsLayout>
-      <SEO title="Docs" />
-      the docs
-    </DocsLayout>
-  )
-}
-
-export default DocsPage

src/pages/resources.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+import { ResourcesLayout } from "../components/ResourcesLayout"
+import { SEO } from "../components/SEO"
+
+function ResourcesPage() {
+  return (
+    <ResourcesLayout>
+      <SEO title="Resources" />
+      the resources
+    </ResourcesLayout>
+  )
+}
+
+export default ResourcesPage

src/templates/languagePost.tsx

@@ -2,17 +2,17 @@ import React from "react"
 import { graphql } from "gatsby"
 import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
-import { DocsLayout } from "../components/DocsLayout"
+import { ResourcesLayout } from "../components/ResourcesLayout"
 
 // @todo maybe find alternative type for data
 function LanguagePost({ data }: any) {
   const { html, frontmatter } = data.file.post
   console.log(data)
   return (
-    <DocsLayout>
+    <ResourcesLayout>
       <SEO title={frontmatter.title} />
       <Markdown content={html} />
-    </DocsLayout>
+    </ResourcesLayout>
   )
 }