@poveste/app 0.1.0

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@poveste/app",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Pre-bundled UI for Poveste",
+  "author": {
+    "name": "Sorin Gitlan"
+  },
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/poveste-dev/poveste.git",
+    "type": "git",
+    "directory": "packages/poveste-app"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/bundle-index.js"
+    },
+    "./*": "./*"
+  },
+  "types": "./src/index.ts",
+  "dependencies": {
+    "fuse.js": "^7.0.0",
+    "shiki": "^3.0.0",
+    "@poveste/controls": "^0.1.0",
+    "@poveste/vendors": "^0.1.0",
+    "@poveste/shared": "^0.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "chokidar": "^4.0.1",
+    "concurrently": "^9.1.0",
+    "fs-extra": "^11.2.0",
+    "globby": "^14.0.2",
+    "pathe": "^1.1.2",
+    "postcss": "^8.4.49",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^3.4.16",
+    "typescript": "5.6.3",
+    "vite": "^7.3.0",
+    "vue": "^3.5.26"
+  },
+  "scripts": {
+    "build": "rimraf dist && vite build && pnpm run build:css && node ./scripts/copy.mjs",
+    "build:css": "tailwindcss -i src/app/style/main.pcss -o ./dist/style.css -c tailwind.config.cjs --postcss postcss.config.cjs",
+    "watch": "concurrently \"vite build --watch\" \"pnpm run build:css --watch\" \"node ./scripts/watchAndCopy.mjs\""
+  }
+}

package/postcss-scope-wrapper.cjs

@@ -0,0 +1,35 @@
+function isImportRule(node) {
+  return node.type === 'atrule' && node.name === 'import'
+}
+
+module.exports = (opts = {}) => {
+  const { from = ':root', to } = opts
+  let params = `(${from})`
+  if (to) {
+    params += ` to (${to})`
+  }
+
+  return {
+    postcssPlugin: 'postcss-scope-wrapper',
+    Once(root, { AtRule }) {
+      const scopeRule = new AtRule({
+        name: 'scope',
+        params,
+      })
+
+      const nodesToMove = root.nodes.filter(node => !isImportRule(node))
+
+      nodesToMove.forEach((node) => {
+        if (node.type === 'rule') {
+          node.selectors = node.selectors
+            .map(selector => (['html', ':root'].includes(selector) ? ':scope' : selector))
+        }
+        scopeRule.append(node)
+      })
+
+      root.append(scopeRule)
+    },
+  }
+}
+
+module.exports.postcss = true

package/postcss.config.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss')('./tailwind.config.cjs'),
+    require('autoprefixer'),
+    require('./postcss-scope-wrapper.cjs')({ from: ':root', to: '.__histoire-render-story:not(.__histoire-render-custom-controls)' }),
+  ],
+}

package/scripts/copy.mjs

