storybook を histoire に変えてみる

ssg svelte

historie じゃなくて histoire。 フランス語で、 ヒストリエじゃなくてヒストワールぽい。 npm install historie すると違うパッケージが来ました。

install

Histoire
Fast stories powered by Vite
Histoire favicon https://histoire.dev/guide/svelte3/getting-started.html
Histoire

histoire が vite-5 と衝突するので --legacy-peer-deps を付けました。 そのうち治るでしょう。

Terminal window
> npm i -D histoire @histoire/plugin-svelte --legacy-peer-deps
import { defineConfig } from 'histoire'
import { HstSvelte } from '@histoire/plugin-svelte'


export default defineConfig({
  plugins: [
    HstSvelte(),
  ],
  tree: {
    file: 'path',
  },
  vite: {
    base: '/histoire/'
  },
})

tree を付けるとディレトリ構造そのままで表示される。

Terminal window
> npx histoire dev

動いた。

.npmrc

legacy-peer-deps=true

build

Terminal window
> npx histoire build
=> .histoire/dist
Histoire
Fast stories powered by Vite
Histoire favicon https://histoire.dev/guide/config.html
Histoire

を見て vite.base を足した。

👈新

linkcard やってみる

ssg svelte markdown

svelte static の画像

ssg svelte