fix(embed): skip site chrome on /widget routes via root layout
(embed)/+layout@.svelte only resets intermediate layouts — root
+layout.svelte still wrapped every widget page with Header, Footer,
TopBanner, Breadcrumbs, Skip-Link, OG/JSON-LD/Analytics.
Root layout now derives isEmbed from $page.route.id (matches /(embed))
and renders just {@render children()} in that branch. svelte:head is
gated too: embed mode emits only the favicon, leaving the page free to
set its own <title> and noindex meta.
+layout.server.ts short-circuits the bootstrap batch (navigation,
footer, page_config, logo) for embed routes — saves one CMS roundtrip
+ logo transform per widget request, and avoids double-counting in
Umami/pm86 analytics when the widget is iframed elsewhere.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
@@ -48,9 +48,33 @@ function getSlugFromEntry(entry: NavLinkEntry): string {
|
|||||||
return e.slug ?? e._slug ?? '';
|
return e.slug ?? e._slug ?? '';
|
||||||
}
|
}
|
||||||
|
|
||||||
export const load: LayoutServerLoad = async ({ locals }) => {
|
export const load: LayoutServerLoad = async ({ locals, route }) => {
|
||||||
const translations = locals.translations ?? {};
|
const translations = locals.translations ?? {};
|
||||||
|
|
||||||
|
// Embed-Routen ((embed)/...) brauchen kein Site-Chrome. Bootstrap-Batch
|
||||||
|
// wird übersprungen — spart 1 CMS-Roundtrip + Logo-Transform pro Request.
|
||||||
|
// Layout-Komponente rendert über `isEmbed` ohne Header/Footer/Banner.
|
||||||
|
if ((route.id ?? '').startsWith('/(embed)')) {
|
||||||
|
const siteName =
|
||||||
|
(import.meta.env.PUBLIC_SITE_NAME as string | undefined) || SITE_NAME;
|
||||||
|
const siteBaseUrl = (env.PUBLIC_SITE_URL || '').replace(/\/$/, '');
|
||||||
|
return {
|
||||||
|
headerLinks: [] as NavLink[],
|
||||||
|
socialLinks: [] as SocialLink[],
|
||||||
|
footerData: null as FooterEntry | null,
|
||||||
|
logoUrl: null as string | null,
|
||||||
|
logoSvgHtml: null as string | null,
|
||||||
|
logoSocialImage: null as string | null,
|
||||||
|
siteName,
|
||||||
|
siteBaseUrl,
|
||||||
|
translations,
|
||||||
|
pageConfig: null as PageConfigEntry | null,
|
||||||
|
seoTitleTemplate: null,
|
||||||
|
seoDescriptionTemplate: null,
|
||||||
|
analyticsPm86SiteId: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
// Layout-Bootstrap: Navigation (header + social), Footer, page_config in
|
// Layout-Bootstrap: Navigation (header + social), Footer, page_config in
|
||||||
// einem einzigen HTTP-Roundtrip (POST /api/content/_batch). Reduziert von
|
// einem einzigen HTTP-Roundtrip (POST /api/content/_batch). Reduziert von
|
||||||
// 4 sequentiellen Calls auf 1. Page-/Post-Stubs gehen separat (sparse
|
// 4 sequentiellen Calls auf 1. Page-/Post-Stubs gehen separat (sparse
|
||||||
|
|||||||
+168
-150
@@ -16,6 +16,14 @@
|
|||||||
|
|
||||||
let { data, children }: { data: LayoutData; children: import('svelte').Snippet } = $props();
|
let { data, children }: { data: LayoutData; children: import('svelte').Snippet } = $props();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Embed-Routen (z.B. /widget/...) liegen in der `(embed)`-Route-Group und
|
||||||
|
* sollen ohne Site-Chrome (Header, Footer, TopBanner, Breadcrumbs, Skip-Link,
|
||||||
|
* Preview-Banner) gerendert werden — auch SEO-Tags ausser noindex sind irrelevant,
|
||||||
|
* weil das Widget per `<iframe>` eingebettet wird.
|
||||||
|
*/
|
||||||
|
const isEmbed = $derived(($page.route.id ?? '').startsWith('/(embed)'));
|
||||||
|
|
||||||
// Live-preview reload bridge: when the page was loaded with
|
// Live-preview reload bridge: when the page was loaded with
|
||||||
// `?preview_draft=...`, accept `rustycms:reload` postMessage events from the
|
// `?preview_draft=...`, accept `rustycms:reload` postMessage events from the
|
||||||
// admin iframe parent and re-run the SvelteKit `load()` so the iframe
|
// admin iframe parent and re-run the SvelteKit `load()` so the iframe
|
||||||
@@ -175,162 +183,172 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<meta name="theme-color" content="#ffffff" />
|
{#if isEmbed}
|
||||||
<meta name="robots" content={robotsContent} />
|
<!-- Embed-Modus: minimaler Head, kein OG/JSON-LD/Analytics. Page setzt
|
||||||
{#if bannerPreload}
|
eigenen <title> und robots-meta. -->
|
||||||
<link
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
rel="preload"
|
{:else}
|
||||||
as="image"
|
<meta name="theme-color" content="#ffffff" />
|
||||||
href={bannerPreload.href}
|
<meta name="robots" content={robotsContent} />
|
||||||
imagesrcset={bannerPreload.srcset}
|
{#if bannerPreload}
|
||||||
imagesizes="100vw"
|
<link
|
||||||
type={bannerPreload.type}
|
rel="preload"
|
||||||
fetchpriority="high"
|
as="image"
|
||||||
/>
|
href={bannerPreload.href}
|
||||||
{/if}
|
imagesrcset={bannerPreload.srcset}
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
imagesizes="100vw"
|
||||||
<link rel="alternate" type="application/rss+xml" title="Beiträge" href="/posts/rss.xml" />
|
type={bannerPreload.type}
|
||||||
<link rel="sitemap" href="/sitemap.xml" />
|
fetchpriority="high"
|
||||||
<link rel="icon" href="/favicons/favicon.ico" sizes="any" />
|
/>
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
|
{/if}
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png" />
|
<link rel="alternate" type="application/rss+xml" title="Beiträge" href="/posts/rss.xml" />
|
||||||
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-icon-192x192.png" />
|
<link rel="sitemap" href="/sitemap.xml" />
|
||||||
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-icon-57x57.png" />
|
<link rel="icon" href="/favicons/favicon.ico" sizes="any" />
|
||||||
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-icon-60x60.png" />
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
|
||||||
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-icon-72x72.png" />
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
|
||||||
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-icon-76x76.png" />
|
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png" />
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-icon-114x114.png" />
|
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-icon-192x192.png" />
|
||||||
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-icon-120x120.png" />
|
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-icon-57x57.png" />
|
||||||
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-icon-144x144.png" />
|
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-icon-60x60.png" />
|
||||||
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-icon-152x152.png" />
|
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-icon-72x72.png" />
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-icon-180x180.png" />
|
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-icon-76x76.png" />
|
||||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2d7a45" />
|
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-icon-114x114.png" />
|
||||||
<meta name="msapplication-TileColor" content="#ffffff" />
|
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-icon-120x120.png" />
|
||||||
<meta name="msapplication-TileImage" content="/favicons/ms-icon-144x144.png" />
|
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-icon-144x144.png" />
|
||||||
<title>{seoTitle}</title>
|
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-icon-152x152.png" />
|
||||||
{#if seoDescription}
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-icon-180x180.png" />
|
||||||
<meta name="description" content={seoDescription} />
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2d7a45" />
|
||||||
{/if}
|
<meta name="msapplication-TileColor" content="#ffffff" />
|
||||||
{#if pageData?.keywords}
|
<meta name="msapplication-TileImage" content="/favicons/ms-icon-144x144.png" />
|
||||||
<meta name="keywords" content={pageData.keywords} />
|
<title>{seoTitle}</title>
|
||||||
{/if}
|
{#if seoDescription}
|
||||||
<link rel="canonical" href={canonical} />
|
<meta name="description" content={seoDescription} />
|
||||||
<!-- Open Graph -->
|
{/if}
|
||||||
<meta property="og:type" content="website" />
|
{#if pageData?.keywords}
|
||||||
<meta property="og:url" content={canonical} />
|
<meta name="keywords" content={pageData.keywords} />
|
||||||
<meta property="og:title" content={seoTitle} />
|
{/if}
|
||||||
{#if seoDescription}
|
<link rel="canonical" href={canonical} />
|
||||||
<meta property="og:description" content={seoDescription} />
|
<!-- Open Graph -->
|
||||||
{/if}
|
<meta property="og:type" content="website" />
|
||||||
{#if socialImageUrl}
|
<meta property="og:url" content={canonical} />
|
||||||
<meta property="og:image" content={socialImageUrl} />
|
<meta property="og:title" content={seoTitle} />
|
||||||
<meta property="og:image:width" content={String(SOCIAL_IMAGE_DIMENSIONS.width)} />
|
{#if seoDescription}
|
||||||
<meta property="og:image:height" content={String(SOCIAL_IMAGE_DIMENSIONS.height)} />
|
<meta property="og:description" content={seoDescription} />
|
||||||
{/if}
|
{/if}
|
||||||
<meta property="og:locale" content="de_DE" />
|
{#if socialImageUrl}
|
||||||
<meta property="og:site_name" content={data.siteName} />
|
<meta property="og:image" content={socialImageUrl} />
|
||||||
<!-- Twitter -->
|
<meta property="og:image:width" content={String(SOCIAL_IMAGE_DIMENSIONS.width)} />
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta property="og:image:height" content={String(SOCIAL_IMAGE_DIMENSIONS.height)} />
|
||||||
<meta name="twitter:url" content={canonical} />
|
{/if}
|
||||||
<meta name="twitter:title" content={seoTitle} />
|
<meta property="og:locale" content="de_DE" />
|
||||||
{#if seoDescription}
|
<meta property="og:site_name" content={data.siteName} />
|
||||||
<meta name="twitter:description" content={seoDescription} />
|
<!-- Twitter -->
|
||||||
{/if}
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
{#if socialImageUrl}
|
<meta name="twitter:url" content={canonical} />
|
||||||
<meta name="twitter:image" content={socialImageUrl} />
|
<meta name="twitter:title" content={seoTitle} />
|
||||||
{/if}
|
{#if seoDescription}
|
||||||
<!-- JSON-LD WebSite + Organization -->
|
<meta name="twitter:description" content={seoDescription} />
|
||||||
{@html jsonLdScript}
|
{/if}
|
||||||
{@html organizationLdScript}
|
{#if socialImageUrl}
|
||||||
{#if breadcrumbJsonLdScript}
|
<meta name="twitter:image" content={socialImageUrl} />
|
||||||
{@html breadcrumbJsonLdScript}
|
{/if}
|
||||||
{/if}
|
<!-- JSON-LD WebSite + Organization -->
|
||||||
{#if pageJsonLdScripts}
|
{@html jsonLdScript}
|
||||||
{@html pageJsonLdScripts}
|
{@html organizationLdScript}
|
||||||
{/if}
|
{#if breadcrumbJsonLdScript}
|
||||||
{#if import.meta.env.PUBLIC_UMAMI_SCRIPT_URL && import.meta.env.PUBLIC_UMAMI_WEBSITE_ID}
|
{@html breadcrumbJsonLdScript}
|
||||||
<script
|
{/if}
|
||||||
defer
|
{#if pageJsonLdScripts}
|
||||||
src={import.meta.env.PUBLIC_UMAMI_SCRIPT_URL}
|
{@html pageJsonLdScripts}
|
||||||
data-website-id={import.meta.env.PUBLIC_UMAMI_WEBSITE_ID}
|
{/if}
|
||||||
></script>
|
{#if import.meta.env.PUBLIC_UMAMI_SCRIPT_URL && import.meta.env.PUBLIC_UMAMI_WEBSITE_ID}
|
||||||
{/if}
|
<script
|
||||||
{#if data.analyticsPm86SiteId}
|
defer
|
||||||
<script
|
src={import.meta.env.PUBLIC_UMAMI_SCRIPT_URL}
|
||||||
defer
|
data-website-id={import.meta.env.PUBLIC_UMAMI_WEBSITE_ID}
|
||||||
src="https://analytics.pm86.de/api/script.js"
|
></script>
|
||||||
data-site-id={data.analyticsPm86SiteId}
|
{/if}
|
||||||
></script>
|
{#if data.analyticsPm86SiteId}
|
||||||
{/if}
|
<script
|
||||||
{#if formbricksScript}
|
defer
|
||||||
{@html formbricksScript}
|
src="https://analytics.pm86.de/api/script.js"
|
||||||
|
data-site-id={data.analyticsPm86SiteId}
|
||||||
|
></script>
|
||||||
|
{/if}
|
||||||
|
{#if formbricksScript}
|
||||||
|
{@html formbricksScript}
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<TranslationProvider translations={data.translations}>
|
<TranslationProvider translations={data.translations}>
|
||||||
<a
|
{#if isEmbed}
|
||||||
href="#main-content"
|
{@render children()}
|
||||||
class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:bg-white focus:px-3 focus:py-2 focus:shadow focus:outline focus:outline-2 focus:outline-wald-600 focus:rounded-xs"
|
{:else}
|
||||||
>Zum Inhalt springen</a>
|
<a
|
||||||
<div class="flex min-h-screen flex-col text-stein-900">
|
href="#main-content"
|
||||||
{#if pageData?.preview || pageData?.previewDraft}
|
class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:bg-white focus:px-3 focus:py-2 focus:shadow focus:outline focus:outline-2 focus:outline-wald-600 focus:rounded-xs"
|
||||||
<div
|
>Zum Inhalt springen</a>
|
||||||
class="sticky top-0 z-[90] w-full bg-erde-500 text-black shadow-sm"
|
<div class="flex min-h-screen flex-col text-stein-900">
|
||||||
role="status"
|
{#if pageData?.preview || pageData?.previewDraft}
|
||||||
aria-live="polite"
|
<div
|
||||||
>
|
class="sticky top-0 z-[90] w-full bg-erde-500 text-black shadow-sm"
|
||||||
<div class="container-custom flex items-center justify-between gap-3 py-1.5 text-sm">
|
role="status"
|
||||||
<span class="font-semibold">
|
aria-live="polite"
|
||||||
{pageData?.previewDraft ? 'Live-Preview · ungespeicherter Draft' : 'Preview-Modus · Draft sichtbar (nicht indexiert)'}
|
>
|
||||||
</span>
|
<div class="container-custom flex items-center justify-between gap-3 py-1.5 text-sm">
|
||||||
<a
|
<span class="font-semibold">
|
||||||
href={$page.url.pathname}
|
{pageData?.previewDraft ? 'Live-Preview · ungespeicherter Draft' : 'Preview-Modus · Draft sichtbar (nicht indexiert)'}
|
||||||
class="underline hover:no-underline"
|
</span>
|
||||||
rel="nofollow"
|
<a
|
||||||
>
|
href={$page.url.pathname}
|
||||||
Preview verlassen
|
class="underline hover:no-underline"
|
||||||
</a>
|
rel="nofollow"
|
||||||
</div>
|
>
|
||||||
</div>
|
Preview verlassen
|
||||||
{/if}
|
</a>
|
||||||
<div class="print:hidden">
|
|
||||||
<Header
|
|
||||||
links={data.headerLinks}
|
|
||||||
socialLinks={data.socialLinks}
|
|
||||||
logoUrl={data.logoUrl}
|
|
||||||
logoSvgHtml={data.logoSvgHtml}
|
|
||||||
translations={data.translations}
|
|
||||||
/>
|
|
||||||
<HeaderOverlay />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if topBannerData}
|
|
||||||
<div class="print:hidden">
|
|
||||||
<TopBanner
|
|
||||||
banner={topBannerData.banner as import('$lib/cms').FullwidthBannerEntry | null}
|
|
||||||
resolvedImages={topBannerData.resolvedImages}
|
|
||||||
responsive={topBannerData.responsive ?? null}
|
|
||||||
focalCss={topBannerData.focalCss ?? null}
|
|
||||||
headline={topBannerData.headline}
|
|
||||||
subheadline={topBannerData.subheadline}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<main id="main-content" tabindex="-1" class="flex-1 min-h-[60em] print:min-h-0">
|
|
||||||
<div class="container-custom pb-12 print:pb-0">
|
|
||||||
{#if breadcrumbItems.length > 0}
|
|
||||||
<div class="print:hidden">
|
|
||||||
<Breadcrumbs items={breadcrumbItems} />
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</div>
|
||||||
{@render children()}
|
{/if}
|
||||||
|
<div class="print:hidden">
|
||||||
|
<Header
|
||||||
|
links={data.headerLinks}
|
||||||
|
socialLinks={data.socialLinks}
|
||||||
|
logoUrl={data.logoUrl}
|
||||||
|
logoSvgHtml={data.logoSvgHtml}
|
||||||
|
translations={data.translations}
|
||||||
|
/>
|
||||||
|
<HeaderOverlay />
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
|
||||||
<div class="print:hidden">
|
{#if topBannerData}
|
||||||
<Footer footer={data.footerData} translations={data.translations} />
|
<div class="print:hidden">
|
||||||
|
<TopBanner
|
||||||
|
banner={topBannerData.banner as import('$lib/cms').FullwidthBannerEntry | null}
|
||||||
|
resolvedImages={topBannerData.resolvedImages}
|
||||||
|
responsive={topBannerData.responsive ?? null}
|
||||||
|
focalCss={topBannerData.focalCss ?? null}
|
||||||
|
headline={topBannerData.headline}
|
||||||
|
subheadline={topBannerData.subheadline}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<main id="main-content" tabindex="-1" class="flex-1 min-h-[60em] print:min-h-0">
|
||||||
|
<div class="container-custom pb-12 print:pb-0">
|
||||||
|
{#if breadcrumbItems.length > 0}
|
||||||
|
<div class="print:hidden">
|
||||||
|
<Breadcrumbs items={breadcrumbItems} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{@render children()}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div class="print:hidden">
|
||||||
|
<Footer footer={data.footerData} translations={data.translations} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{/if}
|
||||||
</TranslationProvider>
|
</TranslationProvider>
|
||||||
|
|||||||
Reference in New Issue
Block a user