{"id":13318739,"url":"https://github.com/itbruno/ogimage-generator","last_synced_at":"2025-03-11T02:31:40.402Z","repository":{"id":78158451,"uuid":"561605315","full_name":"itbruno/ogimage-generator","owner":"itbruno","description":"Open-graph image generator with @vercel/og","archived":false,"fork":false,"pushed_at":"2024-04-26T15:35:13.000Z","size":144,"stargazers_count":2,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-07-29T19:23:09.676Z","etag":null,"topics":["nextjs","og-image","og-image-generator","open-graph","typescript"],"latest_commit_sha":null,"homepage":"https://ogimage-generator-sigma.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itbruno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-04T03:50:36.000Z","updated_at":"2024-07-29T19:23:09.677Z","dependencies_parsed_at":null,"dependency_job_id":"b9a465e1-32c6-43e4-bd76-0995994b0aa7","html_url":"https://github.com/itbruno/ogimage-generator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itbruno%2Fogimage-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itbruno%2Fogimage-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itbruno%2Fogimage-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itbruno%2Fogimage-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itbruno","download_url":"https://codeload.github.com/itbruno/ogimage-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242959403,"owners_count":20212971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","og-image","og-image-generator","open-graph","typescript"],"created_at":"2024-07-29T18:30:52.908Z","updated_at":"2025-03-11T02:31:40.396Z","avatar_url":"https://github.com/itbruno.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OGImage generator\n\nThis is a open-source project to generate dynamic Open-graph images using [@vercel/og](https://github.com/vercel/og-image) package.\n\nThe purpose is generate custom open-graph images passing an custom themes as param\n- 🔗 [Demo 1](https://ogimage-generator-sigma.vercel.app/api/ogimage?title=Guia%20completo%20de%20como%20vender%20sem%20estoque?\u0026image=https://d1ih8jugeo2m5m.cloudfront.net/2020/11/Como-vender-sem-ter-um-estoque-proprio.jpg\u0026author=Victoria%20Salemi) with default theme\n  - Ex.: `/api/ogimage?title=something\u0026subtitle=Anything`\n \n- 🔗 [Demo 2](https://ogimage-generator-sigma.vercel.app/api/ogimage?title=Guia%20completo%20de%20como%20vender%20sem%20estoque?\u0026image=https://d1ih8jugeo2m5m.cloudfront.net/2020/11/Como-vender-sem-ter-um-estoque-proprio.jpg\u0026author=Victoria%20Salemi\u0026theme=blog) with custom theme as param ( \u0026theme=blog)\n  - Ex.: `/api/ogimage?title=something\u0026subtitle=Anything\u0026theme=blog`\n\n## Requirements\n\n- Node.js \u003e16\n\n## Creating a custom theme\n\nThe all themes are created on `./src/og-themes` folder. To create a new theme and keep available to use on api, follow these steps:\n\n### Creating a new theme as React component\n\nGo to `./src/og-themes` and create a new file. Ex.: `EventTheme.tsx`\n\n```jsx\n// ./src/og-themes/EventTheme.tsx\n\ninterface EventThemeProps {\n  params: {\n    title: string,\n    subtitle: string\n  };\n}\n\nfunction EventTheme({ params }: EventThemeProps) {\n  return (\n    \u003cdiv\n      style={{\n        width: 1200,\n        height: 630,\n        alignItems: 'center',\n        justifyContent: 'center',\n        display: 'flex',\n        backgroundColor: '#ffcc00',\n        fontSize: 40\n      }}\n    \u003e\n      {params.title}\n      \u003cbr /\u003e\n      {params.subtitle}\n    \u003c/div\u003e\n  );\n}\n\nexport { EventTheme };\n```\n\nAfter new theme already created, export it on `./src/og-themes/index.tsx`\n\n```js\nexport { EventTheme } from '@themes/EventTheme';\n```\n\nAnd now you already to add the new theme to be available to use on api\n\nAdd a new case on `./src/pages/api/ogimage.tsx`\n\n```js\n// ./src/pages/api/ogimage.tsx\nimport { EventTheme } form '@themes/index';\n\n...\n\nswitch (PARAMS.theme) {\n    case 'event':\n      selectedTheme = \u003cEventTheme params={PARAMS} /\u003e;\n      break;\n    default:\n      selectedTheme = \u003cDefaultTheme params={PARAMS} /\u003e;\n      break;\n  }\n```\n\nNow you can run and test your new theme at localhost\n\n## Get started\n\nThis project is running with NextJS, to run locally, install all dependencies\nI use yarn to run all commands, but you can use npm if you want\n\n**Install dependencies**\n\n```sh\n$ yarn install\n```\n\n**Run localhost**\n\n```sh\n$ yarn dev\n```\n\nSample\n\n```sh\nhttp://localhost:3000/api/ogimage?title=My awesome title\u0026subtitle=Front-end Developer\u0026theme=event\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitbruno%2Fogimage-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitbruno%2Fogimage-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitbruno%2Fogimage-generator/lists"}