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

@@ -0,0 +1,2 @@
+dist
+node_modules

blocks/block-index/component.js

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,6 @@
+query folderByPath($siteId: UUID!, $locale: String!, $path: String!) {
+  folderByPath(siteId: $siteId, locale: $locale, path: $path) {
+    id
+    title
+  }
+}