@@ -0,0 +1,12 @@
+import fs from 'fs-extra'
+import { globbySync } from 'globby'
+import { normalizePath } from 'vite'
+
+function toDist(file) {
+  return normalizePath(file).replace(/^src\//, 'dist/')
+}
+
+globbySync('src/**/*').forEach((file) => {
+  if (file.endsWith('.vue') || file.endsWith('.ts') || file.endsWith('tsconfig.json')) return
+  fs.copy(file, toDist(file))
+})

package/scripts/watchAndCopy.mjs

@@ -0,0 +1,15 @@
+import chokidar from 'chokidar'
+import fs from 'fs-extra'
+import { normalizePath } from 'vite'
+
+function toDist(file) {
+  return normalizePath(file).replace(/^src\//, 'dist/')
+}
+
+// copy non ts files, such as an html or css, to the dist directory whenever
+// they change.
+chokidar
+  .watch('src/**/!(*.ts|*.vue|tsconfig.json)')
+  .on('change', file => fs.copy(file, toDist(file)))
+  .on('add', file => fs.copy(file, toDist(file)))
+  .on('unlink', file => fs.remove(toDist(file)))

package/src/app/App.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+export default {
+  name: 'PovesteApp',
+}
+</script>
+
+<script lang="ts" setup>
+import type { StoryFile, Tree } from './types'
+import { useTitle } from '@vueuse/core'
+import { onUpdate, files as rawFiles, tree as rawTree } from 'virtual:$histoire-stories'
+import { computed, onMounted, ref, watch } from 'vue'
+import AppHeader from './components/app/AppHeader.vue'
+import Breadcrumb from './components/app/Breadcrumb.vue'
+import InitialLoading from './components/app/InitialLoading.vue'
+import BaseSplitPane from './components/base/BaseSplitPane.vue'
+import CommandPromptsModal from './components/command/CommandPromptsModal.vue'
+import SearchModal from './components/search/SearchModal.vue'
+import GenericMountStory from './components/story/GenericMountStory.vue'
+import StoryList from './components/tree/StoryList.vue'
+import { useCommandStore } from './stores/command'
+import { useStoryStore } from './stores/story'
+import { histoireConfig } from './util/config'
+import { onKeyboardShortcut } from './util/keyboard'
+import { mapFile } from './util/mapping'
+import { isMobile } from './util/responsive'
+
+const files = ref<StoryFile[]>(rawFiles.map(file => mapFile(file)))
+const tree = ref<Tree>(rawTree)
+
+onUpdate((newFiles: StoryFile[], newTree: Tree) => {
+  loading.value = false
+  files.value = newFiles.map((file) => {
+    const existingFile = files.value.find(f => f.id === file.id)
+    return mapFile(file, existingFile)
+  })
+  tree.value = newTree
+})
+
+const stories = computed(() => files.value.reduce((acc, file) => {
+  acc.push(file.story)
+  return acc
+}, []))
+
+// Store
+
+const storyStore = useStoryStore()
+watch(stories, (value) => {
+  storyStore.setStories(value)
+}, {
+  immediate: true,
+})
+
+useTitle(computed(() => {
+  if (storyStore.currentStory) {
+    let title = storyStore.currentStory.title
+    if (storyStore.currentVariant) {
+      title += ` › ${storyStore.currentVariant.title}`
+    }
+    return `${title} | ${histoireConfig.theme.title}`
+  }
+  return histoireConfig.theme.title
+}))
+
+// Search
+
+const loadSearch = ref(false)
+const isSearchOpen = ref(false)
+
+watch(isSearchOpen, (value) => {
+  if (value) {
+    loadSearch.value = true
+  }
+})
+
+onKeyboardShortcut(['ctrl+k', 'meta+k'], (event) => {
+  isSearchOpen.value = true
+  event.preventDefault()
+})
+
+const loading = ref(false)
+
+if (import.meta.hot && !rawFiles.length) {
+  loading.value = true
+  import.meta.hot.on('histoire:all-stories-loaded', () => {
+    loading.value = false
+  })
+}
+
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+})
+
+const commandStore = useCommandStore()
+</script>
+
+<template>
+  <div
+    v-if="storyStore.currentStory"
+    class="histoire-app htw-hidden"
+  >
+    <GenericMountStory
+      :key="storyStore.currentStory.id"
+      :story="storyStore.currentStory"
+    />
+  </div>
+
+  <div
+    class="htw-h-screen htw-bg-white dark:htw-bg-gray-700 dark:htw-text-gray-100"
+    :style="{
+      // Prevent flash of content
+      opacity: mounted ? 1 : 0,
+    }"
+  >
+    <div
+      v-if="isMobile"
+      class="htw-h-full htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800"
+    >
+      <AppHeader @search="isSearchOpen = true" />
+      <Breadcrumb
+        :tree="tree"
+        :stories="stories"
+      />
+      <RouterView class="htw-grow" />
+    </div>
+
+    <BaseSplitPane
+      v-else
+      save-id="main-horiz"
+      :min="5"
+      :max="50"
+      :default-split="15"
+      class="htw-h-full"
+    >
+      <template #first>
+        <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __histoire-pane-shadow-from-right">
+          <AppHeader
+            class="htw-flex-none"
+            @search="isSearchOpen = true"
+          />
+          <StoryList
+            :tree="tree"
+            :stories="stories"
+            class="htw-flex-1"
+          />
+        </div>
+      </template>
+
+      <template #last>
+        <RouterView />
+      </template>
+    </BaseSplitPane>
+
+    <SearchModal
+      v-if="loadSearch"
+      :shown="isSearchOpen"
+      @close="isSearchOpen = false"
+    />
+
+    <CommandPromptsModal
+      v-if="__HISTOIRE_DEV__"
+      :shown="commandStore.showPromptsModal"
+      @close="commandStore.showPromptsModal = false"
+    />
+  </div>
+
+  <transition name="__histoire-fade">
+    <InitialLoading
+      v-if="loading"
+    />
+  </transition>
+</template>

