Redesign site and streamline playground
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import ManualLayout from '../../layouts/ManualLayout.astro';
|
||||
import { allDocSlugs, renderMarkdown } from '../../lib/docs.js';
|
||||
import { allDocSlugs, docTitle, renderMarkdown } from '../../lib/docs.js';
|
||||
|
||||
export function getStaticPaths() {
|
||||
return allDocSlugs().map((slug) => ({
|
||||
@@ -11,7 +11,8 @@ export function getStaticPaths() {
|
||||
|
||||
const { slug } = Astro.props;
|
||||
const html = renderMarkdown(slug);
|
||||
const title = docTitle(slug);
|
||||
---
|
||||
<ManualLayout title={`Decodal - ${slug}`} active={slug}>
|
||||
<ManualLayout title={`${title} — Decodal Manual`} active={slug}>
|
||||
<article class="markdown" set:html={html} />
|
||||
</ManualLayout>
|
||||
|
||||
@@ -4,6 +4,6 @@ import { renderMarkdown } from '../../lib/docs.js';
|
||||
|
||||
const html = renderMarkdown('index');
|
||||
---
|
||||
<ManualLayout title="Decodal Manual" active="index">
|
||||
<ManualLayout title="Decodal Manual" description="Decodalの言語仕様と、アプリケーションへ組み込むための公開API。" active="index">
|
||||
<article class="markdown" set:html={html} />
|
||||
</ManualLayout>
|
||||
|
||||
@@ -1,75 +1,163 @@
|
||||
---
|
||||
import ManualLayout from '../layouts/ManualLayout.astro';
|
||||
import { highlightCode } from '../lib/highlight.js';
|
||||
|
||||
const example = `Port = Int >= 1 & <= 65535 default 8080;
|
||||
const example = `let
|
||||
Port = Int & >= 1 & <= 65535;
|
||||
Service = {
|
||||
host = String;
|
||||
port = Port default 8080;
|
||||
};
|
||||
in
|
||||
{
|
||||
host = "127.0.0.1";
|
||||
} as Service;`;
|
||||
|
||||
Server = {
|
||||
host = String default "localhost";
|
||||
port = Port;
|
||||
};
|
||||
|
||||
Production = Server & {
|
||||
host = "example.com";
|
||||
};`;
|
||||
const result = `{
|
||||
"host": "127.0.0.1",
|
||||
"port": 8080
|
||||
}`;
|
||||
---
|
||||
<ManualLayout title="Decodal" frontpage>
|
||||
<section class="hero">
|
||||
<h1>Decodal keeps configuration, constraints, and defaults in one composable value.</h1>
|
||||
<p class="hero-copy">
|
||||
Define structured data with constraints, compose it with patches, and materialize the result from Rust,
|
||||
WebAssembly, or the browser playground.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button primary" href="/playground/">Try the playground</a>
|
||||
<a class="button secondary" href="/docs/introduction/">Read the manual</a>
|
||||
<ManualLayout
|
||||
title="Decodal — Deferred Constraint Data Language"
|
||||
description="Decodal is a deterministic data language for describing, composing, validating, and materializing structured data."
|
||||
frontpage
|
||||
>
|
||||
<section class="home-intro" aria-labelledby="home-title">
|
||||
<div class="home-intro-copy">
|
||||
<h1 id="home-title">Configuration, constraints, and defaults are values.</h1>
|
||||
<p class="home-lead">
|
||||
Decodal is a small deterministic language for describing, composing, validating, and materializing
|
||||
structured data. The same expression can carry concrete data and the range that data must satisfy.
|
||||
</p>
|
||||
<div class="home-actions">
|
||||
<a class="button primary" href="/playground/">Open the playground</a>
|
||||
<a class="text-action" href="/docs/introduction/">Read the introduction <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<dl class="home-facts">
|
||||
<div>
|
||||
<dt>Source</dt>
|
||||
<dd><code>.dcdl</code></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Runtime</dt>
|
||||
<dd>Rust · WebAssembly</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Output</dt>
|
||||
<dd>Validated structured data</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="home-code" aria-label="Decodal example and materialized result">
|
||||
<div class="code-caption">
|
||||
<span>service.dcdl</span>
|
||||
<span>DCDL</span>
|
||||
</div>
|
||||
<pre class="code-block"><code class="language-dcdl" set:html={highlightCode(example, 'dcdl')} /></pre>
|
||||
<div class="materialized-result">
|
||||
<span>materialize</span>
|
||||
<pre><code>{result}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-packages" aria-label="Official packages">
|
||||
<h2>Official packages</h2>
|
||||
<a class="primary-package" href="https://crates.io/crates/decodal">
|
||||
<span>Rust crate</span>
|
||||
<strong>crates.io/crates/decodal</strong>
|
||||
</a>
|
||||
<ul class="package-list">
|
||||
<li>decodal-wasm on <a href="https://jsr.io/@hare/decodal-wasm@0.3.0">jsr</a> / <a href="https://www.npmjs.com/package/decodal-wasm">npm</a></li>
|
||||
<li>decodal-codemirror on <a href="https://jsr.io/@hare/decodal-codemirror@0.3.0">jsr</a> / <a href="https://www.npmjs.com/package/decodal-codemirror">npm</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="home-grid" aria-label="Decodal overview">
|
||||
<article class="home-card">
|
||||
<h2>What it is</h2>
|
||||
<p>
|
||||
Decodal is a small data language for configuration shapes that need validation, defaults,
|
||||
lazy imports, and predictable composition.
|
||||
</p>
|
||||
</article>
|
||||
<article class="home-card">
|
||||
<h2>Where it runs</h2>
|
||||
<p>
|
||||
Use the Rust crate for runtime embedding, the WASM package in browsers, CodeMirror/Lezer for Web editing
|
||||
and formatting, and Tree-sitter for general editor integration.
|
||||
</p>
|
||||
</article>
|
||||
<article class="home-card">
|
||||
<h2>Start here</h2>
|
||||
<p>
|
||||
Open the playground to run examples in your browser, or read the components page to see how the runtime and
|
||||
editor pieces fit together.
|
||||
</p>
|
||||
<p><a href="/docs/components/">View components →</a></p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="home-example" aria-label="Decodal example">
|
||||
<div>
|
||||
<h2>A compact example</h2>
|
||||
<p>
|
||||
Constraints and defaults are values. Compose them with concrete data and materialize when the host knows what
|
||||
output shape it expects.
|
||||
</p>
|
||||
<section class="home-section" aria-labelledby="model-title">
|
||||
<header class="section-heading">
|
||||
<h2 id="model-title">One expression system, from abstract range to concrete data.</h2>
|
||||
</header>
|
||||
<div class="definition-list">
|
||||
<article>
|
||||
<code>&</code>
|
||||
<div>
|
||||
<h3>Compose without discarding constraints</h3>
|
||||
<p>Symmetric composition keeps information from both sides and fails when their ranges cannot overlap.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<code>as</code>
|
||||
<div>
|
||||
<h3>Verify that a value is more specific</h3>
|
||||
<p>The left side must fit inside the wider range on the right. Wider abstract fields remain available for later materialization.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<code>//</code>
|
||||
<div>
|
||||
<h3>Apply an explicit structural patch</h3>
|
||||
<p>Right-biased composition replaces the selected structure while preserving unrelated fields.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<code>default</code>
|
||||
<div>
|
||||
<h3>Choose a fallback only when materializing</h3>
|
||||
<p>A default does not erase the range. It is selected only when no more concrete value has been supplied.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<pre><code>{example}</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="home-section host-section" aria-labelledby="host-title">
|
||||
<header class="section-heading">
|
||||
<h2 id="host-title">The host owns I/O. Decodal owns evaluation.</h2>
|
||||
<p>
|
||||
Filesystems, Markdown, JSON, network resources, and application globals stay under host control. Decodal
|
||||
receives source or structured values and evaluates them with the same rules in production and editor tooling.
|
||||
</p>
|
||||
</header>
|
||||
<ol class="evaluation-flow" aria-label="Evaluation flow">
|
||||
<li>
|
||||
<span>1</span>
|
||||
<strong>Host environment</strong>
|
||||
<small>globals · source · structured imports</small>
|
||||
</li>
|
||||
<li>
|
||||
<span>2</span>
|
||||
<strong>Evaluate</strong>
|
||||
<small>lazy references · constraints · composition</small>
|
||||
</li>
|
||||
<li>
|
||||
<span>3</span>
|
||||
<strong>Materialize</strong>
|
||||
<small>defaults · validation · diagnostics</small>
|
||||
</li>
|
||||
<li>
|
||||
<span>4</span>
|
||||
<strong>Application data</strong>
|
||||
<small>Data · Rust type · JavaScript value</small>
|
||||
</li>
|
||||
</ol>
|
||||
<p class="section-link"><a href="/docs/embedding/">Read the embedding guide <span aria-hidden="true">→</span></a></p>
|
||||
</section>
|
||||
|
||||
<section class="home-section package-section" aria-labelledby="packages-title">
|
||||
<header class="section-heading">
|
||||
<h2 id="packages-title">Use only the layer your application needs.</h2>
|
||||
</header>
|
||||
<div class="package-rows">
|
||||
<article>
|
||||
<div><code>decodal</code><span>Rust</span></div>
|
||||
<p>Runtime, host embedding, schema derivation, and typed decoding.</p>
|
||||
<a href="https://crates.io/crates/decodal">crates.io</a>
|
||||
</article>
|
||||
<article>
|
||||
<div><code>decodal-wasm</code><span>JavaScript</span></div>
|
||||
<p>Browser runtime and host-configurable semantic language service.</p>
|
||||
<span class="package-links"><a href="https://jsr.io/@hare/decodal-wasm@0.3.0">JSR</a><a href="https://www.npmjs.com/package/decodal-wasm">npm</a></span>
|
||||
</article>
|
||||
<article>
|
||||
<div><code>decodal-lsp</code><span>Rust</span></div>
|
||||
<p>Language Server Protocol with application-defined environments.</p>
|
||||
<a href="https://crates.io/crates/decodal-lsp">crates.io</a>
|
||||
</article>
|
||||
<article>
|
||||
<div><code>decodal-codemirror</code><span>JavaScript</span></div>
|
||||
<p>CodeMirror 6 syntax, indentation, folding, highlighting, and formatter integration.</p>
|
||||
<span class="package-links"><a href="https://jsr.io/@hare/decodal-codemirror@0.3.0">JSR</a><a href="https://www.npmjs.com/package/decodal-codemirror">npm</a></span>
|
||||
</article>
|
||||
</div>
|
||||
<p class="section-link"><a href="/docs/components/">Compare packages and integrations <span aria-hidden="true">→</span></a></p>
|
||||
</section>
|
||||
</ManualLayout>
|
||||
|
||||
@@ -4,27 +4,23 @@ import ManualLayout from '../layouts/ManualLayout.astro';
|
||||
<ManualLayout title="Decodal Playground" playground>
|
||||
<section class="playground-page">
|
||||
<div class="playground-header">
|
||||
<div>
|
||||
<h1>Playground</h1>
|
||||
</div>
|
||||
<div class="playground-actions">
|
||||
<div class="action-group example-actions">
|
||||
<label class="example-picker">
|
||||
<span>Example</span>
|
||||
<select id="example-select" aria-label="Playground example"></select>
|
||||
</label>
|
||||
<button id="load-example" type="button">Load</button>
|
||||
<button id="load-example" class="secondary-button" type="button">Load</button>
|
||||
</div>
|
||||
<span class="action-separator" aria-hidden="true">|</span>
|
||||
<div class="action-group run-actions">
|
||||
<button id="format" disabled>Format</button>
|
||||
<button id="format" class="secondary-button" type="button" disabled>Format</button>
|
||||
<label class="entry-picker">
|
||||
<span>Entry</span>
|
||||
<select id="entry-select" aria-label="Entry point file"></select>
|
||||
</label>
|
||||
<button id="run" disabled>Run</button>
|
||||
<button id="run" type="button" disabled>Run</button>
|
||||
</div>
|
||||
<p id="status" class="status">Loading WASM...</p>
|
||||
<p id="status" class="status" aria-live="polite">Loading WASM...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,10 +28,20 @@ import ManualLayout from '../layouts/ManualLayout.astro';
|
||||
<aside class="file-panel">
|
||||
<div class="panel-header">
|
||||
<span>Files</span>
|
||||
<button id="new-file" type="button">New</button>
|
||||
<form id="new-file-form" class="new-file-control">
|
||||
<button id="new-file" type="button" aria-label="New file" title="New file"></button>
|
||||
<input
|
||||
id="new-file-path"
|
||||
class="new-file-input"
|
||||
type="text"
|
||||
aria-label="New file path"
|
||||
placeholder="path/to/file.dcdl"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div id="file-tree" class="file-tree"></div>
|
||||
<button id="delete-file" class="danger-button" type="button">Delete file</button>
|
||||
</aside>
|
||||
|
||||
<section class="pane input-pane">
|
||||
@@ -44,7 +50,7 @@ import ManualLayout from '../layouts/ManualLayout.astro';
|
||||
</section>
|
||||
|
||||
<section class="pane output-pane">
|
||||
<span>Output</span>
|
||||
<span>Materialized output</span>
|
||||
<pre id="output"></pre>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user