feat: blocks (wip)

.devcontainer/app-init.sh

@@ -16,6 +16,9 @@ cd server
 npm install
 cd ../ux
 npm install
+cd ../blocks
+npm install
+npm run build
 cd ..
 
 echo "Ready!"

.github/workflows/build.yml

@@ -44,6 +44,12 @@ jobs:
         npm ci --audit=false --fund=false
         npm run build
 
+    - name: Build Blocks
+      working-directory: blocks
+      run: |
+        npm ci --audit=false --fund=false
+        npm run build
+
     - name: Login to GitHub Container Registry
       uses: docker/login-action@v2
       with:

blocks/.gitignore

+dist
+node_modules

blocks/block-index/component.js

+import { LitElement, html, css } from 'lit'
+import folderByPath from './folderByPath.graphql'
+
+/**
+ * An example element.
+ *
+ * @fires count-changed - Indicates when the count changes
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class BlockIndexElement extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        border: solid 1px gray;
+        padding: 16px;
+        max-width: 800px;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The name to say "Hello" to.
+       * @type {string}
+       */
+      name: {type: String},
+
+      /**
+       * The number of times the button has been clicked.
+       * @type {number}
+       */
+      count: {type: Number},
+    };
+  }
+
+  constructor() {
+    super();
+    this.name = 'World';
+    this.count = 0;
+  }
+
+  render() {
+    return html`
+      <h1>${this.sayHello(this.name)}!</h1>
+      <button @click=${this._onClick} part="button">
+        Click Count: ${this.count}
+      </button>
+      <slot></slot>
+    `;
+  }
+
+  _onClick() {
+    this.count++;
+    this.dispatchEvent(new CustomEvent('count-changed'));
+  }
+
+  /**
+   * Formats a greeting
+   * @param name {string} The name to say "Hello" to
+   * @returns {string} A greeting directed at `name`
+   */
+  sayHello(name) {
+    return `Hello, ${name}`;
+  }
+}
+
+window.customElements.define('block-index', BlockIndexElement);

blocks/block-index/folderByPath.graphql

+query folderByPath($siteId: UUID!, $locale: String!, $path: String!) {
+  folderByPath(siteId: $siteId, locale: $locale, path: $path) {
+    id
+    title
+  }
+}

blocks/package-lock.json

 {

blocks/package.json

+{
+  "name": "blocks",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "private": true,
+  "author": "Nicolas Giard",
+  "license": "AGPL-3.0",
+  "dependencies": {
+    "lit": "^2.8.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-graphql": "^2.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-terser": "^0.4.3",
+    "glob": "^10.3.4",
+    "rollup": "^2.79.1",
+    "rollup-plugin-summary": "^2.0.0"
+  }
+}

blocks/rollup.config.mjs

+import summary from 'rollup-plugin-summary'
+import terser from '@rollup/plugin-terser'
+import resolve from '@rollup/plugin-node-resolve'
+import graphql from '@rollup/plugin-graphql'
+
+import * as glob from 'glob'
+
+export default {
+  input: Object.fromEntries(
+    glob.sync('@(block-*)/component.js', {
+      ignore: [
+        'dist/**',
+        'node_modules/**'
+      ]
+    }).map(file => {
+      const fileParts = file.split('/')
+      return [
+        fileParts[0],
+        file
+      ]
+    })
+  ),
+  output: {
+    dir: 'dist',
+    format: 'es',
+    globals: {
+      APOLLO_CLIENT: 'APOLLO_CLIENT'
+    }
+  },
+  plugins: [
+    resolve(),
+    graphql(),
+    terser({
+      ecma: 2017,
+      module: true,
+      warnings: true
+    }),
+    summary()
+  ]
+}

dev/build/Dockerfile

@@ -18,6 +18,7 @@ RUN mkdir -p /wiki && \
 WORKDIR /wiki
 
 COPY --chown=node:node ./assets ./assets
+COPY --chown=node:node ./blocks/dist ./blocks/dist
 COPY --chown=node:node ./server ./server
 COPY --chown=node:node ./dev/build/config.yml ./config.yml
 COPY --chown=node:node ./LICENSE ./LICENSE

server/web.mjs

@@ -117,6 +117,15 @@ export async function init () {
   })
 
   // ----------------------------------------
+  // Blocks
+  // ----------------------------------------
+
+  app.use('/_blocks', express.static(path.join(WIKI.ROOTPATH, 'blocks/dist'), {
+    index: false,
+    maxAge: '7d'
+  }))
+
+  // ----------------------------------------
   // SSL Handlers
   // ----------------------------------------
 

