feature: updated docs

apps/docs/package.json

@@ -15,7 +15,6 @@
 		"@ecopages/kitajs": "npm:@jsr/ecopages__kitajs@latest",
 		"@ecopages/mdx": "npm:@jsr/ecopages__mdx@latest",
 		"@ecopages/scripts-injector": "^0.1.1",
-		"shiki": "^1.17.6",
-		"@shikijs/transformers": "^1.17.6"
+		"shiki": "^1.17.6"
 	}
 }

apps/docs/src/components/burger/burger.css

@@ -2,7 +2,7 @@
   @apply flex flex-col justify-between w-10 h-10 bg-none border-none cursor-pointer rounded-full px-2 py-3;
 
   &__line {
-    @apply w-full bg-black  h-0.5 pointer-events-none transition-transform transform-gpu;
+    @apply w-full bg-on-background  h-0.5 pointer-events-none transition-transform transform-gpu;
   }
 
   &[aria-expanded] {

apps/docs/src/components/burger/burger.script.ts

@@ -1,13 +1,37 @@
 import { RadiantElement } from '@ecopages/radiant/core';
 import { customElement } from '@ecopages/radiant/decorators/custom-element';
 import { onEvent } from '@ecopages/radiant/decorators/on-event';
+import { query } from '@ecopages/radiant/decorators/query';
 
 @customElement('radiant-burger')
 export class RadiantCounter extends RadiantElement {
+  @query({ selector: 'button' }) burger!: HTMLButtonElement;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.onResizeReset = this.onResizeReset.bind(this);
+  }
+
   @onEvent({ selector: 'button', type: 'click' })
-  toggleMenu(event: Event) {
-    (event.target as HTMLButtonElement).toggleAttribute('aria-expanded');
+  toggleMenu() {
+    this.burger.toggleAttribute('aria-expanded');
+    const isExpanded = this.burger.hasAttribute('aria-expanded');
     window.dispatchEvent(new CustomEvent('toggle-menu'));
+    document.body.classList.toggle('overflow-hidden', isExpanded);
+    if (isExpanded) {
+      window.addEventListener('resize', this.onResizeReset, { once: true });
+    }
+  }
+
+  onResizeReset() {
+    this.burger.removeAttribute('aria-expanded');
+    document.body.classList.remove('overflow-hidden');
+    window.dispatchEvent(new CustomEvent('close-menu'));
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener('resize', this.onResizeReset);
   }
 }
 

apps/docs/src/components/code-block/code-block.css

@@ -1,6 +1,3 @@
 .code-block {
-  @apply my-8 rounded-md [&_pre.shiki]:col-span-4 [&_pre.shiki]:col-start-2 [&_pre.shiki]:whitespace-pre-wrap [&_pre.shiki]:p-4 [&_pre.shiki]:rounded-md;
-  .tab {
-    @apply p-4;
-  }
+  @apply my-8 rounded-md [&_pre.shiki]:col-span-4 [&_pre.shiki]:col-start-2 [&_pre.shiki]:whitespace-pre-wrap [&_pre.shiki]:p-4 [&_pre.shiki]:rounded-md [&_pre.shiki]:overflow-scroll;
 }

apps/docs/src/components/code-block/code-block.kita.tsx

@@ -3,16 +3,33 @@ import { type BundledLanguage, type BundledTheme, codeToHtml } from 'shiki';
 
 export const CodeBlock: EcoComponent<{
   children?: string;
-  htmlString?: string;
+  code?: string;
   lang?: BundledLanguage;
   theme?: BundledTheme;
-}> = async ({ children, htmlString, lang = 'typescript', theme = 'dracula' }) => {
-  const safeHtml = await codeToHtml(children || htmlString || '', {
-    lang,
+}> = async ({ children, code, lang, theme = 'catppuccin-mocha' }) => {
+  const childrenOrCode = children || code;
+  if (!childrenOrCode) throw new Error('No code provided');
+
+  const getCodeLanguageFromString = (code: string) => {
+    const match = code.match(/class="language-(\w+)"/);
+    return match ? match[1] : 'typescript';
+  };
+
+  const getCodeWithinCodeTag = (code: string) => {
+    const match = code.match(/<code[^>]*>([\s\S]*?)<\/code>/);
+    return match ? match[1] : code;
+  };
+
+  const language = lang || getCodeLanguageFromString(childrenOrCode);
+
+  const unformattedCode = getCodeWithinCodeTag(childrenOrCode);
+
+  const safeHtml = await codeToHtml(unformattedCode, {
+    lang: language,
     theme,
   });
 
-  return <div class="code-block">{safeHtml}</div>;
+  return <div class="code-block">{safeHtml as 'safe'}</div>;
 };
 
 CodeBlock.config = { importMeta: import.meta, dependencies: { stylesheets: ['./code-block.css'] } };

apps/docs/src/components/header/header.css

@@ -1,5 +1,5 @@
 .header {
-  @apply bg-background-accent text-on-background-accent shadow-sm;
+  @apply bg-background-accent text-on-background-accent shadow-sm sticky top-0;
   &__inner {
     @apply px-4 py-3 container mx-auto flex items-center justify-between;
     &-left-side {

apps/docs/src/components/header/header.kita.tsx

@@ -2,6 +2,7 @@ import { Burger } from '@/components/burger';
 import { Logo } from '@/components/logo';
 import { Navigation, type NavigationProps } from '@/components/navigation';
 import type { EcoComponent } from '@ecopages/core';
+import rootJson from '../../../../../packages/radiant/package.json';
 
 export type HeaderProps = {
   navigation: NavigationProps;
@@ -14,7 +15,7 @@ export const Header: EcoComponent<HeaderProps> = ({ navigation }) => {
         <div class="header__inner-left-side">
           <Burger class="md:hidden" />
           <Logo href="/" target="_self" title="Radiant" />
-          <p class="version">v 0.1.4</p>
+          <p class="version">v {rootJson.version as 'safe'}</p>
         </div>
         <Navigation {...navigation} />
       </div>

apps/docs/src/components/navigation/navigation.kita.tsx

@@ -24,4 +24,9 @@ export const Navigation: EcoComponent<NavigationProps> = ({ items }) => {
   );
 };
 
-Navigation.config = { importMeta: import.meta, dependencies: { stylesheets: ['./navigation.css'] } };
+Navigation.config = {
+  importMeta: import.meta,
+  dependencies: {
+    stylesheets: ['./navigation.css'],
+  },
+};

apps/docs/src/components/radiant-todo-app/radiant-todo-app.css

@@ -48,7 +48,8 @@
     }
   }
 
-  p&__count {
+  p,
+  &__count {
     @apply flex w-full gap-1 m-0 text-sm text-gray-700;
     & span {
       @apply font-semibold;

apps/docs/src/layouts/base-layout/base-layout.css

@@ -1,3 +1,3 @@
 main {
-  @apply p-6 md:p-8 container mx-auto overflow-x-hidden;
+  @apply container mx-auto w-screen;
 }

apps/docs/src/layouts/base-layout/base-layout.kita.tsx

@@ -2,7 +2,7 @@ import { Header } from '@/components/header';
 import type { EcoComponent } from '@ecopages/core';
 
 export type BaseLayoutProps = {
-  children: Html.Children;
+  children: JSX.Element;
   class?: string;
 };
 

apps/docs/src/layouts/docs-layout/docs-layout.css

@@ -1,7 +1,9 @@
 .docs-layout {
-  @apply grid grid-cols-[auto,1fr];
+  @apply md:grid md:grid-cols-[auto,1fr];
   .docs-layout__aside {
-    @apply pr-6 md:pr-8 border-r border-r-background-accent mr-8;
+    @apply fixed top-16 h-[calc(100svh_-_4rem)] md:sticky;
+    @apply bg-background p-6 md:p-8 border-r border-r-background-accent;
+
     ul,
     ol {
       @apply list-none p-0;
@@ -13,10 +15,7 @@
   }
 
   .docs-layout__content {
-    @apply px-6 md:px-12;
-    &.without-aside {
-      @apply px-0;
-    }
+    @apply px-6 md:px-12 py-4;
   }
 
   .docs-layout__nav-group {

apps/docs/src/layouts/docs-layout/docs-layout.kita.tsx

@@ -4,13 +4,13 @@ import { BaseLayout } from '@/layouts/base-layout';
 import type { EcoComponent } from '@ecopages/core';
 
 export type DocsLayoutProps = {
-  children: Html.Children;
+  children: JSX.Element;
   class?: string;
 };
 
 const DocsNavigation = () => {
   return (
-    <nav aria-label="Features">
+    <nav aria-label="Main Navigation">
       <ul>
         {docsConfig.documents.map((group) => (
           <li>
@@ -43,10 +43,12 @@ const DocsNavigation = () => {
 export const DocsLayout: EcoComponent<DocsLayoutProps> = ({ children }) => {
   return (
     <BaseLayout class="docs-layout prose">
-      <radiant-navigation class="docs-layout__aside hidden md:block">
-        <DocsNavigation />
-      </radiant-navigation>
-      <div class="docs-layout__content without-aside">{children}</div>
+      <>
+        <radiant-navigation class="docs-layout__aside hidden md:block">
+          <DocsNavigation />
+        </radiant-navigation>
+        <div class="docs-layout__content">{children}</div>
+      </>
     </BaseLayout>
   );
 };

apps/docs/src/layouts/docs-layout/docs-layout.script.ts

@@ -1,4 +1,3 @@
-import { query } from '@ecopages/radiant';
 import { RadiantElement } from '@ecopages/radiant/core';
 import { customElement } from '@ecopages/radiant/decorators/custom-element';
 

apps/docs/src/pages/index.kita.tsx

@@ -1,6 +1,6 @@
 import { DocsLayout } from '@/layouts/docs-layout';
 import Introduction from '@/pages/docs/getting-started/introduction.mdx';
-import type { EcoPage, GetMetadata } from '@ecopages/core';
+import type { EcoPage } from '@ecopages/core';
 
 const HomePage: EcoPage = () => {
   return (
@@ -13,7 +13,6 @@ const HomePage: EcoPage = () => {
 HomePage.config = {
   importMeta: import.meta,
   dependencies: {
-    stylesheets: ['./index.css'],
     components: [DocsLayout],
   },
 };

apps/docs/src/styles/tailwind.css

@@ -103,50 +103,49 @@ body {
   @apply bg-background text-on-background min-h-[100svh];
 }
 
-.prose h1 {
-  @apply text-4xl font-bold text-on-background-accent my-6;
-}
-
-.prose h2 {
-  @apply text-3xl font-bold text-on-background-accent my-6;
-}
-
-.prose h3 {
-  @apply text-2xl font-bold text-on-background-accent my-5;
-}
-
-.prose h4 {
-  @apply text-xl font-bold text-on-background-accent my-5;
-}
-
-.prose h5 {
-  @apply text-lg font-bold text-on-background-accent my-4;
-}
-
-.prose h6 {
-  @apply text-base font-bold text-on-background-accent my-4;
-}
-
-.prose p {
-  @apply text-base text-on-background my-4;
-}
-
-.prose a {
-  @apply text-link underline;
-}
-
-.prose ul,
-.prose.prose ol {
-  @apply list-disc pl-8 my-4;
-}
-
-.prose code {
-  @apply bg-background-code text-sm text-on-background-code rounded-md;
-}
-
-.prose pre {
-}
-
-.prose pre > code {
-  @apply bg-transparent text-inherit rounded-md my-8;
+.prose {
+  h1 {
+    @apply text-4xl font-bold text-on-background-accent my-6;
+  }
+
+  h2 {
+    @apply text-3xl font-bold text-on-background-accent my-6;
+  }
+
+  h3 {
+    @apply text-2xl font-bold text-on-background-accent my-5;
+  }
+
+  h4 {
+    @apply text-xl font-bold text-on-background-accent my-5;
+  }
+
+  h5 {
+    @apply text-lg font-bold text-on-background-accent my-4;
+  }
+
+  h6 {
+    @apply text-base font-bold text-on-background-accent my-4;
+  }
+
+  p {
+    @apply text-base text-on-background my-4;
+  }
+
+  a {
+    @apply text-link underline;
+  }
+
+  ul,
+  ol {
+    @apply list-disc pl-8 my-4;
+  }
+
+  code {
+    @apply bg-background-code text-sm text-on-background-code rounded-md;
+  }
+
+  pre > code {
+    @apply bg-transparent text-inherit rounded-md my-8;
+  }
 }

apps/docs/tailwind.config.ts

@@ -24,7 +24,7 @@ const config: Config = {
     },
   },
   plugins: [],
-  safelist: ['hidden'],
+  safelist: ['hidden', 'overflow-hidden'],
 };
 
 export default config;

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+	"$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
 	"organizeImports": {
 		"enabled": true
 	},

playground/vite/src/components/radiant-todo-app/radiant-todo-app.css

@@ -48,7 +48,8 @@
     }
   }
 
-  p&__count {
+  p,
+  &__count {
     @apply flex w-full gap-1 m-0 text-sm text-gray-700;
     & span {
       @apply font-semibold;