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

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

@@ -0,0 +1,61 @@
+/* Slack: a link unfurl under a message */
+.slack {
+  width: 100%;
+  max-width: 520px;
+  padding: 16px;
+  font-family: Lato, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
+  border-radius: 8px;
+  background: #1a1d21;
+}
+
+.slack .unfurl {
+  display: flex;
+  gap: 12px;
+  padding-left: 12px;
+  border-left: 4px solid #35373b;
+
+  .body {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+    font-size: 15px;
+    line-height: 22px;
+    color: #d1d2d3;
+  }
+
+  .site {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 700;
+  }
+
+  .favicon {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    object-fit: contain;
+  }
+
+  .title {
+    font-weight: 700;
+    color: #1d9bd1;
+  }
+
+  /* A large image: under the text, at most 360 px wide */
+  .image {
+    width: 100%;
+    max-width: 360px;
+    aspect-ratio: 1.91 / 1;
+    margin-top: 8px;
+    border-radius: 8px;
+  }
+
+  /* A small image: on the right */
+  .thumbnail {
+    flex: none;
+    width: 72px;
+    height: 72px;
+    border-radius: 4px;
+  }
+}

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

@@ -0,0 +1,47 @@
+import { html, nothing, unsafeCSS } from "lit"
+
+import "../../ui/image/image.ts"
+
+import type { Platform } from "./platform.ts"
+import styles from "./slack.css?inline"
+
+/**
+ * A link unfurl in a message, in dark mode.
+ *
+ * - Uses `og:site_name` with the favicon, `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.
+ * - An image smaller than 60 × 60 px does not show.
+ */
+export const slack: Platform = {
+  name: "Slack",
+  styles: unsafeCSS(styles),
+  render(page) {
+    const large = page.twitter.card === "summary_large_image"
+    const image = page.og.image
+
+    return html`
+      <div class="slack">
+        <div class="unfurl">
+          <div class="body">
+            <div class="site">
+              ${page.favicon ? html`<img class="favicon" src=${page.favicon} alt="" />` : nothing}
+              ${page.og.siteName ?? page.url.host}
+            </div>
+            <div class="title">${page.og.title ?? page.title}</div>
+            <div class="text">${page.og.description ?? page.description}</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/twitter.css

@@ -0,0 +1,89 @@
+/* Twitter (X): a link card in a post, 506 px wide */
+.twitter {
+  width: 100%;
+  max-width: 506px;
+  padding: 12px;
+  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  border-radius: 8px;
+  background: #000000;
+
+  .from {
+    margin-top: 4px;
+    font-size: 13px;
+    line-height: 16px;
+    color: #71767b;
+  }
+}
+
+.twitter .large {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #2f3336;
+  border-radius: 16px;
+
+  .image {
+    width: 100%;
+    aspect-ratio: 1.91 / 1;
+  }
+
+  /* The title on the image: one line */
+  .overlay {
+    position: absolute;
+    bottom: 12px;
+    left: 12px;
+    max-width: calc(100% - 24px);
+    overflow: hidden;
+    padding: 0 4px;
+    font-size: 13px;
+    line-height: 20px;
+    color: #ffffff;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.77);
+  }
+}
+
+.twitter .small {
+  display: flex;
+  overflow: hidden;
+  border: 1px solid #2f3336;
+  border-radius: 16px;
+
+  .image {
+    flex: none;
+    width: 130px;
+    height: 130px;
+    border-right: 1px solid #2f3336;
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    min-width: 0;
+    padding: 12px;
+    font-size: 15px;
+    line-height: 20px;
+  }
+
+  .host {
+    color: #71767b;
+  }
+
+  .title {
+    overflow: hidden;
+    color: #e7e9ea;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .text {
+    display: -webkit-box;
+    overflow: hidden;
+    color: #71767b;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}

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

@@ -0,0 +1,57 @@
+import { html, unsafeCSS } from "lit"
+
+import "../../ui/image/image.ts"
+
+import { withCode } from "../../ui/inline-code/inline-code.ts"
+import type { Platform } from "./platform.ts"
+import styles from "./twitter.css?inline"
+
+/**
+ * A link card in a post in dark mode ("Lights out").
+ *
+ * - Twitter (X) shows a card only with `twitter:card`.
+ * - `summary_large_image` shows a large image, `summary` a small square image.
+ * - Uses `twitter:title`, `twitter:description` and `twitter:image`, or else the Open Graph values.
+ * - The large card shows only the title, on one line on the image, and the domain under it.
+ */
+export const twitter: Platform = {
+  name: "Twitter (X)",
+  styles: unsafeCSS(styles),
+  render(page) {
+    const card = page.twitter.card
+    if (!card) {
+      return html`<p class="notice">
+        ${withCode("Twitter (X) shows no card: the page has no `twitter:card`.")}
+      </p>`
+    }
+
+    const title = page.twitter.title ?? page.og.title ?? page.title
+    const text = page.twitter.description ?? page.og.description ?? page.description
+    const image = page.twitter.image ?? page.og.image
+
+    if (card === "summary_large_image") {
+      return html`
+        <div class="twitter">
+          <div class="large">
+            <astro-metadata-image class="image" .src=${image}></astro-metadata-image>
+            <span class="overlay">${title}</span>
+          </div>
+          <div class="from">From ${page.url.host}</div>
+        </div>
+      `
+    }
+
+    return html`
+      <div class="twitter">
+        <div class="small">
+          <astro-metadata-image class="image" .src=${image}></astro-metadata-image>
+          <div class="body">
+            <div class="host">${page.url.host}</div>
+            <div class="title">${title}</div>
+            <div class="text">${text}</div>
+          </div>
+        </div>
+      </div>
+    `
+  },
+}

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

@@ -0,0 +1,88 @@
+/* WhatsApp: a sent message with the link preview, at most 330 px wide */
+.whatsapp {
+  width: 100%;
+  max-width: 330px;
+  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+.whatsapp .bubble {
+  width: 100%;
+  padding: 4px;
+  border-radius: 8px;
+  background: #005c4b;
+}
+
+.whatsapp .preview {
+  overflow: hidden;
+  border-radius: 6px;
+  background: #025144;
+
+  &.large .image {
+    width: 100%;
+    aspect-ratio: 1.91 / 1;
+  }
+
+  .row {
+    display: flex;
+  }
+
+  /* A small image: a square on the left of the text */
+  &.small .image {
+    flex: none;
+    width: 82px;
+    height: 82px;
+  }
+
+  .body {
+    min-width: 0;
+    padding: 6px 10px 8px;
+  }
+
+  .title {
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 19px;
+    color: #e9edef;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .text {
+    display: -webkit-box;
+    overflow: hidden;
+    margin-top: 2px;
+    font-size: 13px;
+    line-height: 17px;
+    color: rgba(233, 237, 239, 0.7);
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .host {
+    margin-top: 4px;
+    font-size: 12px;
+    line-height: 16px;
+    color: rgba(233, 237, 239, 0.6);
+  }
+}
+
+/* The message text: the link, and the time */
+.whatsapp .message {
+  padding: 6px 6px 2px;
+  font-size: 14px;
+  line-height: 19px;
+
+  .link {
+    overflow-wrap: anywhere;
+    color: #53bdeb;
+  }
+
+  .time {
+    float: right;
+    margin: 6px 0 0 8px;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.6);
+  }
+}

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

@@ -0,0 +1,65 @@
+import { html, nothing, unsafeCSS } from "lit"
+
+import "../../ui/image/image.ts"
+
+import type { Platform } from "./platform.ts"
+import styles from "./whatsapp.css?inline"
+
+// The image sizes of WhatsApp: from 300 px a large image, from 100 px a small square
+const LARGE_WIDTH = 300
+const SMALL_WIDTH = 100
+// A large image can be at most 4 times as wide as it is high
+const MAX_RATIO = 4
+
+/**
+ * A sent message with a link preview, in dark mode.
+ *
+ * - Uses `og:title`, `og:description` and `og:image`, or else the `<title>` and the description.
+ * - An image of 300 px or wider, with a ratio up to 4:1, shows large. An image of 100–299 px shows as a small square. A smaller image does not show.
+ * - The image must be smaller than about 600 KB, and the URL must be absolute.
+ * - The title and the description show on two lines at most.
+ */
+export const whatsapp: Platform = {
+  name: "WhatsApp",
+  styles: unsafeCSS(styles),
+  render(page) {
+    const { image, imageWidth: width, imageHeight: height } = page.og
+    const ratio = width && height ? width / height : 1.91
+
+    let size: "large" | "small" | "none" = image ? "large" : "none"
+    if (image && width !== undefined) {
+      if (width < SMALL_WIDTH) size = "none"
+      else if (width < LARGE_WIDTH || ratio > MAX_RATIO) size = "small"
+    }
+
+    return html`
+      <div class="whatsapp">
+        <div class="bubble">
+          <div class="preview ${size}">
+            ${
+              size === "large"
+                ? html`<astro-metadata-image class="image" .src=${image}></astro-metadata-image>`
+                : nothing
+            }
+            <div class="row">
+              ${
+                size === "small"
+                  ? html`<astro-metadata-image class="image" .src=${image}></astro-metadata-image>`
+                  : nothing
+              }
+              <div class="body">
+                <div class="title">${page.og.title ?? page.title}</div>
+                <div class="text">${page.og.description ?? page.description}</div>
+                <div class="host">${page.url.host}</div>
+              </div>
+            </div>
+          </div>
+          <div class="message">
+            <span class="link">${page.url.href}</span>
+            <span class="time">12:00 ✓✓</span>
+          </div>
+        </div>
+      </div>
+    `
+  },
+}

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

@@ -0,0 +1,41 @@
+import { html, LitElement, unsafeCSS } from "lit"
+
+import type { PageMetadata } from "../data.ts"
+import shared from "../styles/shared.css?inline"
+
+import "../ui/code-block/code-block.ts"
+
+import { define } from "../define.ts"
+
+import "../ui/section/section.ts"
+
+import { manifestBlock, schemaBlocks } from "./code-blocks.ts"
+
+/**
+ * All metadata as raw code: the head tags, the JSON-LD scripts and the web app manifest.
+ */
+export class RawView extends LitElement {
+  static properties = { data: { attribute: false } }
+  static styles = unsafeCSS(shared)
+
+  declare data: PageMetadata
+
+  render() {
+    return html`
+      <astro-metadata-section heading="Head">
+        <astro-metadata-code .code=${this.data.source} language="html" label="HTML">
+        </astro-metadata-code>
+      </astro-metadata-section>
+
+      <astro-metadata-section heading="Structured data" ?empty=${this.data.schemas.length === 0}
+        >${schemaBlocks(this.data.schemas)}</astro-metadata-section
+      >
+
+      <astro-metadata-section heading="Web app manifest" ?empty=${!this.data.manifest}>
+        ${manifestBlock(this.data.manifest)}
+      </astro-metadata-section>
+    `
+  }
+}
+
+define("astro-metadata-raw", RawView)

package/index.ts

@@ -1,31 +0,0 @@
-export type { Props as CanonicalProps } from "./src/components/Canonical.astro"
-export { default as Canonical } from "./src/components/Canonical.astro"
-export type { Props as DescriptionProps } from "./src/components/Description.astro"
-export { default as Description } from "./src/components/Description.astro"
-export type { FaviconFile, Props as FaviconProps } from "./src/components/Favicon.astro"
-export { default as Favicon } from "./src/components/Favicon.astro"
-export type { Props as HeadProps } from "./src/components/Head.astro"
-export { default as Head } from "./src/components/Head.astro"
-export type { Props as KeywordsProps } from "./src/components/Keywords.astro"
-export { default as Keywords } from "./src/components/Keywords.astro"
-export type {
-  LanguageAlternate,
-  Props as LanguageAlternatesProps,
-} from "./src/components/LanguageAlternates.astro"
-export { default as LanguageAlternates } from "./src/components/LanguageAlternates.astro"
-export type {
-  OpenGraphAudio,
-  OpenGraphImage,
-  OpenGraphVideo,
-  Props as OpenGraphProps,
-} from "./src/components/OpenGraph.astro"
-export { default as OpenGraph } from "./src/components/OpenGraph.astro"
-export type { Props as RobotsProps } from "./src/components/Robots.astro"
-export { default as Robots } from "./src/components/Robots.astro"
-export type { Props as SchemaProps } from "./src/components/Schema.astro"
-export { default as Schema } from "./src/components/Schema.astro"
-export type { Props as TitleProps } from "./src/components/Title.astro"
-export { default as Title } from "./src/components/Title.astro"
-export type { Props as TwitterProps } from "./src/components/Twitter.astro"
-export { default as Twitter } from "./src/components/Twitter.astro"
-export { Metadata } from "./src/lib/metadata.ts"

package/src/components/Canonical.astro

@@ -1,11 +0,0 @@
----
-export type Props = {
-  value?: string
-}
-
-const { value } = Astro.props
-
-const canonical = value ?? Astro.url.href
----
-
-<link rel="canonical" href={canonical} />

package/src/components/Description.astro

@@ -1,9 +0,0 @@
----
-export type Props = {
-  value?: string
-}
-
-const { value } = Astro.props
----
-
-{value && <meta name="description" content={value} />}

package/src/components/Favicon.astro

@@ -1,96 +0,0 @@
----
-export type FaviconFile = {
-  path: string
-  size?: number
-  theme?: "light" | "dark"
-  apple?: boolean
-}
-
-export type Props = {
-  icons: FaviconFile[]
-  manifest?: string
-  sort?: boolean
-}
-
-const { icons, manifest, sort = true } = Astro.props
-
-/**
- * Returns the file extension of a favicon path in lowercase, without the
- * query string or the hash. For example, "/icon.SVG?v=2" gives "svg".
- *
- * @param path - The path to the favicon file.
- * @returns The file extension, or an empty string if the path has none.
- */
-function getExtension(path: string): string {
-  const file = path.split(/[?#]/)[0].toLowerCase()
-  const dot = file.lastIndexOf(".")
-  return dot === -1 ? "" : file.slice(dot + 1)
-}
-
-/**
- * Detects the MIME type of a favicon file from its extension.
- *
- * @param path - The path to the favicon file.
- * @returns The MIME type of the file.
- */
-function getMimeType(path: string): string {
-  const extension = getExtension(path)
-  if (extension === "svg") return "image/svg+xml"
-  if (extension === "png") return "image/png"
-  if (extension === "webp") return "image/webp"
-  if (extension === "jpg" || extension === "jpeg") return "image/jpeg"
-  return "image/x-icon"
-}
-
-/**
- * Builds the media query string for a given theme.
- *
- * @param theme - The theme to build the media query for.
- * @returns The media query string, or undefined if no theme was provided.
- */
-function getMedia(theme?: "light" | "dark"): string | undefined {
-  if (theme === "light") return "(prefers-color-scheme: light)"
-  if (theme === "dark") return "(prefers-color-scheme: dark)"
-  return undefined
-}
-
-/**
- * Returns a sort priority for a given favicon file.
- * Lower number = rendered first.
- *
- * Order: ico → png → svg → apple → themed variants
- */
-function getSortOrder(file: FaviconFile): number {
-  if (file.apple) return 4
-  if (file.theme) return 5
-  const extension = getExtension(file.path)
-  if (extension === "ico") return 0
-  if (["png", "webp", "jpg", "jpeg"].includes(extension)) return 1
-  if (extension === "svg") return 2
-  return 3
-}
-
-const sorted = sort ? [...icons].sort((a, b) => getSortOrder(a) - getSortOrder(b)) : icons
-
-const prepared = sorted.map((file) => ({
-  path: file.path,
-  size: file.size ? `${file.size}x${file.size}` : undefined,
-  type: getMimeType(file.path),
-  media: getMedia(file.theme),
-  apple: file.apple ?? false,
-}))
----
-
-{manifest && <link rel="manifest" href={manifest} />}
-
-{
-  prepared.map((icon) => {
-    if (icon.apple) {
-      return <link rel="apple-touch-icon" href={icon.path} sizes={icon.size} />
-    }
-
-    return (
-      <link rel="icon" type={icon.type} href={icon.path} sizes={icon.size} media={icon.media} />
-    )
-  })
-}

package/src/components/Head.astro

@@ -1,94 +0,0 @@
----
-import type { ComponentProps } from "astro/types"
-
-import Canonical from "./Canonical.astro"
-import Description from "./Description.astro"
-import Favicon from "./Favicon.astro"
-import Keywords from "./Keywords.astro"
-import LanguageAlternates from "./LanguageAlternates.astro"
-import OpenGraph from "./OpenGraph.astro"
-import type { OpenGraphImage } from "./OpenGraph.astro"
-import Robots from "./Robots.astro"
-import Schema from "./Schema.astro"
-import Title from "./Title.astro"
-import Twitter from "./Twitter.astro"
-
-export type Props = {
-  title: string
-  titleTemplate?: `${string}%s${string}`
-  description?: string | false
-  canonical?: string | false
-  keywords?: string[] | false
-  charset?: string
-  viewport?: string
-  image?: OpenGraphImage | false
-  robots?: ComponentProps<typeof Robots> | false
-  openGraph?: ComponentProps<typeof OpenGraph> | false
-  twitter?: ComponentProps<typeof Twitter> | false
-  favicon?: ComponentProps<typeof Favicon> | false
-  schema?: ComponentProps<typeof Schema> | false
-  languageAlternates?: ComponentProps<typeof LanguageAlternates>["alternates"] | false
-}
-
-const {
-  title,
-  titleTemplate,
-  description,
-  canonical,
-  keywords,
-  charset = "UTF-8",
-  viewport = "width=device-width, initial-scale=1.0",
-  image,
-  robots,
-  openGraph,
-  twitter,
-  favicon,
-  schema,
-  languageAlternates,
-} = Astro.props
-
-const enabled = <T,>(value: T | false | undefined): value is T => {
-  return value !== false && value !== undefined
-}
-
-const og =
-  openGraph !== false
-    ? {
-        title,
-        description: enabled(description) ? description : undefined,
-        image: enabled(image) ? image : undefined,
-        url: enabled(canonical) ? canonical : undefined,
-        ...openGraph,
-      }
-    : false
-
-const tw =
-  twitter !== false
-    ? {
-        title,
-        description: enabled(description) ? description : undefined,
-        image: enabled(image) ? image : undefined,
-        ...twitter,
-      }
-    : false
----
-
-<head>
-  <meta charset={charset} />
-  <slot name="top" />
-  <meta name="viewport" content={viewport} />
-
-  <Title value={title} template={titleTemplate} />
-
-  {enabled(description) && <Description value={description} />}
-  {enabled(canonical) && <Canonical value={canonical} />}
-  {enabled(keywords) && <Keywords value={keywords} />}
-  {enabled(robots) && <Robots {...robots} />}
-  {enabled(og) && <OpenGraph {...og} />}
-  {enabled(tw) && <Twitter {...tw} />}
-  {enabled(favicon) && <Favicon {...favicon} />}
-  {enabled(schema) && <Schema {...schema} />}
-  {enabled(languageAlternates) && <LanguageAlternates alternates={languageAlternates} />}
-
-  <slot />
-</head>