package/src/app/api.ts

@@ -0,0 +1,9 @@
+import { isDark as _isDark } from './util/dark.js'
+
+export { toggleDark } from './util/dark.js'
+
+export { logEvent } from './util/events.js'
+
+export function isDark() {
+  return _isDark.value
+}

package/src/app/assets/histoire-text-dark.svg

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1536"
+   height="512"
+   viewBox="0 0 1536 512"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <rect
+       style="opacity:0.5;fill:#34d399;fill-opacity:1;stroke-width:1.00375"
+       id="rect1372"
+       width="314.30923"
+       height="406.60901"
+       x="-26.565063"
+       y="134.75079"
+       transform="rotate(-23.821262)"
+       ry="8" />
+    <rect
+       style="fill:#34d399;fill-opacity:1;stroke-width:1.00375"
+       id="rect850"
+       width="314.30923"
+       height="406.60901"
+       x="77.571838"
+       y="72.808708"
+       ry="8"
+       transform="rotate(-4.5744534)" />
+  </g>
+  <g
+     id="layer3">
+    <path
+       id="path1657-3"
+       style="display:inline;fill:#adedd6;fill-opacity:1;stroke:#adedd6;stroke-width:8.34923;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 359.38947,355.95134 320.72935,176.52942 238.34613,238.94118 Z M 273.64124,273.06608 152.59788,156.05591 191.25804,335.47786 Z" />
+    <g
+       aria-label="Histoire"
+       id="text1821-4"
+       style="font-size:231.926px;line-height:1.25;font-family:Sen;-inkscape-font-specification:Sen;fill:#adedd6;fill-opacity:1;stroke-width:5.79813"
+       transform="matrix(1.1500556,0,0,1.1500556,-105.40156,-38.414233)">
+      <path
+         d="M 693.87591,344.24783 V 181.89964 h 25.04801 v 162.34819 z m -105.99018,0 V 181.89964 h 25.04801 v 162.34819 z m 10.90052,-68.88202 v -24.1203 h 106.22211 v 24.1203 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#adedd6;fill-opacity:1"
+         id="path16857" />
+      <path
+         d="M 762.294,344.24783 V 222.48669 h 23.88838 v 121.76114 z m 11.5963,-148.66456 q -7.65356,0 -11.82822,-3.94274 -4.17467,-3.94274 -4.17467,-11.13245 0,-6.72585 4.17467,-10.90052 4.40659,-4.17467 11.82822,-4.17467 7.65356,0 11.82823,3.94274 4.17466,3.94275 4.17466,11.13245 0,6.72585 -4.40659,10.90052 -4.17467,4.17467 -11.5963,4.17467 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#adedd6;fill-opacity:1"
+         id="path16859" />
+      <path
+         d="m 863.41371,346.56709 q -15.30711,0 -27.59919,-5.33429 -12.29208,-5.3343 -20.40949,-15.77097 l 16.23482,-13.91556 q 6.95778,8.11741 15.07519,11.82822 8.34934,3.47889 18.78601,3.47889 4.17466,0 7.65355,-0.9277 3.71082,-1.15963 6.26201,-3.24696 2.78311,-2.08734 4.17466,-4.87045 1.39156,-3.01504 1.39156,-6.49393 0,-6.03007 -4.40659,-9.74089 -2.31926,-1.62348 -7.42164,-3.47889 -4.87044,-2.08733 -12.75593,-4.17467 -13.4517,-3.47889 -22.03297,-7.88548 -8.58126,-4.4066 -13.21978,-9.97282 -3.47889,-4.40659 -5.10237,-9.50897 -1.62348,-5.33429 -1.62348,-11.59629 0,-7.65356 3.24696,-13.91556 3.47889,-6.49393 9.27704,-11.13245 6.03008,-4.87045 13.91556,-7.42163 8.11741,-2.55119 17.16253,-2.55119 8.58126,0 16.93059,2.31926 8.58126,2.31926 15.77097,6.72585 7.18971,4.4066 12.06015,10.43667 l -13.68363,15.07519 q -4.4066,-4.40659 -9.74089,-7.65355 -5.10237,-3.47889 -10.43667,-5.3343 -5.3343,-1.85541 -9.74089,-1.85541 -4.87045,0 -8.81319,0.9277 -3.94274,0.92771 -6.72586,2.78312 -2.55118,1.8554 -3.94274,4.63852 -1.39155,2.78311 -1.39155,6.262 0.23192,3.01504 1.39155,5.79815 1.39156,2.55118 3.71082,4.40659 2.55118,1.85541 7.65356,3.94274 5.10237,2.08734 12.98785,3.94274 11.5963,3.01504 19.01793,6.72586 7.65356,3.47889 12.06015,8.11741 4.63852,4.40659 6.49393,10.20474 1.85541,5.79815 1.85541,12.98786 0,10.43667 -6.03008,18.786 -5.79815,8.11741 -15.77096,12.75593 -9.97282,4.63852 -22.2649,4.63852 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#adedd6;fill-opacity:1"
+         id="path16861" />
+      <path
+         d="M 948.99398,344.24783 V 191.4086 h 23.88838 v 152.83923 z m -25.27993,-98.56854 v -23.1926 h 77.46325 v 23.1926 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#adedd6;fill-opacity:1"
+         id="path16863" />
+      <path
+         d="m 1076.5528,346.56709 q -17.8583,0 -32.0058,-8.11741 -13.9156,-8.34933 -22.033,-22.49682 -8.1174,-14.37941 -8.1174,-32.70156 0,-18.32216 8.1174,-32.46964 8.1174,-14.37941 22.033,-22.49682 14.1475,-8.34934 32.0058,-8.34934 17.6263,0 31.5419,8.34934 14.1475,8.11741 22.2649,22.49682 8.1174,14.14748 8.1174,32.46964 0,18.32215 -8.1174,32.70156 -8.1174,14.14749 -22.2649,22.49682 -13.9156,8.11741 -31.5419,8.11741 z m 0,-21.80104 q 10.9005,0 19.4818,-5.3343 8.5812,-5.56622 13.4517,-14.84326 4.8704,-9.50897 4.6385,-21.33719 0.2319,-12.06016 -4.6385,-21.33719 -4.8705,-9.50897 -13.4517,-14.84327 -8.5813,-5.3343 -19.4818,-5.3343 -10.9005,0 -19.7137,5.56623 -8.5813,5.3343 -13.4517,14.84326 -4.8705,9.27704 -4.6386,21.10527 -0.2319,11.82822 4.6386,21.33719 4.8704,9.27704 13.4517,14.84326 8.8132,5.3343 19.7137,5.3343 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#adedd6;fill-opacity:1"
+         id="path16865" />
+      <path
+         d="M 1168.3954,344.24783 V 222.48669 h 23.8884 v 121.76114 z m 11.5963,-148.66456 q -7.6536,0 -11.8282,-3.94274 -4.1747,-3.94274 -4.1747,-11.13245 0,-6.72585 4.1747,-10.90052 4.4065,-4.17467 11.8282,-4.17467 7.6535,0 11.8282,3.94274 4.1747,3.94275 4.1747,11.13245 0,6.72585 -4.4066,10.90052 -4.1747,4.17467 -11.5963,4.17467 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#adedd6;fill-opacity:1"
+         id="path16867" />
+      <path
+         d="M 1228.928,344.24783 V 222.48669 h 24.1203 v 38.26779 l -2.3192,-9.27704 q 2.5512,-8.81319 8.5812,-16.0029 6.262,-7.1897 14.1475,-11.36437 8.1174,-4.17467 16.6987,-4.17467 3.9427,0 7.4216,0.69578 3.7109,0.69578 5.7982,1.62348 l -6.262,25.97571 q -2.7831,-1.15963 -6.262,-1.85541 -3.247,-0.9277 -6.4939,-0.9277 -6.262,0 -12.0602,2.55119 -5.5662,2.31926 -9.9728,6.72585 -4.1747,4.17467 -6.7259,9.97282 -2.5512,5.56622 -2.5512,12.29207 v 67.25854 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#adedd6;fill-opacity:1"
+         id="path16869" />
+      <path
+         d="m 1374.1134,346.56709 q -18.786,0 -33.3973,-7.88548 -14.3794,-8.11741 -22.7288,-22.03297 -8.1174,-13.91556 -8.1174,-32.00579 0,-14.37941 4.6386,-26.20763 4.6385,-11.82823 12.7559,-20.40949 8.3493,-8.81319 19.7137,-13.45171 11.5963,-4.87045 25.048,-4.87045 11.8282,0 22.033,4.63852 10.2047,4.4066 17.6263,12.29208 7.6536,7.88549 11.5963,18.78601 4.1747,10.66859 3.9428,23.42452 l -0.2319,10.20475 h -99.4963 l -5.3343,-19.01794 h 84.1891 l -3.4788,3.94275 v -5.56623 q -0.6958,-7.65355 -5.1024,-13.68363 -4.4066,-6.03008 -11.1325,-9.50897 -6.7258,-3.47889 -14.6113,-3.47889 -12.524,0 -21.1053,4.87045 -8.5812,4.63852 -12.9878,13.91556 -4.4066,9.04511 -4.4066,22.49682 0,12.75593 5.3343,22.2649 5.3343,9.27704 15.0752,14.37941 9.7409,5.10237 22.4968,5.10237 9.0451,0 16.6987,-3.01504 7.8855,-3.01504 16.9306,-10.90052 l 12.0601,16.9306 q -5.5662,5.56622 -13.6836,9.74089 -7.8855,4.17467 -16.9306,6.72585 -8.8132,2.31926 -17.3945,2.31926 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#adedd6;fill-opacity:1"
+         id="path16871" />
+    </g>
+  </g>
+  <g
+     id="layer2"
+     style="display:none">
+    <path
+       id="path1657"
+       style="fill:#b4fae2;fill-opacity:1;stroke:#b4fae2;stroke-width:8;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 296,103.98242 -135.53125,177.9668 h 88.70117 z M 262.83008,230.05078 216,408.01758 351.53125,230.05078 Z"
+       transform="rotate(-4.156553,256,256.00691)" />
+  </g>
+</svg>

