doc: add break word all for better ux (#753)

* doc: add break word all for better ux

* doc: Remove styles from API docs

* style: Keep inline in sm+ and scroll/ellipsis on overflow

---------

Co-authored-by: François Best <github@francoisbest.com>

Author: rasvanjaya21

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>
 		</>
 	)
 }

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>Hello, {hello || 'anonymous visitor'}!</p>
+      <p className="sm:overflow-x-auto sm:text-ellipsis sm:text-nowrap">
+        Hello, {hello || 'anonymous visitor'}!
+      </p>
     </>
   )
 }

packages/docs/src/app/(pages)/_landing/demo.tsx

@@ -1,19 +1,22 @@
 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'
 
 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
@@ -26,7 +29,7 @@ export async function LandingDemo() {
           <LookAtTheURL />
         </div>
       </Suspense>
-      <CodeBlock code={demoCode} />
+      <CodeBlock code={formattedCode} />
     </>
   )
 }