|
| 1 | +/** A starter stack's page. Pure: everything it needs is passed in. */ |
| 2 | +import { scriptJson } from "./entry-page.mjs"; |
| 3 | +import { |
| 4 | + commercialLabel, |
| 5 | + entryPageUrl, |
| 6 | + esc, |
| 7 | + STATUS_NOTES, |
| 8 | + stackPageUrl, |
| 9 | + verifiedAge, |
| 10 | +} from "./shared.mjs"; |
| 11 | +import { copyAllText } from "./stacks.mjs"; |
| 12 | + |
| 13 | +export function stackJsonLd(meta, sections, site) { |
| 14 | + const rows = sections.flatMap((s) => s.rows); |
| 15 | + return { |
| 16 | + "@context": "https://schema.org", |
| 17 | + "@type": "ItemList", |
| 18 | + name: meta.title, |
| 19 | + description: meta.task, |
| 20 | + url: stackPageUrl(site, meta.id), |
| 21 | + numberOfItems: rows.length, |
| 22 | + itemListElement: rows.map((r, i) => ({ |
| 23 | + "@type": "ListItem", |
| 24 | + position: i + 1, |
| 25 | + name: `${r.need}: ${r.entry.name}`, |
| 26 | + url: entryPageUrl(site, r.entry.id), |
| 27 | + })), |
| 28 | + }; |
| 29 | +} |
| 30 | + |
| 31 | +const entryLink = (entry) => `<a href="../../entry/${esc(entry.id)}/">${esc(entry.name)}</a>`; |
| 32 | +const names = (items) => items.map((i) => entryLink(i.entry)).join(", "); |
| 33 | + |
| 34 | +function owesHtml(owed) { |
| 35 | + const groups = []; |
| 36 | + if (owed.credits.length) { |
| 37 | + const items = owed.credits |
| 38 | + .map((c, n) => { |
| 39 | + const label = `<p class="attribution-label">${esc(c.needs.join(", "))}: ${entryLink(c.entry)}</p>`; |
| 40 | + if (!c.line) { |
| 41 | + return `<li class="credit-item">${label}<p class="attribution-note">No canned credit line: see the entry.</p></li>`; |
| 42 | + } |
| 43 | + return `<li class="credit-item">${label} |
| 44 | + <p class="attribution-string" id="credit-${n}">${esc(c.line)}</p> |
| 45 | + <button type="button" class="btn-ghost" data-copy="${esc(c.line)}" data-target="credit-${n}" hidden>Copy credit line</button> |
| 46 | + <span class="copy-status" role="status" aria-live="polite"></span></li>`; |
| 47 | + }) |
| 48 | + .join("\n"); |
| 49 | + const all = copyAllText(owed); |
| 50 | + const allButton = all |
| 51 | + ? `<p class="copy-all"><button type="button" class="btn-ghost" data-copy="${esc(all)}" data-target="credits-list" hidden>Copy all credits</button> |
| 52 | + <span class="copy-status" role="status" aria-live="polite"></span></p>` |
| 53 | + : ""; |
| 54 | + groups.push(`<div class="owes-group"><h3>Credits to ship</h3><ul class="credit-list" id="credits-list">${items}</ul>${allButton}</div>`); |
| 55 | + } |
| 56 | + if (owed.noCredit.length) { |
| 57 | + const n = owed.noCredit.length; |
| 58 | + groups.push(`<div class="owes-group"><h3>No credit needed</h3><p>${n} ${n === 1 ? "pick" : "picks"}: ${names(owed.noCredit)}.</p></div>`); |
| 59 | + } |
| 60 | + if (owed.perFile.length) { |
| 61 | + groups.push(`<div class="owes-group"><h3>Check each file</h3><p>Some files qualify, some do not. Check each file you take from ${names(owed.perFile)}.</p></div>`); |
| 62 | + } |
| 63 | + if (owed.openQuestions.length) { |
| 64 | + const items = owed.openQuestions.map((i) => `<li>${entryLink(i.entry)}: ${esc(STATUS_NOTES["needs-review"])}</li>`).join(""); |
| 65 | + groups.push(`<div class="owes-group"><h3>Open questions</h3><ul>${items}</ul></div>`); |
| 66 | + } |
| 67 | + if (owed.unclear.length) { |
| 68 | + groups.push(`<div class="owes-group"><h3>Unclear credit</h3><p>Read the Notes on ${names(owed.unclear)}.</p></div>`); |
| 69 | + } |
| 70 | + return groups.join("\n "); |
| 71 | +} |
| 72 | + |
| 73 | +function rowHtml(r, now) { |
| 74 | + const age = verifiedAge(r.entry.verified, now); |
| 75 | + const ageText = age.days === null ? "verified date unknown" : `verified ${r.entry.verified} (${age.days}d ago)`; |
| 76 | + const flag = r.entry.status === "needs-review" ? ' <span class="pick-flag">needs review</span>' : ""; |
| 77 | + return `<li class="pick"> |
| 78 | + <p class="pick-need">${esc(r.need)}</p> |
| 79 | + <p class="pick-name">${entryLink(r.entry)}${flag}</p> |
| 80 | + <p class="pick-licence">${esc(r.entry.license)} · ${esc(commercialLabel(r.entry.commercial))} · <span class="verified is-${age.bucket}">${esc(ageText)}</span></p> |
| 81 | + <p class="pick-why">${r.whyHtml}</p> |
| 82 | + </li>`; |
| 83 | +} |
| 84 | + |
| 85 | +export function stackPageHtml({ stack, sections, gapsHtml, leadHtml, owed, site, stamp, total, hasCard, now }) { |
| 86 | + const { meta } = stack; |
| 87 | + const repo = site.repo; |
| 88 | + const url = stackPageUrl(site, meta.id); |
| 89 | + const title = `${meta.title} | ${site.title}`; |
| 90 | + const card = `${String(site.siteUrl).replace(/\/+$/, "")}/og-card.png`; |
| 91 | + const cardMeta = hasCard |
| 92 | + ? `<meta property="og:image" content="${esc(card)}" /> |
| 93 | + <meta name="twitter:card" content="summary_large_image" /> |
| 94 | + <meta name="twitter:image" content="${esc(card)}" />` |
| 95 | + : `<meta name="twitter:card" content="summary" />`; |
| 96 | + const sectionHtml = sections |
| 97 | + .map( |
| 98 | + (s) => `<section class="stack-section" aria-labelledby="sec-${esc(s.name.toLowerCase())}"> |
| 99 | + <h2 id="sec-${esc(s.name.toLowerCase())}">${esc(s.name)}</h2> |
| 100 | + <ul class="pick-list"> |
| 101 | + ${s.rows.map((r) => rowHtml(r, now)).join("\n ")} |
| 102 | + </ul> |
| 103 | + </section>` |
| 104 | + ) |
| 105 | + .join("\n "); |
| 106 | + const gaps = gapsHtml.length |
| 107 | + ? `<section class="stack-section" aria-labelledby="sec-gaps"> |
| 108 | + <h2 id="sec-gaps">Gaps</h2> |
| 109 | + <ul class="gap-list">${gapsHtml.map((g) => `<li>${g}</li>`).join("")}</ul> |
| 110 | + </section>` |
| 111 | + : ""; |
| 112 | + const script = copyAllText(owed) ? '<script src="../../stack.js" defer></script>' : ""; |
| 113 | + return `<!DOCTYPE html> |
| 114 | +<html lang="en"> |
| 115 | + <head> |
| 116 | + <meta charset="utf-8" /> |
| 117 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 118 | + <title>${esc(title)}</title> |
| 119 | + <meta name="description" content="${esc(meta.task)}" /> |
| 120 | + <link rel="canonical" href="${esc(url)}" /> |
| 121 | + <meta property="og:type" content="article" /> |
| 122 | + <meta property="og:site_name" content="${esc(site.title)}" /> |
| 123 | + <meta property="og:title" content="${esc(title)}" /> |
| 124 | + <meta property="og:description" content="${esc(meta.task)}" /> |
| 125 | + <meta property="og:url" content="${esc(url)}" /> |
| 126 | + ${cardMeta} |
| 127 | + <meta name="twitter:title" content="${esc(title)}" /> |
| 128 | + <meta name="twitter:description" content="${esc(meta.task)}" /> |
| 129 | + <link rel="icon" href="../../favicon.svg" type="image/svg+xml" /> |
| 130 | + <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| 131 | + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| 132 | + <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" /> |
| 133 | + <link rel="stylesheet" href="../../styles.css" /> |
| 134 | + <script type="application/ld+json">${scriptJson(stackJsonLd(meta, sections, site))}</script> |
| 135 | + </head> |
| 136 | + <body> |
| 137 | + <a class="skip-link" href="#content">Skip to stack</a> |
| 138 | + <header class="topbar"> |
| 139 | + <a class="brand" href="../../">Free Game Dev Assets</a> |
| 140 | + <nav class="topnav" aria-label="Primary"> |
| 141 | + <a href="../../#catalog">Catalog</a> |
| 142 | + <a href="../../#stacks">Stacks</a> |
| 143 | + <a href="../../#starters">Starters</a> |
| 144 | + <a href="../../#guides">Guides</a> |
| 145 | + <a href="${esc(repo)}" rel="noopener noreferrer">GitHub</a> |
| 146 | + </nav> |
| 147 | + </header> |
| 148 | + <main class="section entry-page stack-page" id="content"> |
| 149 | + <nav class="breadcrumb" aria-label="Breadcrumb"> |
| 150 | + <a href="../../#catalog">Catalog</a> <span aria-hidden="true">/</span> |
| 151 | + <a href="../../#stacks">Stacks</a> <span aria-hidden="true">/</span> |
| 152 | + <span aria-current="page">${esc(meta.title)}</span> |
| 153 | + </nav> |
| 154 | + <h1>${esc(meta.title)}</h1> |
| 155 | + <div class="entry-lead"><p>${esc(meta.task)}</p>${leadHtml}</div> |
| 156 | + <section class="owes" aria-labelledby="owes-title"> |
| 157 | + <h2 id="owes-title">What this stack owes</h2> |
| 158 | + ${owesHtml(owed)} |
| 159 | + </section> |
| 160 | + ${sectionHtml} |
| 161 | + ${gaps} |
| 162 | + <p class="stack-note">Stack walked ${esc(meta.walked)}. Each licence is only as current as its entry's verified date.</p> |
| 163 | + </main> |
| 164 | + <footer class="footer"> |
| 165 | + <p>Catalog metadata is CC0. Linked assets keep their own licenses: re-check the live source before shipping.</p> |
| 166 | + <p class="footer-stamp">Built ${esc(stamp)} from ${total} catalog entries.</p> |
| 167 | + </footer> |
| 168 | + ${script} |
| 169 | + </body> |
| 170 | +</html> |
| 171 | +`; |
| 172 | +} |
0 commit comments