coding-friend-cli 1.3.0 → 1.5.0

package/dist/uninstall-BHYS52L3.js

@@ -0,0 +1,202 @@
+import {
+  isMarketplaceRegistered,
+  isPluginInstalled
+} from "./chunk-MRTR7TJ4.js";
+import {
+  hasShellCompletion,
+  removeShellCompletion
+} from "./chunk-DDISNOEK.js";
+import {
+  commandExists,
+  run
+} from "./chunk-UFGNO6CW.js";
+import {
+  claudeSettingsPath,
+  devStatePath,
+  globalConfigDir,
+  marketplaceCachePath,
+  marketplaceClonePath
+} from "./chunk-WHCJT7E2.js";
+import {
+  log
+} from "./chunk-6DUFTBTO.js";
+import {
+  readJson,
+  writeJson
+} from "./chunk-IUTXHCP7.js";
+
+// src/commands/uninstall.ts
+import { existsSync, rmSync } from "fs";
+import { confirm } from "@inquirer/prompts";
+import chalk from "chalk";
+var MARKETPLACE_NAME = "coding-friend-marketplace";
+var PLUGIN_NAME = "coding-friend";
+var PLUGIN_ID = `${PLUGIN_NAME}@${MARKETPLACE_NAME}`;
+function hasStatuslineReference() {
+  const settings = readJson(claudeSettingsPath());
+  if (!settings) return false;
+  const statusLine = settings.statusLine;
+  return !!statusLine?.command?.includes(PLUGIN_NAME);
+}
+function removeStatuslineReference() {
+  const settingsPath = claudeSettingsPath();
+  const settings = readJson(settingsPath);
+  if (!settings) return false;
+  const statusLine = settings.statusLine;
+  if (!statusLine?.command?.includes(PLUGIN_NAME)) return false;
+  delete settings.statusLine;
+  writeJson(settingsPath, settings);
+  return true;
+}
+function detect() {
+  return {
+    pluginInstalled: isPluginInstalled(),
+    marketplaceRegistered: isMarketplaceRegistered(),
+    cacheExists: existsSync(marketplaceCachePath()),
+    cloneExists: existsSync(marketplaceClonePath()),
+    statuslineConfigured: hasStatuslineReference(),
+    shellCompletionExists: hasShellCompletion(),
+    globalConfigExists: existsSync(globalConfigDir()),
+    devModeActive: existsSync(devStatePath())
+  };
+}
+function displayDetection(d) {
+  const check = (v) => v ? chalk.green("\u2714") : chalk.dim("\u2013");
+  console.log();
+  console.log("  Detected components:");
+  console.log(`    ${check(d.pluginInstalled)} Plugin registration`);
+  console.log(`    ${check(d.marketplaceRegistered)} Marketplace registration`);
+  console.log(`    ${check(d.cacheExists)} Plugin cache`);
+  console.log(`    ${check(d.cloneExists)} Marketplace clone`);
+  console.log(`    ${check(d.statuslineConfigured)} Statusline reference`);
+  console.log(`    ${check(d.shellCompletionExists)} Shell tab completion`);
+  console.log(
+    `    ${check(d.globalConfigExists)} Global config (~/.coding-friend/)`
+  );
+  console.log();
+}
+function nothingToRemove(d) {
+  return !d.pluginInstalled && !d.marketplaceRegistered && !d.cacheExists && !d.cloneExists && !d.statuslineConfigured && !d.shellCompletionExists && !d.globalConfigExists;
+}
+async function uninstallCommand() {
+  console.log(`
+=== ${chalk.red("Coding Friend Uninstall")} ===`);
+  if (!commandExists("claude")) {
+    log.error("Claude CLI not found. Cannot uninstall plugin without it.");
+    log.dim(
+      "Install Claude CLI first: https://docs.anthropic.com/en/docs/claude-code"
+    );
+    return;
+  }
+  const detection = detect();
+  if (detection.devModeActive) {
+    log.warn("Dev mode is currently active.");
+    log.dim(`Run ${chalk.bold("cf dev off")} first, then try again.`);
+    return;
+  }
+  if (nothingToRemove(detection)) {
+    log.info("Nothing to uninstall \u2014 Coding Friend is not installed.");
+    return;
+  }
+  displayDetection(detection);
+  const proceed = await confirm({
+    message: "This will remove Coding Friend from Claude Code. Continue?",
+    default: false
+  });
+  if (!proceed) {
+    log.info("Uninstall cancelled.");
+    return;
+  }
+  let removeConfig = false;
+  if (detection.globalConfigExists) {
+    removeConfig = await confirm({
+      message: "Also remove ~/.coding-friend/ config directory? (global config, custom skills)",
+      default: false
+    });
+  }
+  console.log();
+  let errors = 0;
+  if (detection.pluginInstalled) {
+    log.step("Uninstalling plugin...");
+    const result = run("claude", ["plugin", "uninstall", PLUGIN_ID]);
+    if (result === null) {
+      const fallback = run("claude", ["plugin", "uninstall", PLUGIN_NAME]);
+      if (fallback === null) {
+        log.warn(
+          "Could not uninstall plugin via CLI (may already be removed)."
+        );
+        errors++;
+      }
+    }
+  }
+  if (detection.marketplaceRegistered) {
+    log.step("Removing marketplace...");
+    const result = run("claude", [
+      "plugin",
+      "marketplace",
+      "remove",
+      MARKETPLACE_NAME
+    ]);
+    if (result === null) {
+      log.warn(
+        "Could not remove marketplace via CLI (may already be removed)."
+      );
+      errors++;
+    }
+  }
+  if (detection.cacheExists) {
+    log.step("Removing plugin cache...");
+    try {
+      rmSync(marketplaceCachePath(), { recursive: true, force: true });
+    } catch {
+      log.warn("Could not remove plugin cache directory.");
+      errors++;
+    }
+  }
+  if (detection.cloneExists) {
+    log.step("Removing marketplace clone...");
+    try {
+      rmSync(marketplaceClonePath(), { recursive: true, force: true });
+    } catch {
+      log.warn("Could not remove marketplace clone directory.");
+      errors++;
+    }
+  }
+  if (detection.statuslineConfigured) {
+    log.step("Cleaning statusline...");
+    if (!removeStatuslineReference()) {
+      log.warn("Could not clean statusline from settings.");
+      errors++;
+    }
+  }
+  if (detection.shellCompletionExists) {
+    log.step("Removing shell completion...");
+    if (!removeShellCompletion()) {
+      log.warn("Could not remove shell completion.");
+      errors++;
+    }
+  }
+  if (removeConfig) {
+    log.step("Removing global config...");
+    try {
+      rmSync(globalConfigDir(), { recursive: true, force: true });
+    } catch {
+      log.warn("Could not remove ~/.coding-friend/ directory.");
+      errors++;
+    }
+  }
+  console.log();
+  if (errors === 0) {
+    log.success("Coding Friend has been completely uninstalled.");
+  } else {
+    log.warn(`Uninstalled with ${errors} warning(s). Check messages above.`);
+  }
+  if (!removeConfig && detection.globalConfigExists) {
+    log.dim("Global config kept at ~/.coding-friend/");
+  }
+  console.log();
+  log.dim("Restart Claude Code to complete the uninstall.");
+}
+export {
+  uninstallCommand
+};

