feat: defaultBackgroundColor and head config options#837
feat: defaultBackgroundColor and head config options#83750rayn wants to merge 1 commit intohistoire-dev:mainfrom
Conversation
|
|
✅ Deploy Preview for histoire-examples-svelte3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-controls ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-examples-vue3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a defaultBackgroundColor configuration for story previews and adds support for custom <head> tag injection using the unhead library. The changes span the configuration types, the build process, and the Vite development server. Feedback was provided regarding the use of useStorage in the preview settings store, noting that the new default background color may be ignored for existing users who already have a value persisted in their local storage.
| responsiveHeight: null, | ||
| rotate: false, | ||
| backgroundColor: 'transparent', | ||
| backgroundColor: histoireConfig.defaultBackgroundColor ?? 'transparent', |
There was a problem hiding this comment.
The use of useStorage with a default value means that defaultBackgroundColor will only be applied if there is no existing value in the user's local storage. For existing users who have already visited Histoire, changes to defaultBackgroundColor in the configuration will be ignored because useStorage will prioritize the value already saved in their browser.
To ensure the configured default is respected until a user explicitly chooses a different color, consider using a computed property that falls back to the config value if the stored value is null or undefined.
histoire
@histoire/app
@histoire/controls
@histoire/plugin-nuxt
@histoire/plugin-percy
@histoire/plugin-screenshot
@histoire/plugin-svelte
@histoire/plugin-vue
@histoire/shared
@histoire/vendors
commit: |
50rayn
force-pushed
the
feat/default-bg-and-head
branch
from
19a369f to
30569ae
Compare
1 participant
Two small config additions.
defaultBackgroundColor— closes #441Sets the initial preview background color before the user picks one from the dropdown. Should match a
colorfrombackgroundPresetsto also highlight the matching entry.head— closes #331, also helps #586Inject extra
<head>tags into both the Histoire app and the story sandbox. Same input shape as Nuxt'suseHead, rendered via unhead.Applies in dev (both HTML middlewares) and build (
index.html+__sandbox.html).Notes
disableDefaults: trueoncreateHeadso unhead doesn't auto-injectlang="en"/ its own viewport meta — keeps Histoire's existing template untouched whenheadis unset.unhead@^3inhistoire(runtime) and@histoire/shared(types only).examples/vue3,vue3-themed,vue3-vuetify,svelte4,nuxt4— all build clean.