lightview 1.8.2 → 2.0.0

package/docs/getting-started/reviews.html

@@ -0,0 +1,23 @@
+<!-- This file is loaded dynamically via Lightview's src attribute -->
+<!-- Demonstrates hypermedia: clicking an href triggers loading this content -->
+<!-- Template literals access parent signals/state via signal.get() -->
+<div style="padding: 1rem; background: #f8fafc; border-radius: 8px; margin-top: 1rem;">
+    <p style="color: #6366f1; font-weight: 500; font-size: 0.8em; margin-bottom: 0.5rem;">
+        Displaying ${signal.get('reviewCount').value} reviews in ${signal.get('currentFormat').value} format.
+    </p>
+    <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+        <strong style="color: #f59e0b;">⭐⭐⭐⭐⭐</strong>
+        <span style="margin-left: 0.5rem; color: #334155;">"Best shoes ever! Super comfortable and stylish."</span>
+        <div style="font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;">— Maria S.</div>
+    </div>
+    <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+        <strong style="color: #f59e0b;">⭐⭐⭐⭐</strong>
+        <span style="margin-left: 0.5rem; color: #334155;">"Great quality for the price. Would buy again."</span>
+        <div style="font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;">— John D.</div>
+    </div>
+    <div style="padding: 0.75rem;">
+        <strong style="color: #f59e0b;">⭐⭐⭐⭐⭐</strong>
+        <span style="margin-left: 0.5rem; color: #334155;">"Perfect fit! Arrived faster than expected."</span>
+        <div style="font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;">— Alex K.</div>
+    </div>
+</div>

package/docs/getting-started/reviews.odom