ux/package-lock.json

 {

ux/package.json

@@ -13,53 +13,53 @@
     "ncu-u": "ncu -u -x codemirror,codemirror-asciidoc"
   },
   "dependencies": {
-    "@apollo/client": "3.7.16",
-    "@lezer/common": "1.0.3",
+    "@apollo/client": "3.8.2",
+    "@lezer/common": "1.0.4",
     "@mdi/font": "7.2.96",
-    "@quasar/extras": "1.16.4",
-    "@tiptap/core": "2.0.3",
-    "@tiptap/extension-code-block": "2.0.3",
-    "@tiptap/extension-code-block-lowlight": "2.0.3",
-    "@tiptap/extension-color": "2.0.3",
-    "@tiptap/extension-dropcursor": "2.0.3",
-    "@tiptap/extension-font-family": "2.0.3",
-    "@tiptap/extension-gapcursor": "2.0.3",
-    "@tiptap/extension-hard-break": "2.0.3",
-    "@tiptap/extension-highlight": "2.0.3",
-    "@tiptap/extension-history": "2.0.3",
-    "@tiptap/extension-image": "2.0.3",
-    "@tiptap/extension-mention": "2.0.3",
-    "@tiptap/extension-placeholder": "2.0.3",
-    "@tiptap/extension-table": "2.0.3",
-    "@tiptap/extension-table-cell": "2.0.3",
-    "@tiptap/extension-table-header": "2.0.3",
-    "@tiptap/extension-table-row": "2.0.3",
-    "@tiptap/extension-task-item": "2.0.3",
-    "@tiptap/extension-task-list": "2.0.3",
-    "@tiptap/extension-text-align": "2.0.3",
-    "@tiptap/extension-text-style": "2.0.3",
-    "@tiptap/extension-typography": "2.0.3",
-    "@tiptap/pm": "2.0.3",
-    "@tiptap/starter-kit": "2.0.3",
-    "@tiptap/vue-3": "2.0.3",
+    "@quasar/extras": "1.16.6",
+    "@tiptap/core": "2.1.8",
+    "@tiptap/extension-code-block": "2.1.8",
+    "@tiptap/extension-code-block-lowlight": "2.1.8",
+    "@tiptap/extension-color": "2.1.8",
+    "@tiptap/extension-dropcursor": "2.1.8",
+    "@tiptap/extension-font-family": "2.1.8",
+    "@tiptap/extension-gapcursor": "2.1.8",
+    "@tiptap/extension-hard-break": "2.1.8",
+    "@tiptap/extension-highlight": "2.1.8",
+    "@tiptap/extension-history": "2.1.8",
+    "@tiptap/extension-image": "2.1.8",
+    "@tiptap/extension-mention": "2.1.8",
+    "@tiptap/extension-placeholder": "2.1.8",
+    "@tiptap/extension-table": "2.1.8",
+    "@tiptap/extension-table-cell": "2.1.8",
+    "@tiptap/extension-table-header": "2.1.8",
+    "@tiptap/extension-table-row": "2.1.8",
+    "@tiptap/extension-task-item": "2.1.8",
+    "@tiptap/extension-task-list": "2.1.8",
+    "@tiptap/extension-text-align": "2.1.8",
+    "@tiptap/extension-text-style": "2.1.8",
+    "@tiptap/extension-typography": "2.1.8",
+    "@tiptap/pm": "2.1.8",
+    "@tiptap/starter-kit": "2.1.8",
+    "@tiptap/vue-3": "2.1.8",
     "apollo-upload-client": "17.0.0",
     "browser-fs-access": "0.34.1",
     "clipboard": "2.0.11",
     "codemirror": "5.65.11",
     "codemirror-asciidoc": "1.0.4",
     "dependency-graph": "0.11.0",
-    "filesize": "10.0.7",
+    "filesize": "10.0.12",
     "filesize-parser": "1.5.0",
     "fuse.js": "6.6.2",
-    "graphql": "16.6.0",
+    "graphql": "16.8.0",
     "graphql-tag": "2.12.6",
     "highlight.js": "11.8.0",
     "js-cookie": "3.0.5",
     "jwt-decode": "3.1.2",
     "katex": "0.16.8",
     "lodash-es": "4.17.21",
-    "lowlight": "2.9.0",
-    "luxon": "3.3.0",
+    "lowlight": "3.0.0",
+    "luxon": "3.4.2",
     "markdown-it": "13.0.1",
     "markdown-it-abbr": "1.0.4",
     "markdown-it-attrs": "4.1.6",
@@ -70,53 +70,53 @@
     "markdown-it-imsize": "2.0.1",
     "markdown-it-mark": "3.0.1",
     "markdown-it-mdc": "0.1.3",
-    "markdown-it-multimd-table": "4.2.2",
+    "markdown-it-multimd-table": "4.2.3",
     "markdown-it-sub": "1.0.0",
     "markdown-it-sup": "1.0.0",
     "markdown-it-task-lists": "2.1.1",
-    "mitt": "3.0.0",
-    "monaco-editor": "0.39.0",
+    "mitt": "3.0.1",
+    "monaco-editor": "0.41.0",
     "pako": "2.1.0",
-    "pinia": "2.1.4",
+    "pinia": "2.1.6",
     "prosemirror-commands": "1.5.2",
     "prosemirror-history": "1.3.2",
     "prosemirror-keymap": "1.2.2",
-    "prosemirror-model": "1.19.2",
+    "prosemirror-model": "1.19.3",
     "prosemirror-schema-list": "1.3.0",
     "prosemirror-state": "1.4.3",
-    "prosemirror-transform": "1.7.3",
-    "prosemirror-view": "1.31.5",
+    "prosemirror-transform": "1.7.5",
+    "prosemirror-view": "1.31.7",
     "pug": "3.0.2",
-    "quasar": "2.12.1",
+    "quasar": "2.12.6",
     "slugify": "1.6.6",
-    "socket.io-client": "4.7.1",
+    "socket.io-client": "4.7.2",
     "sortablejs-vue3": "1.2.9",
-    "tabulator-tables": "5.5.0",
+    "tabulator-tables": "5.5.2",
     "tippy.js": "6.3.7",
     "twemoji": "14.0.2",
     "uuid": "9.0.0",
-    "v-network-graph": "0.9.4",
+    "v-network-graph": "0.9.7",
     "vue": "3.3.4",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.2.2",
+    "vue-router": "4.2.4",
     "vue3-otp-input": "0.4.1",
     "vuedraggable": "4.1.0",
     "xterm": "5.2.1",
     "zxcvbn": "4.4.2"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "0.11.0",
-    "@quasar/app-vite": "1.4.3",
-    "@types/lodash": "4.14.195",
+    "@intlify/unplugin-vue-i18n": "0.13.0",
+    "@quasar/app-vite": "1.5.0",
+    "@types/lodash": "4.14.197",
     "@volar/vue-language-plugin-pug": "1.6.5",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "10.4.15",
     "browserlist": "latest",
-    "eslint": "8.44.0",
+    "eslint": "8.48.0",
     "eslint-config-standard": "17.1.0",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-n": "16.0.1",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-n": "16.0.2",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-vue": "9.15.1"
+    "eslint-plugin-vue": "9.17.0"
   },
   "engines": {
     "node": ">= 18.0",

ux/quasar.config.js

@@ -126,6 +126,7 @@ module.exports = configure(function (ctx) {
       port: userConfig.dev?.port,
       proxy: {
         '/_graphql': `http://127.0.0.1:${userConfig.port}/_graphql`,
+        '/_blocks': `http://127.0.0.1:${userConfig.port}`,
         '/_site': `http://127.0.0.1:${userConfig.port}`,
         '/_thumb': `http://127.0.0.1:${userConfig.port}`,
         '/_user': `http://127.0.0.1:${userConfig.port}`

ux/src/components/EditorWysiwyg.vue

@@ -106,7 +106,7 @@ import TaskItem from '@tiptap/extension-task-item'
 import TextAlign from '@tiptap/extension-text-align'
 import TextStyle from '@tiptap/extension-text-style'
 import Typography from '@tiptap/extension-typography'
-import { lowlight } from 'lowlight/lib/core'
+import { common, createLowlight } from 'lowlight'
 import { onBeforeUnmount, onMounted, reactive, shallowRef } from 'vue'
 // import * as Y from 'yjs'
 // import { IndexeddbPersistence } from 'y-indexeddb'
@@ -120,6 +120,8 @@ import { useEditorStore } from 'src/stores/editor'
 import { usePageStore } from 'src/stores/page'
 import { useSiteStore } from 'src/stores/site'
 
+const lowlight = createLowlight(common)
+
 // QUASAR
 
 const $q = useQuasar()