@profullstack/footer 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@profullstack/footer",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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/index.js

@@ -54,6 +54,11 @@ export async function latestTemplate(opts = {}) {
   const env = typeof process !== 'undefined' ? process.env ?? {} : {};
   if (env.PROFULLSTACK_FOOTER_OFFLINE === '1') return bundled;
   const now = (opts.now ?? Date.now)();
+  // Under Next.js, always go through fetch: Next caches it (revalidate 300 s)
+  // AND marks the route as revalidating. Answering from memory instead left
+  // every page rendered after the first at build time fully static
+  // (s-maxage=31536000), so it never saw a template release.
+  if (!opts.fetch && underNext()) return fetchFresh(opts, env, now);
   if (cache.template && now < cache.until) return cache.template;
   // Stale while revalidating: hand back what we have, refresh once.
   if (cache.template && cache.pending) return cache.template;
@@ -87,6 +92,38 @@ export async function latestTemplate(opts = {}) {
   return cache.template ?? cache.pending;
 }
 
+/** Next.js patches fetch (and marks it) and sets NEXT_RUNTIME in its servers. */
+function underNext() {
+  // @ts-ignore Next's marker on its patched fetch
+  if (globalThis.fetch && globalThis.fetch.__nextPatched) return true;
+  // Written out literally so Next's compile-time define can replace it.
+  return typeof process !== 'undefined' && !!process.env.NEXT_RUNTIME;
+}
+
+/** One uncached-by-us fetch, for runtimes (Next) that cache fetch themselves. */
+async function fetchFresh(opts, env, now) {
+  try {
+    const ctrl = typeof AbortController === 'function' ? new AbortController() : null;
+    const timer = ctrl ? setTimeout(() => ctrl.abort(), opts.timeoutMs ?? 1500) : null;
+    const res = await globalThis
+      .fetch(opts.url ?? env.PROFULLSTACK_FOOTER_TEMPLATE_URL ?? TEMPLATE_URL, {
+        signal: ctrl?.signal,
+        headers: { accept: 'application/json' },
+        // @ts-ignore Next's fetch extension
+        next: { revalidate: NEXT_REVALIDATE_S },
+      })
+      .finally(() => timer && clearTimeout(timer));
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const t = await res.json();
+    if (!usable(t)) throw new Error('template not usable by this renderer');
+    cache.template = t;
+    cache.until = now + (opts.ttlMs ?? DEFAULT_TTL_MS);
+    return t;
+  } catch {
+    return cache.template ?? bundled;
+  }
+}
+
 /** Forget the cached template (tests, or a manual refresh hook). */
 export function resetTemplateCache() {
   cache.template = null;

package/src/template.js

@@ -9,7 +9,7 @@
 // render.js does not fill; older installs then keep their bundled template.
 
 export default {
-  version: '0.2.3',
+  version: '0.2.5',
   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;',
@@ -19,6 +19,8 @@ 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 a.pfs-footer__badge{display:inline-block;line-height:0}',
+    '.pfs-footer__badge img{display:block;width:200px;height:44px;max-width:100%}',
     '.pfs-footer__copy{margin:0;color:var(--pfs-footer-muted)}',
     '.pfs-footer__copy a{color:inherit}',
   ].join(''),
@@ -33,6 +35,7 @@ export default {
     '<a href="{{ring}}">{{ring_name}}</a>',
     '<a href="{{next}}" rel="next" title="Next site">&gt;&gt;</a>',
     '</nav>',
+    '<a class="pfs-footer__badge" href="https://built.indie.pit.world/for?site={{site}}"><img src="https://built.indie.pit.world/for.svg?site={{site}}" alt="Listed on built.indie" width="200" height="44" loading="lazy"></a>',
     '<p class="pfs-footer__copy">&copy; {{years}} <a href="{{owner_url}}">{{owner_name}}</a>{{#tagline}} &middot; {{tagline}}{{/tagline}}</p>',
     '</div>',
     '</footer>',

package/template.json

@@ -1,8 +1,8 @@
 {
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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__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 a.pfs-footer__badge{display:inline-block;line-height:0}.pfs-footer__badge img{display:block;width:200px;height:44px;max-width:100%}.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{{#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>",
+  "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><a class=\"pfs-footer__badge\" href=\"https://built.indie.pit.world/for?site={{site}}\"><img src=\"https://built.indie.pit.world/for.svg?site={{site}}\" alt=\"Listed on built.indie\" width=\"200\" height=\"44\" loading=\"lazy\"></a><p class=\"pfs-footer__copy\">&copy; {{years}} <a href=\"{{owner_url}}\">{{owner_name}}</a>{{#tagline}} &middot; {{tagline}}{{/tagline}}</p></div></footer>",
   "houseLinks": []
 }