soames-gatsby-theme 0.1.0

package/src/components/BlogSidebar.tsx

@@ -0,0 +1,86 @@
+// src/components/BlogSidebar.tsx
+
+import React from "react";
+import { graphql, useStaticQuery, Link } from "gatsby";
+import parse from "html-react-parser";
+
+interface FeaturedImage {
+  node: {
+    guid: string;
+  };
+}
+
+interface PostNode {
+  id: string;
+  excerpt: string;
+  uri: string;
+  date: string;
+  title: string;
+  featuredImage?: FeaturedImage;
+}
+
+interface SidebarPostArchiveData {
+  posts: {
+    nodes: PostNode[];
+  };
+}
+
+interface BlogSidebarProps {
+  postId: string;
+}
+
+const BlogSidebar: React.FC<BlogSidebarProps> = ({ postId }) => {
+  const data = useStaticQuery<SidebarPostArchiveData>(graphql`
+    query SidebarPostArchive {
+      posts: allWpPost(sort: { date: DESC }) {
+        nodes {
+          id
+          excerpt
+          uri
+          date(formatString: "MMMM DD, YYYY")
+          title
+          featuredImage {
+            node {
+              guid
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <section className="soames-blog-roll pt-3">
+      <div className="container">
+        {data.posts.nodes.map((post, index) =>
+          post.id !== postId ? (
+            <div key={index} className="media-container-row">
+              <div className="card p-3 col-12">
+                <div className="card-wrapper">
+                  <div className="card-box">
+                    <h4 className="card-title mbr-fonts-style display-5">
+                      {parse(post.title)}
+                    </h4>
+                    <h4 className="mbr-fonts-style display-7">{post.date}</h4>
+                    {parse(post.excerpt)}
+                  </div>
+                  <div className="mbr-section-btn text-center">
+                    <Link
+                      to={`/blog${post.uri}`}
+                      itemProp="url"
+                      className="btn btn-primary display-4"
+                    >
+                      <span itemProp="headline">Read More</span>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : null
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default BlogSidebar;

package/src/components/Footer.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import FooterMenu from "./FooterMenu";
+
+interface FooterProps {
+  title: string;
+}
+
+const Footer: React.FC<FooterProps> = ({ title }) => {
+  return (
+    <section className="soames-footer mt-5">
+      <div className="container">
+        <div className="media-container-row content text-white">
+          <div className="col-12 col-md-2">
+            <div className="media-wrap">{` `}</div>
+          </div>
+          <div className="col-12 col-md-4 mbr-fonts-style display-7">
+            <h5 className="pb-3">Links</h5>
+            <FooterMenu />
+          </div>
+          <div className="col-12 col-md-4 mbr-fonts-style display-7">
+            <h5 className="pb-3">Contact</h5>
+            <p className="soames-text pr-3">
+              fritz followed by ASCII 0x40 followed by the domain name of this site.
+            </p>
+            <p className="soames-text pt-3">
+              © {new Date().getFullYear()} {title}
+              <br />
+              Built with{" "}
+              <a href="https://www.soames.app" target="_blank" rel="noreferrer">
+                Soames
+              </a>
+              ,{" "}
+              <a href="https://www.gatsbyjs.com" target="_blank" rel="noreferrer">
+                Gatsby
+              </a>
+              , and{" "}
+              <a href="https://wordpress.org/" target="_blank" rel="noreferrer">
+                WordPress
+              </a>
+              <br />
+              <br />
+            </p>
+          </div>
+          <div className="col-12 col-md-2 mbr-fonts-style display-7">
+            <h5 className="pb-3">{` `}</h5>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Footer;

package/src/components/FooterMenu.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { graphql, useStaticQuery, Link } from "gatsby";
+
+interface MenuItem {
+  id: string;
+  label: string;
+  parentDatabaseId: number;
+  path: string;
+  uri: string;
+  order: number;
+}
+
+interface FooterMenuData {
+  wpMenu: {
+    id: string;
+    name: string;
+    menuItems: {
+      nodes: MenuItem[];
+    };
+  };
+}
+
+const FooterMenu: React.FC = () => {
+  const data: FooterMenuData = useStaticQuery(graphql`
+    query WpFooterMenu {
+      wpMenu(name: { eq: "soames-footer-menu" }) {
+        id
+        name
+        menuItems {
+          nodes {
+            id
+            label
+            parentDatabaseId
+            path
+            uri
+            order
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <div className="soames-footer-content">
+      <ul>
+        {data.wpMenu.menuItems.nodes.map((item) =>
+          item.parentDatabaseId === 0 ? (
+            item.uri.includes("http") ? (
+              <li className="soames-footer-list-item" key={item.id}>
+                <a href={item.uri} target="_blank" rel="noreferrer">
+                  {item.label}
+                </a>
+              </li>
+            ) : (
+              <li className="soames-footer-list-item" key={item.id}>
+                <Link to={item.uri}>{item.label}</Link>
+              </li>
+            )
+          ) : null
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default FooterMenu;

package/src/components/Header.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import HeaderMenu from "./HeaderMenu";
+import Logo from "./Logo";
+
+interface HeaderProps {
+  title: string;
+  isHomePage: boolean;
+}
+
+const Header: React.FC<HeaderProps> = ({ title, isHomePage }) => {
+  return (
+    <section className="menu soames-menu">
+      <nav className="navbar navbar-expand beta-menu navbar-dropdown align-items-center navbar-fixed-top navbar-toggleable-sm">
+        <button
+          className="navbar-toggler navbar-toggler-right"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <div className="hamburger">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </button>
+        <Logo title={title} />
+        <HeaderMenu />
+      </nav>
+    </section>
+  );
+};
+
+export default Header;

package/src/components/HeaderMenu.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { graphql, useStaticQuery, Link } from "gatsby";
+
+interface MenuItem {
+  id: string;
+  label: string;
+  parentDatabaseId: number;
+  path: string;
+  uri: string;
+  order: number;
+  childItems: {
+    nodes: Array<{
+      id: string;
+      label: string;
+      uri: string;
+      order: number;
+    }>;
+  };
+}
+
+interface WpMenuQueryData {
+  wpMenu: {
+    id: string;
+    name: string;
+    menuItems: {
+      nodes: MenuItem[];
+    };
+  };
+}
+
+const HeaderMenu: React.FC = () => {
+  const data = useStaticQuery<WpMenuQueryData>(graphql`
+    query WpHeaderMenu {
+      wpMenu(name: { eq: "soames-header-menu" }) {
+        id
+        name
+        menuItems {
+          nodes {
+            id
+            label
+            parentDatabaseId
+            path
+            uri
+            order
+            childItems {
+              nodes {
+                id
+                label
+                uri
+                order
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <div className="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul className="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true">
+        {data.wpMenu.menuItems.nodes.map((item) =>
+          item.path !== "/home/" && item.parentDatabaseId === 0 ? (
+            item.childItems.nodes.length === 0 ? (
+              <li key={item.id} className="nav-item">
+                {item.uri.includes("http") ? (
+                  <a
+                    className="nav-link link text-white display-4"
+                    href={item.uri}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {item.label}
+                  </a>
+                ) : (
+                  <Link to={item.uri} className="nav-link link text-white display-4">
+                    {item.label}
+                  </Link>
+                )}
+              </li>
+            ) : (
+              <li key={item.id} className="nav-item dropdown">
+                <a
+                  className="nav-link link text-white dropdown-toggle display-4"
+                  href={item.uri}
+                  data-toggle="dropdown-submenu"
+                  aria-expanded="false"
+                >
+                  {item.label}
+                </a>
+                <div className="dropdown-menu">
+                  <ul className="navbar-nav nav-dropdown nav-right">
+                    {item.childItems.nodes.map((childItem) => (
+                      <li key={childItem.id}>
+                        {childItem.uri.includes("http") ? (
+                          <a
+                            className="text-white dropdown-item display-4"
+                            target="_blank"
+                            rel="noreferrer"
+                            href={childItem.uri}
+                          >
+                            {childItem.label}
+                            <br />
+                          </a>
+                        ) : (
+                          <Link to={childItem.uri} className="text-white dropdown-item display-4">
+                            {childItem.label}
+                          </Link>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </li>
+            )
+          ) : null
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default HeaderMenu;

package/src/components/HeroHeader.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+export interface HeroHeaderProps {
+  title: React.ReactNode;
+  subhead?: React.ReactNode;
+  backgroundImage?: string | null;
+  backgroundImageTitle?: string | null;
+  overlayOpacity?: number;
+}
+
+const HeroHeader = ({
+  title,
+  subhead,
+  backgroundImage,
+  backgroundImageTitle,
+  overlayOpacity,
+}: HeroHeaderProps) => {
+  if (!backgroundImage) {
+    backgroundImage = "https://picsum.photos/1080/720";
+  } else {
+    if (backgroundImageTitle?.includes("_03o_")) overlayOpacity = 0.3;
+    else if (backgroundImageTitle?.includes("_04o_")) overlayOpacity = 0.4;
+    else if (backgroundImageTitle?.includes("_05o_")) overlayOpacity = 0.5;
+    else if (backgroundImageTitle?.includes("_06o_")) overlayOpacity = 0.6;
+    else if (backgroundImageTitle?.includes("_07o_")) overlayOpacity = 0.7;
+  }
+
+  if (!overlayOpacity) {
+    overlayOpacity = 0.6;
+  }
+
+  const css = `
+    .soames-background-lg::after {
+      background: url(${backgroundImage});
+      background-position: 50% 50%;
+      background-size: cover;
+      background-repeat: no-repeat;
+      position: fixed;
+      top: 0px;
+      left: 0px;
+      overflow: hidden;
+      pointer-events: none;
+      margin-top: -180px;
+    }
+  `;
+
+  return (
+    <>
+      <style>{css}</style>
+      <section
+        className="soames-header-lg soames-parallax soames-background-lg"
+        id="header1"
+      >
+        <div
+          className="soames-overlay"
+          style={{ opacity: overlayOpacity, backgroundColor: "rgb(46, 46, 46)" }}
+        />
+        <div className="container">
+          <div className="row justify-content-md-center">
+            <div className="soames-hero-header soames-white col-md-10">
+              <h1 className="soames-section-title align-center soames-bold mbr-fonts-style display-1">
+                {title}
+              </h1>
+              <div className="soames-section-subtitle align-center soames-light soames-white mbr-fonts-style display-5">
+                {subhead}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default HeroHeader;

package/src/components/Layout.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+import { useStaticQuery, graphql } from "gatsby";
+import { Helmet } from "react-helmet";
+
+import Header from "./Header";
+import Footer from "./Footer";
+
+import "../styles/theme.css";
+
+type LayoutProps = {
+  isHomePage?: boolean;
+  children: ReactNode;
+};
+
+const Layout: React.FC<LayoutProps> = ({ isHomePage = false, children }) => {
+  const {
+    wp: {
+      generalSettings: { title },
+    },
+    wpMediaItem,
+  } = useStaticQuery(graphql`
+    query LayoutQuery {
+      wp {
+        generalSettings {
+          title
+          description
+        }
+      }
+      wpMediaItem(title: { eq: "favicon" }) {
+        title
+        guid
+      }
+    }
+  `);
+
+  return (
+    <div className="global-wrapper" data-is-root-path={isHomePage}>
+      <Helmet>
+        {wpMediaItem && (
+          <link
+            rel="icon"
+            href={wpMediaItem.guid}
+            type="image/png"
+          />
+        )}
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap"
+        />
+      </Helmet>
+      <main>
+        {children}
+      </main>
+    </div>
+  );
+};
+
+export default Layout;

package/src/components/Logo.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { graphql, useStaticQuery } from "gatsby";
+
+interface LogoProps {
+  title: string;
+}
+
+interface LogoQueryData {
+  wpMediaItem: {
+    title: string;
+    guid: string;
+  } | null;
+}
+
+const Logo: React.FC<LogoProps> = ({ title }) => {
+  const data = useStaticQuery<LogoQueryData>(graphql`
+    query LogoQuery {
+      wpMediaItem(title: { eq: "logo" }) {
+        title
+        guid
+      }
+    }
+  `);
+
+  const logo = data.wpMediaItem;
+
+  return (
+    <div className="menu-logo">
+      <div className="navbar-brand">
+        <span className="navbar-caption-wrap">
+          <a className="navbar-caption text-white display-5" href="/">
+            {logo ? (
+              <img width="108" alt={logo.title} src={logo.guid} />
+            ) : (
+              <img
+                width="108"
+                alt="Orbi Software"
+                src="https://orbivision.net/wp-content/uploads/2023/01/punch_card.png"
+              />
+            )}
+            &nbsp;&nbsp;{title}
+          </a>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default Logo;

package/src/components/Seo.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+import { useStaticQuery, graphql } from "gatsby";
+
+interface SeoProps {
+  title: string;
+  description?: string;
+  lang?: string;
+  meta?: Array<{
+    name?: string;
+    property?: string;
+    content: string;
+  }>;
+}
+
+const Seo: React.FC<SeoProps> = ({
+  title,
+  description = "",
+  lang = "en",
+  meta = [],
+}) => {
+  const { wp, wpUser } = useStaticQuery(graphql`
+    query {
+      wp {
+        generalSettings {
+          title
+          description
+        }
+      }
+      wpUser {
+        name
+      }
+    }
+  `);
+
+  const metaDescription = description || wp.generalSettings?.description;
+  const defaultTitle = wp.generalSettings?.title;
+  const twitterHandle = wpUser?.name || "";
+
+  return (
+    <Helmet
+      htmlAttributes={{ lang }}
+      title={title}
+      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : undefined}
+      meta={[
+        {
+          name: "description",
+          content: metaDescription,
+        },
+        {
+          property: "og:title",
+          content: title,
+        },
+        {
+          property: "og:description",
+          content: metaDescription,
+        },
+        {
+          property: "og:type",
+          content: "website",
+        },
+        {
+          name: "twitter:card",
+          content: "summary",
+        },
+        {
+          name: "twitter:creator",
+          content: twitterHandle,
+        },
+        {
+          name: "twitter:title",
+          content: title,
+        },
+        {
+          name: "twitter:description",
+          content: metaDescription,
+        },
+        ...meta,
+      ]}
+    />
+  );
+};
+
+export default Seo;

package/src/components/shortcodes/RemoveContentAreaPadding.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const RemoveContentAreaPadding: React.FC = () => {
+  const css = `
+    .soames-gatsby-content {
+      padding: 0px;
+    }
+  `;
+
+  return <style>{css}</style>;
+};
+
+export default RemoveContentAreaPadding;