SvelteKit

{
  "runtime": { "framework": "sveltekit" }
}

import { sveltekit } from '@sveltejs/kit/vite';
import { fimo } from 'fimo-sveltekit/vite';
import { defineConfig } from 'vite';

export default defineConfig({ plugins: [fimo(), sveltekit()] });

// svelte.config.js
import { fimo } from 'fimo-sveltekit/config';

export default {
  kit: { adapter: fimo() },
};

import { createFimo } from 'fimo-sveltekit';
import { content } from '../../../schemas';

export async function load(event) {
  const fimo = createFimo({ content, event });
  const result = await fimo.articles.list({ limit: 12 });
  return { articles: fimo.articles.serialize(result.items) };
}

import { getLabels } from 'fimo-sveltekit';

export async function load(event) {
  // If the app resolves a locale from its URL or session, pass it:
  // const locale = resolveLocale(event.url); // your app's resolver
  // return { labels: await getLabels({ event, locale }) };

  // Otherwise, omit it and use the Fimo project default.
  return { labels: await getLabels({ event }) };
}

<script lang="ts">
  import { FimoProvider } from 'fimo-sveltekit/components';
  import type { LayoutData } from './$types';
  import type { Snippet } from 'svelte';

  let { data, children }: { data: LayoutData; children: Snippet } = $props();
</script>

<FimoProvider labels={data.labels}>
  {@render children()}
</FimoProvider>

<script lang="ts">
  import { Image, RichText, Text } from 'fimo-sveltekit/components';
</script>

<Text value={article.title} as="h1" />
<RichText value={article.body} />
<Image value={article.cover} />

// src/routes/+layout.server.ts, or a content page's +page.server.ts
import { resolveSeoForPath, toSeoHead } from 'fimo/seo';
import config from '../../.fimo/config.json';

export function load({ url }) {
  const seo = resolveSeoForPath(url.pathname, config);
  return {
    seoHead: toSeoHead(seo, {
      canonicalUrl: seo?.url ? new URL(url.pathname, seo.url).href : undefined,
    }),
  };
}

<!-- Inside the existing root layout, alongside its provider and children -->
<script lang="ts">
  import { page } from '$app/state';
  const head = $derived(page.data.seoHead ?? { meta: [], links: [] });
</script>

<svelte:head>
  <title>{head.title ?? 'My site'}</title>
  {#each head.meta as attributes}<meta {...attributes} />{/each}
  {#each head.links as attributes}<link {...attributes} />{/each}
</svelte:head>