From 570688929f4070ee9a1ed9276420f9702fbe1497 Mon Sep 17 00:00:00 2001 From: "coderabbitai[bot]" <136622811+coderabbitai[bot]@users.noreply.github.com> Date: Mon, 22 Dec 2025 07:31:08 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Add=20docstrings=20to=20`main`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Docstrings generation was requested by @sujay-d07. * https://github.com/cortexlinux/website/pull/4#issuecomment-3680841712 The following files were modified: * `client/src/components/InteractiveDemoHero.tsx` * `client/src/hooks/useCortexDemo.ts` * `client/src/sections/HomePage.tsx` --- client/src/components/InteractiveDemoHero.tsx | 310 ++++++++++++++++++ client/src/hooks/useCortexDemo.ts | 25 +- client/src/sections/HomePage.tsx | 60 +--- 3 files changed, 346 insertions(+), 49 deletions(-) create mode 100644 client/src/components/InteractiveDemoHero.tsx diff --git a/client/src/components/InteractiveDemoHero.tsx b/client/src/components/InteractiveDemoHero.tsx new file mode 100644 index 0000000..2901320 --- /dev/null +++ b/client/src/components/InteractiveDemoHero.tsx @@ -0,0 +1,310 @@ +import { useState, useRef, useEffect } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { useCortexDemo } from "@/hooks/useCortexDemo"; +import { Send, Terminal, Loader2, Copy, Check, Download, Sparkles, ChevronRight } from "lucide-react"; + +const EXAMPLE_PROMPTS = [ + "Set up Python for machine learning", + "Install Docker on Ubuntu", + "Configure nginx web server", + "Install PostgreSQL database", + "Set up Node.js development environment", +]; + +/** + * Render an interactive demo UI that lets users send natural-language prompts to Cortex and view terminal-style outputs. + * + * The component manages input state, demo messages, loading/error states, copy-to-clipboard for assistant responses, + * example prompt quick actions, and a limit-reached install CTA. + * + * @returns A React element containing the interactive Cortex demo hero with input, example chips, terminal output, error display, and install CTA. + */ +export default function InteractiveDemoHero() { + const [input, setInput] = useState(""); + const [copied, setCopied] = useState(false); + const messagesEndRef = useRef(null); + const terminalRef = useRef(null); + + const { + messages, + isLoading, + error, + remaining, + limitReached, + sendMessage, + } = useCortexDemo(); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + if (!input.trim() || isLoading) return; + const message = input; + setInput(""); + await sendMessage(message); + }; + + const handleExampleClick = async (example: string) => { + if (isLoading) return; + setInput(example); + // Auto-submit after a brief moment to show the user what was selected + setTimeout(async () => { + await sendMessage(example); + setInput(""); + }, 300); + }; + + const copyLastCommand = () => { + const lastAssistant = messages.filter((m) => m.role === "assistant").pop(); + if (lastAssistant) { + const codeMatch = lastAssistant.content.match(/```[\s\S]*?```/g); + const textToCopy = codeMatch + ? codeMatch.map((c) => c.replace(/```\w*\n?/g, "").trim()).join("\n") + : lastAssistant.content; + navigator.clipboard.writeText(textToCopy); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } + }; + + // Show limit reached state + if (limitReached) { + return ( +
+ +
๐ŸŽ‰
+

Thanks for trying Cortex!

+

+ Ready for the full experience with unlimited access? +

+
+ + + +
+ +
+ ); + } + + return ( +
+ + {/* Header */} +
+
+ + Try Before Install โ€” No Signup Required +
+

+ Experience Cortex in 10 Seconds +

+

+ Type what you need in plain English. Watch Cortex generate the exact commands. +

+ {remaining !== null && ( +

+ {remaining} {remaining === 1 ? 'request' : 'requests'} remaining in demo +

+ )} +
+ + {/* Interactive Demo Card */} + + + {/* Input Section */} +
+
+
+
+ + $ + + setInput(e.target.value)} + placeholder="e.g., Install Docker on Ubuntu" + className="pl-8 bg-black/50 border-gray-700 text-white placeholder:text-gray-500 focus:border-purple-500 h-12 text-base" + disabled={isLoading} + /> +
+ +
+ + {/* Example Chips */} +
+ {EXAMPLE_PROMPTS.map((example) => ( + + ))} +
+
+
+ + {/* Terminal Output */} +
+ + + + Output Terminal + + +
+ {messages.length === 0 ? ( +
+ +

Ready to help you install anything

+

Try an example above or type your own request

+
+ ) : ( +
+ {messages.map((message, index) => ( + + {message.role === "user" ? ( +
+ $ cortex + {message.content} +
+ ) : ( +
+ {formatOutput(message.content)} +
+ )} + + ))} + {isLoading && ( +
+ + Processing your request... +
+ )} +
+
+ )} +
+
+ + {/* Error Display */} + {error && ( +
+ {error} +
+ )} + + + + {/* Install CTA */} + + + + +

+ Free forever ยท Open source ยท No credit card required +

