{"_id":"@adamyonk/sanity-plugin-generate-ogimage","name":"@adamyonk/sanity-plugin-generate-ogimage","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.6":{"name":"@adamyonk/sanity-plugin-generate-ogimage","version":"1.0.6","description":"This is a Sanity Studio v3 plugin.","keywords":["sanity","sanity-plugin"],"homepage":"https://github.com/adamyonk/sanity-plugin-generate-ogimage#readme","bugs":{"url":"https://github.com/adamyonk/sanity-plugin-generate-ogimage/issues"},"repository":{"type":"git","url":"git+ssh://git@github.com/adamyonk/sanity-plugin-generate-ogimage.git"},"license":"MIT","author":{"name":"Katerina Baliasnikova","email":"catherine_river@icloud.com"},"exports":{".":{"source":"./src/index.ts","require":"./dist/index.js","import":"./dist/index.esm.mjs","default":"./dist/index.esm.mjs"},"./package.json":"./package.json"},"main":"./dist/index.js","module":"./dist/index.esm.js","sideEffects":true,"scripts":{"build":"run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict","clean":"rimraf dist","format":"prettier --write --cache --ignore-unknown .","link-watch":"plugin-kit link-watch","lint":"eslint .","prepublishOnly":"run-s build","watch":"pkg-utils watch --strict"},"dependencies":{"@sanity/incompatible-plugin":"^1.0.4","downloadjs":"^1.4.7","html-to-image":"^1.11.11","npm-check-updates":"^16.14.18","stylis":"^4.3.1","vite-plugin-node-polyfills":"^0.21.0"},"devDependencies":{"@sanity/pkg-utils":"^6.4.1","@sanity/plugin-kit":"^3.1.12","@types/downloadjs":"^1.4.6","@types/react":"^18.2.75","@typescript-eslint/eslint-plugin":"^7.6.0","@typescript-eslint/parser":"^7.6.0","eslint":"^8.56.0","eslint-config-prettier":"^9.1.0","eslint-config-sanity":"^7.1.2","eslint-plugin-prettier":"^5.1.3","eslint-plugin-react":"^7.34.1","eslint-plugin-react-hooks":"^4.6.0","npm-run-all":"^4.1.5","prettier":"^3.2.5","prettier-plugin-packagejson":"^2.4.14","react":"^18.2.0","react-dom":"^18.2.0","react-is":"^18.2.0","rimraf":"^5.0.5","sanity":"^3.37.2","styled-components":"^6.1.8","typescript":"^5.4.5"},"peerDependencies":{"react":"^18","sanity":"^3"},"engines":{"node":">=14"},"sanityPlugin":{"verifyPackage":{"module":false}},"_id":"@adamyonk/sanity-plugin-generate-ogimage@1.0.6","gitHead":"54e1e6c1515369a1a2d12f1e4d7a1ec6a7dca4e8","types":"./dist/index.d.ts","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-Mf5O2qgvGcr5g8vMkzN9cNT6MpH7j1Fgq6+p0yYtoEcHnYakymqp7ZSVhgrBTyYDOjsg1HaCm5eb6wDQdHTVDA==","shasum":"33930d7005f159680c010d5e2e7989497a95f6c2","tarball":"https://registry.npmjs.org/@adamyonk/sanity-plugin-generate-ogimage/-/sanity-plugin-generate-ogimage-1.0.6.tgz","fileCount":23,"unpackedSize":18041398,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHo0U+vfXI96wjwS0m/fweQ0G69rxO3SzDIiOse7H80EAiEA/A10ledy3xDfod0vxiXcb+o90aMk7xDAMcQlNo7RvE0="}]},"_npmUser":{"name":"adamyonk","email":"adamyonk@me.com"},"directories":{},"maintainers":[{"name":"adamyonk","email":"adamyonk@me.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sanity-plugin-generate-ogimage_1.0.6_1752595819237_0.004070620292495386"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-15T16:10:19.116Z","1.0.6":"2025-07-15T16:10:19.569Z","modified":"2025-07-15T16:10:19.893Z"},"maintainers":[{"name":"adamyonk","email":"adamyonk@me.com"}],"description":"This is a Sanity Studio v3 plugin.","homepage":"https://github.com/adamyonk/sanity-plugin-generate-ogimage#readme","keywords":["sanity","sanity-plugin"],"repository":{"type":"git","url":"git+ssh://git@github.com/adamyonk/sanity-plugin-generate-ogimage.git"},"author":{"name":"Katerina Baliasnikova","email":"catherine_river@icloud.com"},"bugs":{"url":"https://github.com/adamyonk/sanity-plugin-generate-ogimage/issues"},"license":"MIT","readme":"# Sanity Plugin: Generate OG Image\n\n> This is a **Sanity Studio v3** plugin for generating OG images.\n\nBased on [sanity-plugin-asset-source-ogimage](https://www.npmjs.com/package/sanity-plugin-asset-source-ogimage) for Sanity Studio v2\n\nThis Sanity plugin provides a tool to generate Open Graph (OG) images for your Sanity documents. It's designed to be flexible, allowing you to define custom layouts for the generated images.\n\n## Features\n\n- **Custom Layouts**: Craft your own layouts for the images.\n- **Live Preview**: Witness changes in real-time as you tweak the layout and content.\n- **Download & Generate**: Create the image and either download it instantly or integrate it within your Sanity documents.\n\n## Installation\n\n🚨 You need `@sanity 3.5.0` or greater and `react 18.0.0` or greater\n\n```sh\nnpm install @catherineriver/sanity-plugin-generate-ogimage\n```\n\n## Basic Usage\n\n### As a studio tool\n\nUse it in `sanity.config.ts` (or .js):\n\n```ts\nimport {defineConfig} from 'sanity'\nimport {generateOGImage} from 'sanity-plugin-generate-ogimage'\n\nexport default defineConfig({\n  //...\n  plugins: [generateOGImage()],\n})\n```\n\n### As custom source in image field\n\nUse it as [source on a single type](https://www.sanity.io/docs/custom-asset-sources#e2077d7f8ae2)\n\n```jsx\n{\n    name: 'ogImage',\n    title: 'OG image',\n    type: 'image',\n    options: {\n      sources: [\n        {\n          name: 'sharing-image',\n          title: 'Generate Image',\n          component: (props) => (\n            <MediaEditor {...props} darkMode={true} layouts={[OgImageEditorLayout]} />\n          ),\n        },\n      ],\n  }\n}\n```\n\n## Advanced Usage with Custom Layouts\n\nYou can define custom layouts for your generated images. A layout is essentially a React component that receives certain props and renders the desired output.\n\nHere's a basic structure of a layout:\n\n```jsx\nimport React from \"react\";\nimport { LayoutData } from \"sanity-plugin-generate-ogimage/types\";\n\nconst MyCustomLayout: React.FC<LayoutData> = ({ title, subtitle, logo }) => {\n  // Your rendering logic here\n};\n\nexport default MyCustomLayout;\n```\n\nTo use your custom layouts, modify your sanity.config.ts (or .js) as follows:\n\n```jsx\nimport {defineConfig} from 'sanity'\nimport {generateOGImage} from 'sanity-plugin-generate-ogimage'\nimport MyCustomLayout from './path-to-your-layout'\n\nexport default defineConfig({\n  // ... other config\n  plugins: [generateOGImage({layouts: [MyCustomLayout]})],\n})\n```\n\n## Components\n\nHere's a brief overview of the main components in the repository:\n\n- `Editor`: The main editor component where users can select a layout, modify content, and generate the image.\n- `Image`: A utility component to display Sanity images.\n- `LayoutsPicker`: Allows users to pick from multiple available layouts.\n- `EditorField`: Represents individual fields in the editor, like text inputs, switches, etc.\n- `useEditorLogic`: A custom hook that encapsulates the logic for generating and downloading the image.\n- `imageBuilder`: A utility to build image URLs using Sanity's image URL builder.\n\n## License\n\n[MIT](LICENSE) © Katerina Baliasnikova\n\n## Develop & test\n\nThis plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)\nwith default configuration for build & watch scripts.\n\nSee [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)\non how to run this plugin with hotreload in the studio.\n\n<a href=\"https://www.buymeacoffee.com/catherineriver\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"></a>\n","readmeFilename":"README.md","_rev":"1-5022639aec81c8c3a4dc8b14023774fb"}