From 1e337e36bbb7c92f5ad5a08867cb1951cd2218d0 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Mon, 20 Jun 2022 16:22:40 +0200
Subject: [PATCH] feat: routerMode, fix #143

---
 docs/reference/config.md                   | 14 ++++++++++++++
 packages/histoire/src/client/app/router.ts | 14 ++++++++++++--
 packages/histoire/src/node/config.ts       |  7 +++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/docs/reference/config.md b/docs/reference/config.md
index 6c397658..b0af1804 100644
--- a/docs/reference/config.md
+++ b/docs/reference/config.md
@@ -272,6 +272,20 @@ export default defineConfig({
 })
 ```
 
+## `routerMode`
+
+`'history' | 'hash'` - Default: `'history'`
+
+Changes the router mode:
+- `'history'`: HTML 5 history mode with cleaner URLs.
+- `'hash'`: Use the hashtag hack in the URL to support more servers and static hosting services.
+
+```ts
+export default defineConfig({
+  routerMode: 'hash',
+})
+```
+
 ## `vite`
 
 `ViteConfig | ((config: ViteConfig, env: ViteConfigEnv) => void | ViteConfig | Promise<void | ViteConfig>)`
diff --git a/packages/histoire/src/client/app/router.ts b/packages/histoire/src/client/app/router.ts
index 4f535155..0a76b541 100644
--- a/packages/histoire/src/client/app/router.ts
+++ b/packages/histoire/src/client/app/router.ts
@@ -1,9 +1,19 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+import { histoireConfig } from './util/config'
 
 export const base = import.meta.env.BASE_URL as string
 
+function createRouterHistory () {
+  switch (histoireConfig.routerMode) {
+    case 'hash': return createWebHashHistory(base)
+    case 'history':
+    default:
+      return createWebHistory(base)
+  }
+}
+
 export const router = createRouter({
-  history: createWebHistory(base),
+  history: createRouterHistory(),
   routes: [
     {
       path: '/',
diff --git a/packages/histoire/src/node/config.ts b/packages/histoire/src/node/config.ts
index 3d390a44..cf3b1df5 100644
--- a/packages/histoire/src/node/config.ts
+++ b/packages/histoire/src/node/config.ts
@@ -145,6 +145,12 @@ export interface HistoireConfig {
    * Customize the markdown-it renderer
    */
   markdown?: (md: MarkdownIt) => MarkdownIt | Promise<MarkdownIt>
+  /**
+   * Change the router mode.
+   * - history: use HTML history with cleaner URLs
+   * - hash: use hashtag hack in the URL to support more hosting services
+   */
+  routerMode?: 'history' | 'hash'
   /**
    * Vite config override
    */
@@ -264,6 +270,7 @@ export function getDefaultConfig (): HistoireConfig {
       },
     ],
     sandboxDarkClass: 'dark',
+    routerMode: 'history',
   }
 }