xs-dev 0.14.2 → 0.15.1

package/docs/src/components/Header/Header.astro

@@ -0,0 +1,133 @@
+---
+import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages.ts';
+import * as CONFIG from '../../config.ts';
+import SkipToContent from './SkipToContent.astro';
+import SidebarToggle from './SidebarToggle.tsx';
+import LanguageSelect from './LanguageSelect.tsx';
+import Search from './Search.tsx';
+
+const { currentPage } = Astro.props;
+const lang = currentPage && getLanguageFromURL(currentPage);
+---
+
+<header>
+	<SkipToContent />
+	<nav class="nav-wrapper" title="Top Navigation">
+		<div class="menu-toggle">
+			<SidebarToggle client:idle />
+		</div>
+		<div class="logo flex">
+			<a href={Astro.site}>
+				<h1>{CONFIG.SITE.title ?? "Documentation"}</h1>
+			</a>
+		</div>
+		<div style="flex-grow: 1;"></div>
+		{KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
+	</nav>
+  <Search client:idle />
+</header>
+
+<style>
+	header {
+		z-index: 11;
+		height: var(--theme-navbar-height);
+		width: 100%;
+		background-color: var(--theme-navbar-bg);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: sticky;
+		top: 0;
+	}
+
+	.logo {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+		width: 30px;
+		font-size: 2rem;
+		flex-shrink: 0;
+		font-weight: 600;
+		line-height: 1;
+		color: hsla(var(--color-base-white), 100%, 1);
+		gap: 0.25em;
+		z-index: -1;
+	}
+
+	.logo a {
+		display: flex;
+		padding: 0.5em 0.25em;
+		margin: -0.5em -0.25em;
+		text-decoration: none;
+		font-weight: bold;
+	}
+
+	.logo a {
+		transition: color 100ms ease-out;
+		color: var(--theme-text);
+	}
+
+	.logo a:hover,
+	.logo a:focus {
+		color: var(--theme-text-accent);
+	}
+
+	.logo h1 {
+		display: none;
+		font: inherit;
+		color: inherit;
+		margin: 0;
+	}
+
+	.nav-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 1em;
+		width: 100%;
+		max-width: 82em;
+		padding: 0 1rem;
+	}
+
+	@media (min-width: 50em) {
+		header {
+			position: static;
+			padding: 2rem 0rem;
+		}
+		.logo {
+			width: auto;
+			margin: 0;
+			z-index: 0;
+		}
+		.logo h1 {
+			display: initial;
+		}
+		.menu-toggle {
+			display: none;
+		}
+	}
+
+	/** Style Algolia */
+	:root {
+		--docsearch-primary-color: var(--theme-accent);
+		--docsearch-logo-color: var(--theme-text);
+	}
+
+	.search-item {
+		display: none;
+		position: relative;
+		z-index: 10;
+		flex-grow: 1;
+		padding-right: 0.7rem;
+		display: flex;
+		max-width: 200px;
+	}
+	:global(.search-item > *) {
+		flex-grow: 1;
+	}
+	@media (min-width: 50em) {
+		.search-item {
+			max-width: 400px;
+		}
+	}
+</style>

package/docs/src/components/Header/LanguageSelect.css

@@ -0,0 +1,47 @@
+.language-select {
+	flex-grow: 1;
+	width: 48px;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0.33em 0.5em;
+	overflow: visible;
+	font-weight: 500;
+	font-size: 1rem;
+	font-family: inherit;
+	line-height: inherit;
+	background-color: var(--theme-bg);
+	border-color: var(--theme-text-lighter);
+	color: var(--theme-text-light);
+	border-style: solid;
+	border-width: 1px;
+	border-radius: 0.25rem;
+	outline: 0;
+	cursor: pointer;
+	transition-timing-function: ease-out;
+	transition-duration: 0.2s;
+	transition-property: border-color, color;
+	-webkit-font-smoothing: antialiased;
+	padding-left: 30px;
+	padding-right: 1rem;
+}
+.language-select-wrapper .language-select:hover,
+.language-select-wrapper .language-select:focus {
+	color: var(--theme-text);
+	border-color: var(--theme-text-light);
+}
+.language-select-wrapper {
+	color: var(--theme-text-light);
+	position: relative;
+}
+.language-select-wrapper > svg {
+	position: absolute;
+	top: 7px;
+	left: 10px;
+	pointer-events: none;
+}
+
+@media (min-width: 50em) {
+	.language-select {
+		width: 100%;
+	}
+}