package/src/app/assets/histoire-text.svg

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1536"
+   height="512"
+   viewBox="0 0 1536 512"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <rect
+       style="opacity:0.5;fill:#34d399;fill-opacity:1;stroke-width:1.00375"
+       id="rect1372"
+       width="314.30923"
+       height="406.60901"
+       x="-26.565063"
+       y="134.75079"
+       transform="rotate(-23.821262)"
+       ry="8" />
+    <rect
+       style="fill:#34d399;fill-opacity:1;stroke-width:1.00375"
+       id="rect850"
+       width="314.30923"
+       height="406.60901"
+       x="77.571838"
+       y="72.808708"
+       ry="8"
+       transform="rotate(-4.5744534)" />
+  </g>
+  <g
+     id="layer3">
+    <path
+       id="path1657-3"
+       style="display:inline;fill:#adedd6;fill-opacity:1;stroke:#adedd6;stroke-width:8.34923;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 359.38947,355.95134 320.72935,176.52942 238.34613,238.94118 Z M 273.64124,273.06608 152.59788,156.05591 191.25804,335.47786 Z" />
+    <g
+       aria-label="Histoire"
+       id="text1821"
+       style="font-size:231.926px;line-height:1.25;font-family:Sen;-inkscape-font-specification:Sen;fill:#2bc78e;stroke-width:5.79813;fill-opacity:1"
+       transform="matrix(1.1500556,0,0,1.1500556,-105.40156,-38.414233)">
+      <path
+         d="M 693.87591,344.24783 V 181.89964 h 25.04801 v 162.34819 z m -105.99018,0 V 181.89964 h 25.04801 v 162.34819 z m 10.90052,-68.88202 v -24.1203 h 106.22211 v 24.1203 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#2bc78e;fill-opacity:1"
+         id="path16857" />
+      <path
+         d="M 762.294,344.24783 V 222.48669 h 23.88838 v 121.76114 z m 11.5963,-148.66456 q -7.65356,0 -11.82822,-3.94274 -4.17467,-3.94274 -4.17467,-11.13245 0,-6.72585 4.17467,-10.90052 4.40659,-4.17467 11.82822,-4.17467 7.65356,0 11.82823,3.94274 4.17466,3.94275 4.17466,11.13245 0,6.72585 -4.40659,10.90052 -4.17467,4.17467 -11.5963,4.17467 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#2bc78e;fill-opacity:1"
+         id="path16859" />
+      <path
+         d="m 863.41371,346.56709 q -15.30711,0 -27.59919,-5.33429 -12.29208,-5.3343 -20.40949,-15.77097 l 16.23482,-13.91556 q 6.95778,8.11741 15.07519,11.82822 8.34934,3.47889 18.78601,3.47889 4.17466,0 7.65355,-0.9277 3.71082,-1.15963 6.26201,-3.24696 2.78311,-2.08734 4.17466,-4.87045 1.39156,-3.01504 1.39156,-6.49393 0,-6.03007 -4.40659,-9.74089 -2.31926,-1.62348 -7.42164,-3.47889 -4.87044,-2.08733 -12.75593,-4.17467 -13.4517,-3.47889 -22.03297,-7.88548 -8.58126,-4.4066 -13.21978,-9.97282 -3.47889,-4.40659 -5.10237,-9.50897 -1.62348,-5.33429 -1.62348,-11.59629 0,-7.65356 3.24696,-13.91556 3.47889,-6.49393 9.27704,-11.13245 6.03008,-4.87045 13.91556,-7.42163 8.11741,-2.55119 17.16253,-2.55119 8.58126,0 16.93059,2.31926 8.58126,2.31926 15.77097,6.72585 7.18971,4.4066 12.06015,10.43667 l -13.68363,15.07519 q -4.4066,-4.40659 -9.74089,-7.65355 -5.10237,-3.47889 -10.43667,-5.3343 -5.3343,-1.85541 -9.74089,-1.85541 -4.87045,0 -8.81319,0.9277 -3.94274,0.92771 -6.72586,2.78312 -2.55118,1.8554 -3.94274,4.63852 -1.39155,2.78311 -1.39155,6.262 0.23192,3.01504 1.39155,5.79815 1.39156,2.55118 3.71082,4.40659 2.55118,1.85541 7.65356,3.94274 5.10237,2.08734 12.98785,3.94274 11.5963,3.01504 19.01793,6.72586 7.65356,3.47889 12.06015,8.11741 4.63852,4.40659 6.49393,10.20474 1.85541,5.79815 1.85541,12.98786 0,10.43667 -6.03008,18.786 -5.79815,8.11741 -15.77096,12.75593 -9.97282,4.63852 -22.2649,4.63852 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#2bc78e;fill-opacity:1"
+         id="path16861" />
+      <path
+         d="M 948.99398,344.24783 V 191.4086 h 23.88838 v 152.83923 z m -25.27993,-98.56854 v -23.1926 h 77.46325 v 23.1926 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#2bc78e;fill-opacity:1"
+         id="path16863" />
+      <path
+         d="m 1076.5528,346.56709 q -17.8583,0 -32.0058,-8.11741 -13.9156,-8.34933 -22.033,-22.49682 -8.1174,-14.37941 -8.1174,-32.70156 0,-18.32216 8.1174,-32.46964 8.1174,-14.37941 22.033,-22.49682 14.1475,-8.34934 32.0058,-8.34934 17.6263,0 31.5419,8.34934 14.1475,8.11741 22.2649,22.49682 8.1174,14.14748 8.1174,32.46964 0,18.32215 -8.1174,32.70156 -8.1174,14.14749 -22.2649,22.49682 -13.9156,8.11741 -31.5419,8.11741 z m 0,-21.80104 q 10.9005,0 19.4818,-5.3343 8.5812,-5.56622 13.4517,-14.84326 4.8704,-9.50897 4.6385,-21.33719 0.2319,-12.06016 -4.6385,-21.33719 -4.8705,-9.50897 -13.4517,-14.84327 -8.5813,-5.3343 -19.4818,-5.3343 -10.9005,0 -19.7137,5.56623 -8.5813,5.3343 -13.4517,14.84326 -4.8705,9.27704 -4.6386,21.10527 -0.2319,11.82822 4.6386,21.33719 4.8704,9.27704 13.4517,14.84326 8.8132,5.3343 19.7137,5.3343 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#2bc78e;fill-opacity:1"
+         id="path16865" />
+      <path
+         d="M 1168.3954,344.24783 V 222.48669 h 23.8884 v 121.76114 z m 11.5963,-148.66456 q -7.6536,0 -11.8282,-3.94274 -4.1747,-3.94274 -4.1747,-11.13245 0,-6.72585 4.1747,-10.90052 4.4065,-4.17467 11.8282,-4.17467 7.6535,0 11.8282,3.94274 4.1747,3.94275 4.1747,11.13245 0,6.72585 -4.4066,10.90052 -4.1747,4.17467 -11.5963,4.17467 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#2bc78e;fill-opacity:1"
+         id="path16867" />
+      <path
+         d="M 1228.928,344.24783 V 222.48669 h 24.1203 v 38.26779 l -2.3192,-9.27704 q 2.5512,-8.81319 8.5812,-16.0029 6.262,-7.1897 14.1475,-11.36437 8.1174,-4.17467 16.6987,-4.17467 3.9427,0 7.4216,0.69578 3.7109,0.69578 5.7982,1.62348 l -6.262,25.97571 q -2.7831,-1.15963 -6.262,-1.85541 -3.247,-0.9277 -6.4939,-0.9277 -6.262,0 -12.0602,2.55119 -5.5662,2.31926 -9.9728,6.72585 -4.1747,4.17467 -6.7259,9.97282 -2.5512,5.56622 -2.5512,12.29207 v 67.25854 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#2bc78e;fill-opacity:1"
+         id="path16869" />
+      <path
+         d="m 1374.1134,346.56709 q -18.786,0 -33.3973,-7.88548 -14.3794,-8.11741 -22.7288,-22.03297 -8.1174,-13.91556 -8.1174,-32.00579 0,-14.37941 4.6386,-26.20763 4.6385,-11.82823 12.7559,-20.40949 8.3493,-8.81319 19.7137,-13.45171 11.5963,-4.87045 25.048,-4.87045 11.8282,0 22.033,4.63852 10.2047,4.4066 17.6263,12.29208 7.6536,7.88549 11.5963,18.78601 4.1747,10.66859 3.9428,23.42452 l -0.2319,10.20475 h -99.4963 l -5.3343,-19.01794 h 84.1891 l -3.4788,3.94275 v -5.56623 q -0.6958,-7.65355 -5.1024,-13.68363 -4.4066,-6.03008 -11.1325,-9.50897 -6.7258,-3.47889 -14.6113,-3.47889 -12.524,0 -21.1053,4.87045 -8.5812,4.63852 -12.9878,13.91556 -4.4066,9.04511 -4.4066,22.49682 0,12.75593 5.3343,22.2649 5.3343,9.27704 15.0752,14.37941 9.7409,5.10237 22.4968,5.10237 9.0451,0 16.6987,-3.01504 7.8855,-3.01504 16.9306,-10.90052 l 12.0601,16.9306 q -5.5662,5.56622 -13.6836,9.74089 -7.8855,4.17467 -16.9306,6.72585 -8.8132,2.31926 -17.3945,2.31926 z"
+         style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#2bc78e;fill-opacity:1"
+         id="path16871" />
+    </g>
+  </g>
+  <g
+     id="layer2"
+     style="display:none">
+    <path
+       id="path1657"
+       style="fill:#b4fae2;fill-opacity:1;stroke:#b4fae2;stroke-width:8;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 296,103.98242 -135.53125,177.9668 h 88.70117 z M 262.83008,230.05078 216,408.01758 351.53125,230.05078 Z"
+       transform="rotate(-4.156553,256,256.00691)" />
+  </g>
+</svg>

