Skip to content

Commit

Permalink
Merge pull request #3 from freshjuice-dev/develop
Browse files Browse the repository at this point in the history
Add Accordion module with FAQ schema support
  • Loading branch information
reatlat authored Apr 29, 2024
2 parents 1d85024 + 020fee1 commit 59e946e
Show file tree
Hide file tree
Showing 11 changed files with 293 additions and 4 deletions.
11 changes: 9 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions source/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -26,6 +27,7 @@ function domReady(callback) {

// Add plugins to Alpine
Alpine.plugin(intersect);
Alpine.plugin(collapse);

Alpine.data("xDOM", dataDOM);

Expand Down
10 changes: 10 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
41 changes: 40 additions & 1 deletion theme/css/tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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{
Expand Down
95 changes: 95 additions & 0 deletions theme/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down Expand Up @@ -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", () => {
Expand Down
66 changes: 66 additions & 0 deletions theme/modules/accordion.module/fields.json
Original file line number Diff line number Diff line change
@@ -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
} ]
17 changes: 17 additions & 0 deletions theme/modules/accordion.module/meta.json
Original file line number Diff line number Diff line change
@@ -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
}
Empty file.
Loading

0 comments on commit 59e946e

Please sign in to comment.