@xylabs/sdk-meta 4.0.7

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './html/index.ts'
+export * from './meta/index.ts'
+export * from './models/index.ts'

package/src/lib/getMetaAsDict.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type StringIndexable = { [key: string]: any }
+
+export const propertyDelimiter = ':'
+
+export const getMetaAsDict = (obj: StringIndexable, parentKey = ''): Record<string, string> => {
+  let flatRecord: StringIndexable = {}
+  for (const key in obj) {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      // If the value is another object, we want to iterate through its keys as well.
+      const childRecord = getMetaAsDict(obj[key] as StringIndexable, `${parentKey}${key}${propertyDelimiter}`)
+      flatRecord = { ...flatRecord, ...childRecord }
+    } else {
+      // Concatenate the key with its parent key.
+      const newKey = parentKey ? `${parentKey}${key}` : key
+      const trimmed = newKey.endsWith(propertyDelimiter) ? newKey.slice(0, -1) : newKey
+      flatRecord[trimmed] = `${obj[key]}`
+    }
+  }
+  return flatRecord
+}

package/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './getMetaAsDict.ts'

package/src/lib/spec/getMetaAsDict.spec.ts

@@ -0,0 +1,16 @@
+import type { Meta } from '../../models'
+import { getMetaAsDict } from '../getMetaAsDict'
+
+describe('getMetaAsDict', () => {
+  const cases: Meta[] = [
+    { description: 'description' },
+    { twitter: { image: { '': 'twitter:image' } } },
+  ]
+  it.each(cases)('Generates head meta', (meta: Meta) => {
+    const output = getMetaAsDict(meta)
+    expect(output).toBeDefined()
+    Object.entries(output).map(([key, value]) => {
+      expect(key).toEqual(value)
+    })
+  })
+})

package/src/meta/builder.ts

@@ -0,0 +1,49 @@
+import type { CheerioAPI } from 'cheerio'
+import { load } from 'cheerio'
+
+import { getMetaAsDict } from '../lib/index.ts'
+import type { Meta } from '../models/index.ts'
+
+/* test change */
+
+const addMetaToHead = ($: CheerioAPI, name: string, value: string | object) => {
+  if (typeof value === 'string') {
+    const newMeta = `<meta property="${name}" content="${value}" />`
+    const existingMeta = $(`head meta[property="${name}"]`)
+    if (existingMeta?.length) {
+      existingMeta.replaceWith(newMeta)
+    } else {
+      $('head').append(newMeta)
+    }
+  } else if (Array.isArray(value)) {
+    value.map(item => addMetaToHead($, `${name}`, item))
+  } else if (typeof value === 'object') {
+    Object.entries(value).map(([key, value]) => {
+      if (key === 'url') {
+        addMetaToHead($, name, value)
+      } else {
+        addMetaToHead($, `${name}:${key}`, value)
+      }
+    })
+  } else {
+    throw new TypeError(`Invalid item type [${name}, ${typeof value}]`)
+  }
+}
+
+export const metaBuilder = (html: string, meta: Meta) => {
+  const $ = load(html)
+  // NOTE: This assumes unique meta properties (no duplicates)
+  // which is generally the case, but not always (you can have
+  // multiple og:video:tag tags, for example)
+  const metaProperties = getMetaAsDict(meta)
+  for (const [key, value] of Object.entries(metaProperties)) {
+    if (value) addMetaToHead($, key, value)
+  }
+  if (meta.description) {
+    addMetaToHead($, 'description', meta.description)
+  }
+  if (meta.title) {
+    $('head > title').text(meta.title)
+  }
+  return $.html()
+}

package/src/meta/index.ts

@@ -0,0 +1 @@
+export * from './builder.ts'

package/src/models/Meta.ts

@@ -0,0 +1,9 @@
+import type { OpenGraphMeta } from './OpenGraph/index.ts'
+import type { TwitterMeta } from './Twitter/index.ts'
+
+export interface Meta {
+  description?: string
+  og?: OpenGraphMeta
+  title?: string
+  twitter?: TwitterMeta
+}

package/src/models/OpenGraph/OpenGraphMeta.ts

@@ -0,0 +1,17 @@
+import type { OpenGraphStructuredProperty } from './OpenGraphStructuredProperty.ts'
+
+// TODO: There is slightly different fields for video/image/audio and we should create
+// separate interfaces for each
+
+export interface OpenGraphMeta {
+  audio?: OpenGraphStructuredProperty
+  description?: string
+  determiner?: string
+  image?: OpenGraphStructuredProperty
+  locale?: string | string[]
+  site_name?: string
+  title?: string
+  type?: string
+  url?: string
+  video?: OpenGraphStructuredProperty
+}

