Skip to content

Commit cab00fb

Browse files
techboy-codertechboy-coder
committed
fix for mobile
1 parent 800a792 commit cab00fb

File tree

9 files changed

+18
-16
lines changed

9 files changed

+18
-16
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# Typer Diff
22

3-
![Typer Diff Demo](https://typer-diff.shivi.io/demo.png)
3+
![Typer Diff Demo](https://typer-diff.vercel.app/demo.png)
44

5-
`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.
5+
`typer-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.
66

7-
Check out a demo at [typer-diff.shivi.io](https://typer-diff.shivi.io/).
7+
Check out a demo at [typer-diff.shivi.io](https://typer-diff.vercel.app/).
88
## Usage
99

1010
**Usage:**

‎apps/docs/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
# Typer Diff Demo App
22

3-
![Typer Diff Demo](https://typer-diff.shivi.io/demo.png)
3+
![Typer Diff Demo](https://typer-diff.vercel.app/demo.png)
44

5-
`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.
5+
`typer-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.
66

77
## Demo App
88

99
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/)).
1010

11-
Check out a demo at [typer-diff.shivi.io](https://typer-diff.shivi.io/).
11+
Check out a demo at [typer-diff.shivi.io](https://typer-diff.vercel.app/).

‎apps/docs/app/components/DiffText.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@ export default function DiffText() {
1010
const [typing, setTyping] = useAtom(isTyping);
1111
const ref = useRef<HTMLDivElement>(null);
1212
useClickInside(ref, () => {
13+
document.getElementById("hidden-input")?.focus();
1314
setTyping(true);
1415
});
1516
useClickOutside(ref, () => {
1617
setTyping(false);
1718
});
1819
return (
1920
<div
20-
className="text-3xl text-white/50 font-mono leading-relaxed tracking-wide overflow-x-hidden scroll mx-auto max-w-screen-lg"
21+
className="md:text-3xl text-white/50 font-mono leading-relaxed tracking-wide overflow-x-hidden scroll mx-auto max-w-screen-lg"
2122
ref={ref}>
2223
{diff.diff.map((item, index) => (
2324
<span

‎apps/docs/app/components/HiddenInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export default function HiddenInput() {
3333
type="text"
3434
className="fixed -top-95 opacity-0"
3535
value={text.text}
36+
id="hidden-input"
3637
onChange={(e) => {
3738
if (allow) {
3839
setText((text) => {

‎apps/docs/app/layout.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const inter = Inter({ subsets: ["latin"] });
77
export const metadata: Metadata = {
88
title: "typer-diff",
99
description:
10-
"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.",
10+
"typer-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.",
1111
};
1212

1313
export default function RootLayout({
@@ -18,8 +18,8 @@ export default function RootLayout({
1818
return (
1919
<html lang="en">
2020
<body
21-
className={`bg-black text-white font-mono h-screen overscroll-none`}>
22-
<nav className="flex justify-center items-center space-x-4 text-white/75 py-20">
21+
className={`bg-black text-white font-mono h-screen overscroll-none px-10`}>
22+
<nav className="flex justify-center items-center space-x-4 text-white/75 pt-20 md:pb-20 pb-10">
2323
<a
2424
href="https://github.com/techboy-coder/typer-diff"
2525
target="_blank">

‎apps/docs/app/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import HiddenInput from "./components/HiddenInput";
44
export default function Home() {
55
return (
66
<div className=" leading-relaxed flex flex-col justify-center items-center">
7-
<span className="text-xl text-white font-mono py-10">
7+
<span className="md:text-xl text-white font-mono pb-10">
88
Start typing to see <em>typer-diff</em> in action.
99
</span>
1010
<DiffText></DiffText>

‎apps/docs/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.6",
44
"private": true,
55
"scripts": {
6-
"dev": "next dev --turbo",
6+
"dev": "next dev --turbo -H 0.0.0.0",
77
"build": "next build",
88
"start": "next start",
99
"lint": "next lint"

‎packages/typer-diff/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# Typer Diff
22

3-
![Typer Diff Demo](https://typer-diff.shivi.io/demo.png)
3+
![Typer Diff Demo](https://typer-diff.vercel.app/demo.png)
44

5-
`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.
5+
`typer-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.
66

7-
Check out a demo at [typer-diff.shivi.io](https://typer-diff.shivi.io/).
7+
Check out a demo at [typer-diff.shivi.io](https://typer-diff.vercel.app/).
88

99
## Usage
1010

‎packages/typer-diff/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"name": "Shivram Sambhus",
1010
"email": "[email protected]"
1111
},
12-
"description": "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.",
12+
"description": "typer-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.",
1313
"homepage": "http://typer-diff.shivi.io/",
1414
"bugs": "https://github.com/techboy-coder/typer-diff/issues",
1515
"repository": {

0 commit comments

Comments
 (0)