Add github pages

.github/workflows/publish-demo.yml

@@ -0,0 +1,31 @@
+name: Publish thd demo to Github Pages
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get the latest code 🚚
+        uses: actions/checkout@v3
+
+      - name: Setup node Env 🧩
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install Packages 🚢
+        run: yarn
+
+      - name: Build the package 📦
+        run: yarn build:demo
+
+      - name: Publish to Github Pages 🚀
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./demo/dist

README.md

@@ -71,3 +71,7 @@ To see all of the options available, please see the [types file](@types/index.ts
 - `pauseAtEndOfWord()` - A function used to pause once the typewriter has finished typing out the word
 - `play()` - Function to continue the typewriter from where it was paused
 - `safeUpdateStrings()` - Used to update the strings array safely once the typewriter has deleted the current string.
+
+### Known Issues
+
+1 known issue is that the reactive strings array can be changed without warning. This can sometimes cause the current word to change when the typewriter is in the middle of typing a word. I've handled any errors where the strings array is too short or the current word is too short by resetting the typewriter to the start of the word. To avoid this issue, I recommend using the `safeUpdateStrings()` function to update the strings array. I'm hoping to find a lean way of using the `safeUpdateStrings()` as the default update function in the future.

demo/src/App.vue

@@ -45,9 +45,13 @@ const {
 </script>
 
 <template>
-<div class="demo">
-  <h2>
-    {{ text || `&nbsp` }}
+<div class="demo"> 
+  <h1>Typer Composable Demo</h1>
+
+  <h2 :aria-label="currentString">
+    <span aria-hidden="true">
+      {{ text || `&nbsp` }}
+    </span>
   </h2>
 
   <details @submit.prevent class="controls">
@@ -123,6 +127,10 @@ const {
 </template>
 
 <style lang="scss">
+h2 {
+  font-size: 4em;
+}
+
 details {
   margin-bottom: 1em;
 }

package.json

@@ -31,6 +31,7 @@
   ],
   "scripts": {
     "build": "rollup -c",
+    "build:demo": "vite build",
     "dev": "vite"
   },
   "devDependencies": {

rollup.config.js

@@ -39,4 +39,4 @@ export default [
     },
     plugins: [dts()],
   },
-]
+]

vite.config.ts

@@ -2,6 +2,6 @@ import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  root: 'demo/',
+  root: '/demo/',
   plugins: [vue()],
 })