fix(ui): logo link and dark theme flikering

itsjavi · Sep 3, 2023 · 3d40a7c · 3d40a7c
1 parent 0a92a8a
commit 3d40a7c
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 1 deletion.
diff --git a/packages/docs/canvas.html b/packages/docs/canvas.html
@@ -5,6 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>StoryLite - Design System (React) - IFRAME</title>
+    <script>
+      // Render blocking JS to fix theme flickering:
+      const slParams = window.localStorage.getItem('storylite.parameters')
+      if (slParams) {
+        document.documentElement.dataset.theme = JSON.parse(slParams)?.theme?.value ?? 'auto'
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/docs/index.html b/packages/docs/index.html
@@ -5,6 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>StoryLite - Design System (React)</title>
+    <script>
+      // Render blocking JS to fix theme flickering:
+      const slParams = window.localStorage.getItem('storylite.parameters')
+      if (slParams) {
+        document.documentElement.dataset.theme = JSON.parse(slParams)?.theme?.value ?? 'auto'
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/examples/react/canvas.html b/packages/examples/react/canvas.html
@@ -5,6 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>StoryLite - Design System (React) - IFRAME</title>
+    <script>
+      // Render blocking JS to fix theme flickering:
+      const slParams = window.localStorage.getItem('storylite.parameters')
+      if (slParams) {
+        document.documentElement.dataset.theme = JSON.parse(slParams)?.theme?.value ?? 'auto'
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/examples/react/index.html b/packages/examples/react/index.html
@@ -5,6 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>StoryLite - Design System (React)</title>
+    <script>
+      // Render blocking JS to fix theme flickering:
+      const slParams = window.localStorage.getItem('storylite.parameters')
+      if (slParams) {
+        document.documentElement.dataset.theme = JSON.parse(slParams)?.theme?.value ?? 'auto'
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/storylite/src/components/sidebar/SidebarTitle.tsx b/packages/storylite/src/components/sidebar/SidebarTitle.tsx
@@ -1,12 +1,13 @@
 import { useStoryLiteStore } from '@/app/stores/global'
+import { STORYLITE_BASE_PATH } from '@/services/router'
 import { Link } from '@/services/router/router.component'
 
 export function SidebarTitle() {
   const config = useStoryLiteStore(state => state.config)
 
   return (
     <div className={'storylite-sidebar-title'}>
-      <Link to={'/'}>{config.title}</Link>
+      <Link to={STORYLITE_BASE_PATH}>{config.title}</Link>
     </div>
   )
 }