@mannisto/astro-metadata 1.0.2 → 2.0.0-alpha.2

package/src/toolbar/ui/section/section.css

@@ -0,0 +1,88 @@
+/* A box around the section, so its content belongs together */
+:host {
+  display: block;
+  padding: var(--space-300);
+  border: 1px solid var(--zinc-800);
+  border-radius: var(--radius);
+  background: var(--zinc-900);
+}
+
+/* A closed or empty section shows only its heading */
+:host([closed]),
+:host([empty]) {
+  h2 {
+    margin-bottom: 0;
+  }
+}
+
+/* An empty section has no caret */
+:host([empty]) astro-metadata-icon {
+  visibility: hidden;
+}
+
+/* The caret turns down when the section is open */
+:host(:not([closed])) astro-metadata-icon {
+  transform: rotate(90deg);
+}
+
+/* The heading: small, monospace, uppercase, wide letter spacing */
+h2 {
+  margin: 0 0 var(--space-200);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-small);
+  font-weight: 500;
+  color: var(--zinc-400);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* The heading is a button that closes or opens the section */
+button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-100);
+  width: 100%;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+  border: 0;
+  background: none;
+
+  &:hover:not(:disabled) {
+    color: var(--zinc-100);
+  }
+
+  /* An empty section: a dim heading and "None" at the right */
+  &:disabled {
+    color: var(--zinc-600);
+    cursor: default;
+  }
+
+  astro-metadata-icon {
+    transition: transform 120ms;
+
+    --icon-size: 12px;
+  }
+}
+
+.none {
+  margin-left: auto;
+  font-size: var(--font-size-tiny);
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+/* minmax(0, 1fr): a long line, e.g. in a code block, scrolls inside its block */
+.content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-200);
+
+  &[hidden] {
+    display: none;
+  }
+}

package/src/toolbar/ui/section/section.ts

@@ -0,0 +1,78 @@
+import { html, LitElement, nothing, unsafeCSS } from "lit"
+
+import { define } from "../../define.ts"
+
+import "../icon/icon.ts"
+
+import styles from "./section.css?inline"
+
+/**
+ * A part of a view: a heading and its content. Click the heading to close or open the section.
+ * At the start, the first section of a view is open and the other sections are closed.
+ * A section without a heading is always open.
+ * An `empty` section shows only its heading and "None", and the user can not open it.
+ *
+ * @example <astro-metadata-section heading="General">...</astro-metadata-section>
+ */
+export class Section extends LitElement {
+  static properties = {
+    heading: {},
+    closed: { type: Boolean, reflect: true },
+    empty: { type: Boolean, reflect: true },
+  }
+
+  static styles = unsafeCSS(styles)
+
+  declare heading: string | undefined
+  declare closed: boolean
+  declare empty: boolean
+
+  // True after the first connect. A section that moves keeps its state.
+  private started = false
+
+  constructor() {
+    super()
+    this.closed = false
+    this.empty = false
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    if (this.started) return
+
+    this.started = true
+    const first = this.parentNode?.querySelector("astro-metadata-section")
+    this.closed = Boolean(this.heading) && first !== this
+  }
+
+  toggle(): void {
+    if (!this.heading) return
+
+    this.closed = !this.closed
+  }
+
+  render() {
+    return html`
+      ${
+        this.heading
+          ? html`
+              <h2>
+                <button
+                  type="button"
+                  aria-expanded=${!this.closed && !this.empty}
+                  ?disabled=${this.empty}
+                  @click=${this.toggle}
+                >
+                  <astro-metadata-icon name="caret-right"></astro-metadata-icon>
+                  ${this.heading} ${this.empty ? html`<span class="none">None</span>` : nothing}
+                </button>
+              </h2>
+            `
+          : nothing
+      }
+      <div class="content" ?hidden=${this.closed || this.empty}><slot></slot></div>
+    `
+  }
+}
+
+define("astro-metadata-section", Section)

package/src/toolbar/ui/tab/tab.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/src/toolbar/ui/tab/tab.ts

