feat: init

.eslintcache

@@ -0,0 +1 @@
+[{"/Users/jerred/git/astro-satori/src/index.ts":"1","/Users/jerred/git/astro-satori/src/types.ts":"2"},{"size":1495,"mtime":1719505018837,"results":"3","hashOfConfig":"4"},{"size":471,"mtime":1719505021508},{"filePath":"5","messages":"6","suppressedMessages":"7","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"9xborf","/Users/jerred/git/astro-satori/src/index.ts",[],[]]

.github/workflows/release-please.yml

@@ -0,0 +1,33 @@
+on:
+  push:
+    branches:
+      - main
+name: release-please
+permissions:
+  contents: write
+  pull-requests: write
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: googleapis/release-please-action@v4
+        id: release
+        with:
+          release-type: node
+      - uses: actions/checkout@v4
+        if: ${{ steps.release.outputs.release_created }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm ci
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm run lint
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm run build
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        if: ${{ steps.release.outputs.release_created }}

.gitignore

@@ -0,0 +1 @@
+node_modules

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "vitest.explorer"]
+}

README.md

@@ -1 +1,150 @@
-# astro-satori
+# Astro OpenGraph
+
+This is an [Astro](https://astro.build/) integration that generates images for [OpenGraph](https://ogp.me/) using [Satori](https://github.com/vercel/satori) and [resvg-js](https://github.com/yisibl/resvg-js).
+
+OpenGraph images are the link preview you see when linking a site to Slack, Discord, Twitter, Facebook, etc.
+
+## Usage
+
+1. Install this package:
+
+   ```bash
+   npm i astro-satori
+   ```
+
+1. If you want to use React syntax (recommended), install `@types/react`:
+
+   ```bash
+   npm i -D @types/react
+   ```
+
+1. Define a render function:
+
+   - Satori supports a [limited subset of CSS](https://github.com/vercel/satori?tab=readme-ov-file#css).
+   - You can use the [Satori playground](https://og-playground.vercel.app/) to iterate on your render function
+
+   - Using React:
+
+     ```tsx
+     export function render(): JSX.Element {
+       const title = "";
+       const type: "blog" | "event" = "blog";
+
+       return (
+         <div
+           style={{
+             height: "100%",
+             width: "100%",
+             display: "flex",
+             flexDirection: "column",
+             backgroundColor: "#000",
+             padding: "55px 70px",
+             color: "#fff",
+             fontFamily: "CommitMono",
+             fontSize: 72,
+           }}
+         >
+           <div
+             style={{
+               marginTop: 96,
+             }}
+           >
+             {title}
+           </div>
+           <div
+             style={{
+               fontSize: 40,
+             }}
+           >
+             {type === "blog" ? "by Jerred Shepherd" : ""}
+           </div>
+         </div>
+       );
+     }
+     ```
+
+   - Using vanilla JavaScript:
+
+     ```typescript
+     export function render() ({
+         type: "div",
+         props: {
+             style: {
+             height: "100%",
+             width: "100%",
+             display: "flex",
+             flexDirection: "column",
+             backgroundColor: "#000",
+             padding: "55px 70px",
+             color: "#fff",
+             fontFamily: "CommitMono",
+             fontSize: 72,
+             },
+             children: [
+             {
+                 type: "div",
+                 props: {
+                 style: {
+                     marginTop: 96,
+                 },
+                 children: title,
+                 },
+             },
+             {
+                 type: "div",
+                 props: {
+                 style: {
+                     fontSize: 40,
+                 },
+                 children: type === "blog" ? "by Jerred Shepherd" : "",
+                 },
+             },
+             ],
+         },
+     });
+     ```
+
+1. Add this integration to your Astro config
+
+   ```typescript
+   import satoriOpenGraph from "satro-satori";
+
+   // You'll need to provide _every_ font that you use with Satori. Satori does not have any fonts by default.
+   const commitMono = fs.readFileSync("public/fonts/CommitMono/CommitMono-450-Regular.otf");
+
+   // https://astro.build/config
+   export default defineConfig({
+       integrations: [satoriOpenGraph(options: {
+           fonts: [
+             {
+               name: "Commit Mono",
+               data: commitMono,
+               weight: 400,
+               style: "normal",
+             },
+           ],
+       }, render)],
+   });
+   ```
+
+   The integration will generate a `openGraph.png` file next to every `.html` in your Astro site.
+
+1. Update your layout to add the appropriate `meta` tags. The [OpenGraph site](https://ogp.me/) has more information about valid tags. At a minimum, you should define the tags below.
+
+```astro
+---
+const { url } = Astro;
+---
+
+<meta property="og:title" content="" />
+<meta property="og:type" content="" />
+<meta property="og:url" content={url} />
+<meta property="og:image" content={url.toString()}openGraph.png} />
+```
+
+1. Confirm that your OpenGraph images are accessible. After you deploy these changes, navigate to [OpenGraph.xyz](https://www.opengraph.xyz/) and test your site.
+
+## Resources
+
+- https://dietcode.io/p/astro-og/
+- https://github.com/sdnts/dietcode/blob/914e3970f6a0f555113768b12db3229dd822e6f1/astro.config.ts#L55

eslint.config.js

@@ -0,0 +1,16 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.strictTypeChecked,
+  ...tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+);