soames-gatsby-theme 0.1.0

package/src/templates/blog-post-archive.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+import { Link, graphql, PageProps } from "gatsby";
+import parse from "html-react-parser";
+
+import Layout from "../components/Layout";
+import Seo from "../components/Seo";
+import HeroHeader from "../components/HeroHeader";
+
+interface PostNode {
+  excerpt: string;
+  uri: string;
+  date: string;
+  title: string;
+  featuredImage?: {
+    node: {
+      guid: string;
+      title: string;
+    };
+  };
+}
+
+interface ArchivePage {
+  title: string;
+  excerpt: string;
+  featuredImage?: {
+    node: {
+      guid: string;
+      title: string;
+    };
+  };
+}
+
+interface BlogPostArchiveProps extends PageProps<{
+  allWpPost: {
+    nodes: PostNode[];
+  };
+  wpPage: ArchivePage;
+}, {
+  nextPagePath?: string;
+  previousPagePath?: string;
+}> {}
+
+const BlogIndex: React.FC<BlogPostArchiveProps> = ({ data, pageContext }) => {
+  const posts = data.allWpPost.nodes;
+  const archive = data.wpPage;
+  const { nextPagePath, previousPagePath } = pageContext;
+
+  if (!posts.length) {
+    return (
+      <Layout>
+        <Seo title="All posts" />
+        <HeroHeader
+          title={archive.title ? parse(archive.title) : "Blog"}
+          subhead={archive.excerpt ? parse(archive.excerpt) : ""}
+          backgroundImage={archive.featuredImage?.node.guid || null}
+          backgroundImageTitle={archive.featuredImage?.node.title || null}
+        />
+        <p>
+          No blog posts found. Add posts to your WordPress site and they'll appear here!
+        </p>
+      </Layout>
+    );
+  }
+
+  const groupedPosts = posts.reduce<PostNode[][]>((groups, post, index) => {
+    if (index % 3 === 0) {
+      groups.push([post]);
+    } else {
+      groups[groups.length - 1].push(post);
+    }
+    return groups;
+  }, []);
+
+  return (
+    <Layout isHomePage>
+      <Seo title="All posts" />
+      <HeroHeader
+        title={archive.title ? parse(archive.title) : "Blog"}
+        subhead={archive.excerpt ? parse(archive.excerpt) : ""}
+        backgroundImage={archive.featuredImage?.node.guid || null}
+        backgroundImageTitle={archive.featuredImage?.node.title || null}
+      />
+
+      <section className="soames-blog-roll">
+        <div className="container">
+          {groupedPosts.map((group, index) => (
+            <div key={index} className="media-container-row">
+              {group.map((post, idx) => (
+                <div key={idx} className="card p-3 col-12 col-lg-4">
+                  <div className="card-wrapper">
+                    {/* Uncomment and adjust the following block if featured images are to be displayed */}
+                    {/* {post.featuredImage && (
+                      <div className="card-img">
+                        <Link to={`/blog${post.uri}`}>
+                          <img src={post.featuredImage.node.guid} alt={post.featuredImage.node.title} title={post.featuredImage.node.title} />
+                        </Link>
+                      </div>
+                    )} */}
+                    <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>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        {previousPagePath && (
+          <>
+            <Link to={`/blog${previousPagePath}`}>Previous page</Link>
+            <br />
+          </>
+        )}
+        {nextPagePath && <Link to={`/blog${nextPagePath}`}>Next page</Link>}
+      </section>
+    </Layout>
+  );
+};
+
+export default BlogIndex;
+
+export const pageQuery = 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/src/templates/blog-post.tsx

@@ -0,0 +1,183 @@
+// src/templates/blog-post.tsx
+
+import React from "react";
+import { Link, graphql, PageProps } from "gatsby";
+import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image";
+import parse from "html-react-parser";
+
+import "../styles/vendor/wordpress-blocks.css";
+
+import Bio from "../components/Bio";
+import Layout from "../components/Layout";
+import Seo from "../components/Seo";
+import HeroHeader from "../components/HeroHeader";
+import BlogSidebar from "../components/BlogSidebar";
+
+interface FeaturedImage {
+  node: {
+    altText?: string | null;
+    gatsbyImage?: IGatsbyImageData;
+  };
+}
+
+interface Post {
+  id: string;
+  excerpt?: string | null;
+  content?: string | null;
+  title?: string | null;
+  date?: string | null;
+  featuredImage?: FeaturedImage | null;
+}
+
+interface Page {
+  title?: string | null;
+  excerpt?: string | null;
+  featuredImage?: {
+    node: {
+      guid?: string | null;
+    };
+  } | null;
+}
+
+interface PostEdge {
+  uri: string;
+  title?: string | null;
+}
+
+interface BlogPostTemplateProps extends PageProps {
+  data: {
+    post: Post;
+    previous?: PostEdge | null;
+    next?: PostEdge | null;
+    page?: Page | null;
+  };
+}
+
+const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({ data }) => {
+  const { post, previous, next, page } = data;
+
+  const featuredImageData = post.featuredImage?.node?.gatsbyImage ?? null;
+  const featuredImageAlt = post.featuredImage?.node?.altText || "Featured image";
+
+  return (
+    <Layout>
+      <Seo title={post.title || ""} description={post.excerpt || undefined} />
+      <HeroHeader
+        title={page?.title ? parse(page.title) : "Blog"}
+        subhead={page?.excerpt ? parse(page.excerpt) : ""}
+        backgroundImage={page?.featuredImage?.node?.guid || null}
+        backgroundImageTitle={page?.title || null}
+      />
+      <section>
+        <div className="media-container-row">
+          <div className="col-12 col-lg-8">
+            <section id="soames-gatsby-content-container" className="soames-gatsby-blog-content">
+              <article className="blog-post" itemScope itemType="http://schema.org/Article">
+                <header>
+                  <h1 itemProp="headline">{post.title ? parse(post.title) : ""}</h1>
+                  <p>{post.date}</p>
+                </header>
+
+                {post.content && (
+                  <section itemProp="articleBody" className="blog-post-content">
+                    {parse(post.content)}
+                  </section>
+                )}
+
+                <hr />
+
+                <footer>
+                  <Bio />
+                </footer>
+              </article>
+
+              <nav className="blog-post-nav">
+                <ul
+                  style={{
+                    display: `flex`,
+                    flexWrap: `wrap`,
+                    justifyContent: `space-between`,
+                    listStyle: `none`,
+                    padding: 0,
+                  }}
+                >
+                  <li>
+                    {previous && (
+                      <Link to={`/blog${previous.uri}`} rel="prev">
+                        ← {previous.title ? parse(previous.title) : ""}
+                      </Link>
+                    )}
+                  </li>
+
+                  <li>
+                    {next && (
+                      <Link to={`/blog${next.uri}`} rel="next">
+                        {next.title ? parse(next.title) : ""} →
+                      </Link>
+                    )}
+                  </li>
+                </ul>
+              </nav>
+            </section>
+          </div>
+          <div className="col-12 col-lg-4">
+            <section id="soames-gatsby-sidebar-container" className="soames-gatsby-sidebar">
+              {featuredImageData && (
+                <GatsbyImage
+                  image={featuredImageData}
+                  alt={featuredImageAlt}
+                  style={{ marginBottom: 50 }}
+                />
+              )}
+
+              <h1>Recent Posts</h1>
+
+              <BlogSidebar postId={post.id} />
+            </section>
+          </div>
+        </div>
+      </section>
+    </Layout>
+  );
+};
+
+export default BlogPostTemplate;
+
+export const pageQuery = 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/src/templates/page.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { graphql, PageProps } from "gatsby";
+import parse from "html-react-parser";
+
+import Layout from "../components/Layout";
+import Seo from "../components/Seo";
+import HeroHeader from "../components/HeroHeader";
+import { Shortcodes } from "../utils/shortcodes/Shortcodes";
+
+// Gutenberg block styles
+import "../styles/vendor/wordpress-blocks.css";
+
+type PageTemplateProps = PageProps<{
+  page: {
+    id: string;
+    title: string;
+    excerpt?: string;
+    content?: string;
+    featuredImage?: {
+      node: {
+        title: string;
+        guid: string;
+      };
+    };
+  };
+}>;
+
+const Page: React.FC<PageTemplateProps> = ({ data: { page } }) => (
+  <Layout>
+    <Seo title={page.title} />
+    <HeroHeader
+      title={parse(page.title)}
+      subhead={page.excerpt ? parse(page.excerpt) : ""}
+      backgroundImage={page.featuredImage?.node.guid || null}
+      backgroundImageTitle={page.featuredImage?.node.title || null}
+    />
+    {page.content && (
+      <section
+        id="soames-gatsby-content-container"
+        className="soames-gatsby-content"
+      >
+        <Shortcodes>{page.content}</Shortcodes>
+      </section>
+    )}
+  </Layout>
+);
+
+export default Page;
+
+export const pageQuery = graphql`
+  query PageById($id: String!) {
+    page: wpPage(id: { eq: $id }) {
+      id
+      title
+      excerpt
+      content
+      featuredImage {
+        node {
+          title
+          guid
+        }
+      }
+    }
+  }
+`;

package/src/utils/shortcodes/Shortcodes.tsx

@@ -0,0 +1,119 @@
+import React, { ReactNode } from "react";
+import parse, { HTMLReactParserOptions, Element as DomElement } from "html-react-parser";
+
+import { getAttributes } from "./getAttributes";
+import { getContent } from "./getContent";
+
+import RemoveContentAreaPadding from "../../components/shortcodes/RemoveContentAreaPadding";
+import SoamesTitle from "../../components/shortcodes/SoamesTitle";
+import SoamesTitleBar from "../../components/shortcodes/SoamesTitleBar";
+import SoamesTitleBarLg from "../../components/shortcodes/SoamesTitleBarLg";
+import SoamesTextBlock from "../../components/shortcodes/SoamesTextBlock";
+import SoamesIconList from "../../components/shortcodes/SoamesIconList";
+import SoamesFeature from "../../components/shortcodes/SoamesFeature";
+import SoamesGalleryMenu from "../../components/shortcodes/SoamesGalleryMenu";
+import SoamesVideo from "../../components/shortcodes/SoamesVideo";
+import SoamesTextList from "../../components/shortcodes/SoamesTextList";
+import SoamesSoundCloud from "../../components/shortcodes/SoamesSoundCloud";
+
+interface ShortcodesProps {
+  children: string;
+}
+
+type Attributes = {
+  [key: string]: string[];
+};
+
+const handleShortcodes: HTMLReactParserOptions["replace"] = (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 <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;
+};
+
+export const Shortcodes: React.FC<ShortcodesProps> = ({ children }) => {
+  const reactElements = parse(children || "", {
+    replace: handleShortcodes,
+  });
+
+  return <div>{reactElements}</div>;
+};

package/src/utils/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/utils/shortcodes/getContent.ts

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