@mannisto/astro-metadata 1.0.1 → 2.0.0-alpha.1

package/src/toolbar/views/metadata-panel.css

@@ -0,0 +1,101 @@
+* {
+  box-sizing: border-box;
+}
+
+.panel {
+  position: fixed;
+  inset: 0 0 0 auto;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: var(--panel-width, 480px);
+  max-width: 100vw;
+  background: var(--zinc-950);
+  border-left: 1px solid var(--zinc-800);
+  box-shadow: var(--shadow);
+  animation: slide-in 160ms ease-out;
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateX(24px);
+    opacity: 0;
+  }
+}
+
+/* The handle on the left edge: drag it to change the width */
+.resize {
+  position: absolute;
+  inset: 0 auto 0 -3px;
+  width: 6px;
+  cursor: ew-resize;
+
+  &:hover,
+  &.active {
+    background: var(--zinc-700);
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-300);
+  padding: var(--space-300) var(--space-400);
+  border-bottom: 1px solid var(--zinc-800);
+}
+
+.heading {
+  flex: 1;
+  min-width: 0;
+}
+
+/* The title and the Beta badge */
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-200);
+}
+
+h1 {
+  margin: 0;
+  font-size: var(--font-size-body);
+  font-weight: 600;
+}
+
+.path {
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--font-size-small);
+  color: var(--zinc-400);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+
+.close {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-small);
+
+  &:hover {
+    background: var(--zinc-800);
+  }
+}
+
+astro-metadata-tab-group {
+  flex: 1;
+}
+
+.loading {
+  padding: var(--space-400);
+  color: var(--zinc-400);
+}

package/src/toolbar/views/metadata-panel.ts

@@ -0,0 +1,125 @@
+import { html, LitElement, nothing, unsafeCSS } from "lit"
+import { styleMap } from "lit/directives/style-map.js"
+
+import { summarize } from "../data.ts"
+import type { PageMetadata } from "../data.ts"
+import { define } from "../define.ts"
+import tokens from "../styles/tokens.css?inline"
+
+import "../ui/badge/badge.ts"
+import "../ui/icon/icon.ts"
+import "../ui/tab-group/tab-group.ts"
+
+import styles from "./metadata-panel.css?inline"
+
+import "./overview-view.ts"
+import "./previews/previews-view.ts"
+import "./raw-view.ts"
+
+const TAB_KEY = "astro-metadata:tab"
+const WIDTH_KEY = "astro-metadata:width"
+const MIN_WIDTH = 360
+
+/**
+ * The slide-out panel: a header, and the tabs with the views.
+ * It fires a `close` event when the user clicks the close button.
+ */
+export class MetadataPanel extends LitElement {
+  static properties = {
+    data: { attribute: false },
+    width: { state: true },
+    resizing: { state: true },
+  }
+
+  static styles = [unsafeCSS(tokens), unsafeCSS(styles)]
+
+  declare data: PageMetadata | undefined
+  declare width: number
+  declare resizing: boolean
+
+  constructor() {
+    super()
+    this.data = undefined
+    this.width = Number(localStorage.getItem(WIDTH_KEY)) || 480
+    this.resizing = false
+  }
+
+  close(): void {
+    this.dispatchEvent(new CustomEvent("close"))
+  }
+
+  /**
+   * Changes the width while the user drags the left edge.
+   */
+  startResize(event: PointerEvent): void {
+    const handle = event.currentTarget as HTMLElement
+    handle.setPointerCapture(event.pointerId)
+    this.resizing = true
+
+    const move = (moveEvent: PointerEvent) => {
+      const max = window.innerWidth - 40
+      this.width = Math.min(max, Math.max(MIN_WIDTH, window.innerWidth - moveEvent.clientX))
+    }
+    const stop = () => {
+      handle.removeEventListener("pointermove", move)
+      this.resizing = false
+      localStorage.setItem(WIDTH_KEY, String(this.width))
+    }
+    handle.addEventListener("pointermove", move)
+    handle.addEventListener("pointerup", stop, { once: true })
+  }
+
+  renderTabs() {
+    if (!this.data) return html`<p class="loading">Reading the metadata…</p>`
+
+    const { errors, warnings, level } = summarize(this.data.checks)
+    return html`
+      <astro-metadata-tab-group
+        selected=${localStorage.getItem(TAB_KEY) ?? "overview"}
+        @change=${(event: CustomEvent<string>) => {
+          localStorage.setItem(TAB_KEY, event.detail)
+        }}
+      >
+        <astro-metadata-tab
+          name="overview"
+          label="Overview"
+          count=${errors + warnings}
+          level=${level ?? nothing}
+        >
+          <astro-metadata-overview .data=${this.data}></astro-metadata-overview>
+        </astro-metadata-tab>
+        <astro-metadata-tab name="previews" label="Previews">
+          <astro-metadata-previews .data=${this.data}></astro-metadata-previews>
+        </astro-metadata-tab>
+        <astro-metadata-tab name="raw" label="Raw">
+          <astro-metadata-raw .data=${this.data}></astro-metadata-raw>
+        </astro-metadata-tab>
+      </astro-metadata-tab-group>
+    `
+  }
+
+  render() {
+    return html`
+      <aside class="panel" style=${styleMap({ "--panel-width": `${this.width}px` })}>
+        <div class="resize ${this.resizing ? "active" : ""}" @pointerdown=${this.startResize}></div>
+
+        <header class="header">
+          <div class="heading">
+            <div class="title">
+              <h1>Metadata</h1>
+              <astro-metadata-badge level="info">Beta</astro-metadata-badge>
+            </div>
+            <p class="path">${location.pathname}</p>
+          </div>
+          <button class="close" @click=${this.close} aria-label="Close the panel">
+            <astro-metadata-icon name="close"></astro-metadata-icon>
+          </button>
+        </header>
+
+        ${this.renderTabs()}
+      </aside>
+    `
+  }
+}
+
+define("astro-metadata-panel", MetadataPanel)

