feat: add Ink (Terminal) support to the example site

Add @git-diff-view/cli visibility on the main site — Ink/Terminal now
appears in the hero framework list and as a Quick Start tab with a
Sandpack code example and terminal screenshot preview.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: MrWangJustToDo

ui/react-example/src/components/PlayGround/CliPlayGround.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { SandpackCodeEditor, SandpackLayout, SandpackProvider } from "@codesandbox/sandpack-react";
+import { Box, Card, useMantineColorScheme } from "@mantine/core";
+import { IconTerminal2 } from "@tabler/icons-react";
+
+export const CliPlayGround = () => {
+  const { colorScheme } = useMantineColorScheme();
+
+  return (
+    <Card className="p-0" withBorder>
+      <Box className="flex items-center px-2 py-2 font-sans text-[14px]">
+        <IconTerminal2 size="16" color="#22c55e" className="mr-2" /> Ink (Terminal)
+      </Box>
+      <SandpackProvider
+        template="vite-react-ts"
+        theme={colorScheme === "dark" ? "dark" : "light"}
+        files={{
+          "/app.tsx": `import { render } from "ink";
+import { DiffView, DiffFile, DiffModeEnum } from "@git-diff-view/cli";
+
+const diffString = \`--- a/file.ts
++++ b/file.ts
+@@ -1,3 +1,3 @@
+ const greeting = "hello";
+-console.log(greeting);
++console.log(\\\`\\\${greeting} world\\\`);
+ export default greeting;
+\`;
+
+const diffFile = new DiffFile(
+  "file.ts", "", "file.ts", "",
+  [diffString], "ts", "ts"
+);
+diffFile.init();
+diffFile.buildSplitDiffLines();
+diffFile.buildUnifiedDiffLines();
+
+render(
+  <DiffView
+    diffFile={diffFile}
+    diffViewMode={DiffModeEnum.Unified}
+    diffViewHighlight={true}
+    diffViewTheme="dark"
+  />
+);
+`,
+        }}
+      >
+        {/* @ts-ignore */}
+        <SandpackLayout style={{ ["--sp-layout-height"]: "450px" }}>
+          <SandpackCodeEditor showTabs />
+          <Box className="flex flex-1 items-center justify-center overflow-hidden">
+            <img
+              src="https://raw.githubusercontent.com/MrWangJustToDo/MyAgent/main/edit-diff-view.png"
+              alt="@git-diff-view/cli terminal rendering"
+              className="block w-full object-cover object-top"
+            />
+          </Box>
+        </SandpackLayout>
+      </SandpackProvider>
+    </Card>
+  );
+};

ui/react-example/src/components/PlayGround/index.ts

@@ -2,3 +2,4 @@ export * from "./ReactPlayGround";
 export * from "./VuePlayGround";
 export * from "./SolidPlayGround";
 export * from "./SveltePlayGround";
+export * from "./CliPlayGround";

ui/react-example/src/views/Main/MainContent.tsx

@@ -25,6 +25,7 @@ import {
   IconSparkles,
   IconStar,
   IconDownload,
+  IconTerminal2,
 } from "@tabler/icons-react";
 import { useMemo, useState, useEffect } from "react";
 
@@ -166,6 +167,12 @@ export const MainContent = () => {
                   Svelte
                 </Text>
               </Group>
+              <Group gap="xs" className="inline-flex">
+                <IconTerminal2 className="animate-float" color="#22c55e" size={24} style={{ animationDelay: "2s" }} />
+                <Text span className="text-lg font-semibold">
+                  Ink (Terminal)
+                </Text>
+              </Group>
             </Group>
 
             <Highlight highlight={["feature-rich", "GitHub-style"]} color={color} className="text-lg">

ui/react-example/src/views/Main/StartContent.tsx

@@ -1,7 +1,7 @@
 import { Container, Space, Title, Text, Box, Badge, Tabs, rem, useMantineColorScheme } from "@mantine/core";
-import { IconBrandReact, IconBrandVue, IconCode } from "@tabler/icons-react";
+import { IconBrandReact, IconBrandVue, IconCode, IconTerminal2 } from "@tabler/icons-react";
 
-import { ReactPlayGround, VuePlayGround } from "../../components/PlayGround";
+import { ReactPlayGround, VuePlayGround, CliPlayGround } from "../../components/PlayGround";
 
 export const StartContent = () => {
   const iconStyle = { width: rem(16), height: rem(16) };
@@ -39,6 +39,9 @@ export const StartContent = () => {
               <Tabs.Tab value="vue" leftSection={<IconBrandVue style={iconStyle} />} className="text-base">
                 Vue
               </Tabs.Tab>
+              <Tabs.Tab value="cli" leftSection={<IconTerminal2 style={iconStyle} />} className="text-base">
+                Ink (Terminal)
+              </Tabs.Tab>
             </Tabs.List>
 
             <Tabs.Panel value="react">
@@ -82,6 +85,27 @@ export const StartContent = () => {
                 <VuePlayGround />
               </Box>
             </Tabs.Panel>
+
+            <Tabs.Panel value="cli">
+              <Box
+                className="rounded-xl border border-solid p-6"
+                style={{
+                  borderColor: colorScheme === "light" ? "#f1f3f5" : "var(--mantine-color-dark-5)",
+                  backgroundColor: colorScheme === "light" ? "#f8f9fa" : "var(--mantine-color-dark-6)",
+                }}
+              >
+                <Box className="mb-4 flex items-center gap-3">
+                  <IconTerminal2 size={24} className="text-green-500" />
+                  <Title order={3} size="h4">
+                    Ink (Terminal) Example
+                  </Title>
+                </Box>
+                <Text c="dimmed" mb="lg" className="text-base">
+                  Render beautiful diffs directly in your terminal using Ink and React. Powered by @git-diff-view/cli.
+                </Text>
+                <CliPlayGround />
+              </Box>
+            </Tabs.Panel>
           </Tabs>
         </Box>
       </Box>