{"id":13533957,"url":"https://github.com/agneym/generate-og-image","last_synced_at":"2025-07-29T14:11:21.043Z","repository":{"id":43719515,"uuid":"207881909","full_name":"agneym/generate-og-image","owner":"agneym","description":"Generate open graph images with Github Action from Markdown files","archived":false,"fork":false,"pushed_at":"2023-10-19T00:50:11.000Z","size":2203,"stargazers_count":41,"open_issues_count":9,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-16T01:18:50.374Z","etag":null,"topics":["actions","github-actions","node","opengraph"],"latest_commit_sha":null,"homepage":"https://github.com/marketplace/actions/generate-og-image","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agneym.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-09-11T18:38:59.000Z","updated_at":"2025-02-07T18:58:49.000Z","dependencies_parsed_at":"2023-10-16T12:16:56.240Z","dependency_job_id":"6b43aa37-3338-4286-9836-7e2cb7087c36","html_url":"https://github.com/agneym/generate-og-image","commit_stats":{"total_commits":186,"total_committers":5,"mean_commits":37.2,"dds":0.3709677419354839,"last_synced_commit":"e40c28e99aaf6c7c88611ae1c16c192e15871524"},"previous_names":["boywithsilverwings/generate-og-image"],"tags_count":10,"template":false,"template_full_name":"actions/typescript-action","purl":"pkg:github/agneym/generate-og-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agneym%2Fgenerate-og-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agneym%2Fgenerate-og-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agneym%2Fgenerate-og-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agneym%2Fgenerate-og-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agneym","download_url":"https://codeload.github.com/agneym/generate-og-image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agneym%2Fgenerate-og-image/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266240773,"owners_count":23898062,"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":["actions","github-actions","node","opengraph"],"created_at":"2024-08-01T07:01:24.745Z","updated_at":"2025-07-29T14:11:21.011Z","avatar_url":"https://github.com/agneym.png","language":"TypeScript","funding_links":[],"categories":["Community Resources","TypeScript"],"sub_categories":["Frontend Tools"],"readme":"# Open Graph Image Generator\n\n![](https://github.com/BoyWithSilverWings/generate-og-image/workflows/Run%20tests/badge.svg)\n\nGenerates open graph images for your blog with Github Actions.\n\nThis github action scans your PR for changes to `md` or `mdx` files, reads frontmatter configuration from them and generates images for your SEO.\n\nIf looks very bland without an image when you share the URL, but adding a cover pic with nothing do with your article also does not suit you well. Here is a Github Action based generator that got you covered.\n\nIn your action file:\n\n```yml\nname: \"Generate OG Images\"\non: pull_request\n\njobs:\n  generate_og_job:\n    runs-on: ubuntu-latest\n    name: Generate OG Images\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v1\n      - name: Generate Image\n        uses: BoyWithSilverWings/generate-og-image@1.0.3\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          GITHUB_CONTEXT: ${{ toJson(github) }}\n        with:\n          path: src/images/post-images/\n```\n\nFor configuring the parameters, add following fields to the frontmatter:\n\n```md\n---\nogImage:\n  title: \"Things you don't know\"\n  subtitle: \"There must be something\"\n  imageUrl: \"https://example.com/image-url.jpg\"\n  background: \"yellow\"\n  fontColor: \"rgb(0, 0, 0)\"\n  fontSize: \"100%\"\n---\n```\n\n## Frontmatter Props\n\n| Props      |               Description               | Required |                                Default                                |\n| ---------- | :-------------------------------------: | :------: | :-------------------------------------------------------------------: |\n| title      |           Title in the image            |          |                                                                       |\n| subtitle   |          Subtitle in the image          |          |                                                                       |\n| imageUrl   |     The image thumbnail on the top      |          |                                                                       |\n| background | Background color, gradient or image url |          |                                                                       |\n| fontColor  |         any css supported color         |          |                                                                       |\n| fontSize   |              the font size              |          |                                                                       |\n| fileName   |            name of the file             |          | title prop in [kebab](https://lodash.com/docs/4.17.15#kebabCase) case |\n\nWorks only with Pull Requests and `md` and `mdx` files.\n\n## Repository level Props\n\nThese are props that you can configure in the action file to customise the working.\n\n| Props        |               Description                               | Required |\n| ------------ | :-----------------------------------------------------: | :------: |\n| path         |      Path to place the image URL in                     |   true   |\n| commitMsg    |    Commit message when image is added                   |          |\n| background   | Background color, gradient or image url                 |          |\n| fontColor    |         any css supported color                         |          |\n| fontSize     |              the font size                              |          |\n| componentUrl | Web Component to be rendered for output.                |          |\n| botComments  | Whether a comment with a preview image should be posted |\n\nFrontmatter level props on a document always takes precedence over Repository level props.\n\n## How do I customise the output?\n\n1. **I need a gradient background**\n\n   Just as in CSS your frontmatter or Repo level prop can contain:\n\n   ```\n   background: 'linear-gradient(to right, #ec008c, #fc6767)'\n   ```\n\n2. **What if I need an image as background?**\n\n   Write the CSS for it.\n\n   ```\n   background: 'url(https://example.com/image.png)'\n   ```\n\n3. **What about font sizes?**\n\n   you can customise the repository level or frontmatter `fontSize` props which defaults to 100%. The heading and paragraph font sizes vary depending on it.\n\n   ```\n   fontSize: 120%;\n   ```\n\n4. **I need an emoji instead of image**\n\n   You can pass in the unicode representation of the emoji from the [List](https://unicode.org/emoji/charts/full-emoji-list.html) in `imageUrl` prop.\n\n5. **I need to format the title**\n\n   The `title` prop supports markdown, feel _free_ to _use_ it.\n   \n6. **I don't want these preview image bot comments**\n\n   the `botComments` repo prop should be set to `\"no\"`\n\n### I need more customisation on the output.\n\nThe generator uses a web component to create the default output and provides a repository level prop to customise this web component.\n\nThe component currently being used is on [Github](https://github.com/BoyWithSilverWings/og-image-element) and published on [NPM](https://www.npmjs.com/package/@agney/og-image-element). The default URL is from [Unpkg](https://unpkg.com/) with [https://unpkg.com/@agney/og-image-element@0.2.0](https://unpkg.com/@agney/og-image-element@0.2.0).\n\nYou can substitute the same with `componentUrl` input in your workflow file. For more info on creating this web component, visit [source](https://github.com/BoyWithSilverWings/generate-og-image/blob/304fd9aa0b21b01b0fdc8a3d1a63a19ffdc1840d/demo/test-file.jpg)\n\n## Contributing\n\nSee [docs](./docs/contributors.md)\n\n## Credits\n\n1. [Zeit OG Image](https://github.com/zeit/og-image)\n\n   Serverless based open graph image generator from zeit\n\n2. [Zeit NCC](Compiler)\n\n3. [Github Image Actions](https://github.com/calibreapp/image-actions)\n\n   For some utils to copy from.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagneym%2Fgenerate-og-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagneym%2Fgenerate-og-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagneym%2Fgenerate-og-image/lists"}