coding-friend-cli 1.0.0

package/lib/learn-host/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "coding-friend-learn-host",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "prebuild": "tsx scripts/build-search-index.ts",
+    "build": "npm run prebuild && next build",
+    "start": "npx serve out"
+  },
+  "dependencies": {
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.0",
+    "remark-gfm": "^4.0.0",
+    "rehype-highlight": "^7.0.0",
+    "gray-matter": "^4.0.3",
+    "next-themes": "^0.4.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/typography": "^0.5.0",
+    "tsx": "^4.0.0"
+  }
+}

package/lib/learn-host/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/lib/learn-host/scripts/build-search-index.ts

@@ -0,0 +1,11 @@
+import fs from "node:fs";
+import path from "node:path";
+import { buildSearchIndex } from "../src/lib/search";
+
+const index = buildSearchIndex();
+const outPath = path.join(process.cwd(), "src/app/search/search-index.json");
+
+fs.mkdirSync(path.dirname(outPath), { recursive: true });
+fs.writeFileSync(outPath, JSON.stringify(index, null, 2));
+
+console.log(`Search index built: ${index.length} entries -> ${outPath}`);

package/lib/learn-host/src/app/[category]/[slug]/page.tsx

@@ -0,0 +1,61 @@
+import { getAllDocs, getDocBySlug } from "@/lib/docs";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import MarkdownRenderer from "@/components/MarkdownRenderer";
+import TagBadge from "@/components/TagBadge";
+import { notFound } from "next/navigation";
+
+export async function generateStaticParams() {
+  return getAllDocs().map((d) => ({
+    category: d.category,
+    slug: d.slug,
+  }));
+}
+
+export const dynamicParams = false;
+
+export default async function DocPage({
+  params,
+}: {
+  params: Promise<{ category: string; slug: string }>;
+}) {
+  const { category, slug } = await params;
+  const doc = getDocBySlug(category, slug);
+  if (!doc) notFound();
+
+  const categoryDisplay = category.replace(/[_-]/g, " ");
+
+  return (
+    <article>
+      <Breadcrumbs
+        crumbs={[
+          { label: categoryDisplay, href: `/${category}/` },
+          { label: doc.frontmatter.title },
+        ]}
+      />
+
+      <header className="mb-8">
+        <h1 className="text-3xl font-bold mb-2">{doc.frontmatter.title}</h1>
+        <div className="flex flex-wrap items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
+          <span className="capitalize px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded">
+            {categoryDisplay}
+          </span>
+          {doc.frontmatter.created && (
+            <span>Created: {doc.frontmatter.created}</span>
+          )}
+          {doc.frontmatter.updated && (
+            <span>Updated: {doc.frontmatter.updated}</span>
+          )}
+        </div>
+        {doc.frontmatter.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mt-3">
+            {doc.frontmatter.tags.map((tag) => (
+              <TagBadge key={tag} tag={tag} />
+            ))}
+          </div>
+        )}
+      </header>
+
+      <MarkdownRenderer content={doc.content} />
+    </article>
+  );
+}

package/lib/learn-host/src/app/[category]/page.tsx

