@profullstack/footer 0.2.0 → 0.2.2

package/README.md

@@ -1,7 +1,7 @@
 # @profullstack/footer
 
 One footer for every Profullstack site: your links, the copyright line, and the
-`<<  Profullstack  >>  ⚄` webring nav (previous, ring, next, random).
+`<<  Profullstack  >>` webring nav (previous, ring, next).
 
 **Publish once, every site updates.** The markup and CSS ship as data
 (`template.json`). At render time each site fetches
@@ -72,6 +72,7 @@ npx @profullstack/footer html --site https://example.com/ --link Docs=/docs
 | `ring` | `{ slug: 'profullstack', name: 'Profullstack', host: 'https://rssamplifier.com' }` | |
 | `css` | `true` | `false` drops the `<style>`; style `.pfs-footer*` yourself |
 | `houseLinks` | `true` | `false` hides links the template adds for every site |
+| `nonce` | | CSP nonce for the inline `<style>`; or `css: false` and style `.pfs-footer*` yourself |
 
 Theme it with `--pfs-footer-muted`, `--pfs-footer-gap` and `--pfs-footer-size` on
 `.pfs-footer`; colors otherwise inherit from the page.

package/bin/profullstack-footer.js

@@ -83,7 +83,7 @@ switch (cmd) {
     const html = (await res.text()).replace(/&/g, '&');
     const want = ringLinks(home);
     let ok = res.ok;
-    for (const k of /** @type {const} */ (['previous', 'next', 'random'])) {
+    for (const k of /** @type {const} */ (['previous', 'next'])) {
       const has = html.includes(want[k]);
       ok &&= has;
       process.stdout.write(`${has ? 'ok  ' : 'MISS'} ${k} ${want[k]}\n`);

package/index.d.ts

@@ -18,6 +18,8 @@ export interface FooterOptions {
   css?: boolean;
   /** false hides the template's house links. */
   houseLinks?: boolean;
+  /** CSP nonce for the inline <style> (style-src 'nonce-...'). */
+  nonce?: string;
 }
 export interface FooterTemplate {
   version: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@profullstack/footer",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "One footer for every Profullstack site: links, copyright and the << Profullstack >> webring nav with Random. Sites render the @latest template from the CDN at runtime, so a release updates every site without a redeploy.",
   "keywords": ["footer", "webring", "openwebring", "copyright", "react", "nextjs", "hono", "ssr"],

package/src/render.js

@@ -109,6 +109,7 @@ export function fill(tpl, vars) {
  *   ring?: { slug?: string, name?: string, host?: string },
  *   css?: boolean,
  *   houseLinks?: boolean,
+ *   nonce?: string,
  * }} FooterOptions
  * @typedef {{ version: string, renderer: number, css: string, link: string, footer: string, houseLinks?: FooterLink[] }} FooterTemplate
  */
@@ -141,6 +142,7 @@ export function renderFooter(template, opts) {
     tagline: opts.tagline ?? '',
     site: canonicalSite(opts.site),
     name: opts.name ?? '',
+    nonce: opts.nonce ?? '',
   });
 }
 

package/src/template.js

@@ -8,20 +8,8 @@
 // Bump `renderer` only when the template needs placeholders an older
 // render.js does not fill; older installs then keep their bundled template.
 
-// OpenIcon line glyphs (github.com/profullstack/openicon, keys `random` and
-// `vote`) as CSS masks. A template may not carry <svg> (sanitizeTemplate strips
-// it), and a mask over currentColor keeps the icon the colour of the link.
-const glyph = (body) =>
-  `url("data:image/svg+xml,${encodeURIComponent(
-    `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>${body}</svg>`,
-  )}")`;
-const RANDOM = glyph(
-  "<rect x='3' y='3' width='18' height='18' rx='3'/><circle cx='8' cy='8' r='1'/><circle cx='16' cy='8' r='1'/><circle cx='12' cy='12' r='1'/><circle cx='8' cy='16' r='1'/><circle cx='16' cy='16' r='1'/>",
-);
-const VOTE = glyph("<path d='M12 4 21 19H3z'/>");
-
 export default {
-  version: '0.2.0',
+  version: '0.2.2',
   renderer: 1,
   css: [
     '.pfs-footer{--pfs-footer-muted:color-mix(in srgb,currentColor 62%,transparent);--pfs-footer-gap:.5rem 1.25rem;--pfs-footer-size:.875rem;',
@@ -31,29 +19,19 @@ export default {
     '.pfs-footer a:hover,.pfs-footer a:focus-visible{color:inherit;text-decoration:underline}',
     '.pfs-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pfs-footer-gap)}',
     '.pfs-footer__ring{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem}',
-    '.pfs-footer__icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;',
-    '-webkit-mask:var(--pfs-footer-glyph) center/contain no-repeat;mask:var(--pfs-footer-glyph) center/contain no-repeat}',
-    `.pfs-footer__icon--random{--pfs-footer-glyph:${RANDOM}}`,
-    `.pfs-footer__icon--vote{--pfs-footer-glyph:${VOTE}}`,
     '.pfs-footer__copy{margin:0;color:var(--pfs-footer-muted)}',
     '.pfs-footer__copy a{color:inherit}',
   ].join(''),
   link: '<a href="{{href}}"{{#rel}} rel="{{rel}}"{{/rel}}>{{label}}</a>',
   footer: [
     '<footer class="pfs-footer" data-pfs-footer="{{version}}">',
-    '{{#css}}<style>{{{css}}}</style>{{/css}}',
+    '{{#css}}<style{{#nonce}} nonce="{{nonce}}"{{/nonce}}>{{{css}}}</style>{{/css}}',
     '<div class="pfs-footer__inner">',
     '{{#links}}<nav class="pfs-footer__links" aria-label="Footer">{{{links}}}</nav>{{/links}}',
     '<nav class="webring pfs-footer__ring" aria-label="{{ring_name}} webring">',
     '<a href="{{previous}}" rel="prev" title="Previous site">&lt;&lt;</a>',
     '<a href="{{ring}}">{{ring_name}}</a>',
     '<a href="{{next}}" rel="next" title="Next site">&gt;&gt;</a>',
-    '<a href="{{random}}" title="Random site" aria-label="Random site"><span class="pfs-footer__icon pfs-footer__icon--random" aria-hidden="true"></span></a>',
-    // Anonymous, throttled vote for this site. A bare URL because a new
-    // placeholder would need a renderer bump; the ring host finds the site
-    // from the Referer, and referrerpolicy keeps the origin on sites whose
-    // own policy is no-referrer.
-    '<a href="{{ring}}/vote" referrerpolicy="origin" title="Vote for this site" aria-label="Vote for this site"><span class="pfs-footer__icon pfs-footer__icon--vote" aria-hidden="true"></span></a>',
     '</nav>',
     '<p class="pfs-footer__copy">&copy; {{years}} <a href="{{owner_url}}">{{owner_name}}</a>{{#tagline}} &middot; {{tagline}}{{/tagline}}</p>',
     '</div>',

package/template.json

@@ -1,8 +1,8 @@
 {
-  "version": "0.2.0",
+  "version": "0.2.2",
   "renderer": 1,
-  "css": ".pfs-footer{--pfs-footer-muted:color-mix(in srgb,currentColor 62%,transparent);--pfs-footer-gap:.5rem 1.25rem;--pfs-footer-size:.875rem;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);font-size:var(--pfs-footer-size);line-height:1.5;color:inherit}.pfs-footer__inner{max-width:72rem;margin:0 auto;padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}.pfs-footer a{color:var(--pfs-footer-muted);text-decoration:none}.pfs-footer a:hover,.pfs-footer a:focus-visible{color:inherit;text-decoration:underline}.pfs-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pfs-footer-gap)}.pfs-footer__ring{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem}.pfs-footer__icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;-webkit-mask:var(--pfs-footer-glyph) center/contain no-repeat;mask:var(--pfs-footer-glyph) center/contain no-repeat}.pfs-footer__icon--random{--pfs-footer-glyph:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'18'%20height%3D'18'%20rx%3D'3'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'8'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'16'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'1'%2F%3E%3C%2Fsvg%3E\")}.pfs-footer__icon--vote{--pfs-footer-glyph:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%204%2021%2019H3z'%2F%3E%3C%2Fsvg%3E\")}.pfs-footer__copy{margin:0;color:var(--pfs-footer-muted)}.pfs-footer__copy a{color:inherit}",
+  "css": ".pfs-footer{--pfs-footer-muted:color-mix(in srgb,currentColor 62%,transparent);--pfs-footer-gap:.5rem 1.25rem;--pfs-footer-size:.875rem;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);font-size:var(--pfs-footer-size);line-height:1.5;color:inherit}.pfs-footer__inner{max-width:72rem;margin:0 auto;padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}.pfs-footer a{color:var(--pfs-footer-muted);text-decoration:none}.pfs-footer a:hover,.pfs-footer a:focus-visible{color:inherit;text-decoration:underline}.pfs-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pfs-footer-gap)}.pfs-footer__ring{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem}.pfs-footer__copy{margin:0;color:var(--pfs-footer-muted)}.pfs-footer__copy a{color:inherit}",
   "link": "<a href=\"{{href}}\"{{#rel}} rel=\"{{rel}}\"{{/rel}}>{{label}}</a>",
-  "footer": "<footer class=\"pfs-footer\" data-pfs-footer=\"{{version}}\">{{#css}}<style>{{{css}}}</style>{{/css}}<div class=\"pfs-footer__inner\">{{#links}}<nav class=\"pfs-footer__links\" aria-label=\"Footer\">{{{links}}}</nav>{{/links}}<nav class=\"webring pfs-footer__ring\" aria-label=\"{{ring_name}} webring\"><a href=\"{{previous}}\" rel=\"prev\" title=\"Previous site\">&lt;&lt;</a><a href=\"{{ring}}\">{{ring_name}}</a><a href=\"{{next}}\" rel=\"next\" title=\"Next site\">&gt;&gt;</a><a href=\"{{random}}\" title=\"Random site\" aria-label=\"Random site\"><span class=\"pfs-footer__icon pfs-footer__icon--random\" aria-hidden=\"true\"></span></a><a href=\"{{ring}}/vote\" referrerpolicy=\"origin\" title=\"Vote for this site\" aria-label=\"Vote for this site\"><span class=\"pfs-footer__icon pfs-footer__icon--vote\" aria-hidden=\"true\"></span></a></nav><p class=\"pfs-footer__copy\">&copy; {{years}} <a href=\"{{owner_url}}\">{{owner_name}}</a>{{#tagline}} &middot; {{tagline}}{{/tagline}}</p></div></footer>",
+  "footer": "<footer class=\"pfs-footer\" data-pfs-footer=\"{{version}}\">{{#css}}<style{{#nonce}} nonce=\"{{nonce}}\"{{/nonce}}>{{{css}}}</style>{{/css}}<div class=\"pfs-footer__inner\">{{#links}}<nav class=\"pfs-footer__links\" aria-label=\"Footer\">{{{links}}}</nav>{{/links}}<nav class=\"webring pfs-footer__ring\" aria-label=\"{{ring_name}} webring\"><a href=\"{{previous}}\" rel=\"prev\" title=\"Previous site\">&lt;&lt;</a><a href=\"{{ring}}\">{{ring_name}}</a><a href=\"{{next}}\" rel=\"next\" title=\"Next site\">&gt;&gt;</a></nav><p class=\"pfs-footer__copy\">&copy; {{years}} <a href=\"{{owner_url}}\">{{owner_name}}</a>{{#tagline}} &middot; {{tagline}}{{/tagline}}</p></div></footer>",
   "houseLinks": []
 }