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

package/src/toolbar/ui/alert/alert.css

@@ -0,0 +1,126 @@
+/*
+ * The style of the Supabase alert: a dark tinted background and border, and the icon
+ * in a filled square of the level color. The text keeps the normal text colors.
+ */
+
+:host {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: flex-start;
+  gap: var(--space-200);
+  background: var(--background);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  font-size: var(--font-size-small);
+  color: var(--color);
+  padding: var(--space-300) var(--space-200);
+}
+
+:host([level="success"]) {
+  --background: color-mix(in srgb, var(--green-350) 15%, transparent);
+  --icon: var(--green-250);
+  --text: var(--green-50);
+  --border: var(--green-350);
+}
+
+:host([level="info"]) {
+  --background: color-mix(in srgb, var(--blue-350) 15%, transparent);
+  --icon: var(--blue-250);
+  --text: var(--blue-50);
+  --border: var(--blue-350);
+}
+
+:host([level="warning"]) {
+  --background: color-mix(in srgb, var(--yellow-350) 10%, transparent);
+  --icon: var(--yellow-250);
+  --text: var(--yellow-150);
+  --border: var(--yellow-500);
+}
+
+:host([level="error"]) {
+  --background: var(--red-950);
+  --icon: var(--red-250);
+  --text: var(--red-150);
+  --border: var(--red-500);
+}
+
+.icon {
+  --icon-size: 18px;
+  color: var(--icon);
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--text);
+  font-size: var(--font-size-small);
+  font-weight: 400;
+  height: 100%;
+
+  /* Inline code in the alert uses the colors of the level */
+  --code-color: var(--text);
+  --code-border: color-mix(in srgb, var(--border) 40%, transparent);
+  --code-background: color-mix(in srgb, var(--border) 20%, transparent);
+
+  .heading {
+    font-weight: 500;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+/* The list of items, each with a dot in the color of its level */
+.items {
+  display: grid;
+  gap: var(--space-50);
+  margin: 0.5em 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item {
+  display: flex;
+  gap: var(--space-200);
+
+  &::before {
+    flex: none;
+    width: 6px;
+    height: 6px;
+    margin-top: 0.6em;
+    content: "";
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  &.error::before {
+    background: var(--red-400);
+  }
+
+  &.warning::before {
+    background: var(--yellow-400);
+  }
+
+  &.info::before {
+    background: var(--blue-400);
+  }
+}
+
+/* An item with a target: a click shows the row of the problem */
+.target {
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  border: 0;
+  background: none;
+
+  &:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+}

package/src/toolbar/ui/alert/alert.ts

@@ -0,0 +1,102 @@
+import { html, LitElement, nothing, unsafeCSS } from "lit"
+import type { TemplateResult } from "lit"
+
+import { define } from "../../define.ts"
+import type { Level } from "../badge/badge.ts"
+import type { IconName } from "../icon/icon.ts"
+import styles from "./alert.css?inline"
+
+import "../icon/icon.ts"
+
+const ICONS: Record<Level, IconName> = {
+  success: "seal-check",
+  info: "seal-question",
+  warning: "warning",
+  error: "warning-circle",
+}
+
+/** An item in the list of an alert, e.g. one problem of the page. */
+export type AlertItem = {
+  /** The level of the item gives the color of its dot. */
+  level?: Level
+  content: string | TemplateResult
+  /** Makes the item a button: a click fires a `select` event with this value. */
+  target?: string
+}
+
+/**
+ * A message with a level: a heading, an optional list of items, and optional content under it.
+ * A click on an item with a `target` fires a `select` event with the target as its detail.
+ *
+ * @example
+ * <astro-metadata-alert level="warning" heading="2 warnings" .items=${items}>
+ * </astro-metadata-alert>
+ */
+export class Alert extends LitElement {
+  static properties = {
+    level: { reflect: true },
+    heading: {},
+    items: { attribute: false },
+  }
+
+  static styles = unsafeCSS(styles)
+
+  declare level: Level
+  declare heading: string
+  declare items: AlertItem[]
+
+  constructor() {
+    super()
+    this.level = "info"
+    this.heading = ""
+    this.items = []
+  }
+
+  select(target: string): void {
+    this.dispatchEvent(new CustomEvent("select", { detail: target }))
+  }
+
+  renderContent(item: AlertItem) {
+    if (!item.target) return html`<span>${item.content}</span>`
+
+    const target = item.target
+    return html`
+      <button
+        type="button"
+        class="target"
+        @click=${() => {
+          this.select(target)
+        }}
+      >
+        ${item.content}
+      </button>
+    `
+  }
+
+  renderItems() {
+    if (this.items.length === 0) return nothing
+
+    return html`
+      <ul class="items">
+        ${this.items.map((item) => {
+          return html`<li class="item ${item.level ?? ""}">${this.renderContent(item)}</li>`
+        })}
+      </ul>
+    `
+  }
+
+  render() {
+    return html`
+      <div class="icon">
+        <astro-metadata-icon name=${ICONS[this.level]}></astro-metadata-icon>
+      </div>
+      <div class="content">
+        <p class="heading">${this.heading}</p>
+        ${this.renderItems()}
+        <slot></slot>
+      </div>
+    `
+  }
+}
+
+define("astro-metadata-alert", Alert)

package/src/toolbar/ui/badge/badge.css

@@ -0,0 +1,41 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 20px;
+  min-width: 20px;
+  padding: 0 var(--space-150);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-tiny);
+  line-height: 1;
+  color: var(--zinc-300);
+  border: 1px solid var(--zinc-800);
+  border-radius: 999px;
+  background: var(--zinc-900);
+}
+
+/* The levels use the same colors as the alert */
+:host([level="error"]) {
+  color: var(--red-150);
+  border-color: var(--red-500);
+  background: var(--red-950);
+}
+
+:host([level="info"]) {
+  color: var(--blue-50);
+  border-color: var(--blue-350);
+  background: color-mix(in srgb, var(--blue-350) 15%, transparent);
+}
+
+:host([level="warning"]) {
+  color: var(--yellow-150);
+  border-color: var(--yellow-500);
+  background: color-mix(in srgb, var(--yellow-350) 10%, transparent);
+}
+
+:host([level="success"]) {
+  color: var(--green-50);
+  border-color: var(--green-350);
+  background: color-mix(in srgb, var(--green-350) 15%, transparent);
+}

package/src/toolbar/ui/badge/badge.ts

@@ -0,0 +1,24 @@
+import { html, LitElement, unsafeCSS } from "lit"
+
+import { define } from "../../define.ts"
+import styles from "./badge.css?inline"
+
+export type Level = "success" | "info" | "warning" | "error"
+
+/**
+ * A small rounded label, e.g. the number of problems. `level` sets the colors.
+ *
+ * @example <astro-metadata-badge level="warning">2</astro-metadata-badge>
+ */
+export class Badge extends LitElement {
+  static properties = { level: { reflect: true } }
+  static styles = unsafeCSS(styles)
+
+  declare level: Level | undefined
+
+  render() {
+    return html`<slot></slot>`
+  }
+}
+
+define("astro-metadata-badge", Badge)

package/src/toolbar/ui/code-block/code-block.css

@@ -0,0 +1,90 @@
+:host {
+  display: block;
+}
+
+.block {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--zinc-800);
+  border-radius: var(--radius);
+  background: var(--zinc-950);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-100) var(--space-100) var(--space-100) var(--space-300);
+  font-size: var(--font-size-small);
+  color: var(--zinc-400);
+  border-bottom: 1px solid var(--zinc-800);
+}
+
+button {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: var(--radius-small);
+
+  &:hover {
+    color: var(--zinc-100);
+    background: var(--zinc-800);
+  }
+}
+
+pre {
+  margin: 0;
+  padding: var(--space-300);
+  overflow: auto;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-small);
+  line-height: 1.6;
+  counter-reset: line;
+}
+
+/* One block for each line: CSS counters number the lines, so a copy has no numbers */
+.line {
+  display: block;
+  min-height: 1lh;
+
+  &::before {
+    display: inline-block;
+    width: 2.5em;
+    margin-right: var(--space-300);
+    color: var(--zinc-400);
+    text-align: right;
+    content: counter(line);
+    counter-increment: line;
+    user-select: none;
+  }
+}
+
+.token {
+  &.key,
+  &.attribute {
+    color: var(--blue-300);
+  }
+
+  &.string,
+  &.value {
+    color: var(--green-300);
+  }
+
+  &.number,
+  &.keyword {
+    color: var(--red-300);
+  }
+
+  &.tag {
+    color: var(--orange-300);
+  }
+
+  &.punctuation {
+    color: var(--zinc-400);
+  }
+}

