ol-stac 0.0.0 → 0.0.1

package/examples/webpack/example-builder.js

@@ -1,410 +0,0 @@
-import assert from 'assert';
-import frontMatter from 'front-matter';
-import fs from 'fs';
-import fse from 'fs-extra';
-import handlebars from 'handlebars';
-import path, {dirname} from 'path';
-import sources from 'webpack-sources';
-import {fileURLToPath} from 'url';
-import {marked} from 'marked';
-
-const RawSource = sources.RawSource;
-const baseDir = dirname(fileURLToPath(import.meta.url));
-
-const isCssRegEx = /\.css(\?.*)?$/;
-const isJsRegEx = /\.js(\?.*)?$/;
-const importRegEx = /\s?import .*? from '([^']+)'/g;
-const isTemplateJs = /\/(?:bootstrap(?:\.bundle)?)(?:\.min)?\.js(?:\?.*)?$/;
-const isTemplateCss =
-  /\/(?:bootstrap|fontawesome-free@[\d.]+\/css\/(?:fontawesome|brands|solid))(?:\.min)?\.css(?:\?.*)?$/;
-
-const exampleDirContents = fs
-  .readdirSync(path.join(baseDir, '..'))
-  .filter((name) => /^(?!index).*\.html$/.test(name))
-  .map((name) => name.replace(/\.html$/, ''));
-
-function getPackageInfo() {
-  return fse.readJSON(path.resolve(baseDir, '../../package.json'));
-}
-
-handlebars.registerHelper(
-  'md',
-  (str) =>
-    new handlebars.SafeString(marked(str, {headerIds: false, mangle: false}))
-);
-
-/**
- * Used to doube-escape the title when stored as data-* attribute.
- */
-handlebars.registerHelper('escape', (text) => {
-  return handlebars.Utils.escapeExpression(text);
-});
-
-handlebars.registerHelper('indent', (text, options) => {
-  if (!text) {
-    return text;
-  }
-  const count = options.hash.spaces || 2;
-  const spaces = new Array(count + 1).join(' ');
-  return text
-    .split('\n')
-    .map((line) => (line ? spaces + line : ''))
-    .join('\n');
-});
-
-/**
- * Returns the object with the keys inserted in alphabetic order.
- * When exporting with `JSON.stringify(obj)` the keys are sorted.
- * @param {Object<string, *>} obj Any object
- * @return {Object<string, *>} New object
- */
-function sortObjectByKey(obj) {
-  return Object.keys(obj)
-    .sort() // sort twice to get predictable, case insensitive order
-    .sort((a, b) => a.localeCompare(b, 'en', {sensitivity: 'base'}))
-    .reduce((idx, tag) => {
-      idx[tag] = obj[tag];
-      return idx;
-    }, {});
-}
-
-/**
- * Create an index of tags belonging to examples
- * @param {Array<Object>} exampleData Array of example data objects.
- * @return {Object} Word index.
- */
-function createTagIndex(exampleData) {
-  const index = {};
-  exampleData.forEach((data, i) => {
-    data.tags.forEach((tag) => {
-      tag = tag.toLowerCase();
-      let tagIndex = index[tag];
-      if (!tagIndex) {
-        tagIndex = [];
-        index[tag] = tagIndex;
-      }
-      tagIndex.push(i);
-    });
-  });
-  return index;
-}
-
-/**
- * Create an inverted index of keywords from examples.  Property names are
- * lowercased words.  Property values are objects mapping example index to word
- * count.
- * @param {Array<Object>} exampleData Array of example data objects.
- * @return {Object} Word index.
- */
-function createWordIndex(exampleData) {
-  const index = {};
-  const keys = ['shortdesc', 'title', 'tags'];
-  exampleData.forEach((data, i) => {
-    keys.forEach((key) => {
-      let text = data[key] || '';
-      if (Array.isArray(text)) {
-        text = text.join(' ');
-      }
-      const words = text.toLowerCase().split(/\W+/);
-      words.forEach((word) => {
-        if (word) {
-          let counts = index[word];
-          if (!counts) {
-            counts = {};
-            index[word] = counts;
-          }
-          counts[i] = (counts[i] || 0) + 1;
-        }
-      });
-    });
-  });
-  return index;
-}
-
-/**
- * Gets dependencies from the js source.
- * @param {string} jsSource Source.
- * @param {Object} pkg Package info.
- * @return {Object<string, string>} dependencies
- */
-function getDependencies(jsSource, pkg) {
-  const dependencies = {
-    ol: pkg.version,
-  };
-
-  let importMatch;
-  while ((importMatch = importRegEx.exec(jsSource))) {
-    const imp = importMatch[1];
-    if (!imp.startsWith('ol/') && imp != 'ol') {
-      const parts = imp.split('/');
-      const dep = imp.startsWith('@') ? parts.slice(0, 2).join('/') : parts[0];
-      if (dep in pkg.devDependencies) {
-        dependencies[dep] = pkg.devDependencies[dep];
-      } else if (dep in pkg.dependencies) {
-        dependencies[dep] = pkg.dependencies[dep];
-      }
-    }
-  }
-  return dependencies;
-}
-
-export default class ExampleBuilder {
-  /**
-   * A webpack plugin that builds the html files for our examples.
-   * @param {Object} config Plugin configuration.  Requires a `templates` property
-   * with the path to templates and a `common` property with the name of the
-   * common chunk.
-   */
-  constructor(config) {
-    this.name = 'ExampleBuilder';
-    this.templates = config.templates;
-    this.common = config.common;
-  }
-
-  /**
-   * Called by webpack.
-   * @param {Object} compiler The webpack compiler.
-   */
-  apply(compiler) {
-    compiler.hooks.compilation.tap(this.name, (compilation) => {
-      compilation.hooks.additionalAssets.tapPromise(this.name, async () => {
-        await this.addAssets(compilation.assets, compiler.context);
-      });
-    });
-  }
-
-  async addAssets(assets, dir) {
-    const jsAssetRE = /^[\w-]+\.js$/;
-    const names = [];
-    for (const filename in assets) {
-      if (!jsAssetRE.test(filename)) {
-        continue;
-      }
-
-      const name = filename.replace(/\.js$/, '');
-      if (!exampleDirContents.includes(name)) {
-        continue;
-      }
-
-      names.push(name);
-    }
-
-    if (names.length === 0) {
-      return;
-    }
-
-    const exampleData = await Promise.all(
-      names.map((name) => this.parseExample(dir, name))
-    );
-
-    const examples = exampleData.map((data) => ({
-      link: data.filename,
-      title: data.title,
-      shortdesc: data.shortdesc,
-      tags: data.tags,
-    }));
-
-    examples.sort((a, b) =>
-      a.title.localeCompare(b.title, 'en', {sensitivity: 'base'})
-    );
-    const tagIndex = createTagIndex(examples);
-    const info = {
-      examples: examples,
-      // Tags for main page... TODO: implement index tag links
-      // tagIndex: sortObjectByKey(tagIndex),
-      wordIndex: sortObjectByKey(createWordIndex(examples)),
-    };
-    exampleData.forEach((data) => {
-      data.tags = data.tags.map((tag) => {
-        const tagExamples = tagIndex[tag.toLowerCase()];
-        return {
-          tag: tag,
-          examples: tagExamples.map((exampleIdx) => {
-            const example = examples[exampleIdx];
-            return {
-              link: example.link,
-              title: example.title,
-              isCurrent: data.filename === example.link,
-            };
-          }),
-        };
-      });
-    });
-
-    const pkg = await getPackageInfo();
-    await Promise.all(
-      exampleData.map(async (data) => {
-        const newAssets = await this.render(data, pkg);
-        for (const file in newAssets) {
-          assets[file] = new RawSource(newAssets[file]);
-        }
-      })
-    );
-
-    const indexSource = `const info = ${JSON.stringify(info)};`;
-    assets['examples-info.js'] = new RawSource(indexSource);
-  }
-
-  async parseExample(dir, name) {
-    const htmlName = `${name}.html`;
-    const htmlPath = path.join(dir, htmlName);
-    const htmlSource = await fse.readFile(htmlPath, {encoding: 'utf8'});
-    const {attributes: data, body} = frontMatter(
-      this.ensureNewLineAtEnd(htmlSource)
-    );
-    assert(!!data.layout, `missing layout in ${htmlPath}`);
-    return Object.assign(data, {
-      contents: body,
-      filename: htmlName,
-      dir: dir,
-      name: name,
-      // process tags
-      tags: data.tags ? data.tags.replace(/[\s"]+/g, '').split(',') : [],
-    });
-  }
-
-  /**
-   * @param {string} source A string
-   * @return {string} Same string without a newline character at end
-   */
-  ensureNewLineAtEnd(source) {
-    if (source[source.length - 1] !== '\n') {
-      source += '\n';
-    }
-    return source;
-  }
-
-  /**
-   * @param {string} source Source code
-   * @return {string} Transformed source
-   */
-  transformJsSource(source) {
-    return (
-      source
-        // remove "../src/" prefix to have the same import syntax as the documentation
-        .replace(/'\.\.\/src\//g, "'")
-    );
-  }
-
-  /**
-   * @param {string} source Source file
-   * @param {Array<{key: string, value: string}>|undefined} cloak Replacement rules
-   * @return {string} The source with all keys replaced by value
-   */
-  cloakSource(source, cloak) {
-    if (cloak) {
-      for (const entry of cloak) {
-        source = source.replaceAll(entry.key, entry.value);
-      }
-    }
-    return source;
-  }
-
-  async render(data, pkg) {
-    const assets = {};
-    const readOptions = {encoding: 'utf8'};
-
-    // add in script tag
-    const jsName = `${data.name}.js`;
-    const jsPath = path.join(data.dir, jsName);
-    let jsSource = await fse.readFile(jsPath, {encoding: 'utf8'});
-    jsSource = this.transformJsSource(this.cloakSource(jsSource, data.cloak));
-    data.js = {
-      local: [],
-      remote: [],
-      source: jsSource,
-    };
-
-    let jsSources = jsSource;
-    if (data.sources) {
-      data.extraSources = await Promise.all(
-        data.sources.map(async (sourceConfig) => {
-          const fileName = sourceConfig.path;
-          const extraSourcePath = path.join(data.dir, fileName);
-          let source = await fse.readFile(extraSourcePath, readOptions);
-          let ext = fileName.match(/\.(\w+)$/)[1];
-          if (ext === 'mjs') {
-            ext = 'js';
-          }
-          if (ext === 'js') {
-            source = this.transformJsSource(source);
-            jsSources += '\n' + source;
-          }
-          source = this.cloakSource(source, data.cloak);
-          assets[fileName] = source;
-          return {
-            name: sourceConfig.as || fileName,
-            source: source,
-            type: ext,
-          };
-        })
-      );
-    }
-
-    data.olVersion = pkg.version;
-    data.pkgJson = JSON.stringify(
-      {
-        name: data.name,
-        dependencies: getDependencies(jsSources, pkg),
-        devDependencies: {
-          vite: '^3.2.3',
-        },
-        scripts: {
-          start: 'vite',
-          build: 'vite build',
-        },
-      },
-      null,
-      2
-    );
-
-    data.css = {
-      local: [],
-      remote: [],
-      source: undefined,
-    };
-
-    // add additional resources
-    if (data.resources) {
-      data.resources.forEach((resource) => {
-        const absoluteUrl = /^https?:\/\//.test(resource)
-          ? resource
-          : `https://m-mohr.github.io/ol-stac/en/v${pkg.version}/examples/${resource}`;
-        if (isJsRegEx.test(resource)) {
-          if (!isTemplateJs.test(resource)) {
-            data.js.local.push(resource);
-          }
-          data.js.remote.push(absoluteUrl);
-        } else if (isCssRegEx.test(resource)) {
-          if (!isTemplateCss.test(resource)) {
-            data.css.local.push(resource);
-          }
-          data.css.remote.push(absoluteUrl);
-        } else {
-          throw new Error(
-            `Invalid resource: '${resource}' is not .js or .css: ${data.filename}`
-          );
-        }
-      });
-    }
-
-    data.js.local.push(`${this.common}.js`, jsName);
-
-    // check for example css
-    const cssName = `${data.name}.css`;
-    const cssPath = path.join(data.dir, cssName);
-    try {
-      assets[cssName] = await fse.readFile(cssPath, readOptions);
-      data.css.local.push(cssName);
-      data.css.source = this.ensureNewLineAtEnd(assets[cssName]);
-    } catch (err) {
-      // pass, no css for this example
-    }
-
-    const templatePath = path.join(this.templates, data.layout);
-    const templateSource = await fse.readFile(templatePath, readOptions);
-
-    assets[data.filename] = handlebars.compile(templateSource)(data);
-    return assets;
-  }
-}

package/site/build.js

@@ -1,26 +0,0 @@
-import Metalsmith from 'metalsmith';
-import inPlace from '@metalsmith/in-place';
-import layouts from '@metalsmith/layouts';
-import markdown from '@metalsmith/markdown';
-import {dirname} from 'node:path';
-import {env} from 'node:process';
-import {fileURLToPath} from 'node:url';
-
-const baseDir = dirname(fileURLToPath(import.meta.url));
-
-const builder = Metalsmith(baseDir)
-  .source('./src')
-  .destination('./build')
-  .clean(true)
-  .metadata({
-    version: env.OL_VERSION || 'dev',
-  })
-  .use(inPlace({transform: 'handlebars'}))
-  .use(markdown())
-  .use(layouts());
-
-builder.build(async (err) => {
-  if (err) {
-    throw err;
-  }
-});

package/site/layouts/default.hbs

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-    <title>OL STAC - {{ title }}</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/ol/ol.css">
-    <link rel="stylesheet" type="text/css" href="/ol-stac/theme/site.css">
-{{#each head}}
-    {{{ this }}}
-{{/each}}
-  </head>
-  <body>
-    <header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
-      <a class="navbar-brand" href="/">OL STAC</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-
-      <!-- menu items that get hidden below 768px width -->
-      <nav class="collapse navbar-collapse" id="olmenu">
-        <ul class="nav navbar-nav ms-auto">
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
-            <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
-              <a class="dropdown-item" href="/ol-stac/doc/">Docs</a>
-              <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="/ol-stac/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
-                <a class="dropdown-item" href="/ol-stac/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
-                <a class="dropdown-item" href="/ol-stac/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
-            </div>
-          </li>
-          <li class="nav-item"><a class="nav-link" href="/ol-stac/en/latest/examples/">Examples</a></li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <i class="fa fa-sitemap me-1"></i>API
-            </a>
-            <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
-              <a class="dropdown-item" href="/ol-stac/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>{{ version }} (latest)</a>
-            </div>
-          </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
-            <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
-              <a class="dropdown-item" href="https://github.com/m-mohr/ol-stac"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
-              <a class="dropdown-item" href="/ol-stac/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
-            </div>
-          </li>
-        </ul>
-      </nav>
-    </header>
-
-{{#if uncontained}}
-    {{{ contents }}}
-{{else}}
-    <div class="container">
-      {{{ contents }}}
-    </div>
-{{/if}}
-    <footer>
-      Code licensed under the <a href='https://www.tldrlegal.com/license/apache-license-2-0-apache-2-0'>Apache 2.0</a>.
-      All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
-    </footer>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
-{{#each scripts}}
-    {{{this}}}
-{{/each}}
-  </body>
-</html>

package/site/src/doc/faq.md

@@ -1,8 +0,0 @@
----
-title: Frequently Asked Questions (FAQ)
-layout: default.hbs
----
-
-# Frequently Asked Questions (FAQ)
-
-tbd

package/site/src/doc/index.md

@@ -1,22 +0,0 @@
----
-title: Documentation
-layout: default.hbs
----
-
-# Documentation
-
-If you're eager to get your first OpenLayers map on a page, dive into the [quick start](./quickstart.html).
-
-For a more in-depth overview of OpenLayers core concepts, check out the [tutorials](./tutorials/).
-
-Make sure to also check out the [OpenLayers workshop](/workshop/).
-
-Find additional reference material in the [API docs](/en/latest/apidoc/) and [examples](/en/latest/examples/).
-
-# Frequently Asked Questions (FAQ)
-
-We have put together a document that lists [Frequently Asked Questions (FAQ)](./faq.html) and our answers. Common problems that may arise when using OpenLayers are explained there, and chances are you'll find an appropriate solution in this document.
-
-# More questions?
-
-If you cannot find an answer in the documentation or the FAQ, you can search [Stack Overflow](https://stackoverflow.com/questions/tagged/openlayers). If you cannot find an answer there, ask a new question there, using the tag 'openlayers'.

package/site/src/doc/quickstart.md

@@ -1,121 +0,0 @@
----
-title: Quick Start
-layout: default.hbs
----
-
-# Quick Start
-
-This primer shows you how to put a map on a web page.  The development setup uses [Node](https://nodejs.org/) (14 or higher) and requires that you have [`git`](https://github.com/git-guides/install-git) installed.
-
-## Set up a new project
-
-The easiest way to start building a project with OpenLayers is to run `npm create ol-app`:
-
-```bash
-npm create ol-app my-app
-cd my-app
-npm start
-```
-
-The first command will create a directory called `my-app` (you can use a different name if you wish), install OpenLayers and a development server, and set up a basic app with `index.html`, `main.js`, and `style.css` files.
-
-The second command (`cd my-app`) changes the working directory to your new `my-app` project so you can start working with it.
-
-The third command (`npm start`) starts a development server so you can view your application in a browser while working on it.  After running `npm start`, you'll see output that tells you the URL to open.  Open http://localhost:5173/ (or whatever URL is displayed) to see your new application.
-
-## Exploring the parts
-
-An OpenLayers application is composed of three basic parts:
-
- * The HTML markup with an element to contain the map (`index.html`)
- * The JavaScript that initializes the map (`main.js`)
- * The CSS styles that determine the map size and any other customizations (`style.css`)
-
-### The markup
-
-Open the `index.html` file in a text editor.  It should look something like this:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Quick Start</title>
-  </head>
-  <body>
-    <div id="map"></div>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>
-```
-
-The two important parts in the markup are the `<div>` element to contain the map and the `<script>` tag to pull in the JavaScript.  The map container or target should be a block level element (like a `<div>`) and it must appear in the document before the `<script>` tag that initializes the map.
-
-## The script
-
-Open the `main.js` file in a text editor.  It should look something like this:
-
-```js
-import './style.css';
-import Map from 'ol/Map.js';
-import OSM from 'ol/source/OSM.js';
-import TileLayer from 'ol/layer/Tile.js';
-import View from 'ol/View.js';
-
-const map = new Map({
-  target: 'map',
-  layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
-  ],
-  view: new View({
-    center: [0, 0],
-    zoom: 2,
-  }),
-});
-```
-
-OpenLayers is packaged as a collection of [ES modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/).  The `import` lines are used to pull in the modules that your application needs.  Take a look through the [examples](/en/latest/examples/) and [API docs](/en/latest/apidoc/) to understand which modules you might want to use.
-
-The `import './style.css';` line might be a bit unexpected.  In this example, we're using [Vite](https://vitejs.dev/) as a development server.  Vite allows CSS to be imported from JavaScript modules.  If you were using a different development server, you might include the `style.css` in a `<link>` tag in the `index.html` instead.
-
-The `main.js` module serves as an entry point for your application.  It initializes a new map, giving it a single layer with an OSM source and a view describing the center and zoom level.  Read through the [Basic Concepts tutorial](./tutorials/concepts.html) to learn more about `Map`, `View`, `Layer`, and `Source` components.
-
-## The style
-
-Open the `style.css` file in a text editor.  It should look something like this:
-
-```css
-@import "node_modules/ol/ol.css";
-
-html,
-body {
-  margin: 0;
-  height: 100%;
-}
-
-#map {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-}
-```
-
-The first line imports the `ol.css` file that comes with the `ol` package (OpenLayers is published as the [`ol` package](https://www.npmjs.com/package/ol) in the npm registry).  The `ol` package was installed in the `npm create ol-app` step above.  If you were starting with an existing application instead of using `npm create ol-app`, you would install the package with `npm install ol`.  The `ol.css` stylesheet includes styles for the elements that OpenLayers creates – things like buttons for zooming in and out.
-
-The remaining rules in the `style.css` file make it so the `<div id="map">` element that contains the map fills the entire page.
-
-## Deploying your app
-
-You can make edits to the `index.html`, `main.js`, or `style.css` files and see the resulting change in your browser while running the development server (with `npm start`).  After you have finished making edits, it is time to bundle or build your application so that it can be deployed as a static website (without needing to run a development server like Vite).
-
-To build your application, run the following:
-
-```bash
-npm run build
-```
-
-This will create a `dist` directory with a new `index.html` and assets that make up your application.  These `dist` files can be deployed with your production website.

package/site/src/doc/tutorials/index.md

@@ -1,8 +0,0 @@
----
-title: Tutorials
-layout: default.hbs
----
-
-# Tutorials
-
-* tbd