, the claim is what a category query matches. const headline = [s('hero.headlineTop'), s('hero.headlineBottom')].filter(Boolean); out.push( ' <header>', ` <p class="sb-pre-brand">${esc(site.siteName)}</p>`, ` <h1>${headline.map(esc).join('<br>')}</h1>`, ` <p class="sb-pre-lead">${esc(s('hero.subheading'))}</p>`, ' </header>' ); // What the product is, in its own terms. These five cards are the densest piece of // vocabulary the site owns — ECDH, DTLS, forward secrecy, packet padding — and the // only place a category search has anything to match on. const cards = ['s1', 's2', 's3', 's4', 's5'] .map((id) => { const title = [s(`unique.${id}.titleTop`), s(`unique.${id}.titleBottom`)].filter(Boolean).join(' '); const desc = s(`unique.${id}.desc`); if (!title && !desc) return ''; const tags = list(`unique.${id}.tags`); return [ ' <li class="sb-pre-card">', title ? ` <h3>${esc(title)}</h3>` : '', desc ? ` <p>${esc(desc)}</p>` : '', tags.length ? ` <ul class="sb-pre-tags">${tags.map((tag) => `<li>${esc(tag)}</li>`).join('')}</ul>` : '', ' </li>', ].filter(Boolean).join('\n'); }) .filter(Boolean); if (cards.length) { out.push( ' <section>', ` <p class="sb-pre-eyebrow">${esc(s('unique.eyebrow'))}</p>`, ` <h2>${esc(s('unique.heading'))}</h2>`, ' <ul class="sb-pre-grid">', ...cards, ' </ul>', ' </section>' ); } // The roadmap is a genuine timeline, so it is a numbered list and nothing else is. // Feature bullets are left to the app: thirteen releases of them would triple this // block's weight to say what the titles already say. const releases = []; for (let i = 1; i <= 40; i += 1) { const title = s(`roadmap.r${i}.title`); if (!title) break; const when = s(`roadmap.r${i}.date`); const sub = s(`roadmap.r${i}.sub`); releases.push( [ ' <li>', ` <h3>${esc(title)}</h3>`, when ? ` <span class="sb-pre-when">${esc(when)}</span>` : '', sub ? ` <p>${esc(sub)}</p>` : '', ' </li>', ].filter(Boolean).join('\n') ); } if (releases.length) { out.push( ' <section>', ` <p class="sb-pre-eyebrow">${esc(s('roadmap.eyebrow'))}</p>`, ` <h2>${esc(s('roadmap.heading'))}</h2>`, ` <p>${esc(s('roadmap.subheading'))}</p>`, ' <ol class="sb-pre-steps">', ...releases, ' </ol>', ' </section>' ); } // Internal links to the documentation. A sitemap tells Google the pages exist; a // link from the site's most-crawled page is what actually gets them fetched and // gives them anchor text to be ranked on. The whole block is marked lang="en" // because the documents are English on every locale — an untagged English list // inside a German page is a quality signal working against itself. if (docs.length) { out.push( ' <section lang="en" dir="ltr">', ' <p class="sb-pre-eyebrow">Documentation</p>', ' <ul class="sb-pre-docs">', ...docs.map((doc) => ` <li><a href="${esc(doc.url)}" hreflang="en">${esc(doc.title)}</a></li>`), ' </ul>', ' </section>' ); } // One outbound link, to the repository. It is the site's only real corroboration — // the thing a reader checks when a privacy claim needs backing. out.push( ' <section>', ` <h2>${esc(s('community.title'))}</h2>`, ` <p>${esc(s('community.description'))}</p>`, ` <p><a href="${esc(site.repository)}" rel="noopener">${esc(s('community.github'))}</a></p>`, ' </section>' ); // The mark, and nothing else — logo/securebit-mark.svg, the same one the header // shows, inlined so it costs no request and is contentful the moment the stylesheet // lands. Its gradient ids are prefixed here: an inline <svg> puts them in the page's // id namespace, and the app has SVGs of its own. // aria-hidden because it says nothing a screen reader needs; the page it stands in // for announces itself once it is there. const boot = `<div class="sb-boot" aria-hidden="true"> <svg viewBox="276 240 700 760" xmlns="http://www.w3.org/2000/svg" focusable="false"> <defs> <linearGradient id="sbBootSilver" x1="0" y1="0" x2="0.35" y2="1"><stop offset="0" stop-color="#fdfdff"/><stop offset="0.20" stop-color="#e7e7ec"/><stop offset="0.46" stop-color="#c4c4cb"/><stop offset="0.72" stop-color="#a4a4ac"/><stop offset="1" stop-color="#86868d"/></linearGradient> <linearGradient id="sbBootOrange" x1="0" y1="0" x2="0.25" y2="1"><stop offset="0" stop-color="#ffb84d"/><stop offset="0.27" stop-color="#ff9a33"/><stop offset="0.58" stop-color="#fb7d16"/><stop offset="1" stop-color="#db5d04"/></linearGradient> </defs> <path fill="url(#sbBootSilver)" fill-rule="nonzero" d="m 835.26446,352.56633 102.39051,-103.90366 -418.64101,1.00877 c 0,0 -171.69323,1.22309 -222.43455,167.96079 -52.34251,171.99925 77.67556,253.20215 77.67556,253.20215 0,0 35.54922,23.82856 79.77792,31.68982 15.73869,2.39372 79.16695,1.09532 79.16695,1.09532 54.47377,-10.08773 41.40629,-81.22528 -10.65516,-77.67557 C 492.06451,630.5166 372.5156,615.45079 386.86464,469.07968 415.02639,353.31661 520.52712,353.57511 520.52712,353.57511 Z"/> <path fill="url(#sbBootOrange)" fill-rule="nonzero" d="m 289.24744,881.29522 95.22696,-95.94027 369.13823,1.06997 C 873.15229,774.31964 863.51011,647.63259 863.51011,647.63259 846.7608,546.1216 749.51871,545.49427 749.51871,545.49427 l -232.01791,0.25219 c -37.80546,-8.91638 -37.85435,-49.4299 -37.85435,-49.4299 0,0 -1.56131,-38.07813 40.52401,-46.63785 l 260.62023,-0.7745 c 170.83788,24.60922 185.61432,187.63187 185.61432,187.63187 0,0 18.85523,117.07655 -90.63794,200.89054 l -0.62454,154.4184 -144.79052,-110.68137 z"/> <path fill="url(#sbBootOrange)" d="m 658.38568,658.74237 a 27.462458,27.462458 0 0 1 -27.43073,27.46244 27.462458,27.462458 0 0 1 -27.49412,-27.39898 27.462458,27.462458 0 0 1 27.36719,-27.52575 27.462458,27.462458 0 0 1 27.55736,27.33536 z"/> <path fill="url(#sbBootOrange)" d="m 748.42871,659.07971 a 27.462458,27.462458 0 0 1 -27.43073,27.46244 27.462458,27.462458 0 0 1 -27.49412,-27.39898 27.462458,27.462458 0 0 1 27.36719,-27.52575 27.462458,27.462458 0 0 1 27.55736,27.33537 z"/> </svg> </div>`; return `${STYLE} ${boot} <div class="sb-pre"> <div class="sb-pre-in"> ${out.join('\n')} </div> </div>`; } module.exports = { prerenderShell };