package/src/toolbar/ui/code-block/code-block.ts

@@ -0,0 +1,68 @@
+import { html, LitElement, unsafeCSS } from "lit"
+import { unsafeHTML } from "lit/directives/unsafe-html.js"
+
+import { define } from "../../define.ts"
+import { highlight } from "../../highlight.ts"
+import type { Language } from "../../highlight.ts"
+import styles from "./code-block.css?inline"
+
+import "../icon/icon.ts"
+
+/**
+ * A code block with line numbers, highlighting and a copy button.
+ *
+ * @example <astro-metadata-code .code=${json} language="json" label="WebSite"></astro-metadata-code>
+ */
+export class CodeBlock extends LitElement {
+  static properties = {
+    code: {},
+    language: {},
+    label: {},
+    copied: { state: true },
+  }
+
+  static styles = unsafeCSS(styles)
+
+  declare code: string
+  declare language: Language
+  declare label: string | undefined
+  declare copied: boolean
+
+  constructor() {
+    super()
+    this.code = ""
+    this.language = "html"
+    this.label = undefined
+    this.copied = false
+  }
+
+  async copy(): Promise<void> {
+    await navigator.clipboard.writeText(this.code)
+    this.copied = true
+    setTimeout(() => {
+      this.copied = false
+    }, 1500)
+  }
+
+  render() {
+    const lines = highlight(this.code, this.language).split("\n")
+    const code = lines.map((line) => {
+      return html`<span class="line">${unsafeHTML(line)}</span>`
+    })
+
+    // No spaces inside <pre>: the template text would show in the code
+    return html`
+      <div class="block">
+        <div class="toolbar">
+          <span>${this.label ?? this.language.toUpperCase()}</span>
+          <button @click=${this.copy} aria-label="Copy the code">
+            <astro-metadata-icon name=${this.copied ? "check" : "copy"}></astro-metadata-icon>
+          </button>
+        </div>
+        <pre><code>${code}</code></pre>
+      </div>
+    `
+  }
+}
+
+define("astro-metadata-code", CodeBlock)

