From 664a946c816ea4e2cd31d4a160a317b2b1630f63 Mon Sep 17 00:00:00 2001
From: rasvanjaya21 <mrsejati17@gmail.com>
Date: Sat, 9 Nov 2024 11:01:51 +0700
Subject: [PATCH 1/3] doc: add break word all for better ux

---
 demo-tabs.tsx                                          | 2 +-
 packages/docs/content/docs/basic-usage.mdx             | 2 +-
 packages/docs/src/app/(pages)/_landing/demo.client.tsx | 2 +-
 packages/docs/src/app/(pages)/_landing/demo.tsx        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/demo-tabs.tsx b/demo-tabs.tsx
index 6bc1df99a..a1ec9164a 100644
--- a/demo-tabs.tsx
+++ b/demo-tabs.tsx
@@ -24,7 +24,7 @@ export function Demo() {
 				onChange={e => setHello(e.target.value || null)}
 				data-interacted={Boolean(hello)}
 			/>
-			<p>Hello, {hello || 'anonymous visitor'}!</p>
+			<p className="break-all">Hello, {hello || 'anonymous visitor'}!</p>
 		</>
 	)
 }
diff --git a/packages/docs/content/docs/basic-usage.mdx b/packages/docs/content/docs/basic-usage.mdx
index ddf2ed1dd..cfe1abe98 100644
--- a/packages/docs/content/docs/basic-usage.mdx
+++ b/packages/docs/content/docs/basic-usage.mdx
@@ -28,7 +28,7 @@ export function Demo() {
     <>
       <input value={name || ''} onChange={e => setName(e.target.value)} />
       <button onClick={() => setName(null)}>Clear</button>
-      <p>Hello, {name || 'anonymous visitor'}!</p>
+      <p className="break-all">Hello, {name || 'anonymous visitor'}!</p>
     </>
   )
 }
diff --git a/packages/docs/src/app/(pages)/_landing/demo.client.tsx b/packages/docs/src/app/(pages)/_landing/demo.client.tsx
index 1222c33a8..c662777f5 100644
--- a/packages/docs/src/app/(pages)/_landing/demo.client.tsx
+++ b/packages/docs/src/app/(pages)/_landing/demo.client.tsx
@@ -25,7 +25,7 @@ export function Demo() {
         onChange={e => setHello(e.target.value || null)}
         data-interacted={Boolean(hello)}
       />
-      <p>Hello, {hello || 'anonymous visitor'}!</p>
+      <p className="break-all">Hello, {hello || 'anonymous visitor'}!</p>
     </>
   )
 }
diff --git a/packages/docs/src/app/(pages)/_landing/demo.tsx b/packages/docs/src/app/(pages)/_landing/demo.tsx
index 567239e34..1ced47278 100644
--- a/packages/docs/src/app/(pages)/_landing/demo.tsx
+++ b/packages/docs/src/app/(pages)/_landing/demo.tsx
@@ -21,7 +21,7 @@ export async function LandingDemo() {
           <div className="mb-4 h-[136px] animate-pulse rounded bg-zinc-50 dark:bg-zinc-900 sm:h-10" />
         }
       >
-        <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center">
+        <div className="mb-4 flex flex-col gap-4 items-start sm:flex-row">
           <Demo />
           <LookAtTheURL />
         </div>

From 97f03ea8b41cc7377a583b717c3b4198c2f282e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Best?= <github@francoisbest.com>
Date: Thu, 30 Jan 2025 15:48:05 +0100
Subject: [PATCH 2/3] doc: Remove styles from API docs

---
 packages/docs/content/docs/basic-usage.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/content/docs/basic-usage.mdx b/packages/docs/content/docs/basic-usage.mdx
index cfe1abe98..ddf2ed1dd 100644
--- a/packages/docs/content/docs/basic-usage.mdx
+++ b/packages/docs/content/docs/basic-usage.mdx
@@ -28,7 +28,7 @@ export function Demo() {
     <>
       <input value={name || ''} onChange={e => setName(e.target.value)} />
       <button onClick={() => setName(null)}>Clear</button>
-      <p className="break-all">Hello, {name || 'anonymous visitor'}!</p>
+      <p>Hello, {name || 'anonymous visitor'}!</p>
     </>
   )
 }

From f74b8691b5f1b3e244105975e8d673cfe9997744 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Best?= <github@francoisbest.com>
Date: Thu, 30 Jan 2025 15:56:12 +0100
Subject: [PATCH 3/3] style: Keep inline in sm+ and scroll/ellipsis on overflow

---
 .../docs/src/app/(pages)/_landing/demo.client.tsx |  4 +++-
 packages/docs/src/app/(pages)/_landing/demo.tsx   | 15 +++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/docs/src/app/(pages)/_landing/demo.client.tsx b/packages/docs/src/app/(pages)/_landing/demo.client.tsx
index c662777f5..5257cbca8 100644
--- a/packages/docs/src/app/(pages)/_landing/demo.client.tsx
+++ b/packages/docs/src/app/(pages)/_landing/demo.client.tsx
@@ -25,7 +25,9 @@ export function Demo() {
         onChange={e => setHello(e.target.value || null)}
         data-interacted={Boolean(hello)}
       />
-      <p className="break-all">Hello, {hello || 'anonymous visitor'}!</p>
+      <p className="sm:overflow-x-auto sm:text-ellipsis sm:text-nowrap">
+        Hello, {hello || 'anonymous visitor'}!
+      </p>
     </>
   )
 }
diff --git a/packages/docs/src/app/(pages)/_landing/demo.tsx b/packages/docs/src/app/(pages)/_landing/demo.tsx
index 1ced47278..2711951d0 100644
--- a/packages/docs/src/app/(pages)/_landing/demo.tsx
+++ b/packages/docs/src/app/(pages)/_landing/demo.tsx
@@ -1,5 +1,6 @@
 import { CodeBlock } from '@/src/components/code-block'
 import fs from 'node:fs/promises'
+import { format } from 'prettier'
 import { Suspense } from 'react'
 import { Demo } from './demo.client'
 
@@ -7,13 +8,15 @@ export async function LandingDemo() {
   const demoFilePath =
     process.cwd() + '/src/app/(pages)/_landing/demo.client.tsx'
   const demoFile = await fs.readFile(demoFilePath, 'utf8')
+  // Poor man's AST manipulation
   const demoCode = demoFile
+    .replace(/className=".+"/g, '') // Strip styling
     .split('\n')
-    .filter(
-      line =>
-        !line.includes('className="') && !line.includes('data-interacted=')
-    )
+    .filter(line => !line.includes('data-interacted='))
     .join('\n')
+  const formattedCode = await format(demoCode, {
+    parser: 'typescript'
+  })
   return (
     <>
       <Suspense
@@ -21,12 +24,12 @@ export async function LandingDemo() {
           <div className="mb-4 h-[136px] animate-pulse rounded bg-zinc-50 dark:bg-zinc-900 sm:h-10" />
         }
       >
-        <div className="mb-4 flex flex-col gap-4 items-start sm:flex-row">
+        <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center">
           <Demo />
           <LookAtTheURL />
         </div>
       </Suspense>
-      <CodeBlock code={demoCode} />
+      <CodeBlock code={formattedCode} />
     </>
   )
 }