@paroicms/site-generator-plugin
Version:
ParoiCMS Site Generator Plugin
123 lines (122 loc) • 4.01 kB
JavaScript
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 %}
<a class="TextLink" href="{{ crumb.url }}">{{ crumb.title }}</a>
/
{% endfor %}
{{ doc.title }}
</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(Boolean).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 %}
{% useImage 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(Boolean).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 variableTemplates = menuItems.map((typeName) => `{% getDoc ${typeName} id: site.home.${typeName}.id %}`);
const itemTemplates = menuItems.map((typeName) => `<a
data-menu-item-id="{{ ${typeName}.id }}"
href="{{ ${typeName}.url }}">
{{ ${typeName}.title }}
</a>`);
return `${variableTemplates.join("\n")}
<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">
{% getDoc ${typeName} id: site.home.${typeName}.id %}
<span
data-effect="paSearchOpener"
data-search-url="{{ ${typeName}.url }}"
data-icon-color="#fff"></span>
<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(Boolean).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>
<a
class="{% if translation.active %}active{% endif %}"
href="{{ translation.url }}"
title="{{ translation.languageLabel }}">{{ translation.language }}</a>
</li>
{% endfor %}
</ul>`;
}