@draig/lexis-two 1.0.0

package/site/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "lexis-two-site",
+  "type": "module",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@astrojs/sitemap": "^3.7.3",
+    "astro": "^6.4.7"
+  }
+}

package/site/public/CNAME

@@ -0,0 +1 @@
+lexis-two.excelso.xyz

package/site/public/assets/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 48" role="img" aria-label="Lexis-Two">
+  <rect x="0" y="8" width="220" height="32" rx="4" fill="#141816" stroke="#7cba8a" stroke-width="1.5"/>
+  <text x="110" y="30" fill="#7cba8a" font-family="ui-monospace, monospace" font-size="14" font-weight="600" text-anchor="middle" letter-spacing="0.12em">LEXIS-TWO</text>
+</svg>

package/site/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://lexis-two.excelso.xyz/sitemap-index.xml

package/site/src/components/Adapt.astro

@@ -0,0 +1,33 @@
+---
+interface Props {
+  adapt: {
+    title: string;
+    subtitle: string;
+    cards: readonly {
+      title: string;
+      desc: string;
+    }[];
+  };
+}
+
+const { adapt } = Astro.props;
+---
+
+<section id="adapt">
+  <div class="wrap">
+    <div class="section-head">
+      <h2>{adapt.title}</h2>
+      <p>{adapt.subtitle}</p>
+    </div>
+    <div class="adapt-list">
+      {
+        adapt.cards.map((card) => (
+          <article class="adapt-card">
+            <h3>{card.title}</h3>
+            <p set:html={card.desc} />
+          </article>
+        ))
+      }
+    </div>
+  </div>
+</section>

package/site/src/components/Benchmarks.astro

