soames-gatsby-theme 0.1.0

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,63 @@
+import React from "react";
+
+interface GalleryMenuAttributes {
+  images: string[];
+  links?: string[];
+  labels?: string[];
+  css?: string[];
+}
+
+interface GalleryMenuItem {
+  id: string;
+  imageUrl: string;
+  label?: string;
+  link?: string;
+  css?: string;
+}
+
+interface SoamesGalleryMenuProps {
+  attributes: GalleryMenuAttributes;
+}
+
+const SoamesGalleryMenu: React.FC<SoamesGalleryMenuProps> = ({ attributes }) => {
+  const { images, links, labels, css } = attributes;
+
+  const menuItems: GalleryMenuItem[] = images.map((image, i) => ({
+    id: `icon_${i}`,
+    imageUrl: image.replace(/['""]+/g, '"'),
+    label: labels?.[i],
+    link: links?.[i],
+    css: css?.[i],
+  }));
+
+  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,57 @@
+import React from "react";
+
+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;
+}
+
+const SoamesIconList: React.FC<{ attributes: IconListAttributes }> = ({ attributes }) => {
+  const { images, links, labels, css } = attributes;
+
+  const icons: Icon[] = images.map((image, i) => ({
+    id: `icon_${i}`,
+    imageUrl: image.replace(/['""]+/g, '"'),
+    label: labels?.[i] ?? null,
+    link: links?.[i] ?? null,
+    css: css?.[i] ?? null,
+  }));
+
+  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;

package/src/components/shortcodes/SoamesTitle.tsx

@@ -0,0 +1,23 @@
+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,21 @@
+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,34 @@
+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"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </div>
+      </figure>
+    </section>
+  );
+};
+
+export default SoamesVideo;