package/docs/src/components/Header/LanguageSelect.tsx

@@ -0,0 +1,49 @@
+import type { FunctionalComponent } from 'preact';
+import { h } from 'preact';
+import './LanguageSelect.css';
+import { KNOWN_LANGUAGES, langPathRegex } from '../../languages';
+
+const LanguageSelect: FunctionalComponent<{ lang: string }> = ({ lang }) => {
+	return (
+		<div class="language-select-wrapper">
+			<svg
+				aria-hidden="true"
+				focusable="false"
+				role="img"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 88.6 77.3"
+				height="1.2em"
+				width="1.2em"
+			>
+				<path
+					fill="currentColor"
+					d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z"
+				/>
+				<path
+					fill="currentColor"
+					d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8          c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z"
+				/>
+			</svg>
+			<select
+				class="language-select"
+				value={lang}
+				onChange={(e) => {
+					const newLang = e.target.value;
+					let actualDest = window.location.pathname.replace(langPathRegex, '/');
+					if (actualDest == '/') actualDest = `/introduction`;
+					window.location.pathname = '/' + newLang + actualDest;
+				}}
+			>
+				{Object.keys(KNOWN_LANGUAGES).map((key) => {
+					return (
+						<option value={KNOWN_LANGUAGES[key]}>
+							<span>{key}</span>
+						</option>
+					);
+				})}
+			</select>
+		</div>
+	);
+};
+
+export default LanguageSelect;

package/docs/src/components/Header/Search.css

