soames-astro-theme 0.1.0

package/src/components/shortcodes/Shortcodes.tsx

@@ -0,0 +1,319 @@
+import React, { ReactNode } from "react";
+import parse, { domToReact, DOMNode, HTMLReactParserOptions, Element as DomElement } from "html-react-parser";
+
+import { getAttributes } from "./getAttributes";
+import { getContent } from "./getContent";
+
+import RemoveContentAreaPadding from "./RemoveContentAreaPadding";
+import SoamesTitle from "./SoamesTitle";
+import SoamesTitleBar from "./SoamesTitleBar";
+import SoamesTitleBarLg from "./SoamesTitleBarLg";
+import SoamesTextBlock from "./SoamesTextBlock";
+import SoamesIconList from "./SoamesIconList";
+import SoamesFeature from "./SoamesFeature";
+import SoamesGalleryMenu from "./SoamesGalleryMenu";
+import SoamesVideo from "./SoamesVideo";
+import SoamesTextList from "./SoamesTextList";
+import SoamesSoundCloud from "./SoamesSoundCloud";
+
+interface ShortcodesProps {
+  // Astro passes slotted children as rendered nodes, not a raw string, so the
+  // WP HTML comes in as an explicit `html` prop (only change for Astro).
+  html: string;
+  // Prose mode (docs/blog bodies): render Gutenberg headings/paragraphs as plain,
+  // left-aligned HTML instead of the centered, padded marketing transform.
+  prose?: boolean;
+}
+
+// Set per-render in <Shortcodes>. Safe as a module-level flag because parse()
+// runs synchronously (no async boundary, single-threaded SSR/render), so one
+// parse completes before another begins.
+let proseMode = false;
+
+type Attributes = {
+  [key: string]: string[];
+};
+
+const handleShortcodes: HTMLReactParserOptions["replace"] = (node) => {
+  if (node.type === "tag") {
+    const classes = ((node as DomElement).attribs?.class ?? "").split(" ");
+    const children = ((node as DomElement).children || []) as DOMNode[];
+    const opts = { replace: handleShortcodes };
+
+    // --- Gutenberg built-in block mappings ---
+
+    if (classes.includes("wp-block-heading")) {
+      if (proseMode) return undefined; // keep the plain <h2>/<h3>, left-aligned
+      return <SoamesTitle title={domToReact(children, opts)} />;
+    }
+
+    // Gutenberg paragraph blocks render as plain <p> tags (no wp-block-paragraph class in server HTML).
+    // Skip paragraphs whose first child text starts with "[" — those are classic editor shortcodes.
+    if ((node as DomElement).name === "p") {
+      const firstChild = children[0] as any;
+      const isShortcode = firstChild?.type === "text" && firstChild?.data?.trim().startsWith("[");
+      if (!isShortcode) {
+        if (proseMode) return undefined; // keep the plain <p>, left-aligned
+        return (
+          <section className="soames-section article soames-article">
+            <div className="container col-md-10">
+              <div className="inner-container" style={{ width: "100%" }}>
+                <div className="section-text align-center mbr-fonts-style display-7 pb-2">
+                  <p className="block-text mbr-fonts-style display-7">
+                    {domToReact(children, opts)}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </section>
+        );
+      }
+    }
+
+    // --- Custom Soames block mappings ---
+
+    if (classes.includes("wp-block-soames-title-bar")) {
+      return <SoamesTitleBar title={domToReact(children, opts)} />;
+    }
+
+    if (classes.includes("wp-block-soames-title-bar-lg")) {
+      const attrs = (node as DomElement).attribs;
+      return (
+        <SoamesTitleBarLg
+          title={attrs["data-title"] ?? ""}
+          attributes={{
+            subtitle: [attrs["data-subtitle"] ?? ""],
+            background: [attrs["data-background"] ?? ""],
+          }}
+        />
+      );
+    }
+
+    if (classes.includes("wp-block-soames-icon-list")) {
+      const attrs = (node as DomElement).attribs;
+      // ORBI-20: new blocks emit JSON `data-items`; old blocks/shortcodes use
+      // positional comma attrs. Prefer items, fall back to the legacy arrays.
+      if (attrs["data-items"]) {
+        try {
+          const items = JSON.parse(attrs["data-items"]);
+          if (Array.isArray(items)) return <SoamesIconList items={items} />;
+        } catch {
+          /* malformed JSON — fall through to legacy parsing below */
+        }
+      }
+      const csv = (key: string) => (attrs[key] ?? "").split(",");
+      return (
+        <SoamesIconList
+          attributes={{
+            images: csv("data-images"),
+            labels: csv("data-labels"),
+            links: csv("data-links"),
+            css: csv("data-css"),
+          }}
+        />
+      );
+    }
+
+    if (classes.includes("wp-block-soames-feature")) {
+      const attrs = (node as DomElement).attribs;
+      const image = attrs["data-image"];
+      const title = attrs["data-title"];
+      const css = attrs["data-css"];
+      return (
+        <section className="soames-features">
+          <div className="container">
+            <div className="col-md-12">
+              <div className="media-container-row">
+                <div className="align-left aside-content">
+                  {title && (
+                    <h2 className="mbr-title pt-2 mbr-fonts-style display-2">
+                      <div>{title}</div>
+                    </h2>
+                  )}
+                  <div className="block-content">
+                    <div className={`card ${css ?? ""}`}>
+                      <div className="media"><div className="media-body"></div></div>
+                      <div className="card-box">
+                        <p className="block-text mbr-fonts-style display-7">
+                          {domToReact(children, opts)}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {image && (
+                  <div className="soames-figure" style={{ width: "50%" }}>
+                    <img src={image} alt={title ?? "Feature"} title={title ?? "Feature"} />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+      );
+    }
+
+    if (classes.includes("wp-block-soames-gallery-menu")) {
+      const attrs = (node as DomElement).attribs;
+      // ORBI-20: prefer JSON `data-items`, fall back to legacy comma attrs.
+      if (attrs["data-items"]) {
+        try {
+          const items = JSON.parse(attrs["data-items"]);
+          if (Array.isArray(items)) return <SoamesGalleryMenu items={items} />;
+        } catch {
+          /* malformed JSON — fall through to legacy parsing below */
+        }
+      }
+      const csv = (key: string) => (attrs[key] ?? "").split(",");
+      return (
+        <SoamesGalleryMenu
+          attributes={{
+            images: csv("data-images"),
+            labels: csv("data-labels"),
+            links: csv("data-links"),
+            css: csv("data-css"),
+          }}
+        />
+      );
+    }
+
+    if (classes.includes("wp-block-soames-video")) {
+      const attrs = (node as DomElement).attribs;
+      return (
+        <SoamesVideo
+          attributes={{
+            link: attrs["data-link"] ?? "",
+            title: attrs["data-title"] ?? "",
+          }}
+        />
+      );
+    }
+
+    if (classes.includes("wp-block-soames-soundcloud")) {
+      const attrs = (node as DomElement).attribs;
+      return (
+        <SoamesSoundCloud
+          attributes={{
+            bandName:   attrs["data-band-name"]   ?? "",
+            siteLink:   attrs["data-site-link"]   ?? "",
+            playlistId: attrs["data-playlist-id"] ?? "",
+            albumLink:  attrs["data-album-link"]  ?? "",
+            albumName:  attrs["data-album-name"]  ?? "",
+          }}
+        />
+      );
+    }
+
+    if (classes.includes("wp-block-soames-text-list")) {
+      return (
+        <section className="soames-section article soames-list pb-0">
+          <div className="container">
+            <div className="media-container-row">
+              <div className="soames-text counter-container col-12 col-md-10 mbr-fonts-style pt-0 display-7">
+                {domToReact(children, opts)}
+              </div>
+            </div>
+          </div>
+        </section>
+      );
+    }
+
+    // --- Legacy text shortcode detection (unchanged) ---
+  }
+  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 <RemoveContentAreaPadding />;
+      }
+
+      const shortcodeMappings: {
+        regex: RegExp;
+        component: React.FC<any>;
+        propsExtractor: (match: RegExpMatchArray) => any;
+      }[] = [
+        {
+          regex: /\[soames-title([^\]]*)\]([\s\S]*?)\[\/soames-title\]/,
+          component: SoamesTitle,
+          propsExtractor: (match) => ({ title: getContent(match) }),
+        },
+        {
+          regex: /\[soames-title-bar([^\]]*)\]([\s\S]*?)\[\/soames-title-bar\]/,
+          component: SoamesTitleBar,
+          propsExtractor: (match) => ({ title: getContent(match) }),
+        },
+        {
+          regex: /\[soames-title-bar-lg([^\]]*)\]([\s\S]*?)\[\/soames-title-bar-lg\]/,
+          component: SoamesTitleBarLg,
+          propsExtractor: (match) => ({
+            title: getContent(match),
+            attributes: getAttributes(match),
+          }),
+        },
+        {
+          regex: /\[soames-text-block([^\]]*)\]([\s\S]*?)\[\/soames-text-block\]/,
+          component: SoamesTextBlock,
+          propsExtractor: (match) => ({ content: getContent(match) }),
+        },
+        {
+          regex: /\[soames-text-list([^\]]*)\]([\s\S]*?)\[\/soames-text-list\]/,
+          component: SoamesTextList,
+          propsExtractor: (match) => ({ content: getContent(match) }),
+        },
+        {
+          regex: /\[soames-icon-list([^\]]*)\]/,
+          component: SoamesIconList,
+          propsExtractor: (match) => ({ attributes: getAttributes(match) }),
+        },
+        {
+          regex: /\[soames-feature([^\]]*)\]([\s\S]*?)\[\/soames-feature\]/,
+          component: SoamesFeature,
+          propsExtractor: (match) => ({
+            content: getContent(match),
+            attributes: getAttributes(match),
+          }),
+        },
+        {
+          regex: /\[soames-gallery-menu([^\]]*)\]/,
+          component: SoamesGalleryMenu,
+          propsExtractor: (match) => ({ attributes: getAttributes(match) }),
+        },
+        {
+          regex: /\[soames-video([^\]]*)\]/,
+          component: SoamesVideo,
+          propsExtractor: (match) => ({ attributes: getAttributes(match) }),
+        },
+        {
+          regex: /\[soames-soundcloud([^\]]*)\]/,
+          component: SoamesSoundCloud,
+          propsExtractor: (match) => ({ attributes: getAttributes(match) }),
+        },
+      ];
+
+      for (const { regex, component: Component, propsExtractor } of shortcodeMappings) {
+        const match = shortcode.match(regex);
+        if (match) {
+          const props = propsExtractor(match);
+          return <Component {...props} />;
+        }
+      }
+    }
+  }
+
+  return undefined;
+};
+
+const Shortcodes: React.FC<ShortcodesProps> = ({ html, prose = false }) => {
+  proseMode = !!prose;
+  const reactElements = parse(html || "", {
+    replace: handleShortcodes,
+  });
+  proseMode = false;
+
+  return <div>{reactElements}</div>;
+};
+
+export { Shortcodes };
+export default Shortcodes;

