docs: add separate examples page

hotosm · May 31, 2024 · 2abd476 · 2abd476
1 parent f5ba72f
commit 2abd476
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 25 deletions.
diff --git a/docs/components/hot-button.md b/docs/components/hot-button.md
@@ -13,20 +13,3 @@
 | Event   |
 |---------|
 | `click` |
-
-## Example
-
-<!-- markdownlint-disable -->
-
-<hot-button id="hotButton">Click Me!</hot-button>
-<script>
-  const button = document.getElementById('hotButton');
-
-  button.addEventListener('click', () => {
-    alert('Button Clicked!');
-  });
-</script>
-
-<br>
-
-<!-- markdownlint-enable -->
diff --git a/docs/components/hot-toolbar.md b/docs/components/hot-toolbar.md
@@ -19,11 +19,3 @@
 | `hot-rightalign-click`  |
 | `hot-underline-click`   |
 | `hot-undo-click`        |
-
-## Example
-
-<!-- markdownlint-disable -->
-
-<hot-toolbar></hot-toolbar>
-
-<!-- markdownlint-enable -->
diff --git a/docs/components/hot-tracking.md b/docs/components/hot-tracking.md
@@ -5,6 +5,7 @@
 | Property | Attribute | Type      | Default        | Description                      |
 |----------|-----------|-----------|----------------|----------------------------------|
 | `domain` | `domain`  | `string`  | ""             | The domains to apply tracking.   |
+| `force`  | `force`   | `boolean` | false          | Force display the banner.        |
 | `isOpen` |           | `boolean` | true           |                                  |
 | `name`   | `name`    | `string`  | "hot-tracking" |                                  |
 | `siteId` | `site-id` | `string`  | ""             | The Matomo site id for tracking. |

diff --git a/docs/examples.md b/docs/examples.md
@@ -0,0 +1,28 @@
+# Component Examples
+
+As web components can be rendered in HTML / Markdown, here are some examples.
+
+## Button
+
+<!-- markdownlint-disable -->
+
+<hot-button id="hotButton">Click Me!</hot-button>
+<script>
+  const button = document.getElementById('hotButton');
+
+  button.addEventListener('click', () => {
+    alert('Button Clicked!');
+  });
+</script>
+
+<br>
+
+<!-- markdownlint-enable -->
+
+## Toolbar
+
+<!-- markdownlint-disable -->
+
+<hot-toolbar></hot-toolbar>
+
+<!-- markdownlint-enable -->
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -65,6 +65,7 @@ nav:
       - Header: components/hot-header.md
       - Toolbar: components/hot-toolbar.md
       - Tracking: components/hot-tracking.md
+  - Examples: examples.md
   - Storybook: storybook.md
   - License: LICENSE.md
   - Changelog: CHANGELOG.md