Fix: account for URL structure of GH pages when loading static assets

Redback-Operations · Apr 14, 2024 · 7e21a50 · 7e21a50
1 parent 75434b0
commit 7e21a50
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,10 +1,16 @@
 import {type StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from "vite";
 
+const isProduction = process.env.NODE_ENV === 'production';
+
 const config: StorybookConfig = {
 	core: {
 		builder: '@storybook/builder-vite',
 	},
+	env: (config) => ({
+		...config,
+		STORYBOOK_BASE_URL: isProduction ? 'https://redback-operations.github.io/redback-ui' : 'http://localhost:6006',
+	}),
 	async viteFinal(config, { configType }) {
 		if (!config.optimizeDeps) {
 			config.optimizeDeps = { include: [] };

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -1,6 +1,7 @@
 <link rel="shortcut icon" href="/favicon.ico">
-<link rel="icon" type="image/svg+xml" href="/icon.svg" sizes="192x192">
+<base href="%STORYBOOK_BASE_URL%/">
+<link rel="icon" type="image/svg+xml" href="icon.svg" sizes="192x192">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap">
-<link rel="stylesheet" href="/storybook.css">
-<link rel="stylesheet" href="/storybook-ui-themes.css">
-<script src="/storybook-themes.js" type="module"></script>
+<link rel="stylesheet" href="storybook.css">
+<link rel="stylesheet" href="storybook-ui-themes.css">
+<script src="storybook-themes.js" type="module"></script>