Update website

README.md

@@ -2,9 +2,9 @@
 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/encantar-js)](https://github.com/alemart/encantar-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/encantar-js/dist/encantar.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/encantar-js?logo=github)](https://github.com/alemart/encantar-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
 
-The Augmented Reality engine that will enchant you!
+The Augmented Reality engine for the web that will enchant you!
 
-:magic_wand: **[Demos](https://alemart.github.io/encantar-js/demos/)** | :arrow_down: **[Download](https://alemart.github.io/encantar-js/download)** | :books: **[Learn](https://alemart.github.io/encantar-js/)** | :heart: **[Sponsor](https://github.com/sponsors/alemart)**
+:magic_wand: **[Demos](https://alemart.github.io/encantar-js/demos/)** | :eyes: **[Try it!](https://alemart.github.io/encantar-js/demos/hello-three/poster.html)** | :books: **[Learn](https://alemart.github.io/encantar-js/)** | :heart: **[Sponsor](https://github.com/sponsors/alemart)**
 
 ![Demo](docs/img/mage.gif)
 
@@ -17,7 +17,7 @@ The Augmented Reality engine that will enchant you!
 ## Key points
 
 * **AR everywhere**: it runs on Android, on iOS, and even on Desktop computers! Only a modern web browser is required.
-* **Easy to use**: just load a static HTML page! No need of heavy app downloads, API keys, subscriptions or server-side stuff.
+* **Easy to use**: just load a static HTML page! No need of heavy app downloads, server-side components or subscriptions.
 * **Device-agnostic**: no need of AR-capable devices! encantar.js is AR built from scratch with computer vision!
 * **Fast & powerful**: encantar.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
 * **Open source**: personal, professional and educational uses are allowed.

demos/assets/poster.css

@@ -39,23 +39,27 @@ body {
 
 #back {
     position: fixed;
-    top: 0px;
-    right: 0px;
-    padding: 8px;
-    color: #9999a6;
-    background-color: #33334c;
+    top: 24px;
+    right: 24px;
+    padding: 16px;
+    color: rgb(184, 98, 184);
+    background-color: white;
+    border: 0;
+    border-radius: 24px;
     font-family: sans-serif;
-    font-size: 1em;
+    font-size: 1.25em;
+    font-weight: bold;
     text-decoration: underline;
-    transition: color 0.125s;
+    transition: transform 0.25s;
 }
 
 #back:visited {
-    color: #9999a6;
+    color: rgb(184, 98, 184);
 }
 
 #back:active, #back:hover {
-    color: white;
+    color: rgb(184, 98, 184);
+    transform: scale(1.1);
 }
 
 #prev, #next {

demos/hello-aframe/poster.html

@@ -14,7 +14,7 @@
         <nav>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
-            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+            <a id="back" href="https://alemart.github.io/encantar-js/download" target="_blank" rel="external">Get encantar.js</a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>

demos/hello-babylon/poster.html

@@ -14,7 +14,7 @@
         <nav>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
-            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+            <a id="back" href="https://alemart.github.io/encantar-js/download" target="_blank" rel="external">Get encantar.js</a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>

demos/hello-three/poster.html

@@ -14,7 +14,7 @@
         <nav>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
-            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+            <a id="back" href="https://alemart.github.io/encantar-js/download" target="_blank" rel="external">Get encantar.js</a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>

demos/hello-webgl/poster.html

@@ -14,7 +14,7 @@
         <nav>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
-            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+            <a id="back" href="https://alemart.github.io/encantar-js/download" target="_blank" rel="external">Get encantar.js</a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>

demos/hello-world/poster.html

@@ -14,7 +14,7 @@
         <nav>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
-            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+            <a id="back" href="https://alemart.github.io/encantar-js/download" target="_blank" rel="external">Get encantar.js</a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>

demos/pointer-demo/poster.html

@@ -14,7 +14,7 @@
         <nav>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
-            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+            <a id="back" href="https://alemart.github.io/encantar-js/download" target="_blank" rel="external">Get encantar.js</a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>

docs/getting-started/index.md

@@ -1,37 +0,0 @@
-# Welcome to encantar.js!
-
-[![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/encantar-js)](https://github.com/alemart/encantar-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/encantar-js/dist/encantar.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/encantar-js?logo=github)](https://github.com/alemart/encantar-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
-
-**encantar.js** is the Augmented Reality engine that will enchant you!
-
-[:sparkles: Demos](../demos.md){ .md-button ._blank } [:arrow_down: Download](../download.md){ .md-button ._blank } [:books: Learn](./introduction.md){ .md-button } [:heart:{ .heart } Sponsor](../support-my-work.md){ .md-button }
-
-## Features
-
-* **Image tracking**: track detailed images such as book covers, cartoons and photos. No need of manual training!
-* **Pointer tracking**: create interactive experiences based on touch and mouse input with an easy-to-use API.
-* **Plugins**: use encantar.js with the 3D framework of your choice, including A-Frame, Babylon.js, Three.js and more!
-
-## Key points
-
-* **AR everywhere**: it runs on Android, on iOS, and even on Desktop computers! Only a modern web browser is required.
-* **Easy to use**: just load a static HTML page! No need of heavy app downloads, API keys, subscriptions or server-side stuff.
-* **Device-agnostic**: no need of AR-capable devices! encantar.js is AR built from scratch with computer vision!
-* **Fast & powerful**: encantar.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
-* **Open source**: personal, professional and educational uses are allowed.
-
-## Browser compatibility
-
-encantar.js is compatible with all major web browsers:
-
-| Chrome | Edge | Firefox | Opera | Safari* |
-|:------:|:----:|:-------:|:-----:|:-------:|
-| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
-
-\* use Safari 15.2 or later.
-
-encantar.js requires WebGL2 and WebAssembly, which are widely supported.
-
-## About
-
-encantar.js is developed by [Alexandre Martins](https://github.com/alemart) and released under the [LGPL](../license.md). It is based on [Speedy Vision](https://github.com/alemart/speedy-vision).

docs/index.md

@@ -1,4 +1,39 @@
----
-template: index.html
-title: ""
----
+# Welcome to encantar.js!
+
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/encantar-js)](https://github.com/alemart/encantar-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/encantar-js/dist/encantar.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/encantar-js?logo=github)](https://github.com/alemart/encantar-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
+
+The Augmented Reality engine for the web that will enchant you!
+
+[:sparkles: Demos](./demos.md){ .md-button ._blank }
+[:eyes: Try it!](https://alemart.github.io/encantar-js/demos/hello-three/poster.html){ .md-button ._blank }
+[:books: Learn](./getting-started/introduction.md){ .md-button } [:heart:{ .heart } Sponsor](./support-my-work.md){ .md-button }
+
+## Features
+
+* **Image tracking**: track detailed images such as book covers, cartoons and photos. No need of manual training!
+* **Pointer tracking**: create interactive experiences based on touch and mouse input with an easy-to-use API.
+* **Plugins**: use encantar.js with the 3D framework of your choice, including A-Frame, Babylon.js, Three.js and more!
+
+## Key points
+
+* **AR everywhere**: it runs on Android, on iOS, and even on Desktop computers! Only a modern web browser is required.
+* **Easy to use**: just load a static HTML page! No need of heavy app downloads, server-side components or subscriptions.
+* **Device-agnostic**: no need of AR-capable devices! encantar.js is AR built from scratch with computer vision!
+* **Fast & powerful**: encantar.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
+* **Open source**: personal, professional and educational uses are allowed.
+
+## Browser compatibility
+
+encantar.js is compatible with all major web browsers:
+
+| Chrome | Edge | Firefox | Opera | Safari* |
+|:------:|:----:|:-------:|:-----:|:-------:|
+| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
+
+\* use Safari 15.2 or later.
+
+encantar.js requires WebGL2 and WebAssembly, which are widely supported.
+
+## About
+
+encantar.js is developed by [Alexandre Martins](https://github.com/alemart) and released under the [LGPL](./license.md). It is based on [Speedy Vision](https://github.com/alemart/speedy-vision).

mkdocs.yml

@@ -46,24 +46,27 @@ markdown_extensions:
 dev_addr: 127.0.0.1:8008
 
 nav:
-  - 'Home': 'index.md'
-  - 'Getting started':
-    - 'Welcome': 'getting-started/index.md'
-    - 'WebAR Crash Course':
-      - 'Introduction': 'getting-started/introduction.md'
-      - 'Concepts': 'getting-started/concepts.md'
-      - 'Set up a web server': 'getting-started/set-up-a-web-server.md'
-      - 'Set up the tracker': 'getting-started/set-up-the-tracker.md'
-      - 'Set up the session': 'getting-started/set-up-the-session.md'
-      - 'Activate your webcam': 'getting-started/activate-your-webcam.md'
-      - 'Augment the scene': 'getting-started/augment-the-scene.md'
-      - 'Next steps': 'getting-started/next-steps.md'
-    - 'Guidelines for Images': 'getting-started/guidelines-for-images.md'
-    - 'Questions & Answers': 'faq.md'
+  - 'Home':
+    - 'Welcome!': 'index.md'
+    - 'Download': 'download.md'
+    - 'Demos': 'demos.md'
+    - 'Learn': 'getting-started/introduction.md'
+    - 'API Reference': 'api/ar.md'
     - 'Support my work': 'support-my-work.md'
     - 'License': 'license.md'
   - 'Download': 'download.md'
   - 'Demos': 'demos.md'
+  - 'Learn':
+    - 'Introduction': 'getting-started/introduction.md'
+    - 'Concepts': 'getting-started/concepts.md'
+    - 'Set up a web server': 'getting-started/set-up-a-web-server.md'
+    - 'Set up the tracker': 'getting-started/set-up-the-tracker.md'
+    - 'Set up the session': 'getting-started/set-up-the-session.md'
+    - 'Activate your webcam': 'getting-started/activate-your-webcam.md'
+    - 'Augment the scene': 'getting-started/augment-the-scene.md'
+    - 'Next steps': 'getting-started/next-steps.md'
+    - 'Guidelines for Images': 'getting-started/guidelines-for-images.md'
+    - 'Questions & Answers': 'faq.md'
   - 'API':
     - 'General':
       - 'AR': 'api/ar.md'