Merge branch 'dev'

techboy-coder · techboy-coder · commit 3623e2c18179 · 2024-06-23T17:35:16.000+02:00
diff --git a/README.md b/README.md
@@ -1,3 +1,33 @@
 # Typer Diff
 
-![Typer Diff](assets/demo.png)
+![Typer Diff Demo](assets/demo.png)
+
+`type-diff` is a library to diff two strings, useful for showing for typing games (like [monkeytype](https://monkeytype.com/)) 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.
+
+## Usage
+
+**Usage:**
+
+```typescript
+import { diff } from "typer-diff";
+
+// ...
+return diff(text.original, text.text);
+// ...
+```
+
+**Types:**
+
+```typescript
+type DiffItem = {
+    value: string;
+    type: "correct" | "extra" | "missing" | "wrong" | "untouched" | "spacer";
+};
+type DiffResult = {
+    diff: DiffItem[];
+    end: boolean;
+};
+declare const diff: (originalText: string, typedText: string) => DiffResult;
+
+export { type DiffItem, type DiffResult, diff };
+```
diff --git a/apps/docs/README.md b/apps/docs/README.md
@@ -1,36 +1,11 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Typer Diff Demo App
 
-## Getting Started
+![Typer Diff Demo](https://raw.githubusercontent.com/techboy-coder/typer-diff/main/assets/demo.png?token=GHSAT0AAAAAACSUZ6AC33WMWGPI4HJ5X47KZTYIUYQ)
 
-First, run the development server:
+`type-diff` is a library to diff two strings, useful for showing for typing games 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.
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+## Demo App
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+This is a simple Next.js app that uses the `typer-diff` library to show an input field where you can type and see the diff between the original text and the typed text. (Similar to typing games like [monkeytype](https://monkeytype.com/)).
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out the [demo](https://typer-diff.vercel.app/).
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
@@ -18,6 +18,18 @@ export default function RootLayout({
         <html lang="en">
             <body
                 className={`bg-black text-white font-mono h-screen overscroll-none`}>
+                <nav className="flex justify-center items-center space-x-4 text-white/75 py-20">
+                    <a
+                        href="https://github.com/techboy-coder/typer-diff"
+                        target="_blank">
+                        github
+                    </a>
+                    <a
+                        href="https://npmjs.com/package/typer-diff"
+                        target="_blank">
+                        npm
+                    </a>
+                </nav>
                 {children}
             </body>
         </html>
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
@@ -3,7 +3,10 @@ import HiddenInput from "./components/HiddenInput";
 
 export default function Home() {
     return (
-        <div className="h-full leading-relaxed flex flex-col justify-center items-center">
+        <div className=" leading-relaxed flex flex-col justify-center items-center">
+            <span className="text-xl text-white font-mono py-10">
+                Start typing to see <em>typer-diff</em> in action.
+            </span>
             <DiffText></DiffText>
             <HiddenInput></HiddenInput>
         </div>
diff --git a/apps/docs/data/state.ts b/apps/docs/data/state.ts
@@ -14,8 +14,10 @@ export const diffText = atom((get) => {
 });
 
 export const allowModifications = atom((get) => {
-    const diff = get(diffText);
-    return !diff.end;
+    // incase you want to stop modifications (e.g. when the user has finished typing)
+    // const diff = get(diffText);
+    // return !diff.end;
+    return true;
 });
 
 export const isTyping = atom(true);
diff --git a/packages/typer-diff/README.md b/packages/typer-diff/README.md
@@ -1,3 +1,33 @@
 # Typer Diff
 
-![Typer Diff Demo](demo.png)
+![Typer Diff Demo](https://raw.githubusercontent.com/techboy-coder/typer-diff/main/assets/demo.png?token=GHSAT0AAAAAACSUZ6AC33WMWGPI4HJ5X47KZTYIUYQ)
+
+`type-diff` is a library to diff two strings, useful for showing for typing games (like [monkeytype](https://monkeytype.com/)) 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.
+
+## Usage
+
+**Usage:**
+
+```typescript
+import { diff } from "typer-diff";
+
+// ...
+return diff(text.original, text.text);
+// ...
+```
+
+**Types:**
+
+```typescript
+type DiffItem = {
+    value: string;
+    type: "correct" | "extra" | "missing" | "wrong" | "untouched" | "spacer";
+};
+type DiffResult = {
+    diff: DiffItem[];
+    end: boolean;
+};
+declare const diff: (originalText: string, typedText: string) => DiffResult;
+
+export { type DiffItem, type DiffResult, diff };
+```
diff --git a/packages/typer-diff/demo.png b/packages/typer-diff/demo.png
