coding-friend-cli 1.1.1 → 1.2.0

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

@@ -1,55 +1,63 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 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[] }) {
+export default function MobileNav({
+  categories,
+}: {
+  categories: CategoryInfo[];
+}) {
+  const pathname = usePathname();
   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>
+    <div className="dark:bg-navy-950 border-b border-slate-200 bg-slate-50 dark:border-[#a0a0a01c]">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full cursor-pointer items-center justify-between px-4 py-3 text-sm font-medium text-slate-700 dark:text-slate-300"
+      >
+        <span>Navigation</span>
+        <svg
+          className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
 
       {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) => (
+        <nav className="max-h-[60vh] space-y-0.5 overflow-y-auto px-4 pb-4">
+          {categories.map((cat) => {
+            const isActive = pathname === `/${cat.name}/`;
+            return (
               <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"
+                className={`flex items-center justify-between rounded-md px-3 py-1.5 text-sm capitalize ${
+                  isActive
+                    ? "font-medium text-violet-600 dark:text-violet-400"
+                    : "text-slate-600 dark:text-slate-400"
+                }`}
               >
-                <span className="capitalize">{cat.name.replace(/[_-]/g, " ")}</span>
-                <span className="text-xs text-gray-400">{cat.docCount}</span>
+                <span>{cat.name.replace(/[_-]/g, " ")}</span>
+                <span className="text-xs text-slate-400 dark:text-slate-500">
+                  {cat.docCount}
+                </span>
               </Link>
-            ))}
-          </nav>
-        </div>
+            );
+          })}
+        </nav>
       )}
     </div>
   );

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

@@ -1,6 +1,10 @@
 "use client";
 
 import { useState, useEffect, useRef, useCallback } from "react";
+import { Command } from "cmdk";
+import { useRouter } from "next/navigation";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { DialogTitle, DialogDescription } from "@radix-ui/react-dialog";
 
 interface PagefindResult {
   id: string;
@@ -8,7 +12,6 @@ interface PagefindResult {
     url: string;
     meta: { title?: string };
     excerpt: string;
-    sub_results?: { url: string; title: string; excerpt: string }[];
   }>;
 }
 
@@ -29,13 +32,32 @@ interface Pagefind {
   ) => Promise<{ results: PagefindResult[] } | null>;
 }
 
