docs: redesign homepage and improve documentation styling (#13)

- Update basefn from v1.3.0 to v1.8.0 for new component variants
- Redesign landing page with centered hero section, gradient title,
  feature cards with icons, code showcase sections, and bottom CTA
- Use Card variant={Outlined} across all API reference and doc pages
  for consistent card styling
- Update CSS to use basefn semantic tokens (--basefn-border-primary,
  --basefn-bg-tertiary, etc.) instead of legacy --basefn-color-* vars
- Add hero, feature section, and code showcase CSS classes with
  responsive breakpoints
- Improve typography spacing and card header monospace font styling
- Code blocks: use both github and github-dark highlight.js themes for
  proper light/dark mode support, remove hardcoded #0d1117 background
- Landing page: remove separators, redesign "Why" section with split
  layout (title+description left, stacked benefits right)
- Topbar: single "rescript-signals" title, add nav links (Installation,
  API Reference, Examples), fetch version from npm registry, add theme
  toggle and GitHub icon
- Doc pages: remove Card wrappers from documentation sections, use
  heading anchors with # links for all H2/H3 headings
- Layout: center doc content with max-width 780px and auto margins
- Breadcrumbs: remove "Home" entry, use semantic color tokens
- Key characteristics in Computed page: use bullet list instead of cards

Author: brnrdog

docs-website/package-lock.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@rescript/core": "^1.6.1",
+    "basefn": "^1.8.0",
     "rescript-signals": "^1.3.3",
-    "xote": "^4.11.0",
-    "basefn": "^1.3.0"
+    "xote": "^4.11.0"
   },
   "devDependencies": {
     "rescript": "^12.0.0",

docs-website/package.json

@@ -2,7 +2,22 @@ open Xote
 open Xote.ReactiveProp
 open Basefn
 
-let version = "1.3.3"
+// Fetch latest version from npm registry
+@val external fetch: string => promise<'a> = "fetch"
+@send external json: 'a => promise<'b> = "json"
+
+let npmVersion = Signal.make("...")
+
+let _ = fetch("https://registry.npmjs.org/rescript-signals/latest")
+->Promise.then(response => response->json)
+->Promise.then((data: {"version": string}) => {
+  Signal.set(npmVersion, data["version"])
+  Promise.resolve()
+})
+->Promise.catch(_ => {
+  Signal.set(npmVersion, "1.3.3")
+  Promise.resolve()
+})
 
 // Helper to check if a URL matches the current path
 let isActive = (url: string, pathname: string) => {
@@ -44,20 +59,27 @@ let make = () => {
 
   let logo =
     <Router.Link to="/" style="text-decoration: none; color: inherit;">
-      <Typography text={static("ReScript Signals")} variant={H4} />
+      <Typography text={static("rescript-signals")} variant={H4} />
     </Router.Link>
 
   let topbarLeft =
-    <Router.Link to="/" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 0.75rem;">
-      <Typography text={static("ReScript Signals")} variant={H5} />
-      <Badge label={Signal.make("v" ++ version)} variant={Secondary} />
-    </Router.Link>
+    <div style="display: flex; align-items: center; gap: 1rem;">
+      <Router.Link to="/" style="text-decoration: none; color: inherit; display: flex; align-items: center;">
+        <Typography text={static("rescript-signals")} variant={H5} />
+      </Router.Link>
+      <div class="topbar-nav-links">
+        <Router.Link to="/getting-started"> {Component.text("Installation")} </Router.Link>
+        <Router.Link to="/api/signal"> {Component.text("API Reference")} </Router.Link>
+        <Router.Link to="/examples"> {Component.text("Examples")} </Router.Link>
+      </div>
+    </div>
 
   let topbarRight =
-    <div style="display: flex; align-items: center; gap: 1rem;">
+    <div style="display: flex; align-items: center; gap: 0.75rem;">
       <div style="width: 200px;">
         <Search />
       </div>
+      <Badge label={Computed.make(() => "v" ++ Signal.get(npmVersion))} variant={Secondary} size={Sm} />
       <a
         href="https://github.com/brnrdog/rescript-signals"
         target="_blank"
@@ -87,7 +109,7 @@ let make = () => {
         [
           <div style="min-height: 100vh; display: flex; flex-direction: column;">
             {topbar}
-            <main style="flex: 1; padding: 2rem; max-width: 1200px; margin: 0 auto; width: 100%;">
+            <main style="flex: 1;">
               {routes}
             </main>
           </div>,
@@ -97,7 +119,7 @@ let make = () => {
         let sidebar = <Sidebar logo sections />
         [
           <AppLayout sidebar topbar>
-            <div style="padding: 2rem; max-width: 900px;">
+            <div class="doc-content">
               <Breadcrumbs />
               {routes}
               <PageNavigation />

docs-website/src/App.res

@@ -7,15 +7,13 @@ type breadcrumb = {
 
 // Map paths to their breadcrumb hierarchy
 let getBreadcrumbs = (pathname: string): array<breadcrumb> => {
-  let home = {label: "Home", url: Some("/")}
-
   switch pathname {
-  | "/getting-started" => [home, {label: "Getting Started", url: None}]
-  | "/api/signal" => [home, {label: "API Reference", url: None}, {label: "Signal", url: None}]
-  | "/api/computed" => [home, {label: "API Reference", url: None}, {label: "Computed", url: None}]
-  | "/api/effect" => [home, {label: "API Reference", url: None}, {label: "Effect", url: None}]
-  | "/examples" => [home, {label: "Examples", url: None}]
-  | "/release-notes" => [home, {label: "Release Notes", url: None}]
+  | "/getting-started" => [{label: "Getting Started", url: None}]
+  | "/api/signal" => [{label: "API Reference", url: None}, {label: "Signal", url: None}]
+  | "/api/computed" => [{label: "API Reference", url: None}, {label: "Computed", url: None}]
+  | "/api/effect" => [{label: "API Reference", url: None}, {label: "Effect", url: None}]
+  | "/examples" => [{label: "Examples", url: None}]
+  | "/release-notes" => [{label: "Release Notes", url: None}]
   | _ => []
   }
 }
@@ -32,27 +30,27 @@ let make = () => {
         []
       } else {
         [
-          <nav style="margin-bottom: 1rem;">
-            <div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--basefn-color-muted);">
+          <nav style="margin-bottom: 1.5rem;">
+            <div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--basefn-text-tertiary);">
               {Component.fragment(
                 crumbs->Array.mapWithIndex((crumb, idx) => {
                   let isLast = idx == Array.length(crumbs) - 1
                   let separator = if !isLast {
-                    <span style="color: var(--basefn-color-muted);"> {"/"->Component.text} </span>
+                    <span style="color: var(--basefn-text-muted);"> {"/"->Component.text} </span>
                   } else {
                     <span />
                   }
 
                   switch crumb.url {
                   | Some(url) =>
                     <span>
-                      <Router.Link to={url} style="color: var(--basefn-color-muted); text-decoration: none;">
+                      <Router.Link to={url} style="color: var(--basefn-text-tertiary); text-decoration: none;">
                         {crumb.label->Component.text}
                       </Router.Link>
                       {separator}
                     </span>
                   | None =>
-                    <span style={isLast ? "color: var(--basefn-color-foreground);" : ""}>
+                    <span style={isLast ? "color: var(--basefn-text-primary);" : ""}>
                       {crumb.label->Component.text}
                       {separator}
                     </span>

docs-website/src/components/Breadcrumbs.res

@@ -2,6 +2,7 @@ open Xote
 open Xote.ReactiveProp
 open Basefn
 
+%%raw(`import 'highlight.js/styles/github.min.css'`)
 %%raw(`import 'highlight.js/styles/github-dark.min.css'`)
 
 @module("highlight.js") external hljs: 'a = "default"
@@ -50,11 +51,11 @@ let make = (~code: string, ~language: string="rescript") => {
   }
 
   <div style="position: relative;">
-    <pre class="code-block" style="background: #0d1117; padding: 1rem; padding-right: 4rem; border-radius: 8px; overflow-x: auto; margin: 0.5rem 0;">
+    <pre class="code-block hljs" style="padding: 1rem; padding-right: 4rem; border-radius: var(--basefn-radius-lg); overflow-x: auto; margin: 0.5rem 0; border: 1px solid var(--basefn-border-primary);">
       <code
         id
         class={"language-" ++ language}
-        style="font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; font-size: 14px; line-height: 1.5;">
+        style="font-family: var(--basefn-font-family-mono); font-size: 14px; line-height: 1.5;">
         {Component.text(code)}
       </code>
     </pre>