docs: update usage examples

README.md

@@ -62,14 +62,25 @@ pnpm install @hotosm/ui
 ### HTML / HTMX
 
 ```html
-<!-- <script src="https://cdn.hotosm.org/ui/latest/core.js"> -->
-<script src="https://cdn.hotosm.org/ui/v1/core.js">
+// Import the components
+<script
+  type="module"
+  src="https://s3.amazonaws.com/hotosm-ui/latest/ui.js"
+>
+
+// Import the styles (or create your own)
+<link
+    rel="stylesheet"
+    href="https://s3.amazonaws.com/hotosm-ui/latest/style.css"
+/>
 
 <div>
-  <hot-button disabled="false"> </hot-button>
+  <hot-button disabled="true"> </hot-button>
 </div>
 ```
 
+See the docs for more [usage examples](https://hotosm.github.io/ui/usage/).
+
 > core.js will contain the minimal low level components.
 >
 > extra.js will contain additional wrapper components.
@@ -93,7 +104,7 @@ const HomePage = ({}) => {
       <div
         ...
       >
-        <hot-button disabled="false">
+        <hot-button disabled="true">
         </hot-button>
       </div>
     </div>

docs/usage.md

@@ -1,21 +1,62 @@
 # Usage
 
-## Code
+It production either the HOT S3-based CDN can be used, or JSDelivr.
 
-```js
-<script src="https://hotosm.github.io/ui/dist/core.js">
+## AWS S3 CDN
 
-<div>
-  <hot-button intent="primary"> </hot-button>
-</div>
+```html
+// Import the components
+<script
+  type="module"
+  src="https://s3.amazonaws.com/hotosm-ui/latest/ui.js"
+>
+
+// Import the styles (or create your own)
+<link
+    rel="stylesheet"
+    href="https://s3.amazonaws.com/hotosm-ui/latest/style.css"
+/>
+
+<hot-button>Click Me!</hot-button>
+```
+
+## JSDelivr (NPM CDN)
+
+```html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/gh/hotosm/ui@latest/dist/ui.js"
+></script>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/hotosm/ui@latest/dist/style.css"
+/>
+
+<hot-button>Click Me!</hot-button>
+```
+
+## Github Pages
+
+This deployment is mostly use for development and tracks the most recent
+changes.
+
+```html
+<script
+  type="module"
+  src="https://hotosm.github.io/ui/dist/ui.js"
+>
+<link
+    rel="stylesheet"
+    href="https://hotosm.github.io/ui/dist/style.css"
+/>
+
+<hot-button>Click Me!</hot-button>
 ```
 
-## Visual Representation
+## Example
 
 <!-- markdownlint-disable -->
 
-<div>
-  <hot-button intent="primary">Click Me!</hot-button> 
-</div>
+<hot-button>Click Me!</hot-button>
 
 <!-- markdownlint-enable -->

mkdocs.yml

@@ -27,10 +27,11 @@ theme:
   # custom_dir: docs/overrides
 
 extra_javascript:
-  - https://hotosm.github.io/ui/dist/core.js
+  - https://s3.amazonaws.com/hotosm-ui/latest/ui.js
 
 extra_css:
   - css/extra.css
+  - https://cdn.jsdelivr.net/gh/hotosm/ui@latest/dist/style.css
 
 markdown_extensions:
   - tables