create-shapio 0.5.0 → 0.5.2

package/templates/sveltekit/src/lib/server/snapshotResolver.ts

@@ -0,0 +1,52 @@
+/**
+ * Which publication snapshot the site reads, and for how long a read is reused. A build pins one snapshot
+ * for all its pages (SHAPIO_SNAPSHOT, else the current one when the build starts). The dev server reads the
+ * current snapshot again once the last read is older than DEV_WINDOW_MS, so a publish shows on reload while
+ * the reads of one page render still share a snapshot.
+ */
+export const DEV_WINDOW_MS = 1000;
+
+/** How long a cached read is reused: for the whole process in a build, DEV_WINDOW_MS in dev. */
+export const cacheWindow = (dev: boolean): number => (dev ? DEV_WINDOW_MS : Number.POSITIVE_INFINITY);
+
+/** `read`, reused for `windowMs` after it starts. A read that fails is not kept: the next call tries again. */
+export const cachedRead = <T>(
+  read: () => Promise<T>,
+  windowMs: number,
+  now: () => number = Date.now,
+): (() => Promise<T>) => {
+  let cached: { value: Promise<T>; at: number } | undefined;
+  return () => {
+    const at = now();
+    if (cached && at - cached.at < windowMs) {
+      return cached.value;
+    }
+    const entry = { value: read(), at };
+    cached = entry;
+    entry.value.catch(() => {
+      if (cached === entry) {
+        cached = undefined;
+      }
+    });
+    return entry.value;
+  };
+};
+
+type SnapshotResolverOptions = {
+  /** True under the dev server. */
+  dev: boolean;
+  /** SHAPIO_SNAPSHOT: when set, the site shows exactly this snapshot, in dev too. */
+  configured: number | undefined;
+  /** Reads Shapio's current publication snapshot. */
+  current: () => Promise<number>;
+  now?: () => number;
+};
+
+/** The snapshot every delivery read sends. */
+export const createSnapshotResolver = ({
+  dev,
+  configured,
+  current,
+  now,
+}: SnapshotResolverOptions): (() => Promise<number>) =>
+  configured === undefined ? cachedRead(current, cacheWindow(dev), now) : () => Promise.resolve(configured);

package/templates/sveltekit/src/lib/site.css

@@ -197,3 +197,17 @@ main {
   text-align: center;
   font-weight: 600;
 }
+/* Drafts mode (SHAPIO_DRAFTS=true): a corner badge, so a drafts build is never mistaken for the real site. */
+.drafts-badge {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 10;
+  margin: 0;
+  background: #78350f;
+  color: #fef3c7;
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 700;
+}

package/templates/sveltekit/src/lib/site.ts

@@ -19,6 +19,8 @@ const STRINGS = {
     by: 'By',
     switchTo: 'Français',
     skipToContent: 'Skip to content',
+    drafts: 'Drafts',
+    draftsNote: 'Drafts mode: this server shows saved drafts, not the published site.',
     footer: 'Built with Shapio',
     previewBanner: 'Preview: this is a draft, not the published page.',
     previewLoading: 'Loading the draft…',
@@ -32,6 +34,8 @@ const STRINGS = {
     by: 'Par',
     switchTo: 'English',
     skipToContent: 'Aller au contenu',
+    drafts: 'Brouillons',
+    draftsNote: 'Mode brouillons : ce serveur montre les brouillons enregistrés, pas le site publié.',
     footer: 'Construit avec Shapio',
     previewBanner: 'Aperçu : ceci est un brouillon, pas la page publiée.',
     previewLoading: 'Chargement du brouillon…',

package/templates/sveltekit/src/routes/[locale]/+layout.server.ts

@@ -1,12 +1,12 @@
 import { error } from '@sveltejs/kit';
-import { siteUrl } from '#lib/server/config.ts';
+import { isDraftsMode, siteUrl } from '#lib/server/config.ts';
 import { getSite, getSiteSettings } from '#lib/server/shapio.ts';
 import { isLocale, stringsFor } from '#lib/site.ts';
 import type { LayoutServerLoad } from './$types';
 
 /**
  * The locale's site settings (the siteSettings singleton) and UI strings, for the header and footer; the site's
- * SEO defaults and public URL, for every page's <head>.
+ * SEO defaults and public URL, for every page's <head>; whether drafts mode is on, for its badge.
  */
 export const load: LayoutServerLoad = async ({ params }) => {
   if (!isLocale(params.locale)) {
@@ -18,5 +18,6 @@ export const load: LayoutServerLoad = async ({ params }) => {
     settings: await getSiteSettings(params.locale),
     site: await getSite(),
     siteUrl: siteUrl() ?? null,
+    drafts: isDraftsMode(),
   };
 };

package/templates/sveltekit/src/routes/[locale]/+layout.svelte

@@ -28,5 +28,8 @@
 <footer class="site-footer">
   <p>{siteName} · {data.settings?.footer ?? data.strings.footer} · SvelteKit</p>
 </footer>
+{#if data.drafts}
+  <p class="drafts-badge" title={data.strings.draftsNote} data-shapio-drafts="">{data.strings.drafts}</p>
+{/if}
 <!-- Visual editing (@shapio/visual) plugs in here: its script and the data-shapio attributes on content arrive
      with Shapio's visual-editing SDK, together with draft preview. -->