diff --git a/apps/docs/package.json b/apps/docs/package.json index 4243bac..3db11b2 100644 --- a/apps/docs/package.json +++ b/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" } } diff --git a/apps/docs/src/components/burger/burger.css b/apps/docs/src/components/burger/burger.css index 51fd8b3..430cba6 100644 --- a/apps/docs/src/components/burger/burger.css +++ b/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] { diff --git a/apps/docs/src/components/burger/burger.script.ts b/apps/docs/src/components/burger/burger.script.ts index 040b75f..cb477ae 100644 --- a/apps/docs/src/components/burger/burger.script.ts +++ b/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); } } diff --git a/apps/docs/src/components/code-block/code-block.css b/apps/docs/src/components/code-block/code-block.css index fb8e250..6bb2a36 100644 --- a/apps/docs/src/components/code-block/code-block.css +++ b/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; } diff --git a/apps/docs/src/components/code-block/code-block.kita.tsx b/apps/docs/src/components/code-block/code-block.kita.tsx index 80f2827..9f7151c 100644 --- a/apps/docs/src/components/code-block/code-block.kita.tsx +++ b/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(/]*>([\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
{safeHtml}
; + return
{safeHtml as 'safe'}
; }; CodeBlock.config = { importMeta: import.meta, dependencies: { stylesheets: ['./code-block.css'] } }; diff --git a/apps/docs/src/components/header/header.css b/apps/docs/src/components/header/header.css index 42220f3..648a408 100644 --- a/apps/docs/src/components/header/header.css +++ b/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 { diff --git a/apps/docs/src/components/header/header.kita.tsx b/apps/docs/src/components/header/header.kita.tsx index a3b7714..05d808e 100644 --- a/apps/docs/src/components/header/header.kita.tsx +++ b/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 = ({ navigation }) => {
-

v 0.1.4

+

v {rootJson.version as 'safe'}

diff --git a/apps/docs/src/components/navigation/navigation.kita.tsx b/apps/docs/src/components/navigation/navigation.kita.tsx index 76bd932..e8e4b25 100644 --- a/apps/docs/src/components/navigation/navigation.kita.tsx +++ b/apps/docs/src/components/navigation/navigation.kita.tsx @@ -24,4 +24,9 @@ export const Navigation: EcoComponent = ({ items }) => { ); }; -Navigation.config = { importMeta: import.meta, dependencies: { stylesheets: ['./navigation.css'] } }; +Navigation.config = { + importMeta: import.meta, + dependencies: { + stylesheets: ['./navigation.css'], + }, +}; diff --git a/apps/docs/src/components/radiant-todo-app/radiant-todo-app.css b/apps/docs/src/components/radiant-todo-app/radiant-todo-app.css index bb66094..fc5ddbc 100644 --- a/apps/docs/src/components/radiant-todo-app/radiant-todo-app.css +++ b/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; diff --git a/apps/docs/src/layouts/base-layout/base-layout.css b/apps/docs/src/layouts/base-layout/base-layout.css index 91147f9..577bdfe 100644 --- a/apps/docs/src/layouts/base-layout/base-layout.css +++ b/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; } diff --git a/apps/docs/src/layouts/base-layout/base-layout.kita.tsx b/apps/docs/src/layouts/base-layout/base-layout.kita.tsx index 6e308e1..f20e088 100644 --- a/apps/docs/src/layouts/base-layout/base-layout.kita.tsx +++ b/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; }; diff --git a/apps/docs/src/layouts/docs-layout/docs-layout.css b/apps/docs/src/layouts/docs-layout/docs-layout.css index 2d8d390..5db530d 100644 --- a/apps/docs/src/layouts/docs-layout/docs-layout.css +++ b/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 { diff --git a/apps/docs/src/layouts/docs-layout/docs-layout.kita.tsx b/apps/docs/src/layouts/docs-layout/docs-layout.kita.tsx index 156e536..22f5a75 100644 --- a/apps/docs/src/layouts/docs-layout/docs-layout.kita.tsx +++ b/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 ( -