package/src/models/OpenGraph/OpenGraphStructured.ts

@@ -0,0 +1,9 @@
+export interface OpenGraphStructured {
+  ''?: string
+  'alt'?: string
+  'height'?: number
+  'secure_url'?: string
+  'type'?: string
+  'url'?: string
+  'width'?: number
+}

package/src/models/OpenGraph/OpenGraphStructuredProperty.ts

@@ -0,0 +1,3 @@
+import type { OpenGraphStructured } from './OpenGraphStructured.ts'
+
+export type OpenGraphStructuredProperty = string | OpenGraphStructured | (string | OpenGraphStructured)[]

package/src/models/OpenGraph/index.ts

@@ -0,0 +1,3 @@
+export * from './OpenGraphMeta.ts'
+export * from './OpenGraphStructured.ts'
+export * from './OpenGraphStructuredProperty.ts'

package/src/models/Twitter/Twitter.ts

@@ -0,0 +1,67 @@
+import type { TwitterApp } from './TwitterApp.ts'
+import type { TwitterPlayer } from './TwitterPlayer.ts'
+
+/**
+ * https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
+ */
+export interface TwitterMeta {
+  app?: TwitterApp
+  /**
+   * The card type. Used with all cards. Fallback: og:type.
+   * If an og:type, og:title and og:description exist in the markup but
+   * twitter:card is absent, then a summary card may be rendered.
+   */
+  card?: 'summary' | 'summary_large_image' | 'app' | 'player'
+
+  creator?: {
+    /**
+     * The @username of content creator. Used with summary_large_image cards
+     */
+    ''?: string
+    /**
+     * Twitter user ID of content creator. Used with summary,
+     * summary_large_image cards
+     */
+    'id'?: string
+  }
+  /**
+   * Description of content (maximum 200 characters). Used with summary,
+   * summary_large_image, player cards. Fallback: og:description.
+   */
+  description?: string
+  image?: {
+    /**
+     * URL of image to use in the card. Images must be less than 5MB in size.
+     * JPG, PNG, WEBP and GIF formats are supported. Only the first frame of
+     * an animated GIF will be used. SVG is not supported. Used with summary,
+     * summary_large_image, player cards. Fallback: og:image
+     */
+    ''?: string
+    /**
+     * A text description of the image conveying the essential nature of
+     * an image to users who are visually impaired. Maximum 420
+     * characters. Used with summary, summary_large_image, player cards
+     */
+    'alt'?: string
+  }
+  player?: TwitterPlayer
+  /**
+   * The @username of website. Either twitter:site or twitter:site:id is
+   * required. Used with summary, summary_large_image, app, player
+   * cards
+   */
+  site?: {
+    ''?: string
+    /**
+     * Same as twitter:site, but the user’s Twitter ID. Either
+     * twitter:site or twitter:site:id is required. Used with
+     * summary, summary_large_image, player cards
+     */
+    'id'?: string
+  }
+  /**
+   * Title of content (max 70 characters). Used with summary,
+   * summary_large_image, player cards. Fallback: og:title.
+   */
+  title?: string
+}

package/src/models/Twitter/TwitterApp.ts

@@ -0,0 +1,17 @@
+export interface TwitterApp {
+  id?: {
+    googleplay?: string
+    ipad?: string
+    iphone?: string
+  }
+  name?: {
+    googleplay?: string
+    ipad?: string
+    iphone?: string
+  }
+  url?: {
+    googleplay?: string
+    ipad?: string
+    iphone?: string
+  }
+}

package/src/models/Twitter/TwitterPlayer.ts

@@ -0,0 +1,23 @@
+/**
+ * https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card
+ */
+export interface TwitterPlayer {
+  /**
+   * HTTPS URL to iFrame player. This must be a HTTPS URL which does not
+   * generate active mixed content warnings in a web browser. The audio or
+   * video player must not require plugins such as Adobe Flash.
+   */
+  '': string
+  /**
+   * Height of iframe in pixels. Used with player card
+   */
+  'height'?: number
+  /**
+   * URL to raw video or audio stream. Used with player card
+   */
+  'stream'?: string
+  /**
+   * Width of iframe in pixels. Used with player card
+   */
+  'width'?: number
+}

