docs(*): rearrange folder structure in storybook

.github/workflows/sync-to-gist.yml

@@ -0,0 +1,18 @@
+name: Sync to Gist
+on:
+  push:
+    branches:
+      - '3.0.0-alpha' 
+      - 'lab'
+jobs:
+  Root-Gist:
+    runs-on: ubuntu-latest
+    steps:
+        - name: Checkout
+          uses: actions/checkout@v4
+        - name: Gist Repo Sync
+          uses: pentatonicfunk/action-gist-repo-sync@v1.8
+          with:
+            gist_token: ${{ secrets.GIST_TOKEN }}
+            gist_id: 425e29332ec837d9ea4bbe90ff8d4a37
+            source_path: ./src/themes/root.css

.storybook/main.js

@@ -40,5 +40,6 @@ module.exports = {
         viteConfigPath: "./.storybook/storybookVite.config.js"
       }
     }
-  }
+  },
+  staticDirs: ["./static"]
 };

.storybook/preview.ts

@@ -50,7 +50,9 @@ export const parameters = {
     storySort: {
       order: [
         "Getting Started",
-        ["Introduction", "Installation", "Imports", "Usage", "Frameworks"],
+        ["Introduction", "Installation", "Imports"],
+        "Usage",
+        "Frameworks",
         "Troubleshooting",
         "Components",
         "Patterns",

docs/Status.md

@@ -0,0 +1 @@
+# Status 

docs/WebComponents.md

@@ -40,12 +40,11 @@ We are monitoring and evaluating these libraries to help recommend a solution fo
 
 Read more about the <a href="https://web.dev/articles/declarative-shadow-dom" target="_blank">declarative shadow dom </a>.     
 
-#### Search Engine Optimisation
+### Search Engine Optimisation
 
-Its a myth in 2024 that search engine crawlers like Google and Bing cannot unravel a javascript application. They can , and this means client side rendering does not mean poor SEO! That said, one may argue that it is faster for search engine crawlers to index a pre-rendered HTML page from the SSR apps without running javascript.
-
-As such while constructing our web components, we keep it in mind to make SEO critical information to be part of the light DOM. SEO critical information are usually the textual content you would want to appear in the search engine searches.
+Its a myth in 2024 that search engine crawlers like Google and Bing cannot unravel a javascript application. They can , and this means client side rendering does not mean poor SEO! 
 
+While constructing our web components, we keep it in mind to make SEO critical information to be part of the light DOM. SEO critical information are usually the textual content or links you would want to be crawled.
 
 We do it by first separating our SEO critical components from non-SEO critical components (because why would one need a progress bar or a spinner or a datepicker to be crawled?)
 
@@ -78,7 +77,9 @@ HTML content rendered from the light DOM are available in the HTML that is pre-r
 As a developer user, it is also important to be mindful of using the right HTML tags for SEO.  
 For example, using an anchor tag for links, header tags for header contents. 
 
-<img href="./static/seo.png" />
+<img src="/poor-seo.svg" alt="poorly optimised for seo" />
+<br/>
+<img src="/good-seo.svg" alt="better optimised for seo" />
 
 Readings 
 - https://dev.to/stuffbreaker/seo-and-web-components-2023-edition-3l6i

scripts/generateStories.mjs

@@ -28,7 +28,6 @@ const groupedComponents = groupBy(components, (k, v) => {
 
 for (const [key, value] of Object.entries(groupedComponents)) {
   const allMembers = value.map(i => i.members).flat().filter(member => !(member.privacy && member.privacy === 'private'))
-  if (key==="Radio")console.log(value)
   const methodsMeta = methodsTable(value);
   const summary = value.filter(i => i.summary).map(i => i.summary).join('<br/>')
   const args = allMembers.filter(member => member.kind === 'field');

stories/getting-started/Frameworks/Angular.mdx

@@ -1,6 +1,6 @@
 import { Meta, Markdown } from "@storybook/blocks";
 import Angular from "../../../docs/Angular.md?raw";
 
-<Meta title="Getting Started/Frameworks/Angular" />
+<Meta title="Frameworks/Angular" />
 
 <Markdown>{Angular}</Markdown>

stories/getting-started/Frameworks/Next.mdx

@@ -1,7 +1,7 @@
 import { Meta, Markdown } from "@storybook/blocks";
 import NextDocs from "../../../docs/Next.md?raw";
 
-<Meta title="Getting Started/Frameworks/NextJS" />
+<Meta title="Frameworks/NextJS" />
 
 <Markdown>{NextDocs}</Markdown>
 

stories/getting-started/Frameworks/React.mdx

@@ -1,6 +1,6 @@
 import { Meta, Markdown } from "@storybook/blocks";
 import ReactDocs from "../../../docs/React.md?raw";
 
-<Meta title="Getting Started/Frameworks/React" />
+<Meta title="Frameworks/React" />
 
 <Markdown>{ReactDocs}</Markdown>

stories/getting-started/Frameworks/Vue.mdx

@@ -1,6 +1,6 @@
 import { Meta, Markdown } from "@storybook/blocks";
 import Vue from "../../../docs/Vue.md?raw";
 
-<Meta title="Getting Started/Frameworks/Vue" />
+<Meta title="Frameworks/Vue" />
 
 <Markdown>{Vue}</Markdown>

stories/getting-started/Usage/Attributes.mdx

@@ -1,6 +1,6 @@
 import { Meta, Markdown } from "@storybook/blocks";
 import AttributeAndProperties from '../../../docs/Attributes.md?raw';
 
-<Meta title="Getting Started/Usage/Attribute and Properties" />
+<Meta title="Usage/Attribute and Properties" />
 
 <Markdown>{AttributeAndProperties}</Markdown>

stories/getting-started/Usage/Events.mdx

@@ -1,6 +1,6 @@
 import { Meta, Markdown } from '@storybook/blocks';
 import Events from '../../../docs/Events.md?raw';
 
-<Meta title="Getting Started/Usage/Events" />
+<Meta title="Usage/Events" />
 
 <Markdown>{Events}</Markdown>

stories/getting-started/Usage/Extendable.mdx

@@ -0,0 +1,6 @@
+import { Meta, Markdown } from '@storybook/blocks';
+import Extendable from '../../../docs/Extendable.md?raw';
+
+<Meta title="Usage/Extending the library" />
+
+<Markdown>{Extendable}</Markdown>

stories/getting-started/Usage/ScopedElements.mdx

@@ -2,7 +2,7 @@ import { Meta, Markdown } from "@storybook/blocks";
 import ScopedElements from "../../../docs/ScopedElements.md?raw";
 import { getCustomElements } from "@storybook/web-components";
 
-<Meta title="Getting Started/Usage/Scoped Elements" />
+<Meta title="Usage/Scoped Elements" />
 
 <Markdown>{ScopedElements}</Markdown>
 

stories/getting-started/Usage/Slots.mdx

@@ -1,6 +1,6 @@
 import { Meta, Markdown } from '@storybook/blocks';
 import Slots from '../../../docs/Slots.md?raw';
 
-<Meta title="Getting Started/Usage/Slots" />
+<Meta title="Usage/Slots" />
 
 <Markdown>{Slots}</Markdown>

stories/getting-started/Usage/Stylings.mdx

@@ -1,6 +1,6 @@
 import { Meta, Markdown } from "@storybook/blocks";
 import Stylings from '../../../docs/Stylings.md?raw';
 
-<Meta title="Getting Started/Usage/Stylings" />
+<Meta title="Usage/Styles and Theming" />
 
 <Markdown>{Stylings}</Markdown>