GithubHelp home page GithubHelp logo

micheleriva / gauguin Goto Github PK

View Code? Open in Web Editor NEW
116.0 6.0 14.0 1.23 MB

๐ŸŽจ High performances Golang server for generating social share images dynamically (beta).

Home Page: https://micheleriva.gitbook.io/gauguin

License: GNU General Public License v3.0

Go 95.90% Dockerfile 3.05% Makefile 1.05%
golang go chromedp opengraph opengraph-tags opengraph-data opengraph-images gauguin

gauguin's Introduction

Gauguin - Generate opengraph images at runtime

Gauguin - Generate dynamic OpenGraph or social images in real-time | Product Hunt

Gauguin (pronounced /หˆษกoสŠษกรฆฬƒ/) is an high performances Golang server that generates dynamic opengraph images at runtime.

๐ŸŽ‰ Read the quickstart post here!

Sponsors

Gauguin in 6 easy steps

  1. Create a configuration file called gauguin.yaml
version: 0.0.1
routes:
  - path: /articles/opengraph
    params:
      - title
      - author
      - imgUrl
    size: 1200x630
    template: ./templates/article.tmpl
  - path: /author/opengraph
    params:
      - username
      - imgUrl
    size: 1200x630
    template: ./templates/user.tmpl
  1. For each route, create a Golang tmpl file (named the same way you named it inside the configuration file):
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        font-family: Arial;
        color: #fff;
      }
      .article-template {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 1200px;
        height: 630px;
        background: #001f1c;
      }
      h1 {
        margin: 0;
        font-size: 32px;
      }
      img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        border-radius: 15px;
        margin-bottom: 25px;
      }
    </style>
  </head>
  <body>
    <div class="article-template">
      <img src="{{.imgUrl}}" />
      <h1>{{.title}}</h1>
      <p>Written by <b>{{.author}}</b></p>
    </div>
  </body>
</html>
  1. Copy this docker-compose file locally and run docker-compose up -d
  2. Choose a title, an author and an image for your article opengraph image. Pass them via querystrng to the route you defined in your configuration file.
  3. Go to http://localhost:5491/articles/opengraph?author=Bojack%20Horseman&title=A%20Post%20About%20my%20Garden&imgUrl=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525498128493-380d1990a112%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26auto%3Dformat%26fit%3Dcrop%26w%3D300%26q%3D80
  4. Admire the following image:

Gauguin opengraph image example

Documentation

I'm currently writing more documentation, it will be available on Gitbook: http://micheleriva.gitbook.io/gauguin

Env Variables

PORT=<number>         # HTTPS Port
DOCKERIZED=<boolean>  # Set to true if running Gauguin in Docker
CHROME_URL=<string>   # Optional, the URL of the Chrome REST Debugging APIs 

License

Gauguin is distributed under the GPLv3 open source license.

gauguin's People

Contributors

dependabot[bot] avatar ilteoood avatar lastzero avatar micheleriva avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

gauguin's Issues

Possible to have arrays as query params?

It would be great if we could pass arrays into the query parameters, something like:

?var[]=string1&var[]=string2&var[]=string3

So we can then do:

<ul>
  {{ range $key, $value := .var }}
     <li>{{ $value }}</li>
  {{ end }}
</ul>

I'm looking at reducing the amount of duplicated elements in the templates, so looping over a range would be really helpful in this case.

Please note: I'm a complete novice at golang, so sorry If the above example wouldn't work.

Add afterResponse hook

Is your feature request related to a problem? Please describe.
We want to add a hook to be called before serving the image.

Describe the solution you'd like
We want to call an HTTP endpoint on controller/controller.go:80. Hooks can be set up in the Gauguin configuration files and should be able to accept custom HTTP headers.

Add beforeResponse hook

Is your feature request related to a problem? Please describe.
We want to add a hook to be called before serving the image.

Describe the solution you'd like
We want to call an HTTP endpoint on controller/controller.go:79. Hooks can be set up in the Gauguin configuration files and should be able to accept custom HTTP headers.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.