@@ -0,0 +1,47 @@
+import { html, LitElement, unsafeCSS } from "lit"
+
+import { define } from "../../define.ts"
+import type { Level } from "../badge/badge.ts"
+import styles from "./tab.css?inline"
+
+/**
+ * One tab of a `<astro-metadata-tab-group>`: its label in the tab bar, and its content.
+ *
+ * @example <astro-metadata-tab name="overview" label="Overview" count="2" level="warning">
+ */
+export class Tab extends LitElement {
+  static properties = {
+    name: {},
+    label: {},
+    count: { type: Number },
+    level: {},
+  }
+
+  static styles = unsafeCSS(styles)
+
+  declare name: string
+  declare label: string
+  /** A number in a badge after the label. A count of 0 shows no badge. */
+  declare count: number | undefined
+  /** The level of the badge. */
+  declare level: Level | undefined
+
+  constructor() {
+    super()
+    this.name = ""
+    this.label = ""
+    this.count = undefined
+    this.level = undefined
+  }
+
+  // Tells the tab group that the label or the count changed
+  updated(): void {
+    this.dispatchEvent(new Event("tab-update", { bubbles: true }))
+  }
+
+  render() {
+    return html`<slot></slot>`
+  }
+}
+
+define("astro-metadata-tab", Tab)

package/src/toolbar/ui/tab-group/tab-group.css

@@ -0,0 +1,42 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+nav {
+  display: flex;
+  gap: var(--space-100);
+  padding: var(--space-200) var(--space-400) 0;
+  border-bottom: 1px solid var(--zinc-800);
+}
+
+button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-150);
+  padding: var(--space-200);
+  font: inherit;
+  color: var(--zinc-400);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  transition: color 120ms;
+
+  &:hover {
+    color: var(--zinc-100);
+  }
+
+  &[aria-selected="true"] {
+    color: var(--zinc-100);
+    border-bottom-color: var(--zinc-100);
+  }
+}
+
+/* The content of the selected tab scrolls, the tab bar stays */
+.panels {
+  flex: 1;
+  padding: var(--space-400);
+  overflow: auto;
+}

package/src/toolbar/ui/tab-group/tab-group.ts

@@ -0,0 +1,101 @@
+import { html, LitElement, nothing, unsafeCSS } from "lit"
+
+import "../badge/badge.ts"
+
+import { define } from "../../define.ts"
+import type { Tab } from "../tab/tab.ts"
+
+import "../tab/tab.ts"
+
+import styles from "./tab-group.css?inline"
+
+/**
+ * A tab bar and the content of the selected tab. The tabs are its
+ * `<astro-metadata-tab>` children. It fires a `change` event with the name of the tab.
+ *
+ * @example
+ * <astro-metadata-tab-group selected="overview">
+ *   <astro-metadata-tab name="overview" label="Overview">...</astro-metadata-tab>
+ *   <astro-metadata-tab name="code" label="Code">...</astro-metadata-tab>
+ * </astro-metadata-tab-group>
+ */
+export class TabGroup extends LitElement {
+  static properties = {
+    selected: { reflect: true },
+    tabs: { state: true },
+  }
+
+  static styles = unsafeCSS(styles)
+
+  declare selected: string | undefined
+  declare tabs: Tab[]
+
+  constructor() {
+    super()
+    this.selected = undefined
+    this.tabs = []
+    this.addEventListener("tab-update", () => {
+      this.requestUpdate()
+    })
+  }
+
+  onSlotChange(event: Event): void {
+    const slot = event.target as HTMLSlotElement
+    this.tabs = slot.assignedElements().filter((element): element is Tab => {
+      return element.tagName.toLowerCase() === "astro-metadata-tab"
+    })
+  }
+
+  select(name: string): void {
+    this.selected = name
+    this.dispatchEvent(new CustomEvent("change", { detail: name }))
+  }
+
+  // Shows only the selected tab. Without a selection, the first tab shows.
+  updated(): void {
+    const selected = this.current()
+    for (const tab of this.tabs) {
+      tab.hidden = tab.name !== selected
+    }
+  }
+
+  current(): string | undefined {
+    const known = this.tabs.some((tab) => {
+      return tab.name === this.selected
+    })
+    return known ? this.selected : this.tabs[0]?.name
+  }
+
+  render() {
+    const selected = this.current()
+    return html`
+      <nav role="tablist">
+        ${this.tabs.map((tab) => {
+          return html`
+            <button
+              role="tab"
+              aria-selected=${tab.name === selected}
+              @click=${() => {
+                this.select(tab.name)
+              }}
+            >
+              ${tab.label}
+              ${
+                tab.count
+                  ? html`<astro-metadata-badge level=${tab.level ?? "info"}>
+                      ${tab.count}
+                    </astro-metadata-badge>`
+                  : nothing
+              }
+            </button>
+          `
+        })}
+      </nav>
+      <div class="panels" role="tabpanel">
+        <slot @slotchange=${this.onSlotChange}></slot>
+      </div>
+    `
+  }
+}
+
+define("astro-metadata-tab-group", TabGroup)

