Add Accordion module with FAQ schema support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "freshjuice-hubspot-theme",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Hubspot CMS theme boilerplate with TailwindCSS, AlpineJS, and more.",
   "main": "index.js",
   "scripts": {
@@ -53,6 +53,7 @@
   },
   "homepage": "https://github.com/freshjuice-dev/freshjuice-hubspot-theme#readme",
   "devDependencies": {
+    "@alpinejs/collapse": "^3.13.10",
     "@alpinejs/intersect": "^3.13.10",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",

source/js/main.js

@@ -5,6 +5,7 @@ import loadScript from './modules/_loadScript';
 import flyingPages from "flying-pages-module";
 import Alpine from "alpinejs";
 import intersect from "@alpinejs/intersect";
+import collapse from "@alpinejs/collapse";
 import dataDOM from "./modules/Alpine.data/DOM";
 
 // The window.Alpine = Alpine bit is optional, but is nice to have for
@@ -26,6 +27,7 @@ function domReady(callback) {
 
 // Add plugins to Alpine
 Alpine.plugin(intersect);
+Alpine.plugin(collapse);
 
 Alpine.data("xDOM", dataDOM);
 

tailwind.config.js

@@ -14,6 +14,16 @@ module.exports = {
       "cursive": ["'Caveat', cursive"],
     },
     extend: {
+      colors: {
+        cursor: {
+          500: "#FFFFFF",
+          DEFAULT: "#FFFFFF",
+        },
+        terminal: {
+          500: "#000000",
+          DEFAULT: "#000000",
+        }
+      },
       aspectRatio: {
         auto: "auto",
         box: "1",

theme/css/tailwind.css

@@ -1807,6 +1807,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   margin-right:auto;
 }
 
+.fj-my-0{
+  margin-top:0px;
+  margin-bottom:0px;
+}
+
 .fj-my-2{
   margin-top:0.5rem;
   margin-bottom:0.5rem;
@@ -1845,6 +1850,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   margin-left:0px;
 }
 
+.fj-ml-4{
+  margin-left:1rem;
+}
+
 .fj-ml-auto{
   margin-left:auto;
 }
@@ -1988,6 +1997,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   min-height:24rem;
 }
 
+.fj-min-h-\[16rem\]{
+  min-height:16rem;
+}
+
 .fj-min-h-screenSinNav{
   min-height:calc(100vh - 5rem);
 }
@@ -2008,6 +2021,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   width:100vw;
 }
 
+.fj-max-w-3xl{
+  max-width:48rem;
+}
+
 .fj-max-w-80{
   max-width:20rem;
 }
@@ -2289,6 +2306,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   background-color:rgb(255 251 235 / var(--fj-bg-opacity));
 }
 
+.fj-bg-cursor{
+  --fj-bg-opacity:1;
+  background-color:rgb(255 255 255 / var(--fj-bg-opacity));
+}
+
 .fj-bg-gray-100{
   --fj-bg-opacity:1;
   background-color:rgb(243 244 246 / var(--fj-bg-opacity));
@@ -2463,6 +2485,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   padding-bottom:0.75rem;
 }
 
+.fj-py-4{
+  padding-top:1rem;
+  padding-bottom:1rem;
+}
+
 .\!fj-pr-10{
   padding-right:2.5rem !important;
 }
@@ -2475,6 +2502,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   padding-bottom:3.5rem;
 }
 
+.fj-pb-4{
+  padding-bottom:1rem;
+}
+
 .fj-pb-8{
   padding-bottom:2rem;
 }
@@ -2649,10 +2680,18 @@ lite-youtube.lyt-activated > .lty-playbtn{
   opacity:1;
 }
 
