feature(#23) Added docs using ecopages

Co-authored-by: Andrea Zanenghi <[email protected]>

.npmrc

@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io

apps/docs/.env.example

@@ -0,0 +1,2 @@
+ECOPAGES_BASE_URL=http://localhost:3000
+ECOPAGES_LOGGER_DEBUG=false

apps/docs/.gitignore

@@ -0,0 +1,27 @@
+# dependencies
+/node_modules
+
+# production
+.eco
+
+# build
+public/js
+
+# misc
+.DS_Store
+*.pem
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+**/*.trace
+**/*.zip
+**/*.tar.gz
+**/*.tgz
+**/*.log
+**/*.bun
+

apps/docs/.npmrc

@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io

apps/docs/README.md

@@ -0,0 +1,7 @@
+# Radiant Docs
+
+This documentation application serves as a comprehensive guide to the functionalities and operations of @ecopages/radiant.
+
+It encompasses valuable information detailing its usage and provides a thorough explanation of its working mechanisms.
+
+The aim is to offer users a clear understanding of how to effectively utilize @ecopages/radiant and leverage its capabilities to their full extent.

apps/docs/bunfig.toml

@@ -0,0 +1 @@
+preload = ["@ecopages/bun-postcss-loader", "@ecopages/bun-mdx-kitajs-loader"]

apps/docs/declarations.d.ts

@@ -0,0 +1,9 @@
+declare module '*.css' {
+  const styles: string;
+  export default styles;
+}
+
+declare module '*.mdx' {
+  let MDXComponent: (props: any) => JSX.Element;
+  export default MDXComponent;
+}

apps/docs/eco.config.ts

@@ -0,0 +1,17 @@
+import type { EcoPagesConfig } from '@ecopages/core';
+import { kitajsPlugin } from '@ecopages/kitajs';
+import { mdxPlugin } from '@ecopages/mdx';
+
+const config: EcoPagesConfig = {
+  rootDir: import.meta.dir,
+  baseUrl: import.meta.env.ECOPAGES_BASE_URL as string,
+  integrations: [kitajsPlugin(), mdxPlugin()],
+  defaultMetadata: {
+    title: 'Radiant | Docs',
+    description: 'Radiant is a minimalist web component library designed for simplicity and flexibility.',
+    image: 'public/assets/images/default-og.webp',
+    keywords: ['typescript', 'framework', 'static'],
+  },
+};
+
+export default config;

apps/docs/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "radiant-docs",
+	"private": true,
+	"scripts": {
+		"dev": "bun ../../node_modules/@ecopages/core/src/bin/ecopages.js dev",
+		"build": "bun ../../node_modules/@ecopages/core/src/bin/ecopages.js build",
+		"start": "bun ../../node_modules/@ecopages/core/src/bin/ecopages.js start",
+		"preview": "bun ../../node_modules/@ecopages/core/src/bin/ecopages.js preview"
+	},
+	"devDependencies": {
+		"@ecopages/core": "npm:@jsr/ecopages__core@latest",
+		"@ecopages/radiant": "^0.1.4",
+		"@ecopages/bun-mdx-kitajs-loader": "npm:@jsr/ecopages__bun-mdx-kitajs-loader@latest",
+		"@ecopages/bun-postcss-loader": "npm:@jsr/ecopages__bun-postcss-loader@latest",
+		"@ecopages/kitajs": "npm:@jsr/ecopages__kitajs@latest",
+		"@ecopages/mdx": "npm:@jsr/ecopages__mdx@latest",
+		"@ecopages/scripts-injector": "^0.1.1",
+		"shiki": "^1.1.2"
+	}
+}

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

