Create demo site

.github/workflows/pages-build.yml

@@ -0,0 +1,63 @@
+name: Deploy Pages
+
+on:
+  push:
+    branches:
+      - master
+    paths-ignore:
+      - README.md
+      - .vscode
+      - .editorconfig
+      - .gitignore
+
+permissions:
+  pages: write # Allow workflow to create github-pages
+  id-token: write # Allow actions/deploy-pages to request permission
+
+concurrency:
+  group: github-pages
+  cancel-in-progress: true
+
+jobs:
+  deploy-pages:
+    name: Deploy Pages
+    runs-on: ubuntu-latest
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          registry-url: https://registry.npmjs.org
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run linter
+        run: yarn lint
+
+      - name: Run tests
+        run: yarn test
+
+      - name: Build
+        run: yarn demoBuild
+
+      - name: Set up github-pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifacts
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './demo/dist'
+
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4

demo/@types/shims-raw.d.ts

@@ -0,0 +1,4 @@
+declare module '*?raw' {
+    const file: string
+    export default file
+}

demo/@types/shims-svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const filePath: string
+    export default filePath
+}

demo/@types/shims-vue.d.ts

@@ -0,0 +1,6 @@
+// Needed to avoid @typescript-eslint/no-unsafe-assignment
+declare module '*.vue' {
+    import { ComponentOptions } from 'vue'
+    const component: ComponentOptions
+    export default component
+}

demo/@types/shims-worker.d.ts

@@ -0,0 +1,9 @@
+declare module '*?worker' {
+    declare class CustomWorker extends Worker {
+        constructor() {
+            //
+        }
+    }
+
+    export default CustomWorker
+}

demo/components/App.vue

@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import { defineAsyncComponent, ref } from 'vue'
+import { useAppEvent } from './useAppEvent.js'
+import { getDefaultText } from './getDefaultText.js'
+import githubIconPath from '../img/github.svg'
+import npmIconPath from '../img/npm.svg'
+import { compressToBase64 } from 'lz-string'
+import { useQuasar } from 'quasar'
+import LoadingSpinner from './LoadingSpinner.vue'
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const CodeEditor = defineAsyncComponent({
+    loader: () => import('./CodeEditor.vue'),
+    loadingComponent: LoadingSpinner,
+})
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const CodePreview = defineAsyncComponent({
+    loader: () => import('./CodePreview.vue'),
+    loadingComponent: LoadingSpinner,
+})
+
+const appEvent = useAppEvent()
+const resetText = () => {
+    appEvent.emit('resetEditor')
+    window.location.hash = ''
+}
+
+const $q = useQuasar()
+const editorText = ref(getDefaultText())
+const copyPermalink = () => {
+    const encodedText = compressToBase64(editorText.value)
+    window.location.hash = encodedText
+
+    if ('clipboard' in navigator) {
+        void navigator.clipboard.writeText(window.location.href)
+
+        $q.notify({
+            message: 'Copied to Clipboard',
+            type: 'positive',
+            position: 'bottom',
+        })
+    }
+}
+</script>
+
+<template>
+    <div class="app">
+        <header>
+            <h1>
+                bbcode-compiler
+            </h1>
+
+            <q-btn
+                label="Reset"
+                icon="restart_alt"
+                outline
+                no-caps
+                @click="resetText"
+            />
+
+            <q-btn
+                label="Copy Permalink"
+                icon="content_copy"
+                outline
+                no-caps
+                @click="copyPermalink"
+            />
+
+            <div class="space" />
+
+            <q-btn
+                round
+                flat
+                href="https://www.npmjs.com/package/bbcode-compiler"
+                title="Download on NPM"
+            >
+                <img
+                    class="icon"
+                    alt="NPM"
+                    :src="npmIconPath"
+                >
+            </q-btn>
+
+            <q-btn
+                round
+                flat
+                href="https://github.com/Trinovantes/bbcode-compiler"
+                title="Source Code on GitHub"
+            >
+                <img
+                    class="icon"
+                    alt="GitHub"
+                    :src="githubIconPath"
+                >
+            </q-btn>
+        </header>
+
+        <main>
+            <CodeEditor
+                class="code-editor"
+                v-model="editorText"
+            />
+            <CodePreview
+                v-model="editorText"
+            />
+        </main>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.app{
+    display: grid;
+    grid-template-rows: auto 1fr;
+    height: 100dvh;
+
+    header{
+        border-bottom: 1px solid $border-color;
+        grid-column: 1/-1;
+        display: flex;
+        gap: calc($padding / 2);
+        padding: $padding;
+
+        h1{
+            align-items: center;
+            display: flex;
+            font-size: 2rem;
+            line-height: 1rem;
+            margin-right: calc($padding / 2);
+        }
+
+        .space{
+            flex: 1;
+        }
+
+        .icon{
+            display: block;
+            object-fit: contain;
+            width: 32px;
+            height: 32px;
+        }
+    }
+
+    main{
+        container-type: size;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        height: 100%;
+    }
+}
+</style>

demo/components/CodeEditor.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import * as monaco from 'monaco-editor'
+import { initMonaco } from './initMonaco.js'
+import { getDefaultText } from './getDefaultText.js'
+import { useAppEvent } from './useAppEvent.js'
+import debounce from 'lodash.debounce'
+
+let editor: monaco.editor.IStandaloneCodeEditor | null = null
+const editorText = defineModel<string>({ required: true })
+const onEditorTextChange = debounce(() => {
+    editorText.value = editor?.getValue() ?? ''
+}, 1000)
+
+const appEvent = useAppEvent()
+appEvent.on('resetEditor', () => {
+    editor?.setValue(getDefaultText(false))
+})
+
+const codeEditorRef = ref<HTMLDivElement | null>(null)
+onMounted(() => {
+    if (!codeEditorRef.value) {
+        throw new Error('Failed to resolve codeEditorRef')
+    }
+
+    initMonaco()
+
+    editor = monaco.editor.create(codeEditorRef.value, {
+        value: editorText.value,
+        language: 'restructuredtext',
+        theme: 'vs-light',
+        scrollBeyondLastLine: false,
+        minimap: {
+            enabled: false,
+        },
+    })
+
+    editor.onDidChangeModelContent(onEditorTextChange)
+})
+</script>
+
+<template>
+    <div
+        class="code-editor"
+        ref="codeEditorRef"
+    />
+</template>
+
+<style lang="scss" scoped>
+.code-editor{
+    border-right: 1px solid $border-color;
+}
+</style>