@@ -0,0 +1,35 @@
+import { getAllCategories, getDocsByCategory } from "@/lib/docs";
+import DocCard from "@/components/DocCard";
+import Breadcrumbs from "@/components/Breadcrumbs";
+
+export async function generateStaticParams() {
+  return getAllCategories().map((c) => ({ category: c.name }));
+}
+
+export const dynamicParams = false;
+
+export default async function CategoryPage({
+  params,
+}: {
+  params: Promise<{ category: string }>;
+}) {
+  const { category } = await params;
+  const docs = getDocsByCategory(category);
+  const displayName = category.replace(/[_-]/g, " ");
+
+  return (
+    <div>
+      <Breadcrumbs crumbs={[{ label: displayName }]} />
+      <h1 className="text-2xl font-bold capitalize mb-1">{displayName}</h1>
+      <p className="text-gray-500 dark:text-gray-400 mb-6">
+        {docs.length} {docs.length === 1 ? "doc" : "docs"}
+      </p>
+
+      <div className="grid gap-3">
+        {docs.map((doc) => (
+          <DocCard key={doc.slug} doc={doc} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/lib/learn-host/src/app/globals.css

@@ -0,0 +1,31 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary: #3b82f6;
+  --color-primary-dark: #60a5fa;
+  --color-surface: #ffffff;
+  --color-surface-dark: #111827;
+  --color-surface-secondary: #f9fafb;
+  --color-surface-secondary-dark: #1f2937;
+  --color-border: #e5e7eb;
+  --color-border-dark: #374151;
+  --color-text: #111827;
+  --color-text-dark: #f9fafb;
+  --color-text-muted: #6b7280;
+  --color-text-muted-dark: #9ca3af;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Syntax highlighting */
+pre code.hljs {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.7;
+}

package/lib/learn-host/src/app/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { ThemeProvider } from "next-themes";
+import { getAllCategories } from "@/lib/docs";
+import Sidebar from "@/components/Sidebar";
+import MobileNav from "@/components/MobileNav";
+import "./globals.css";
+import "highlight.js/styles/github-dark.css";
+
+export const metadata: Metadata = {
+  title: "Learning Notes",
+  description: "Personal learning knowledge base",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const categories = getAllCategories();
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <MobileNav categories={categories} />
+          <div className="flex">
+            <Sidebar categories={categories} />
+            <main className="flex-1 min-h-screen p-6 md:p-8 max-w-4xl">
+              {children}
+            </main>
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/lib/learn-host/src/app/page.tsx

@@ -0,0 +1,63 @@
+import { getAllCategories, getAllDocs, getAllTags } from "@/lib/docs";
+import DocCard from "@/components/DocCard";
+import TagBadge from "@/components/TagBadge";
+import Link from "next/link";
+
+export default function HomePage() {
+  const categories = getAllCategories();
+  const docs = getAllDocs();
+  const tags = getAllTags();
+  const recentDocs = docs.slice(0, 10);
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-2">Learning Notes</h1>
+      <p className="text-gray-500 dark:text-gray-400 mb-8">
+        {docs.length} docs across {categories.length} categories
+      </p>
+
+      {/* Categories */}
+      <section className="mb-8">
+        <h2 className="text-lg font-semibold mb-3">Categories</h2>
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+          {categories.map((cat) => (
+            <Link
+              key={cat.name}
+              href={`/${cat.name}/`}
+              className="p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-600 transition-colors"
+            >
+              <div className="font-medium capitalize text-gray-900 dark:text-gray-100">
+                {cat.name.replace(/[_-]/g, " ")}
+              </div>
+              <div className="text-sm text-gray-500 dark:text-gray-400">
+                {cat.docCount} {cat.docCount === 1 ? "doc" : "docs"}
+              </div>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {/* Tags */}
+      {tags.length > 0 && (
+        <section className="mb-8">
+          <h2 className="text-lg font-semibold mb-3">Tags</h2>
+          <div className="flex flex-wrap gap-2">
+            {tags.slice(0, 20).map(({ tag }) => (
+              <TagBadge key={tag} tag={tag} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Recent Docs */}
+      <section>
+        <h2 className="text-lg font-semibold mb-3">Recently Updated</h2>
+        <div className="grid gap-3">
+          {recentDocs.map((doc) => (
+            <DocCard key={`${doc.category}/${doc.slug}`} doc={doc} />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

package/lib/learn-host/src/app/search/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
+import type { SearchIndexEntry } from "@/lib/types";
+
+// Search index embedded at build time
+import searchIndexData from "./search-index.json";
+
+function SearchContent() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("q") ?? "";
+  const [query, setQuery] = useState(initialQuery);
+  const [results, setResults] = useState<SearchIndexEntry[]>([]);
+
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([]);
+      return;
+    }
+    const lower = query.toLowerCase();
+    const filtered = (searchIndexData as SearchIndexEntry[]).filter(
+      (entry) =>
+        entry.title.toLowerCase().includes(lower) ||
+        entry.tags.some((t) => t.toLowerCase().includes(lower)) ||
+        entry.excerpt.toLowerCase().includes(lower) ||
+        entry.category.toLowerCase().includes(lower),
+    );
+    setResults(filtered);
+  }, [query]);
+
+  useEffect(() => {
+    setQuery(initialQuery);
+  }, [initialQuery]);
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Search</h1>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search docs..."
+        className="w-full px-4 py-2 mb-6 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        autoFocus
+      />
+
+      {query.trim() && (
+        <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+          {results.length} {results.length === 1 ? "result" : "results"} for &ldquo;{query}&rdquo;
+        </p>
+      )}
+
+      <div className="grid gap-3">
+        {results.map((entry) => (
+          <a
+            key={`${entry.category}/${entry.slug}`}
+            href={`/${entry.category}/${entry.slug}/`}
+            className="block p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-600 hover:shadow-sm transition-all bg-white dark:bg-gray-800/50"
+          >
+            <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">
+              {entry.title}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-2 line-clamp-2">
+              {entry.excerpt}
+            </p>
+            <div className="flex items-center gap-2">
+              <span className="text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded capitalize">
+                {entry.category.replace(/[_-]/g, " ")}
+              </span>
+              {entry.tags.slice(0, 3).map((tag) => (
+                <span
+                  key={tag}
+                  className="text-xs px-2 py-0.5 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function SearchPage() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <SearchContent />
+    </Suspense>
+  );
+}

package/lib/learn-host/src/app/search/search-index.json

@@ -0,0 +1,42 @@
+[
+  {
+    "slug": "claude-code-plugin-hooks-system",
+    "category": "Tools_Workflow",
+    "title": "Claude Code Plugin & Hooks System",
+    "tags": [
+      "claude-code",
+      "plugins",
+      "hooks",
+      "configuration"
+    ],
+    "excerpt": "Claude Code has a plugin system that can load hooks (scripts that run on specific events like `SessionStart`, `PreToolUse`, etc.) from **multiple sources simult..."
+  },
+  {
+    "slug": "tauri-desktop-app-gotchas",
+    "category": "Mobile_Dev",
+    "title": "Tauri Desktop App Gotchas",
+    "tags": [
+      "tauri",
+      "desktop",
+      "webview",
+      "sidecar",
+      "macos",
+      "gatekeeper",
+      "race-condition"
+    ],
+    "excerpt": "Tổng hợp các vấn đề thường gặp khi build và distribute desktop app bằng Tauri v2, đặc biệt trên macOS. **What:** Khi user tải app `.dmg` từ GitHub Releases và c..."
+  },
+  {
+    "slug": "typescript-type-casting-patterns",
+    "category": "Programming_Languages",
+    "title": "TypeScript Type Casting Patterns & Gotchas",
+    "tags": [
+      "typescript",
+      "type-casting",
+      "type-narrowing",
+      "window",
+      "strict-mode"
+    ],
+    "excerpt": "Tổng hợp các pattern cast type phổ biến và gotchas khi dùng TypeScript strict mode. **What:** Khi TypeScript không cho phép cast trực tiếp giữa 2 type vì chúng ..."
+  }
+]

package/lib/learn-host/src/components/Breadcrumbs.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link";
+
+interface Crumb {
+  label: string;
+  href?: string;
+}
+
+export default function Breadcrumbs({ crumbs }: { crumbs: Crumb[] }) {
+  return (
+    <nav className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
+      <Link href="/" className="hover:text-blue-600 dark:hover:text-blue-400">
+        Home
+      </Link>
+      {crumbs.map((crumb, i) => (
+        <span key={i} className="flex items-center gap-2">
+          <span>/</span>
+          {crumb.href ? (
+            <Link href={crumb.href} className="hover:text-blue-600 dark:hover:text-blue-400 capitalize">
+              {crumb.label}
+            </Link>
+          ) : (
+            <span className="text-gray-700 dark:text-gray-300">{crumb.label}</span>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}

package/lib/learn-host/src/components/DocCard.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import TagBadge from "./TagBadge";
+import type { DocMeta } from "@/lib/types";
+
+export default function DocCard({ doc }: { doc: DocMeta }) {
+  return (
+    <Link
+      href={`/${doc.category}/${doc.slug}/`}
+      className="block p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-600 hover:shadow-sm transition-all bg-white dark:bg-gray-800/50"
+    >
+      <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">
+        {doc.frontmatter.title}
+      </h3>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-2 line-clamp-2">
+        {doc.excerpt}
+      </p>
+      <div className="flex items-center justify-between">
+        <div className="flex gap-1 flex-wrap">
+          {doc.frontmatter.tags.slice(0, 3).map((tag) => (
+            <TagBadge key={tag} tag={tag} />
+          ))}
+          {doc.frontmatter.tags.length > 3 && (
+            <span className="text-xs text-gray-400">+{doc.frontmatter.tags.length - 3}</span>
+          )}
+        </div>
+        <span className="text-xs text-gray-400">
+          {doc.frontmatter.updated || doc.frontmatter.created}
+        </span>
+      </div>
+    </Link>
+  );
+}

package/lib/learn-host/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,13 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+
+export default function MarkdownRenderer({ content }: { content: string }) {
+  return (
+    <div className="prose prose-gray dark:prose-invert max-w-none prose-headings:scroll-mt-20 prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-code:before:content-none prose-code:after:content-none">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/lib/learn-host/src/components/MobileNav.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import type { CategoryInfo } from "@/lib/types";
+import SearchBar from "./SearchBar";
+import ThemeToggle from "./ThemeToggle";
+
+export default function MobileNav({ categories }: { categories: CategoryInfo[] }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="md:hidden">
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+        <Link href="/" className="font-bold text-gray-900 dark:text-gray-100">
+          Learning Notes
+        </Link>
+        <div className="flex items-center gap-2">
+          <ThemeToggle />
+          <button
+            onClick={() => setOpen(!open)}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
+            aria-label="Toggle menu"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              {open ? (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              )}
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {open && (
+        <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+          <SearchBar />
+          <nav className="mt-4 space-y-1">
+            {categories.map((cat) => (
+              <Link
+                key={cat.name}
+                href={`/${cat.name}/`}
+                onClick={() => setOpen(false)}
+                className="flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300"
+              >
+                <span className="capitalize">{cat.name.replace(/[_-]/g, " ")}</span>
+                <span className="text-xs text-gray-400">{cat.docCount}</span>
+              </Link>
+            ))}
+          </nav>
+        </div>
+      )}
+    </div>
+  );
+}

package/lib/learn-host/src/components/SearchBar.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function SearchBar() {
+  const [query, setQuery] = useState("");
+  const router = useRouter();
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (query.trim()) {
+      router.push(`/search/?q=${encodeURIComponent(query.trim())}`);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="relative">
+      <svg
+        className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      </svg>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search docs..."
+        className="w-full pl-10 pr-4 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+      />
+    </form>
+  );
+}

package/lib/learn-host/src/components/Sidebar.tsx

@@ -0,0 +1,44 @@
+import Link from "next/link";
+import type { CategoryInfo } from "@/lib/types";
+import ThemeToggle from "./ThemeToggle";
+import SearchBar from "./SearchBar";
+
+export default function Sidebar({ categories }: { categories: CategoryInfo[] }) {
+  const totalDocs = categories.reduce((sum, c) => sum + c.docCount, 0);
+
+  return (
+    <aside className="w-64 shrink-0 border-r border-gray-200 dark:border-gray-700 h-screen sticky top-0 overflow-y-auto bg-gray-50 dark:bg-gray-900 hidden md:block">
+      <div className="p-4">
+        <Link href="/" className="block mb-4">
+          <h1 className="text-lg font-bold text-gray-900 dark:text-gray-100">
+            Learning Notes
+          </h1>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {totalDocs} docs &middot; {categories.length} categories
+          </p>
+        </Link>
+
+        <SearchBar />
+
+        <nav className="mt-6 space-y-1">
+          {categories.map((cat) => (
+            <Link
+              key={cat.name}
+              href={`/${cat.name}/`}
+              className="flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 transition-colors"
+            >
+              <span className="capitalize">{cat.name.replace(/[_-]/g, " ")}</span>
+              <span className="text-xs text-gray-400 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                {cat.docCount}
+              </span>
+            </Link>
+          ))}
+        </nav>
+      </div>
+
+      <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-700">
+        <ThemeToggle />
+      </div>
+    </aside>
+  );
+}

package/lib/learn-host/src/components/TagBadge.tsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function TagBadge({ tag }: { tag: string }) {
+  return (
+    <Link
+      href={`/search/?q=${encodeURIComponent(tag)}`}
+      className="inline-block px-2 py-0.5 text-xs rounded-full bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors"
+    >
+      {tag}
+    </Link>
+  );
+}