@@ -0,0 +1,232 @@
+---
+import benchmarkData from "../data/opencode-go-benchmark.json";
+
+interface Props {
+  benchmarks: {
+    title: string;
+    subtitle: string;
+    runDate: string;
+    runsPerCell: string;
+    source: string;
+    totalLoc: string;
+    reduction: string;
+    time: string;
+    byTask: string;
+    summary: string;
+    colModel: string;
+    colBaseline: string;
+    colLexis: string;
+    colReduction: string;
+    colCorrect: string;
+    regenerate: string;
+  };
+}
+
+const { benchmarks } = Astro.props;
+const chartPayload = JSON.stringify(benchmarkData);
+---
+
+<section id="benchmarks" class="benchmark-page">
+  <div class="wrap">
+    <div class="section-head benchmark-head">
+      <h2>{benchmarks.title}</h2>
+      <p>{benchmarks.subtitle}</p>
+      <p class="benchmark-meta">
+        {benchmarks.runDate}: <strong>{benchmarkData.date}</strong>
+        · {benchmarkData.repeat} {benchmarks.runsPerCell}
+        · {benchmarks.source}: <code>{benchmarkData.source}</code>
+      </p>
+    </div>
+
+    <div class="benchmark-grid">
+      <section class="benchmark-card wide" aria-labelledby="chart-total-loc-title">
+        <h3 id="chart-total-loc-title">{benchmarks.totalLoc}</h3>
+        <canvas id="chart-total-loc" height="280"></canvas>
+      </section>
+
+      <section class="benchmark-card" aria-labelledby="chart-reduction-title">
+        <h3 id="chart-reduction-title">{benchmarks.reduction}</h3>
+        <canvas id="chart-reduction" height="280"></canvas>
+      </section>
+
+      <section class="benchmark-card" aria-labelledby="chart-time-title">
+        <h3 id="chart-time-title">{benchmarks.time}</h3>
+        <canvas id="chart-time" height="280"></canvas>
+      </section>
+
+      <section class="benchmark-card wide" aria-labelledby="chart-by-task-title">
+        <h3 id="chart-by-task-title">{benchmarks.byTask}</h3>
+        <canvas id="chart-by-task" height="280"></canvas>
+      </section>
+
+      <section class="benchmark-card wide" aria-labelledby="summary-table-title">
+        <h3 id="summary-table-title">{benchmarks.summary}</h3>
+        <div class="table-wrap">
+          <table id="summary-table">
+            <thead>
+              <tr>
+                <th scope="col">{benchmarks.colModel}</th>
+                <th scope="col">{benchmarks.colBaseline}</th>
+                <th scope="col">{benchmarks.colLexis}</th>
+                <th scope="col">{benchmarks.colReduction}</th>
+                <th scope="col">{benchmarks.colCorrect}</th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+
+    <p class="benchmark-foot">
+      {benchmarks.regenerate}
+      <code>npm run benchmark:opencode-go &amp;&amp; npm run benchmark:report</code>
+    </p>
+  </div>
+</section>
+
+<script define:vars={{ chartPayload, benchmarks }} is:inline>
+  (function () {
+    const CHART_JS_URL = "https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js";
+    const section = document.getElementById("benchmarks");
+    if (!section) return;
+
+    let loaded = false;
+
+    function renderCharts() {
+      if (loaded) return;
+      loaded = true;
+
+      const DATA = JSON.parse(chartPayload);
+      const labels = DATA.models.map(function (m) { return m.label; });
+
+      Chart.defaults.color = "#a0aa9e";
+      Chart.defaults.borderColor = "#1e2420";
+      Chart.defaults.font.family = "Syne, system-ui, sans-serif";
+
+      new Chart(document.getElementById("chart-total-loc"), {
+        type: "bar",
+        data: {
+          labels: labels,
+          datasets: [
+            {
+              label: "baseline",
+              data: DATA.models.map(function (m) { return m.totals.baselineLoc; }),
+              backgroundColor: "#c97a7a",
+            },
+            {
+              label: "lexis-two",
+              data: DATA.models.map(function (m) { return m.totals.lexisLoc; }),
+              backgroundColor: "#7cba8a",
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          plugins: { legend: { position: "bottom" } },
+          scales: { y: { beginAtZero: true } },
+        },
+      });
+
+      new Chart(document.getElementById("chart-reduction"), {
+        type: "bar",
+        data: {
+          labels: labels,
+          datasets: [
+            {
+              label: benchmarks.reduction,
+              data: DATA.models.map(function (m) { return m.totals.reductionPct; }),
+              backgroundColor: "#7cba8a",
+            },
+          ],
+        },
+        options: {
+          indexAxis: "y",
+          responsive: true,
+          plugins: { legend: { display: false } },
+          scales: {
+            x: { beginAtZero: true, max: 100, ticks: { callback: function (v) { return v + "%"; } } },
+          },
+        },
+      });
+
+      new Chart(document.getElementById("chart-time"), {
+        type: "bar",
+        data: {
+          labels: labels,
+          datasets: [
+            {
+              label: "baseline",
+              data: DATA.models.map(function (m) { return m.totals.baselineTimeSec; }),
+              backgroundColor: "#c97a7a",
+            },
+            {
+              label: "lexis-two",
+              data: DATA.models.map(function (m) { return m.totals.lexisTimeSec; }),
+              backgroundColor: "#7cba8a",
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          plugins: { legend: { position: "bottom" } },
+          scales: { y: { beginAtZero: true } },
+        },
+      });
+
+      var taskColors = ["#7cba8a", "#5a9a6a", "#9fd4a8", "#4a7356", "#3d5f48"];
+      new Chart(document.getElementById("chart-by-task"), {
+        type: "bar",
+        data: {
+          labels: labels,
+          datasets: DATA.tasks.map(function (taskId, i) {
+            return {
+              label: taskId,
+              data: DATA.models.map(function (m) { return m.locByArmTask["lexis-two"][taskId]; }),
+              backgroundColor: taskColors[i % taskColors.length],
+            };
+          }),
+        },
+        options: {
+          responsive: true,
+          plugins: { legend: { position: "bottom" } },
+          scales: { y: { beginAtZero: true } },
+        },
+      });
+
+      var tbody = document.querySelector("#summary-table tbody");
+      DATA.models.forEach(function (m) {
+        var c = m.correctByArm["lexis-two"];
+        var tr = document.createElement("tr");
+        tr.innerHTML =
+          "<td>" + m.label + "</td>" +
+          "<td>" + m.totals.baselineLoc + "</td>" +
+          "<td class=\"good\">" + m.totals.lexisLoc + "</td>" +
+          "<td class=\"good\">" + m.totals.reductionPct + "%</td>" +
+          "<td>" + c.pass + "/" + c.total + "</td>";
+        tbody.appendChild(tr);
+      });
+    }
+
+    function loadChartJS(callback) {
+      if (typeof Chart !== "undefined") { callback(); return; }
+      var s = document.createElement("script");
+      s.src = CHART_JS_URL;
+      s.onload = callback;
+      document.head.appendChild(s);
+    }
+
+    if ("IntersectionObserver" in window) {
+      var observer = new IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting) {
+          observer.disconnect();
+          loadChartJS(renderCharts);
+        }
+      }, { rootMargin: "200px" });
+      observer.observe(section);
+    } else {
+      // Fallback: load immediately
+      loadChartJS(renderCharts);
+    }
+  })();
+</script>

package/site/src/components/Commands.astro

@@ -0,0 +1,33 @@
+---
+interface Props {
+  commands: {
+    title: string;
+    subtitle: string;
+    items: readonly {
+      name: string;
+      desc: string;
+    }[];
+  };
+}
+
+const { commands } = Astro.props;
+---
+
+<section id="commands">
+  <div class="wrap">
+    <div class="section-head">
+      <h2>{commands.title}</h2>
+      <p>{commands.subtitle}</p>
+    </div>
+    <div class="cmd-grid">
+      {
+        commands.items.map((cmd) => (
+          <div class="cmd-card">
+            <code>{cmd.name}</code>
+            <p>{cmd.desc}</p>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</section>

package/site/src/components/Ecosystem.astro

@@ -0,0 +1,30 @@
+---
+interface Props {
+  ecosystem: {
+    title: string;
+    subtitle: string;
+  };
+}
+
+const { ecosystem } = Astro.props;
+---
+
+<section id="ecosystem">
+  <div class="wrap">
+    <div class="section-head">
+      <h2>{ecosystem.title}</h2>
+      <p>{ecosystem.subtitle}</p>
+    </div>
+    <pre
+      class="ecosystem"
+      aria-label="Lexis ecosystem diagram">
+Lexis-One (private) ──extracts the best──▶ Lexis-Two (public)
+     │                                           │
+     │ personal configuration                    │ portable rules + skills
+     │ providers &amp; API keys                      │ multi-host adapters
+     └───────────────────────────────────────────┘
+                          │
+                    Lexis-Core (future)
+                    public orchestrator</pre>
+  </div>
+</section>

package/site/src/components/Example.astro

@@ -0,0 +1,77 @@
+---
+interface Props {
+  example: {
+    title: string;
+    subtitle: string;
+    without: string;
+    with: string;
+    withoutFoot: string;
+    withFoot: string;
+    copy: string;
+    copied: string;
+  };
+}
+
+const { example } = Astro.props;
+---
+
+<section id="example">
+  <div class="wrap">
+    <div class="section-head">
+      <h2>{example.title}</h2>
+      <p set:html={example.subtitle} />
+    </div>
+    <div class="compare">
+      <article class="panel">
+        <div class="panel-head bad">{example.without}</div>
+        <div class="panel-body">
+          <pre><code set:html={`function quickSort(arr, compareFn = (a, b) => a - b) {
+  if (arr.length <= 1) return arr;
+  const pivot = arr[Math.floor(arr.length / 2)];
+  const left = [], right = [], equal = [];
+  for (const item of arr) {
+    const cmp = compareFn(item, pivot);
+    if (cmp < 0) left.push(item);
+    else if (cmp > 0) right.push(item);
+    else equal.push(item);
+  }
+  return [...quickSort(left), ...equal, ...quickSort(right)];
+}`} /></pre>
+        </div>
+        <p class="panel-foot">{example.withoutFoot}</p>
+      </article>
+      <article class="panel">
+        <div class="panel-head good">{example.with}</div>
+        <div class="panel-body">
+          <button data-copied={example.copied}
+            type="button"
+            class="copy-btn"
+            data-copy="// lexis: this exists
+numbers.sort((a, b) => a - b)"
+          >
+            {example.copy}
+          </button>
+          <pre><code>// lexis: this exists
+numbers.sort((a, b) =&gt; a - b)</code></pre>
+        </div>
+        <p class="panel-foot"><strong set:html={example.withFoot} /></p>
+      </article>
+    </div>
+  </div>
+</section>
+
+<script>
+  document.querySelectorAll(".copy-btn").forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      var text = btn.getAttribute("data-copy");
+      navigator.clipboard.writeText(text!).then(function () {
+        var prev = btn.textContent;
+        var copiedText = btn.getAttribute("data-copied") || "Copied";
+        btn.textContent = copiedText;
+        setTimeout(function () {
+          btn.textContent = prev;
+        }, 1500);
+      });
+    });
+  });
+</script>