@@ -0,0 +1,108 @@
+[
+    {
+        "div": {
+            "style": "padding: 1rem; background: #f8fafc; border-radius: 8px; margin-top: 1rem;",
+            "children": [
+                {
+                    "p": {
+                        "style": "color: #6366f1; font-weight: 500; font-size: 0.8em; margin-bottom: 0.5rem;",
+                        "children": ["Displaying ${signal.get('reviewCount').value} reviews in ${signal.get('currentFormat').value} format."]
+                    }
+                },
+                {
+                    "div": {
+                        "style": "padding: 0.75rem; border-bottom: 1px solid #e2e8f0;",
+                        "children": [
+                            {
+                                "strong": {
+                                    "style": "color: #f59e0b;",
+                                    "children": [
+                                        "⭐⭐⭐⭐⭐"
+                                    ]
+                                }
+                            },
+                            {
+                                "span": {
+                                    "style": "margin-left: 0.5rem; color: #334155;",
+                                    "children": [
+                                        "\"Best shoes ever! Super comfortable and stylish.\""
+                                    ]
+                                }
+                            },
+                            {
+                                "div": {
+                                    "style": "font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;",
+                                    "children": [
+                                        "— Maria S."
+                                    ]
+                                }
+                            }
+                        ]
+                    }
+                },
+                {
+                    "div": {
+                        "style": "padding: 0.75rem; border-bottom: 1px solid #e2e8f0;",
+                        "children": [
+                            {
+                                "strong": {
+                                    "style": "color: #f59e0b;",
+                                    "children": [
+                                        "⭐⭐⭐⭐"
+                                    ]
+                                }
+                            },
+                            {
+                                "span": {
+                                    "style": "margin-left: 0.5rem; color: #334155;",
+                                    "children": [
+                                        "\"Great quality for the price. Would buy again.\""
+                                    ]
+                                }
+                            },
+                            {
+                                "div": {
+                                    "style": "font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;",
+                                    "children": [
+                                        "— John D."
+                                    ]
+                                }
+                            }
+                        ]
+                    }
+                },
+                {
+                    "div": {
+                        "style": "padding: 0.75rem;",
+                        "children": [
+                            {
+                                "strong": {
+                                    "style": "color: #f59e0b;",
+                                    "children": [
+                                        "⭐⭐⭐⭐⭐"
+                                    ]
+                                }
+                            },
+                            {
+                                "span": {
+                                    "style": "margin-left: 0.5rem; color: #334155;",
+                                    "children": [
+                                        "\"Perfect fit! Arrived faster than expected.\""
+                                    ]
+                                }
+                            },
+                            {
+                                "div": {
+                                    "style": "font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;",
+                                    "children": [
+                                        "— Alex K."
+                                    ]
+                                }
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
+    }
+]

package/docs/getting-started/reviews.vdom

@@ -0,0 +1,84 @@
+[
+  {
+    "tag": "div",
+    "attributes": {
+      "style": "padding: 1rem; background: #f8fafc; border-radius: 8px; margin-top: 1rem;"
+    },
+    "children": [
+      {
+        "tag": "p",
+        "attributes": { "style": "color: #6366f1; font-weight: 500; font-size: 0.8em; margin-bottom: 0.5rem;" },
+        "children": ["Displaying ${signal.get('reviewCount').value} reviews in ${signal.get('currentFormat').value} format."]
+      },
+      {
+        "tag": "div",
+        "attributes": {
+          "style": "padding: 0.75rem; border-bottom: 1px solid #e2e8f0;"
+        },
+        "children": [
+          {
+            "tag": "strong",
+            "attributes": { "style": "color: #f59e0b;" },
+            "children": ["⭐⭐⭐⭐⭐"]
+          },
+          {
+            "tag": "span",
+            "attributes": { "style": "margin-left: 0.5rem; color: #334155;" },
+            "children": ["\"Best shoes ever! Super comfortable and stylish.\""]
+          },
+          {
+            "tag": "div",
+            "attributes": { "style": "font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;" },
+            "children": ["— Maria S."]
+          }
+        ]
+      },
+      {
+        "tag": "div",
+        "attributes": {
+          "style": "padding: 0.75rem; border-bottom: 1px solid #e2e8f0;"
+        },
+        "children": [
+          {
+            "tag": "strong",
+            "attributes": { "style": "color: #f59e0b;" },
+            "children": ["⭐⭐⭐⭐"]
+          },
+          {
+            "tag": "span",
+            "attributes": { "style": "margin-left: 0.5rem; color: #334155;" },
+            "children": ["\"Great quality for the price. Would buy again.\""]
+          },
+          {
+            "tag": "div",
+            "attributes": { "style": "font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;" },
+            "children": ["— John D."]
+          }
+        ]
+      },
+      {
+        "tag": "div",
+        "attributes": {
+          "style": "padding: 0.75rem;"
+        },
+        "children": [
+          {
+            "tag": "strong",
+            "attributes": { "style": "color: #f59e0b;" },
+            "children": ["⭐⭐⭐⭐⭐"]
+          },
+          {
+            "tag": "span",
+            "attributes": { "style": "margin-left: 0.5rem; color: #334155;" },
+            "children": ["\"Perfect fit! Arrived faster than expected.\""]
+          },
+          {
+            "tag": "div",
+            "attributes": { "style": "font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;" },
+            "children": ["— Alex K."]
+          }
+        ]
+      }
+    ]
+  }
+]

package/docs/index.html

@@ -1,44 +1,134 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Lightview</title>
-    <link rel="stylesheet" href="css/highlightjs.min.css">
-    <script src="javascript/highlightjs.min.js"></script>
-    <script>hljs.highlightAll();</script>
-</head>
-<body style="min-width:100%;height:98vh;overflow:hidden">
-<div id="tabs" style="display:flex;flex-direction:row;min-width:100%;border-bottom:1px solid;padding-bottom:5px;">
-    <span style="flex-grow:0.2;">
-      <a href="./lightview.html" target="content">Lightview</a>
-    </span>
-    <span style="flex-grow:0.4;text-align:center">
-      <a href="./tutorial/0-getting-started.html" target="content" as="l-tutorial-1">Tutorial</a>
-      <a href="./comparedto.html" target="content">Compared To</a>
-      <a href="./api.html" target="content">API</a>
-      <a href="./components/chart-repl.html" target="content">Components</a>
-      <a href="./websiterepl.html" target="content">REPL</a>
-    </span>
-    <span style="flex-grow:0.2;text-align:right;">
-      <a class="tabctrl" href="https://github.com/anywhichway/lightview" target="_other">GitHub</a> 
-      <a class="tabctrl" href="https://www.npmjs.com/package/lightview" target="_other">NPM</a>
-    </span>
-</div>
-<iframe name="content" style="width:100%;" src="lightview.html"></iframe>
-<style id="style">
-    a  {
-        font-size:  x-large;
-        color: black;
-        padding-left: 5px;
-        padding-right: 5px;
-    }
-
-    a:hover {
-        color: blue;
-    }
-</style>
+<!-- SEO-friendly SPA Shim -->
+<script src="/lightview-router.js"></script>
 <script>
-    document.querySelector("iframe").style.height = (document.body.clientHeight - document.getElementById("tabs").clientHeight)+"px"
+    if (window.LightviewRouter) {
+        LightviewRouter.base('/index.html');
+    }
 </script>
-</body>
-</html>
+
+<!-- Hero Section -->
+<section class="hero">
+    <div class="hero-content">
+        <img src="/docs/assets/images/logo.svg" class="hero-logo" alt="Lightview Logo" width="512" height="512">
+        <h1>Lightview</h1>
+        <p class="hero-tagline">Reactive UI's done light</p>
+        <p class="hero-description">
+            More power. Less energy.
+        </p>
+        <div class="hero-actions">
+            <a href="./getting-started/" class="btn btn-primary btn-lg">Get Started</a>
+        </div>
+        <div class="hero-stats">
+            <div class="hero-stat">
+                <div class="hero-stat-value">Zero</div>
+                <div class="hero-stat-label">Dependencies</div>
+            </div>
+            <div class="hero-stat">
+                <div class="hero-stat-value">Zero</div>
+                <div class="hero-stat-label">Build Steps</div>
+            </div>
+            <div class="hero-stat">
+                <div class="hero-stat-value">4</div>
+                <div class="hero-stat-label">Ways to Build</div>
+            </div>
+            <div class="hero-stat">
+                <div class="hero-stat-value">40+</div>
+                <div class="hero-stat-label">Components</div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Features Section -->
+<section class="section">
+    <div class="section-content">
+        <div class="section-header">
+            <h2 class="section-title">Heavy? Not Our Thing.</h2>
+            <p class="section-subtitle">
+                Have fun, stay light.
+            </p>
+        </div>
+        <div class="feature-grid">
+            <a href="./api/signals.html" class="feature-card" style="text-decoration: none; color: inherit;">
+                <div class="feature-icon">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10" />
+                        <path d="M12 6v6l4 2" />
+                    </svg>
+                </div>
+                <h3 class="feature-title">Signals and Object State Reactivity</h3>
+                <p class="feature-description">
+                    Fine-grained reactivity with signals and obejct state. Updates propagate automatically—no virtual
+                    DOM diffing needed. As a bonus, session and local storage are also supported.
+                </p>
+            </a>
+            <a href="./api/elements.html" class="feature-card" style="text-decoration: none; color: inherit;">
+                <div class="feature-icon">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="18" height="18" rx="2" />
+                        <path d="M3 9h18M9 21V9" />
+                    </svg>
+                </div>
+                <h3 class="feature-title">Multiple Syntaxes</h3>
+                <p class="feature-description">
+                    Tagged API, vDOM, Object DOM, HTML. Pick your style—they all work together.
+                </p>
+            </a>
+            <a href="./api/hypermedia.html" class="feature-card" style="text-decoration: none; color: inherit;">
+                <div class="feature-icon">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path
+                            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.66 0 3-4 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4-3-9s1.34-9 3-9" />
+                    </svg>
+                </div>
+                <h3 class="feature-title">Hypermedia Ready</h3>
+                <p class="feature-description">
+                    Fetch HTML, vDOM, or Object DOM with the <code>src</code> attribute. HTMX-like patterns for
+                    <code>src</code> and <code>href</code> built right
+                    in.
+                </p>
+            </a>
+            <a href="./components/index.html" class="feature-card" style="text-decoration: none; color: inherit;">
+                <div class="feature-icon">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+                    </svg>
+                </div>
+                <h3 class="feature-title">Component Library</h3>
+                <p class="feature-description">
+                    Beautiful, accessible components ready to use. Buttons, modals, forms, charts, and more.
+                </p>
+            </a>
+            <a href="./getting-started/index.html" class="feature-card" style="text-decoration: none; color: inherit;">
+                <div class="feature-icon">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path
+                            d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" />
+                    </svg>
+                </div>
+                <h3 class="feature-title">Zero Build Step</h3>
+                <p class="feature-description">
+                    No bundler required. Drop in a script tag and start building. Works everywhere.
+                </p>
+            </a>
+
+        </div>
+    </div>
+</section>
+
+
+
+<!-- Call to Action -->
+<section class="section">
+    <div class="section-content">
+        <div class="section-header">
+            <h2 class="section-title">Heavy, Complex Frameworks? Lighten Up.</h2>
+            <p class="section-subtitle">
+                Get started in minutes. No npm install. No webpack or vite build process. Just code.
+            </p>
+        </div>
+        <div style="text-align: center;">
+            <a href="/docs/getting-started/" class="btn btn-primary btn-lg">Enlighten Your UI</a>
+        </div>
+    </div>
+</section>