Redesign site and streamline playground
This commit is contained in:
@@ -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`);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user