refactor: remove Examples page and update navbar link to iframe demos

Author: codeBelt

examples/demo/src/components/NavSidebar.tsx

@@ -80,7 +80,17 @@ export function NavSidebar({
           </div>
         </div>
 
-        <nav className="p-3 overflow-y-auto h-[calc(100%-60px)]">
+        <div className="px-3 pt-3">
+          <a
+            href="../"
+            className="flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs font-medium text-indigo-400 hover:bg-indigo-500/10 transition-colors"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+            Back to Docs
+          </a>
+        </div>
+
+        <nav className="p-3 overflow-y-auto h-[calc(100%-108px)]">
           {navGroups.map((group) => (
             <div key={group.label} className="mb-4">
               <div className="text-[10px] font-semibold text-zinc-500 uppercase tracking-wider px-2 mb-1.5">

website/docusaurus.config.ts

@@ -4,6 +4,8 @@ import {themes as prismThemes} from 'prism-react-renderer';
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
+const baseUrl = '/classy-store/';
+
 const config: Config = {
   title: 'Classy Store',
   tagline: 'Class-based reactive state management for React',
@@ -14,7 +16,7 @@ const config: Config = {
   },
 
   url: 'https://codebelt.github.io',
-  baseUrl: '/classy-store/',
+  baseUrl,
 
   organizationName: 'codebelt',
   projectName: 'classy-store',
@@ -72,9 +74,11 @@ const config: Config = {
           label: 'Docs',
         },
         {
-          to: '/examples',
+          href: `pathname://${baseUrl}demos/index.html`,
           label: 'Examples',
           position: 'left',
+          target: '_self',
+          className: 'navbar-examples-link',
         },
         {
           href: 'https://github.com/codebelt/classy-store',

website/src/css/custom.css

@@ -18,6 +18,10 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
+.navbar-examples-link svg {
+  display: none;
+}
+
 [data-theme="dark"] {
   --ifm-color-primary: #25c2a0;
   --ifm-color-primary-dark: #21af90;