fixes for gh-pages

gatsby-config.ts

@@ -1,8 +1,10 @@
 import type { GatsbyConfig } from "gatsby";
 
 const baseId = process.env.AIRTABLE_SCD_BASE_ID;
+const basePath = process.env.BASEPATH
 
 const config: GatsbyConfig = {
+  pathPrefix: basePath,
   siteMetadata: {
     title: `scd`,
     siteUrl: `https://www.yourdomain.tld`

package.json

@@ -11,7 +11,7 @@
     "develop": "node --env-file=.env node_modules/.bin/gatsby develop",
     "start": "node --env-file=.env node_modules/.bin/gatsby develop",
     "build": "node --env-file=.env node_modules/.bin/gatsby build",
-    "build-pages": "BASEPATH=/scd gatsby build --prefix-paths",
+    "build-pages": "BASEPATH=/scd node --env-file=.env node_modules/.bin/gatsby build --prefix-paths",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "typecheck": "tsc --noEmit"

src/components/Header.tsx

@@ -12,7 +12,7 @@ const Header = () => {
         RPTF/ARSC Sound Collections Database
       </Link>
       <ul className="flex basis-auto justify-end grow items-center list-none text-slate-100">
-        <li className="p-2 hover:text-slate-300"><Link to="about">About</Link></li>
+        <li className="p-2 hover:text-slate-300"><Link to="/about">About</Link></li>
         <li className="p-2 hover:text-slate-300"><Link to="#">Recommend a Collection</Link></li>
       </ul>
     </nav>

src/pages/index.tsx

@@ -1,12 +1,16 @@
 import * as React from "react"
-import type { HeadFC, PageProps } from "gatsby"
+import { withPrefix, type HeadFC, type PageProps } from "gatsby"
 import Layout from "../components/Layout"
 import Button from "../components/Button"
 
 const IndexPage: React.FC<PageProps> = () => {
+  const heroStyle = {
+    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${withPrefix("/images/werd.jpg")})`
+  }
+
   return (
     <Layout>
-      <div className="hero bg-linear min-h-[70vmin] bg-center bg-no-repeat bg-cover relative border-r-0 px-0 py-16 mb-8">
+      <div className="bg-linear min-h-[70vmin] bg-center bg-no-repeat bg-cover relative border-r-0 px-0 py-16 mb-8" style={heroStyle}>
         <div className="w-full max-w-hlg md:flex-nowrap  md:justify-start justify-between items-center px-4 m-auto flex flex-[0 0 50%]">
           <div className="max-w-[50%] text-gray-200">
             <h2 className="text-[2rem] mb-2 leading-tight" id="welcome-to-the-sound-collections-database">Welcome to the Sound Collections Database!</h2>
@@ -16,7 +20,7 @@ const IndexPage: React.FC<PageProps> = () => {
             <p>Use the search box above to search for collections by keyword. You can also click below to browse everything, or to recommend collections for inclusion.</p>
 
             <p>
-              <Button href="/search">Browse</Button>
+              <Button href="search">Browse</Button>
               <Button href="#">Recommend a collection</Button>
             </p>
             <p>Image: <a href="https://artsandculture.google.com/asset/werd-radio-station/NAGIYZDoGYaZPA">WERD radio station</a>, <a href="https://aaamc.indiana.edu/"><abbr title="Archives of African American Music and Culture">AAAMC</abbr></a></p>

src/pages/search.tsx

@@ -108,7 +108,7 @@ const SearchPage: React.FC<PageProps> = ({data}) => {
     } else {
       urlParams.append("sort", val)
     }
-    history.pushState(null, '', '/search/?' + urlParams.toString());
+    history.pushState(null, '', '?' + urlParams.toString());
   }
 
   const handlePageChange = (_event: React.ChangeEvent<unknown>, page: number) => {
@@ -143,7 +143,7 @@ const SearchPage: React.FC<PageProps> = ({data}) => {
       if (newP > 0 && newP <= totalPages) {
         setCurrentPage(newP)
         // Update search without refreshing the page.
-        history.pushState(null, '', '/search/?' + urlParams.toString());
+        history.pushState(null, '', '?' + urlParams.toString());
       }
     }
     return <div>{prev}<strong>{startIndex+1} – {endIndex}</strong> of <strong>{results.length}</strong>{next}</div>

src/pages/{markdownRemark.frontmatter__slug}.tsx

@@ -18,8 +18,10 @@ export default function MdPageTemplate({data}: MdPageTemplateProps) {
   const { frontmatter, html } = markdownRemark
   return (
     <Layout>
-      <h1>{frontmatter.title}</h1>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <div className="w-full max-w-hlg md:flex-nowrap  md:justify-start justify-between items-center px-4 m-auto">
+        <h2 className="text-4xl">{frontmatter.title}</h2>
+        <div dangerouslySetInnerHTML={{ __html: html }}/>
+      </div>
     </Layout>
   )
 }

src/styles/global.css

@@ -10,7 +10,4 @@
     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;
   }
-  .hero {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/werd.jpg");
-  }
 }

tailwind.config.js

@@ -11,9 +11,6 @@ module.exports = {
       },
       maxWidth: {
         'hlg': '1140px'
-      },
-      backgroundImage: {
-        'hero-pattern': "url('/images/werd.jpg')",
       }
     },
   },