diff --git a/package-lock.json b/package-lock.json index fb68df7..ae3f246 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,15 @@ { "name": "freshjuice-hubspot-theme", - "version": "1.1.0", + "version": "1.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "freshjuice-hubspot-theme", - "version": "1.1.0", + "version": "1.2.0", "license": "GPL-3.0-or-later", "devDependencies": { + "@alpinejs/collapse": "^3.13.10", "@alpinejs/intersect": "^3.13.10", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/forms": "^0.5.7", @@ -45,6 +46,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@alpinejs/collapse": { + "version": "3.13.10", + "resolved": "https://registry.npmjs.org/@alpinejs/collapse/-/collapse-3.13.10.tgz", + "integrity": "sha512-D4CRrwXdhuJdQX8gJvYBajMj90I85huf395eB8E+PfGy2QQZOxZxd92TWzaMLnMQlFHPkZ+chZmFuewjZ7y52Q==", + "dev": true + }, "node_modules/@alpinejs/intersect": { "version": "3.13.10", "resolved": "https://registry.npmjs.org/@alpinejs/intersect/-/intersect-3.13.10.tgz", diff --git a/package.json b/package.json index 8fb5915..5e7e343 100644 --- a/package.json +++ b/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", diff --git a/source/js/main.js b/source/js/main.js index dc47779..0a06f2e 100644 --- a/source/js/main.js +++ b/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); diff --git a/tailwind.config.js b/tailwind.config.js index 9d54dbd..94c0dfa 100644 --- a/tailwind.config.js +++ b/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", diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css index bfba261..a477d83 100644 --- a/theme/css/tailwind.css +++ b/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{ diff --git a/theme/js/main.js b/theme/js/main.js index c53952a..e0ad75c 100644 --- a/theme/js/main.js +++ b/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/balance-text@3.3.1/balancetext.min.js", "async", () => { diff --git a/theme/modules/accordion.module/fields.json b/theme/modules/accordion.module/fields.json new file mode 100644 index 0000000..d7b978b --- /dev/null +++ b/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 FAQ Schema markup here.", + "required" : true, + "locked" : false, + "display" : "toggle", + "type" : "boolean", + "default" : false +} ] \ No newline at end of file diff --git a/theme/modules/accordion.module/meta.json b/theme/modules/accordion.module/meta.json new file mode 100644 index 0000000..a1b78c0 --- /dev/null +++ b/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 +} diff --git a/theme/modules/accordion.module/module.css b/theme/modules/accordion.module/module.css new file mode 100644 index 0000000..e69de29 diff --git a/theme/modules/accordion.module/module.html b/theme/modules/accordion.module/module.html new file mode 100644 index 0000000..48e7bdc --- /dev/null +++ b/theme/modules/accordion.module/module.html @@ -0,0 +1,52 @@ +{#{% for item in module.items %}#} +{# {% inline_text field="question" value="{{ item.question }}" %}#} +{# {% inline_rich_text field="answer" value="{{ item.answer }}" %}#} +{#{% endfor %}#} + + +{% if module.enable_faq_schema %} + +{% endif %} + +
+ {% for item in module.items %} +
+

+ +

+
+
{{ item.answer }}
+
+
+ {% endfor %} +
+ diff --git a/theme/modules/accordion.module/module.js b/theme/modules/accordion.module/module.js new file mode 100644 index 0000000..e69de29