foggy dagger
I'm currenly creating a Astro + Storyblok website and ran into a little issue. I need to set metadata from a (grand)child component.
Since Storyblok supplies their own StoryblokComponent i cant make use of transferring slots to pass data around to multiple levels.
What i've tried so far: (simplified version)
// src/layouts/Layout.astro
<html>
<head>
<Head />
<slot name="head" />
</head>
<body>
<slot />
</body>
</html>
// src/pages/[...slug].astro
<Layout>
<StoryblokComponent blok={story.content} story={story} />
</Layout>
// src/components/storyblok/SomeNestedStoryBlokComponent.astro
<SomeNestedStoryBlokComponent>
<h1>Page title</h1>
<Fragment slot="head">
<title>Page title - My Website</title>
</Fragment>
</SomeNestedStoryBlokComponent>
Is there a possibility to use something like we have in next/nuxt? Or as the title describes use something like a global slot? <slot name="head" is-global />
// src/components/storyblok/SomeNestedStoryBlokComponent.astro
---
import { useHead } from 'some-package';
useHead({
title: 'Page title - My Website'
});
---
<SomeNestedStoryBlokComponent>
<h1>Page title</h1>
</SomeNestedStoryBlokComponent>
dense pelican