package/dist/update-TALQ7TAO.js

@@ -0,0 +1,17 @@
+import {
+  getInstalledVersion,
+  getLatestVersion,
+  semverCompare,
+  updateCommand
+} from "./chunk-GTTSBOHM.js";
+import "./chunk-DDISNOEK.js";
+import "./chunk-UFGNO6CW.js";
+import "./chunk-WHCJT7E2.js";
+import "./chunk-6DUFTBTO.js";
+import "./chunk-IUTXHCP7.js";
+export {
+  getInstalledVersion,
+  getLatestVersion,
+  semverCompare,
+  updateCommand
+};

package/lib/learn-host/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog (Learn Host)
 
+## v0.1.0 (2026-03-03)
+
+- Add copy button to code blocks ([#ac47c74](https://github.com/dinhanhthi/coding-friend/commit/ac47c74))
+- Redesign home page with elegant layout and updated color scheme ([#2d53836](https://github.com/dinhanhthi/coding-friend/commit/2d53836))
+- Improve TableOfContents heading styling with border ([#2267508](https://github.com/dinhanhthi/coding-friend/commit/2267508))
+
 ## v0.0.2 (2026-03-01)
 
 - Update header styling for consistency with ecosystem redesign

package/lib/learn-host/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coding-friend-learn-host",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3333",

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

@@ -11,10 +11,10 @@
   --color-navy-900: #2a2d38;
   --color-navy-950: #23262e;
 
-  /* Violet accent (from website) */
-  --color-accent: #7c3aed;
-  --color-accent-light: #a78bfa;
-  --color-accent-dark: #6d28d9;
+  /* Amber accent (matching logo gradient) */
+  --color-accent: #f59e0b;
+  --color-accent-light: #fbbf24;
+  --color-accent-dark: #d97706;
 
   --color-surface: #2a2d38;
   --color-surface-secondary: #31353f;
@@ -78,6 +78,36 @@ pre {
   background: #0d1117;
 }
 
+/* Code block copy button */
+.code-block-wrapper {
+  position: relative;
+}
+
+.code-copy-btn {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 10;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  padding: 0.375rem;
+  color: #94a3b8;
+  opacity: 0;
+  transition:
+    opacity 0.2s,
+    color 0.2s,
+    background-color 0.2s;
+}
+
+.code-block-wrapper:hover .code-copy-btn {
+  opacity: 1;
+}
+
+.code-copy-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #e2e8f0;
+}
+
 :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-weight: 500;
 }

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

@@ -2,8 +2,7 @@ import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
 import { getAllCategories } from "@/lib/docs";
 import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import Sidebar from "@/components/Sidebar";
+import LayoutShell from "@/components/LayoutShell";
 import MobileNav from "@/components/MobileNav";
 import "./globals.css";
 import "highlight.js/styles/github-dark.css";
@@ -40,17 +39,7 @@ export default function RootLayout({
           <div data-pagefind-ignore className="md:hidden">
             <MobileNav categories={categories} />
           </div>
-          <div className="flex">
-            <div data-pagefind-ignore>
-              <Sidebar categories={categories} />
-            </div>
-            <div className="flex min-w-0 flex-1 justify-center md:pl-64 lg:pl-[300px]">
-              <main className="min-h-screen w-full max-w-5xl p-6 pb-24 md:p-8 md:pb-24">
-                {children}
-              </main>
-            </div>
-          </div>
-          <Footer />
+          <LayoutShell categories={categories}>{children}</LayoutShell>
         </ThemeProvider>
       </body>
     </html>

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

@@ -1,6 +1,7 @@
 import { getAllCategories, getAllDocs, getAllTags } from "@/lib/docs";
 import DocCard from "@/components/DocCard";
 import TagBadge from "@/components/TagBadge";
+import Image from "next/image";
 import Link from "next/link";
 
 export default function HomePage() {
@@ -10,28 +11,53 @@ export default function HomePage() {
   const recentDocs = docs.slice(0, 10);
 
   return (
-    <div>
-      <h1 className="mb-2 text-3xl font-bold">Learning Notes</h1>
-      <p className="mb-8 text-slate-500 dark:text-slate-400">
-        {docs.length} docs across {categories.length} categories
-      </p>
+    <div className="mx-auto">
+      {/* Hero */}
+      <section className="mb-12 flex flex-col items-center pt-8 text-center md:pt-14">
+        <Image
+          src="/logo.svg"
+          alt="Learning Notes"
+          width={64}
+          height={64}
+          className="mb-5"
+        />
+        <h1 className="mb-3 text-4xl font-bold tracking-tight text-slate-900 md:text-5xl dark:text-white">
+          Learning Notes
+        </h1>
+        <p className="max-w-lg text-lg text-slate-500 dark:text-slate-400">
+          A personal knowledge base with{" "}
+          <span className="font-semibold text-amber-600 dark:text-amber-400">
+            {docs.length}
+          </span>{" "}
+          docs across{" "}
+          <span className="font-semibold text-amber-600 dark:text-amber-400">
+            {categories.length}
+          </span>{" "}
+          categories
+        </p>
+      </section>
 
       {/* Categories */}
-      <section className="mb-8">
-        <h2 className="mb-3 text-lg font-semibold">Categories</h2>
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+      <section className="mb-12">
+        <h2 className="mb-5 text-xl font-semibold text-slate-900 dark:text-white">
+          Categories
+        </h2>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
           {categories.map((cat) => (
             <Link
               key={cat.name}
               href={`/${cat.name}/`}
-              className="rounded-lg border border-slate-200 p-3 transition-colors hover:border-violet-400/50 dark:border-[#a0a0a01c] dark:hover:border-violet-400/50"
+              className="group dark:bg-navy-800/50 relative cursor-pointer overflow-hidden rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:-translate-y-0.5 hover:border-amber-300 hover:shadow-md hover:shadow-amber-100/50 dark:border-[#a0a0a01c] dark:hover:border-amber-500/40 dark:hover:shadow-amber-900/20"
             >
-              <div className="font-medium text-slate-900 capitalize dark:text-slate-100">
+              <div className="mb-1 font-medium text-slate-900 capitalize dark:text-slate-100">
                 {cat.name.replace(/[_-]/g, " ")}
               </div>
               <div className="text-sm text-slate-500 dark:text-slate-400">
                 {cat.docCount} {cat.docCount === 1 ? "doc" : "docs"}
               </div>
+              <div className="dark:bg-navy-950 absolute right-3 bottom-3 flex h-7 w-7 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-500 dark:text-slate-400">
+                {cat.docCount}
+              </div>
             </Link>
           ))}
         </div>
@@ -39,10 +65,12 @@ export default function HomePage() {
 
       {/* Tags */}
       {tags.length > 0 && (
-        <section className="mb-8">
-          <h2 className="mb-3 text-lg font-semibold">Tags</h2>
+        <section className="mb-12">
+          <h2 className="mb-5 text-xl font-semibold text-slate-900 dark:text-white">
+            Tags
+          </h2>
           <div className="flex flex-wrap gap-2">
-            {tags.slice(0, 20).map(({ tag }) => (
+            {tags.slice(0, 24).map(({ tag }) => (
               <TagBadge key={tag} tag={tag} />
             ))}
           </div>
@@ -51,8 +79,10 @@ export default function HomePage() {
 
       {/* Recent Docs */}
       <section>
-        <h2 className="mb-3 text-lg font-semibold">Recently Updated</h2>
-        <div className="grid gap-3">
+        <h2 className="mb-5 text-xl font-semibold text-slate-900 dark:text-white">
+          Recently Updated
+        </h2>
+        <div className="grid gap-3 sm:grid-cols-2">
           {recentDocs.map((doc) => (
             <DocCard key={`${doc.category}/${doc.slug}`} doc={doc} />
           ))}

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

@@ -8,10 +8,7 @@ interface Crumb {
 export default function Breadcrumbs({ crumbs }: { crumbs: Crumb[] }) {
   return (
     <nav className="mb-4 flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
-      <Link
-        href="/"
-        className="hover:text-violet-600 dark:hover:text-violet-400"
-      >
+      <Link href="/" className="hover:text-amber-600 dark:hover:text-amber-400">
         Home
       </Link>
       {crumbs.map((crumb, i) => (
@@ -20,7 +17,7 @@ export default function Breadcrumbs({ crumbs }: { crumbs: Crumb[] }) {
           {crumb.href ? (
             <Link
               href={crumb.href}
-              className="capitalize hover:text-violet-600 dark:hover:text-violet-400"
+              className="capitalize hover:text-amber-600 dark:hover:text-amber-400"
             >
               {crumb.label}
             </Link>

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+export default function CodeBlock(props: React.ComponentProps<"pre">) {
+  const preRef = useRef<HTMLPreElement>(null);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    const text = preRef.current?.querySelector("code")?.textContent ?? "";
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="code-block-wrapper">
+      <button
+        onClick={handleCopy}
+        className="code-copy-btn"
+        aria-label="Copy to clipboard"
+      >
+        {copied ? (
+          <svg
+            className="h-4 w-4 text-emerald-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+            />
+          </svg>
+        )}
+      </button>
+      <pre ref={preRef} {...props} />
+    </div>
+  );
+}

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

@@ -17,14 +17,12 @@ export default function DocCard({ doc }: { doc: DocMeta }) {
       onKeyDown={(e) => {
         if (e.key === "Enter") router.push(href);
       }}
-      className="dark:bg-navy-800/50 block cursor-pointer rounded-lg border border-slate-200 bg-white p-4 transition-all hover:border-violet-400/50 dark:border-[#a0a0a01c] dark:hover:border-violet-400/50"
+      className="dark:bg-navy-800/50 block cursor-pointer rounded-lg border border-slate-200 bg-white p-4 transition-all duration-200 hover:border-amber-300 hover:shadow-sm dark:border-[#a0a0a01c] dark:hover:border-amber-500/40"
     >
-      <h3 className="mb-1 font-semibold text-slate-900 dark:text-slate-100">
-        <Link href={href} className="hover:underline">
-          {doc.frontmatter.title}
-        </Link>
+      <h3 className="mb-2 font-semibold text-slate-900 dark:text-slate-100">
+        <Link href={href}>{doc.frontmatter.title}</Link>
       </h3>
-      <p className="mb-2 line-clamp-2 text-sm text-slate-500 dark:text-slate-400">
+      <p className="mb-3 line-clamp-2 text-sm text-slate-500 dark:text-slate-400">
         {doc.excerpt}
       </p>
       <div className="flex items-center justify-between">

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import type { CategoryInfo } from "@/lib/types";
+import Sidebar from "@/components/Sidebar";
+import Footer from "@/components/layout/Footer";
+
+export default function LayoutShell({
+  categories,
+  children,
+}: {
+  categories: CategoryInfo[];
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const isHome = pathname === "/";
+
+  return (
+    <>
+      <div className="flex">
+        {!isHome && (
+          <div data-pagefind-ignore>
+            <Sidebar categories={categories} />
+          </div>
+        )}
+        <div
+          className={`flex min-w-0 flex-1 justify-center ${!isHome ? "md:pl-64 lg:pl-[300px]" : ""}`}
+        >
+          <main
+            className={`min-h-screen w-full p-6 pb-24 md:p-8 md:pb-24 ${isHome ? "max-w-6xl" : "max-w-5xl"}`}
+          >
+            {children}
+          </main>
+        </div>
+      </div>
+      <Footer isHome={isHome} />
+    </>
+  );
+}

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

@@ -2,6 +2,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
 import rehypeSlug from "rehype-slug";
+import CodeBlock from "./CodeBlock";
 
 export default function MarkdownRenderer({ content }: { content: string }) {
   return (
@@ -9,6 +10,7 @@ export default function MarkdownRenderer({ content }: { content: string }) {
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeHighlight, rehypeSlug]}
+        components={{ pre: CodeBlock }}
       >
         {content}
       </ReactMarkdown>

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

@@ -46,7 +46,7 @@ export default function MobileNav({
                 onClick={() => setOpen(false)}
                 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"
+                    ? "font-medium text-amber-700 dark:text-amber-400"
                     : "text-slate-600 dark:text-slate-400"
                 }`}
               >

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

@@ -25,7 +25,7 @@ export default function Sidebar({
               href={`/${cat.name}/`}
               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"
+                  ? "font-medium text-amber-700 dark:text-amber-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"
               }`}
             >

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

@@ -35,7 +35,7 @@ export default function TableOfContents({ headings }: Props) {
   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">
+        <h4 className="mb-3 border-b border-slate-600 pb-2 text-xs font-semibold tracking-wider text-slate-400 uppercase">
           On this page
         </h4>
         <ul className="space-y-1.5">
@@ -47,7 +47,7 @@ export default function TableOfContents({ headings }: Props) {
                   h.level === 3 ? "pl-3" : ""
                 } ${
                   activeId === h.id
-                    ? "font-medium text-violet-600 dark:text-violet-400"
+                    ? "font-medium text-amber-700 dark:text-amber-400"
                     : "text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
                 }`}
               >

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 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"
+      className="dark:bg-navy-950 inline-block cursor-pointer rounded-full bg-slate-200 px-2.5 py-0.5 text-xs text-slate-600 transition-colors duration-200 hover:bg-slate-300 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-200"
     >
       {tag}
     </Link>

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

@@ -1,8 +1,12 @@
 import Image from "next/image";
 
-export default function Footer() {
+export default function Footer({ isHome = false }: { isHome?: boolean }) {
   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]">
+    <footer
+      className={`dark:bg-navy-950 fixed right-0 bottom-0 z-40 border-t border-slate-200 bg-slate-50 dark:border-[#a0a0a01c] ${
+        isHome ? "left-0" : "left-0 md:left-64 lg:left-[300px]"
+      }`}
+    >
       <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} />
@@ -12,7 +16,7 @@ export default function Footer() {
               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"
+              className="text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300"
             >
               Coding Friend
             </a>
@@ -21,7 +25,7 @@ export default function Footer() {
               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"
+              className="text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300"
             >
               Anh-Thi Dinh
             </a>