. * * Why this exists: everything on the site is drawn by React after ~800 KB of JS has * downloaded and run, so until now a crawler fetching / got a full of correct * metadata wrapped around an empty div. Search Console shows exactly what that costs — * the site ranks for the spelling of its domain (chatbit, chatyourbit, keepbit) rather * than for anything it does, and twelve of the thirteen localized pages have never been * shown to anyone, because a page whose only difference from the English one is its * tags gives Google no reason to swap it in. * * So each page is built carrying its own text: the same strings the app renders, from * the same locales/

.json, in real headings and paragraphs.
 *
 * It is never shown to a visitor who has JavaScript. The block defaults to display:none
 * and only a 
`;

/**
 * Build the block for one locale.
 *
 * Strings are read through a lookup that falls back to the default locale and then to
 * nothing: a locale that gains a key before its translation lands should render one
 * English line, not an empty heading or the literal key.
 */
function prerenderShell(site, code, docs = []) {
    const ui = site.byCode[code].ui || {};
    const fallback = site.byCode[site.defaultLocale].ui || {};
    const s = (key) => {
        const value = ui[key] !== undefined ? ui[key] : fallback[key];
        return typeof value === 'string' ? value : '';
    };
    const list = (key) => {
        const value = ui[key] !== undefined ? ui[key] : fallback[key];
        return Array.isArray(value) ? value : [];
    };

    const out = [];

    // Hero. One  per page, carrying the product's own claim rather than its name —
    // the name is already in , the claim is what a category query matches.
    const headline = [s('hero.headlineTop'), s('hero.headlineBottom')].filter(Boolean);
    out.push(
        '  <header>',
        `    <p class="sb-pre-brand">${esc(site.siteName)}</p>`,
        `    <h1>${headline.map(esc).join('<br>')}</h1>`,
        `    <p class="sb-pre-lead">${esc(s('hero.subheading'))}</p>`,
        '  </header>'
    );

    // What the product is, in its own terms. These five cards are the densest piece of
    // vocabulary the site owns — ECDH, DTLS, forward secrecy, packet padding — and the
    // only place a category search has anything to match on.
    const cards = ['s1', 's2', 's3', 's4', 's5']
        .map((id) => {
            const title = [s(`unique.${id}.titleTop`), s(`unique.${id}.titleBottom`)].filter(Boolean).join(' ');
            const desc = s(`unique.${id}.desc`);
            if (!title && !desc) return '';
            const tags = list(`unique.${id}.tags`);
            return [
                '      <li class="sb-pre-card">',
                title ? `        <h3>${esc(title)}</h3>` : '',
                desc ? `        <p>${esc(desc)}</p>` : '',
                tags.length
                    ? `        <ul class="sb-pre-tags">${tags.map((tag) => `<li>${esc(tag)}</li>`).join('')}</ul>`
                    : '',
                '      </li>',
            ].filter(Boolean).join('\n');
        })
        .filter(Boolean);

    if (cards.length) {
        out.push(
            '  <section>',
            `    <p class="sb-pre-eyebrow">${esc(s('unique.eyebrow'))}</p>`,
            `    <h2>${esc(s('unique.heading'))}</h2>`,
            '    <ul class="sb-pre-grid">',
            ...cards,
            '    </ul>',
            '  </section>'
        );
    }

    // The roadmap is a genuine timeline, so it is a numbered list and nothing else is.
    // Feature bullets are left to the app: thirteen releases of them would triple this
    // block's weight to say what the titles already say.
    const releases = [];
    for (let i = 1; i <= 40; i += 1) {
        const title = s(`roadmap.r${i}.title`);
        if (!title) break;
        const when = s(`roadmap.r${i}.date`);
        const sub = s(`roadmap.r${i}.sub`);
        releases.push(
            [
                '      <li>',
                `        <h3>${esc(title)}</h3>`,
                when ? `        <span class="sb-pre-when">${esc(when)}</span>` : '',
                sub ? `        <p>${esc(sub)}</p>` : '',
                '      </li>',
            ].filter(Boolean).join('\n')
        );
    }

    if (releases.length) {
        out.push(
            '  <section>',
            `    <p class="sb-pre-eyebrow">${esc(s('roadmap.eyebrow'))}</p>`,
            `    <h2>${esc(s('roadmap.heading'))}</h2>`,
            `    <p>${esc(s('roadmap.subheading'))}</p>`,
            '    <ol class="sb-pre-steps">',
            ...releases,
            '    </ol>',
            '  </section>'
        );
    }

    // Internal links to the documentation. A sitemap tells Google the pages exist; a
    // link from the site's most-crawled page is what actually gets them fetched and
    // gives them anchor text to be ranked on. The whole block is marked lang="en"
    // because the documents are English on every locale — an untagged English list
    // inside a German page is a quality signal working against itself.
    if (docs.length) {
        out.push(
            '  <section lang="en" dir="ltr">',
            '    <p class="sb-pre-eyebrow">Documentation</p>',
            '    <ul class="sb-pre-docs">',
            ...docs.map((doc) =>
                `      <li><a href="${esc(doc.url)}" hreflang="en">${esc(doc.title)}</a></li>`),
            '    </ul>',
            '  </section>'
        );
    }

    // One outbound link, to the repository. It is the site's only real corroboration —
    // the thing a reader checks when a privacy claim needs backing.
    out.push(
        '  <section>',
        `    <h2>${esc(s('community.title'))}</h2>`,
        `    <p>${esc(s('community.description'))}</p>`,
        `    <p><a href="${esc(site.repository)}" rel="noopener">${esc(s('community.github'))}</a></p>`,
        '  </section>'
    );

    // The mark, and nothing else — logo/securebit-mark.svg, the same one the header
    // shows, inlined so it costs no request and is contentful the moment the stylesheet
    // lands. Its gradient ids are prefixed here: an inline <svg> puts them in the page's
    // id namespace, and the app has SVGs of its own.
    // aria-hidden because it says nothing a screen reader needs; the page it stands in
    // for announces itself once it is there.
    const boot = `<div class="sb-boot" aria-hidden="true">
  <svg viewBox="276 240 700 760" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <defs>
      <linearGradient id="sbBootSilver" x1="0" y1="0" x2="0.35" y2="1"><stop offset="0" stop-color="#fdfdff"/><stop offset="0.20" stop-color="#e7e7ec"/><stop offset="0.46" stop-color="#c4c4cb"/><stop offset="0.72" stop-color="#a4a4ac"/><stop offset="1" stop-color="#86868d"/></linearGradient>
      <linearGradient id="sbBootOrange" x1="0" y1="0" x2="0.25" y2="1"><stop offset="0" stop-color="#ffb84d"/><stop offset="0.27" stop-color="#ff9a33"/><stop offset="0.58" stop-color="#fb7d16"/><stop offset="1" stop-color="#db5d04"/></linearGradient>
    </defs>
    <path fill="url(#sbBootSilver)" fill-rule="nonzero" d="m 835.26446,352.56633 102.39051,-103.90366 -418.64101,1.00877 c 0,0 -171.69323,1.22309 -222.43455,167.96079 -52.34251,171.99925 77.67556,253.20215 77.67556,253.20215 0,0 35.54922,23.82856 79.77792,31.68982 15.73869,2.39372 79.16695,1.09532 79.16695,1.09532 54.47377,-10.08773 41.40629,-81.22528 -10.65516,-77.67557 C 492.06451,630.5166 372.5156,615.45079 386.86464,469.07968 415.02639,353.31661 520.52712,353.57511 520.52712,353.57511 Z"/>
    <path fill="url(#sbBootOrange)" fill-rule="nonzero" d="m 289.24744,881.29522 95.22696,-95.94027 369.13823,1.06997 C 873.15229,774.31964 863.51011,647.63259 863.51011,647.63259 846.7608,546.1216 749.51871,545.49427 749.51871,545.49427 l -232.01791,0.25219 c -37.80546,-8.91638 -37.85435,-49.4299 -37.85435,-49.4299 0,0 -1.56131,-38.07813 40.52401,-46.63785 l 260.62023,-0.7745 c 170.83788,24.60922 185.61432,187.63187 185.61432,187.63187 0,0 18.85523,117.07655 -90.63794,200.89054 l -0.62454,154.4184 -144.79052,-110.68137 z"/>
    <path fill="url(#sbBootOrange)" d="m 658.38568,658.74237 a 27.462458,27.462458 0 0 1 -27.43073,27.46244 27.462458,27.462458 0 0 1 -27.49412,-27.39898 27.462458,27.462458 0 0 1 27.36719,-27.52575 27.462458,27.462458 0 0 1 27.55736,27.33536 z"/>
    <path fill="url(#sbBootOrange)" d="m 748.42871,659.07971 a 27.462458,27.462458 0 0 1 -27.43073,27.46244 27.462458,27.462458 0 0 1 -27.49412,-27.39898 27.462458,27.462458 0 0 1 27.36719,-27.52575 27.462458,27.462458 0 0 1 27.55736,27.33537 z"/>
  </svg>
</div>`;

    return `${STYLE}
${boot}
<div class="sb-pre">
  <div class="sb-pre-in">
${out.join('\n')}
  </div>
</div>`;
}

module.exports = { prerenderShell };