chore: Updated deps, npm keywords, better landing page.

Author: Blankeos

README.md

@@ -4,16 +4,15 @@
 
 # solid-number-flow
 
-<!-- ![Demo](/_docs/demo.gif) -->
 <div align="center">
 <img src="_docs/demo.gif" alt="Demo"  />
 </div>
 
 <div align="center">
   <img src="https://img.shields.io/badge/maintained%20with-bun-cc00ff.svg?style=for-the-badge&logo=bun)](https://bun.sh/" alt="Bun"></img>
-  <img src="https://img.shields.io/npm/dw/bagon-hooks?style=for-the-badge" alt="NPM Downloads"></img>
-  <img src="https://img.shields.io/npm/l/bagon-hooks?style=for-the-badge" alt="NPM License"></img>
-  <img src="https://img.shields.io/bundlephobia/minzip/bagon-hooks?style=for-the-badge" alt="NPM Bundle Size" ></img>
+  <img src="https://img.shields.io/npm/dw/solid-number-flow?style=for-the-badge" alt="NPM Downloads"></img>
+  <img src="https://img.shields.io/npm/l/solid-number-flow?style=for-the-badge" alt="NPM License"></img>
+  <img src="https://img.shields.io/bundlephobia/minzip/solid-number-flow?style=for-the-badge" alt="NPM Bundle Size" ></img>
 </div>
 
 A SolidJS component to transition, format, and localize numbers. Forked from [@barvian/number-flow](https://github.com/barvian/number-flow).
@@ -36,4 +35,16 @@ Use it:
 
 ```tsx
 import solid-number-flow from 'solid-number-flow'
+
+export default function Page() {
+  const [value, setValue] = createSignal(398.43);
+
+  return (
+    <>
+      <button onClick={() => setValue(Math.random() * 1000)}>Random</button>
+      <NumberFlow value={value()} />
+    </>
+  )
+}
+
 ```

bun.lockb

@@ -1,6 +1,6 @@
-import { createEffect, createResource, createSignal, FlowProps, JSX, Show } from 'solid-js';
 import * as shikiji from 'shikiji';
-import { Dynamic, render } from 'solid-js/web';
+import { createEffect, createResource, createSignal, FlowProps, JSX, Show } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
 import { MDXProvider } from 'solid-marked';
 
 export function Markdown(props: FlowProps) {
@@ -48,7 +48,12 @@ export function Markdown(props: FlowProps) {
               });
             }
           });
-          return <div ref={setRef} lang={props.lang ?? undefined} />;
+          return (
+            <div ref={setRef} lang={props.lang ?? undefined}>
+              {/* Render the code without syntax highlights but less opaque. */}
+              <pre class="opacity-40">{props.children}</pre>
+            </div>
+          );
         },
         InlineCode(props): JSX.Element {
           return <code>{props.children}</code>;

dev/markdown.tsx

@@ -75,6 +75,7 @@
     "postcss": "^8.4.47",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
+    "shiki": "^1.22.0",
     "shikiji": "^0.10.2",
     "solid-js": "^1.9.2",
     "solid-marked": "^0.6.3",
@@ -90,7 +91,16 @@
     "vitest": "^1.6.0"
   },
   "keywords": [
-    "solid"
+    "solid",
+    "solid-js",
+    "number-flow",
+    "slot machine",
+    "accessible",
+    "odometer",
+    "animation",
+    "number-format",
+    "number-animation",
+    "animated-number"
   ],
   "engines": {
     "node": ">=18"