@crombolo/backoffice-host 0.0.0-stage → 0.9.1

package/plugin/seo/document-view.js

@@ -0,0 +1,161 @@
+/**
+ * The "Search & sharing" view on a page whose type includes those fields: how
+ * the page will look in search results, and where each value comes from.
+ *
+ * The values come from the server, which works them out with the same code the
+ * page's head uses, so the preview cannot disagree with what is served. It
+ * reads the last saved version, so an editor sees a change once it is saved.
+ */
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'
+import { css, html, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property'
+import { readPreview } from './client.js'
+
+const SOURCES = {
+  page: 'From this page',
+  template: 'From the page design',
+  site: 'Site setting',
+  name: 'Page name',
+  none: 'Not set',
+}
+
+export default class CromboloSeoDocumentViewElement extends UmbLitElement {
+  static properties = {
+    _preview: { state: true },
+    _error: { state: true },
+  }
+
+  #unique = undefined
+  #culture = null
+
+  constructor() {
+    super()
+    this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
+      if (!context) return
+      this.observe(context.unique, (unique) => {
+        this.#unique = unique
+        this.#load()
+      })
+    })
+    this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (dataset) => {
+      this.#culture = dataset?.getVariantId?.()?.culture ?? null
+      this.#load()
+    })
+  }
+
+  async #load() {
+    if (!this.#unique) return
+    try {
+      this._preview = await readPreview(this.#unique, this.#culture)
+      this._error = undefined
+    } catch (error) {
+      this._error = error.message
+    }
+  }
+
+  #row(label, item, render = (value) => value) {
+    return html`
+      <tr>
+        <th>${label}</th>
+        <td>${item.value ? render(item.value) : html`<em>Nothing yet</em>`}</td>
+        <td><uui-tag look="secondary">${SOURCES[item.source] ?? item.source}</uui-tag></td>
+      </tr>
+    `
+  }
+
+  render() {
+    if (this._error) return html`<uui-box><p>${this._error}</p></uui-box>`
+    const preview = this._preview
+    if (!preview) return html`<uui-loader></uui-loader>`
+    const { meta, snippet } = preview
+    return html`
+      <uui-box headline="In search results">
+        <div class="snippet">
+          <div class="url">${snippet.url || 'This page has no address yet'}</div>
+          <div class="title">${snippet.title}</div>
+          <div class="description">
+            ${snippet.description || html`<em>Search engines will pick some text from the page.</em>`}
+          </div>
+        </div>
+        ${
+          meta.noindex.value
+            ? html`<p class="warning">
+                ${
+                  meta.noindex.source === 'site'
+                    ? 'The whole site is hidden from search engines in Settings.'
+                    : 'This page asks search engines to leave it out of their results.'
+                }
+              </p>`
+            : nothing
+        }
+        <p class="note">
+          Shows the last saved version${preview.published ? '' : ', which is not published yet'}.
+        </p>
+      </uui-box>
+      <uui-box headline="Where each value comes from">
+        <table>
+          ${this.#row('Title', meta.title)}
+          ${this.#row('Description', meta.description)}
+          ${this.#row('Sharing image', meta.image, (src) => html`<img src=${src} alt="" />`)}
+          ${this.#row('Preferred address', meta.canonical)}
+        </table>
+      </uui-box>
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--uui-size-layout-1);
+    }
+    uui-box + uui-box {
+      margin-top: var(--uui-size-layout-1);
+    }
+    .snippet {
+      max-width: 600px;
+      font-family: arial, sans-serif;
+    }
+    .snippet .url {
+      color: var(--uui-color-text-alt);
+      font-size: 14px;
+      overflow-wrap: anywhere;
+    }
+    .snippet .title {
+      color: #1a0dab;
+      font-size: 20px;
+      margin: 4px 0;
+    }
+    .snippet .description {
+      color: var(--uui-color-text);
+      font-size: 14px;
+    }
+    .warning {
+      color: var(--uui-color-danger);
+    }
+    .note {
+      color: var(--uui-color-text-alt);
+      font-size: 12px;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    th,
+    td {
+      text-align: left;
+      padding: var(--uui-size-space-3);
+      border-bottom: 1px solid var(--uui-color-divider);
+      vertical-align: top;
+    }
+    th {
+      width: 12em;
+    }
+    img {
+      max-width: 240px;
+      max-height: 140px;
+    }
+  `
+}
+
+customElements.define('crombolo-seo-document-view', CromboloSeoDocumentViewElement)

package/plugin/seo/type-hint.js

