1.5.0

Author: steebe

.github/workflows/main.yml

@@ -30,6 +30,11 @@ jobs:
       - name: compile
         run: npm run compile
 
+      - name: Create .env.production
+        run: |
+          echo "GATSBY_GOOGLE_MAPS_API_KEY=${{ secrets.GATSBY_GOOGLE_MAPS_API_KEY }}" >> .env.production
+          echo "GATSBY_FONTAWESOME_KIT_URL=${{ secrets.GATSBY_FONTAWESOME_KIT_URL }}" >> .env.production
+
       - name: Gatsby Publish
         uses: steebe/gatsby-gh-pages-action@v2.2.4
         with:

.gitignore

@@ -9,5 +9,8 @@ build/
 # IDE
 .idea/
 
+# Environment variables
+.env*
+
 # System
 **/.DS_Store

README.md

@@ -4,6 +4,7 @@ A revamping of Steve Bass’ personal site, using Gatsby.
 
 ### Release Notes
 
+- `1.5.0`: /antipode and minor /tools update
 - `1.4.1`: Gatsby 5.16 ; React 19
 - `1.4.0`: Easter egg, featuring central widgetiness
 - `1.3.0`: Restored blog with more intentional line listing with fixed sorting and tagging capabilities

package-lock.json

@@ -9,7 +9,7 @@
   ],
   "name": "steebe.dev",
   "private": true,
-  "version": "1.4.1",
+  "version": "1.5.0",
   "scripts": {
     "build": "gatsby build",
     "clean": "gatsby clean",
@@ -27,6 +27,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mdx-js/react": "^2.2.1",
+    "@react-google-maps/api": "^2.20.8",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "classnames": "^2.3.2",

package.json

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Footer from "../footer/footer";
 
 export const Head = () => (
-  <script src="https://kit.fontawesome.com/fa5a068953.js" crossOrigin="anonymous"></script>
+  <script src={process.env.GATSBY_FONTAWESOME_KIT_URL} crossOrigin="anonymous"></script>
 );
 
 type Props = {
@@ -60,15 +60,13 @@ class NavLocation {
 
 const Layout: React.FC<Props> = ({ children }) => {
   const path = typeof window !== "undefined" ? window.location.pathname : undefined;
-  // const isPhotos = path?.includes("photos");
   const isTools = path?.includes("tool");
   const isAbout = path?.includes("about");
   const isBlogRoot = path?.endsWith("lines") || path?.endsWith("lines/") || path?.includes("lines");
   const isHome = path === "/";
 
   const navLocations = [
     new NavLocation(isHome, TITLES.HOME),
-    // new NavLocation(isPhotos, TITLES.PHOTOS),
     new NavLocation(isBlogRoot, TITLES.LINES),
     new NavLocation(isTools, TITLES.TOOLS),
     new NavLocation(isAbout, TITLES.ABOUT),
@@ -89,7 +87,7 @@ const Layout: React.FC<Props> = ({ children }) => {
             ))}
           </ul>
         </nav>
-        <p>{children}</p>
+        {children}
       </div>
       <Footer />
     </>

src/components/layout/layout.tsx

@@ -1,7 +1,9 @@
 import React, { ReactNode } from "react";
 import { siteImage } from "../globals.module.css";
-import { container, contentContainer, description, image } from "./tools.module.css";
+import { contentContainer, description, image } from "./tools.module.css";
 import { StaticImage } from "gatsby-plugin-image";
+import Widget from "../widgets/widget";
+import AntipodeWidget from "../widgets/antipodeWidget";
 
 type Tool = {
   name: string;
@@ -44,21 +46,17 @@ const Tools = () => {
   ];
 
   return (
-    <>
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
       {tools.map((tool) => (
-        <div className={container} key={tool.name}>
-          <h1>
-            <a href={tool.link} target="_blank" rel="noreferrer">
-              {tool.name}
-            </a>
-          </h1>
+        <Widget key={tool.name} title={tool.name} url={tool.link}>
           <div className={contentContainer}>
             <div className={image}>{tool.image}</div>
             <p className={description}>{tool.description}</p>
           </div>
-        </div>
+        </Widget>
       ))}
-    </>
+      <AntipodeWidget />
+    </div>
   );
 };