+.fj-shadow{
+  --fj-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --fj-shadow-colored:0 1px 3px 0 var(--fj-shadow-color), 0 1px 2px -1px var(--fj-shadow-color);
+}
+
+.fj-shadow,.fj-shadow-lg{
+  box-shadow:var(--fj-ring-offset-shadow, 0 0 #0000), var(--fj-ring-shadow, 0 0 #0000), var(--fj-shadow);
+}
+
 .fj-shadow-lg{
   --fj-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --fj-shadow-colored:0 10px 15px -3px var(--fj-shadow-color), 0 4px 6px -4px var(--fj-shadow-color);
-  box-shadow:var(--fj-ring-offset-shadow, 0 0 #0000), var(--fj-ring-shadow, 0 0 #0000), var(--fj-shadow);
 }
 
 .fj-ring-1{

theme/js/main.js

@@ -3547,6 +3547,100 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   }
   var module_default2 = src_default2;
 
+  // node_modules/@alpinejs/collapse/dist/module.esm.js
+  function src_default3(Alpine2) {
+    Alpine2.directive("collapse", collapse);
+    collapse.inline = (el, { modifiers }) => {
+      if (!modifiers.includes("min"))
+        return;
+      el._x_doShow = () => {
+      };
+      el._x_doHide = () => {
+      };
+    };
+    function collapse(el, { modifiers }) {
+      let duration = modifierValue2(modifiers, "duration", 250) / 1e3;
+      let floor = modifierValue2(modifiers, "min", 0);
+      let fullyHide = !modifiers.includes("min");
+      if (!el._x_isShown)
+        el.style.height = `${floor}px`;
+      if (!el._x_isShown && fullyHide)
+        el.hidden = true;
+      if (!el._x_isShown)
+        el.style.overflow = "hidden";
+      let setFunction = (el2, styles) => {
+        let revertFunction = Alpine2.setStyles(el2, styles);
+        return styles.height ? () => {
+        } : revertFunction;
+      };
+      let transitionStyles = {
+        transitionProperty: "height",
+        transitionDuration: `${duration}s`,
+        transitionTimingFunction: "cubic-bezier(0.4, 0.0, 0.2, 1)"
+      };
+      el._x_transition = {
+        in(before = () => {
+        }, after = () => {
+        }) {
+          if (fullyHide)
+            el.hidden = false;
+          if (fullyHide)
+            el.style.display = null;
+          let current = el.getBoundingClientRect().height;
+          el.style.height = "auto";
+          let full = el.getBoundingClientRect().height;
+          if (current === full) {
+            current = floor;
+          }
+          Alpine2.transition(el, Alpine2.setStyles, {
+            during: transitionStyles,
+            start: { height: current + "px" },
+            end: { height: full + "px" }
+          }, () => el._x_isShown = true, () => {
+            if (el.getBoundingClientRect().height == full) {
+              el.style.overflow = null;
+            }
+          });
+        },
+        out(before = () => {
+        }, after = () => {
+        }) {
+          let full = el.getBoundingClientRect().height;
+          Alpine2.transition(el, setFunction, {
+            during: transitionStyles,
+            start: { height: full + "px" },
+            end: { height: floor + "px" }
+          }, () => el.style.overflow = "hidden", () => {
+            el._x_isShown = false;
+            if (el.style.height == `${floor}px` && fullyHide) {
+              el.style.display = "none";
+              el.hidden = true;
+            }
+          });
+        }
+      };
+    }
+  }
+  function modifierValue2(modifiers, key, fallback) {
+    if (modifiers.indexOf(key) === -1)
+      return fallback;
+    const rawValue = modifiers[modifiers.indexOf(key) + 1];
+    if (!rawValue)
+      return fallback;
+    if (key === "duration") {
+      let match = rawValue.match(/([0-9]+)ms/);
+      if (match)
+        return match[1];
+    }
+    if (key === "min") {
+      let match = rawValue.match(/([0-9]+)px/);
+      if (match)
+        return match[1];
+    }
+    return rawValue;
+  }
+  var module_default3 = src_default3;
+
   // source/js/modules/Alpine.data/DOM.js
   var import_debugLog = __toESM(require_debugLog());
   var import_loadScript = __toESM(require_loadScript());
@@ -3577,6 +3671,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     }
   }
   module_default.plugin(module_default2);
+  module_default.plugin(module_default3);
   module_default.data("xDOM", DOM_default);
   if (navigator.userAgent.indexOf("Safari") != -1 && navigator.userAgent.indexOf("Chrome") == -1) {
     (0, import_loadScript2.default)("//cdn.jsdelivr.net/npm/[email protected]/balancetext.min.js", "async", () => {

theme/modules/accordion.module/fields.json

@@ -0,0 +1,66 @@
+[ {
+  "id" : "8bd8d0b7-dd10-01db-3a1f-f65c8b32cc8f",
+  "name" : "items",
+  "display_width" : null,
+  "label" : "Questions",
+  "required" : false,
+  "locked" : false,
+  "occurrence" : {
+    "min" : 1,
+    "max" : null,
+    "sorting_label_field" : "1fcf58ba-3dfd-b383-91ea-11206c82d664",
+    "default" : 5
+  },
+  "children" : [ {
+    "id" : "1fcf58ba-3dfd-b383-91ea-11206c82d664",
+    "name" : "question",
+    "display_width" : null,
+    "label" : "Question",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Question"
+  }, {
+    "id" : "6338415d-a203-6e8f-df91-e2dacd023151",
+    "name" : "answer",
+    "display_width" : null,
+    "label" : "Answer",
+    "required" : false,
+    "locked" : false,
+    "type" : "richtext",
+    "default" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum."
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "type" : "group",
+  "default" : [ {
+    "question" : "Question",
+    "answer" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum."
+  }, {
+    "question" : "Question",
+    "answer" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum."
+  }, {
+    "question" : "Question",
+    "answer" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum."
+  }, {
+    "question" : "Question",
+    "answer" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum."
+  }, {
+    "question" : "Question",
+    "answer" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum."
+  } ]
+}, {
+  "id" : "035814d7-a42a-8fdb-a342-298cfa4ab12e",
+  "name" : "enable_faq_schema",
+  "display_width" : null,
+  "label" : "Enable FAQ Schema?",
+  "inline_help_text" : "Learn more about how to use the <a href=\"https://developers.google.com/search/docs/appearance/structured-data/faqpage\">FAQ Schema markup here</a>.",
+  "required" : true,
+  "locked" : false,
+  "display" : "toggle",
+  "type" : "boolean",
+  "default" : false
+} ]

theme/modules/accordion.module/meta.json

@@ -0,0 +1,17 @@
+{
+  "global": false,
+  "content_types": [
+    "LANDING_PAGE",
+    "SITE_PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "icon": "fontawesome-5.14.0:List:SOLID",
+  "host_template_types": [
+    "PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "label": "Accordion",
+  "is_available_for_new_content": true
+}