soames-astro-theme 0.1.0

package/src/components/shortcodes/SoamesTitle.tsx

@@ -0,0 +1,24 @@
+// PORTED VERBATIM from soames-gatsby-theme/src/components/shortcodes/SoamesTitle.tsx
+import React from "react";
+
+interface SoamesTitleProps {
+  title: React.ReactNode;
+}
+
+const SoamesTitle: React.FC<SoamesTitleProps> = ({ title }) => {
+  return (
+    <section className="soames-section soames-title">
+      <div className="container">
+        <div className="media-container-row">
+          <div className="title col-12 col-md-8">
+            <h2 className="align-center mbr-fonts-style display-2">
+              {title}
+            </h2>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SoamesTitle;

package/src/components/shortcodes/SoamesTitleBar.tsx

@@ -0,0 +1,22 @@
+// PORTED VERBATIM from soames-gatsby-theme/src/components/shortcodes/SoamesTitleBar.tsx
+import React from "react";
+
+interface SoamesTitleBarProps {
+  title: React.ReactNode;
+}
+
+const SoamesTitleBar: React.FC<SoamesTitleBarProps> = ({ title }) => {
+  return (
+    <section className="soames-section soames-title-bar mt-5 mb-3">
+      <div className="container">
+        <div className="media-container-row">
+          <div className="title col-12 col-md-8">
+            <h2 className="align-center mbr-fonts-style display-2">{title}</h2>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SoamesTitleBar;

package/src/components/shortcodes/SoamesTitleBarLg.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+interface SoamesTitleBarLgProps {
+  title: React.ReactNode;
+  attributes: {
+    subtitle?: string[];
+    background?: string[];
+  };
+}
+
+const SoamesTitleBarLg: React.FC<SoamesTitleBarLgProps> = ({ title, attributes }) => {
+  const subtitle = attributes?.subtitle?.[0];
+  const background = attributes?.background?.[0];
+  const defaultBackground = 'https://picsum.photos/1080/720';
+
+  const css = `
+    .soames-background-title-bar-lg::after {
+      background: url(${background || defaultBackground});
+      background-position: 50% 50%;
+      background-size: cover;
+      background-attachment: fixed;
+      background-repeat: no-repeat;
+      left: 0px;
+      height: 176px;
+      overflow: hidden;
+      pointer-events: none;
+      margin-top: 0px;
+      transform: translate3d(0px, 0px, 0px);
+    }
+  `;
+
+  return (
+    <>
+      <style>{css}</style>
+      <section className="soames-header-sm soames-parallax soames-background-title-bar-lg mt-5 mb-3">
+        <div className="soames-overlay" style={{ opacity: 0.6, backgroundColor: 'rgb(46, 46, 46)' }}></div>
+        <div className="container">
+          <div className="row justify-content-md-center">
+            <div className="soames-white col-md-10">
+              <h1 className="soames-section-title align-center soames-bold mbr-fonts-style display-1">
+                {title}
+              </h1>
+              {subtitle && (
+                <h3 className="soames-section-subtitle align-center soames-light soames-white mbr-fonts-style display-5">
+                  {subtitle}
+                </h3>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default SoamesTitleBarLg;

package/src/components/shortcodes/SoamesVideo.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+interface SoamesVideoProps {
+  attributes: {
+    link: string;
+    title?: string;
+  };
+}
+
+const SoamesVideo: React.FC<SoamesVideoProps> = ({ attributes }) => {
+  const { link, title } = attributes;
+
+  return (
+    <section className="soames-video-container">
+      <figure className="soames-figure align-center container">
+        <div className="video-block">
+          <div className="video-wrapper">
+            <iframe
+              height="580"
+              width="360"
+              src={link}
+              title={title ?? "Embedded video"}
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </div>
+      </figure>
+    </section>
+  );
+};
+
+export default SoamesVideo;

package/src/components/shortcodes/getAttributes.ts

@@ -0,0 +1,19 @@
+// src/utils/shortcodes/getAttributes.ts
+
+export function getAttributes(match: RegExpMatchArray | null): Record<string, string[]> | null {
+  if (!match || !match[1]) return null;
+
+  const attributes: Record<string, string[]> = {};
+  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/src/components/shortcodes/getContent.ts

@@ -0,0 +1,4 @@
+// PORTED VERBATIM from soames-gatsby-theme/src/utils/shortcodes/getContent.ts
+export function getContent(match: RegExpMatchArray | null): string | null {
+  return match && match[2] ? match[2] : null;
+}

package/src/integration.ts

@@ -0,0 +1,147 @@
+import type { AstroIntegration } from 'astro';
+// Returns react() alongside the theme integration; Astro flattens integration arrays.
+import react from '@astrojs/react';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { themeShadow } from './theme-shadow.js';
+
+// html-react-parser is CommonJS and pulls a CJS subtree; these must be bundled
+// (noExternal) AND pre-bundled (optimizeDeps) so React dedupes to one copy and
+// dev SSR doesn't choke on CJS (`exports is not defined`).
+const PARSER_CJS_DEPS = [
+  'html-react-parser',
+  'html-dom-parser',
+  'domhandler',
+  'domelementtype',
+  'domutils',
+  'dom-serializer',
+  'htmlparser2',
+  'entities',
+  'style-to-js',
+  'style-to-object',
+  'inline-style-parser',
+  'react-property',
+];
+
+// Browser-ish UA — this WP install's Wordfence 403s some default UAs (see lib/wp.ts).
+const WP_UA =
+  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36';
+
+// Resolve the blog's base slug from the WP "Posts page" (Settings → Reading) at
+// config time, so the blog archive route can be injected at that slug. Falls back
+// to 'blog' if unset or WP is unreachable, so builds never hang or break on it.
+async function fetchPostsSlug(graphqlUrl: string): Promise<string> {
+  if (!graphqlUrl) return 'blog';
+  try {
+    const ctrl = new AbortController();
+    const timer = setTimeout(() => ctrl.abort(), 5000);
+    const res = await fetch(graphqlUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'User-Agent': WP_UA },
+      body: JSON.stringify({ query: '{ wpPages: pages(first: 100) { nodes { slug isPostsPage } } }' }),
+      signal: ctrl.signal,
+    });
+    clearTimeout(timer);
+    if (!res.ok) return 'blog';
+    const json = (await res.json()) as {
+      data?: { wpPages?: { nodes?: Array<{ slug: string; isPostsPage: boolean }> } };
+    };
+    const pp = (json?.data?.wpPages?.nodes ?? []).find((n) => n.isPostsPage);
+    return pp?.slug || 'blog';
+  } catch {
+    return 'blog';
+  }
+}
+
+export interface SoamesThemeOptions {
+  /** WordPress GraphQL endpoint, e.g. http://soames.orbivision.net/graphql */
+  wordpressUrl?: string;
+  /** Optional WordPress base URL (defaults to wordpressUrl minus /graphql). */
+  wordpressBaseUrl?: string;
+  /** Hostnames whose images Astro may optimize. */
+  imageDomains?: string[];
+}
+
+// The Soames Astro theme integration — successor to the Gatsby theme.
+// Responsibilities:
+//   1) register @astrojs/react (React islands),
+//   2) install the theme-shadow resolver so sites override via src/overrides/,
+//   3) inject the page-template routes the theme provides,
+//   4) authorize WP image domains,
+//   5) expose WP config to the theme via env + make the package transpilable.
+export default function soamesTheme(options: SoamesThemeOptions = {}): AstroIntegration[] {
+  const themeSrc = fileURLToPath(new URL('.', import.meta.url)); // <pkg>/src/
+  const wpUrl = options.wordpressUrl || process.env.WORDPRESS_GRAPHQL_URL || '';
+  const wpBase =
+    options.wordpressBaseUrl ||
+    process.env.WORDPRESS_BASE_URL ||
+    wpUrl.replace(/\/graphql\/?$/, '');
+  const imageHost = (() => {
+    try {
+      return wpBase ? new URL(wpBase).hostname : undefined;
+    } catch {
+      return undefined;
+    }
+  })();
+  const imageDomains = options.imageDomains ?? (imageHost ? [imageHost] : []);
+
+  const theme: AstroIntegration = {
+    name: 'soames-astro-theme',
+    hooks: {
+      'astro:config:setup': async ({ config, updateConfig, injectRoute }) => {
+        const overrideDir = path.join(fileURLToPath(config.srcDir), 'overrides');
+
+        updateConfig({
+          image: { domains: imageDomains },
+          vite: {
+            plugins: [themeShadow({ themeDir: themeSrc, overrideDir })],
+            // Ship source from this package; bundle it AND the html-react-parser
+            // subtree so everything is transpiled, shares the deduped React, and
+            // the parser's CJS deps (domelementtype et al.) get proper interop
+            // under SSR (otherwise "does not provide an export named 'default'").
+            ssr: {
+              noExternal: ['soames-astro-theme', ...PARSER_CJS_DEPS],
+              // SSR dep pre-bundling — without this, dev SSR throws "exports is
+              // not defined" on the CommonJS parser modules.
+              optimizeDeps: { include: PARSER_CJS_DEPS },
+            },
+            // Client-side pre-bundle too (for the parser when used in islands).
+            optimizeDeps: { include: PARSER_CJS_DEPS },
+            // Force a single React copy — the theme ships html-react-parser, which
+            // must build elements with the SAME React the renderer uses (otherwise
+            // "Objects are not valid as a React child" under file:/linked installs).
+            resolve: { dedupe: ['react', 'react-dom'] },
+            define: {
+              'import.meta.env.WORDPRESS_GRAPHQL_URL': JSON.stringify(wpUrl),
+              'import.meta.env.WORDPRESS_BASE_URL': JSON.stringify(wpBase),
+            },
+          },
+        });
+
+        // Blog base slug from the WP "Posts page" (Settings → Reading), or 'blog'.
+        const postsSlug = await fetchPostsSlug(wpUrl);
+
+        // Theme-provided routes. A site file at the same path takes precedence
+        // over an injected route, so sites can still override pages directly.
+        injectRoute({ pattern: '/', entrypoint: 'soames-astro-theme/routes/index.astro' });
+        injectRoute({ pattern: '/[...uri]', entrypoint: 'soames-astro-theme/routes/[...uri].astro' });
+        // Blog archive lives at the Posts-page slug (default /blog/). Individual
+        // posts stay at /blog/post/<slug>/ regardless.
+        injectRoute({ pattern: `/${postsSlug}/[...page]`, entrypoint: 'soames-astro-theme/routes/blog/[...page].astro' });
+        injectRoute({ pattern: '/blog/post/[...slug]', entrypoint: 'soames-astro-theme/routes/blog/post/[...slug].astro' });
+        // Documentation (weDocs). Optional — generates 0 doc pages when weDocs
+        // isn't installed (getDocs() returns []); /docs/ then shows an empty state.
+        injectRoute({ pattern: '/docs', entrypoint: 'soames-astro-theme/routes/docs/index.astro' });
+        injectRoute({ pattern: '/docs/[...slug]', entrypoint: 'soames-astro-theme/routes/docs/[...slug].astro' });
+
+        // When the blog moved off /blog/, redirect the old base path to it.
+        if (postsSlug !== 'blog') {
+          updateConfig({ redirects: { '/blog': `/${postsSlug}` } });
+        }
+      },
+    },
+  };
+
+  // react() first so its renderer is registered; Astro flattens this array.
+  return [react(), theme];
+}

package/src/layouts/Base.astro

@@ -0,0 +1,93 @@
+---
+// Soames theme base layout. Header & Footer are imported through `@theme/` so a
+// site can shadow them via src/overrides/. All WordPress data is fetched at build
+// time here (replaces Gatsby useStaticQuery) and passed down as props.
+
+// Global styles (cascade order matches the Gatsby setup: vendor → theme → overrides).
+import "bootstrap/dist/css/bootstrap.min.css";
+import "../styles/vendor/wordpress-blocks.css";
+import "../styles/theme.css"; // @imports soames/{base,layout,typography,components,overrides}
+// Site global overrides — empty in the theme; a site shadows this via
+// src/overrides/styles/site-overrides.css. Imported LAST so site rules win.
+import "@theme/styles/site-overrides.css";
+
+import Header from "@theme/components/Header";
+import Footer from "@theme/components/Footer";
+import {
+  getGeneralSettings,
+  getSoamesSettings,
+  getMenuByLocation,
+} from "../lib/wp";
+
+interface Props {
+  pageTitle: string;
+  description?: string;
+  isHomePage?: boolean;
+}
+const { pageTitle, description, isHomePage = false } = Astro.props;
+
+const [settings, soames, headerMenu, footerMenu] = await Promise.all([
+  getGeneralSettings(),
+  getSoamesSettings(),
+  getMenuByLocation("HEADER"),
+  getMenuByLocation("FOOTER"),
+]);
+
+const metaDescription = description || settings.description || "";
+const fullTitle = `${pageTitle} | ${settings.title}`;
+const showCompanyName = soames.showCompanyName ?? true;
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{fullTitle}</title>
+    {metaDescription && <meta name="description" content={metaDescription} />}
+    {/* SEO/OG/Twitter — replaces the Gatsby Seo (react-helmet) component */}
+    <meta property="og:title" content={pageTitle} />
+    <meta property="og:description" content={metaDescription} />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={pageTitle} />
+    <meta name="twitter:description" content={metaDescription} />
+    {soames.faviconUrl && <link rel="icon" href={soames.faviconUrl} 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"
+    />
+  </head>
+  <body>
+    {/* `.global-wrapper` matches the Gatsby Layout structure. Crucially, the theme
+        CSS makes <main> the parallax scroll container (height:100vh; overflow-y:auto;
+        perspective:2px), so EVERYTHING that scrolls — content AND footer — must live
+        INSIDE <main>, exactly as the Gatsby layout had it. */}
+    <div class="global-wrapper" data-is-root-path={isHomePage}>
+      <Header
+        title={settings.title}
+        logoUrl={soames.logoUrl}
+        logoAlt={soames.logoAlt}
+        companyName={soames.companyName}
+        showCompanyName={showCompanyName}
+        menuItems={headerMenu}
+      />
+      <main>
+        <slot />
+        <Footer
+          title={settings.title}
+          contactBlurb={soames.contactBlurb}
+          companyName={soames.companyName}
+          menuItems={footerMenu}
+        />
+      </main>
+    </div>
+    {/* Bootstrap 5 bundle (Popper included, no jQuery) handles the mobile
+        hamburger collapse; soames-nav.js covers submenu dropdowns + scroll state. */}
+    <script>
+      import "bootstrap/dist/js/bootstrap.bundle.min.js";
+      import "../scripts/soames-nav.js";
+    </script>
+  </body>
+</html>