Import source: app/scripts/static-fallback.mjs
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,62 @@
|
|||||||
|
export function esc(value) {
|
||||||
|
return String(value ?? '')
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function cleanText(value) {
|
||||||
|
return String(value ?? '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderLinks(links = []) {
|
||||||
|
const items = links
|
||||||
|
.filter(item => item?.href && item?.label)
|
||||||
|
.slice(0, 24)
|
||||||
|
.map(item => `<li><a href="${esc(item.href)}">${esc(item.label)}</a>${item.text ? `<span>${esc(item.text)}</span>` : ''}</li>`)
|
||||||
|
.join('');
|
||||||
|
return items ? `<ul class="static-fallback__links">${items}</ul>` : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFacts(facts = []) {
|
||||||
|
const items = facts
|
||||||
|
.filter(item => item?.label && item?.value)
|
||||||
|
.slice(0, 12)
|
||||||
|
.map(item => `<li><strong>${esc(item.label)}</strong><span>${esc(item.value)}</span></li>`)
|
||||||
|
.join('');
|
||||||
|
return items ? `<ul class="static-fallback__facts">${items}</ul>` : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function renderStaticFallback({ eyebrow, title, description, bodyHtml, facts, links, sections } = {}) {
|
||||||
|
const renderedSections = (sections ?? [])
|
||||||
|
.filter(section => section?.title || section?.text)
|
||||||
|
.slice(0, 8)
|
||||||
|
.map(section => `
|
||||||
|
<section>
|
||||||
|
${section.title ? `<h2>${esc(section.title)}</h2>` : ''}
|
||||||
|
${section.text ? `<p>${esc(section.text)}</p>` : ''}
|
||||||
|
${renderLinks(section.links)}
|
||||||
|
</section>`)
|
||||||
|
.join('');
|
||||||
|
|
||||||
|
return `<section id="static-fallback" class="static-fallback" aria-label="محتوای اصلی صفحه">
|
||||||
|
<main class="static-fallback__inner">
|
||||||
|
${eyebrow ? `<p class="static-fallback__eyebrow">${esc(eyebrow)}</p>` : ''}
|
||||||
|
${title ? `<h1>${esc(title)}</h1>` : ''}
|
||||||
|
${description ? `<p class="static-fallback__lead">${esc(description)}</p>` : ''}
|
||||||
|
${renderFacts(facts)}
|
||||||
|
${renderLinks(links)}
|
||||||
|
${bodyHtml ? `<article class="static-fallback__article">${bodyHtml}</article>` : ''}
|
||||||
|
${renderedSections}
|
||||||
|
</main>
|
||||||
|
</section>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function replaceStaticFallback(html, fallbackHtml) {
|
||||||
|
const fallbackPattern = /<section id="static-fallback"[\s\S]*?<\/section>\s*(?=<div id="root"><\/div>)/;
|
||||||
|
if (fallbackPattern.test(html)) {
|
||||||
|
return html.replace(fallbackPattern, `${fallbackHtml}\n\n `);
|
||||||
|
}
|
||||||
|
return html.replace('<div id="root"></div>', `${fallbackHtml}\n\n <div id="root"></div>`);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user