package/src/toolbar/ui/table/table.css

@@ -0,0 +1,124 @@
+/* A framed container, a hairline between the rows, and a hover color */
+:host {
+  display: block;
+}
+
+table {
+  width: 100%;
+  overflow: hidden;
+  font-size: var(--font-size-small);
+  border-spacing: 0;
+  border: 1px solid var(--zinc-800);
+  border-radius: var(--radius-medium);
+  background: var(--zinc-950);
+}
+
+th,
+td {
+  padding: var(--space-200) var(--space-400);
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--zinc-800);
+  transition: background-color 120ms;
+}
+
+tr {
+  &:last-child :is(th, td) {
+    border-bottom: 0;
+  }
+
+  &:hover :is(th, td) {
+    background: var(--zinc-800);
+  }
+
+  /* The row of a problem after a click on the problem */
+  &.highlight :is(th, td) {
+    animation: highlight 1.6s ease-out;
+  }
+
+  /* The child rows are indented under their row */
+  &.child th {
+    padding-left: calc(var(--space-400) + var(--space-400));
+  }
+}
+
+th {
+  width: 25%;
+  font-weight: 400;
+  color: var(--zinc-400);
+}
+
+td {
+  color: var(--zinc-100);
+  overflow-wrap: anywhere;
+
+  /* The third column: a short note, e.g. the length of a text */
+  &.note {
+    width: 1%;
+    padding-left: 0;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-tiny);
+    color: var(--zinc-500);
+    text-align: right;
+    white-space: nowrap;
+    word-spacing: -0.2em;
+
+    &.near {
+      color: var(--yellow-400);
+    }
+
+    &.over {
+      color: var(--orange-400);
+    }
+  }
+}
+
+/* A value with a small image before it, e.g. the favicon */
+.favicon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-200);
+
+  img {
+    flex: none;
+    object-fit: contain;
+  }
+}
+
+.empty {
+  color: var(--zinc-400);
+}
+
+/* A row with child rows: its label opens and closes them */
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-100);
+  margin-left: calc(var(--space-100) * -1);
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+
+  --icon-size: 12px;
+
+  &:hover {
+    color: var(--zinc-100);
+  }
+
+  astro-metadata-icon {
+    transition: transform 120ms;
+  }
+
+  &.open astro-metadata-icon {
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes highlight {
+  from {
+    background: var(--blue-900);
+  }
+}

package/src/toolbar/ui/table/table.ts

@@ -0,0 +1,155 @@
+import { html, LitElement, nothing, unsafeCSS } from "lit"
+
+import { define } from "../../define.ts"
+
+import "../icon/icon.ts"
+
+import { code } from "../inline-code/inline-code.ts"
+import styles from "./table.css?inline"
+
+/**
+ * A row of a table: a label and a value. A row without a value shows "none".
+ */
+export type TableRow = {
+  label: string
+  /** A key to find the row, e.g. "og:title". `highlight()` uses it. */
+  key?: string
+  value?: unknown
+  /** A short note in a third column, e.g. the length of a text: "30 / 60". */
+  note?: string
+  /** The color of the note: "near" a limit (yellow), or "over" it (orange). */
+  noteLevel?: "near" | "over"
+  /** Shows the label as code, e.g. a tag name such as "og:title". */
+  labelCode?: boolean
+  /** Rows under this row. A click on the label opens and closes them. */
+  children?: TableRow[]
+}
+
+/**
+ * A table of labels and values.
+ *
+ * @example <astro-metadata-table .rows=${[{ label: "Title", value: title }]}></astro-metadata-table>
+ */
+export class Table extends LitElement {
+  static properties = {
+    rows: { attribute: false },
+    opened: { state: true },
+    highlighted: { state: true },
+  }
+  static styles = unsafeCSS(styles)
+
+  declare rows: TableRow[]
+  /** The indexes of the open rows. */
+  declare opened: Set<number>
+  /** The key of the marked row. */
+  declare highlighted: string | undefined
+
+  constructor() {
+    super()
+    this.rows = []
+    this.opened = new Set()
+    this.highlighted = undefined
+  }
+
+  /**
+   * Scrolls to the row with a key and marks it for a moment.
+   *
+   * @returns False when the table has no row with the key.
+   */
+  async highlight(key: string): Promise<boolean> {
+    const found = this.rows.some((row) => {
+      return row.key === key
+    })
+    if (!found) return false
+
+    // A new value restarts the animation of a row that is already marked
+    this.highlighted = undefined
+    await this.updateComplete
+    this.highlighted = key
+    await this.updateComplete
+    this.renderRoot
+      .querySelector("tr.highlight")
+      ?.scrollIntoView({ block: "center", behavior: "smooth" })
+    return true
+  }
+
+  renderValue(row: TableRow) {
+    if (row.value === undefined || row.value === null || row.value === "") {
+      return html`<span class="empty">none</span>`
+    }
+    return row.value
+  }
+
+  toggle(index: number): void {
+    const opened = new Set(this.opened)
+    if (opened.has(index)) opened.delete(index)
+    else opened.add(index)
+    this.opened = opened
+  }
+
+  renderLabel(row: TableRow, index: number) {
+    const label = row.labelCode ? code(row.label) : row.label
+    if (!row.children?.length) return label
+
+    const open = this.opened.has(index)
+    return html`
+      <button
+        class="toggle ${open ? "open" : ""}"
+        aria-expanded=${open}
+        @click=${() => {
+          this.toggle(index)
+        }}
+      >
+        <astro-metadata-icon name="caret-right"></astro-metadata-icon>
+        ${label}
+      </button>
+    `
+  }
+
+  renderRow(row: TableRow, label: unknown, notes: boolean, child: boolean) {
+    return html`
+      <tr
+        class="${child ? "child" : ""} ${row.key && row.key === this.highlighted ? "highlight" : ""}"
+      >
+        <th>${label}</th>
+        <td>${this.renderValue(row)}</td>
+        ${
+          notes
+            ? html`<td class="note ${row.noteLevel ?? ""}">${row.note ?? nothing}</td>`
+            : nothing
+        }
+      </tr>
+    `
+  }
+
+  render() {
+    // The third column only shows in a table with notes
+    const all = this.rows.flatMap((row) => {
+      return [row, ...(row.children ?? [])]
+    })
+    const notes = all.some((row) => {
+      return row.note
+    })
+
+    return html`
+      <table>
+        ${this.rows.map((row, index) => {
+          const children = this.opened.has(index) ? (row.children ?? []) : []
+          return html`
+            ${this.renderRow(row, this.renderLabel(row, index), notes, false)}
+            ${children.map((child) => {
+              return this.renderRow(
+                child,
+                child.labelCode ? code(child.label) : child.label,
+                notes,
+                true
+              )
+            })}
+          `
+        })}
+      </table>
+    `
+  }
+}
+
+define("astro-metadata-table", Table)

package/src/toolbar/views/code-blocks.ts

@@ -0,0 +1,35 @@
+import { html, nothing } from "lit"
+
+import type { JsonLd, ManifestData } from "../data.ts"
+
+import "../ui/code-block/code-block.ts"
+
+/**
+ * The JSON-LD scripts as code blocks, with their types as the label.
+ * A script with invalid JSON shows its source and the error.
+ */
+export function schemaBlocks(schemas: JsonLd[]) {
+  return schemas.map((schema) => {
+    const source = schema.error ? schema.source : JSON.stringify(schema.data, null, 2)
+    const label = schema.error ? `Invalid JSON: ${schema.error}` : schema.types.join(", ")
+    return html`
+      <astro-metadata-code .code=${source} language="json" label=${label}></astro-metadata-code>
+    `
+  })
+}
+
+/**
+ * The web app manifest as a code block, with its URL as the label, or the load error.
+ */
+export function manifestBlock(manifest: ManifestData | undefined) {
+  if (!manifest) return nothing
+  if (manifest.error) return html`<p class="empty">${manifest.url}: ${manifest.error}</p>`
+
+  return html`
+    <astro-metadata-code
+      .code=${JSON.stringify(manifest.data, null, 2)}
+      language="json"
+      label=${manifest.url}
+    ></astro-metadata-code>
+  `
+}