@@ -0,0 +1,39 @@
+.flex-column {
+  flex-direction: column;
+}
+
+.SearchContainer {
+  position: relative;
+}
+
+.SearchContainer-input {
+  border: 1px solid #333333;
+  padding: 0.5rem 1rem;
+}
+
+.SearchContainer-button {
+  border-radius: 0px;
+  padding: 0.5rem;
+}
+
+.SearchContainer-list {
+  background: white;
+  top: 2.6rem;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.SearchContainer-list.has-results {
+  border: 1px solid #333333;
+}
+
+.SearchContainer-list_item {
+  padding: 0.5rem 1rem;
+}
+
+.SearchContainer-link {
+  color: blue;
+}

package/docs/src/components/Header/Search.tsx

@@ -0,0 +1,65 @@
+import type { FunctionalComponent } from 'preact'
+import { h, Fragment } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import Fuse from 'fuse.js'
+import './Search.css'
+
+const SearchForm: FunctionalComponent = () => {
+  const fuse = useRef(null)
+  const [results, setResults] = useState([])
+
+  const searchContent = (event: SubmitEvent) => {
+    event.preventDefault()
+    const data = Object.fromEntries(
+      new FormData(event.currentTarget as HTMLFormElement)
+    )
+    const result = fuse.current.search(data.search)
+    setResults(result.map(({ item }) => item))
+  }
+
+  useEffect(() => {
+    fetch('/xs-dev/search-index.json')
+      .then((res) => res.json())
+      .then((content) => {
+        const options = { keys: ['title', 'description', 'content'] }
+        fuse.current = new Fuse(content, options)
+      })
+  }, [])
+
+  return (
+    <div class="flex flex-column SearchContainer">
+      <form method="GET" id="search-form" onSubmit={searchContent}>
+        <div role="search" class="flex flex-row">
+          <input
+            type="search"
+            id="search"
+            name="search"
+            aria-label="search documentation content"
+            placeholder="search documentation content"
+            class="SearchContainer-input"
+          />
+          <button type="submit" class="SearchContainer-button">
+            Search
+          </button>
+        </div>
+      </form>
+      <ul
+        class={`SearchContainer-list ${
+          results.length > 0 ? 'has-results' : undefined
+        }`}
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        {results.map((result) => (
+          <li class="SearchContainer-list_item">
+            <a href={result.url} class="SearchContainer-link">
+              {result.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default SearchForm

package/docs/src/components/Header/SidebarToggle.tsx

@@ -0,0 +1,44 @@
+import type { FunctionalComponent } from 'preact';
+import { h, Fragment } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+const MenuToggle: FunctionalComponent = () => {
+	const [sidebarShown, setSidebarShown] = useState(false);
+
+	useEffect(() => {
+		const body = document.getElementsByTagName('body')[0];
+		if (sidebarShown) {
+			body.classList.add('mobile-sidebar-toggle');
+		} else {
+			body.classList.remove('mobile-sidebar-toggle');
+		}
+	}, [sidebarShown]);
+
+	return (
+		<button
+			type="button"
+			aria-pressed={sidebarShown ? 'true' : 'false'}
+			id="menu-toggle"
+			onClick={() => setSidebarShown(!sidebarShown)}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="1em"
+				height="1em"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M4 6h16M4 12h16M4 18h16"
+				/>
+			</svg>
+			<span className="sr-only">Toggle sidebar</span>
+		</button>
+	);
+};
+
+export default MenuToggle;

package/docs/src/components/Header/SkipToContent.astro

@@ -0,0 +1,22 @@
+<a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>
+
+<style>
+	.skiplink,
+	.skiplink:focus,
+	.skiplink:focus-visible {
+		position: absolute;
+		padding: 0.25em;
+		font-size: larger;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 9;
+		display: block;
+		text-align: center;
+		background-color: var(--theme-text-accent);
+		color: var(--theme-bg);
+		border-radius: 0.25em;
+		outline: var(--theme-bg) solid 1px;
+		outline-offset: 0;
+	}
+</style>

package/docs/src/components/LeftSidebar/LeftSidebar.astro

@@ -0,0 +1,118 @@
+---
+import { getLanguageFromURL } from '../../languages.ts';
+import { SIDEBAR } from '../../config.ts';
+const { currentPage } = Astro.props;
+const currentPageMatch = currentPage.slice(1);
+const langCode = getLanguageFromURL(currentPage);
+// SIDEBAR is a flat array. Group it by sections to properly render.
+const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
+	// If the first item is not a section header, create a new container section.
+	if (i === 0) {
+		if (!item.header) {
+			const pesudoSection = { text: "" };
+			col.push({ ...pesudoSection, children: [] });
+		}
+	}
+	if (item.header) {
+		col.push({ ...item, children: [] });
+	} else {
+		col[col.length - 1].children.push(item);
+	}
+	return col;
+}, []);
+---
+
+<nav aria-labelledby="grid-left">
+	<ul class="nav-groups">
+		{sidebarSections.map((section) => (
+			<li>
+				<div class="nav-group">
+					<h2 class="nav-group-title">{section.text}</h2>
+					<ul>
+						{section.children.map((child) => (
+							<li class="nav-link">
+								<a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}>
+									{child.text}
+								</a>
+							</li>
+						))}
+					</ul>
+				</div>
+			</li>
+		))}
+	</ul>
+</nav>
+
+<script is:inline>
+	window.addEventListener('DOMContentLoaded', (event) => {
+		var target = document.querySelector('[aria-current="page"]');
+		if (target && target.offsetTop > window.innerHeight - 100) {
+			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
+		}
+	});
+</script>
+
+<style>
+	nav {
+		width: 100%;
+		margin-right: 1rem;
+	}
+	.nav-groups {
+		height: 100%;
+		padding: 2rem 0;
+		overflow-x: visible;
+		overflow-y: auto;
+		max-height: 100vh;
+	}
+
+	.nav-groups > li + li {
+		margin-top: 2rem;
+	}
+
+	.nav-groups > :first-child {
+		padding-top: var(--doc-padding);
+	}
+
+	.nav-groups > :last-child {
+		padding-bottom: 2rem;
+		margin-bottom: var(--theme-navbar-height);
+	}
+
+	.nav-group-title {
+		font-size: 1rem;
+		font-weight: 700;
+		padding: 0.1rem 1rem;
+		text-transform: uppercase;
+		margin-bottom: 0.5rem;
+	}
+
+	.nav-link a {
+		font-size: 1rem;
+		margin: 1px;
+		padding: 0.3rem 1rem;
+		font: inherit;
+		color: inherit;
+		text-decoration: none;
+		display: block;
+	}
+	.nav-link a:hover,
+	.nav-link a:focus {
+		background-color: var(--theme-bg-hover);
+	}
+
+	.nav-link a[aria-current='page'] {
+		color: var(--theme-text-accent);
+		background-color: var(--theme-bg-accent);
+		font-weight: 600;
+	}
+
+	:global(:root.theme-dark) .nav-link a[aria-current='page'] {
+		color: hsla(var(--color-base-white), 100%, 1);
+	}
+
+	@media (min-width: 50em) {
+		.nav-groups {
+			padding: 0;
+		}
+	}
+</style>

package/docs/src/components/PageContent/PageContent.astro

@@ -0,0 +1,41 @@
+---
+import MoreMenu from '../RightSidebar/MoreMenu.astro';
+import TableOfContents from '../RightSidebar/TableOfContents.tsx';
+
+const { content, githubEditUrl } = Astro.props;
+const title = content.title;
+const headers = content.astro.headers;
+---
+
+<article id="article" class="content">
+	<section class="main-section">
+		<h1 class="content-title" id="overview">{title}</h1>
+		<slot />
+	</section>
+	<nav class="block sm:hidden">
+		<MoreMenu editHref={githubEditUrl} />
+	</nav>
+</article>
+
+<style>
+	.content {
+		padding: 0;
+		max-width: 75ch;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.content > section {
+		margin-bottom: 4rem;
+	}
+	.block {
+		display: block;
+	}
+
+	@media (min-width: 50em) {
+		.sm\:hidden {
+			display: none;
+		}
+	}
+</style>

package/docs/src/components/RightSidebar/MoreMenu.astro

@@ -0,0 +1,70 @@
+---
+import ThemeToggleButton from './ThemeToggleButton.tsx';
+import * as CONFIG from '../../config';
+const { editHref } = Astro.props;
+const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
+---
+
+{showMoreSection && <h2 class="heading">More</h2>}
+<ul>
+	{editHref && (
+		<li class={`header-link depth-2`}>
+			<a class="edit-on-github" href={editHref} target="_blank">
+				<svg
+					aria-hidden="true"
+					focusable="false"
+					data-prefix="fas"
+					data-icon="pen"
+					class="svg-inline--fa fa-pen fa-w-16"
+					role="img"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 512 512"
+					height="1em"
+					width="1em"
+				>
+					<path
+						fill="currentColor"
+						d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
+					></path>
+				</svg>
+				<span>Edit this page</span>
+			</a>
+		</li>
+	)}
+	{CONFIG.COMMUNITY_INVITE_URL && (
+		<li class={`header-link depth-2`}>
+			<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
+				<svg
+					aria-hidden="true"
+					focusable="false"
+					data-prefix="fas"
+					data-icon="comment-alt"
+					class="svg-inline--fa fa-comment-alt fa-w-16"
+					role="img"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 512 512"
+					height="1em"
+					width="1em"
+				>
+					<path
+						fill="currentColor"
+						d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+					></path>
+				</svg>
+				<span>Join our community</span>
+			</a>
+		</li>
+	)}
+</ul>
+<div style="margin: 2rem 0; text-align: center;">
+	<ThemeToggleButton client:visible />
+</div>
+
+<style>
+	.edit-on-github {
+		text-decoration: none;
+		font: inherit;
+		color: inherit;
+		font-size: 1rem;
+	}
+</style>

package/docs/src/components/RightSidebar/RightSidebar.astro

@@ -0,0 +1,27 @@
+---
+import TableOfContents from './TableOfContents.tsx';
+import MoreMenu from './MoreMenu.astro';
+const { content, githubEditUrl } = Astro.props;
+const headers = content.astro.headers;
+---
+
+<nav class="sidebar-nav" aria-labelledby="grid-right">
+	<div class="sidebar-nav-inner">
+		<TableOfContents client:media="(min-width: 50em)" {headers} />
+		<MoreMenu editHref={githubEditUrl} />
+	</div>
+</nav>
+
+<style>
+	.sidebar-nav {
+		width: 100%;
+		position: sticky;
+		top: 0;
+	}
+	.sidebar-nav-inner {
+		height: 100%;
+		padding: 0;
+		padding-top: var(--doc-padding);
+		overflow: auto;
+	}
+</style>