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

package/src/toolbar/views/previews/discord.css

@@ -0,0 +1,70 @@
+/* Discord: an embed in a message, 432 px wide with a large image, else 520 px */
+.discord {
+  width: 100%;
+  max-width: 552px;
+  padding: 16px;
+  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  border-radius: 8px;
+  background: #313338;
+}
+
+.discord .embed {
+  display: flex;
+  gap: 16px;
+  width: fit-content;
+  max-width: 520px;
+  padding: 8px 16px 16px 12px;
+  border-left: 4px solid;
+  border-radius: 4px;
+  background: #2b2d31;
+
+  &.large {
+    max-width: 432px;
+  }
+
+  .body {
+    display: grid;
+    gap: 8px;
+    min-width: 0;
+    padding-top: 8px;
+  }
+
+  .site {
+    font-size: 12px;
+    line-height: 16px;
+    color: #dbdee1;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    color: #00a8fc;
+  }
+
+  .text {
+    font-size: 14px;
+    line-height: 18px;
+    color: #dbdee1;
+    white-space: pre-line;
+  }
+
+  /* A large image: under the text, at most 400 × 300 px */
+  .image {
+    width: 100%;
+    max-width: 400px;
+    max-height: 300px;
+    aspect-ratio: 1.91 / 1;
+    margin-top: 8px;
+    border-radius: 4px;
+  }
+
+  /* A small image: on the right */
+  .thumbnail {
+    flex: none;
+    width: 80px;
+    height: 80px;
+    margin-top: 8px;
+    border-radius: 3px;
+  }
+}

package/src/toolbar/views/previews/discord.ts

@@ -0,0 +1,60 @@
+import { html, nothing, unsafeCSS } from "lit"
+import { styleMap } from "lit/directives/style-map.js"
+
+import "../../ui/image/image.ts"
+
+import styles from "./discord.css?inline"
+import { truncate } from "./page.ts"
+import type { Platform } from "./platform.ts"
+
+// The lengths that Discord shows
+const TITLE_LENGTH = 256
+const DESCRIPTION_LENGTH = 350
+
+// The border color without a theme-color
+const DEFAULT_BORDER = "#1e1f22"
+
+/**
+ * A link embed in a message, in dark mode.
+ *
+ * - The color of the left border is the `theme-color`.
+ * - Uses `og:site_name`, `og:title`, `og:description` and `og:image`.
+ * - `twitter:card` with `summary_large_image` shows a large image under the text. Else the image is small, on the right.
+ * - Discord cuts the title at 256 characters and the description at 350.
+ */
+export const discord: Platform = {
+  name: "Discord",
+  styles: unsafeCSS(styles),
+  render(page) {
+    const large = page.twitter.card === "summary_large_image"
+    const image = page.og.image
+    const border = page.themeColor ?? DEFAULT_BORDER
+    // The description keeps its line breaks, so it must have no spaces around it
+    const text = truncate(page.og.description ?? page.description, DESCRIPTION_LENGTH)
+
+    return html`
+      <div class="discord">
+        <div
+          class="embed ${large ? "large" : "small"}"
+          style=${styleMap({ borderLeftColor: border })}
+        >
+          <div class="body">
+            ${page.og.siteName ? html`<div class="site">${page.og.siteName}</div>` : nothing}
+            <div class="title">${truncate(page.og.title ?? page.title, TITLE_LENGTH)}</div>
+            <div class="text">${text}</div>
+            ${
+              large && image
+                ? html`<astro-metadata-image class="image" .src=${image}></astro-metadata-image>`
+                : nothing
+            }
+          </div>
+          ${
+            !large && image
+              ? html`<astro-metadata-image class="thumbnail" .src=${image}></astro-metadata-image>`
+              : nothing
+          }
+        </div>
+      </div>
+    `
+  },
+}

package/src/toolbar/views/previews/facebook.css