@@ -0,0 +1,23 @@
+.burger {
+  @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;
+  }
+
+  &[aria-expanded] {
+    .burger__line {
+      &:nth-child(1) {
+        @apply transform rotate-45 translate-y-1.5;
+      }
+
+      &:nth-child(2) {
+        @apply opacity-0;
+      }
+
+      &:nth-child(3) {
+        @apply transform -rotate-45 -translate-y-2;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { EcoComponent } from '@ecopages/core';
+
+export const Burger: EcoComponent<{ class?: string }> = ({ class: className }) => {
+  return (
+    <radiant-burger class={className}>
+      <button type="button" class="burger" aria-label="Toggle Navigation">
+        <span class="burger__line"></span>
+        <span class="burger__line"></span>
+        <span class="burger__line"></span>
+      </button>
+    </radiant-burger>
+  );
+};
+
+Burger.config = {
+  importMeta: import.meta,
+  dependencies: {
+    stylesheets: ['./burger.css'],
+    scripts: ['./burger.script.ts'],
+  },
+};

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

@@ -0,0 +1,20 @@
+import { RadiantElement } from '@ecopages/radiant/core';
+import { customElement } from '@ecopages/radiant/decorators/custom-element';
+import { onEvent } from '@ecopages/radiant/decorators/on-event';
+
+@customElement('radiant-burger')
+export class RadiantCounter extends RadiantElement {
+  @onEvent({ selector: 'button', type: 'click' })
+  toggleMenu(event: Event) {
+    (event.target as HTMLButtonElement).toggleAttribute('aria-expanded');
+    window.dispatchEvent(new CustomEvent('toggle-menu'));
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'radiant-burger': HtmlTag;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export * from './burger.kita';

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

@@ -0,0 +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;
+}

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

@@ -0,0 +1,18 @@
+import type { EcoComponent } from '@ecopages/core';
+import { type BundledLanguage, type BundledTheme, codeToHtml } from 'shiki';
+
+export const CodeBlock: EcoComponent<{
+  children?: string;
+  htmlString?: string;
+  lang?: BundledLanguage;
+  theme?: BundledTheme;
+}> = async ({ children, htmlString, lang = 'typescript', theme = 'dracula' }) => {
+  const safeHtml = await codeToHtml(children || htmlString || '', {
+    lang,
+    theme,
+  });
+
+  return <div class="code-block">{safeHtml}</div>;
+};
+
+CodeBlock.config = { importMeta: import.meta, dependencies: { stylesheets: ['./code-block.css'] } };

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

@@ -0,0 +1,12 @@
+.header {
+  @apply bg-background-accent text-on-background-accent shadow-sm;
+  &__inner {
+    @apply px-4 py-3 container mx-auto flex items-center justify-between;
+    &-left-side {
+      @apply flex items-center gap-4;
+      .version {
+        @apply text-xs font-semibold bg-background text-on-background px-2 rounded-md;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import { Burger } from '@/components/burger';
+import { Logo } from '@/components/logo';
+import { Navigation, type NavigationProps } from '@/components/navigation';
+import type { EcoComponent } from '@ecopages/core';
+
+export type HeaderProps = {
+  navigation: NavigationProps;
+};
+
+export const Header: EcoComponent<HeaderProps> = ({ navigation }) => {
+  return (
+    <header class="header">
+      <div class="header__inner">
+        <div class="header__inner-left-side">
+          <Burger class="md:hidden" />
+          <Logo href="/" target="_self" title="Radiant" />
+          <p class="version">v 0.1.4</p>
+        </div>
+        <Navigation {...navigation} />
+      </div>
+    </header>
+  );
+};
+
+Header.config = {
+  importMeta: import.meta,
+  dependencies: {
+    stylesheets: ['./header.css'],
+    components: [Navigation, Logo, Burger],
+  },
+};

apps/docs/src/components/header/index.ts

@@ -0,0 +1 @@
+export * from './header.kita';

apps/docs/src/components/logo/index.ts

@@ -0,0 +1 @@
+export * from './logo.kita';

apps/docs/src/components/logo/logo.css

@@ -0,0 +1,6 @@
+.logo {
+  @apply font-mono font-bold text-xl px-4 py-1.5 -skew-x-6 transition-colors rounded-full;
+  &:hover {
+    @apply bg-background;
+  }
+}

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

@@ -0,0 +1,13 @@
+import type { EcoComponent } from '@ecopages/core';
+
+export type LogoProps = Pick<HTMLAnchorElement, 'href' | 'target' | 'title'>;
+
+export const Logo: EcoComponent<LogoProps> = (props) => {
+  return (
+    <a class="logo" {...props}>
+      Radiant
+    </a>
+  );
+};
+
+Logo.config = { importMeta: import.meta, dependencies: { stylesheets: ['./logo.css'] } };

apps/docs/src/components/navigation/index.ts

@@ -0,0 +1 @@
+export * from './navigation.kita';

apps/docs/src/components/navigation/navigation.css

@@ -0,0 +1,13 @@
+.navigation {
+  ul {
+    @apply flex gap-4;
+    li {
+      a {
+        @apply text-on-primary-container;
+        &:hover {
+          @apply text-on-primary-container/80;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { EcoComponent } from '@ecopages/core';
+
+export type NavigationProps = {
+  items: {
+    label: string | JSX.Element;
+    href: string;
+    target?: '_blank' | '_self';
+  }[];
+};
+
+export const Navigation: EcoComponent<NavigationProps> = ({ items }) => {
+  return (
+    <nav class="navigation" aria-label="Main">
+      <ul>
+        {items.map(({ label, href, target = '_self' }) => (
+          <li>
+            <a href={href} target={target}>
+              {label as 'safe'}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+Navigation.config = { importMeta: import.meta, dependencies: { stylesheets: ['./navigation.css'] } };

apps/docs/src/components/radiant-counter/index.ts

@@ -0,0 +1 @@
+export * from './radiant-counter.kita';

apps/docs/src/components/radiant-counter/radiant-counter.css

@@ -0,0 +1,10 @@
+radiant-counter {
+  @apply flex gap-4 items-center bg-indigo-200 rounded-md max-w-fit p-2;
+  [data-ref="increment"],
+  [data-ref="decrement"] {
+    @apply flex items-center justify-center bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white rounded-md w-8 h-8;
+  }
+  span {
+    @apply text-gray-900 font-bold p-2 bg-gray-100 min-w-20 h-10 flex items-center justify-center rounded-md;
+  }
+}

apps/docs/src/components/radiant-counter/radiant-counter.kita.tsx

@@ -0,0 +1,23 @@
+import type { RadiantCounterProps } from './radiant-counter.script';
+
+export const RadiantCounter = ({ value }: RadiantCounterProps) => {
+  return (
+    <radiant-counter value={value}>
+      <button type="button" data-ref="decrement" aria-label="Decrement">
+        -
+      </button>
+      <span data-ref="count">{value}</span>
+      <button type="button" data-ref="increment" aria-label="Increment">
+        +
+      </button>
+    </radiant-counter>
+  );
+};
+
+RadiantCounter.config = {
+  importMeta: import.meta,
+  dependencies: {
+    scripts: ['./radiant-counter.script.ts'],
+    stylesheets: ['./radiant-counter.css'],
+  },
+};

apps/docs/src/components/radiant-counter/radiant-counter.script.ts

@@ -0,0 +1,40 @@
+import { RadiantElement } from '@ecopages/radiant/core';
+import { customElement } from '@ecopages/radiant/decorators/custom-element';
+import { onEvent } from '@ecopages/radiant/decorators/on-event';
+import { onUpdated } from '@ecopages/radiant/decorators/on-updated';
+import { query } from '@ecopages/radiant/decorators/query';
+import { reactiveProp } from '@ecopages/radiant/decorators/reactive-prop';
+
+export type RadiantCounterProps = {
+  value?: number;
+};
+
+@customElement('radiant-counter')
+export class RadiantCounter extends RadiantElement {
+  @reactiveProp({ type: Number, reflect: true, defaultValue: 0 }) declare value: number;
+  @query({ ref: 'count' }) countText!: HTMLElement;
+
+  @onEvent({ ref: 'decrement', type: 'click' })
+  decrement() {
+    if (this.value > 0) this.value--;
+  }
+
+  @onEvent({ ref: 'increment', type: 'click' })
+  increment() {
+    this.value++;
+  }
+
+  @onUpdated('value')
+  updateCount() {
+    this.countText.textContent = this.value.toString();
+    this.dispatchEvent(new Event('change'));
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'radiant-counter': HtmlTag & RadiantCounterProps;
+    }
+  }
+}

apps/docs/src/components/radiant-todo-app/index.ts

@@ -0,0 +1 @@
+export * from './radiant-todo-app.kita';