chore: add open graph package

packages/integrations/og/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @astrojs/og
+
+## 0.0.4
+
+### Patch Changes
+
+- 8f17ed6: Fix explicit flex warning (again)
+
+## 0.0.3
+
+### Patch Changes
+
+- Fix explicit flex error
+
+## 0.0.2
+
+### Patch Changes
+
+- cbb1f2a: Initial version

packages/integrations/og/README.md

@@ -0,0 +1,184 @@
+# @astrojs/og 🌄
+
+> ⚠️ This integration is **extremely** experimental! Only `output: 'server'` environments and `node` environments are supported currently.
+
+This **[Astro integration][astro-integration]** makes it easy to add social [Open Graph](https://ogp.me/) images to your [Astro project](https://astro.build)!
+
+- <strong>[Why `@astrojs/og`?](#why-astrojsog)</strong>
+- <strong>[Installation](#installation)</strong>
+- <strong>[Usage](#usage)</strong>
+- <strong>[Debugging](#debugging)</strong>
+- <strong>[Configuration](#configuration)</strong>
+- <strong>[Troubleshooting](#troubleshooting)</strong>
+- <strong>[Contributing](#contributing)</strong>
+- <strong>[Changelog](#changelog)</strong>
+
+## Why `@astrojs/og`?
+
+Branded Open Graph images make your content significantly more appealing on social media sites. However, creating these images has historically been difficult—static images require constant back-and-forth to keep edits in sync, whereas fully dynamic images required heavy-handed solutions like a headless browser or low-level `canvas` APIs.
+
+This integration comes with a straight-forward `<og.image>` component that renders an image from your existing markup and components. By creating a `src/pages/og/` directory and adding `.astro` pages, you instantly have the full power of Astro at your disposal for creating Open Graph images.
+
+## Installation
+
+### Quick Install
+
+The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
+
+```sh
+# Using NPM
+npx astro add og
+# Using Yarn
+yarn astro add og
+# Using PNPM
+pnpm astro add og
+```
+
+If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
+
+### Manual Install
+
+First, install the `@astrojs/og` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
+
+```sh
+npm install @astrojs/og
+```
+
+Then, apply this integration to your `astro.config.*` file using the `integrations` property:
+
+**`astro.config.mjs`**
+
+```js
+import og from "@astrojs/og";
+
+export default {
+  // Note that only `server` is supported (for now!)
+  output: "server",
+  integrations: [og()],
+};
+```
+
+## Usage
+
+```astro title="src/pages/index.astro"
+---
+import { og } from '@astrojs/image/components';
+---
+
+<og.image title="Hello world!" />
+```
+
+The included `<og.image>` component will generate a `<meta property="og:image">` tag. You must also create a `src/pages/og/` directory that contains `.astro` files which will generate your open graph images. By default, `src/pages/og/index.astro` is required.
+
+```astro title="src/pages/og/index.astro"
+---
+import { Container } from '@astrojs/image/components';
+const { title } = Object.fromEntries(Astro.url.searchParams.entries());
+---
+
+<Container>
+    <h1>{title}</h1>
+</Container>
+```
+
+### `<og.image />`
+
+Astro’s `<og.image />` component requires the `alt` attribute, which provides descriptive text for images. A warning will be logged if alt text is missing, and a future release of the integration will throw an error if no alt text is provided.
+
+#### src
+
+<p>
+
+**Type:** `string`<br>
+**Required:** `false`
+
+</p>
+
+Source path to the image component.
+
+For components located in your project's `src/pages/og` directory, use the file path relative to the `src/pages/og` directory. (e.g. `src="blog"` will reference `src/pages/og/blog.astro`)
+
+#### alt
+
+<p>
+
+**Type:** `string`<br>
+**Required:** `true`
+
+</p>
+
+Defines an alternative text description of the image.
+
+#### as
+
+<p>
+
+**Type:** `'meta' | 'img'`<br>
+**Default:** `'meta'`
+
+</p>
+
+The output element to render to. A `<meta>` tag will be generated if `as` is not provided.
+
+Set `as="img"` to debug image during development.
+
+#### width
+
+<p>
+
+**Type:** `number`<br>
+**Default:** `1200`
+
+</p>
+
+The desired width of the output image. If provided, `height` is also required.
+
+Dimensions are optional and will default to `1200 x 630` if not provided.
+
+#### height
+
+<p>
+
+**Type:** `number`<br>
+**Default:** `630`
+
+</p>
+
+The desired height of the output image. If provided, `width` is also required.
+
+Dimensions are optional and will default to `1200 x 630` if not provided.
+
+#### debug
+
+<p>
+
+**Type:** `boolean`<br>
+**Default:** `false`
+
+</p>
+
+Enable `debug` rendering for [`satori`](https://github.com/vercel/satori#debug), which will draw bounding boxes for debugging.
+
+## Configuration
+
+There are no integration options at the moment. In the future, support for custom fonts will be exposed at the integration level.
+
+## Troubleshooting
+
+- If your installation doesn't seem to be working, try restarting the dev server.
+- If you edit and save a file and don't see your site update accordingly, try refreshing the page.
+- If refreshing the page doesn't update your preview, or if a new installation doesn't seem to be working, then restart the dev server.
+
+For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
+
+You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
+
+[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
+
+## Contributing
+
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.

packages/integrations/og/components.d.ts

@@ -0,0 +1 @@
+export * from './lib/components'

packages/integrations/og/lib/Image.astro

@@ -0,0 +1,84 @@
+---
+import { render } from './render.mjs'
+
+interface Props { 
+  as?: "meta" | "img";
+  alt: string;
+  src?: string;
+  debug?: boolean;
+  width?: number;
+  height?: number;
+  [key: string]: any;
+}
+const {
+  as: tag = "meta",
+  alt,
+  debug,
+  width = 1200,
+  height = 630,
+  ...props
+} = Astro.props;
+
+// @ts-expect-error internal API
+const { scripts, links } = $$result;
+const assets = new Set<string>();
+for (const script of scripts) {
+  if (script.props.src?.endsWith('.css')) {
+    assets.add(script.props.src);
+  }
+}
+for (const link of links) {
+  if (link.props.rel === 'stylesheet') {
+    assets.add(link.props.href);
+  }
+}
+const externalStyles = await Promise.all(Array.from(assets).map(async (asset) => {
+  if (import.meta.env.DEV) {
+    return fetch(new URL(asset, Astro.url).toString(), { headers: { 'accept': 'text/css' }}).then(res => res.text());
+  } else {
+    const { readFileSync } = await import('fs');
+    const contents = readFileSync(`dist/${asset}`, { encoding: 'utf-8' });
+    return contents;
+  }
+})).then(res => res.join(''))
+const content = await Astro.slots.render('default');
+const template = `<html style="width:${width}px;height:${height}px;">
+  <body>
+    <div id="root">
+      ${content}
+    </div>
+    <style>
+      :where(html) {
+        display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:sans-serif;margin:0;padding:0;
+      }
+      :where(body) {
+        display:flex;flex-direction:column;max-width:100%;margin:0;padding:0;
+        flex: 1;
+      }
+      :where(#root) {
+        align-items:flex-start;justify-content:flex-start;
+        flex: 1;
+        margin:0;padding:0;
+      }
+      ${externalStyles}
+  </body>
+</html>`
+const src = await render(template, { ...props, debug, width, height })
+---
+
+{
+  tag === "meta" ? (
+    <meta property="og:image" content={src} />
+    <meta property="og:image:width" content={width.toString()} />
+    <meta property="og:image:height" content={height.toString()} />
+    <meta property="og:image:alt" content={alt} />
+  ) : (
+    <img
+      style={`width:100%;height:auto;`}
+      src={src}
+      loading="lazy"
+      decoding="async"
+      {...{ width, height }}
+    />
+  )
+}

packages/integrations/og/lib/assets/index.mjs

@@ -0,0 +1,20 @@
+import { init as initSatoriWasm } from 'satori';
+import yoga from "yoga-wasm-web";
+import { initWasm as initResvgWasm } from '@resvg/resvg-wasm';
+
+import resvgWasm from './resvg.wasm?asset';
+import yogaWasm from './yoga.wasm?asset';
+import font400File from './inter-400.woff?asset';
+import font400iFile from './inter-400i.woff?asset';
+import font700File from './inter-700.woff?asset';
+import font700iFile from './inter-700i.woff?asset';
+
+const noop = () => {}
+const initResvg = Promise.resolve(resvgWasm).then(buf => initResvgWasm(new WebAssembly.Module(buf))).catch(console.error);
+const initSatori = Promise.resolve(yogaWasm).then(buf => yoga(buf).then((x) => initSatoriWasm(x))).catch(noop);
+const initFont = Promise.all([font400File, font400iFile, font700File, font700iFile]).then(([$400, $400i, $700, $700i]) => [{ name: "sans-serif", data: $400, weight: 401, style: "normal" }, { name: "sans-serif", data: $400i, weight: 401, style: "italic" }, { name: "sans-serif", data: $700, weight: 701, style: "normal" }, { name: "sans-serif", data: $700i, weight: 701, style: "italic" }]).catch(noop)
+
+export default async function init() {
+    const [fonts] = await Promise.all([initFont, initResvg, initSatori]);
+    return { fonts }
+}

packages/integrations/og/lib/components.ts

@@ -0,0 +1,4 @@
+import image from './Image.astro'
+
+export const og = { image };
+

packages/integrations/og/lib/index.mjs

@@ -0,0 +1,121 @@
+import fs from "node:fs";
+import { joinPaths, prependForwardSlash } from "./utils/paths.js";
+
+export default function og() {
+  let _config;
+  let staticImages = new Map();
+  return {
+    name: "@astrojs/og",
+    hooks: {
+      "astro:config:setup"({ config, injectRoute, updateConfig, command }) {
+        _config = config;
+        const cache = new Map();
+        globalThis.astroOG = {
+          cache,
+          addStaticImage(filename, data) {
+            const name = `${prependForwardSlash("_og")}?q=${filename}`;
+            staticImages.set(name, data);
+            return name;
+          },
+          getImage(hash) {
+            const name = cache.get(hash);
+            if (name) {
+              return staticImages.get(name);
+            }
+          },
+        };
+
+        if (command === "dev" || config.output === "server") {
+          injectRoute({
+            pattern: "/_og",
+            entryPoint: "@astrojs/og/entrypoint",
+          });
+        }
+
+        updateConfig({
+          vite: {
+            plugins: [
+              {
+                name: "@astrojs/og/assets",
+                enforce: "pre",
+                load(id) {
+                  if (!id.endsWith("?asset")) return;
+                  id = id.replace(/\?asset$/, "");
+                  const buf = fs.readFileSync(id);
+                  return `export default Buffer.from(${JSON.stringify(
+                    Array.from(buf)
+                  )})`;
+                },
+              },
+              {
+                name: "@astrojs/og/virtual",
+                enforce: "pre",
+                resolveId(id) {
+                  if (id === "virtual:@astrojs/og") {
+                    return `\0virtual:@astrojs/og`;
+                  }
+                },
+                load(id) {
+                  if (id !== `\0virtual:@astrojs/og`) return;
+                  const values = {
+                    output: config.output,
+                    publicURL: new URL("./public", config.root).toString(),
+                  };
+                  let result = "";
+                  for (const [key, value] of Object.entries(values)) {
+                    result += `\nexport let ${key} = ${JSON.stringify(value)};`;
+                  }
+                  return result.trim();
+                },
+              },
+            ],
+            ssr: {
+              noExternal: ["@astrojs/og/entrypoint", "@astrojs/og/components"],
+              external: [
+                "@astrojs/og",
+                "yoga-wasm-web",
+                "@resvg/resvg-wasm",
+                "satori",
+                "satori-html",
+              ],
+            },
+          },
+        });
+      },
+      "astro:build:setup": async () => {
+        // Used to cache all images rendered to HTML
+        // Added to globalThis to share the same map in Node and Vite
+        function addStaticImage(filename, data) {
+          const name = prependForwardSlash(
+            joinPaths(
+              _config.base,
+              _config.build.assets,
+              "_og",
+              `${filename}.png`
+            )
+          );
+          staticImages.set(name, data);
+          return name;
+        }
+        // Helpers for building static images should only be available for SSG
+        if (_config.output === "static") {
+          globalThis.astroOG.addStaticImage = addStaticImage;
+        }
+      },
+      "astro:build:generated": async ({ dir }) => {
+        // for SSG builds, build all requested image transforms to dist
+        if (staticImages.size > 0) {
+          for (const [file, generate] of staticImages.entries()) {
+            fs.mkdirSync(new URL("./", new URL("." + file, dir)), {
+              recursive: true,
+            });
+            fs.writeFileSync(
+              new URL("." + file, dir),
+              await generate()
+            );
+          }
+        }
+      },
+    },
+  };
+}

packages/integrations/og/lib/render.mjs

@@ -0,0 +1,45 @@
+import { transform, walkSync, ELEMENT_NODE } from "ultrahtml";
+import inline from 'ultrahtml/transformers/inline';
+import sanitize from 'ultrahtml/transformers/sanitize';
+import satori from 'satori';
+import { html } from 'satori-html';
+import { Resvg } from '@resvg/resvg-wasm';
+import init from './assets/index.mjs';
+import { shorthash } from "./shorthash.mjs";
+
+function fixup() {
+  return async function (doc) {
+    walkSync(doc, (node, parent) => {
+      if (node.type === ELEMENT_NODE && node.name === 'div' && !node.attributes.style?.includes('display:flex')) {
+        node.attributes.style = node.attributes.style ?? '';
+        node.attributes.style += 'display:flex;flex-direction:column;';
+      }
+    });
+    return doc;
+  };
+}
+
+async function preprocess(markup) {
+  return await transform(markup, [inline(), sanitize(), fixup()]);
+}
+
+const cache = globalThis.astroOG.cache;
+let fonts = [];
+export async function render(markup, userConfig) {
+  if (fonts.length === 0) ({ fonts } = await init());
+  const config = { debug: false, width: 1200, height: 630, fonts: [], ...userConfig };
+  config.fonts.push(...fonts);
+  const hash = shorthash(markup + JSON.stringify(config));
+  if (cache.has(hash)) return cache.get(hash);
+
+  const name = globalThis.astroOG.addStaticImage(hash, async () => {
+    const code = await preprocess(markup);
+    const svg = await satori(typeof code === 'string' ? html(code) : code, config)
+    // const image = new Resvg(svg, { fitTo: { mode: 'width', value: config.width } })
+    // const chunk = image.render().asPng()
+    return svg;
+  });
+  cache.set(hash, name);
+
+  return name;
+}

packages/integrations/og/lib/shorthash.mjs

@@ -0,0 +1,67 @@
+/**
+ * shorthash - https://github.com/bibig/node-shorthash
+ *
+ * @license
+ *
+ * (The MIT License)
+ *
+ * Copyright (c) 2013 Bibig <bibig@me.com>
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without
+ * restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following
+ * conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+const dictionary = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXY';
+const binary = dictionary.length;
+
+// refer to: http://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
+function bitwise(str) {
+	let hash = 0;
+	if (str.length === 0) return hash;
+	for (let i = 0; i < str.length; i++) {
+		const ch = str.charCodeAt(i);
+		hash = (hash << 5) - hash + ch;
+		hash = hash & hash; // Convert to 32bit integer
+	}
+	return hash;
+}
+
+export function shorthash(text) {
+	let num;
+	let result = '';
+
+	let integer = bitwise(text);
+	const sign = integer < 0 ? 'Z' : ''; // It it's negative, start with Z, which isn't in the dictionary
+
+	integer = Math.abs(integer);
+
+	while (integer >= binary) {
+		num = integer % binary;
+		integer = Math.floor(integer / binary);
+		result = dictionary[num] + result;
+	}
+
+	if (integer > 0) {
+		result = dictionary[integer] + result;
+	}
+
+	return sign + result;
+}

packages/integrations/og/lib/utils/paths.js

@@ -0,0 +1,51 @@
+export function isRemoteImage(src) {
+	return /^(https?:)?\/\//.test(src);
+}
+
+function removeQueryString(src) {
+	const index = src.lastIndexOf('?');
+	return index > 0 ? src.substring(0, index) : src;
+}
+
+export function extname(src) {
+	const base = basename(src);
+	const index = base.lastIndexOf('.');
+
+	if (index <= 0) {
+		return '';
+	}
+
+	return base.substring(index);
+}
+
+function basename(src) {
+	return removeQueryString(src.replace(/^.*[\\\/]/, ''));
+}
+
+export function appendForwardSlash(path) {
+	return path.endsWith('/') ? path : path + '/';
+}
+
+export function prependForwardSlash(path) {
+	return path[0] === '/' ? path : '/' + path;
+}
+
+export function removeTrailingForwardSlash(path) {
+	return path.endsWith('/') ? path.slice(0, path.length - 1) : path;
+}
+
+export function removeLeadingForwardSlash(path) {
+	return path.startsWith('/') ? path.substring(1) : path;
+}
+
+export function trimSlashes(path) {
+	return path.replace(/^\/|\/$/g, '');
+}
+
+function isString(path) {
+	return typeof path === 'string' || path instanceof String;
+}
+
+export function joinPaths(...paths) {
+	return paths.filter(isString).map(trimSlashes).join('/');
+}

packages/integrations/og/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@astrojs/og",
+  "type": "module",
+  "version": "0.0.4",
+  "types": "./lib/index.d.ts",
+  "main": "./lib/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.mjs"
+    },
+    "./components": "./lib/components.ts",
+    "./entrypoint": "./lib/entrypoint.mjs",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "components.d.ts",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/withastro/astro",
+    "directory": "packages/integrations/og"
+  },
+  "keywords": [
+    "astro-integration",
+    "astro-component",
+    "withastro",
+    "image",
+    "opengraph",
+    "og"
+  ],
+  "bugs": {
+    "url": "https://github.com/withastro/astro/issues"
+  },
+  "homepage": "https://github.com/withastro/astro#README",
+  "scripts": {
+    "lint": "prettier \"**/*.{js,ts,md}\"",
+    "build": "echo \"No build step...\""
+  },
+  "license": "MIT",
+  "packageManager": "pnpm@7.6.0",
+  "dependencies": {
+    "@resvg/resvg-wasm": "2.3.1",
+    "satori": "^0.2.1",
+    "satori-html": "^0.3.2",
+    "sharp": "^0.31.3",
+    "ultrahtml": "^1.2.0",
+    "yoga-wasm-web": "0.2.0"
+  },
+  "peerDependencies": {
+    "astro": "^2.0.0"
+  }
+}

packages/integrations/og/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "include": ["lib"],
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "strict": true,
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true,
+    "module": "NodeNext",
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "target": "ES2020",
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  }
+}