@paroicms/site-generator-plugin
Version:
ParoiCMS Site Generator Plugin
130 lines (129 loc) • 4.15 kB
JavaScript
import { isDef } from "@paroicms/public-anywhere-lib";
import { getJtHomeType, getJtSiteType, isMultilingual } from "./jt-site-schema-helpers.js";
import { indent } from "./template-helpers.js";
export function templateOfDocumentBreadcrumb() {
return `{% if doc.breadcrumb %}
<div class="Container">
{% for crumb in doc.breadcrumb %}
{% if crumb.url %}
<a class="TextLink" href="{{ crumb.url }}">{{ crumb.title }}</a>
{% else %}
<span>{{ crumb.title }}</span>
{% endif %}
{% unless forloop.last %}
/
{% endunless %}
{% endfor %}
</div>
{% endif %}`;
}
export function templateOfSiteHeader(ctx) {
const content = [
templateOfSiteLogoTitle(ctx),
templateOfMainMenu(ctx),
templateOfSearchOpener(ctx),
];
return `<div class="_bg2">
<header class="Container Header">
${indent(content.filter(isDef).join("\n"), 2, { skipFirst: true })}
</header>
</div>
<div
class="_paMobileMenu"
data-effect="paMobileMenu"
style="display: none"
>
<div data-inject="logo"></div>
<div data-inject="content"></div>
</div>`;
}
function templateOfSiteLogoTitle(ctx) {
const { siteSchema } = ctx;
const siteType = getJtSiteType(siteSchema);
const content = [
siteType.fields?.includes("logo")
? `{% if site.field.logo %}
{% set logo = image(site.field.logo, resize: "50x50") %}
<img
src="{{ logo.url }}"
width="{{ logo.width }}"
height="{{ logo.height }}"
loading="lazy"
alt="">
{% endif %}`
: undefined,
`<span class="Header-title">{{ site.field.title }}</span>`,
];
return `<a
class="Header-logo"
href="{{ site.home.url }}"
data-mobile-menu-part="logo">
${indent(content.filter(isDef).join("\n"), 1, { skipFirst: true })}
</a>`;
}
function templateOfMainMenu(ctx) {
const { siteSchema } = ctx;
const homeType = getJtHomeType(siteSchema);
const menuItems = homeType.routingChildren?.filter((typeName) => typeName !== "search" && typeName !== "searchPage");
if (!menuItems || menuItems.length === 0)
return;
const itemTemplates = menuItems.map((typeName) => `{% set ${typeName} = doc(site.home.routing.${typeName}) %}
{% if ${typeName} %}
<a
data-menu-item-id="{{ ${typeName}.id }}"
href="{{ ${typeName}.url }}">
{{ ${typeName}.title }}
</a>
{% endif %}`);
return `<nav
data-activate-menu-items="{{ doc.id | activateMenuItemsData }}"
data-mobile-menu-part="content"
data-mobile-menu-action="move">
${indent(itemTemplates.join("\n"), 1, { skipFirst: true })}
</nav>`;
}
function templateOfSearchOpener(ctx) {
const { siteSchema } = ctx;
const homeType = getJtHomeType(siteSchema);
const typeName = homeType.routingChildren?.find((typeName) => typeName === "search" || typeName === "searchPage");
if (!typeName)
return;
return `<div class="Row center">
{% set ${typeName} = doc(site.home.routing.${typeName}) %}
{% if ${typeName} %}
{% out searchOpener(url: ${typeName}.url, iconColor: "#fff") %}
{% endif %}
<div data-mobile-menu="button"></div>
</div>`;
}
export function templateOfSiteFooter(ctx) {
const content = [templateOfSiteFooterMention(ctx), templateOfLanguageSelector(ctx)];
return `<div class="_bg2">
<footer class="Container">
${indent(content.filter(isDef).join("\n"), 2, { skipFirst: true })}
</footer>
</div>`;
}
function templateOfSiteFooterMention(ctx) {
const { siteSchema } = ctx;
const siteType = getJtSiteType(siteSchema);
if (!siteType.fields?.includes("footerMention"))
return;
return `<div class="Text">{{ site.field.footerMention | raw }}</div>`;
}
function templateOfLanguageSelector(ctx) {
const { siteSchema } = ctx;
if (!isMultilingual(siteSchema))
return;
return `<ul class="LanguageSelector">
{% for translation in doc.translations %}
<li>
{% if translation.active %}
<span>{{ translation.languageLabel }}</span>
{% else %}
<a href="{{ translation.url }}">{{ translation.languageLabel }}</a>
{% endif %}
</li>
{% endfor %}
</ul>`;
}