package/site/src/components/Footer.astro

@@ -0,0 +1,28 @@
+---
+interface Props {
+  footer: {
+    license: string;
+    forked: string;
+    built: string;
+  };
+}
+
+const { footer } = Astro.props;
+---
+
+<footer class="site-footer">
+  <div class="wrap">
+    <p>
+      <a href="https://github.com/nitdraig/lexis-two"
+        >github.com/nitdraig/lexis-two</a
+      >
+      · {footer.license}
+    </p>
+    <p>
+      {footer.forked}
+      <a href="https://github.com/nitdraig">@nitdraig</a>.
+    </p>
+    <p set:html={footer.built} />
+    <p>Powered by <a href="https://excelso.xyz">Excelso</a></p>
+  </div>
+</footer>

package/site/src/components/Header.astro

@@ -0,0 +1,87 @@
+---
+import type { Locale } from "../i18n/index.js";
+import LanguageSwitcher from "./LanguageSwitcher.astro";
+
+interface Props {
+  locale: Locale;
+  nav: {
+    philosophy: string;
+    example: string;
+    hosts: string;
+    commands: string;
+    install: string;
+    benchmarks: string;
+    github: string;
+    skipLink: string;
+  };
+}
+
+const { locale, nav } = Astro.props;
+---
+
+<a class="skip-link" href="#main">{nav.skipLink}</a>
+
+<header class="site-header">
+  <div class="wrap header-inner">
+    <a class="brand" href="#">
+      <img src="/assets/logo.png" width="220" height="48" alt="Lexis-Two" />
+      <span class="brand-text">Lexis-Two</span>
+    </a>
+    <button
+      type="button"
+      class="nav-toggle"
+      aria-expanded="false"
+      aria-controls="site-nav"
+      aria-label="Open menu"
+    >
+      <span class="nav-toggle-bar" aria-hidden="true"></span>
+      <span class="nav-toggle-bar" aria-hidden="true"></span>
+      <span class="nav-toggle-bar" aria-hidden="true"></span>
+    </button>
+    <nav id="site-nav" class="nav" aria-label="Primary">
+      <a href="#philosophy">{nav.philosophy}</a>
+      <a href="#example">{nav.example}</a>
+      <a href="#hosts">{nav.hosts}</a>
+      <a href="#commands">{nav.commands}</a>
+      <a href="#install">{nav.install}</a>
+      <a href="#benchmarks">{nav.benchmarks}</a>
+      <a href="https://github.com/nitdraig/lexis-two">{nav.github}</a>
+      <LanguageSwitcher locale={locale} />
+    </nav>
+  </div>
+</header>
+
+<script>
+  (function () {
+    var header = document.querySelector(".site-header");
+    var toggle = document.querySelector(".nav-toggle");
+    var nav = document.getElementById("site-nav");
+    if (!header || !toggle || !nav) return;
+
+    function setNavOpen(open: boolean) {
+      header!.classList.toggle("is-nav-open", open);
+      toggle!.setAttribute("aria-expanded", open ? "true" : "false");
+      toggle!.setAttribute("aria-label", open ? "Close menu" : "Open menu");
+    }
+
+    toggle!.addEventListener("click", function () {
+      setNavOpen(!header!.classList.contains("is-nav-open"));
+    });
+
+    nav!.querySelectorAll("a").forEach(function (link) {
+      link.addEventListener("click", function () {
+        setNavOpen(false);
+      });
+    });
+
+    document.addEventListener("keydown", function (event) {
+      if (event.key === "Escape") setNavOpen(false);
+    });
+
+    window
+      .matchMedia("(min-width: 768px)")
+      .addEventListener("change", function (event) {
+        if (event.matches) setNavOpen(false);
+      });
+  })();
+</script>

