{"id":16123957,"url":"https://github.com/kentaro-m/catchy-image","last_synced_at":"2025-09-07T14:05:06.803Z","repository":{"id":43991154,"uuid":"233231597","full_name":"kentaro-m/catchy-image","owner":"kentaro-m","description":":art: A Node.js module for dynamically generating social cards (open graph images).","archived":false,"fork":false,"pushed_at":"2022-02-13T01:40:09.000Z","size":5045,"stargazers_count":47,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T09:20:57.892Z","etag":null,"topics":["my-portfolio","nodejs","open-graph","open-graph-protocol","twitter-cards"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/catchy-image","language":"JavaScript","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/kentaro-m.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"kentaro-m"}},"created_at":"2020-01-11T12:54:56.000Z","updated_at":"2024-07-12T07:13:37.000Z","dependencies_parsed_at":"2022-09-08T07:01:08.374Z","dependency_job_id":null,"html_url":"https://github.com/kentaro-m/catchy-image","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentaro-m%2Fcatchy-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentaro-m%2Fcatchy-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentaro-m%2Fcatchy-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentaro-m%2Fcatchy-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kentaro-m","download_url":"https://codeload.github.com/kentaro-m/catchy-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243926063,"owners_count":20369911,"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":["my-portfolio","nodejs","open-graph","open-graph-protocol","twitter-cards"],"created_at":"2024-10-09T21:19:17.362Z","updated_at":"2025-03-18T12:31:34.042Z","avatar_url":"https://github.com/kentaro-m.png","language":"JavaScript","funding_links":["https://github.com/sponsors/kentaro-m"],"categories":[],"sub_categories":[],"readme":"# catchy-image\n![npm](https://img.shields.io/npm/v/catchy-image)\n![node](https://img.shields.io/node/v/catchy-image)\n![npm](https://img.shields.io/npm/dt/catchy-image)\n[![GitHub license](https://img.shields.io/github/license/kentaro-m/catchy-image)](https://github.com/kentaro-m/catchy-image/blob/master/LICENSE)\n\nA Node.js module for dynamically generating Open Graph images.\n\n## :art: Example\nIt can create an image like this by using the module.\n\n![An Open Graph image](https://raw.githubusercontent.com/kentaro-m/catchy-image/master/thumbnail.png)\n\n## :arrow_forward: Usage\n**Executing this module requires Node v12.**\n\nInstall a package using the npm CLI.\n\n```bash\n$ npm install --save catchy-image\n```\n\nWrite codes for importing a module, setting up options for generating an image, and executing a module.\n\n```js\nconst catchy = require('catchy-image')\n\nasync function run() {\n    const options = {\n      output: {\n        directory: '',\n        fileName: 'thumbnail.png',\n      },\n      image: {\n        width: 1200,\n        height: 630,\n        backgroundColor: '#222639',\n        // backgroundImage: require.resolve('./images/background.jpg'),\n      },\n      style: {\n        title: {\n          fontFamily: 'Noto Sans CJK JP',\n          fontColor: '#bb99ff',\n          fontWeight: 'bold',\n          fontSize: 64,\n          paddingTop: 100,\n          paddingBottom: 200,\n          paddingLeft: 150,\n          paddingRight: 150,\n        },\n        author: {\n          fontFamily: 'Noto Sans CJK JP',\n          fontColor: '#f0f5fa',\n          fontWeight: '400',\n          fontSize: 42,\n        },\n      },\n      meta: {\n        title: 'How to dynamically create  an Open Graph image.',\n        author: 'Kentaro Matsushita',\n      },\n      fontFile: [\n        {\n          path: require.resolve('./fonts/NotoSansCJKjp-Bold.otf'),\n          family: 'Noto Sans CJK JP',\n          weight: 'bold',\n        },\n        {\n          path: require.resolve('./fonts/NotoSansCJKjp-Regular.otf'),\n          family: 'Noto Sans CJK JP',\n          weight: '400',\n        },\n      ],\n      iconFile: require.resolve('./images/avatar.jpeg'),\n      timeout: 10000,\n    }\n\n    const output = await catchy.generate(options)\n    console.log(`Successfully generated: ${output}`)\n  } catch (error) {\n    console.error(error)\n  }\n}\n\nrun()\n```\n\n## :gear: Options\n\n### Output\n| name                    | required | description                                                 |\n|-------------------------|----------|-------------------------------------------------------------|\n| `directory`      | `true`     | directory path to output an image.                          |\n| `fileName`       | `true`     | file name to output an image.                               |\n\n### Image\n\n\n| name                    | required | description                                                 |\n|-------------------------|----------|-------------------------------------------------------------|\n| `width`           | `true`     | width of a generated image.                                 |\n| `height`          | `true`     | height of a generated image.                                |\n| `backgroundColor` | `true`     | hex value for background color.                             |\n| `backgroundImage` |          | image path using as the background (specify relative path). |\n\n### Style\n\n#### Title\n| name          | required | description                                               |\n|---------------|----------|-----------------------------------------------------------|\n| `fontFamily`    | `true`     | font family for title text                                |\n| `fontColor`     | `true`     | hex value for text color.                                 |\n| `fontWeight`    | `true`     | font weight for title text.                               |\n| `fontSize`      | `true`     | font size for title text.                                 |\n| `paddingTop`    | `true`     | height of the padding area on the top of a title text.    |\n| `paddingBottom` | `true`     | height of the padding area on the bottom of a title text. |\n| `paddingLeft`   | `true`     | width of the padding area on the left of a title text.    |\n| `paddingRight`  | `true`     | width of the padding area on the right of a title text.   |\n\n#### Author\n| name       | required | description                  |\n|------------|----------|------------------------------|\n| `fontFamily` | `true`     | font family for author text  |\n| `fontColor`  | `true`     | hex value for text color.    |\n| `fontWeight` | `true`     | font weight for author text. |\n| `fontSize`   | `true`     | font size for author text.   |\n\n### Meta\n| name   | required | description                            |\n|--------|----------|----------------------------------------|\n| `title`  | `true`     | title text to be placed on the image.  |\n| `author` | `true`     | author text to be placed on the image. |\n\n### Font File\n| name   | required | description                                              |\n|--------|----------|----------------------------------------------------------|\n| `path`   | `true`     | file path of font data (specify relative path).          |\n| `family` | `true`     | font family name to register custom font to this module. |\n| `weight` | `true`     | font weight to register custom font to this module.      |\n\n### Icon File\n| name     | required | description                                  |\n|----------|----------|----------------------------------------------|\n| `iconFile` | `true`     | file path of icon to be placed on the image. |\n\n### Timeout\n| name    | required | description                                                    |\n|---------|----------|----------------------------------------------------------------|\n| `timeout` | `true`     | the number of milliseconds to wait until complete the process. |\n\n## :construction_worker: Development\n```bash\n$ npm install\n# Execute an example script (src/example.js)\n$ npm run build \u0026\u0026 npm run dev\n```\n\n## Tests\n```\n$ docker build -t snapshot-test:0.1.1 .\n$ docker run -v `pwd`/test:/usr/src/app/test snapshot-test:0.1.1\n```\n\n## :memo: Licence\nMIT\n\n## :heart: Acknowledgments\nInspired by [@shuhei](https://github.com/shuhei)'s article.\n\n[Generating Twitter Card Images from Blog Post Titles - Shuhei Kagawa](https://shuheikagawa.com/blog/2019/10/13/generating-twitter-card-images/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentaro-m%2Fcatchy-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkentaro-m%2Fcatchy-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentaro-m%2Fcatchy-image/lists"}