@crombolo/backoffice-host 0.0.0-stage → 0.10.0

package/plugin/seo/client.js

@@ -0,0 +1,35 @@
+/**
+ * Reads and saves search and sharing at `<backoffice>/crombolo/api/seo/*`. The
+ * session cookie carries the auth, as it does for the framework's other plugin
+ * endpoints; the base comes from `<base href>` because the backoffice path is
+ * configurable.
+ */
+const base = () => {
+  const href = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+  return `${href.replace(/\/$/, '')}/crombolo/api/seo`
+}
+
+const json = async (path, init) => {
+  const response = await fetch(`${base()}${path}`, {
+    credentials: 'include',
+    headers: {
+      accept: 'application/json',
+      ...(init?.body ? { 'content-type': 'application/json' } : {}),
+    },
+    ...init,
+  })
+  const body = await response.json().catch(() => ({}))
+  if (!response.ok) throw new Error(body.message ?? 'Search and sharing could not be loaded.')
+  return body
+}
+
+export const readSettings = () => json('/settings')
+
+export const saveSettings = (changes) =>
+  json('/settings', { method: 'PUT', body: JSON.stringify(changes) })
+
+export const readPreview = (documentKey, culture) => {
+  const query = new URLSearchParams({ document: documentKey })
+  if (culture) query.set('culture', culture)
+  return json(`/preview?${query}`)
+}

package/plugin/seo/dashboard.js

