Files
blog-nextjs/package.json
gbanyan d7dc279d32 Add dynamic OG image generation for social media sharing
## Features
- Create /api/og route for dynamic Open Graph image generation
- Beautiful gradient design with site branding
- Display post title, description, and tags
- Support for both light and dark themes
- Proper sizing for social media (1200x630)

## Implementation
- Use @vercel/og package for image generation
- Add OpenGraph and Twitter Card metadata to blog posts
- Fallback to localhost for development
- Uses NEXT_PUBLIC_SITE_URL environment variable for production

## Social Media Support
- OpenGraph (Facebook, LinkedIn, etc.)
- Twitter Cards with large image preview
- Article metadata including publish time and tags

Example usage:
/api/og?title=Post+Title&description=Post+Desc&tags=tag1,tag2,tag3

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-20 14:55:36 +08:00

56 lines
1.7 KiB
JSON

{
"name": "personal-home",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "concurrently \"contentlayer2 dev\" \"next dev --turbo\"",
"sync-assets": "node scripts/sync-assets.mjs",
"build": "npm run sync-assets && contentlayer2 build && next build && npx pagefind --site .next && rm -rf public/_pagefind && cp -r .next/pagefind public/_pagefind",
"start": "next start",
"lint": "next lint",
"contentlayer": "contentlayer build"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"dependencies": {
"@emotion/is-prop-valid": "^1.4.0",
"@fortawesome/fontawesome-svg-core": "^7.1.0",
"@fortawesome/free-brands-svg-icons": "^7.1.0",
"@fortawesome/free-solid-svg-icons": "^7.1.0",
"@fortawesome/react-fontawesome": "^3.1.0",
"@vercel/og": "^0.8.5",
"clsx": "^2.1.1",
"contentlayer2": "^0.5.8",
"framer-motion": "^12.23.24",
"gray-matter": "^4.0.3",
"markdown-wasm": "^1.2.0",
"next": "^16.0.3",
"next-contentlayer2": "^0.5.8",
"next-themes": "^0.4.6",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.1",
"tailwind-merge": "^3.4.0",
"unist-util-visit": "^5.0.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.19",
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
"autoprefixer": "^10.4.22",
"concurrently": "^9.2.1",
"eslint": "^9.39.1",
"eslint-config-next": "^16.0.3",
"pagefind": "^1.4.0",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.18",
"typescript": "^5.9.3"
}
}