package/src/components/shortcodes/SoamesFeature.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+interface SoamesFeatureProps {
+  content: string;
+  attributes: {
+    image?: string;
+    title?: string;
+    css?: string;
+  };
+}
+
+const SoamesFeature: React.FC<SoamesFeatureProps> = ({ content, attributes }) => {
+  const { image, title, css } = attributes;
+  const paragraphs = content.split('__SOAMES_P__');
+
+  return (
+    <section className="soames-features">
+      <div className="container">
+        <div className="col-md-12">
+          <div className="media-container-row">
+            <div className="align-left aside-content">
+              {title && (
+                <h2 className="mbr-title pt-2 mbr-fonts-style display-2">
+                  <div>{title}</div>
+                </h2>
+              )}
+              <div className="block-content">
+                <div className={`card ${css ?? ""}`}>
+                  <div className="media">
+                    <div className="media-body"></div>
+                  </div>
+                  <div className="card-box">
+                    {paragraphs.map((paragraph, key) => (
+                      <p key={key} className="block-text mbr-fonts-style display-7">
+                        {paragraph}
+                      </p>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+            {image && (
+              <div className="soames-figure" style={{ width: "50%" }}>
+                <img src={image} alt={title ?? "Feature"} title={title ?? "Feature"} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SoamesFeature;

package/src/components/shortcodes/SoamesGalleryMenu.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+// New (ORBI-20) grouped format: one object per item.
+interface GalleryMenuItemInput {
+  image: string;
+  label?: string | null;
+  link?: string | null;
+  css?: string | null;
+}
+
+// Legacy format: parallel, index-aligned comma arrays.
+interface GalleryMenuAttributes {
+  images: string[];
+  links?: string[];
+  labels?: string[];
+  css?: string[];
+}
+
+interface GalleryMenuItem {
+  id: string;
+  imageUrl: string;
+  label?: string | null;
+  link?: string | null;
+  css?: string | null;
+}
+
+interface SoamesGalleryMenuProps {
+  items?: GalleryMenuItemInput[];
+  attributes?: GalleryMenuAttributes;
+}
+
+const SoamesGalleryMenu: React.FC<SoamesGalleryMenuProps> = ({ items, attributes }) => {
+  const normalizeUrl = (url: string) => (url ?? "").replace(/['""]+/g, '"');
+
+  let menuItems: GalleryMenuItem[];
+  if (items && items.length) {
+    menuItems = items.map((it, i) => ({
+      id: `icon_${i}`,
+      imageUrl: normalizeUrl(it.image),
+      label: it.label ?? null,
+      link: it.link ?? null,
+      css: it.css ?? null,
+    }));
+  } else if (attributes) {
+    const { images, links, labels, css } = attributes;
+    menuItems = (images ?? []).map((image, i) => ({
+      id: `icon_${i}`,
+      imageUrl: normalizeUrl(image),
+      label: labels?.[i] ?? null,
+      link: links?.[i] ?? null,
+      css: css?.[i] ?? null,
+    }));
+  } else {
+    menuItems = [];
+  }
+
+  // Drop rows with no image (e.g. a trailing comma in the legacy format).
+  menuItems = menuItems.filter((item) => item.imageUrl.trim().length > 0);
+
+  return (
+    <section className="features1 soames-gallery-menu">
+      <div className="container-fluid">
+        <div className="media-container-row">
+          {menuItems.map(menuItem => (
+            <div key={menuItem.id} className="card p-3 col-md-12 col-lg-3">
+              <div className="card-wrapper">
+                <div className="card-img">
+                  <a href={menuItem.link ?? "#"}>
+                    <img
+                      src={menuItem.imageUrl}
+                      alt={menuItem.label ?? ""}
+                      title={menuItem.label ?? ""}
+                    />
+                  </a>
+                </div>
+                <div className="card-box">
+                  <h4 className="card-title pb-3 mbr-fonts-style display-7">
+                    {menuItem.label}
+                  </h4>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SoamesGalleryMenu;

package/src/components/shortcodes/SoamesIconList.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+// New (ORBI-20) grouped format: one object per icon.
+interface IconItem {
+  image: string;
+  label?: string | null;
+  link?: string | null;
+  css?: string | null;
+}
+
+// Legacy format: parallel, index-aligned comma arrays.
+interface IconListAttributes {
+  images: string[];
+  links?: string[];
+  labels?: string[];
+  css?: string[];
+}
+
+interface Icon {
+  id: string;
+  imageUrl: string;
+  label?: string | null;
+  link?: string | null;
+  css?: string | null;
+}
+
+interface SoamesIconListProps {
+  items?: IconItem[];
+  attributes?: IconListAttributes;
+}
+
+const SoamesIconList: React.FC<SoamesIconListProps> = ({ items, attributes }) => {
+  const normalizeUrl = (url: string) => (url ?? "").replace(/['""]+/g, '"');
+
+  let icons: Icon[];
+  if (items && items.length) {
+    // New grouped format.
+    icons = items.map((it, i) => ({
+      id: `icon_${i}`,
+      imageUrl: normalizeUrl(it.image),
+      label: it.label ?? null,
+      link: it.link ?? null,
+      css: it.css ?? null,
+    }));
+  } else if (attributes) {
+    // Legacy positional arrays.
+    const { images, links, labels, css } = attributes;
+    icons = (images ?? []).map((image, i) => ({
+      id: `icon_${i}`,
+      imageUrl: normalizeUrl(image),
+      label: labels?.[i] ?? null,
+      link: links?.[i] ?? null,
+      css: css?.[i] ?? null,
+    }));
+  } else {
+    icons = [];
+  }
+
+  // Drop rows with no image (e.g. a trailing comma in the legacy format).
+  icons = icons.filter((icon) => icon.imageUrl.trim().length > 0);
+
+  return (
+    <section className="soames-section">
+      <div className="container">
+        <div className="d-flex flex-wrap align-items-center justify-content-center">
+          {icons.map((icon) => (
+            <a
+              key={icon.id}
+              className={`d-flex flex-column align-items-center text-decoration-none p-2 ${icon.css ?? ''}`}
+              href={icon.link ?? "#"}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                className="d-block mb-2"
+                src={icon.imageUrl}
+                alt={icon.label ?? ""}
+                height="116"
+                loading="lazy"
+              />
+              <span className="text-muted">{icon.label}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SoamesIconList;

package/src/components/shortcodes/SoamesSoundCloud.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+interface SoamesSoundCloudProps {
+  attributes: {
+    bandName: string;
+    siteLink: string;
+    playlistId: string;
+    albumLink: string;
+    albumName: string;
+  };
+}
+
+const SoamesSoundCloud: React.FC<SoamesSoundCloudProps> = ({ attributes }) => {
+  const { bandName, siteLink, playlistId, albumLink, albumName } = attributes;
+
+  return (
+    <section className="soames-section article soames-list">
+      <div className="container">
+        <div className="media-container-row">
+          <div className="soames-text counter-container col-12 col-md-10 pt-2 mbr-fonts-style display-7">
+            <iframe
+              title={albumName}
+              width="100%"
+              height="300"
+              scrolling="no"
+              frameBorder="no"
+              allow="autoplay"
+              src={`https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/${playlistId}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
+            ></iframe>
+            <div
+              style={{
+                fontSize: '10px',
+                color: '#cccccc',
+                lineBreak: 'anywhere',
+                wordBreak: 'normal',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                fontFamily:
+                  'Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif',
+                fontWeight: 100,
+              }}
+            >
+              <a
+                href={siteLink}
+                title={bandName}
+                target="_blank"
+                style={{ color: '#cccccc', textDecoration: 'none' }}
+                rel="noreferrer"
+              >
+                {bandName}
+              </a>{' '}
+              ·{' '}
+              <a
+                href={albumLink}
+                title={albumName}
+                target="_blank"
+                style={{ color: '#cccccc', textDecoration: 'none' }}
+                rel="noreferrer"
+              >
+                {albumName}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SoamesSoundCloud;

package/src/components/shortcodes/SoamesTextBlock.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface SoamesTextBlockProps {
+  content: string;
+}
+
+const SoamesTextBlock: React.FC<SoamesTextBlockProps> = ({ content }) => {
+  const paragraphs = content?.split('__SOAMES_P__') ?? [];
+
+  return (
+    <section className="soames-section article soames-article">
+      <div className="container col-md-10">
+        <div className="inner-container" style={{ width: "100%" }}>
+          <div className="section-text align-center mbr-fonts-style display-7 pb-2">
+            {paragraphs.map((paragraph, key) => (
+              <p key={key} className="block-text mbr-fonts-style display-7">
+                {paragraph}
+              </p>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SoamesTextBlock;

package/src/components/shortcodes/SoamesTextList.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface SoamesTextListProps {
+  content: string;
+}
+
+const SoamesTextList: React.FC<SoamesTextListProps> = ({ content }) => {
+  const lineItems = content?.split('__SOAMES_LI__') ?? [];
+
+  return (
+    <section className="soames-section article soames-list pb-0">
+      <div className="container">
+        <div className="media-container-row">
+          <div className="soames-text counter-container col-12 col-md-10 mbr-fonts-style pt-0 display-7">
+            <ul>
+              {lineItems.map((lineItem, key) => (
+                <li key={key}>{lineItem}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SoamesTextList;