@@ -0,0 +1,242 @@
+/**
+ * Search & sharing, in Settings: the site-wide values every page falls back
+ * to, the robots file, and the page shown for an address that does not exist.
+ *
+ * Each field starts from the site's configuration. A value saved here overrides
+ * it, and "Use the default" removes the override, so the configuration applies
+ * again; the label beside each field says which is in force.
+ */
+// For their side effects: these register `umb-input-document` and
+// `umb-input-media`, which the shell otherwise loads lazily.
+import '@umbraco-cms/backoffice/document'
+import '@umbraco-cms/backoffice/media'
+import { css, html, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { readSettings, saveSettings } from './client.js'
+
+const SOURCES = {
+  backoffice: 'Set here',
+  config: 'From the site configuration',
+  default: 'Default',
+}
+
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+
+export default class CromboloSeoDashboardElement extends UmbLitElement {
+  static properties = {
+    _settings: { state: true },
+    _draft: { state: true },
+    _message: { state: true },
+    _saving: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._draft = {}
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    try {
+      this._settings = await readSettings()
+      this._draft = {}
+    } catch (error) {
+      this._message = error.message
+    }
+  }
+
+  #value(field) {
+    return field in this._draft ? this._draft[field] : this._settings.effective[field]
+  }
+
+  #set(field, value) {
+    this._draft = { ...this._draft, [field]: value }
+  }
+
+  async #save(changes) {
+    this._saving = true
+    try {
+      this._settings = await saveSettings(changes)
+      this._draft = {}
+      this._message = 'Saved.'
+    } catch (error) {
+      this._message = error.message
+    } finally {
+      this._saving = false
+    }
+  }
+
+  #source(field) {
+    const source = this._settings.sources[field]
+    return html`
+      <span class="source">
+        <uui-tag look="secondary">${SOURCES[source]}</uui-tag>
+        ${
+          source === 'backoffice'
+            ? html`<uui-button
+                compact
+                look="placeholder"
+                label="Use the default"
+                @click=${() => this.#save({ [field]: null })}
+              ></uui-button>`
+            : nothing
+        }
+      </span>
+    `
+  }
+
+  #field(field, label, description, control) {
+    return html`
+      <div class="field">
+        <div class="label">
+          <strong>${label}</strong>
+          ${this.#source(field)}
+        </div>
+        <small>${description}</small>
+        ${control}
+      </div>
+    `
+  }
+
+  #toggle(field, label, description) {
+    return this.#field(
+      field,
+      label,
+      description,
+      html`<uui-toggle
+        .checked=${Boolean(this.#value(field))}
+        label=${label}
+        @change=${(event) => this.#set(field, event.target.checked)}
+      ></uui-toggle>`,
+    )
+  }
+
+  #text(field, label, description, placeholder = '') {
+    return this.#field(
+      field,
+      label,
+      description,
+      html`<uui-input
+        .value=${this.#value(field) ?? ''}
+        label=${label}
+        placeholder=${placeholder}
+        @input=${(event) => this.#set(field, event.target.value)}
+      ></uui-input>`,
+    )
+  }
+
+  render() {
+    if (!this._settings)
+      return this._message
+        ? html`<uui-box><p>${this._message}</p></uui-box>`
+        : html`<uui-loader></uui-loader>`
+    const image = this.#value('defaultImage')
+    const notFound = this.#value('notFoundPage') ?? []
+    const scoped = notFound.some((rule) => rule.host || rule.culture)
+    return html`
+      <uui-box headline="Search & sharing">
+        ${this.#toggle(
+          'indexable',
+          'Let search engines list this site',
+          'Turn off for a site that is not live yet, such as a staging copy.',
+        )}
+        ${this.#toggle(
+          'sitemap',
+          'Offer a list of pages to search engines',
+          'Lists every published page at /sitemap.xml, except those hidden from it.',
+        )}
+        ${this.#text('siteName', 'Site name', 'Shown when a page is shared.')}
+        ${this.#text(
+          'titleSuffix',
+          'Added to every page title',
+          'For example " | Acme". Leave empty for none.',
+        )}
+        ${this.#field(
+          'defaultImage',
+          'Sharing image',
+          'Used when a page without its own image is shared.',
+          html`<umb-input-media
+            max="1"
+            .selection=${UUID.test(image ?? '') ? [image] : []}
+            @change=${(event) => this.#set('defaultImage', event.target.selection?.[0] ?? '')}
+          ></umb-input-media>`,
+        )}
+        ${this.#field(
+          'notFoundPage',
+          'Page for addresses that do not exist',
+          scoped
+            ? 'The site configuration chooses a page per address or language. Choosing one here uses it everywhere.'
+            : 'Shown, with a "not found" status, when nothing else answers an address.',
+          html`<umb-input-document
+            max="1"
+            .selection=${notFound[0]?.document && !scoped ? [notFound[0].document] : []}
+            @change=${(event) => {
+              const key = event.target.selection?.[0]
+              this.#set('notFoundPage', key ? [{ document: key }] : [])
+            }}
+          ></umb-input-document>`,
+        )}
+        ${this.#field(
+          'robotsTxt',
+          'Instructions for search engines',
+          'The rules in /robots.txt. The address of the page list is added for you.',
+          html`<uui-textarea
+            .value=${this.#value('robotsTxt') ?? ''}
+            label="Instructions for search engines"
+            @input=${(event) => this.#set('robotsTxt', event.target.value)}
+          ></uui-textarea>`,
+        )}
+        <div class="actions">
+          <uui-button
+            look="primary"
+            label="Save"
+            ?disabled=${this._saving || Object.keys(this._draft).length === 0}
+            @click=${() => this.#save(this._draft)}
+          ></uui-button>
+          ${this._message ? html`<span>${this._message}</span>` : nothing}
+        </div>
+      </uui-box>
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--uui-size-layout-1);
+    }
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: var(--uui-size-space-2);
+      margin-bottom: var(--uui-size-layout-1);
+    }
+    .label {
+      display: flex;
+      align-items: center;
+      gap: var(--uui-size-space-3);
+    }
+    .source {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--uui-size-space-2);
+    }
+    small {
+      color: var(--uui-color-text-alt);
+    }
+    uui-textarea {
+      --uui-textarea-min-height: 8em;
+      font-family: monospace;
+    }
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--uui-size-space-4);
+    }
+  `
+}
+
+customElements.define('crombolo-seo-dashboard', CromboloSeoDashboardElement)

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.10.0",
+  "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)