xs-dev 0.25.4 → 0.25.6

package/docs/public/make-scrollable-code-focusable.js

@@ -1,3 +0,0 @@
-Array.from(document.getElementsByTagName('pre')).forEach((element) => {
-  element.setAttribute('tabindex', '0')
-})

package/docs/src/components/Footer/AvatarList.astro

@@ -1,149 +0,0 @@
----
-// fetch all commits for just this page's path
-const path = 'docs/' + Astro.props.path;
-const url = `https://api.github.com/repos/hipsterbrown/xs-dev/commits?path=${path}`;
-const commitsURL = `https://github.com/hipsterbrown/xs-dev/commits/main/${path}`;
-
-async function getCommits(url) {
-	try {
-		const token = import.meta.env.PUBLIC_GITHUB_TOKEN;
-		if (!token) {
-			throw new Error('Cannot find "PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.');
-		}
-
-		const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
-
-		const res = await fetch(url, {
-			method: 'GET',
-			headers: {
-				Authorization: auth,
-				'User-Agent': 'astro-docs/1.0',
-			},
-		});
-
-		const data = await res.json();
-
-		if (!res.ok) {
-			throw new Error(
-				`Request to fetch commits failed. Reason: ${res.statusText}
-       Message: ${data.message}`
-			);
-		}
-
-		return data;
-	} catch (e) {
-		console.warn(`[error]  /src/components/AvatarList.astro 
-    ${e?.message ?? e}`);
-		return new Array();
-	}
-}
-
-function removeDups(arr) {
-	if (!arr) {
-		return new Array();
-	}
-	let map = new Map();
-
-	for (let item of arr) {
-		let author = item.author;
-		// Deduplicate based on author.id
-		map.set(author.id, { login: author.login, id: author.id });
-	}
-
-	return Array.from(map.values());
-}
-
-const data = await getCommits(url);
-const unique = removeDups(data);
-const recentContributors = unique.slice(0, 3); // only show avatars for the 3 most recent contributors
-const additionalContributors = unique.length - recentContributors.length; // list the rest of them as # of extra contributors
----
-
-<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
-<div class="contributors">
-	<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
-		{recentContributors.map((item) => (
-			<li>
-				<a href={`https://github.com/${item.login}`}>
-					<img alt={`Contributor ${item.login}`} title={`Contributor ${item.login}`} width="64" height="64" src={`https://avatars.githubusercontent.com/u/${item.id}`} />
-				</a>
-			</li>
-		))}
-	</ul>
-	{additionalContributors > 0 && (
-		<span>
-			<a href={commitsURL}>{`and ${additionalContributors} additional contributor${additionalContributors > 1 ? 's' : ''}.`}</a>
-		</span>
-	)}
-	{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
-</div>
-
-<style>
-	.avatar-list {
-		--avatar-size: 2.5rem;
-		--avatar-count: 3;
-
-		display: grid;
-		list-style: none;
-		/* Default to displaying most of the avatar to
-  enable easier access on touch devices, ensuring
-  the WCAG touch target size is met or exceeded */
-		grid-template-columns: repeat(var(--avatar-count), max(44px, calc(var(--avatar-size) / 1.15)));
-		/* `padding` matches added visual dimensions of
-  the `box-shadow` to help create a more accurate
-  computed component size */
-		padding: 0.08em;
-		font-size: var(--avatar-size);
-	}
-
-	@media (any-hover: hover) and (any-pointer: fine) {
-		.avatar-list {
-			/* We create 1 extra cell to enable the computed 
-    width to match the final visual width */
-			grid-template-columns: repeat(calc(var(--avatar-count) + 1), calc(var(--avatar-size) / 1.75));
-		}
-	}
-
-	.avatar-list li {
-		width: var(--avatar-size);
-		height: var(--avatar-size);
-	}
-
-	.avatar-list li:hover ~ li a,
-	.avatar-list li:focus-within ~ li a {
-		transform: translateX(33%);
-	}
-
-	.avatar-list img,
-	.avatar-list a {
-		display: block;
-		border-radius: 50%;
-	}
-
-	.avatar-list a {
-		transition: transform 180ms ease-in-out;
-	}
-
-	.avatar-list img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		background-color: #fff;
-		box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
-	}
-
-	.avatar-list a:focus {
-		outline: 2px solid transparent;
-		/* Double-layer trick to work for dark and light backgrounds */
-		box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-	}
-
-	.contributors {
-		display: flex;
-		align-items: center;
-	}
-
-	.contributors > * + * {
-		margin-left: 0.75rem;
-	}
-</style>

package/docs/src/components/Footer/Footer.astro

@@ -1,16 +0,0 @@
----
-import AvatarList from './AvatarList.astro';
-const { path } = Astro.props;
----
-
-<footer>
-	<AvatarList {path} />
-</footer>
-
-<style>
-	footer {
-		margin-top: auto;
-		padding: 2rem 0;
-		border-top: 3px solid var(--theme-divider);
-	}
-</style>

