xs-dev 0.25.4 → 0.25.6

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

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

@@ -1,40 +0,0 @@
----
-import MoreMenu from '../RightSidebar/MoreMenu.astro'
-import TableOfContents from '../RightSidebar/TableOfContents.tsx'
-
-const { content, githubEditUrl } = Astro.props
-const title = content.title
----
-
-<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

@@ -1,78 +0,0 @@
----
-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.replace(/pages\/xs\-dev/, 'pages')}
-          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"
-            />
-          </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"
-            />
-          </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

@@ -1,26 +0,0 @@
----
-import TableOfContents from './TableOfContents.tsx';
-import MoreMenu from './MoreMenu.astro';
-const { content, githubEditUrl, headings } = Astro.props;
----
-
-<nav class="sidebar-nav" aria-labelledby="grid-right">
-	<div class="sidebar-nav-inner">
-		<TableOfContents client:media="(min-width: 50em)" {headings} />
-		<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>

package/docs/src/components/RightSidebar/TableOfContents.tsx

@@ -1,52 +0,0 @@
-import { type Component, createSignal, onMount, onCleanup } from 'solid-js';
-import type { MarkdownHeading } from 'astro'
-
-const TableOfContents: Component<{ headings: MarkdownHeading[] }> = ({
-  headings = [],
-}) => {
-  let itemOffsets = []
-  const [activeId] = createSignal<string>(undefined)
-  const getItemOffsets = () => {
-    const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)')
-    itemOffsets = Array.from(titles).map((title) => ({
-      id: title.id,
-      topOffset: title.getBoundingClientRect().top + window.scrollY,
-    }))
-  }
-  onMount(() => {
-    getItemOffsets()
-    window.addEventListener('resize', getItemOffsets)
-  })
-
-  onCleanup(() => {
-    if (typeof window !== 'undefined' && 'removeEventListener' in window) {
-      window.removeEventListener('resize', getItemOffsets)
-    }
-  })
-
-  return (
-    <>
-      <h2 class="heading">On this page</h2>
-      <ul>
-        <li
-          class={`header-link depth-2 ${activeId() === 'overview' ? 'active' : ''
-            }`.trim()}
-        >
-          <a href="#overview">Overview</a>
-        </li>
-        {headings
-          .filter(({ depth }) => depth > 1 && depth < 4)
-          .map((header) => (
-            <li
-              class={`header-link depth-${header.depth} ${activeId() === header.slug ? 'active' : ''
-                }`.trim()}
-            >
-              <a href={`#${header.slug}`}>{header.text}</a>
-            </li>
-          ))}
-      </ul>
-    </>
-  )
-}
-
-export default TableOfContents

package/docs/src/components/RightSidebar/ThemeToggleButton.css

@@ -1,37 +0,0 @@
-.theme-toggle {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.25em;
-	padding: 0.33em 0.67em;
-	border-radius: 99em;
-	background-color: var(--theme-code-inline-bg);
-}
-
-.theme-toggle > label:focus-within {
-	outline: 2px solid transparent;
-	box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-}
-
-.theme-toggle > label {
-	color: var(--theme-code-inline-text);
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0.5;
-}
-
-.theme-toggle .checked {
-	color: var(--theme-accent);
-	opacity: 1;
-}
-
-input[name='theme-toggle'] {
-	position: absolute;
-	opacity: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: -1;
-}

package/docs/src/components/RightSidebar/ThemeToggleButton.tsx

@@ -1,75 +0,0 @@
-import { type Component, createSignal, createEffect } from 'solid-js';
-import './ThemeToggleButton.css';
-
-const themes = ['light', 'dark'] as const;
-
-const icons = [
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-      clip-rule="evenodd"
-    />
-  </svg>,
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-  </svg>,
-];
-
-const ThemeToggle: Component = () => {
-  let [theme, setTheme] = createSignal('light');
-  if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-    [theme, setTheme] = createSignal(localStorage.getItem('theme'))
-  } else if (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    [theme, setTheme] = createSignal('dark')
-  }
-
-  createEffect(() => {
-    const root = document.documentElement;
-    if (theme() === 'light') {
-      root.classList.remove('theme-dark');
-    } else {
-      root.classList.add('theme-dark');
-    }
-  });
-
-  return (
-    <div class="theme-toggle">
-      {themes.map((t, i) => {
-        const icon = icons[i];
-        const checked = t === theme();
-        return (
-          <label class={checked ? ' checked' : ''}>
-            {icon}
-            <input
-              type="radio"
-              name="theme-toggle"
-              checked={checked}
-              value={t}
-              title={`Use ${t} theme`}
-              aria-label={`Use ${t} theme`}
-              onChange={() => {
-                localStorage.setItem('theme', t);
-                setTheme(t);
-              }}
-            />
-          </label>
-        );
-      })}
-    </div>
-  );
-};
-
-export default ThemeToggle;

