@ampless/plugin-og-image 0.2.0-alpha.3 → 0.2.0-alpha.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ja.md +71 -0
- package/README.md +4 -1
- package/dist/index.js +2 -0
- package/package.json +20 -6
package/README.ja.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
> English: [README.md](./README.md)
|
|
2
|
+
>
|
|
3
|
+
|
|
4
|
+
# @ampless/plugin-og-image
|
|
5
|
+
|
|
6
|
+
[ampless](https://github.com/heavymoons/ampless) 向け動的 Open Graph 画像生成プラグイン。SNS クローラーが `https://<your-site>/og/<slug>` にアクセスすると、Next.js ルートが投稿タイトル・抜粋・サイト名・オプション画像（テーマバナーまたは投稿本文の最初の画像）を含む JSX カードをレンダリングし、Next.js `ImageResponse` が PNG を返します。WebP / AVIF ソース画像は [@jsquash](https://github.com/jamsinclair/jSquash) で PNG にデコードされるため、Satori が描画できます。
|
|
7
|
+
|
|
8
|
+
> **プレリリース / アルファ版。** v1.0 まではマイナーバージョンでも破壊的変更が入る可能性があります。
|
|
9
|
+
|
|
10
|
+
## インストール
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @ampless/plugin-og-image@alpha
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## 設定
|
|
17
|
+
|
|
18
|
+
`cms.config.ts` に記述します：
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import { defineConfig } from 'ampless'
|
|
22
|
+
import ogImagePlugin, { loadFontFromUrl } from '@ampless/plugin-og-image'
|
|
23
|
+
|
|
24
|
+
export default defineConfig({
|
|
25
|
+
// ...
|
|
26
|
+
plugins: [
|
|
27
|
+
ogImagePlugin({
|
|
28
|
+
// 必須: フォントを少なくとも 1 つ指定。Satori はフォントなしではレンダリングできません。
|
|
29
|
+
fonts: [
|
|
30
|
+
{
|
|
31
|
+
name: 'Inter',
|
|
32
|
+
// 遅延ローダー — ルート呼び出しごとに一度実行され、その後はプロセス内キャッシュ。
|
|
33
|
+
// .ttf / .otf を CDN または public/ から配信してください。
|
|
34
|
+
data: loadFontFromUrl('https://example.com/fonts/Inter-Regular.ttf'),
|
|
35
|
+
weight: 400,
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
// 画像ストラテジー: 'content'（投稿本文の最初の画像）| 'theme'
|
|
39
|
+
// （themeImageUrl を使用）| 'none' | (post) => url | null
|
|
40
|
+
image: 'content',
|
|
41
|
+
// image === 'theme' のときに使用
|
|
42
|
+
// themeImageUrl: 'https://example.com/og-banner.png',
|
|
43
|
+
}),
|
|
44
|
+
],
|
|
45
|
+
})
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Next.js アプリにディスパッチャールートを追加してください（`_shared` テンプレートには `app/og/[slug]/route.ts` が含まれています）。
|
|
49
|
+
|
|
50
|
+
## オプション
|
|
51
|
+
|
|
52
|
+
| オプション | デフォルト | 備考 |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| `fonts` | 必須 | フォントを少なくとも 1 つ指定 |
|
|
55
|
+
| `size` | `{ width: 1200, height: 630 }` | OG カードのサイズ |
|
|
56
|
+
| `image` | `'content'` | `'theme'` / `'content'` / `'none'` / `(post) => url \| null` |
|
|
57
|
+
| `themeImageUrl` | なし | `image === 'theme'` のときに使用 |
|
|
58
|
+
| `render` | 組み込みカード | JSX を完全にカスタマイズする場合にオーバーライド |
|
|
59
|
+
|
|
60
|
+
## 生成されるもの
|
|
61
|
+
|
|
62
|
+
- `metadata()` フック — 各投稿のメタデータに `openGraph.images: [{ url: '<site>/og/<slug>', width, height }]` を注入するため、SNS クローラーがカードを取得する場所を認識します。
|
|
63
|
+
- `ogImage.render(ctx)` — ディスパッチャールートが `next/og` 経由で PNG に変換します。
|
|
64
|
+
|
|
65
|
+
## トラストレベル
|
|
66
|
+
|
|
67
|
+
`untrusted` — Next.js リクエストパスでのみ実行します（Lambda フックなし）。AWS 認証情報は一切使用しません。フォントと投稿画像は通常の HTTPS で取得します。
|
|
68
|
+
|
|
69
|
+
## ライセンス
|
|
70
|
+
|
|
71
|
+
[MIT](../../LICENSE)
|
package/README.md
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
> 日本語版: [README.ja.md](./README.ja.md)
|
|
2
|
+
>
|
|
3
|
+
|
|
1
4
|
# @ampless/plugin-og-image
|
|
2
5
|
|
|
3
6
|
Dynamic Open Graph image generation for [ampless](https://github.com/heavymoons/ampless). SNS crawlers hit `https://<your-site>/og/<slug>`, the Next.js route renders a JSX card containing the post title + excerpt + site name + an optional image (theme banner or the first image in the post body), and Next.js `ImageResponse` returns a PNG. WebP / AVIF source images are decoded to PNG on the fly via [@jsquash](https://github.com/jamsinclair/jSquash) so Satori can paint them.
|
|
@@ -42,7 +45,7 @@ export default defineConfig({
|
|
|
42
45
|
})
|
|
43
46
|
```
|
|
44
47
|
|
|
45
|
-
Add the dispatcher route in your Next.js app (the `_shared` template ships one at `app/
|
|
48
|
+
Add the dispatcher route in your Next.js app (the `_shared` template ships one at `app/og/[slug]/route.ts`).
|
|
46
49
|
|
|
47
50
|
## Options
|
|
48
51
|
|
package/dist/index.js
CHANGED
|
@@ -166,8 +166,10 @@ function ogImagePlugin(options) {
|
|
|
166
166
|
};
|
|
167
167
|
return definePlugin({
|
|
168
168
|
name: "og-image",
|
|
169
|
+
packageName: "@ampless/plugin-og-image",
|
|
169
170
|
apiVersion: 1,
|
|
170
171
|
trust_level: "untrusted",
|
|
172
|
+
capabilities: ["metadata"],
|
|
171
173
|
metadata(post, site) {
|
|
172
174
|
const baseUrl = site.url.replace(/\/$/, "");
|
|
173
175
|
const url = `${baseUrl}/og/${post.slug}`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ampless/plugin-og-image",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.30",
|
|
4
4
|
"description": "Dynamic Open Graph image generation plugin for ampless",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
"./load-image": {
|
|
13
13
|
"import": "./dist/load-image.js",
|
|
14
14
|
"types": "./dist/load-image.d.ts"
|
|
15
|
-
}
|
|
15
|
+
},
|
|
16
|
+
"./package.json": "./package.json"
|
|
16
17
|
},
|
|
17
18
|
"files": [
|
|
18
19
|
"dist",
|
|
@@ -30,22 +31,35 @@
|
|
|
30
31
|
"bugs": "https://github.com/heavymoons/ampless/issues",
|
|
31
32
|
"dependencies": {
|
|
32
33
|
"@jsquash/avif": "^2.1.1",
|
|
33
|
-
"@jsquash/png": "^3.
|
|
34
|
-
"@jsquash/webp": "^1.
|
|
35
|
-
"ampless": "0.
|
|
34
|
+
"@jsquash/png": "^3.1.1",
|
|
35
|
+
"@jsquash/webp": "^1.5.0",
|
|
36
|
+
"ampless": "1.0.0-alpha.30"
|
|
36
37
|
},
|
|
37
38
|
"peerDependencies": {
|
|
38
39
|
"react": "^18 || ^19"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
|
-
"@types/react": "^19.
|
|
42
|
+
"@types/react": "^19.2.15"
|
|
42
43
|
},
|
|
43
44
|
"keywords": [
|
|
44
45
|
"ampless",
|
|
45
46
|
"plugin",
|
|
47
|
+
"ampless-plugin",
|
|
46
48
|
"og-image",
|
|
47
49
|
"opengraph"
|
|
48
50
|
],
|
|
51
|
+
"amplessPlugin": {
|
|
52
|
+
"apiVersion": 1,
|
|
53
|
+
"name": "og-image",
|
|
54
|
+
"trustLevel": "untrusted",
|
|
55
|
+
"capabilities": [
|
|
56
|
+
"metadata"
|
|
57
|
+
],
|
|
58
|
+
"displayName": {
|
|
59
|
+
"en": "OG Image",
|
|
60
|
+
"ja": "OG 画像"
|
|
61
|
+
}
|
|
62
|
+
},
|
|
49
63
|
"scripts": {
|
|
50
64
|
"build": "tsup",
|
|
51
65
|
"dev": "tsup --watch",
|