-export default function PagefindSearch({ initialQuery = "" }: { initialQuery?: string }) {
-  const [query, setQuery] = useState(initialQuery);
+function normalizePagefindUrl(url: string): string {
+  return url.replace(/\.html$/, "/");
+}
+
+// Pagefind excerpts only contain <mark> tags for highlighting — safe to render
+// This is a trusted source (local pagefind index), not user input
+function ExcerptMarkup({ html }: { html: string }) {
+  return (
+    <p
+      className="mt-0.5 line-clamp-2 text-sm text-slate-500 dark:text-slate-400 [&_mark]:bg-transparent [&_mark]:!text-yellow-600 dark:[&_mark]:!text-yellow-200"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+
+export default function PagefindSearch() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
   const [results, setResults] = useState<SearchResult[]>([]);
   const [loading, setLoading] = useState(false);
   const [ready, setReady] = useState(false);
   const pagefindRef = useRef<Pagefind | null>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
 
+  // Load pagefind
   useEffect(() => {
     async function load() {
       try {
@@ -47,26 +69,60 @@ export default function PagefindSearch({ initialQuery = "" }: { initialQuery?: s
         pagefindRef.current = pf;
         setReady(true);
       } catch {
-        // Pagefind not available (dev mode or first run)
+        // Pagefind not available (dev mode)
       }
     }
     load();
   }, []);
 
+  // Keyboard shortcut: Cmd+K / Ctrl+K
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  // Click outside to close
+  useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(e: PointerEvent) {
+      if (dialogRef.current && !dialogRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setResults([]);
+    }
+  }, [open]);
+
   const doSearch = useCallback(async (q: string) => {
     const pf = pagefindRef.current;
     if (!pf || !q.trim()) {
       setResults([]);
+      setLoading(false);
       return;
     }
 
+    const response = await pf.debouncedSearch(q, {}, 200);
+    if (!response) return;
+
     setLoading(true);
+    setResults([]);
     try {
-      const response = await pf.debouncedSearch(q, {}, 200);
-      if (!response) return; // debounced away
-
       const items: SearchResult[] = [];
-      for (const result of response.results.slice(0, 20)) {
+      for (const result of response.results.slice(0, 10)) {
         const data = await result.data();
         items.push({
           id: result.id,
@@ -82,53 +138,120 @@ export default function PagefindSearch({ initialQuery = "" }: { initialQuery?: s
   }, []);
 
   useEffect(() => {
-    if (ready) doSearch(query);
-  }, [query, ready, doSearch]);
+    if (ready && open) doSearch(query);
+  }, [query, ready, open, doSearch]);
 
   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
-      />
-
-      {!ready && query.trim() && (
-        <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
-          Search index not available. Run a build first.
-        </p>
-      )}
-
-      {ready && query.trim() && !loading && (
-        <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) => {
-          // Pagefind excerpts contain only <mark> tags for highlighting — safe to render
-          return (
-            <a
-              key={entry.id}
-              href={entry.url}
-              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 [&_mark]:bg-yellow-200 dark:[&_mark]:bg-yellow-800 [&_mark]:rounded [&_mark]:px-0.5"
-                dangerouslySetInnerHTML={{ __html: entry.excerpt }}
-              />
-            </a>
-          );
-        })}
-      </div>
-    </div>
+    <>
+      {/* Search trigger button */}
+      <button
+        onClick={() => setOpen(true)}
+        className="flex cursor-pointer items-center gap-1.5 rounded-lg p-2 text-slate-500 transition-colors duration-200 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
+        aria-label="Search docs"
+      >
+        <svg
+          className="h-5 w-5"
+          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>
+        <kbd className="dark:bg-navy-800/80 hidden items-center gap-0.5 rounded border border-slate-300 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 sm:inline-flex dark:border-[#a0a0a01c]">
+          <span className="text-xs">&#8984;</span>K
+        </kbd>
+      </button>
+
+      {/* cmdk dialog */}
+      <Command.Dialog
+        open={open}
+        onOpenChange={setOpen}
+        shouldFilter={false}
+        loop
+        label="Search documentation"
+        overlayClassName="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+        contentClassName="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] pointer-events-none"
+        ref={dialogRef}
+        className="dark:bg-navy-900/80 pointer-events-auto mx-4 w-full max-w-lg overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl dark:border-[#a0a0a01c]"
+      >
+        <VisuallyHidden>
+          <DialogTitle>Search documentation</DialogTitle>
+          <DialogDescription>
+            Search through the documentation pages
+          </DialogDescription>
+        </VisuallyHidden>
+        {/* Search input */}
+        <div className="flex items-center gap-3 border-b border-slate-200 px-4 dark:border-[#a0a0a01c]">
+          <svg
+            className="h-6 w-6 shrink-0 text-slate-400 dark:text-slate-500"
+            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>
+          <Command.Input
+            value={query}
+            onValueChange={setQuery}
+            placeholder="Search documentation..."
+            className="flex-1 bg-transparent py-3 text-sm text-slate-900 placeholder-slate-400 outline-none dark:text-white dark:placeholder-slate-500"
+          />
+          <kbd className="rounded border border-slate-300 px-1.5 py-0.5 text-xs text-slate-400 dark:border-[#a0a0a01c] dark:text-slate-500">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <Command.List className="max-h-[50vh] overflow-y-auto">
+          {loading && (
+            <Command.Loading className="px-4 py-6 text-center text-sm text-slate-400">
+              Searching...
+            </Command.Loading>
+          )}
+
+          {!ready && query.trim() && (
+            <p className="px-4 py-6 text-center text-sm text-slate-400">
+              Search index not available. Run a production build first.
+            </p>
+          )}
+
+          <Command.Empty className="px-4 py-6 text-center text-sm text-slate-400">
+            {query.trim() ? (
+              <>No results found for &ldquo;{query}&rdquo;</>
+            ) : (
+              "Start typing to search..."
+            )}
+          </Command.Empty>
+
+          {!loading &&
+            results.map((entry) => (
+              <Command.Item
+                key={entry.id}
+                value={entry.id}
+                onSelect={() => {
+                  setOpen(false);
+                  router.push(normalizePagefindUrl(entry.url));
+                }}
+                className="dark:data-[selected=true]:bg-navy-800 cursor-pointer px-4 py-3 transition-colors data-[selected=true]:bg-slate-100"
+              >
+                <div className="text-base font-medium text-slate-900 dark:text-white">
+                  {entry.title}
+                </div>
+                <ExcerptMarkup html={entry.excerpt} />
+              </Command.Item>
+            ))}
+        </Command.List>
+      </Command.Dialog>
+    </>
   );
 }

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

@@ -1,44 +1,42 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 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);
+export default function Sidebar({
+  categories,
+}: {
+  categories: CategoryInfo[];
+}) {
+  const pathname = usePathname();
 
   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) => (
+    <aside className="dark:bg-navy-950 fixed top-14 left-0 z-10 hidden h-[calc(100vh-3.5rem)] w-64 shrink-0 border-r border-slate-200 bg-slate-50 md:flex md:flex-col lg:w-[300px] dark:border-[#a0a0a01c]">
+      <nav
+        className="scrollbar-none flex-1 space-y-1 overflow-y-auto p-4"
+        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+      >
+        {categories.map((cat) => {
+          const isActive = pathname === `/${cat.name}/`;
+          return (
             <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"
+              className={`flex items-center justify-between rounded-full px-3 py-2 text-sm capitalize transition-colors duration-200 ${
+                isActive
+                  ? "font-medium text-violet-600 dark:text-violet-400"
+                  : "dark:hover:bg-navy-800/50 text-slate-600 hover:bg-slate-200/50 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
+              }`}
             >
-              <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">
+              <span>{cat.name.replace(/[_-]/g, " ")}</span>
+              <span className="dark:bg-navy-800 rounded-full bg-slate-200 px-1.5 py-0.5 text-xs text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-[#a0a0a01c]">
                 {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>
+          );
+        })}
+      </nav>
     </aside>
   );
 }

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

@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { TocItem } from "@/lib/types";
+
+interface Props {
+  headings: TocItem[];
+}
+
+export default function TableOfContents({ headings }: Props) {
+  const [activeId, setActiveId] = useState("");
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        }
+      },
+      { rootMargin: "-80px 0px -60% 0px", threshold: 0.1 },
+    );
+
+    for (const heading of headings) {
+      const el = document.getElementById(heading.id);
+      if (el) observer.observe(el);
+    }
+
+    return () => observer.disconnect();
+  }, [headings]);
+
+  if (headings.length === 0) return null;
+
+  return (
+    <aside className="sticky top-16 hidden h-[calc(100vh-4rem)] w-56 shrink-0 overflow-y-auto lg:block">
+      <div className="p-4">
+        <h4 className="mb-3 text-xs font-semibold tracking-wider text-slate-500 uppercase dark:text-slate-400">
+          On this page
+        </h4>
+        <ul className="space-y-1.5">
+          {headings.map((h) => (
+            <li key={h.id}>
+              <a
+                href={`#${h.id}`}
+                className={`block text-xs transition-colors duration-200 ${
+                  h.level === 3 ? "pl-3" : ""
+                } ${
+                  activeId === h.id
+                    ? "font-medium text-violet-600 dark:text-violet-400"
+                    : "text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
+                }`}
+              >
+                {h.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </aside>
+  );
+}

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

@@ -4,7 +4,7 @@ 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"
+      className="inline-block rounded-full border border-slate-300 px-2.5 py-0.5 text-xs text-violet-600 transition-colors hover:border-violet-400 hover:bg-violet-50 dark:border-slate-600 dark:text-violet-400 dark:hover:border-violet-500 dark:hover:bg-violet-900/20"
     >
       {tag}
     </Link>

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

@@ -1,28 +1,55 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
+
+const emptySubscribe = () => () => {};
+const getSnapshot = () => true;
+const getServerSnapshot = () => false;
 
 export default function ThemeToggle() {
   const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
+  const mounted = useSyncExternalStore(
+    emptySubscribe,
+    getSnapshot,
+    getServerSnapshot,
+  );
 
-  useEffect(() => setMounted(true), []);
-  if (!mounted) return <div className="w-9 h-9" />;
+  if (!mounted) return <div className="h-9 w-9" />;
 
   return (
     <button
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      className="dark:hover:bg-navy-800 cursor-pointer rounded-lg p-2 transition-colors hover:bg-slate-100"
       aria-label="Toggle theme"
     >
       {theme === "dark" ? (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        <svg
+          className="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
         </svg>
       ) : (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        <svg
+          className="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
         </svg>
       )}
     </button>

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

@@ -0,0 +1,41 @@
+import Image from "next/image";
+
+export default function Footer() {
+  return (
+    <footer className="dark:bg-navy-950 fixed right-0 bottom-0 left-0 z-40 border-t border-slate-200 bg-slate-50 md:left-64 lg:left-[300px] dark:border-[#a0a0a01c]">
+      <div className="flex flex-row flex-wrap items-center gap-1 px-6 py-3 text-center text-xs text-slate-500 dark:text-slate-500">
+        <div className="flex items-center gap-2">
+          <Image src="/logo.svg" alt="Coding Friend" width={20} height={20} />
+          <span>
+            Powered by{" "}
+            <a
+              href="https://github.com/dinhanhthi/coding-friend"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-violet-600 hover:text-violet-500 dark:text-violet-400 dark:hover:text-violet-300"
+            >
+              Coding Friend
+            </a>
+            , developed by{" "}
+            <a
+              href="https://dinhanhthi.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-violet-600 hover:text-violet-500 dark:text-violet-400 dark:hover:text-violet-300"
+            >
+              Anh-Thi Dinh
+            </a>
+            .
+          </span>
+        </div>
+        <div>
+          Learning notes hosted locally with{" "}
+          <code className="rounded border border-slate-300 px-1 py-0.5 text-xs dark:border-slate-600">
+            cf host
+          </code>
+          .
+        </div>
+      </div>
+    </footer>
+  );
+}