package/docs/src/config.ts

@@ -1,48 +0,0 @@
-export const SITE = {
-  title: 'xs-dev Documentation',
-  description: 'CLI for automating the setup and usage of Moddable XS tools',
-  defaultLanguage: 'en_US',
-}
-
-export const OPEN_GRAPH = {
-  twitter: 'hipsterbrown',
-  github: 'hipsterbrown',
-}
-
-export const KNOWN_LANGUAGES = {
-  English: 'en',
-}
-
-// Uncomment this to add an "Edit this page" button to every page of documentation.
-export const GITHUB_EDIT_URL = `https://github.com/hipsterbrown/xs-dev/blob/main/docs/`
-
-// Uncomment this to add an "Join our Community" button to every page of documentation.
-// export const COMMUNITY_INVITE_URL = `https://astro.build/chat`;
-
-// Uncomment this to enable site search.
-// See "Algolia" section of the README for more information.
-// export const ALGOLIA = {
-//   indexName: 'XXXXXXXXXX',
-//   appId: 'XXXXXXXXXX',
-//   apiKey: 'XXXXXXXXXX',
-// }
-
-export const SIDEBAR = {
-  en: [
-    { text: '', header: true },
-    { text: 'Features', header: true },
-    { text: 'Introduction', link: 'en/introduction' },
-    { text: 'Setup', link: 'en/features/setup' },
-    { text: 'Updates', link: 'en/features/update' },
-    { text: 'Teardown', link: 'en/features/teardown' },
-    { text: 'Env Info', link: 'en/features/doctor' },
-    { text: 'Device Discovery', link: 'en/features/scan' },
-    { text: 'Project Creation', link: 'en/features/init' },
-    { text: 'Build & Run', link: 'en/features/run' },
-    { text: 'SDK Module Management', link: 'en/features/include' },
-    { text: 'Guide', header: true },
-    { text: '00. Prepare', link: 'en/guide/00-prepare' },
-    { text: '01. Hello Console', link: 'en/guide/01-hello-console' },
-    { text: '02. Guiding Light', link: 'en/guide/02-blinky' },
-  ],
-}

package/docs/src/languages.ts

@@ -1,10 +0,0 @@
-import { KNOWN_LANGUAGES } from './config'
-
-export { KNOWN_LANGUAGES }
-export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES)
-export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//
-
-export function getLanguageFromURL(pathname: string) {
-  const langCodeMatch = pathname.match(langPathRegex)
-  return langCodeMatch ? langCodeMatch[1] : 'en'
-}

package/docs/src/layouts/MainLayout.astro