package/src/toolbar/ui/color-swatch/color-swatch.css

@@ -0,0 +1,15 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-100);
+  margin-right: var(--space-300);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-small);
+}
+
+.color {
+  width: 12px;
+  height: 12px;
+  border: 1px solid var(--zinc-700);
+  border-radius: 3px;
+}

package/src/toolbar/ui/color-swatch/color-swatch.ts

@@ -0,0 +1,31 @@
+import { html, LitElement, unsafeCSS } from "lit"
+import { styleMap } from "lit/directives/style-map.js"
+
+import { define } from "../../define.ts"
+import styles from "./color-swatch.css?inline"
+
+/**
+ * A small square of a color, and the color value.
+ *
+ * @example <astro-metadata-color-swatch color="#6366f1"></astro-metadata-color-swatch>
+ */
+export class ColorSwatch extends LitElement {
+  static properties = { color: {} }
+  static styles = unsafeCSS(styles)
+
+  declare color: string
+
+  constructor() {
+    super()
+    this.color = ""
+  }
+
+  render() {
+    return html`
+      <span class="color" style=${styleMap({ background: this.color })}></span>
+      ${this.color}
+    `
+  }
+}
+
+define("astro-metadata-color-swatch", ColorSwatch)

package/src/toolbar/ui/icon/icon.css

@@ -0,0 +1,11 @@
+:host {
+  display: inline-flex;
+  flex: none;
+  width: var(--icon-size, 16px);
+  height: var(--icon-size, 16px);
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+}

package/src/toolbar/ui/icon/icon.ts

@@ -0,0 +1,46 @@
+import { html, LitElement, nothing, unsafeCSS } from "lit"
+import { unsafeSVG } from "lit/directives/unsafe-svg.js"
+
+import caretRight from "../../../assets/icons/caret-right.svg?raw"
+import check from "../../../assets/icons/check.svg?raw"
+import copy from "../../../assets/icons/copy.svg?raw"
+import sealCheck from "../../../assets/icons/seal-check-duotone.svg?raw"
+import sealQuestion from "../../../assets/icons/seal-question-duotone.svg?raw"
+import warningCircle from "../../../assets/icons/warning-circle-duotone.svg?raw"
+import warning from "../../../assets/icons/warning-duotone.svg?raw"
+import close from "../../../assets/icons/x.svg?raw"
+import { define } from "../../define.ts"
+import styles from "./icon.css?inline"
+
+// All icons of the panel. Add a new icon to src/assets/icons/ and to this list.
+const ICONS = {
+  "caret-right": caretRight,
+  check,
+  close,
+  copy,
+  "seal-check": sealCheck,
+  "seal-question": sealQuestion,
+  warning,
+  "warning-circle": warningCircle,
+}
+
+export type IconName = keyof typeof ICONS
+
+/**
+ * An icon from `src/assets/icons/`. The color is `currentColor`, and `--icon-size` sets the size.
+ *
+ * @example <astro-metadata-icon name="close"></astro-metadata-icon>
+ */
+export class Icon extends LitElement {
+  static properties = { name: {} }
+  static styles = unsafeCSS(styles)
+
+  declare name: IconName | undefined
+
+  render() {
+    const svg = this.name ? ICONS[this.name] : undefined
+    return svg ? html`${unsafeSVG(svg)}` : nothing
+  }
+}
+
+define("astro-metadata-icon", Icon)