package/src/app/assets/histoire.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <rect
+       style="opacity:0.5;fill:#34d399;fill-opacity:1;stroke-width:1.00375"
+       id="rect1372"
+       width="314.30923"
+       height="406.60901"
+       x="-26.565063"
+       y="134.75079"
+       transform="rotate(-23.821262)"
+       ry="8" />
+    <rect
+       style="fill:#34d399;fill-opacity:1;stroke-width:1.00375"
+       id="rect850"
+       width="314.30923"
+       height="406.60901"
+       x="77.571838"
+       y="72.808708"
+       ry="8"
+       transform="rotate(-4.5744534)" />
+  </g>
+  <g
+     id="layer3">
+    <path
+       id="path1657-3"
+       style="display:inline;fill:#b4fae2;fill-opacity:1;stroke:#b4fae2;stroke-width:8.34923;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 359.38947,355.95134 320.72935,176.52942 238.34613,238.94118 Z M 273.64124,273.06608 152.59788,156.05591 191.25804,335.47786 Z" />
+  </g>
+  <g
+     id="layer2"
+     style="display:none">
+    <path
+       id="path1657"
+       style="fill:#b4fae2;fill-opacity:1;stroke:#b4fae2;stroke-width:8;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 296,103.98242 -135.53125,177.9668 h 88.70117 z M 262.83008,230.05078 216,408.01758 351.53125,230.05078 Z"
+       transform="rotate(-4.156553,256,256.00691)" />
+  </g>
+</svg>