package/docs/src/components/HeadCommon.astro

@@ -1,38 +0,0 @@
----
-import '../styles/theme.css'
-import '../styles/index.css'
----
-
-<!-- Global Metadata -->
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
-
-<link rel="sitemap" href="/sitemap.xml" />
-
-<!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap"
-  rel="stylesheet"
-/>
-
-<!-- Scrollable a11y code helper -->
-<script src="/make-scrollable-code-focusable.js" is:inline></script>
-
-<!-- This is intentionally inlined to avoid FOUC -->
-<script is:inline>
-  const root = document.documentElement
-  const theme = localStorage.getItem('theme')
-  if (
-    theme === 'dark' ||
-    (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  ) {
-    root.classList.add('theme-dark')
-  } else {
-    root.classList.remove('theme-dark')
-  }
-</script>

package/docs/src/components/HeadSEO.astro

@@ -1,28 +0,0 @@
----
-import { SITE, OPEN_GRAPH } from '../config.ts';
-export interface Props {
-	content: any;
-	site: any;
-	canonicalURL: URL | string;
-}
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const { content = {} } = Astro.props;
-const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
----
-
-<!-- Page Metadata -->
-<link rel="canonical" href={canonicalURL} />
-
-<!-- OpenGraph Tags -->
-<meta property="og:title" content={formattedContentTitle} />
-<meta property="og:type" content="article" />
-<meta property="og:url" content={canonicalURL} />
-<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
-<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
-<meta property="og:site_name" content={SITE.title} />
-
-<!-- Twitter Tags -->
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
-<meta name="twitter:title" content={formattedContentTitle} />
-<meta name="twitter:description" content={content.description ? content.description : SITE.description} />

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

@@ -1,133 +0,0 @@
----
-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={import.meta.env.BASE_URL}>
-				<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

@@ -1,47 +0,0 @@
-.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

@@ -1,47 +0,0 @@
-import type { Component } from 'solid-js';
-import './LanguageSelect.css';
-import { KNOWN_LANGUAGES, langPathRegex } from '../../languages';
-
-const LanguageSelect: Component<{ lang: string }> = ({ lang }) => {
-  return (
-    <div class="language-select-wrapper">
-      <svg
-        aria-hidden="true"
-        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.currentTarget.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]}>
-              {key}
-            </option>
-          );
-        })}
-      </select>
-    </div>
-  );
-};
-
-export default LanguageSelect;

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

@@ -1,39 +0,0 @@
-.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

@@ -1,61 +0,0 @@
-import { type Component, createSignal, For, onMount } from 'solid-js';
-import Fuse from 'fuse.js'
-import './Search.css'
-
-const SearchForm: Component = () => {
-  let fuse: null | Fuse<{ url: string, title: string }> = null;
-  const [results, setResults] = createSignal([]);
-
-  const searchContent = (event: SubmitEvent) => {
-    event.preventDefault()
-    const { search } = Object.fromEntries(
-      new FormData(event.currentTarget as HTMLFormElement)
-    )
-    const result = fuse.search(search as string)
-    setResults(result.map(({ item }) => item))
-  }
-
-  onMount(async () => {
-    const content = await fetch('/search-index.json')
-      .then((res) => res.json())
-    const options = { keys: ['title', 'description', 'content'] }
-    fuse = 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
-        classList={{ 'SearchContainer-list': true, 'has-results': results().length > 0 }}
-        aria-live="assertive"
-        aria-atomic="true"
-      >
-        <For each={results()}>
-          {(result) => (
-            <li class="SearchContainer-list_item">
-              <a href={result.url} class="SearchContainer-link">
-                {result.title}
-              </a>
-            </li>
-          )}
-        </For>
-      </ul>
-    </div>
-  )
-}
-
-export default SearchForm

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

@@ -1,43 +0,0 @@
-import { type Component, createSignal, createEffect } from 'solid-js';
-
-const MenuToggle: Component = () => {
-  const [sidebarShown, setSidebarShown] = createSignal(false);
-
-  createEffect(() => {
-    const [body] = document.getElementsByTagName('body');
-    const showSidebar = sidebarShown();
-    if (showSidebar) {
-      body.classList.add('mobile-sidebar-toggle');
-    } else {
-      body.classList.remove('mobile-sidebar-toggle');
-    }
-  });
-
-  return (
-    <button
-      type="button"
-      aria-pressed={sidebarShown() ? 'true' : 'false'}
-      id="menu-toggle"
-      onClick={() => setSidebarShown(current => !current)}
-    >
-      <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 class="sr-only">Toggle sidebar</span>
-    </button>
-  );
-};
-
-export default MenuToggle;

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

@@ -1,22 +0,0 @@
-<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>