= ({ sidebar, content }) => {
+ const [activeMobileMenu, setActiveMobileMenu] = useState(false)
+ const { lock, unlock } = useLockBodyScroll()
+
+ function openMenu() {
+ setActiveMobileMenu(true)
+ lock()
+ }
+
+ function closeMenu() {
+ setActiveMobileMenu(false)
+ unlock()
+ }
+
+ return (
+
+
+
+
+
+ {sidebar({ className: activeMobileMenu ? "is-open" : "" })}
+
+ {content}
+
+
+
+
+
+ )
+}
diff --git a/src/layouts/ResourcesLayout/styles.tsx b/src/layouts/ColumnLayout/styles.tsx
similarity index 100%
rename from src/layouts/ResourcesLayout/styles.tsx
rename to src/layouts/ColumnLayout/styles.tsx
diff --git a/src/layouts/Layout/index.tsx b/src/layouts/Layout/index.tsx
index cc9fcf9..8f63c2e 100644
--- a/src/layouts/Layout/index.tsx
+++ b/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"
diff --git a/src/layouts/ResourcesLayout/index.tsx b/src/layouts/ResourcesLayout/index.tsx
index 45461c1..9d5a020 100644
--- a/src/layouts/ResourcesLayout/index.tsx
+++ b/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 (
-
-
-
-
-
-
-
- {children}
-
-
-
-
-
- )
+ return
}
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 10dcad1..e386a6b 100644
--- a/src/layouts/index.tsx
+++ b/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 (
- {pageContext.layout === "resources" ? (
- {children}
- ) : (
- {children}
- )}
+ {children}
)
}
diff --git a/src/pages/archives.tsx b/src/pages/archives.tsx
new file mode 100644
index 0000000..cc84a1f
--- /dev/null
+++ b/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 (
+
+
+ Welcome to the TPH tech spotlights archives.
+
+ 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{" "}
+ The Programmer's Hangout.
+
+
+ )
+}
+
+export default ResourcesPage
diff --git a/src/pages/resources.tsx b/src/pages/resources.tsx
index 9b062e4..a1cafc0 100644
--- a/src/pages/resources.tsx
+++ b/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() {
This is meant as a small knowledge base for commonly answered questions
on our Discord community,{" "}
- The Programmer's Hangout.
+ The Programmer's Hangout.
All of it is open source, and you can contribute to it on{" "}
- GitHub.
+ GitHub.
diff --git a/src/templates/archive.tsx b/src/templates/archive.tsx
new file mode 100644
index 0000000..e04d3d6
--- /dev/null
+++ b/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 = ({ data }) => {
+ const { relativePath, ctime } = data.file
+ const { html, excerpt, timeToRead } = data.file.post
+
+ const title = humanize(relativePath)
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default Archive
+
+export const query = graphql`
+ query Archive($file: String!) {
+ file(relativePath: { eq: $file }) {
+ relativePath
+ ctime
+ post: childMarkdownRemark {
+ html
+ excerpt
+ timeToRead
+ }
+ }
+ }
+`
diff --git a/src/templates/languagePost.tsx b/src/templates/languagePost.tsx
index b57977b..fa9828e 100644
--- a/src/templates/languagePost.tsx
+++ b/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 = ({ data }) => {
return (
-