package/src/app/components/HomeView.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import PovesteLogo from '../assets/histoire.svg'
+import { useStoryStore } from '../stores/story'
+import { customLogos, histoireConfig } from '../util/config'
+import HomeCounter from './app/HomeCounter.vue'
+
+const logoUrl = computed(() => histoireConfig.theme?.logo?.square ? customLogos.square : PovesteLogo)
+const storyStore = useStoryStore()
+
+const stats = computed(() => {
+  let storyCount = 0
+  let variantCount = 0
+  let docsCount = 0;
+
+  (storyStore.stories || []).forEach((story) => {
+    if (story.docsOnly) {
+      docsCount++
+    }
+    else {
+      storyCount++
+      if (story.variants) {
+        variantCount += story.variants.length
+      }
+    }
+  })
+
+  return {
+    storyCount,
+    variantCount,
+    docsCount,
+  }
+})
+</script>
+
+<template>
+  <div class="histoire-home-view htw-flex md:htw-flex-col htw-gap-12 htw-items-center htw-justify-center htw-h-full">
+    <img
+      :src="logoUrl"
+      alt="Logo"
+      class="htw-w-64 htw-h-64 htw-opacity-25 htw-mb-8 htw-hidden md:htw-block"
+    >
+    <div class="htw-flex !md:htw-flex-col htw-flex-wrap htw-justify-evenly htw-gap-2 htw-px-4 htw-py-2 htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded htw-border htw-border-gray-500/30">
+      <HomeCounter
+        title="Stories"
+        icon="carbon:cube"
+        :count="stats.storyCount"
+      />
+      <HomeCounter
+        title="Variants"
+        icon="carbon:cube-view"
+        :count="stats.variantCount"
+      />
+      <HomeCounter
+        title="Documents"
+        icon="carbon:document-blank"
+        :count="stats.docsCount"
+      />
+    </div>
+  </div>
+</template>