pages for collections

gatsby-node.ts

@@ -0,0 +1,61 @@
+import type { Actions, CreatePagesArgs, GatsbyNode } from "gatsby";
+import path from "path";
+
+interface IMakePages {
+  createPage: Actions["createPage"]
+  graphql: CreatePagesArgs["graphql"]
+}
+
+export const createPages: GatsbyNode["createPages"] = async ({ actions: { createPage }, graphql }) => {
+
+  const utils: IMakePages = {createPage, graphql};
+
+  await makeCollectionPages(utils)
+}
+
+async function makeCollectionPages({createPage, graphql}: IMakePages) {
+  const results = await graphql(`
+      query qCollections {
+      allAirtableScdItems(
+        filter: {data: {scd_publish_status: {nin: ["duplicate-record-do-not-display", "do-not-display"]}}}
+      ) {
+        nodes {
+          data {
+            _xxxid
+            scd_publish_status
+            _xxxcollectionOwnerNamextxt
+            _xxxcollectionTitlextxt
+            _xxxcollectionDescriptionxtxt
+            _xxxcollectionExtentxtxt
+            _xcollectionFormatsxtxtxxxcollectionFormatsxtxt
+            _xxxcollectionContentTypesxtxtxxxcollectionContentTypesxtxt
+            _xxxcollectionGenresxtxtxxxcollectionGenresxtxt
+            _xxxcollectionFindingAidUrlxtxt
+            _xxxcollectionOwnerLocationCountryxtxt
+            _xxxcollectionOwnerLocationStatextxt
+            _xxxcollectionCatalogUrlxtxt
+            _xxxcollectionInventoryDescriptionxtxtxxxcollectionInventoryDescriptionxtxt
+            _xxxcollectionLanguagesxtxtxxxcollectionLanguagesxtxt
+            _xxxcollectionNotesxtxt
+            _xxxcollectionOwnerLocationCityxtxt
+            _xxxcollectionUsageStatementxtxt
+            _xxxcollectionWebsiteUrlxtxt
+          }
+        }
+      }
+    }
+  `)
+
+  const {nodes} = (results.data as Queries.qCollectionsQuery).allAirtableScdItems;
+
+  for (const node of nodes) {
+    const collection = node.data
+    createPage({
+      path: `/collections/${collection?._xxxid}/`,
+      component: path.resolve(`./src/templates/collection.tsx`),
+      context: {
+        ...collection
+      }
+    })
+  }
+}

src/components/Footer.tsx

@@ -5,7 +5,7 @@ import logoArsc from "../images/arsc-logo.png"
 import logoMith from "../images/MITHgrayscale.png"
 
 const Footer = () => {
-  return (<footer className="absolute bottom-0 w-full min-h-20 pt-4 border-t-gray-300 bg-gray-100">
+  return (<footer className="w-full min-h-20 pt-4 border-t-gray-300 bg-gray-100">
     <div className="w-full max-w-hlg items-center px-4 m-auto flex flex-wrap">
       <a className="block align-middle max-w-20 relative p-4 w-full flex-[0_0_8%]" href="https://radiopreservation.org/"><img alt="RPTF logo" src={logoRptf} /></a>
       <a className="block align-middle max-w-20 relative p-4 w-full flex-[0_0_8%]" href="http://arsc-audio.org/"><img alt="ARSC logo" src={logoArsc} /></a>

src/components/Layout.tsx

@@ -4,11 +4,11 @@ import Header from "./Header"
 import Footer from "./Footer"
 
 const Layout: React.FC<PropsWithChildren> = ({children}) => {
-  return (<>
+  return (<div>
       <Header/>
-      <main>{children}</main>
+      <main style={{minHeight: "calc(100vh - 220px)"}}>{children}</main>
       <Footer/>
-  </>)
+  </div>)
 }
 
 export default Layout

src/styles/global.css

@@ -8,6 +8,6 @@
   }
   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    @apply text-base relative pb-32;
+    @apply text-base;
   }
 }