Add HN CLI to projects and install upsell (#2177)

Co-authored-by: Claude Haiku 4.5 <[email protected]>

Author: brianlovin

src/app/hn/HNDigestCard.tsx

@@ -1,13 +1,44 @@
 "use client";
 import { useAtom } from "jotai";
+import { useState } from "react";
 
-import { hnSubscribedAtom } from "@/atoms/hnSubscription";
+import { hnCliCopiedAtom, hnSubscribedAtom } from "@/atoms/hnSubscription";
 import { Close } from "@/components/icons/Close";
 import { Triangle } from "@/components/icons/Triangle";
 import { cn } from "@/lib/utils";
 
 import { SubscribeForm } from "./SubscribeForm";
 
+const CLI_COMMAND = "npm install -g @brianlovin/hn-cli";
+
+export function HNCLIUpsell({ className }: { className?: string }) {
+  const [isSubscribed] = useAtom(hnSubscribedAtom);
+  const [hasCopied, setHasCopied] = useAtom(hnCliCopiedAtom);
+  const [showCopied, setShowCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(CLI_COMMAND);
+    setShowCopied(true);
+    setTimeout(() => {
+      setShowCopied(false);
+      setHasCopied(true);
+    }, 1500);
+  };
+
+  if (isSubscribed || hasCopied) return null;
+
+  return (
+    <div className={cn("text-center font-mono text-sm", className)}>
+      <button
+        onClick={handleCopy}
+        className="text-tertiary hover:text-secondary cursor-pointer transition-colors"
+      >
+        {showCopied ? "Copied!" : CLI_COMMAND}
+      </button>
+    </div>
+  );
+}
+
 export function HNDigestCard({ className }: { className?: string }) {
   const [isSubscribed, setIsSubscribed] = useAtom(hnSubscribedAtom);
 

src/app/hn/HNPageClient.tsx

@@ -5,7 +5,7 @@ import { useAtomValue } from "jotai";
 import { hnSubscribedAtom } from "@/atoms/hnSubscription";
 import { SpeechBubble } from "@/components/icons/SpeechBubble";
 
-import { HNDigestCard } from "./HNDigestCard";
+import { HNCLIUpsell, HNDigestCard } from "./HNDigestCard";
 
 export function HNPageClient() {
   const isSubscribed = useAtomValue(hnSubscribedAtom);
@@ -15,7 +15,10 @@ export function HNPageClient() {
       {isSubscribed ? (
         <SpeechBubble size={100} className="opacity-10" />
       ) : (
-        <HNDigestCard className="bg-elevated max-w-xl shadow-xs" />
+        <div className="flex w-full max-w-xl flex-col gap-4">
+          <HNDigestCard className="bg-elevated shadow-xs" />
+          <HNCLIUpsell />
+        </div>
       )}
     </div>
   );

src/app/hn/[id]/HNPostPageClient.tsx

@@ -17,7 +17,7 @@ import { useHNPost } from "@/lib/hooks/useHn";
 import { stripHtmlTags } from "@/lib/utils";
 import { HackerNewsComment, HackerNewsPost } from "@/types/hackernews";
 
-import { HNDigestCard } from "../HNDigestCard";
+import { HNCLIUpsell, HNDigestCard } from "../HNDigestCard";
 import { useHNPostsContext } from "../HNPostsContext";
 
 // Lazily initialize DOMPurify to avoid SSR issues
@@ -183,7 +183,12 @@ export default function HNPostPageClient({ initialPost }: HNPostPageClientProps)
             )}
           </div>
 
-          <HNDigestCard className="mb-12" />
+          {!isSubscribed && (
+            <div className="mb-12 flex flex-col gap-4">
+              <HNDigestCard />
+              <HNCLIUpsell />
+            </div>
+          )}
 
           <FancySeparator />
 
@@ -196,7 +201,10 @@ export default function HNPostPageClient({ initialPost }: HNPostPageClientProps)
           {!isSubscribed && post?.comments && !!post.comments.length && (
             <div className="pt-8 md:pt-12">
               <FancySeparator />
-              <HNDigestCard className="mt-8" />
+              <div className="mt-8 flex flex-col gap-4">
+                <HNDigestCard />
+                <HNCLIUpsell />
+              </div>
             </div>
           )}
         </div>

src/atoms/hnSubscription.ts

@@ -1,3 +1,4 @@
 import { atomWithStorage } from "jotai/utils";
 
 export const hnSubscribedAtom = atomWithStorage("hn-subscribed", false);
+export const hnCliCopiedAtom = atomWithStorage("hn-cli-copied", false);

src/components/home/ProjectsList.tsx

@@ -79,6 +79,12 @@ const projects = [
     description: "A visual guide to understand terminals",
     external: true,
   },
+  {
+    name: "HN CLI",
+    href: "https://github.com/brianlovin/hn-cli",
+    description: "A command-line interface for Hacker News",
+    external: true,
+  },
 ];
 
 interface ProjectsListProps {

src/config/navigation.tsx

@@ -9,6 +9,7 @@ import { Headphones3 } from "@/components/icons/Headphones3";
 import { Home } from "@/components/icons/Home";
 import { LightBulb } from "@/components/icons/LightBulb";
 import { Person } from "@/components/icons/Person";
+import { Terminal } from "@/components/icons/Terminal";
 import { Triangle } from "@/components/icons/Triangle";
 import { IconProps } from "@/components/icons/types";
 
@@ -114,6 +115,15 @@ export const navigationItems: NavigationItem[] = [
     isActive: (pathname) => pathname.startsWith("/sites"),
     section: "projects",
   },
+  {
+    id: "hn-cli",
+    label: "HN CLI",
+    href: "https://github.com/brianlovin/hn-cli",
+    icon: Terminal,
+    keywords: ["hn", "cli", "hacker news", "terminal"],
+    isActive: () => false,
+    section: "projects",
+  },
 ];
 
 // Helper functions to filter navigation items