ol-stac 0.0.0

package/site/src/doc/quickstart.md

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

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

package/site/src/download/index.hbs

@@ -0,0 +1,62 @@
+---
+title: 'Get the Code'
+layout: default.hbs
+---
+<div class="container mt-4 pt-4">
+  <div class="row">
+    <h3 class="col-sm-12">The <code>ol-stac</code> package</h3>
+    <div class="col-sm-12">
+      <p>
+        The recommended way to use OL STAC is to work with the <a href="https://www.npmjs.com/package/ol"><code>ol-stac</code> package</a>.
+      </p>
+      <p>
+        To add OL STAC to an existing project, install the latest with <code>npm</code>:
+        <pre><code class="language-shell-session">npm install ol-stac</code></pre>
+      </p>
+      <p>
+        If you are starting a new project from scratch, see the <a href="../doc/quickstart.html">quick start docs</a> for more information.
+      </p>
+    </div>
+  </div>
+  <div class="row">
+    <h3 class="col-sm-12">Hosted build for development</h3>
+    <div class="col-sm-12">
+      <p>
+        If you want to try out OpenLayers without downloading anything (<b>not recommended for production</b>), include the following in the head of your html page:
+<pre><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/npm/geotiff"&gt;&lt;/script&
+&lt;script src="https://cdn.jsdelivr.net/npm/ol/dist/ol.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css"&gt;
+&lt;script src="https://cdn.jsdelivr.net/npm/ol-stac@{{ version }}/dist/ol-stac.js"&gt;&lt;/script&gt;</code></pre>
+      </p>
+      <p>
+        The full build of the library does not include all dependencies: the <code>geotiff</code> package is omitted.  If you use these, you'll need to add additional script tags.
+      </p>
+    </div>
+  </div>
+  <div class="row">
+    <h3 class="col-sm-12">Downloads for the {{ version }} release</h3>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <table class="table table-hover">
+        <tbody>
+          <tr><th>Archive</th><th>Description</th></tr>
+          <tr>
+            <td><a href="https://github.com/m-mohr/ol-stac/releases/download/{{ version }}/{{ version }}-site.zip">{{ version }}-site.zip</a></td>
+            <td>Includes examples and documentation.</td>
+          </tr>
+          <tr>
+            <td><a href="https://github.com/m-mohr/ol-stac/releases/download/{{ version }}/{{ version }}-package.zip">{{ version }}-package.zip</a></td>
+            <td>Includes sources and the full build of the library.</td>
+          </tr>
+        </tbody>
+      </table>
+      <p>
+        See the <a href="https://github.com/m-mohr/ol-stac/releases/tag/{{ version }}">{{ version }} release page</a> for a changelog and any special upgrade notes.
+      </p>
+      <p>
+        For archives of previous releases, see the <a href="https://github.com/m-mohr/ol-stac/releases/">complete list of releases</a>.
+      </p>
+    </div>
+  </div>
+</div>

package/site/src/index.hbs

@@ -0,0 +1,71 @@
+---
+title: Welcome
+layout: default.hbs
+uncontained: true
+head:
+ - <link rel="stylesheet" type="text/css" href="/ol-stac/theme/index.css">
+---
+<div class='container'>
+  <div class='row' id='news'>
+    <div class='col-sm-12'>
+      <h1 class='topic'><i class='fa fa-rss'></i> Latest</h1>
+      <p><strong>OL STAC <a href="/ol-stac/download/">{{ version }}</a> is here!</strong> Check out the <a href="/ol-stac/doc/">docs</a> and the <a href="/ol-stac/en/latest/examples/">examples</a> to get started. The full distribution can be downloaded from the <a href="/ol-stac/download/">release page</a>.</p>
+    </div>
+  </div>
+  <div class='row'>
+    <h1 class='topic col-sm-12'>Overview</h1>
+  </div>
+  <div class='row'>
+    <div class='col-sm-12'>
+      <p>OL STAC makes it easy to put STAC resources on a dynamic OpenLayers map. It can display geometries, GeoTIFF files, web map layers and more. It is completely free, Open Source JavaScript, released under the Apache 2.0 license.</p>
+    </div>
+  </div>
+  <div class='row'>
+    <h1 class='topic col-sm-12'>Learn More</h1>
+  </div>
+  <div class='row'>
+    <div class='col-sm-6'>
+      <a href='./doc/quickstart.html'>
+        <h3><i class='fa fa-check'></i> Quick Start</h3>
+      </a>
+      <p>Seen enough already? Go here to get started.</p>
+    </div>
+    <div class='col-sm-6'>
+      <a href='/ol-stac/download/'>
+        <h3><i class='fa fa-download'></i> Get the Code</h3>
+      </a>
+      <p>Get the latest release or dig through the archives.</p>
+    </div>
+  </div>
+  <div class='row'>
+    <div class='col-sm-6'>
+      <a href='/ol-stac/doc/tutorials/'>
+        <h3><i class='fa fa-book'></i> Tutorials</h3>
+      </a>
+      <p>Spend time learning the basics and graduate up to advanced mapping techniques.</p>
+    </div>
+  </div>
+  <div class='row'>
+    <div class='col-sm-6'>
+      <a href='/ol-stac/en/latest/apidoc/'>
+        <h3><i class='fa fa-sitemap'></i> API Docs</h3>
+      </a>
+      <p>Browse through the API docs for details on code usage.</p>
+    </div>
+  </div>
+  <div class='row'>
+    <h1 class='topic col-sm-12'>Get Involved</h1>
+  </div>
+  <div class='row'>
+    <div class='col-sm-4'>
+      <a href='https://github.com/m-mohr/ol-stac'>
+        <h3><i class="fa fa-code-fork"></i> Fork the repo</h3>
+      </a>
+    </div>
+    <div class='col-sm-4'>
+      <a href='https://github.com/m-mohr/ol-stac/issues'>
+        <h3><i class="fa fa-bug"></i> Open a ticket</h3>
+      </a>
+    </div>
+  </div>
+</div>

package/site/src/theme/index.css

@@ -0,0 +1,26 @@
+#news {
+  background-color: var(--ol-accent-background-color);
+  border-radius: 4px;
+  padding: 1rem 0 0;
+}
+
+#news h1 {
+  margin: 0;
+}
+
+img.thumb {
+  float: right;
+  margin-left: 10px;
+}
+
+/* ol customizations */
+
+.ol-overlaycontainer-stopevent {
+  opacity: 0;
+  transition: opacity 300ms ease;
+}
+
+/* not done with :hover because the overlay blocks events and has no height */
+.over .ol-overlaycontainer-stopevent {
+  opacity: 1;
+}