soames-gatsby-theme 0.1.0

package/dist/src/templates/blog-post-archive.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageQuery = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gatsby_1 = require("gatsby");
+const html_react_parser_1 = __importDefault(require("html-react-parser"));
+const Layout_1 = __importDefault(require("../components/Layout"));
+const Seo_1 = __importDefault(require("../components/Seo"));
+const HeroHeader_1 = __importDefault(require("../components/HeroHeader"));
+const BlogIndex = ({ data, pageContext }) => {
+    const posts = data.allWpPost.nodes;
+    const archive = data.wpPage;
+    const { nextPagePath, previousPagePath } = pageContext;
+    if (!posts.length) {
+        return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, backgroundImageTitle: archive.featuredImage?.node.title || null }), (0, jsx_runtime_1.jsx)("p", { children: "No blog posts found. Add posts to your WordPress site and they'll appear here!" })] }));
+    }
+    const groupedPosts = posts.reduce((groups, post, index) => {
+        if (index % 3 === 0) {
+            groups.push([post]);
+        }
+        else {
+            groups[groups.length - 1].push(post);
+        }
+        return groups;
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { isHomePage: true, children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, backgroundImageTitle: archive.featuredImage?.node.title || null }), (0, jsx_runtime_1.jsx)("section", { className: "soames-blog-roll", children: (0, jsx_runtime_1.jsx)("div", { className: "container", children: groupedPosts.map((group, index) => ((0, jsx_runtime_1.jsx)("div", { className: "media-container-row", children: group.map((post, idx) => ((0, jsx_runtime_1.jsx)("div", { className: "card p-3 col-12 col-lg-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-box", children: [(0, jsx_runtime_1.jsx)("h4", { className: "card-title mbr-fonts-style display-5", children: (0, html_react_parser_1.default)(post.title) }), (0, jsx_runtime_1.jsx)("h4", { className: "mbr-fonts-style display-7", children: post.date }), (0, html_react_parser_1.default)(post.excerpt)] }), (0, jsx_runtime_1.jsx)("div", { className: "mbr-section-btn text-center", children: (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${post.uri}`, itemProp: "url", className: "btn btn-primary display-4", children: (0, jsx_runtime_1.jsx)("span", { itemProp: "headline", children: "Read More" }) }) })] }) }, idx))) }, index))) }) }), (0, jsx_runtime_1.jsxs)("section", { children: [previousPagePath && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${previousPagePath}`, children: "Previous page" }), (0, jsx_runtime_1.jsx)("br", {})] })), nextPagePath && (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${nextPagePath}`, children: "Next page" })] })] }));
+};
+exports.default = BlogIndex;
+exports.pageQuery = (0, gatsby_1.graphql) `
+  query WordPressPostArchive($offset: Int!, $postsPerPage: Int!) {
+    allWpPost(sort: { date: DESC }, limit: $postsPerPage, skip: $offset) {
+      nodes {
+        excerpt
+        uri
+        date(formatString: "MMMM DD, YYYY")
+        title
+        featuredImage {
+          node {
+            guid
+            title
+          }
+        }
+      }
+    }
+    wpPage(isPostsPage: { eq: true }) {
+      title
+      excerpt
+      featuredImage {
+        node {
+          guid
+          title
+        }
+      }
+    }
+  }
+`;

package/dist/src/templates/blog-post.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageQuery = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gatsby_1 = require("gatsby");
+const gatsby_plugin_image_1 = require("gatsby-plugin-image");
+const html_react_parser_1 = __importDefault(require("html-react-parser"));
+require("../styles/vendor/wordpress-blocks.css");
+const Bio_1 = __importDefault(require("../components/Bio"));
+const Layout_1 = __importDefault(require("../components/Layout"));
+const Seo_1 = __importDefault(require("../components/Seo"));
+const HeroHeader_1 = __importDefault(require("../components/HeroHeader"));
+const BlogSidebar_1 = __importDefault(require("../components/BlogSidebar"));
+const BlogPostTemplate = ({ data }) => {
+    const { post, previous, next, page } = data;
+    const featuredImageData = post.featuredImage?.node?.gatsbyImage ?? null;
+    const featuredImageAlt = post.featuredImage?.node?.altText || "Featured image";
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: post.title || "", description: post.excerpt || undefined }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: page?.title ? (0, html_react_parser_1.default)(page.title) : "Blog", subhead: page?.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page?.featuredImage?.node?.guid || null, backgroundImageTitle: page?.title || null }), (0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsxs)("div", { className: "media-container-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-8", children: (0, jsx_runtime_1.jsxs)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-blog-content", children: [(0, jsx_runtime_1.jsxs)("article", { className: "blog-post", itemScope: true, itemType: "http://schema.org/Article", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h1", { itemProp: "headline", children: post.title ? (0, html_react_parser_1.default)(post.title) : "" }), (0, jsx_runtime_1.jsx)("p", { children: post.date })] }), post.content && ((0, jsx_runtime_1.jsx)("section", { itemProp: "articleBody", className: "blog-post-content", children: (0, html_react_parser_1.default)(post.content) })), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("footer", { children: (0, jsx_runtime_1.jsx)(Bio_1.default, {}) })] }), (0, jsx_runtime_1.jsx)("nav", { className: "blog-post-nav", children: (0, jsx_runtime_1.jsxs)("ul", { style: {
+                                                display: `flex`,
+                                                flexWrap: `wrap`,
+                                                justifyContent: `space-between`,
+                                                listStyle: `none`,
+                                                padding: 0,
+                                            }, children: [(0, jsx_runtime_1.jsx)("li", { children: previous && ((0, jsx_runtime_1.jsxs)(gatsby_1.Link, { to: `/blog${previous.uri}`, rel: "prev", children: ["\u2190 ", previous.title ? (0, html_react_parser_1.default)(previous.title) : ""] })) }), (0, jsx_runtime_1.jsx)("li", { children: next && ((0, jsx_runtime_1.jsxs)(gatsby_1.Link, { to: `/blog${next.uri}`, rel: "next", children: [next.title ? (0, html_react_parser_1.default)(next.title) : "", " \u2192"] })) })] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-4", children: (0, jsx_runtime_1.jsxs)("section", { id: "soames-gatsby-sidebar-container", className: "soames-gatsby-sidebar", children: [featuredImageData && ((0, jsx_runtime_1.jsx)(gatsby_plugin_image_1.GatsbyImage, { image: featuredImageData, alt: featuredImageAlt, style: { marginBottom: 50 } })), (0, jsx_runtime_1.jsx)("h1", { children: "Recent Posts" }), (0, jsx_runtime_1.jsx)(BlogSidebar_1.default, { postId: post.id })] }) })] }) })] }));
+};
+exports.default = BlogPostTemplate;
+exports.pageQuery = (0, gatsby_1.graphql) `
+  query BlogPostById($id: String!, $previousPostId: String, $nextPostId: String) {
+    post: wpPost(id: { eq: $id }) {
+      id
+      excerpt
+      content
+      title
+      date(formatString: "MMMM DD, YYYY")
+      featuredImage {
+        node {
+          altText
+          gatsbyImage(
+            width: 1200
+            layout: CONSTRAINED
+            placeholder: BLURRED
+          )
+        }
+      }
+    }
+    previous: wpPost(id: { eq: $previousPostId }) {
+      uri
+      title
+    }
+    next: wpPost(id: { eq: $nextPostId }) {
+      uri
+      title
+    }
+    page: wpPage(isPostsPage: { eq: true }) {
+      title
+      excerpt
+      featuredImage {
+        node {
+          guid
+        }
+      }
+    }
+  }
+`;

package/dist/src/templates/page.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageQuery = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gatsby_1 = require("gatsby");
+const html_react_parser_1 = __importDefault(require("html-react-parser"));
+const Layout_1 = __importDefault(require("../components/Layout"));
+const Seo_1 = __importDefault(require("../components/Seo"));
+const HeroHeader_1 = __importDefault(require("../components/HeroHeader"));
+const Shortcodes_1 = require("../utils/shortcodes/Shortcodes");
+// Gutenberg block styles
+require("../styles/vendor/wordpress-blocks.css");
+const Page = ({ data: { page } }) => ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: page.title }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: (0, html_react_parser_1.default)(page.title), subhead: page.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page.featuredImage?.node.guid || null, backgroundImageTitle: page.featuredImage?.node.title || null }), page.content && ((0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-content", children: (0, jsx_runtime_1.jsx)(Shortcodes_1.Shortcodes, { children: page.content }) }))] }));
+exports.default = Page;
+exports.pageQuery = (0, gatsby_1.graphql) `
+  query PageById($id: String!) {
+    page: wpPage(id: { eq: $id }) {
+      id
+      title
+      excerpt
+      content
+      featuredImage {
+        node {
+          title
+          guid
+        }
+      }
+    }
+  }
+`;

package/dist/src/utils/shortcodes/Shortcodes.js

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Shortcodes = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const html_react_parser_1 = __importDefault(require("html-react-parser"));
+const getAttributes_1 = require("./getAttributes");
+const getContent_1 = require("./getContent");
+const RemoveContentAreaPadding_1 = __importDefault(require("../../components/shortcodes/RemoveContentAreaPadding"));
+const SoamesTitle_1 = __importDefault(require("../../components/shortcodes/SoamesTitle"));
+const SoamesTitleBar_1 = __importDefault(require("../../components/shortcodes/SoamesTitleBar"));
+const SoamesTitleBarLg_1 = __importDefault(require("../../components/shortcodes/SoamesTitleBarLg"));
+const SoamesTextBlock_1 = __importDefault(require("../../components/shortcodes/SoamesTextBlock"));
+const SoamesIconList_1 = __importDefault(require("../../components/shortcodes/SoamesIconList"));
+const SoamesFeature_1 = __importDefault(require("../../components/shortcodes/SoamesFeature"));
+const SoamesGalleryMenu_1 = __importDefault(require("../../components/shortcodes/SoamesGalleryMenu"));
+const SoamesVideo_1 = __importDefault(require("../../components/shortcodes/SoamesVideo"));
+const SoamesTextList_1 = __importDefault(require("../../components/shortcodes/SoamesTextList"));
+const SoamesSoundCloud_1 = __importDefault(require("../../components/shortcodes/SoamesSoundCloud"));
+const handleShortcodes = (node) => {
+    if (node.type === "tag" && node.children && node.children.length > 0) {
+        const child = node.children[0];
+        if (child.type === "text") {
+            const shortcode = child.data.trim();
+            if (shortcode === "[soames-remove-content-area-padding]") {
+                return (0, jsx_runtime_1.jsx)(RemoveContentAreaPadding_1.default, {});
+            }
+            const shortcodeMappings = [
+                {
+                    regex: /\[soames-title([^\]]*)\]([\s\S]*?)\[\/soames-title\]/,
+                    component: SoamesTitle_1.default,
+                    propsExtractor: (match) => ({ title: (0, getContent_1.getContent)(match) }),
+                },
+                {
+                    regex: /\[soames-title-bar([^\]]*)\]([\s\S]*?)\[\/soames-title-bar\]/,
+                    component: SoamesTitleBar_1.default,
+                    propsExtractor: (match) => ({ title: (0, getContent_1.getContent)(match) }),
+                },
+                {
+                    regex: /\[soames-title-bar-lg([^\]]*)\]([\s\S]*?)\[\/soames-title-bar-lg\]/,
+                    component: SoamesTitleBarLg_1.default,
+                    propsExtractor: (match) => ({
+                        title: (0, getContent_1.getContent)(match),
+                        attributes: (0, getAttributes_1.getAttributes)(match),
+                    }),
+                },
+                {
+                    regex: /\[soames-text-block([^\]]*)\]([\s\S]*?)\[\/soames-text-block\]/,
+                    component: SoamesTextBlock_1.default,
+                    propsExtractor: (match) => ({ content: (0, getContent_1.getContent)(match) }),
+                },
+                {
+                    regex: /\[soames-text-list([^\]]*)\]([\s\S]*?)\[\/soames-text-list\]/,
+                    component: SoamesTextList_1.default,
+                    propsExtractor: (match) => ({ content: (0, getContent_1.getContent)(match) }),
+                },
+                {
+                    regex: /\[soames-icon-list([^\]]*)\]/,
+                    component: SoamesIconList_1.default,
+                    propsExtractor: (match) => ({ attributes: (0, getAttributes_1.getAttributes)(match) }),
+                },
+                {
+                    regex: /\[soames-feature([^\]]*)\]([\s\S]*?)\[\/soames-feature\]/,
+                    component: SoamesFeature_1.default,
+                    propsExtractor: (match) => ({
+                        content: (0, getContent_1.getContent)(match),
+                        attributes: (0, getAttributes_1.getAttributes)(match),
+                    }),
+                },
+                {
+                    regex: /\[soames-gallery-menu([^\]]*)\]/,
+                    component: SoamesGalleryMenu_1.default,
+                    propsExtractor: (match) => ({ attributes: (0, getAttributes_1.getAttributes)(match) }),
+                },
+                {
+                    regex: /\[soames-video([^\]]*)\]/,
+                    component: SoamesVideo_1.default,
+                    propsExtractor: (match) => ({ attributes: (0, getAttributes_1.getAttributes)(match) }),
+                },
+                {
+                    regex: /\[soames-soundcloud([^\]]*)\]/,
+                    component: SoamesSoundCloud_1.default,
+                    propsExtractor: (match) => ({ attributes: (0, getAttributes_1.getAttributes)(match) }),
+                },
+            ];
+            for (const { regex, component: Component, propsExtractor } of shortcodeMappings) {
+                const match = shortcode.match(regex);
+                if (match) {
+                    const props = propsExtractor(match);
+                    return (0, jsx_runtime_1.jsx)(Component, { ...props });
+                }
+            }
+        }
+    }
+    return undefined;
+};
+const Shortcodes = ({ children }) => {
+    const reactElements = (0, html_react_parser_1.default)(children || "", {
+        replace: handleShortcodes,
+    });
+    return (0, jsx_runtime_1.jsx)("div", { children: reactElements });
+};
+exports.Shortcodes = Shortcodes;

package/dist/src/utils/shortcodes/getAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+// src/utils/shortcodes/getAttributes.ts
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAttributes = getAttributes;
+function getAttributes(match) {
+    if (!match || !match[1])
+        return null;
+    const attributes = {};
+    const attrString = match[1];
+    const regex = /(\w+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/g;
+    let attrMatch;
+    while ((attrMatch = regex.exec(attrString)) !== null) {
+        const key = attrMatch[1];
+        const value = attrMatch[2].replace(/[″”]+/g, '').split(',');
+        attributes[key] = value;
+    }
+    return attributes;
+}

package/dist/src/utils/shortcodes/getContent.js

@@ -0,0 +1,7 @@
+"use strict";
+// src/utils/shortcodes/getContent.ts
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContent = getContent;
+function getContent(match) {
+    return match && match[2] ? match[2] : null;
+}

package/gatsby-browser.js

@@ -0,0 +1,11 @@
+// Vendor styles only
+import "bootstrap/dist/css/bootstrap.min.css";
+import "jquery/dist/jquery.min.js";
+import "@popperjs/core/dist/umd/popper.min.js";
+import "bootstrap/dist/js/bootstrap.min.js";
+//import "./src/styles/vendor/normalize.css";
+import "./src/styles/vendor/wordpress-blocks.css";
+
+// Soames - custom JS
+import "./static/js/soames-nav-dropdown.js";
+import "./static/js/soames-navbar-dropdown.js";

package/gatsby-node.js

@@ -0,0 +1,138 @@
+const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
+
+exports.createResolvers = ({ actions, cache, createNodeId, createResolvers, store, reporter }) => {
+  const { createNode } = actions;
+  createResolvers({
+    WpMediaItem: {
+      localFile: {
+        type: `File`,
+        resolve(source) {
+          return createRemoteFileNode({
+            url: source.sourceUrl,
+            store,
+            cache,
+            createNode,
+            createNodeId,
+            reporter,
+          });
+        },
+      },
+    },
+  });
+};
+
+const path = require('path');
+const { chunk } = require('lodash');
+
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  const { createPage } = actions;
+
+  // Fetch posts
+  const postsResult = await graphql(`
+    query WpPosts {
+      allWpPost(sort: { date: DESC }) {
+        edges {
+          previous {
+            id
+          }
+          node {
+            id
+            uri
+          }
+          next {
+            id
+          }
+        }
+      }
+    }
+  `);
+
+  if (postsResult.errors) {
+    reporter.panicOnBuild('Error loading blog posts', postsResult.errors);
+    return;
+  }
+
+  const postEdges = postsResult.data.allWpPost.edges;
+
+  // Fetch pages
+  const pagesResult = await graphql(`
+    query WpPages {
+      allWpPage {
+        edges {
+          node {
+            id
+            uri
+            title
+          }
+        }
+      }
+    }
+  `);
+
+  if (pagesResult.errors) {
+    reporter.panicOnBuild('Error loading pages', pagesResult.errors);
+    return;
+  }
+
+  const pageEdges = pagesResult.data.allWpPage.edges;
+
+  // Create individual blog post pages
+  postEdges.forEach(({ previous, node, next }) => {
+    createPage({
+      path: `/blog${node.uri}`,
+      component: path.resolve(__dirname, 'src/templates/blog-post.tsx'),
+      context: {
+        id: node.id,
+        previousPostId: previous ? previous.id : null,
+        nextPostId: next ? next.id : null,
+      },
+    });
+  });
+
+  // Create blog post archive pages
+  const readingSettingsResult = await graphql(`
+    {
+      wp {
+        readingSettings {
+          postsPerPage
+        }
+      }
+    }
+  `);
+
+  if (readingSettingsResult.errors) {
+    reporter.panicOnBuild('Error loading reading settings', readingSettingsResult.errors);
+    return;
+  }
+
+  const postsPerPage = readingSettingsResult.data.wp.readingSettings.postsPerPage;
+  const postsChunkedIntoArchivePages = chunk(postEdges, postsPerPage);
+  const totalPages = postsChunkedIntoArchivePages.length;
+
+  postsChunkedIntoArchivePages.forEach((_, index) => {
+    const pageNumber = index + 1;
+    const pathSuffix = pageNumber === 1 ? '' : `/${pageNumber}`;
+    createPage({
+      path: `/blog${pathSuffix}`,
+      component: path.resolve(__dirname, 'src/templates/blog-post-archive.tsx'),
+      context: {
+        offset: index * postsPerPage,
+        postsPerPage,
+        nextPagePath: pageNumber < totalPages ? `/blog/${pageNumber + 1}` : null,
+        previousPagePath: pageNumber > 1 ? `/blog/${pageNumber - 1}` : null,
+      },
+    });
+  });
+
+  // Create individual pages
+  pageEdges.forEach(({ node }) => {
+    createPage({
+      path: node.uri || '/soames-blog-archive/',
+      component: path.resolve(__dirname, 'src/templates/page.tsx'),
+      context: {
+        id: node.id,
+        title: node.title,
+      },
+    });
+  });
+};

package/gatsby-ssr.js

@@ -0,0 +1,12 @@
+const React = require("react")
+
+export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
+  setHeadComponents([
+    <script
+      key="jquery-for-ssr"
+      src="https://code.jquery.com/jquery-3.4.1.min.js"
+      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+      crossOrigin="anonymous">
+    </script>,
+  ])
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "soames-gatsby-theme",
+  "version": "0.1.0",
+  "description": "A customizable Gatsby theme for personal websites using WordPress as a headless CMS.",
+  "main": "dist/gatsby-config.js",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-theme",
+    "wordpress",
+    "headless-cms",
+    "typescript",
+    "react",
+    "blog",
+    "personal-site"
+  ],
+  "author": "Orbi Software",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orbivision/soames-gatsby-theme"
+  },
+  "bugs": {
+    "url": "https://github.com/orbivision/soames-gatsby-theme/issues"
+  },
+  "homepage": "https://github.com/orbivision/soames-gatsby-theme#readme",
+  "files": [
+    "dist",
+    "src",
+    "static",
+    "gatsby-config.js",
+    "gatsby-node.js",
+    "gatsby-ssr.js",
+    "gatsby-browser.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "gatsby": "^5.14.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.86",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "@types/react-helmet": "^6.1.11",
+    "@types/styled-components": "^5.1.34",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "@wordpress/block-library": "^9.22.0",
+    "bootstrap": "^5.3.5",
+    "gatsby-plugin-image": "^3.14.0",
+    "gatsby-plugin-manifest": "^5.14.0",
+    "gatsby-plugin-react-helmet": "^6.14.0",
+    "gatsby-plugin-sharp": "^5.14.0",
+    "gatsby-source-filesystem": "^5.14.0",
+    "gatsby-source-wordpress": "^7.15.0",
+    "gatsby-transformer-sharp": "^5.14.0",
+    "html-react-parser": "^5.2.3",
+    "jquery": "^3.7.1",
+    "react-helmet": "^6.1.0"
+  }
+}

package/src/components/Bio.tsx

@@ -0,0 +1,63 @@
+// src/components/Bio.tsx
+
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+
+interface Author {
+  firstName: string;
+  name: string; // Used as Twitter handle
+  description: string;
+  avatar?: {
+    url: string;
+  };
+}
+
+interface BioQueryData {
+  author: Author;
+}
+
+const Bio: React.FC = () => {
+  const data = useStaticQuery<BioQueryData>(graphql`
+    query BioQuery {
+      author: wpUser {
+        firstName
+        name
+        description
+        avatar {
+          url
+        }
+      }
+    }
+  `);
+
+  const { author } = data;
+  const avatarUrl = author?.avatar?.url;
+  const twitterHandle = author?.name;
+
+  return (
+    <div className="bio">
+      {avatarUrl && (
+        <img
+          alt={author.firstName}
+          className="bio-avatar"
+          src={avatarUrl}
+        />
+      )}
+      {author.firstName && (
+        <p>
+          Written by <strong>{author.firstName}</strong>
+          {` `}
+          {author.description}
+          {` `}
+          {twitterHandle && (
+            <a href={`https://twitter.com/${twitterHandle}`}>
+              You should follow them on Twitter
+            </a>
+          )}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default Bio;