xs-dev 0.14.3 → 0.15.0

package/README.md

@@ -334,3 +334,7 @@ To maintain the alias between shell sessions, for example I use zsh:
 ```
 echo "alias local-xs-dev=$PWD/bin/xs-dev" >> ~/.zshrc
 ```
+
+## Docs
+
+The documentation site is built with [Astro](https://astro.build) and can be found in the `docs/` directory. When working on them locally, run `pnpm start:docs` to start the development server that watches for file changes and reloads the page.

package/build/toolbox/setup/esp32.js

@@ -13,7 +13,7 @@ const linux_1 = require("./esp32/linux");
 async function default_1() {
     const OS = (0, os_1.type)().toLowerCase();
     const ESP_IDF_REPO = 'https://github.com/espressif/esp-idf.git';
-    const ESP_BRANCH = 'v4.4';
+    const ESP_BRANCH = 'v4.4.2';
     const ESP32_DIR = gluegun_1.filesystem.resolve(constants_1.INSTALL_DIR, 'esp32');
     const IDF_PATH = gluegun_1.filesystem.resolve(ESP32_DIR, 'esp-idf');
     const spinner = gluegun_1.print.spin();
@@ -67,4 +67,4 @@ async function default_1() {
   `);
 }
 exports.default = default_1;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXNwMzIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdG9vbGJveC9zZXR1cC9lc3AzMi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLHFDQUFtRDtBQUNuRCwyQkFBeUM7QUFDekMsMkNBQTREO0FBQzVELHlDQUEyQztBQUMzQyxnRUFBdUM7QUFDdkMscUNBQTJEO0FBQzNELHlDQUErRDtBQUVoRCxLQUFLO0lBQ2xCLE1BQU0sRUFBRSxHQUFHLElBQUEsU0FBWSxHQUFFLENBQUMsV0FBVyxFQUFFLENBQUE7SUFDdkMsTUFBTSxZQUFZLEdBQUcsMENBQTBDLENBQUE7SUFDL0QsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFBO0lBQ3pCLE1BQU0sU0FBUyxHQUFHLG9CQUFVLENBQUMsT0FBTyxDQUFDLHVCQUFXLEVBQUUsT0FBTyxDQUFDLENBQUE7SUFDMUQsTUFBTSxRQUFRLEdBQUcsb0JBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFBO0lBRXpELE1BQU0sT0FBTyxHQUFHLGVBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQTtJQUM1QixPQUFPLENBQUMsS0FBSyxDQUFDLHdCQUF3QixDQUFDLENBQUE7SUFFdkMsNEJBQTRCO0lBQzVCLElBQUksQ0FBQyxJQUFBLHlCQUFjLEdBQUUsRUFBRTtRQUNyQixPQUFPLENBQUMsSUFBSSxDQUNWLG9FQUFvRSxDQUNyRSxDQUFBO1FBQ0QsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQTtLQUNoQjtJQUVELDJDQUEyQztJQUMzQyxPQUFPLENBQUMsSUFBSSxDQUFDLGtDQUFrQyxDQUFDLENBQUE7SUFDaEQsb0JBQVUsQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUE7SUFFekIscURBQXFEO0lBQ3JELElBQUksb0JBQVUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEtBQUssS0FBSyxFQUFFO1FBQ3pDLE9BQU8sQ0FBQyxLQUFLLENBQUMsc0JBQXNCLENBQUMsQ0FBQTtRQUNyQyxNQUFNLGdCQUFNLENBQUMsS0FBSyxDQUNoQixnQkFBZ0IsVUFBVSxnQkFBZ0IsWUFBWSxJQUFJLFFBQVEsRUFBRSxDQUNyRSxDQUFBO1FBQ0QsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFBO0tBQ2xCO0lBRUQsd0NBQXdDO0lBQ3hDLE9BQU8sQ0FBQyxLQUFLLENBQUMsK0JBQStCLENBQUMsQ0FBQTtJQUU5QyxJQUFJLEVBQUUsS0FBSyxRQUFRLEVBQUU7UUFDbkIsTUFBTSxJQUFBLGlCQUFjLEVBQUMsT0FBTyxDQUFDLENBQUE7S0FDOUI7SUFFRCxJQUFJLEVBQUUsS0FBSyxPQUFPLEVBQUU7UUFDbEIsTUFBTSxJQUFBLG1CQUFnQixFQUFDLE9BQU8sQ0FBQyxDQUFBO0tBQ2hDO0lBRUQsaURBQWlEO0lBQ2pELElBQUksT0FBTyxDQUFDLEdBQUcsQ0FBQyxRQUFRLEtBQUssU0FBUyxFQUFFO1FBQ3RDLE9BQU8sQ0FBQyxJQUFJLENBQUMsdUJBQXVCLENBQUMsQ0FBQTtRQUNyQyxPQUFPLENBQUMsR0FBRyxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUE7UUFDL0IsTUFBTSxJQUFBLGdCQUFNLEVBQUMsNkJBQWlCLEVBQUUsbUJBQW1CLFFBQVEsRUFBRSxDQUFDLENBQUE7S0FDL0Q7SUFFRCxvQ0FBb0M7SUFDcEMsT0FBTyxDQUFDLEtBQUssQ0FBQyw0QkFBNEIsQ0FBQyxDQUFBO0lBQzNDLE1BQU0sZ0JBQU0sQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFO1FBQ2hDLEdBQUcsRUFBRSxRQUFRO1FBQ2IsS0FBSyxFQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsS0FBSztRQUN4QixNQUFNLEVBQUUsT0FBTyxDQUFDLE1BQU07S0FDdkIsQ0FBQyxDQUFBO0lBQ0YsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFBO0lBRWpCLDBEQUEwRDtJQUMxRCxPQUFPLENBQUMsSUFBSSxDQUFDLDhCQUE4QixDQUFDLENBQUE7SUFDNUMsTUFBTSxJQUFBLGdCQUFNLEVBQUMsNkJBQWlCLEVBQUUseUNBQXlDLENBQUMsQ0FBQTtJQUMxRSxNQUFNLGdCQUFNLENBQUMsSUFBSSxDQUFDLDRCQUE0QixFQUFFO1FBQzlDLEtBQUssRUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUs7S0FDekIsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUFDLE9BQU8sQ0FBQzs7OztHQUlmLENBQUMsQ0FBQTtBQUNKLENBQUM7QUF0RUQsNEJBc0VDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXNwMzIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdG9vbGJveC9zZXR1cC9lc3AzMi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLHFDQUFtRDtBQUNuRCwyQkFBeUM7QUFDekMsMkNBQTREO0FBQzVELHlDQUEyQztBQUMzQyxnRUFBdUM7QUFDdkMscUNBQTJEO0FBQzNELHlDQUErRDtBQUVoRCxLQUFLO0lBQ2xCLE1BQU0sRUFBRSxHQUFHLElBQUEsU0FBWSxHQUFFLENBQUMsV0FBVyxFQUFFLENBQUE7SUFDdkMsTUFBTSxZQUFZLEdBQUcsMENBQTBDLENBQUE7SUFDL0QsTUFBTSxVQUFVLEdBQUcsUUFBUSxDQUFBO0lBQzNCLE1BQU0sU0FBUyxHQUFHLG9CQUFVLENBQUMsT0FBTyxDQUFDLHVCQUFXLEVBQUUsT0FBTyxDQUFDLENBQUE7SUFDMUQsTUFBTSxRQUFRLEdBQUcsb0JBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFBO0lBRXpELE1BQU0sT0FBTyxHQUFHLGVBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQTtJQUM1QixPQUFPLENBQUMsS0FBSyxDQUFDLHdCQUF3QixDQUFDLENBQUE7SUFFdkMsNEJBQTRCO0lBQzVCLElBQUksQ0FBQyxJQUFBLHlCQUFjLEdBQUUsRUFBRTtRQUNyQixPQUFPLENBQUMsSUFBSSxDQUNWLG9FQUFvRSxDQUNyRSxDQUFBO1FBQ0QsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQTtLQUNoQjtJQUVELDJDQUEyQztJQUMzQyxPQUFPLENBQUMsSUFBSSxDQUFDLGtDQUFrQyxDQUFDLENBQUE7SUFDaEQsb0JBQVUsQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUE7SUFFekIscURBQXFEO0lBQ3JELElBQUksb0JBQVUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEtBQUssS0FBSyxFQUFFO1FBQ3pDLE9BQU8sQ0FBQyxLQUFLLENBQUMsc0JBQXNCLENBQUMsQ0FBQTtRQUNyQyxNQUFNLGdCQUFNLENBQUMsS0FBSyxDQUNoQixnQkFBZ0IsVUFBVSxnQkFBZ0IsWUFBWSxJQUFJLFFBQVEsRUFBRSxDQUNyRSxDQUFBO1FBQ0QsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFBO0tBQ2xCO0lBRUQsd0NBQXdDO0lBQ3hDLE9BQU8sQ0FBQyxLQUFLLENBQUMsK0JBQStCLENBQUMsQ0FBQTtJQUU5QyxJQUFJLEVBQUUsS0FBSyxRQUFRLEVBQUU7UUFDbkIsTUFBTSxJQUFBLGlCQUFjLEVBQUMsT0FBTyxDQUFDLENBQUE7S0FDOUI7SUFFRCxJQUFJLEVBQUUsS0FBSyxPQUFPLEVBQUU7UUFDbEIsTUFBTSxJQUFBLG1CQUFnQixFQUFDLE9BQU8sQ0FBQyxDQUFBO0tBQ2hDO0lBRUQsaURBQWlEO0lBQ2pELElBQUksT0FBTyxDQUFDLEdBQUcsQ0FBQyxRQUFRLEtBQUssU0FBUyxFQUFFO1FBQ3RDLE9BQU8sQ0FBQyxJQUFJLENBQUMsdUJBQXVCLENBQUMsQ0FBQTtRQUNyQyxPQUFPLENBQUMsR0FBRyxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUE7UUFDL0IsTUFBTSxJQUFBLGdCQUFNLEVBQUMsNkJBQWlCLEVBQUUsbUJBQW1CLFFBQVEsRUFBRSxDQUFDLENBQUE7S0FDL0Q7SUFFRCxvQ0FBb0M7SUFDcEMsT0FBTyxDQUFDLEtBQUssQ0FBQyw0QkFBNEIsQ0FBQyxDQUFBO0lBQzNDLE1BQU0sZ0JBQU0sQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFO1FBQ2hDLEdBQUcsRUFBRSxRQUFRO1FBQ2IsS0FBSyxFQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsS0FBSztRQUN4QixNQUFNLEVBQUUsT0FBTyxDQUFDLE1BQU07S0FDdkIsQ0FBQyxDQUFBO0lBQ0YsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFBO0lBRWpCLDBEQUEwRDtJQUMxRCxPQUFPLENBQUMsSUFBSSxDQUFDLDhCQUE4QixDQUFDLENBQUE7SUFDNUMsTUFBTSxJQUFBLGdCQUFNLEVBQUMsNkJBQWlCLEVBQUUseUNBQXlDLENBQUMsQ0FBQTtJQUMxRSxNQUFNLGdCQUFNLENBQUMsSUFBSSxDQUFDLDRCQUE0QixFQUFFO1FBQzlDLEtBQUssRUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUs7S0FDekIsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUFDLE9BQU8sQ0FBQzs7OztHQUlmLENBQUMsQ0FBQTtBQUNKLENBQUM7QUF0RUQsNEJBc0VDIn0=

package/build/toolbox/update/esp32.js

@@ -13,7 +13,7 @@ const linux_1 = require("../setup/esp32/linux");
 async function default_1() {
     var _a, _b;
     const OS = (0, os_1.type)().toLowerCase();
-    const ESP_BRANCH = 'v4.4';
+    const ESP_BRANCH = 'v4.4.2';
     const ESP32_DIR = gluegun_1.filesystem.resolve(constants_1.INSTALL_DIR, 'esp32');
     const IDF_PATH = gluegun_1.filesystem.resolve(ESP32_DIR, 'esp-idf');
     const spinner = gluegun_1.print.spin();
@@ -86,4 +86,4 @@ async function default_1() {
   `);
 }
 exports.default = default_1;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXNwMzIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdG9vbGJveC91cGRhdGUvZXNwMzIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxxQ0FBNkQ7QUFDN0QsMkJBQXlDO0FBQ3pDLGtEQUFtRTtBQUNuRSxnREFBa0Q7QUFDbEQsZ0VBQXVDO0FBQ3ZDLDRDQUFrRTtBQUNsRSxnREFBc0U7QUFFdkQsS0FBSzs7SUFDbEIsTUFBTSxFQUFFLEdBQUcsSUFBQSxTQUFZLEdBQUUsQ0FBQyxXQUFXLEVBQUUsQ0FBQTtJQUN2QyxNQUFNLFVBQVUsR0FBRyxNQUFNLENBQUE7SUFDekIsTUFBTSxTQUFTLEdBQUcsb0JBQVUsQ0FBQyxPQUFPLENBQUMsdUJBQVcsRUFBRSxPQUFPLENBQUMsQ0FBQTtJQUMxRCxNQUFNLFFBQVEsR0FBRyxvQkFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDLENBQUE7SUFFekQsTUFBTSxPQUFPLEdBQUcsZUFBSyxDQUFDLElBQUksRUFBRSxDQUFBO0lBQzVCLE9BQU8sQ0FBQyxLQUFLLENBQUMseUJBQXlCLENBQUMsQ0FBQTtJQUV4Qyw0QkFBNEI7SUFDNUIsSUFBSSxDQUFDLElBQUEseUJBQWMsR0FBRSxFQUFFO1FBQ3JCLE9BQU8sQ0FBQyxJQUFJLENBQ1Ysb0VBQW9FLENBQ3JFLENBQUE7UUFDRCxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFBO0tBQ2hCO0lBRUQsMkNBQTJDO0lBQzNDLE9BQU8sQ0FBQyxJQUFJLENBQUMsa0NBQWtDLENBQUMsQ0FBQTtJQUNoRCxJQUNFLG9CQUFVLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEtBQUs7UUFDdEMsb0JBQVUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEtBQUssS0FBSyxFQUNyQztRQUNBLE9BQU8sQ0FBQyxJQUFJLENBQ1YsZ0ZBQWdGLENBQ2pGLENBQUE7UUFDRCxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFBO0tBQ2hCO0lBRUQsK0JBQStCO0lBQy9CLElBQUksb0JBQVUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEtBQUssS0FBSyxFQUFFO1FBQ3pDLE9BQU8sQ0FBQyxLQUFLLENBQUMsdUJBQXVCLENBQUMsQ0FBQTtRQUN0QyxNQUFNLGdCQUFNLENBQUMsS0FBSyxDQUFDLHdCQUF3QixFQUFFLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUE7UUFDL0QsTUFBTSxnQkFBTSxDQUFDLEtBQUssQ0FBQyxnQkFBZ0IsVUFBVSxFQUFFLEVBQUUsRUFBRSxHQUFHLEVBQUUsUUFBUSxFQUFFLENBQUMsQ0FBQTtRQUNuRSxNQUFNLGdCQUFNLENBQUMsS0FBSyxDQUFDLHlDQUF5QyxFQUFFO1lBQzVELEdBQUcsRUFBRSxRQUFRO1NBQ2QsQ0FBQyxDQUFBO1FBQ0YsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFBO0tBQ2xCO0lBRUQsd0NBQXdDO0lBQ3hDLE9BQU8sQ0FBQyxLQUFLLENBQUMsK0JBQStCLENBQUMsQ0FBQTtJQUU5QyxJQUFJLEVBQUUsS0FBSyxRQUFRLEVBQUU7UUFDbkIsTUFBTSxJQUFBLGlCQUFjLEVBQUMsT0FBTyxDQUFDLENBQUE7S0FDOUI7SUFFRCxJQUFJLEVBQUUsS0FBSyxPQUFPLEVBQUU7UUFDbEIsTUFBTSxJQUFBLG1CQUFnQixFQUFDLE9BQU8sQ0FBQyxDQUFBO0tBQ2hDO0lBRUQsaURBQWlEO0lBQ2pELElBQUksT0FBTyxDQUFDLEdBQUcsQ0FBQyxRQUFRLEtBQUssU0FBUyxFQUFFO1FBQ3RDLE9BQU8sQ0FBQyxJQUFJLENBQUMsdUJBQXVCLENBQUMsQ0FBQTtRQUNyQyxPQUFPLENBQUMsR0FBRyxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUE7UUFDL0IsTUFBTSxJQUFBLGdCQUFNLEVBQUMsNkJBQWlCLEVBQUUsbUJBQW1CLFFBQVEsRUFBRSxDQUFDLENBQUE7S0FDL0Q7SUFFRCx5REFBeUQ7SUFDekQsMkVBQTJFO0lBQzNFLE1BQU0sa0JBQVEsQ0FBQyxPQUFPLENBQUMsNkJBQWlCLEVBQUUsOEJBQThCLEVBQUUsRUFBRSxDQUFDLENBQUE7SUFDN0UsTUFBTSxnQkFBTSxDQUFDLElBQUksQ0FBQyxVQUFVLDZCQUFpQixFQUFFLEVBQUU7UUFDL0MsS0FBSyxFQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsS0FBSztLQUN6QixDQUFDLENBQUE7SUFFRixvQ0FBb0M7SUFDcEMsT0FBTyxDQUFDLEtBQUssQ0FBQyw0QkFBNEIsQ0FBQyxDQUFBO0lBQzNDLE1BQU0sZ0JBQU0sQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFO1FBQ2hDLEdBQUcsRUFBRSxRQUFRO1FBQ2IsS0FBSyxFQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsS0FBSztRQUN4QixNQUFNLEVBQUUsT0FBTyxDQUFDLE1BQU07S0FDdkIsQ0FBQyxDQUFBO0lBQ0YsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFBO0lBRWpCLDBEQUEwRDtJQUMxRCxPQUFPLENBQUMsSUFBSSxDQUFDLDhCQUE4QixDQUFDLENBQUE7SUFDNUMsTUFBTSxJQUFBLGdCQUFNLEVBQUMsNkJBQWlCLEVBQUUsNEJBQTRCLENBQUMsQ0FBQTtJQUM3RCxNQUFNLGdCQUFNLENBQUMsSUFBSSxDQUFDLDRCQUE0QixFQUFFO1FBQzlDLEtBQUssRUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUs7S0FDekIsQ0FBQyxDQUFBO0lBRUYsOENBQThDO0lBQzlDLE1BQU0sU0FBUyxHQUFHLG9CQUFVLENBQUMsT0FBTyxDQUNsQyxNQUFBLE9BQU8sQ0FBQyxHQUFHLENBQUMsUUFBUSxtQ0FBSSxFQUFFLEVBQzFCLE9BQU8sRUFDUCxLQUFLLEVBQ0wsT0FBTyxDQUNSLENBQUE7SUFDRCxNQUFNLE9BQU8sR0FBRyxvQkFBVSxDQUFDLE9BQU8sQ0FDaEMsTUFBQSxPQUFPLENBQUMsR0FBRyxDQUFDLFFBQVEsbUNBQUksRUFBRSxFQUMxQixPQUFPLEVBQ1AsS0FBSyxFQUNMLE9BQU8sQ0FDUixDQUFBO0lBQ0Qsb0JBQVUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUE7SUFDNUIsb0JBQVUsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUE7SUFFMUIsT0FBTyxDQUFDLE9BQU8sQ0FBQzs7OztHQUlmLENBQUMsQ0FBQTtBQUNKLENBQUM7QUF0R0QsNEJBc0dDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXNwMzIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdG9vbGJveC91cGRhdGUvZXNwMzIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxxQ0FBNkQ7QUFDN0QsMkJBQXlDO0FBQ3pDLGtEQUFtRTtBQUNuRSxnREFBa0Q7QUFDbEQsZ0VBQXVDO0FBQ3ZDLDRDQUFrRTtBQUNsRSxnREFBc0U7QUFFdkQsS0FBSzs7SUFDbEIsTUFBTSxFQUFFLEdBQUcsSUFBQSxTQUFZLEdBQUUsQ0FBQyxXQUFXLEVBQUUsQ0FBQTtJQUN2QyxNQUFNLFVBQVUsR0FBRyxRQUFRLENBQUE7SUFDM0IsTUFBTSxTQUFTLEdBQUcsb0JBQVUsQ0FBQyxPQUFPLENBQUMsdUJBQVcsRUFBRSxPQUFPLENBQUMsQ0FBQTtJQUMxRCxNQUFNLFFBQVEsR0FBRyxvQkFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDLENBQUE7SUFFekQsTUFBTSxPQUFPLEdBQUcsZUFBSyxDQUFDLElBQUksRUFBRSxDQUFBO0lBQzVCLE9BQU8sQ0FBQyxLQUFLLENBQUMseUJBQXlCLENBQUMsQ0FBQTtJQUV4Qyw0QkFBNEI7SUFDNUIsSUFBSSxDQUFDLElBQUEseUJBQWMsR0FBRSxFQUFFO1FBQ3JCLE9BQU8sQ0FBQyxJQUFJLENBQ1Ysb0VBQW9FLENBQ3JFLENBQUE7UUFDRCxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFBO0tBQ2hCO0lBRUQsMkNBQTJDO0lBQzNDLE9BQU8sQ0FBQyxJQUFJLENBQUMsa0NBQWtDLENBQUMsQ0FBQTtJQUNoRCxJQUNFLG9CQUFVLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEtBQUs7UUFDdEMsb0JBQVUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEtBQUssS0FBSyxFQUNyQztRQUNBLE9BQU8sQ0FBQyxJQUFJLENBQ1YsZ0ZBQWdGLENBQ2pGLENBQUE7UUFDRCxPQUFPLENBQUMsSUFB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

package/docs/astro.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig } from 'astro/config'
+
+import lit from '@astrojs/lit'
+import preact from '@astrojs/preact'
+import tailwind from '@astrojs/tailwind'
+import sitemap from '@astrojs/sitemap'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [preact(), lit(), tailwind(), sitemap()],
+  site: 'https://hipsterbrown.github.io',
+  base: '/xs-dev',
+})

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

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

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

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

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

@@ -0,0 +1,41 @@
+---
+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>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9" is:inline></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-TEL60V1WM9');
+</script> -->

package/docs/src/components/HeadSEO.astro

@@ -0,0 +1,34 @@
+---
+import { SITE, OPEN_GRAPH } from '../config.ts';
+export interface Props {
+	content: any;
+	site: any;
+	canonicalURL: URL | string;
+}
+const { content = {}, canonicalURL } = 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} />
+
+<!--
+  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
+  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
+  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
+  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
+-->

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