@@ -0,0 +1,45 @@
+/**
+ * A note in the document-type workspace footer for the "Search & sharing" type:
+ * its own fields come with the CMS and stay, but a site may add fields beside
+ * them. The server refuses removing or changing them; this says so up front.
+ */
+import { UMB_DOCUMENT_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document-type'
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'
+import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+
+const SEO_FIELDS_KEY = '5e0f1c2a-7b3d-4c8e-9a61-0d2b4f6e8a13'
+
+export default class CromboloSeoFieldsHintElement extends UmbElementMixin(LitElement) {
+  static properties = { _unique: { state: true } }
+
+  constructor() {
+    super()
+    this._unique = undefined
+    this.consumeContext(UMB_DOCUMENT_TYPE_WORKSPACE_CONTEXT, (context) => {
+      if (!context) return
+      this.observe(context.unique, (value) => {
+        this._unique = value
+      })
+    })
+  }
+
+  render() {
+    if (this._unique?.toLowerCase() !== SEO_FIELDS_KEY) return nothing
+    return html`<uui-tag
+      color="default"
+      look="secondary"
+      title="Pages that include this type get these fields for search results and sharing. The fields it comes with cannot be removed or changed, but you can add your own beside them."
+    >
+      Provided by Crombolo — add your own fields beside these
+    </uui-tag>`
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `
+}
+
+customElements.define('crombolo-seo-fields-hint', CromboloSeoFieldsHintElement)

package/plugin/seo/umbraco-package.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
+  "name": "Crombolo Search & sharing",
+  "id": "Crombolo.Seo",
+  "version": "0.9.1",
+  "allowPublicAccess": false,
+  "extensions": [
+    {
+      "type": "dashboard",
+      "alias": "Crombolo.Dashboard.Seo",
+      "name": "Crombolo Search & Sharing Dashboard",
+      "element": "/crombolo-plugin/seo/dashboard.js",
+      "weight": 10,
+      "meta": {
+        "label": "Search & sharing",
+        "pathname": "search-and-sharing"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Umb.Section.Settings"
+        }
+      ]
+    },
+    {
+      "type": "workspaceView",
+      "alias": "Crombolo.WorkspaceView.Document.Seo",
+      "name": "Crombolo Search & Sharing Preview",
+      "element": "/crombolo-plugin/seo/document-view.js",
+      "weight": 90,
+      "meta": {
+        "label": "Search & sharing",
+        "pathname": "search-and-sharing",
+        "icon": "icon-search"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.WorkspaceAlias",
+          "match": "Umb.Workspace.Document"
+        },
+        {
+          "alias": "Umb.Condition.WorkspaceContentTypeAlias",
+          "match": "seoFields"
+        }
+      ]
+    },
+    {
+      "type": "workspaceFooterApp",
+      "alias": "Crombolo.WorkspaceFooterApp.SeoFieldsHint",
+      "name": "Crombolo Search & Sharing Type Hint",
+      "element": "/crombolo-plugin/seo/type-hint.js",
+      "weight": 900,
+      "conditions": [
+        {
+          "alias": "Umb.Condition.WorkspaceAlias",
+          "match": "Umb.Workspace.DocumentType"
+        }
+      ]
+    }
+  ]
+}

package/plugin/settings-dashboard.js

@@ -0,0 +1,123 @@
+/**
+ * The Settings dashboard, in place of Umbraco's.
+ *
+ * Its manifest declares `overwrites: ['Umb.Dashboard.SettingsWelcome']`, the same
+ * way the Welcome dashboard takes the place of the news one. What it replaces is
+ * marketing for Umbraco's own training and consultancy — accurate for Umbraco and
+ * misleading here, and not the sort of thing to fix by renaming, since the
+ * services it points at are real and are not this project's.
+ *
+ * What it says instead is the thing a person in Settings actually needs to know:
+ * that types are files, and that changing one here writes that file.
+ */
+// UmbLitElement, not plain LitElement: a dashboard is used as a controller host,
+// and a plain element fails with `controllerHost.provideContext is not a function`.
+import { css, html, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+
+/** Whether this site can send e-mail; the server answers with the reason. */
+const emailStatus = async () => {
+  const href = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+  const response = await fetch(`${href.replace(/\/$/, '')}/crombolo/api/email`, {
+    credentials: 'include',
+    headers: { accept: 'application/json' },
+  })
+  if (!response.ok) throw new Error(`email responded ${response.status}`)
+  return response.json()
+}
+
+export default class CromboloSettingsDashboardElement extends UmbLitElement {
+  static properties = {
+    _email: { state: true },
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    // A failure here leaves the section out rather than the dashboard broken:
+    // this is an explanation, not a control.
+    emailStatus().then(
+      (status) => {
+        this._email = status
+      },
+      () => {},
+    )
+  }
+
+  #email() {
+    const status = this._email
+    if (!status) return nothing
+    if (status.available)
+      return html`
+        <uui-box headline="E-mail">
+          <p>E-mail is sent through <strong>${status.provider}</strong>.</p>
+        </uui-box>
+      `
+    return html`
+      <uui-box headline="E-mail">
+        <p>${status.reason}</p>
+        ${
+          status.affects.length > 0
+            ? html`<p>Until one is configured, these are unavailable:</p>
+                <ul>
+                  ${status.affects.map((feature) => html`<li>${feature}</li>`)}
+                </ul>`
+            : nothing
+        }
+      </uui-box>
+    `
+  }
+
+  render() {
+    return html`
+      <uui-box headline="Settings">
+        <p>
+          Content types, data types and languages are <strong>files</strong>, in
+          <code>schema/</code>, written as TOML. The database is a view of them: what you change
+          here is written to the file, and the file is what a deploy and every other node reads.
+        </p>
+        <p>
+          That is why a type can be reviewed in a pull request, and why a schema change carries a
+          version — a change that converts existing content is a major, and the backoffice moves
+          the number for you.
+        </p>
+        <p class="links">
+          <a href="https://github.com/kineco-au/crombolo-cms#schema-as-code" target="_blank" rel="noopener">
+            Schema as code
+          </a>
+          <a href="https://github.com/kineco-au/crombolo-cms#schema-in-shared-storage" target="_blank" rel="noopener">
+            Schema in shared storage
+          </a>
+          <a href="https://github.com/kineco-au/crombolo-cms/issues" target="_blank" rel="noopener">
+            Report an issue
+          </a>
+        </p>
+      </uui-box>
+      ${this.#email()}
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--uui-size-layout-1, 24px);
+    }
+    p {
+      max-width: 60ch;
+      line-height: 1.5;
+    }
+    .links {
+      display: flex;
+      gap: var(--uui-size-space-5, 18px);
+      flex-wrap: wrap;
+    }
+    uui-box + uui-box {
+      margin-top: var(--uui-size-layout-1, 24px);
+    }
+    ul {
+      max-width: 60ch;
+      line-height: 1.5;
+    }
+  `
+}
+
+customElements.define('crombolo-settings-dashboard', CromboloSettingsDashboardElement)