package/site/src/components/Hero.astro

@@ -0,0 +1,58 @@
+---
+import type { Locale } from "../i18n/index.js";
+
+interface Props {
+  locale: Locale;
+  hero: {
+    badge: string;
+    title: string;
+    tagline: string;
+    benchmark: string;
+    ctaBenchmark: string;
+    benchmarkLink: string;
+    benchmarkCode: string;
+    ctaGitHub: string;
+    ctaInstall: string;
+    ctaDocs: string;
+  };
+}
+
+const { locale, hero } = Astro.props;
+---
+
+<section class="hero">
+  <div class="wrap">
+    <div class="hero-content">
+      <img src="/assets/logo.png" width="220" height="48" alt="Lexis-Two" />
+      <p class="hero-badge">{hero.badge}</p>
+      <h1>{hero.title}</h1>
+    </div>
+    <p class="tagline">{hero.tagline}</p>
+    <p class="benchmark-note">
+      {hero.benchmark}
+      <a href="#benchmarks">{hero.ctaBenchmark}</a>
+      ·
+      <a href="https://github.com/nitdraig/lexis-two/blob/main/benchmarks/README.md#opencode-go">
+        {hero.benchmarkLink}
+      </a>
+      (<code>{hero.benchmarkCode}</code>).
+    </p>
+    <div class="cta-row">
+      <a
+        class="btn btn-primary"
+        href="https://github.com/nitdraig/lexis-two"
+        rel="noopener noreferrer"
+      >
+        {hero.ctaGitHub}
+      </a>
+      <a class="btn btn-ghost" href="#install">{hero.ctaInstall}</a>
+      <a class="btn btn-ghost" href="#benchmarks">{hero.ctaBenchmark}</a>
+      <a
+        class="btn btn-ghost"
+        href="https://github.com/nitdraig/lexis-two/blob/main/docs/portability.md"
+      >
+        {hero.ctaDocs}
+      </a>
+    </div>
+  </div>
+</section>

