Use mkdocs for GitHub Pages

systemli · Dec 31, 2023 · 8174a5d · 8174a5d
1 parent 6903315
commit 8174a5d
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 27 deletions.
diff --git a/.github/workflows/mkdocs.yml b/.github/workflows/mkdocs.yml
@@ -0,0 +1,20 @@
+name: Documentation
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  mkdocs:
+    name: Build & Deploy Documentation
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+
+      - name: Deploy Documentation
+        uses: mhausenblas/mkdocs-deploy-gh-pages@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CONFIG_FILE: mkdocs.yml
diff --git a/.github/workflows/publish-page.yml b/.github/workflows/publish-page.yml
diff --git a/pages/index.html → docs/demo.html b/pages/index.html → docs/demo.html
@@ -19,18 +19,14 @@
         padding: 1rem;
       }
 
-      h1, .info, .widget {
+      .widget {
         max-width: 500px;
         margin: 0 auto;
       }
     </style>
   </head>
   <body>
     <div class="content">
-      <h1>Ticker Widget Demo</h1>
-      <div class="info">
-        <p>This is a demo of the <a href="https://github.com/systemli/ticker-widget">ticker-widget</a> component.</p>
-      </div>
       <div class="widget">
         <ticker-timeline domain="updates.systemli.org" limit="10" header="Latest Updates"></ticker-timeline>
       </div>

diff --git a/docs/index.md b/docs/index.md
@@ -0,0 +1,29 @@
+# Ticker Widget
+
+A web component to display the latest updates from a ticker instance.
+
+## Usage
+
+!!! important
+
+    We will provide a self hosted version of this component soon. Until then you can use the unpkg.com CDN to include the component in your website.
+
+You need to include the script from unpkg.com and then you can use the component like this:
+
+```html
+<script type="module" src="https://unpkg.com/@systemli/ticker-widget"></script>
+<ticker-timeline domain="updates.systemli.org" limit="10" header="Latest Updates"></ticker-timeline>
+```
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default                             |
+| -------- | --------- | ----------- | -------- | ----------------------------------- |
+| `apiUrl` | `api-url` |             | `string` | `'https://ticker-api.systemli.org'` |
+| `domain` | `domain`  |             | `string` | `undefined`                         |
+| `header` | `header`  |             | `string` | `''`                                |
+| `limit`  | `limit`   |             | `number` | `10`                                |
+
+## Demo
+
+<iframe src="/demo.html" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="systemli-ticker-widget"></iframe>
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -0,0 +1,16 @@
+---
+site_name: Ticker Widget
+site_author: Systemli
+repo_url: https://github.com/systemli/ticker-widget
+
+nav:
+  - Home: index.md
+
+theme:
+  name: material
+  palette:
+    primary: "blue"
+    accent: "blue"
+
+markdown_extensions:
+  - admonition