coding-friend-cli 1.1.1 → 1.2.0

package/lib/learn-host/src/components/layout/Header.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import type { CategoryInfo } from "@/lib/types";
+import PagefindSearch from "@/components/PagefindSearch";
+import ThemeToggle from "@/components/ThemeToggle";
+
+export default function Header({ categories }: { categories: CategoryInfo[] }) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <header className="dark:bg-navy-900/80 sticky top-0 z-50 border-b border-slate-200 bg-white/80 px-4 backdrop-blur-lg md:px-6 dark:border-[#a0a0a01c]">
+      <div className="flex h-14 items-center justify-between">
+        {/* Left: Logo + Title */}
+        <Link href="/" className="flex shrink-0 items-center gap-2.5">
+          <Image src="/logo.svg" alt="Coding Friend" width={32} height={32} />
+          <span className="text-lg font-semibold text-slate-900 dark:text-white">
+            Learning Notes
+          </span>
+        </Link>
+
+        {/* Right */}
+        <div className="flex items-center gap-1 md:gap-3">
+          {/* Search */}
+          <PagefindSearch />
+
+          {/* Theme Toggle */}
+          <ThemeToggle />
+
+          {/* GitHub */}
+          <a
+            href="https://github.com/dinhanhthi/coding-friend"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hidden cursor-pointer rounded-lg p-2 text-slate-500 transition-colors duration-200 hover:text-slate-900 md:flex dark:text-slate-400 dark:hover:text-white"
+            aria-label="GitHub"
+          >
+            <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+            </svg>
+          </a>
+
+          {/* Mobile Hamburger */}
+          <button
+            onClick={() => setMobileOpen(!mobileOpen)}
+            className="dark:hover:bg-navy-800 cursor-pointer rounded-lg p-2 transition-colors hover:bg-slate-100 md:hidden"
+            aria-label="Toggle menu"
+          >
+            {mobileOpen ? (
+              <svg
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            ) : (
+              <svg
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {mobileOpen && (
+        <nav className="space-y-1 border-t border-slate-200 py-4 md:hidden dark:border-[#a0a0a01c]">
+          {categories.map((cat) => (
+            <Link
+              key={cat.name}
+              href={`/${cat.name}/`}
+              onClick={() => setMobileOpen(false)}
+              className="flex items-center justify-between px-3 py-2 text-sm font-medium text-slate-600 capitalize hover:text-violet-600 dark:text-slate-400 dark:hover:text-violet-400"
+            >
+              <span>{cat.name.replace(/[_-]/g, " ")}</span>
+              <span className="text-xs text-slate-400 dark:text-slate-500">
+                {cat.docCount}
+              </span>
+            </Link>
+          ))}
+          <div className="flex items-center gap-3 px-3 pt-2">
+            <a
+              href="https://github.com/dinhanhthi/coding-friend"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex cursor-pointer items-center gap-2 text-sm font-medium text-slate-500 hover:text-violet-600 dark:text-slate-400 dark:hover:text-violet-400"
+            >
+              <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+              </svg>
+              GitHub
+            </a>
+          </div>
+        </nav>
+      )}
+    </header>
+  );
+}

package/lib/learn-host/src/lib/docs.ts

@@ -1,25 +1,102 @@
 import fs from "node:fs";
 import path from "node:path";
+import { homedir } from "node:os";
 import matter from "gray-matter";
-import type { CategoryInfo, Doc, DocFrontmatter, DocMeta } from "./types";
+import type {
+  CategoryInfo,
+  Doc,
+  DocFrontmatter,
+  DocMeta,
+  TocItem,
+} from "./types";
 
