DEV Community

Cover image for Street Programmer: Create Stunning Banners with Github Action
Imam Ali Mustofa
Imam Ali Mustofa

Posted on

Street Programmer: Create Stunning Banners with Github Action

Are you tired of spending time creating banners for your articles? Look no further than the Create Banner Image Github Action and Rest API! With just one step, you can create stunning banners for your articles.

The Github Action is easy to use and integrates seamlessly with your workflow. Simply add the action to your workflow and provide the necessary inputs, such as your Github token, canonical name, gradient colors, article name, article category, and emoji.

But that's not all - the Rest API is also available for deployment on your server. With a simple curl command, you can generate a banner for your article with the same ease as the Github Action.

No more wasting time designing banners - let the Create Banner Image Github Action and Rest API handle it for you. Try it out today and see the difference it can make in your article presentation!

Let's say we have a GitHub repository for a blog or website, and we want to automatically generate banner images for each new article that we publish. We can use the "Create Banner Image - Github Action & Rest API" tool to achieve this.

Here's an example flow of how this might work:

  1. Create a new article for the website or blog and commit it to the GitHub repository.
  2. Add the necessary metadata to the article file, including the article title, category, and any other relevant information. This metadata will be used to generate the banner image.
  3. Create a new GitHub Actions workflow file that includes the "Create Banner Image" job. This job should be triggered whenever a new article is committed to the repository.
  4. In the job definition, specify the input parameters for the "Create Banner Image" tool. These include the GitHub access token, the canonical name of the article (which is used to generate the image file name), the gradient colors to use for the image background, the article name, category, and an emoji to include in the image.
  5. When the job runs, it will use the input parameters to call the "Create Banner Image" REST API, which will generate the banner image and save it to the repository.
  6. Once the banner image is generated and saved, it can be included in the article itself, either by referencing the file path or by embedding it directly in the HTML.

With this flow, every time we publish a new article, a banner image will automatically be generated and saved to the repository, making it easy to add visual interest and attract readers to our content.

GitHub logo darkterminal / create-banner-image

An easy way to make banners from articles that you make with only 1 step!

Create Banner Image - Github Action & Rest API

Create Banner Image - Github Action & Rest API

An easy way to make banners from articles that you make with only 1 step!

Github Action Usage

on: workflow_dispatch

jobs:
    create_banner_image:
        name: "Create Banner Image"
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@main
            - uses: darkterminal/create-banner-image@master # Uses an action in the root directory
              with:
                github-token: ${{ secrets.GITHUB_TOKEN }}
                canonical-name: 'create-banner-image-from-grithub-action'
                gradient-colors: '#fc00ff,#00dbde'
                article-name: 'Create Banner Image From Github Action'
                article-category: 'open-source'
                emoji: '🎉'
Enter fullscreen mode Exit fullscreen mode

REST API Usage (Deploy on your server)

Legacy Generator

  • endpoint: /generator
  • method: POST
  • fields:
    • canonicalName slug string
    • articleName article name / title
    • gradientColors array of strings
    • articleCategory article category
    • emoji string

Example

curl -X POST \
  'https://<base-url>/generator' \
  --header 'Accept: */*' \
  --header 'Content-Type: application/json' \
  --data-raw '{
  "canonicalName": "metaphor-website-live"
  "articleName":
…

Top comments (0)