@@ -0,0 +1,65 @@
+/* Facebook: a link preview in a post, 500 px wide */
+.facebook {
+  width: 100%;
+  max-width: 500px;
+  overflow: hidden;
+  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
+  border-radius: 8px;
+  background: #242526;
+
+  &.large .image {
+    width: 100%;
+    aspect-ratio: 1.91 / 1;
+  }
+
+  /* A small image: a square on the left of the text */
+  &.small {
+    display: flex;
+
+    .image {
+      flex: none;
+      width: 140px;
+      height: 140px;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-width: 0;
+    }
+  }
+
+  .body {
+    padding: 10px 12px;
+    background: #3a3b3c;
+  }
+
+  .host {
+    font-size: 13px;
+    line-height: 16px;
+    color: #b0b3b8;
+    text-transform: uppercase;
+  }
+
+  .title {
+    display: -webkit-box;
+    overflow: hidden;
+    margin: 3px 0 2px;
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 20px;
+    color: #e4e6eb;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .text {
+    overflow: hidden;
+    font-size: 15px;
+    line-height: 20px;
+    color: #b0b3b8;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/toolbar/views/previews/facebook.ts

@@ -0,0 +1,36 @@
+import { html, unsafeCSS } from "lit"
+
+import "../../ui/image/image.ts"
+
+import styles from "./facebook.css?inline"
+import type { Platform } from "./platform.ts"
+
+// An image of this width or larger shows large. A smaller image shows as a small square.
+const LARGE_WIDTH = 600
+
+/**
+ * A link preview in a post in dark mode.
+ *
+ * - Uses `og:title`, `og:description` and `og:image`, or else the `<title>` and the description.
+ * - An image of 600 × 315 px or larger shows large at 1.91:1. A smaller image shows as a small square.
+ * - An image smaller than 200 × 200 px does not show.
+ * - The title shows on two lines at most, and the description on one line.
+ */
+export const facebook: Platform = {
+  name: "Facebook",
+  styles: unsafeCSS(styles),
+  render(page) {
+    const width = page.og.imageWidth
+    const small = width !== undefined && width < LARGE_WIDTH
+    return html`
+      <div class="facebook ${small ? "small" : "large"}">
+        <astro-metadata-image class="image" .src=${page.og.image}></astro-metadata-image>
+        <div class="body">
+          <div class="host">${page.url.host}</div>
+          <div class="title">${page.og.title ?? page.title}</div>
+          <div class="text">${page.og.description ?? page.description}</div>
+        </div>
+      </div>
+    `
+  },
+}

package/src/toolbar/views/previews/google.css

@@ -0,0 +1,75 @@
+/* Google: a desktop search result, 600 px wide */
+.google {
+  width: 100%;
+  max-width: 600px;
+  padding: 16px;
+  font-family: Arial, sans-serif;
+  border-radius: 8px;
+  background: #1f1f1f;
+
+  .site {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 4px;
+  }
+
+  .favicon {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid #3c4043;
+    border-radius: 50%;
+    background: #303134;
+
+    img {
+      width: 18px;
+      height: 18px;
+      object-fit: contain;
+    }
+  }
+
+  .source {
+    min-width: 0;
+  }
+
+  .name {
+    font-size: 14px;
+    line-height: 20px;
+    color: #dadce0;
+  }
+
+  .url {
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 18px;
+    color: #bdc1c6;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* One line: the title is already cut at 600 px */
+  .title {
+    overflow: hidden;
+    padding-top: 5px;
+    margin-bottom: 3px;
+    font-size: 20px;
+    line-height: 26px;
+    color: #99c3ff;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Two lines */
+  .text {
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 22px;
+    color: #bdc1c6;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}

package/src/toolbar/views/previews/google.ts

@@ -0,0 +1,36 @@
+import { html, nothing, unsafeCSS } from "lit"
+
+import styles from "./google.css?inline"
+import { truncate, truncateWidth } from "./page.ts"
+import type { Platform } from "./platform.ts"
+
+/**
+ * A desktop search result in dark mode.
+ *
+ * - The title is the `<title>`. Google cuts it at about 600 px of text.
+ * - The description is the meta `description`. Google cuts it at about 160 characters.
+ * - The site name is `og:site_name`, or else the domain.
+ * - Google can change the title and the description for a search.
+ */
+export const google: Platform = {
+  name: "Google",
+  styles: unsafeCSS(styles),
+  render(page) {
+    const path = page.url.pathname.split("/").filter(Boolean)
+    return html`
+      <div class="google">
+        <div class="site">
+          <span class="favicon">
+            ${page.favicon ? html`<img src=${page.favicon} alt="" />` : nothing}
+          </span>
+          <div class="source">
+            <div class="name">${page.og.siteName ?? page.url.host}</div>
+            <div class="url">${[page.url.origin, ...path].join(" › ")}</div>
+          </div>
+        </div>
+        <div class="title">${truncateWidth(page.title, 600, "20px Arial")}</div>
+        <div class="text">${truncate(page.description, 160, " ...")}</div>
+      </div>
+    `
+  },
+}

package/src/toolbar/views/previews/linkedin.css

@@ -0,0 +1,58 @@
+/* LinkedIn: a link preview in a post, 552 px wide */
+.linkedin {
+  width: 100%;
+  max-width: 552px;
+  overflow: hidden;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  border-radius: 8px;
+  background: #1b1f23;
+
+  &.large .image {
+    width: 100%;
+    aspect-ratio: 1.91 / 1;
+  }
+
+  /* A small image: on the left of the text */
+  &.small {
+    display: flex;
+    align-items: center;
+
+    .image {
+      flex: none;
+      width: 128px;
+      height: 72px;
+    }
+
+    .body {
+      flex: 1;
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  .body {
+    min-width: 0;
+    padding: 8px 12px;
+    background: #38434f;
+  }
+
+  .title {
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    color: rgba(255, 255, 255, 0.9);
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .host {
+    margin-top: 4px;
+    font-size: 12px;
+    line-height: 16px;
+    color: rgba(255, 255, 255, 0.6);
+  }
+}

package/src/toolbar/views/previews/linkedin.ts

@@ -0,0 +1,34 @@
+import { html, unsafeCSS } from "lit"
+
+import "../../ui/image/image.ts"
+
+import styles from "./linkedin.css?inline"
+import type { Platform } from "./platform.ts"
+
+// An image narrower than this shows as a small image on the left
+const LARGE_WIDTH = 401
+
+/**
+ * A link preview in a post in dark mode.
+ *
+ * - Uses `og:title` and `og:image`, or else the `<title>`. LinkedIn does not show the description.
+ * - An image narrower than 401 px shows as a small image on the left.
+ * - The title shows on two lines at most.
+ */
+export const linkedin: Platform = {
+  name: "LinkedIn",
+  styles: unsafeCSS(styles),
+  render(page) {
+    const width = page.og.imageWidth
+    const small = width !== undefined && width < LARGE_WIDTH
+    return html`
+      <div class="linkedin ${small ? "small" : "large"}">
+        <astro-metadata-image class="image" .src=${page.og.image}></astro-metadata-image>
+        <div class="body">
+          <div class="title">${page.og.title ?? page.title}</div>
+          <div class="host">${page.url.host}</div>
+        </div>
+      </div>
+    `
+  },
+}

package/src/toolbar/views/previews/page.ts

@@ -0,0 +1,129 @@
+import { findMeta } from "../../data.ts"
+import type { PageMetadata } from "../../data.ts"
+
+/**
+ * The values of the page that the platforms read for a link preview. Each platform
+ * picks its own values from these, with its own fallbacks.
+ */
+export type SharedPage = {
+  /** The URL of the page: the canonical URL, or the current URL. */
+  url: URL
+  /** The text of the `<title>` tag. */
+  title?: string
+  /** The meta description. */
+  description?: string
+  og: {
+    title?: string
+    description?: string
+    siteName?: string
+    image?: string
+    imageWidth?: number
+    imageHeight?: number
+  }
+  twitter: {
+    card?: string
+    title?: string
+    description?: string
+    image?: string
+  }
+  /** The first `theme-color` of the page. */
+  themeColor?: string
+  /** The favicon: the SVG, or else the largest icon. */
+  favicon?: string
+}
+
+/**
+ * Returns a number from a meta value, or undefined.
+ */
+function toNumber(value: string | undefined): number | undefined {
+  const number = Number.parseInt(value ?? "", 10)
+  return Number.isNaN(number) ? undefined : number
+}
+
+/**
+ * Returns the favicon: the SVG, or else the largest icon.
+ */
+function favicon(data: PageMetadata): string | undefined {
+  const icons = data.icons.filter((icon) => {
+    return icon.rel === "icon"
+  })
+  const svg = icons.find((icon) => {
+    return icon.type === "image/svg+xml"
+  })
+  const largest = [...icons].sort((a, b) => {
+    return (toNumber(b.sizes) ?? 0) - (toNumber(a.sizes) ?? 0)
+  })[0]
+  return (svg ?? largest)?.href
+}
+
+/**
+ * Reads the values of the page that the platforms use.
+ */
+export function sharedPage(data: PageMetadata): SharedPage {
+  const og = data.openGraph
+  const twitter = data.twitter
+  return {
+    url: new URL(data.canonical ?? location.href, location.href),
+    title: data.title,
+    description: data.description,
+    og: {
+      title: findMeta(og, "og:title"),
+      description: findMeta(og, "og:description"),
+      siteName: findMeta(og, "og:site_name"),
+      image: findMeta(og, "og:image"),
+      imageWidth: toNumber(findMeta(og, "og:image:width")),
+      imageHeight: toNumber(findMeta(og, "og:image:height")),
+    },
+    twitter: {
+      card: findMeta(twitter, "twitter:card"),
+      title: findMeta(twitter, "twitter:title"),
+      description: findMeta(twitter, "twitter:description"),
+      image: findMeta(twitter, "twitter:image"),
+    },
+    themeColor: data.themeColors[0]?.color,
+    favicon: favicon(data),
+  }
+}
+
+/**
+ * Cuts a text after a number of characters, at the end of a word, and adds an ellipsis.
+ */
+export function truncate(text: string | undefined, max: number, ellipsis = "…"): string {
+  if (!text || text.length <= max) return text ?? ""
+
+  const cut = text.slice(0, max - ellipsis.length)
+  const space = cut.lastIndexOf(" ")
+  return `${(space > max * 0.6 ? cut.slice(0, space) : cut).trimEnd()}${ellipsis}`
+}
+
+let canvas: HTMLCanvasElement | undefined
+
+/**
+ * Cuts a text at a width in pixels, the same as a platform that measures the text,
+ * e.g. Google cuts a title at about 600 px of 20 px Arial.
+ */
+export function truncateWidth(
+  text: string | undefined,
+  width: number,
+  font: string,
+  ellipsis = "..."
+): string {
+  if (!text) return ""
+
+  canvas ??= document.createElement("canvas")
+  const context = canvas.getContext("2d")
+  if (!context) return text
+  context.font = font
+  if (context.measureText(text).width <= width) return text
+
+  // The longest start of the text that fits with the ellipsis
+  let low = 0
+  let high = text.length
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2)
+    const fits = context.measureText(text.slice(0, middle) + ellipsis).width <= width
+    if (fits) low = middle
+    else high = middle - 1
+  }
+  return `${text.slice(0, low).trimEnd()}${ellipsis}`
+}

package/src/toolbar/views/previews/platform.ts

@@ -0,0 +1,14 @@
+import type { CSSResult, TemplateResult } from "lit"
+
+import type { SharedPage } from "./page.ts"
+
+/**
+ * A platform that shows a link preview, e.g. Google or Discord. To add a platform,
+ * add a module with a `Platform` object, and add it to the list in `previews-view.ts`.
+ */
+export type Platform = {
+  name: string
+  /** The CSS of the preview. The colors are the dark mode colors of the platform. */
+  styles: CSSResult
+  render(page: SharedPage): TemplateResult
+}

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

@@ -0,0 +1,37 @@
+/*
+ * The previews copy the dark mode of each platform: their own fonts, sizes and colors.
+ * These are the only colors outside the Tailwind scales, because the previews must
+ * look like the platform, not like the panel.
+ */
+
+/* The preview at the center of a dotted background */
+.stage {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-600) var(--space-400);
+  border: 1px solid var(--zinc-800);
+  border-radius: var(--radius);
+  background-color: var(--zinc-950);
+  background-image: radial-gradient(var(--zinc-700) 1px, transparent 1px);
+  background-size: 12px 12px;
+
+  /* A preview has its own box-sizing, the same as the platform */
+  * {
+    box-sizing: border-box;
+  }
+}
+
+/* A missing image, or an image that does not load */
+.stage .image[missing],
+.stage .thumbnail[missing] {
+  font-size: 13px;
+  color: #71767b;
+  background: #16181c;
+}
+
+/* A message instead of the preview, e.g. without twitter:card */
+.notice {
+  margin: 0;
+  color: var(--zinc-400);
+  text-align: center;
+}

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

@@ -0,0 +1,52 @@
+import { html, LitElement, unsafeCSS } from "lit"
+
+import type { PageMetadata } from "../../data.ts"
+import { define } from "../../define.ts"
+import shared from "../../styles/shared.css?inline"
+
+import "../../ui/section/section.ts"
+
+import { discord } from "./discord.ts"
+import { facebook } from "./facebook.ts"
+import { google } from "./google.ts"
+import { linkedin } from "./linkedin.ts"
+import { sharedPage } from "./page.ts"
+import type { Platform } from "./platform.ts"
+import styles from "./previews-view.css?inline"
+import { slack } from "./slack.ts"
+import { twitter } from "./twitter.ts"
+import { whatsapp } from "./whatsapp.ts"
+
+// The platforms in the order of the sections
+const PLATFORMS: Platform[] = [google, twitter, facebook, linkedin, whatsapp, discord, slack]
+
+/**
+ * The page as each platform shows its link: a search result, social cards and chat previews.
+ * The previews copy the dark mode, the sizes and the rules of each platform. The platforms
+ * render the real previews on their own servers, so a preview can differ a little.
+ */
+export class PreviewsView extends LitElement {
+  static properties = { data: { attribute: false } }
+  static styles = [
+    unsafeCSS(shared),
+    unsafeCSS(styles),
+    ...PLATFORMS.map((platform) => {
+      return platform.styles
+    }),
+  ]
+
+  declare data: PageMetadata
+
+  render() {
+    const page = sharedPage(this.data)
+    return PLATFORMS.map((platform) => {
+      return html`
+        <astro-metadata-section heading=${platform.name}>
+          <div class="stage">${platform.render(page)}</div>
+        </astro-metadata-section>
+      `
+    })
+  }
+}
+
+define("astro-metadata-previews", PreviewsView)