+ + +
+ ); +} + +/** + * Extracts fenced code blocks from a markdown-like string and renders them as green text previews. + * + * Language identifiers and triple-backtick fences are removed from each block before rendering. + * + * @param content - Input text that may contain one or more triple-backtick fenced code blocks. + * @returns A React node containing each extracted code block rendered as green text lines; if no code blocks are present, returns a muted "Processing..." placeholder. + */ +function formatCommandsPreview(content: string): React.ReactNode { + const codeMatch = content.match(/```[\s\S]*?```/g); + if (codeMatch) { + return ( +
+ {codeMatch.map((block, i) => { + const code = block.replace(/```\w*\n?/g, "").trim(); + return ( +
+ {code} +
+ ); + })} +
+ ); + } + return
Processing...
; +} + +/** + * Render a text blob into React nodes, converting fenced code blocks into styled code elements and leaving other segments as inline text. + * + * @param content - The input string which may contain fenced code blocks (triple-backtick fences). + * @returns A React node where each fenced code block is rendered as a monospace, styled block (language hint and fences removed, content trimmed) and all other text is rendered as elements. + */ +function formatOutput(content: string): React.ReactNode { + const parts = content.split(/(```[\s\S]*?```)/g); + return parts.map((part, i) => { + if (part.startsWith("```")) { + const code = part.replace(/```\w*\n?/g, "").trim(); + return ( + + {code} + + ); + } + return {part}; + }); +} \ No newline at end of file diff --git a/client/src/hooks/useCortexDemo.ts b/client/src/hooks/useCortexDemo.ts index de0dd69..9a781c4 100644 --- a/client/src/hooks/useCortexDemo.ts +++ b/client/src/hooks/useCortexDemo.ts @@ -10,8 +10,29 @@ interface DemoState { limitReached: boolean; } -const SYSTEM_CONTEXT = `You are Cortex, an AI-powered package manager for Debian/Ubuntu Linux. Help users with package installation, dependency resolution, and system configuration. Show exact commands in code blocks. Be concise.`; +const SYSTEM_CONTEXT = `You are Cortex, an AI-powered Linux package manager assistant. When a user asks for installation or configuration help, respond with ONLY the required shell commands in a single code block. Do NOT include: +- Explanatory text or headers (like "Here's how to..." or "## Install X") +- Comments or annotations within or outside the code block +- Additional notes or instructions +- Any text before or after the code block +Only output the essential commands needed to accomplish the task, formatted in a single bash code block. +`; + +/** + * Hook that manages a demo chat session with a Cortex Linux package-management assistant. + * + * Provides state and actions for sending user messages, clearing the conversation, and tracking loading/error/usage status. + * + * @returns An object containing: + * - `messages`: the conversation messages (each has `role` and `content`), + * - `isLoading`: `true` while a request is in flight, + * - `error`: an error message or `null`, + * - `remaining`: optional remaining usage count, + * - `limitReached`: `true` if the demo rate limit was hit, + * - `sendMessage`: function to send a user message (`(content: string) => Promise`-like), + * - `clearMessages`: function to reset the conversation and clear errors. + */ export function useCortexDemo() { const [state, setState] = useState({ messages: [], isLoading: false, error: null, remaining: null, limitReached: false @@ -59,4 +80,4 @@ export function useCortexDemo() { return { ...state, sendMessage, clearMessages }; } -export default useCortexDemo; +export default useCortexDemo; \ No newline at end of file diff --git a/client/src/sections/HomePage.tsx b/client/src/sections/HomePage.tsx index 3775ef4..a50879e 100644 --- a/client/src/sections/HomePage.tsx +++ b/client/src/sections/HomePage.tsx @@ -56,6 +56,7 @@ import { FaDiscord, FaTwitter } from "react-icons/fa"; import { SiVercel, SiStripe, SiLinear, SiSupabase, SiRailway, SiPlanetscale, SiClerk, SiResend } from "react-icons/si"; import type { Contributor } from "@shared/schema"; import BlogPreview from "@/components/BlogPreview"; +import InteractiveDemoHero from "@/components/InteractiveDemoHero"; interface GitHubStats { openIssues: number; @@ -289,6 +290,13 @@ function InteractiveCodeEditor({ ); } +/** + * Render the homepage for the Cortex marketing site, composing hero, demo, features, comparison, roadmap, + * community, and footer sections with interactive demos and animated visuals. + * + * @param onNavigate - Callback invoked with a section id to request navigation within the page (used by CTAs and footer links) + * @returns The homepage React element + */ export default function HomePage({ onNavigate }: HomePageProps) { const { data: githubStats } = useQuery({ queryKey: ["/api/github/stats"], @@ -424,57 +432,15 @@ export default function HomePage({ onNavigate }: HomePageProps) { and Cortex handles the rest โ€” from GPU optimization to deployment. - {/* CTA Buttons */} + {/* Demo */} - - - - View on GitHub - + - {/* Professional Terminal Preview */} - - } - > - - ${" "} - cortex{" "} - install{" "} - tensorflow{" "} - --optimize-gpu - -
- Detected NVIDIA RTX 4090 - Installing CUDA 12.3 drivers - Configuring TensorFlow for GPU - Optimized for your hardware โ€” Ready in 8s -
- -
{/* Social Proof - Logo Wall */} @@ -2323,4 +2289,4 @@ export default function HomePage({ onNavigate }: HomePageProps) { ); -} +} \ No newline at end of file