package/src/models/Twitter/index.ts

@@ -0,0 +1,3 @@
+export * from './Twitter.ts'
+export * from './TwitterApp.ts'
+export * from './TwitterPlayer.ts'

package/src/models/index.ts

@@ -0,0 +1,3 @@
+export * from './Meta.ts'
+export * from './OpenGraph/index.ts'
+export * from './Twitter/index.ts'

package/src/spec/__snapshots__/builder.spec.ts.snap

@@ -0,0 +1,187 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`builder > Adds meta > Open Graph (OG) 1`] = `
+"<!DOCTYPE html><html lang="en"><head>
+  <meta charset="utf-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="theme-color" content="#000000">
+  <meta name="description" content="Own your piece of XYO's Decentralized Digital World!">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="manifest" href="/manifest.json">
+  <title>Death Valley Wilderness: Wilderness Light</title>
+  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Lexend+Deca|Rock+Salt|Source+Code+Pro&amp;display=swap" rel="stylesheet">
+  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-795QBPW744"></script>
+  <script>function gtag() { dataLayer.push(arguments) } window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "G-795QBPW744")</script>
+  <style>
+    html {
+      overflow-y: auto;
+      overflow-x: hidden
+    }
+
+    #root,
+    body {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0
+    }
+  </style>
+  <script defer="defer" src="/static/js/main.ae7f7033.js"></script>
+  <link href="/static/css/main.026e3fe6.css" rel="stylesheet">
+<meta property="description" content="Follow the course of light through the Death Valley Wilderness and observe the obvious and subtle changes across the landscape.Produced by Sylvia JohnsonTo w..."><meta property="title" content="Death Valley Wilderness: Wilderness Light"><meta property="og:description" content="Follow the course of light through the Death Valley Wilderness and observe the obvious and subtle changes across the landscape.Produced by Sylvia JohnsonTo w..."><meta property="og:image" content="https://i.ytimg.com/vi/Kauv7MVPcsA/maxresdefault.jpg"><meta property="og:image:height" content="720"><meta property="og:image:width" content="1280"><meta property="og:site_name" content="YouTube"><meta property="og:title" content="Death Valley Wilderness: Wilderness Light"><meta property="og:type" content="video.other"><meta property="og:url" content="https://www.youtube.com/watch?v=Kauv7MVPcsA"><meta property="og:video:height" content="720"><meta property="og:video:secure_url" content="https://www.youtube.com/embed/Kauv7MVPcsA"><meta property="og:video:type" content="text/html"><meta property="og:video:url" content="https://www.youtube.com/embed/Kauv7MVPcsA"><meta property="og:video:width" content="1280"></head>
+
+<body style="padding:0;margin:0;overflow-x:hidden"><noscript><iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-W2TFNXL" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript><noscript>You need to enable JavaScript to run this
+    app.</noscript>
+  <div id="root"></div>
+
+
+</body></html>"
+`;
+
+exports[`builder > Adds meta > Twitter 1`] = `
+"<!DOCTYPE html><html lang="en"><head>
+  <meta charset="utf-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="theme-color" content="#000000">
+  <meta name="description" content="Own your piece of XYO's Decentralized Digital World!">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="manifest" href="/manifest.json">
+  <title>Death Valley Wilderness: Wilderness Light</title>
+  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Lexend+Deca|Rock+Salt|Source+Code+Pro&amp;display=swap" rel="stylesheet">
+  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-795QBPW744"></script>
+  <script>function gtag() { dataLayer.push(arguments) } window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "G-795QBPW744")</script>
+  <style>
+    html {
+      overflow-y: auto;
+      overflow-x: hidden
+    }
+
+    #root,
+    body {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0
+    }
+  </style>
+  <script defer="defer" src="/static/js/main.ae7f7033.js"></script>
+  <link href="/static/css/main.026e3fe6.css" rel="stylesheet">
+<meta property="description" content="Follow the course of light through the Death Valley Wilderness and observe the obvious and subtle changes across the landscape.Produced by Sylvia JohnsonTo w..."><meta property="title" content="Death Valley Wilderness: Wilderness Light"><meta property="twitter:app:id:googleplay" content="com.google.android.youtube"><meta property="twitter:app:id:ipad" content="544007664"><meta property="twitter:app:id:iphone" content="544007664"><meta property="twitter:app:name:googleplay" content="YouTube"><meta property="twitter:app:name:ipad" content="YouTube"><meta property="twitter:app:name:iphone" content="YouTube"><meta property="twitter:app:url:googleplay" content="https://www.youtube.com/watch?v=Kauv7MVPcsA"><meta property="twitter:app:url:ipad" content="vnd.youtube://www.youtube.com/watch?v=Kauv7MVPcsA&amp;feature=applinks"><meta property="twitter:app:url:iphone" content="vnd.youtube://www.youtube.com/watch?v=Kauv7MVPcsA&amp;feature=applinks"><meta property="twitter:card" content="summary"><meta property="twitter:description" content="Follow the course of light through the Death Valley Wilderness and observe the obvious and subtle changes across the landscape.Produced by Sylvia JohnsonTo w..."><meta property="twitter:image" content="https://www.twitter.com/image/url"><meta property="twitter:player" content="https://www.youtube.com/watch?v=Kauv7MVPcsA"><meta property="twitter:player:height" content="720"><meta property="twitter:player:width" content="1028"><meta property="twitter:site" content="@youtube"><meta property="twitter:title" content="Death Valley Wilderness: Wilderness Light"></head>
+
+<body style="padding:0;margin:0;overflow-x:hidden"><noscript><iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-W2TFNXL" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript><noscript>You need to enable JavaScript to run this
+    app.</noscript>
+  <div id="root"></div>
+
+
+</body></html>"
+`;
+
+exports[`builder > Overwrites existing values with new values 1`] = `
+"<!DOCTYPE html><html lang="en"><head>
+  <title>XYO 2.0</title>
+  <meta property="og:image" content="https://example.com/newimage.jpg">
+  <meta property="twitter:image" content="https://example.com/newimage.jpg">
+</head>
+<body>
+
+    </body></html>"
+`;
+
+exports[`builder Adds meta Open Graph (OG) 1`] = `
+"<!DOCTYPE html><html lang="en"><head>
+  <meta charset="utf-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="theme-color" content="#000000">
+  <meta name="description" content="Own your piece of XYO's Decentralized Digital World!">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="manifest" href="/manifest.json">
+  <title>Death Valley Wilderness: Wilderness Light</title>
+  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Lexend+Deca|Rock+Salt|Source+Code+Pro&amp;display=swap" rel="stylesheet">
+  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-795QBPW744"></script>
+  <script>function gtag() { dataLayer.push(arguments) } window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "G-795QBPW744")</script>
+  <style>
+    html {
+      overflow-y: auto;
+      overflow-x: hidden
+    }
+
+    #root,
+    body {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0
+    }
+  </style>
+  <script defer="defer" src="/static/js/main.ae7f7033.js"></script>
+  <link href="/static/css/main.026e3fe6.css" rel="stylesheet">
+<meta property="description" content="Follow the course of light through the Death Valley Wilderness and observe the obvious and subtle changes across the landscape.Produced by Sylvia JohnsonTo w..."><meta property="title" content="Death Valley Wilderness: Wilderness Light"><meta property="og:description" content="Follow the course of light through the Death Valley Wilderness and observe the obvious and subtle changes across the landscape.Produced by Sylvia JohnsonTo w..."><meta property="og:image" content="https://i.ytimg.com/vi/Kauv7MVPcsA/maxresdefault.jpg"><meta property="og:image:height" content="720"><meta property="og:image:width" content="1280"><meta property="og:site_name" content="YouTube"><meta property="og:title" content="Death Valley Wilderness: Wilderness Light"><meta property="og:type" content="video.other"><meta property="og:url" content="https://www.youtube.com/watch?v=Kauv7MVPcsA"><meta property="og:video:height" content="720"><meta property="og:video:secure_url" content="https://www.youtube.com/embed/Kauv7MVPcsA"><meta property="og:video:type" content="text/html"><meta property="og:video:url" content="https://www.youtube.com/embed/Kauv7MVPcsA"><meta property="og:video:width" content="1280"></head>
+
+<body style="padding:0;margin:0;overflow-x:hidden"><noscript><iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-W2TFNXL" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript><noscript>You need to enable JavaScript to run this
+    app.</noscript>
+  <div id="root"></div>
+
+
+</body></html>"
+`;
+
+exports[`builder Adds meta Twitter 1`] = `
+"<!DOCTYPE html><html lang="en"><head>
+  <meta charset="utf-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="theme-color" content="#000000">
+  <meta name="description" content="Own your piece of XYO's Decentralized Digital World!">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="manifest" href="/manifest.json">
+  <title>Death Valley Wilderness: Wilderness Light</title>
+  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Lexend+Deca|Rock+Salt|Source+Code+Pro&amp;display=swap" rel="stylesheet">
+  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-795QBPW744"></script>
+  <script>function gtag() { dataLayer.push(arguments) } window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "G-795QBPW744")</script>
+  <style>
+    html {
+      overflow-y: auto;
+      overflow-x: hidden
+    }
+
+    #root,
+    body {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0
+    }
+  </style>
+  <script defer="defer" src="/static/js/main.ae7f7033.js"></script>
+  <link href="/static/css/main.026e3fe6.css" rel="stylesheet">
+<meta property="description" content="Follow the course of light through the Death Valley Wilderness and observe the obvious and subtle changes across the landscape.Produced by Sylvia JohnsonTo w..."><meta property="title" content="Death Valley Wilderness: Wilderness Light"><meta property="twitter:app:id:googleplay" content="com.google.android.youtube"><meta property="twitter:app:id:ipad" content="544007664"><meta property="twitter:app:id:iphone" content="544007664"><meta property="twitter:app:name:googleplay" content="YouTube"><meta property="twitter:app:name:ipad" content="YouTube"><meta property="twitter:app:name:iphone" content="YouTube"><meta property="twitter:app:url:googleplay" content="https://www.youtube.com/watch?v=Kauv7MVPcsA"><meta property="twitter:app:url:ipad" content="vnd.youtube://www.youtube.com/watch?v=Kauv7MVPcsA&amp;feature=applinks"><meta property="twitter:app:url:iphone" content="vnd.youtube://www.youtube.com/watch?v=Kauv7MVPcsA&amp;feature=applinks"><meta property="twitter:card" content="summary"><meta property="twitter:description" content="Follow the course of light through the Death Valley Wilderness and observe the obvious and subtle changes across the landscape.Produced by Sylvia JohnsonTo w..."><meta property="twitter:image" content="https://www.twitter.com/image/url"><meta property="twitter:player" content="https://www.youtube.com/watch?v=Kauv7MVPcsA"><meta property="twitter:player:height" content="720"><meta property="twitter:player:width" content="1028"><meta property="twitter:site" content="@youtube"><meta property="twitter:title" content="Death Valley Wilderness: Wilderness Light"></head>
+
+<body style="padding:0;margin:0;overflow-x:hidden"><noscript><iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-W2TFNXL" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript><noscript>You need to enable JavaScript to run this
+    app.</noscript>
+  <div id="root"></div>
+
+
+</body></html>"
+`;
+
+exports[`builder Overwrites existing values with new values 1`] = `
+"<!DOCTYPE html><html lang="en"><head>
+  <title>XYO 2.0</title>
+  <meta property="og:image" content="https://example.com/newimage.jpg">
+  <meta property="twitter:image" content="https://example.com/newimage.jpg">
+</head>
+<body>
+
+    </body></html>"
+`;

