Redesign site and streamline playground

This commit is contained in:
2026-08-14 10:41:37 +09:00
parent 6653607ed3
commit e50458595b
9 changed files with 1362 additions and 495 deletions
@@ -2,7 +2,20 @@
import { nav } from '../lib/docs.js';
import '../style.css';
const { title = 'Decodal', active = '', playground = false, frontpage = false } = Astro.props;
const {
title = 'Decodal',
description = 'Decodal is a deterministic data language for configuration, constraints, and defaults.',
active = '',
playground = false,
frontpage = false,
} = Astro.props;
const pathname = Astro.url.pathname;
const language = active ? 'ja' : 'en';
function isCurrent(path) {
return pathname === path || (path !== '/' && pathname.startsWith(path));
}
function renderNav(items, prefix = []) {
return `<ul class="nav-tree">${items
@@ -17,22 +30,26 @@ function renderNav(items, prefix = []) {
}
---
<!doctype html>
<html lang="en">
<html lang={language}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<title>{title}</title>
</head>
<body>
<header class="topbar">
<a class="brand" href="/">Decodal</a>
<nav class="topnav">
<a href="/docs/introduction/">Docs</a>
<a href="/playground/">Playground</a>
<a class="brand" href="/" aria-label="Decodal home">
<strong>Decodal</strong>
<span>Deferred Constraint Data Language</span>
</a>
<nav class="topnav" aria-label="Primary navigation">
<a class:list={{ current: isCurrent('/docs/') }} aria-current={isCurrent('/docs/') ? 'page' : undefined} href="/docs/introduction/">Manual</a>
<a class:list={{ current: isCurrent('/playground/') }} aria-current={isCurrent('/playground/') ? 'page' : undefined} href="/playground/">Playground</a>
<a href="https://gitea.hareworks.net/Hare/Decodal">Source</a>
</nav>
</header>
<div class={playground || frontpage ? 'layout playground-layout' : 'layout'}>
<div class:list={{ layout: true, 'wide-layout': playground || frontpage, 'playground-layout': playground }}>
{!playground && !frontpage && (
<aside class="sidebar">
<div class="sidebar-content">
@@ -45,16 +62,20 @@ function renderNav(items, prefix = []) {
<slot />
</main>
</div>
<footer class="site-footer">
<span>2026 Hare</span>
<a href="https://gitea.hareworks.net/Hare/Decodal">Source</a>
</footer>
{!playground && (
<footer class="site-footer">
<span>Decodal</span>
<span aria-hidden="true">·</span>
<span>MIT or Apache-2.0</span>
<a href="https://gitea.hareworks.net/Hare/Decodal">Source</a>
</footer>
)}
<script>
const sidebar = document.querySelector('.sidebar-content');
if (sidebar instanceof HTMLElement) {
const updateStickyOffset = () => {
const stickyTop = Math.min(0, window.innerHeight - sidebar.offsetHeight);
const stickyTop = Math.min(16, window.innerHeight - sidebar.offsetHeight - 16);
sidebar.style.setProperty('--sidebar-sticky-top', `${stickyTop}px`);
};