package/src/toolbar/views/overview-view.css

@@ -0,0 +1,27 @@
+/* The alerts of the page: one for each level */
+.alerts {
+  display: grid;
+  gap: var(--space-200);
+}
+
+/* The Open Graph image at the full width of the panel */
+.image {
+  width: 100%;
+  aspect-ratio: 1.91 / 1;
+  border-radius: var(--radius);
+  background: var(--zinc-900);
+
+  &[missing] {
+    font-size: var(--font-size-small);
+    color: var(--zinc-400);
+    border: 1px dashed var(--zinc-800);
+  }
+}
+
+/* The name of a table in a section, e.g. "Open Graph" in the Social section */
+.subheading {
+  margin: var(--space-200) 0 0;
+  font-size: var(--font-size-small);
+  font-weight: 500;
+  color: var(--zinc-300);
+}

package/src/toolbar/views/overview-view.ts

@@ -0,0 +1,401 @@
+import { html, LitElement, nothing, unsafeCSS } from "lit"
+
+import { LIMITS } from "../../lib/checks.js"
+import { findMeta } from "../data.ts"
+import type { Check, PageMetadata } from "../data.ts"
+import shared from "../styles/shared.css?inline"
+
+import "../ui/alert/alert.ts"
+import "../ui/color-swatch/color-swatch.ts"
+import "../ui/image/image.ts"
+
+import { define } from "../define.ts"
+import type { AlertItem } from "../ui/alert/alert.ts"
+import type { Level } from "../ui/badge/badge.ts"
+import { code, withCode } from "../ui/inline-code/inline-code.ts"
+
+import "../ui/section/section.ts"
+import "../ui/table/table.ts"
+
+import type { Section } from "../ui/section/section.ts"
+import type { Table, TableRow } from "../ui/table/table.ts"
+import { manifestBlock, schemaBlocks } from "./code-blocks.ts"
+import styles from "./overview-view.css?inline"
+
+/** An icon file of the page: a link tag or an icon of the web app manifest. */
+type IconFile = {
+  /** The path of the file, without the query, e.g. "/favicon-32.png". */
+  path: string
+  /** The URL to load the image. */
+  src: string
+  sizes?: string
+  type?: string
+  /** "icon", "apple-touch-icon" or "manifest". */
+  use: string
+}
+
+/** The part of a web app manifest that the Overview reads. */
+type ManifestJson = {
+  icons?: { src: string; sizes?: string; type?: string }[]
+}
+
+/**
+ * Returns the size of an icon from its `sizes` value, e.g. 32 for "32x32".
+ * An icon without a size, e.g. an SVG, scales to any size, so it sorts last.
+ */
+function sizeOf(file: IconFile): number {
+  const size = Number.parseInt(file.sizes ?? "", 10)
+  return Number.isNaN(size) ? Number.POSITIVE_INFINITY : size
+}
+
+/**
+ * Returns all icon files of the page, from the smallest to the largest.
+ */
+function iconFiles(data: PageMetadata): IconFile[] {
+  const files: IconFile[] = data.icons.map((icon) => {
+    return {
+      path: icon.href.split("?")[0],
+      src: icon.href,
+      sizes: icon.sizes,
+      type: icon.type,
+      use: icon.rel,
+    }
+  })
+
+  const manifest = data.manifest
+  const manifestIcons = (manifest?.data as ManifestJson | undefined)?.icons ?? []
+  // Manifest icon paths are relative to the manifest URL
+  const base = new URL(manifest?.url ?? "", location.href)
+  for (const icon of manifestIcons) {
+    const url = new URL(icon.src, base)
+    files.push({
+      path: url.pathname,
+      src: url.href,
+      sizes: icon.sizes,
+      type: icon.type,
+      use: "manifest",
+    })
+  }
+
+  return files.sort((a, b) => {
+    return sizeOf(a) - sizeOf(b)
+  })
+}
+
+// The section of each field of a check. A field without a row in the section,
+// e.g. "charset", opens only the section.
+const FIELD_SECTIONS: Record<string, string> = {
+  "json-ld": "Structured data",
+  hreflang: "Locales",
+}
+
+/**
+ * Returns the section of a field: "Social" for the Open Graph and Twitter (X) tags,
+ * else "General".
+ */
+function sectionOf(field: string): string {
+  if (FIELD_SECTIONS[field]) return FIELD_SECTIONS[field]
+  if (field.startsWith("og:") || field.startsWith("twitter:")) return "Social"
+  return "General"
+}
+
+/**
+ * Returns the short name of a feed type, e.g. "rss" for "application/rss+xml".
+ */
+function feedFormat(type: string | undefined): string | undefined {
+  if (!type) return undefined
+  if (type.includes("atom")) return "atom"
+  if (type.includes("json")) return "json"
+  if (type.includes("rss")) return "rss"
+  return type
+}
+
+/**
+ * Returns a row with the tag name in the note. A row without a value gets no tag name.
+ */
+function tagRow(label: string, value: TableRow["value"], tag: string): TableRow {
+  return { label, key: tag, value, note: value === undefined ? undefined : tag }
+}
+
+/**
+ * Returns the heading of an alert, e.g. "Error: 1" or "Errors: 3".
+ */
+function heading(word: string, amount: number): string {
+  return `${word}${amount === 1 ? "" : "s"}: ${amount}`
+}
+
+/**
+ * Returns "1 file" or "3 files".
+ */
+function count(amount: number, word: string): string {
+  return `${amount} ${word}${amount === 1 ? "" : "s"}`
+}
+
+/**
+ * Returns a table row with the length of a text against a limit. The length is yellow
+ * from 90 % of the limit, and orange over the limit.
+ */
+function lengthRow(label: string, key: string, text: string | undefined, limit: number): TableRow {
+  if (!text) return { label, key }
+
+  let noteLevel: TableRow["noteLevel"]
+  if (text.length > limit) noteLevel = "over"
+  else if (text.length >= limit * 0.9) noteLevel = "near"
+  return { label, key, value: text, note: `${text.length} / ${limit}`, noteLevel }
+}
+
+/**
+ * The values of the page at one look: the status, then the values by category,
+ * in the order of their importance.
+ */
+export class OverviewView extends LitElement {
+  static properties = { data: { attribute: false } }
+  static styles = [unsafeCSS(shared), unsafeCSS(styles)]
+
+  declare data: PageMetadata
+
+  /**
+   * Returns the Twitter (X) rows. Twitter (X) uses the Open Graph title, description and image,
+   * so these rows show only when the page has its own Twitter (X) value.
+   */
+  twitterRows(): TableRow[] {
+    const x = this.data.twitter
+    const rows = [
+      tagRow("Card", code(findMeta(x, "twitter:card")), "twitter:card"),
+      tagRow("Site", code(findMeta(x, "twitter:site")), "twitter:site"),
+      tagRow("Creator", code(findMeta(x, "twitter:creator")), "twitter:creator"),
+    ]
+    const overrides = [
+      tagRow("Title", findMeta(x, "twitter:title"), "twitter:title"),
+      tagRow("Description", findMeta(x, "twitter:description"), "twitter:description"),
+      tagRow("Image", findMeta(x, "twitter:image"), "twitter:image"),
+    ].filter((row) => {
+      return row.value !== undefined
+    })
+    return [...rows, ...overrides]
+  }
+
+  /**
+   * Opens the section of a field, and marks its row, e.g. after a click on a problem.
+   */
+  async showField(field: string): Promise<void> {
+    const section = this.renderRoot.querySelector<Section>(
+      `astro-metadata-section[heading="${sectionOf(field)}"]`
+    )
+    if (!section || section.empty) return
+
+    section.closed = false
+    await section.updateComplete
+    for (const table of section.querySelectorAll<Table>("astro-metadata-table")) {
+      if (await table.highlight(field)) return
+    }
+    section.scrollIntoView({ block: "start", behavior: "smooth" })
+  }
+
+  /**
+   * Returns an alert with the checks of one level, e.g. all errors.
+   */
+  renderAlert(level: Level, heading: string, checks: Check[]) {
+    const items: AlertItem[] = checks.map((check) => {
+      return { content: withCode(check.message), target: check.field }
+    })
+    return html`
+      <astro-metadata-alert
+        level=${level}
+        heading=${heading}
+        .items=${items}
+        @select=${(event: CustomEvent<string>) => {
+          this.showField(event.detail)
+        }}
+      ></astro-metadata-alert>
+    `
+  }
+
+  /**
+   * The status of the page: one alert for each level, with the errors first.
+   * Without errors and warnings, a green alert shows that all is good.
+   */
+  renderStatus() {
+    if (this.data.ignored) {
+      return html`
+        <div class="alerts">
+          <astro-metadata-alert
+            level="info"
+            heading="Checks are off for this page"
+            .items=${[{ content: withCode("The `pages.ignore` option of the integration matches this page.") }]}
+          ></astro-metadata-alert>
+        </div>
+      `
+    }
+
+    const checks = this.data.checks
+    const byLevel = (level: Check["level"]) => {
+      return checks.filter((check) => {
+        return check.level === level
+      })
+    }
+    const errors = byLevel("error")
+    const warnings = byLevel("warning")
+    const notes = byLevel("info")
+
+    // A noindex page is not a problem, but it is also not "all good"
+    const hidden = /noindex/i.test(this.data.robots ?? "")
+    const good = errors.length === 0 && warnings.length === 0 && !hidden
+
+    return html`
+      <div class="alerts">
+        ${errors.length > 0 ? this.renderAlert("error", heading("Error", errors.length), errors) : nothing}
+        ${
+          warnings.length > 0
+            ? this.renderAlert("warning", heading("Warning", warnings.length), warnings)
+            : nothing
+        }
+        ${good ? this.renderAlert("success", "No issues found", []) : nothing}
+        ${
+          notes.length > 0
+            ? this.renderAlert(
+                "info",
+                hidden ? "Hidden from search engines" : heading("Note", notes.length),
+                notes
+              )
+            : nothing
+        }
+      </div>
+    `
+  }
+
+  /**
+   * The favicon row: the logo, and the number of files. Its child rows list all icon
+   * files, from the smallest to the largest. The logo is the SVG, or else the largest file.
+   */
+  faviconRow(): TableRow {
+    const files = iconFiles(this.data)
+    if (files.length === 0) return { label: "Favicons", key: "favicon" }
+
+    const svg = files.find((file) => {
+      return file.type === "image/svg+xml"
+    })
+    const logo = svg ?? files[files.length - 1]
+
+    return {
+      label: "Favicons",
+      key: "favicon",
+      value: html`<span class="favicon"
+        ><img src=${logo.src} alt="" width="20" height="20"
+      /></span>`,
+      note: count(files.length, "file"),
+      children: files.map((file) => {
+        const size = sizeOf(file)
+        return {
+          label: Number.isFinite(size) ? `${size} × ${size}` : "Any size",
+          value: code(file.path),
+          note: file.use,
+        }
+      }),
+    }
+  }
+
+  renderLocales() {
+    const links = this.data.hreflang
+    if (links.length === 0) return nothing
+
+    const page = this.data.canonical
+    const rows: TableRow[] = links.map((link) => {
+      const fallback = link.hreflang === "x-default"
+      return {
+        label: fallback ? "Default" : (link.hreflang ?? ""),
+        labelCode: !fallback,
+        value: link.href,
+        // Shows which row is the current page, and what "Default" is
+        note: fallback ? "x-default" : link.href === page ? "this page" : undefined,
+      }
+    })
+    return html`<astro-metadata-table .rows=${rows}></astro-metadata-table>`
+  }
+
+  renderFeeds() {
+    const feeds = this.data.feeds
+    if (feeds.length === 0) return nothing
+
+    const rows: TableRow[] = feeds.map((feed) => {
+      return { label: feed.title ?? "Feed", value: code(feed.href), note: feedFormat(feed.type) }
+    })
+    return html`<astro-metadata-table .rows=${rows}></astro-metadata-table>`
+  }
+
+  render() {
+    const data = this.data
+    const og = data.openGraph
+    const image = findMeta(og, "og:image")
+    const width = findMeta(og, "og:image:width")
+    const height = findMeta(og, "og:image:height")
+
+    return html`
+      ${this.renderStatus()}
+
+      <astro-metadata-section heading="General">
+        <astro-metadata-table
+          .rows=${[
+            lengthRow("Title", "title", data.title, LIMITS.title),
+            lengthRow("Description", "description", data.description, LIMITS.description),
+            { label: "Canonical", key: "canonical", value: data.canonical },
+            { label: "Robots", key: "robots", value: code(data.robots ?? "index, follow") },
+            { label: "Language", key: "lang", value: code(data.lang) },
+            {
+              label: "Theme color",
+              key: "theme-color",
+              value:
+                data.themeColors.length > 0
+                  ? html`${data.themeColors.map((theme) => {
+                      return html`<astro-metadata-color-swatch color=${theme.color}>
+                      </astro-metadata-color-swatch>`
+                    })}`
+                  : undefined,
+            },
+            this.faviconRow(),
+          ]}
+        ></astro-metadata-table>
+      </astro-metadata-section>
+
+      <astro-metadata-section heading="Social">
+        <astro-metadata-image class="image" .src=${image}></astro-metadata-image>
+        <h3 class="subheading">Open Graph</h3>
+        <astro-metadata-table
+          .rows=${[
+            tagRow("Title", findMeta(og, "og:title"), "og:title"),
+            tagRow("Description", findMeta(og, "og:description"), "og:description"),
+            tagRow("Type", code(findMeta(og, "og:type")), "og:type"),
+            tagRow("Site name", findMeta(og, "og:site_name"), "og:site_name"),
+            tagRow("Image", image, "og:image"),
+            tagRow(
+              "Image size",
+              width && height ? `${width} × ${height}` : undefined,
+              "og:image:width"
+            ),
+            tagRow("Image alt", findMeta(og, "og:image:alt"), "og:image:alt"),
+          ]}
+        ></astro-metadata-table>
+        <h3 class="subheading">Twitter (X)</h3>
+        <astro-metadata-table .rows=${this.twitterRows()}></astro-metadata-table>
+      </astro-metadata-section>
+
+      <astro-metadata-section heading="Locales" ?empty=${data.hreflang.length === 0}
+        >${this.renderLocales()}</astro-metadata-section
+      >
+
+      <astro-metadata-section heading="Structured data" ?empty=${data.schemas.length === 0}>
+        ${schemaBlocks(data.schemas)}
+      </astro-metadata-section>
+
+      <astro-metadata-section heading="Web app manifest" ?empty=${!data.manifest}>
+        ${manifestBlock(data.manifest)}
+      </astro-metadata-section>
+
+      <astro-metadata-section heading="Feeds" ?empty=${data.feeds.length === 0}
+        >${this.renderFeeds()}</astro-metadata-section
+      >
+    `
+  }
+}
+
+define("astro-metadata-overview", OverviewView)