diff --git a/.storybook/decorators.ts b/.storybook/decorators.ts
new file mode 100644
index 000000000..270cdec3a
--- /dev/null
+++ b/.storybook/decorators.ts
@@ -0,0 +1,20 @@
+import AppFooter from '~/components/AppFooter.vue'
+import AppHeader from '~/components/AppHeader.vue'
+
+/**
+ * Wraps a page story with the standard site chrome: AppHeader, main content
+ * area, and AppFooter. Use this for any full-page story so the layout stays
+ * consistent and changes only need to be made in one place.
+ */
+export const pageDecorator = () => ({
+ components: { AppHeader, AppFooter },
+ template: `
+
+ `,
+})
diff --git a/app/pages/about.stories.ts b/app/pages/about.stories.ts
index b895ba8e7..01ee6cd73 100644
--- a/app/pages/about.stories.ts
+++ b/app/pages/about.stories.ts
@@ -1,27 +1,13 @@
import About from './about.vue'
import type { Meta, StoryObj } from '@storybook-vue/nuxt'
-import AppHeader from '~/components/AppHeader.vue'
-import AppFooter from '~/components/AppFooter.vue'
+import { pageDecorator } from '#storybook/decorators'
const meta = {
component: About,
parameters: {
layout: 'fullscreen',
},
- decorators: [
- () => ({
- components: { AppHeader, AppFooter },
- template: `
-
- `,
- }),
- ],
+ decorators: [pageDecorator],
} satisfies Meta
export default meta
diff --git a/app/pages/accessibility.stories.ts b/app/pages/accessibility.stories.ts
index bfd096859..d3b585638 100644
--- a/app/pages/accessibility.stories.ts
+++ b/app/pages/accessibility.stories.ts
@@ -1,27 +1,13 @@
import Accessibility from './accessibility.vue'
import type { Meta, StoryObj } from '@storybook-vue/nuxt'
-import AppHeader from '~/components/AppHeader.vue'
-import AppFooter from '~/components/AppFooter.vue'
+import { pageDecorator } from '#storybook/decorators'
const meta = {
component: Accessibility,
parameters: {
layout: 'fullscreen',
},
- decorators: [
- () => ({
- components: { AppHeader, AppFooter },
- template: `
-
- `,
- }),
- ],
+ decorators: [pageDecorator],
} satisfies Meta
export default meta
diff --git a/app/pages/privacy.stories.ts b/app/pages/privacy.stories.ts
new file mode 100644
index 000000000..a39c41da1
--- /dev/null
+++ b/app/pages/privacy.stories.ts
@@ -0,0 +1,16 @@
+import Privacy from './privacy.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import { pageDecorator } from '#storybook/decorators'
+
+const meta = {
+ component: Privacy,
+ parameters: {
+ layout: 'fullscreen',
+ },
+ decorators: [pageDecorator],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4ca8c8544..843ea63f7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -351,6 +351,7 @@ export default defineNuxtConfig({
allowImportingTsExtensions: true,
paths: {
'#cli/*': ['../cli/src/*'],
+ '#storybook/*': ['../.storybook/*'],
},
},
include: ['../test/unit/app/**/*.ts'],
diff --git a/package.json b/package.json
index 5c80943cf..f37afe3c7 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
"url": "https://roe.dev"
},
"type": "module",
+ "imports": {
+ "#storybook/*": "./.storybook/*"
+ },
"scripts": {
"build": "nuxt build",
"build:test": "NODE_ENV=test vp run build",