package/src/spec/builder.spec.ts

@@ -0,0 +1,125 @@
+import { readFile } from 'node:fs/promises'
+import Path from 'node:path'
+
+import { getMetaAsDict } from '../lib/index.ts'
+import { metaBuilder } from '../meta/index.ts'
+import type {
+  Meta, OpenGraphMeta, TwitterMeta,
+} from '../models/index.ts'
+
+const title = 'Death Valley Wilderness: Wilderness Light'
+const description
+  // eslint-disable-next-line @stylistic/max-len
+  = 'Follow the course of light through the Death Valley Wilderness and observe the obvious and subtle changes across the landscape.Produced by Sylvia JohnsonTo w...'
+
+const meta: Meta = { description, title }
+
+const og: OpenGraphMeta = {
+  description,
+  image: {
+    '': 'https://i.ytimg.com/vi/Kauv7MVPcsA/maxresdefault.jpg',
+    'height': 720,
+    'width': 1280,
+  },
+  site_name: 'YouTube',
+  title,
+  type: 'video.other',
+  url: 'https://www.youtube.com/watch?v=Kauv7MVPcsA',
+  video: {
+    height: 720,
+    secure_url: 'https://www.youtube.com/embed/Kauv7MVPcsA',
+    // TODO: Multiple tags
+    // tag: ['Light', 'Death Valley'],
+    type: 'text/html',
+    url: 'https://www.youtube.com/embed/Kauv7MVPcsA',
+    width: 1280,
+  },
+}
+
+const twitter: TwitterMeta = {
+  app: {
+    id: {
+      googleplay: 'com.google.android.youtube',
+      ipad: '544007664',
+      iphone: '544007664',
+    },
+    name: {
+      googleplay: 'YouTube',
+      ipad: 'YouTube',
+      iphone: 'YouTube',
+    },
+    url: {
+      googleplay: 'https://www.youtube.com/watch?v=Kauv7MVPcsA',
+      ipad: 'vnd.youtube://www.youtube.com/watch?v=Kauv7MVPcsA&feature=applinks',
+      iphone: 'vnd.youtube://www.youtube.com/watch?v=Kauv7MVPcsA&feature=applinks',
+    },
+  },
+  card: 'summary',
+  description,
+  image: { '': 'https://www.twitter.com/image/url' },
+  player: {
+    '': 'https://www.youtube.com/watch?v=Kauv7MVPcsA',
+    'height': 720,
+    'width': 1028,
+  },
+  site: { '': '@youtube' },
+  title,
+}
+
+describe('builder', () => {
+  it('Generates head meta if none exists', () => {
+    const html = '<html/>'
+    const output = metaBuilder(html, meta)
+    expect(output).toBeDefined()
+  })
+  describe('Adds meta', () => {
+    let html: string
+    beforeAll(async () => {
+      const template = Path.join(__dirname, 'template.html')
+      html = await readFile(template, { encoding: 'utf8' })
+    })
+    const cases: [title: string, meta: Meta][] = [
+      ['Open Graph (OG)', { ...meta, og }],
+      ['Twitter', { ...meta, twitter }],
+    ]
+    it.each(cases)('%s', (_, meta) => {
+      const output = metaBuilder(html, meta)
+      expect(output).toContain(meta.description)
+      expect(output).toContain(`<title>${meta.title}</title>`)
+      const metaProperties = getMetaAsDict(meta)
+      for (const [property, content] of Object.entries(metaProperties)) {
+        expect(output).toContain(`<meta property="${property}" content="${content}">`)
+      }
+      expect(output).toMatchSnapshot()
+    })
+  })
+  it('Overwrites existing values with new values', () => {
+    const oldImage = 'https://example.com/oldimage.jpg'
+    const newImage = 'https://example.com/newimage.jpg'
+    const html = `
+<!doctype html>
+<html lang="en">
+<head>
+  <title>XYO 2.0</title>
+  <meta property="og:image" content="${oldImage}">
+  <meta property="twitter:image" content="${oldImage}">
+</head>
+<body></body>
+</html>
+    `
+    const meta: Meta = {
+      og: { image: newImage },
+      twitter: { image: { '': newImage } },
+    }
+    const properties = ['og:image', 'twitter:image']
+    for (const property of properties) {
+      expect(html).toContain(`<meta property="${property}" content="${oldImage}">`)
+    }
+    const output = metaBuilder(html, meta)
+    for (const property of properties) {
+      expect(output).not.toContain(`<meta property="${property}" content="${oldImage}">`)
+      expect(output).toContain(`<meta property="${property}" content="${newImage}">`)
+    }
+    expect(output).toMatchSnapshot()
+  })
+})

package/src/spec/template.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Own your piece of XYO's Decentralized Digital World!" />
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+  <link rel="manifest" href="/manifest.json" />
+  <title>XYO 2.0</title>
+  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Lexend+Deca|Rock+Salt|Source+Code+Pro&display=swap"
+    rel="stylesheet">
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-795QBPW744"></script>
+  <script>function gtag() { dataLayer.push(arguments) } window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "G-795QBPW744")</script>
+  <style>
+    html {
+      overflow-y: auto;
+      overflow-x: hidden
+    }
+
+    #root,
+    body {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0
+    }
+  </style>
+  <script defer="defer" src="/static/js/main.ae7f7033.js"></script>
+  <link href="/static/css/main.026e3fe6.css" rel="stylesheet">
+</head>
+
+<body style="padding:0;margin:0;overflow-x:hidden"><noscript><iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-W2TFNXL" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript><noscript>You need to enable JavaScript to run this
+    app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["src/index.ts"],
+  "tsconfig": "./tsconfig.typedoc.json"
+}

package/xy.config.ts

@@ -0,0 +1,10 @@
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+const config: XyTsupConfig = {
+  compile: {
+    browser: {},
+    neutral: { src: true },
+    node: {},
+  },
+}
+
+export default config