create-shapio 0.2.0

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

@@ -0,0 +1,96 @@
+/**
+ * Content as the Shapio delivery API returns it for the starter's models (shapio/). Delivery
+ * entries are flat: system attributes next to the fields, keyed by API key. Media fields are asset views,
+ * rich text carries the JSON document plus a sanitised `html` rendering, populated relations are entries.
+ */
+export type MediaVariant = {
+  name: string;
+  width: number | null;
+  height: number | null;
+  format: string;
+  mimeType: string;
+  url: string;
+};
+
+export type Media = {
+  id: string;
+  filename: string;
+  mimeType: string;
+  width: number | null;
+  height: number | null;
+  alt: string;
+  caption: string;
+  url: string;
+  variants: MediaVariant[];
+};
+
+export type RichText = { format: 'shapio-richtext'; version: number; html: string };
+
+type EntryBase = {
+  id: string;
+  /** The locale that served the entry (differs from the requested one on fallback). */
+  locale: string;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt?: string;
+};
+
+export type Feature = { title: string; description: string | null };
+
+export type HeroSection = {
+  __component: 'hero';
+  heading: string;
+  subheading: string | null;
+  image: Media | null;
+  ctaLabel: string | null;
+  ctaUrl: string | null;
+};
+export type FeatureGridSection = { __component: 'featureGrid'; heading: string | null; features: Feature[] };
+export type GallerySection = { __component: 'gallery'; heading: string | null; images: Media[] };
+export type CallToActionSection = {
+  __component: 'callToAction';
+  heading: string;
+  text: string | null;
+  buttonLabel: string;
+  buttonUrl: string;
+};
+export type Section = HeroSection | FeatureGridSection | GallerySection | CallToActionSection;
+
+export type Page = EntryBase & {
+  title: string;
+  slug: string;
+  description: string | null;
+  sections: Section[];
+};
+
+export type Author = EntryBase & { name: string; bio: string | null; avatar: Media | null };
+
+export type Article = EntryBase & {
+  title: string;
+  slug: string;
+  excerpt: string | null;
+  body: RichText | null;
+  cover: Media | null;
+  /** Populated (`populate=author`) or just the ID; null when the author is not published. */
+  author: Author | string | null;
+  publishedOn: string;
+};
+
+/** The `siteSettings` singleton: one entry per site, read by its API ID. */
+export type SiteSettings = EntryBase & {
+  siteName: string;
+  tagline: string | null;
+  footer: string | null;
+  colophon: RichText | null;
+};
+
+export type DeliveryList<T> = {
+  data: T[];
+  meta: {
+    locale: string;
+    snapshot: number;
+    pagination: { page: number; pageSize: number; total: number; pageCount: number };
+  };
+};
+
+export type DeliveryItem<T> = { data: T; meta: { locale: string; snapshot: number } };

package/templates/sveltekit/src/routes/+layout.ts

@@ -0,0 +1,3 @@
+/** Every page is prerendered to static HTML at build time; URLs end with a slash, as in the other starters. */
+export const prerender = true;
+export const trailingSlash = 'always';

package/templates/sveltekit/src/routes/+page.ts

@@ -0,0 +1,7 @@
+import { redirect } from '@sveltejs/kit';
+import { DEFAULT_LOCALE } from '#lib/site.ts';
+
+/** The front page lives under its locale (`/en/`); prerendered as a redirect page. */
+export const load = () => {
+  redirect(307, `/${DEFAULT_LOCALE}/`);
+};

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