@@ -1,122 +0,0 @@
----
-import HeadCommon from '../components/HeadCommon.astro';
-import HeadSEO from '../components/HeadSEO.astro';
-import Header from '../components/Header/Header.astro';
-import Footer from '../components/Footer/Footer.astro';
-import PageContent from '../components/PageContent/PageContent.astro';
-import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
-import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
-import * as CONFIG from '../config';
-
-const { content = {}, headings = [] } = Astro.props;
-const currentPage = new URL(Astro.request.url).pathname;
-const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
-const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile;
----
-
-<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
-	<head>
-		<HeadCommon />
-		<HeadSEO {content} />
-		<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
-		<style>
-			body {
-				width: 100%;
-				display: grid;
-				grid-template-rows: var(--theme-navbar-height) 1fr;
-				--gutter: 0.5rem;
-				--doc-padding: 2rem;
-			}
-			.layout {
-				display: grid;
-				grid-auto-flow: column;
-				grid-template-columns:
-					minmax(var(--gutter), 1fr)
-					minmax(0, var(--max-width))
-					minmax(var(--gutter), 1fr);
-				overflow-x: hidden;
-			}
-			.layout :global(> *) {
-				width: 100%;
-				height: 100%;
-			}
-			.grid-sidebar {
-				height: 100vh;
-				position: sticky;
-				top: 0;
-				padding: 0;
-			}
-			#grid-left {
-				position: fixed;
-				background-color: var(--theme-bg);
-				z-index: 10;
-				display: none;
-			}
-			#grid-main {
-				padding: var(--doc-padding) var(--gutter);
-				grid-column: 2;
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-			#grid-right {
-				display: none;
-			}
-			:global(.mobile-sidebar-toggle) {
-				overflow: hidden;
-			}
-			:global(.mobile-sidebar-toggle) #grid-left {
-				display: block;
-				top: 2rem;
-			}
-			@media (min-width: 50em) {
-				.layout {
-					overflow: initial;
-					grid-template-columns:
-						20rem
-						minmax(0, var(--max-width));
-					gap: 1em;
-				}
-				#grid-left {
-					display: flex;
-					padding-left: 2rem;
-					position: sticky;
-					grid-column: 1;
-				}
-			}
-
-			@media (min-width: 72em) {
-				.layout {
-					grid-template-columns:
-						20rem
-						minmax(0, var(--max-width))
-						18rem;
-					padding-left: 0;
-					padding-right: 0;
-					margin: 0 auto;
-				}
-				#grid-right {
-					grid-column: 3;
-					display: flex;
-				}
-			}
-		</style>
-	</head>
-
-	<body>
-		<Header {currentPage} />
-		<main class="layout">
-			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
-				<LeftSidebar {currentPage} />
-			</aside>
-			<div id="grid-main">
-				<PageContent {content} {githubEditUrl}>
-					<slot />
-				</PageContent>
-			</div>
-			<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
-				<RightSidebar {content} {headings} {githubEditUrl} />
-			</aside>
-		</main>
-	</body>
-</html>

package/docs/src/pages/en/introduction.md

@@ -1,82 +0,0 @@
----
-title: Introduction
-description: xs-dev intro
-layout: ../../layouts/MainLayout.astro
----
-
-# **Welcome to xs-dev!**
-
-CLI for automating the setup and usage of [Moddable XS tools](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/Moddable%20SDK%20-%20Getting%20Started.md)
-
-The Moddable SDK and associated dev board tooling is incredibly empowering for embedded JS hardware development, however the set up process can be tedious to follow when getting started. This project aims to streamline the installation and environment configuration requirements across platforms in just a few commands.
-
-**This project is a work in progress and currently pre-1.0, so there may be breaking changes.**
-
-**Features:**
-
-- [X] [Moddable SDK setup](/en/features/setup)
-- [X] [SDK updates](/en/features/update)
-- [X] [Teardown](/en/features/teardown)
-- [X] [Device discovery](/en/features/scan)
-- [X] [Project creation](/en/features/init)
-- [X] [Run a project or example](/en/features/run)
-- [X] [SDK module management](/en/features/include)
-- [X] [Get dev environment info](/en/features/doctor)
-- [ ] Third-party dependency management ([coming soon](https://github.com/HipsterBrown/xs-dev/issues/49))
-
-**Platform support:**
-
-- [X] Mac
-- [-] Windows (currently in beta)
-- [X] Linux
-
-**Check out the getting started video from the Moddable team**
-
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/1gxFWBnDl18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-
-**Read through the starter guide for a detailed walkthrough**
-
-0. [Prepare for embedded JS development](/en/guide/00-prepare)
-1. [Hello Console](/en/guide/01-hello-console)
-2. [Guiding light](/en/guide/02-blinky)
-
-## Requirements
-
-[Node.js >= v16](https://nodejs.org/en/)
-
-_If you've never installed Node.js before, check out the [getting started guide for xs-dev](/xs-dev/en/guide/00-prepare#nodejs-package-manager-optional)._
-
-**On Linux:**
-
-Setup commands rely on [`ssh-askpass`](https://packages.ubuntu.com/bionic/ssh-askpass) to prompt for permission when installing other tools and dependencies.
-
-## Installation
-
-Install the package globally from `npm`:
-
-```
-npm install -g xs-dev
-```
-
-```
-pnpm install -g xs-dev
-```
-
-```
-yarn global add xs-dev
-```
-
-## Update to latest release
-
-```
-npm update -g xs-dev
-```
-
-```
-pnpm update -g xs-dev
-```
-
-```
-yarn global upgrade xs-dev
-```
-