package/src/toolbar/ui/image/image.css

@@ -0,0 +1,18 @@
+/* The view sets the size, the radius and the colors of the image */
+:host {
+  display: block;
+  overflow: hidden;
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.message {
+  display: grid;
+  place-items: center;
+  height: 100%;
+}

package/src/toolbar/ui/image/image.ts

@@ -0,0 +1,58 @@
+import { html, LitElement, unsafeCSS } from "lit"
+
+import { define } from "../../define.ts"
+import styles from "./image.css?inline"
+
+/**
+ * An image that shows a message when it does not load. The social images use the `site`
+ * of the Astro config, so in dev they often do not exist yet: then the image loads
+ * from the dev server. The `missing` attribute shows when the image does not load.
+ *
+ * @example <astro-metadata-image src=${url}></astro-metadata-image>
+ */
+export class Image extends LitElement {
+  static properties = {
+    src: {},
+    missing: { type: Boolean, reflect: true },
+    current: { state: true },
+  }
+
+  static styles = unsafeCSS(styles)
+
+  declare src: string | undefined
+  declare missing: boolean
+  /** The URL that the image loads now: `src`, or the same path on the dev server. */
+  declare current: string | undefined
+
+  constructor() {
+    super()
+    this.src = undefined
+    this.missing = false
+    this.current = undefined
+  }
+
+  willUpdate(changed: Map<string, unknown>): void {
+    if (changed.has("src")) {
+      this.current = this.src
+      this.missing = !this.src
+    }
+  }
+
+  onError(): void {
+    const url = new URL(this.current ?? "", location.href)
+    if (url.origin !== location.origin) {
+      this.current = `${location.origin}${url.pathname}${url.search}`
+      return
+    }
+    this.missing = true
+  }
+
+  render() {
+    if (this.missing) {
+      return html`<span class="message">${this.src ? "The image does not load" : "No image"}</span>`
+    }
+    return html`<img src=${this.current ?? ""} alt="" @error=${this.onError} />`
+  }
+}
+
+define("astro-metadata-image", Image)

package/src/toolbar/ui/inline-code/inline-code.css

@@ -0,0 +1,16 @@
+/*
+ * The look of backticks in Markdown: a small monospace label on a zinc background.
+ * A parent can change the colors with --code-color, --code-border and --code-background,
+ * e.g. the alert uses the colors of its level.
+ */
+:host {
+  display: inline;
+  padding: 0 var(--space-100);
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  color: var(--code-color, var(--zinc-200));
+  white-space: nowrap;
+  border: 1px solid var(--code-border, var(--zinc-700));
+  border-radius: var(--radius-small);
+  background: var(--code-background, var(--zinc-800));
+}

package/src/toolbar/ui/inline-code/inline-code.ts

@@ -0,0 +1,41 @@
+import { html, LitElement, unsafeCSS } from "lit"
+
+import { define } from "../../define.ts"
+import styles from "./inline-code.css?inline"
+
+/**
+ * A code word in a text, e.g. a tag name or a value.
+ *
+ * @example <astro-metadata-inline-code>og:image</astro-metadata-inline-code>
+ */
+export class InlineCode extends LitElement {
+  static styles = unsafeCSS(styles)
+
+  render() {
+    return html`<slot></slot>`
+  }
+}
+
+define("astro-metadata-inline-code", InlineCode)
+
+/**
+ * Returns a text with each part between backticks as inline code.
+ *
+ * @example withCode("The `og:image` has no width.")
+ */
+export function withCode(text: string) {
+  const parts = text.split(/`([^`]+)`/)
+  return html`${parts.map((part, index) => {
+    // The odd parts are the parts between the backticks
+    return index % 2 === 1
+      ? html`<astro-metadata-inline-code>${part}</astro-metadata-inline-code>`
+      : part
+  })}`
+}
+
+/**
+ * Returns a value as inline code, or undefined for an empty value.
+ */
+export function code(value: string | undefined) {
+  return value ? html`<astro-metadata-inline-code>${value}</astro-metadata-inline-code>` : undefined
+}