+/**
+ * Resolve the docs directory using the same logic as `cf host`:
+ * 1. DOCS_DIR env var (set by `cf host`)
+ * 2. Local .coding-friend/config.json → learn.outputDir
+ * 3. Global ~/.coding-friend/config.json → learn.outputDir
+ * 4. Default: docs/learn (relative to project root)
+ */
 function getDocsDir(): string {
-  const raw = process.env.DOCS_DIR || path.join(process.cwd(), "../../docs/learn");
-  return path.resolve(raw);
+  if (process.env.DOCS_DIR) {
+    return path.resolve(process.env.DOCS_DIR);
+  }
+
+  // Find project root by walking up from cwd looking for .coding-friend/
+  const projectRoot = findProjectRoot(process.cwd());
+
+  // Try local config
+  const localConfig = readJsonSafe(
+    path.join(projectRoot, ".coding-friend", "config.json"),
+  );
+  if (localConfig?.learn?.outputDir) {
+    return resolvePath(localConfig.learn.outputDir, projectRoot);
+  }
+
+  // Try global config
+  const globalConfig = readJsonSafe(
+    path.join(homedir(), ".coding-friend", "config.json"),
+  );
+  if (globalConfig?.learn?.outputDir) {
+    return resolvePath(globalConfig.learn.outputDir, projectRoot);
+  }
+
+  // Default
+  return path.join(projectRoot, "docs", "learn");
+}
+
+function findProjectRoot(from: string): string {
+  let dir = from;
+  while (dir !== path.dirname(dir)) {
+    if (fs.existsSync(path.join(dir, ".coding-friend"))) {
+      return dir;
+    }
+    dir = path.dirname(dir);
+  }
+  // Fallback: assume learn-host is at <root>/lib/learn-host
+  return path.resolve(from, "../..");
+}
+
+function resolvePath(p: string, base: string): string {
+  if (p.startsWith("/")) return p;
+  if (p.startsWith("~/")) return path.join(homedir(), p.slice(2));
+  return path.resolve(base, p);
+}
+
+interface CfConfig {
+  learn?: { outputDir?: string };
+}
+
+function readJsonSafe(filePath: string): CfConfig | null {
+  try {
+    const content = fs.readFileSync(filePath, "utf-8");
+    return JSON.parse(content) as CfConfig;
+  } catch {
+    return null;
+  }
 }
 
 function isMarkdownDoc(fileName: string): boolean {
   return fileName.endsWith(".md") && fileName !== "README.md";
 }
 
+function formatDate(value: unknown): string {
+  if (!value) return "";
+  if (value instanceof Date) return value.toISOString().slice(0, 10);
+  const str = String(value);
+  const parsed = new Date(str);
+  if (!Number.isNaN(parsed.getTime())) return parsed.toISOString().slice(0, 10);
+  return str;
+}
+
 function parseFrontmatter(raw: matter.GrayMatterFile<string>): DocFrontmatter {
   const d = raw.data;
   return {
     title: String(d.title ?? "Untitled"),
     category: String(d.category ?? ""),
     tags: Array.isArray(d.tags) ? d.tags.map(String) : [],
-    created: String(d.created ?? ""),
-    updated: String(d.updated ?? ""),
+    created: formatDate(d.created),
+    updated: formatDate(d.updated),
   };
 }
 
@@ -41,9 +118,7 @@ export function getAllCategories(): CategoryInfo[] {
     .filter((d) => d.isDirectory() && !d.name.startsWith("."))
     .map((d) => {
       const catPath = path.join(docsDir, d.name);
-      const count = fs
-        .readdirSync(catPath)
-        .filter(isMarkdownDoc).length;
+      const count = fs.readdirSync(catPath).filter(isMarkdownDoc).length;
       return { name: d.name, docCount: count };
     })
     .filter((c) => c.docCount > 0);
@@ -100,6 +175,21 @@ export function getDocBySlug(category: string, slug: string): Doc | null {
   };
 }
 
+export function extractHeadings(content: string): TocItem[] {
+  const headings: TocItem[] = [];
+  const regex = /^(#{2,3})\s+(.+)$/gm;
+  let match;
+  while ((match = regex.exec(content)) !== null) {
+    const text = match[2].trim();
+    const id = text
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/(^-|-$)/g, "");
+    headings.push({ id, text, level: match[1].length });
+  }
+  return headings;
+}
+
 export function getAllTags(): { tag: string; count: number }[] {
   const tagMap = new Map<string, number>();
   for (const doc of getAllDocs()) {

package/lib/learn-host/src/lib/types.ts

@@ -20,4 +20,10 @@ export interface Doc extends DocMeta {
 export interface CategoryInfo {
   name: string;
   docCount: number;
-}
+}
+
+export interface TocItem {
+  id: string;
+  text: string;
+  level: number;
+}

package/lib/learn-host/tsconfig.json

@@ -11,11 +11,17 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [{ "name": "next" }],
     "paths": { "@/*": ["./src/*"] }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }