chorama 0.0.0

package/website/pages/examples/index.astro

@@ -0,0 +1,98 @@
+---
+import { getCollection } from "astro:content";
+import DocLayout from "@layouts/DocLayout.astro";
+import { sidebarTabs } from "@configs";
+import { withBase } from "../../utils/url";
+
+const entries = await getCollection("examples");
+const splitCamelCase = (value: string) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2");
+const formatCategory = (value: string) => splitCamelCase(value).replaceAll("/", " / ");
+
+const examples = entries
+  .map((entry) => ({
+    slug: entry.id,
+    title: splitCamelCase(entry.data.title),
+    directory: entry.id.split("/").slice(0, -1).join("/"),
+    description: entry.data.description
+  }))
+  .sort((a, b) => {
+    const dirCompare = a.directory.localeCompare(b.directory);
+    if (dirCompare !== 0) return dirCompare;
+    return a.title.localeCompare(b.title);
+  }, {});
+
+const groupedExamples = examples.reduce<Record<string, typeof examples>>((acc, example) => {
+  const key = example.directory || "uncategorized";
+  if (!acc[key]) acc[key] = [];
+  acc[key].push(example);
+  return acc;
+}, {});
+
+const categories = Object.entries(groupedExamples);
+---
+
+<DocLayout title="Examples | Chorama" tabs={sidebarTabs}>
+  <h1>Examples</h1>
+  <p>Browse runnable examples from the repository.</p>
+
+  {categories.map(([category, categoryExamples]) => (
+    <section class="category-section">
+      <h2>{formatCategory(category)}</h2>
+      <div class="examples-grid">
+        {categoryExamples.map((example) => (
+          <a class="example-card" href={withBase(`/examples/${example.slug}`)}>
+            <img src={withBase("/images/uv.jpg")} alt="" loading="lazy" />
+            <span>{example.title}</span>
+          </a>
+        ))}
+      </div>
+    </section>
+  ))}
+</DocLayout>
+
+<style>
+  .category-section + .category-section {
+    margin-top: 2rem;
+  }
+
+  .category-section h2 {
+    margin-bottom: 0.75rem;
+  }
+
+  .examples-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 1rem;
+    margin-top: 1.5rem;
+  }
+
+  .example-card {
+    position: relative;
+    display: block;
+    aspect-ratio: 4 / 3;
+    overflow: hidden;
+    border: 1px solid #2f333b;
+    border-radius: 10px;
+    background: #ffffff;
+    text-decoration: none;
+  }
+
+  .example-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .example-card span {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0.55rem 0.75rem;
+    text-align: center;
+    color: #ffffff;
+    font-weight: 700;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.15));
+  }
+</style>

package/website/pages/examples/samples/[...slug].astro

@@ -0,0 +1,17 @@
+---
+import { getCollection } from "astro:content";
+import Example from "@layouts/Example.astro";
+
+export async function getStaticPaths() {
+  const entries = await getCollection("examples");
+
+  return entries.map((entry) => ({
+    params: { slug: entry.id },
+    props: { entry }
+  }));
+}
+
+const { entry } = Astro.props;
+---
+
+<Example title={entry.data.title} source={entry.data.source} />

package/website/pages/guide/[slug].astro

@@ -0,0 +1,30 @@
+---
+import { getCollection, render } from "astro:content";
+import { sidebarTabs } from "@configs";
+import DocLayout from "@layouts/DocLayout.astro";
+
+export async function getStaticPaths() {
+  const entries = await getCollection("guide");
+
+  return entries.flatMap((entry) => {
+    const raw = entry.slug ?? entry.id;
+    const cleaned = raw.replace(/\.md$/, "");
+
+    if (cleaned === "index") {
+      return [];
+    }
+
+    return [{
+      params: { slug: cleaned },
+      props: { entry }
+    }];
+  });
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+---
+
+<DocLayout title={`${entry.data.title} | Chorama`} tabs={sidebarTabs}>
+  <Content />
+</DocLayout>

package/website/pages/guide/index.astro

@@ -0,0 +1,21 @@
+---
+import { getCollection, render } from "astro:content";
+import { sidebarTabs } from "@configs";
+import DocLayout from "@layouts/DocLayout.astro";
+
+const guides = await getCollection("guide");
+const entry = guides.find((guide) => {
+  const raw = guide.slug ?? guide.id;
+  return raw.replace(/\.md$/, "") === "index";
+});
+
+if (!entry) {
+  throw new Error('Missing guide index entry');
+}
+
+const { Content } = await render(entry);
+---
+
+<DocLayout title={`${entry.data.title} | Chorama`} tabs={sidebarTabs}>
+  <Content />
+</DocLayout>

package/website/pages/index.astro

@@ -0,0 +1,9 @@
+---
+import { sidebarTabs } from "@configs";
+import DocLayout from "@layouts/DocLayout.astro";
+import Content from "../../README.md";
+---
+
+<DocLayout title="Chorama" tabs={sidebarTabs}>
+  <Content />
+</DocLayout>

package/website/plugins/remark-link-base.js

@@ -0,0 +1,23 @@
+import { withBase } from "../utils/url";
+
+/**
+ * @param {{ type?: any; url?: any; children?: any; }} node
+ */
+function visit(node) {
+  if (node.type === "link" || node.type === "image") {
+    node.url = withBase(node.url);
+  }
+
+  const { children } = node;
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      visit(child);
+    }
+  }
+}
+
+export default function remarkLinkBase() {
+  return (/** @type {{ type?: any; url?: any; children?: any; }} */ tree) => {
+    visit(tree);
+  };
+}

package/website/utils/url.ts

@@ -0,0 +1,30 @@
+function normalizeBase(value: string): string {
+  let normalized = value.trim();
+  if (!normalized.startsWith("/")) normalized = `/${normalized}`;
+  if (!normalized.endsWith("/")) normalized = `${normalized}/`;
+  return normalized;
+}
+
+const base = normalizeBase(process.env.BASE || "/");
+
+export function withBase(path: string): string {
+  let resolvedPath = path;
+  if (path.startsWith("//")) {
+    const url = new URL(`https:${path}`);
+    resolvedPath = `${url.pathname}${url.search}${url.hash}`;
+  } else if (/^[a-z]+:/i.test(path)) {
+    const url = new URL(path);
+    resolvedPath = `${url.pathname}${url.search}${url.hash}` || "/";
+  }
+
+  const [withoutHash, hash = ""] = resolvedPath.split("#", 2);
+  const [withoutQuery, query = ""] = withoutHash.split("?", 2);
+  const cleanedPath = withoutQuery
+    .replace(/^(\.\/|\.\.\/)+/, "")
+    .replace(/^\/+/, "");
+  const rootedPath = cleanedPath ? `${base}${cleanedPath}` : base;
+  const queryPart = query ? `?${query}` : "";
+  const hashPart = hash ? `#${hash}` : "";
+  
+  return `${rootedPath}${queryPart}${hashPart}`;
+}