refinement

quantizor · quantizor · commit 77c1fb540e64 · 2025-11-20T20:15:15.000-05:00
diff --git a/README.md b/README.md
@@ -660,6 +660,19 @@ compiler('This text has <span>html</span> in it but it won't be rendered', { dis
 
 When using [fenced code blocks](https://www.markdownguide.org/extended-syntax/#syntax-highlighting) with language annotation, that language will be added to the `<code>` element as `class="lang-${language}"`. For best results, you can use `options.overrides` to provide an appropriate syntax highlighting integration like this one using `highlight.js`:
 
+```html
+<!-- Add the following tags to your page <head> to automatically load hljs and styles: -->
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/obsidian.min.css"
+/>
+
+<script
+  crossorigin
+  src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"
+></script>
+```
+
 ````tsx
 import { Markdown, RuleType } from 'markdown-to-jsx'
 
@@ -678,23 +691,6 @@ function App() {
   )
 }
 
-/**
- * Add the following tags to your page <head> to automatically load hljs and styles:
-
-  <link
-    rel="stylesheet"
-    href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/nord.min.css"
-  />
-
-  * NOTE: for best performance, load individual languages you need instead of all
-          of them. See their docs for more info: https://highlightjs.org/
-
-  <script
-    crossorigin
-    src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"
-  ></script>
- */
-
 function SyntaxHighlightedCode(props) {
   const ref = (React.useRef < HTMLElement) | (null > null)
 
@@ -859,7 +855,7 @@ The two leading spaces in front of "# Hello" would be left-trimmed from all line
 <div>
 ```js
 var some = code();
-``\`
+```
 </div>
 ````
 
@@ -1037,7 +1033,7 @@ The AST consists of the following node types (use `RuleType` to check node types
 
 ### Example AST Structure
 
-```tsx
+````tsx
 import { parser, RuleType } from 'markdown-to-jsx'
 
 const ast = parser(`# Hello World
@@ -1046,9 +1042,10 @@ This is a **paragraph** with [a link](https://example.com).
 
 [linkref]: https://example.com
 
-\`\`\`javascript
+```javascript
 console.log('code')
-\`\`\`
+```
+
 `)
 
 // AST structure:
@@ -1057,8 +1054,8 @@ console.log('code')
   {
     type: RuleType.refCollection,
     refs: {
-      "linkref": { target: "https://example.com", title: undefined }
-    }
+      linkref: { target: 'https://example.com', title: undefined },
+    },
   },
   {
     type: RuleType.heading,
@@ -1088,9 +1085,10 @@ console.log('code')
     type: RuleType.codeBlock,
     lang: 'javascript',
     text: "console.log('code')",
-  })
+  },
 ]
-```
+
+````
 
 ### Type Checking
 
diff --git a/site.tsx b/site.tsx
@@ -116,6 +116,56 @@ function PresetSelector({
   )
 }
 
+function FloatingText({ text }: { text: string }) {
+  const letters = React.useMemo(() => {
+    return text.split('').map((char, index) => {
+      const maxOffset = 3
+      const duration = 6 + Math.random() * 4
+      const delay = Math.random() * 2
+
+      const offsets = [
+        {
+          x: (Math.random() - 0.5) * maxOffset * 2,
+          y: (Math.random() - 0.5) * maxOffset * 2,
+        },
+        {
+          x: (Math.random() - 0.5) * maxOffset * 2,
+          y: (Math.random() - 0.5) * maxOffset * 2,
+        },
+        {
+          x: (Math.random() - 0.5) * maxOffset * 2,
+          y: (Math.random() - 0.5) * maxOffset * 2,
+        },
+      ]
+
+      return {
+        char,
+        key: index,
+        style: {
+          '--offset-x-1': `${offsets[0].x}px`,
+          '--offset-y-1': `${offsets[0].y}px`,
+          '--offset-x-2': `${offsets[1].x}px`,
+          '--offset-y-2': `${offsets[1].y}px`,
+          '--offset-x-3': `${offsets[2].x}px`,
+          '--offset-y-3': `${offsets[2].y}px`,
+          '--duration': `${duration}s`,
+          '--delay': `${delay}s`,
+        } as React.CSSProperties,
+      }
+    })
+  }, [text])
+
+  return (
+    <>
+      {letters.map(({ char, key, style }) => (
+        <span key={key} className="float-letter" style={style}>
+          {char === ' ' ? '\u00A0' : char}
+        </span>
+      ))}
+    </>
+  )
+}
+
 function TryItLive() {
   const [markdown, setMarkdown] = React.useState(
     document.getElementById('sample-content')?.textContent?.trim() || ''
@@ -145,7 +195,7 @@ function TryItLive() {
         <div className=" mx-auto text-base space-y-6">
           <h1 className="text-accent leading-tight">
             <span className="font-display tracking-widest text-[9vw]">
-              markdown-to-jsx
+              <FloatingText text="markdown-to-jsx" />
               <span className="text-[max(1vw,16px)] font-sans tracking-wider">
                 v{VERSION}
               </span>
@@ -161,6 +211,13 @@ function TryItLive() {
           <a
             className={`no-underline py-1 px-3 backdrop-blur-xs rounded-xl text-sm ${gradient}`}
             href="#docs"
+            onClick={e => {
+              e.preventDefault()
+              const element = document.getElementById('docs')
+              if (element) {
+                element.scrollIntoView({ behavior: 'smooth' })
+              }
+            }}
           >
             Jump to docs
           </a>
@@ -200,6 +257,7 @@ function TryItLive() {
 
       <Markdown
         className="max-w-2xl prose prose-invert prose-sm center"
+        id="docs"
         options={options}
       >
         {readmeContent}
diff --git a/src/site/index.css b/src/site/index.css
@@ -37,7 +37,7 @@
     color: var(--color-fg, #fefefe);
     font-family: var(--font-sans);
     font-size: 16px;
-    line-height: 1.5;
+    line-height: 1.375;
   }
 
   h1,
@@ -181,6 +181,10 @@
   }
 }
 
+.prose {
+  line-height: inherit;
+}
+
 .prose :is(h2, h3, h4, h5, h6) {
   margin: 3em 0 1em;
 }
@@ -243,3 +247,26 @@
   animation: gradient-shift 6s ease-in-out infinite alternate;
   background-size: 200% 200%;
 }
+
+@keyframes float-wander {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  25% {
+    transform: translate(var(--offset-x-1), var(--offset-y-1));
+  }
+  50% {
+    transform: translate(var(--offset-x-2), var(--offset-y-2));
+  }
+  75% {
+    transform: translate(var(--offset-x-3), var(--offset-y-3));
+  }
+}
+
+.float-letter {
+  display: inline-block;
+  animation: float-wander var(--duration, 4s)
+    cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
+  animation-delay: var(--delay, 0s);
+}
diff --git a/src/site/lava-lamp.tsx b/src/site/lava-lamp.tsx
@@ -492,6 +492,8 @@ export function LavaLamp({ className }: { className?: string }) {
           usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
         })
         let isSaving = false
+        const saveArrayLength = numParticles * 12
+        const saveArray = new Array<number>(saveArrayLength)
 
         const updateCanvasSize = () => {
           const width = window.innerWidth
@@ -609,15 +611,20 @@ export function LavaLamp({ className }: { className?: string }) {
                       stagingBuffer.getMappedRange()
                     )
                     if (
-                      data.length === numParticles * 12 &&
+                      data.length === saveArrayLength &&
                       data.some(v => v !== 0)
                     ) {
                       try {
+                        for (let i = 0; i < saveArrayLength; i++) {
+                          saveArray[i] = data[i]
+                        }
                         localStorage.setItem(
                           'lava-lamp-particles',
-                          JSON.stringify(Array.from(data))
+                          JSON.stringify(saveArray)
                         )
-                      } catch (e) {}
+                      } catch (e) {
+                        console.error('Error saving particles:', e)
+                      }
                     }
                     stagingBuffer.unmap()
                     isSaving = false
