add demo site and docs simlink

Author: techboy-coder

README.md

@@ -1,2 +1,3 @@
 # Typer Diff
 
+![Typer Diff](assets/demo.png)

apps/docs/app/components/DiffText.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { useAtom } from "jotai";
+import { useRef } from "react";
+import { useClickInside, useClickOutside } from "@/app/hooks/hooks";
+import { diffText, isTyping } from "@/data/state";
+
+export default function DiffText() {
+    const [diff] = useAtom(diffText);
+    const [typing, setTyping] = useAtom(isTyping);
+    const ref = useRef<HTMLDivElement>(null);
+    useClickInside(ref, () => {
+        setTyping(true);
+    });
+    useClickOutside(ref, () => {
+        setTyping(false);
+    });
+    return (
+        <div
+            className="text-3xl text-white/50 font-mono leading-relaxed tracking-wide overflow-x-hidden scroll mx-auto max-w-screen-lg"
+            ref={ref}>
+            {diff.diff.map((item, index) => (
+                <span
+                    key={index}
+                    className={cn(
+                        item.type === "correct" && "text-white",
+                        item.type === "extra" &&
+                            "text-red-500/50 underline decoration-red-500/50 decoration-wavy",
+                        item.type === "missing" &&
+                            "text-white/50 underline decoration-red-500 decoration-wavy",
+                        item.type === "wrong" && "text-red-500"
+                    )}>
+                    {item.value}
+                </span>
+            ))}
+        </div>
+    );
+}

apps/docs/app/components/HiddenInput.tsx

@@ -0,0 +1,45 @@
+"use client";
+import { allowModifications, textAtom, isTyping } from "@/data/state";
+import { useAtom } from "jotai";
+import { useEffect, useRef } from "react";
+
+export default function HiddenInput() {
+    let inputRef = useRef<HTMLInputElement>(null);
+    let [text, setText] = useAtom(textAtom);
+    const [allow] = useAtom(allowModifications);
+    const [typing] = useAtom(isTyping);
+
+    const handleKeyDown = () => {
+        if (!inputRef || !inputRef.current || !typing) {
+            return;
+        }
+        inputRef.current.focus();
+        let val = inputRef.current.value;
+        inputRef.current.value = "";
+        inputRef.current.value = val;
+    };
+
+    useEffect(() => {
+        document.addEventListener("keydown", handleKeyDown);
+
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    });
+
+    return (
+        <input
+            ref={inputRef}
+            type="text"
+            className="fixed -top-95 opacity-0"
+            value={text.text}
+            onChange={(e) => {
+                if (allow) {
+                    setText((text) => {
+                        return { ...text, text: e.target.value };
+                    });
+                }
+            }}
+        />
+    );
+}

apps/docs/app/hooks/hooks.ts

@@ -0,0 +1,35 @@
+import React from "react";
+
+export const useClickInside = (
+    ref: React.RefObject<HTMLElement>,
+    callback: () => void
+) => {
+    const handleClick = (e: MouseEvent) => {
+        if (ref.current && ref.current.contains(e.target as Node)) {
+            callback();
+        }
+    };
+    React.useEffect(() => {
+        document.addEventListener("click", handleClick);
+        return () => {
+            document.removeEventListener("click", handleClick);
+        };
+    });
+};
+
+export const useClickOutside = (
+    ref: React.RefObject<HTMLElement>,
+    callback: () => void
+) => {
+    const handleClick = (e: MouseEvent) => {
+        if (ref.current && !ref.current.contains(e.target as Node)) {
+            callback();
+        }
+    };
+    React.useEffect(() => {
+        document.addEventListener("click", handleClick);
+        return () => {
+            document.removeEventListener("click", handleClick);
+        };
+    });
+};

apps/docs/app/layout.tsx

@@ -16,7 +16,8 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en">
-            <body className={`bg-black text-white font-mono container`}>
+            <body
+                className={`bg-black text-white font-mono h-screen overscroll-none`}>
                 {children}
             </body>
         </html>

apps/docs/app/page.tsx

@@ -1,7 +1,11 @@
+import DiffText from "./components/DiffText";
+import HiddenInput from "./components/HiddenInput";
+
 export default function Home() {
     return (
-        <main className="flex min-h-screen flex-col items-center justify-between p-24">
-            Hello World
-        </main>
+        <div className="h-full leading-relaxed flex flex-col justify-center items-center">
+            <DiffText></DiffText>
+            <HiddenInput></HiddenInput>
+        </div>
     );
 }

apps/docs/data/state.ts

@@ -0,0 +1,21 @@
+import { atom } from "jotai";
+import { diff } from "typer-diff";
+
+let text =
+    "typer-diff is a library to diff two strings, useful for showing for typing games (like monkeytype) or for showing differences between two strings. It is a simple library that is easy to use and has no dependencies. It is also very fast and lightweight.";
+export let textAtom = atom({
+    original: text,
+    text: "",
+});
+
+export const diffText = atom((get) => {
+    const text = get(textAtom);
+    return diff(text.original, text.text);
+});
+
+export const allowModifications = atom((get) => {
+    const diff = get(diffText);
+    return !diff.end;
+});
+
+export const isTyping = atom(true);

apps/docs/docs

@@ -0,0 +1 @@
+./apps/docs

apps/docs/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

apps/docs/next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    output: "export",
+};
 
 export default nextConfig;