@@ -0,0 +1,16 @@
+import { error } from '@sveltejs/kit';
+import { 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. */
+export const load: LayoutServerLoad = async ({ params }) => {
+  if (!isLocale(params.locale)) {
+    error(404, 'Not found');
+  }
+  return {
+    locale: params.locale,
+    strings: stringsFor(params.locale),
+    settings: await getSiteSettings(params.locale),
+  };
+};

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import '#lib/site.css';
+  import { articlesPath, colophonPath, HOME_SLUG, otherLocale, pagePath, switchLocale } from '#lib/site.ts';
+  import type { LayoutProps } from './$types';
+
+  let { data, children }: LayoutProps = $props();
+  const other = $derived(otherLocale(data.locale));
+  // The name, tagline and footer come from the siteSettings singleton (built-in strings until it is published).
+  const siteName = $derived(data.settings?.siteName ?? data.strings.siteName);
+</script>
+
+<a class="skip" href="#content">{data.strings.skipToContent}</a>
+<header class="site-header">
+  <a class="brand" href={pagePath(data.locale, HOME_SLUG)}>{siteName}</a>
+  {#if data.settings?.tagline}
+    <p class="tagline">{data.settings.tagline}</p>
+  {/if}
+  <nav aria-label="Main">
+    <a href={articlesPath(data.locale)}>{data.strings.articles}</a>
+    <a href={colophonPath(data.locale)}>{data.strings.colophon}</a>
+    <a href={switchLocale(page.url.pathname, other)} hreflang={other} lang={other}>{data.strings.switchTo}</a>
+  </nav>
+</header>
+<main id="content">
+  {@render children()}
+</main>
+<footer class="site-footer">
+  <p>{siteName} · {data.settings?.footer ?? data.strings.footer} · SvelteKit</p>
+</footer>
+<!-- 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. -->

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

@@ -0,0 +1,28 @@
+import { error } from '@sveltejs/kit';
+import { listPages } from '#lib/server/shapio.ts';
+import { HOME_SLUG, isLocale, LOCALES } from '#lib/site.ts';
+import type { EntryGenerator, PageServerLoad } from './$types';
+
+/** Pages from the `page` collection; `home` is the locale's front page (`/en/`), the others `/en/<slug>/`. */
+export const entries: EntryGenerator = async () => {
+  const paths = [];
+  for (const locale of LOCALES) {
+    for (const page of await listPages(locale)) {
+      paths.push({ locale, slug: page.slug === HOME_SLUG ? '' : page.slug });
+    }
+  }
+  return paths;
+};
+
+export const load: PageServerLoad = async ({ params }) => {
+  // A rest parameter keeps the trailing slash (`about/`; trailingSlash is 'always').
+  const slug = params.slug.replace(/\/+$/, '');
+  const wanted = slug === '' ? HOME_SLUG : slug;
+  const page = isLocale(params.locale)
+    ? (await listPages(params.locale)).find((candidate) => candidate.slug === wanted)
+    : undefined;
+  if (!page) {
+    error(404, 'Not found');
+  }
+  return { page };
+};

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Sections from '#lib/components/Sections.svelte';
+  import type { PageProps } from './$types';
+
+  let { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+  <title>{data.page.title} · {data.settings?.siteName ?? data.strings.siteName}</title>
+  {#if data.page.description}
+    <meta name="description" content={data.page.description} />
+  {/if}
+</svelte:head>
+
+<Sections page={data.page} />

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

@@ -0,0 +1,9 @@
+import { listArticles } from '#lib/server/shapio.ts';
+import { DEFAULT_LOCALE, isLocale, LOCALES } from '#lib/site.ts';
+import type { EntryGenerator, PageServerLoad } from './$types';
+
+export const entries: EntryGenerator = () => LOCALES.map((locale) => ({ locale }));
+
+export const load: PageServerLoad = async ({ params }) => ({
+  articles: await listArticles(isLocale(params.locale) ? params.locale : DEFAULT_LOCALE),
+});

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ArticleCard from '#lib/components/ArticleCard.svelte';
+  import type { PageProps } from './$types';
+
+  let { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+  <title>{data.strings.articles} · {data.settings?.siteName ?? data.strings.siteName}</title>
+</svelte:head>
+
+<h1 class="page-title">{data.strings.articles}</h1>
+<ul class="cards">
+  {#each data.articles as article (article.id)}
+    <ArticleCard {article} locale={data.locale} strings={data.strings} />
+  {/each}
+</ul>

package/templates/sveltekit/src/routes/[locale]/articles/[slug]/+page.server.ts

@@ -0,0 +1,25 @@
+import { error } from '@sveltejs/kit';
+import { listArticles } from '#lib/server/shapio.ts';
+import { isLocale, LOCALES } from '#lib/site.ts';
+import type { EntryGenerator, PageServerLoad } from './$types';
+
+/** Published articles only: a draft has no page, so its URL is a 404. */
+export const entries: EntryGenerator = async () => {
+  const paths = [];
+  for (const locale of LOCALES) {
+    for (const article of await listArticles(locale)) {
+      paths.push({ locale, slug: article.slug });
+    }
+  }
+  return paths;
+};
+
+export const load: PageServerLoad = async ({ params }) => {
+  const article = isLocale(params.locale)
+    ? (await listArticles(params.locale)).find((candidate) => candidate.slug === params.slug)
+    : undefined;
+  if (!article) {
+    error(404, 'Not found');
+  }
+  return { article };
+};

package/templates/sveltekit/src/routes/[locale]/articles/[slug]/+page.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import ArticleView from '#lib/components/ArticleView.svelte';
+  import type { PageProps } from './$types';
+
+  let { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+  <title>{data.article.title} · {data.settings?.siteName ?? data.strings.siteName}</title>
+  {#if data.article.excerpt}
+    <meta name="description" content={data.article.excerpt} />
+  {/if}
+</svelte:head>
+
+<ArticleView article={data.article} locale={data.locale} strings={data.strings} />

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import RichText from '#lib/components/RichText.svelte';
+  import type { PageProps } from './$types';
+
+  /** The singleton page: the siteSettings entry's colophon, one per locale (loaded by the locale layout). */
+  let { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+  <title>{data.strings.colophon} · {data.settings?.siteName ?? data.strings.siteName}</title>
+</svelte:head>
+
+<h1 class="page-title">{data.strings.colophon}</h1>
+{#if data.settings?.tagline}
+  <p class="lead">{data.settings.tagline}</p>
+{/if}
+<RichText value={data.settings?.colophon ?? null} />

package/templates/sveltekit/src/routes/[locale]/colophon/+page.ts

@@ -0,0 +1,5 @@
+import { LOCALES } from '#lib/site.ts';
+import type { EntryGenerator } from './$types';
+
+/** The siteSettings singleton is loaded by the locale layout; this page only needs its locales listed. */
+export const entries: EntryGenerator = () => LOCALES.map((locale) => ({ locale }));

package/templates/sveltekit/src/routes/preview/+page.server.ts

@@ -0,0 +1,5 @@
+import { publicShapioUrl } from '#lib/server/config.ts';
+import type { PageServerLoad } from './$types';
+
+/** The preview page is prerendered like the rest; the draft itself is read in the browser (see +page.svelte). */
+export const load: PageServerLoad = () => ({ shapioUrl: publicShapioUrl() });

package/templates/sveltekit/src/routes/preview/+page.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { initVisualEditing } from '@shapio/visual';
+  import { onMount } from 'svelte';
+  import { replaceState } from '$app/navigation';
+  import ArticleView from '#lib/components/ArticleView.svelte';
+  import Sections from '#lib/components/Sections.svelte';
+  import '#lib/site.css';
+  import { loadDraft, parsePreviewUrl, type PreviewDraft } from '#lib/preview.ts';
+  import { DEFAULT_LOCALE, stringsFor, type Locale } from '#lib/site.ts';
+  import type { PageProps } from './$types';
+
+  /**
+   * `/preview/?model=…&id=…&locale=…#token=…`: the draft Shapio's preview URL points at, read in the browser
+   * with the preview token (src/lib/preview.ts) and rendered with the published pages' components. Inside
+   * Shapio's preview pane, @shapio/visual turns on visual editing and re-loads the draft after each save.
+   */
+  let { data }: PageProps = $props();
+  let locale: Locale = $state(DEFAULT_LOCALE);
+  let status: 'loading' | 'incomplete' | 'failed' | 'ready' = $state('loading');
+  let message = $state('');
+  let draft: PreviewDraft | undefined = $state();
+  const strings = $derived(stringsFor(locale));
+
+  onMount(() => {
+    const request = parsePreviewUrl(new URL(window.location.href));
+    // The token must not linger in the address bar, history or a shared screenshot.
+    replaceState(`${window.location.pathname}${window.location.search}`, {});
+    if (!request) {
+      status = 'incomplete';
+      return undefined;
+    }
+    locale = request.locale;
+    document.documentElement.lang = request.locale;
+    const load = async () => {
+      try {
+        draft = await loadDraft(data.shapioUrl, request);
+        status = 'ready';
+      } catch (error) {
+        message = error instanceof Error ? error.message : String(error);
+        status = 'failed';
+      }
+    };
+    void load();
+    return initVisualEditing({ origin: data.shapioUrl, onRefresh: load });
+  });
+</script>
+
+<svelte:head>
+  <title>Preview</title>
+  <meta name="robots" content="noindex" />
+  <meta name="referrer" content="no-referrer" />
+</svelte:head>
+
+<div class="preview-banner" role="status">{strings.previewBanner}</div>
+<main id="content" lang={locale}>
+  {#if status === 'loading'}
+    <p>{strings.previewLoading}</p>
+  {:else if status === 'incomplete'}
+    <p>{strings.previewIncomplete}</p>
+  {:else if status === 'failed'}
+    <p>{strings.previewFailed}: {message}</p>
+  {:else if draft?.modelKey === 'pages'}
+    <Sections page={draft.entry} />
+  {:else if draft?.modelKey === 'articles'}
+    <ArticleView article={draft.entry} locale={draft.locale} {strings} />
+  {/if}
+</main>

package/templates/sveltekit/static/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Shapio">
+  <title>Shapio</title>
+  <rect width="64" height="64" rx="14" fill="#2563EB"/>
+  <g transform="translate(32 32) scale(0.72) translate(-32 -32)">
+    <path fill="#FAF9F6" d="M43.39 8.16L51.31 12.73A8.25 8.25 0 0 1 55.43 19.88L55.43 21.08A4.72 4.72 0 0 1 48.36 25.17L33.51 16.59ZM20.61 55.84L12.69 51.27A8.25 8.25 0 0 1 8.57 44.12L8.57 42.92A4.72 4.72 0 0 1 15.64 38.83L30.49 47.41Z"/>
+    <path fill="#FAF9F6" d="M30.23 5.67A8.84 8.84 0 0 1 39.07 5.67L47.52 10.54L26.62 22.61A3.24 3.24 0 0 0 25 25.42L25 26.92A2.65 2.65 0 0 0 26.33 29.21L29.37 30.97A1.47 1.47 0 0 1 29.37 33.52L24.24 36.48A3.24 3.24 0 0 1 21 36.48L15.27 33.17A10.61 10.61 0 0 1 9.97 23.98L9.97 23.49A10.61 10.61 0 0 1 15.27 14.3ZM33.77 58.33A8.84 8.84 0 0 1 24.93 58.33L16.48 53.46L37.38 41.39A3.24 3.24 0 0 0 39 38.58L39 37.08A2.65 2.65 0 0 0 37.67 34.79L34.63 33.03A1.47 1.47 0 0 1 34.63 30.48L39.76 27.52A3.24 3.24 0 0 1 43 27.52L48.73 30.83A10.61 10.61 0 0 1 54.03 40.02L54.03 40.51A10.61 10.61 0 0 1 48.73 49.7Z"/>
+    <path fill="none" stroke="#2563EB" stroke-width="1.1" d="M35.28 17.61L47.52 10.54M28.72 46.39L16.48 53.46"/>
+  </g>
+</svg>

package/templates/sveltekit/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "$app/tsconfig",
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "verbatimModuleSyntax": true,
+    "types": ["$app/types", "node"]
+  },
+  "include": ["src", "*"]
+}

package/templates/sveltekit/vite.config.ts

@@ -0,0 +1,63 @@
+import adapter from '@sveltejs/adapter-static';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig, loadEnv, type Connect, type Plugin } from 'vite';
+
+const originOf = (url: string) => {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Only this site and Shapio may frame its pages (Shapio's preview pane shows /preview/ beside the document):
+ * sent by `vite dev` and `vite preview`, and written to build/_headers for hosts that read it (Cloudflare
+ * Pages, Netlify); set the same header on any other host. The origin is PUBLIC_SHAPIO_URL, else SHAPIO_URL.
+ */
+const frameAncestors = (env: Record<string, string>) => {
+  const shapio = originOf(env.PUBLIC_SHAPIO_URL || env.SHAPIO_URL || 'http://localhost:4300');
+  return `frame-ancestors 'self'${shapio ? ` ${shapio}` : ''}`;
+};
+
+/**
+ * Sets the policy on every response of `vite dev` and `vite preview` (registered before SvelteKit's own
+ * middleware, which answers prerendered pages itself), and emits `_headers` into the client output, which
+ * adapter-static copies into build/.
+ */
+const frameAncestorsPlugin = (policy: string): Plugin => {
+  const setHeader = (server: { middlewares: Connect.Server }) => {
+    server.middlewares.use((_request, response, next) => {
+      response.setHeader('Content-Security-Policy', policy);
+      next();
+    });
+  };
+  return {
+    name: 'shapio-frame-ancestors',
+    configureServer: setHeader,
+    configurePreviewServer: setHeader,
+    generateBundle() {
+      if (this.environment.name === 'client') {
+        this.emitFile({
+          type: 'asset',
+          fileName: '_headers',
+          source: `/*\n  Content-Security-Policy: ${policy}\n`,
+        });
+      }
+    },
+  };
+};
+
+/**
+ * Static output: `npm run build` prerenders every page to plain HTML in build/ (any static host: Cloudflare
+ * Pages, Netlify, a bucket). 404.html is served for unknown paths by hosts that support it.
+ */
+export default defineConfig(({ mode }) => {
+  const policy = frameAncestors({ ...loadEnv(mode, process.cwd(), ''), ...process.env } as Record<
+    string,
+    string
+  >);
+  return {
+    plugins: [frameAncestorsPlugin(policy), sveltekit({ adapter: adapter({ fallback: '404.html' }) })],
+  };
+});