package/site/src/components/Home.astro

@@ -0,0 +1,46 @@
+---
+import type { Locale } from "../i18n/index.js";
+import { getDictionary } from "../i18n/index.js";
+import Header from "./Header.astro";
+import Hero from "./Hero.astro";
+import Philosophy from "./Philosophy.astro";
+import Example from "./Example.astro";
+import Hosts from "./Hosts.astro";
+import Commands from "./Commands.astro";
+import Install from "./Install.astro";
+import Adapt from "./Adapt.astro";
+import Stacks from "./Stacks.astro";
+import Suggested from "./Suggested.astro";
+import Benchmarks from "./Benchmarks.astro";
+import Ecosystem from "./Ecosystem.astro";
+import Footer from "./Footer.astro";
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const t = getDictionary(locale);
+---
+
+<Header locale={locale} nav={t.nav} />
+
+<main id="main">
+  <Hero locale={locale} hero={t.hero} />
+  <Philosophy philosophy={t.philosophy} />
+  <Example example={t.example} />
+  <Hosts hosts={t.hosts} />
+  <Commands commands={t.commands} />
+  <Install install={t.install} />
+  <Adapt adapt={t.adapt} />
+  <Stacks stacks={t.stacks} />
+  <Suggested suggested={t.suggested} />
+  <Benchmarks benchmarks={t.benchmarks} />
+  <Ecosystem ecosystem={t.ecosystem} />
+</main>
+
+<Footer footer={t.footer} />
+
+<style is:global>
+  @import "../styles/global.css";
+</style>