Make your repositories and READMEs more beautiful!

Thiago

Last update: Nov 19, 2022

Overview

Dynamic Image Renderer API

easy to use - open source

Make your repositories and READMEs more beautiful!

This API generate an image dynamically with your parameters! It's simple to use, customized's and with ready presets!

Navigation

Usage

Basic Usage
Using Presets and Animations

About

About the project
How it works?
How to make a preset
How to make a animation
How to add a gradient

Parameters

Size
Title
Subtitle
Effects
Background

Animations

Pop-up
Fade-in
Pulse
Flicker

Presets

Default
Minimalist
Dracula
Hub
Monokai

About the project

The API it's made with Express and TypeScript.

The idea of the project is make the API stay in continuous progression with new presets and features, then: Pull Requests and ideas are welcome! Read how it works? for more information about the project structure.

This is my first open-source project, so let's share learning! :)

Inspired in Capsule Render project.

Basic usage

[!] API uses a default preset if you don't specify.

In HTML, link the URL in src

<img src="https://dynamic-image-renderer.vercel.app/api?title=myTitle&subtitle=mySubtitle">

In Markdown, you can uses HTML way or the markdown method.

![Image Description](https://dynamic-image-renderer.vercel.app/api?title=myTitle&subtitle=mySubtitle)

Parameters

Size

Parameter	Default
`height`	`300`

Title

Parameter	Default	Description
`title`	`dynamic!`	Title content
`titleColor`	`#111111`	Title color (CSS color: rgb, hex, etc)
`titlePositionX`	`50` (0..100)	Title position in X axis (This position is calculated in percentage)
`titlePositionY`	`50` (0..100)	Title position in Y axias
`titleFontSize`	`65` (px)	Title Font size in pixels
`titleBgOpacity`	`100` (0..100)	Title background opacity
`titleBgColor`	`#fff`	Title background color (CSS color)
`titleShadow`	`false`	If you want title shadow (true, false)

Subtitle

Parameter	Default
`subtitle`	`dynamic image renderer.`
`subtitleColor`	`#EEE`
`subtitlePositionX`	`60` (0..100)
`subtitlePositionY`	`67` (0..100)
`subtitleFontSize`	`20` (px)
`subtitleBgOpacity`	`0` (0..100)
`subtitleBgColor`	`#fff`
`subtitleShadow`	`true`

Effects

Parameter	Default	Description
`glowColor`	`none`	Color used in animations like "flicker" or "pulse", for example.
`textAnimation`	`fadein`	Check available animations here

See more of animations here.

Background

Parameter	Default
`backgroundColor`	`gradient`

Animations

Pop-up (popup)

[!] Played when is loaded.

<img src="https://dynamic-image-renderer.vercel.app/api?textAnimation=popup">

Fade-in (fadein)

[!] Played when is loaded.

<img src="https://dynamic-image-renderer.vercel.app/api?textAnimation=fadein">

Pulse (pulse)

Note: Pulse and Flicker needs a glowColor parameter, because it's "none" by default.

<img src="https://dynamic-image-renderer.vercel.app/api?textAnimation=pulse&glowColor=white">

Flicker (flicker)

Note: Pulse and Flicker needs a glowColor parameter, because it's "none" by default.

<img src="https://dynamic-image-renderer.vercel.app/api?textAnimation=flicker&glowColor=white">

Presets

See each preset configuration in files

Default

<img src="https://dynamic-image-renderer.vercel.app/api">

Minimalist

<img src="https://dynamic-image-renderer.vercel.app/api?preset=minimalist">

Dracula

<img src="https://dynamic-image-renderer.vercel.app/api?preset=dracula">

Hub

Note: You will probably need to change positions of title and subtitle.

<img src="https://dynamic-image-renderer.vercel.app/api?preset=hub">

Monokai

<img src="https://dynamic-image-renderer.vercel.app/api?preset=monokai">

Using presets and animations

Minimalist preset with pulse animation

<img src="https://dynamic-image-renderer.vercel.app/api?preset=minimalist&textAnimation=pulse&glowColor=green&titleBgOpacity=0&title=myTitle&subtitle=my%20subtitle">

Dracula preset with flicker animation

<img src="https://dynamic-image-renderer.vercel.app/api?preset=dracula&title=myTitle&subtitle=my%20subtitle&textAnimation=flicker&glowColor=gray">

How it works?

Basically, this API get the parameters and render as a SVG, in browser, the SVG is shown as an image.

The SVG is rendered as a EJS template, the file is here.

How to make a preset

You can find the presets in presets folder, to add a preset, create a preset with name.ts, and, please, follow the preset struct:

import imageSettings from "../types/imageSettings"
import defaultPreset from "./defaultPreset"

function preset(): imageSettings {
    return {
        // this preset will be a base, all parameters initialize with this preset
        ...defaultPreset(),
        ... { 
            // here, your modifications.
            title: "title" 
        }
    }
}
export default preset

Modify the index file with new preset.

How to make a animation

You can find all animations in animations.ts, this object contains all animations, follow the animations struct:

// ...
animationName: {
    style: "this style will be appliqued in title and subtitle",
    keyframes: `
        this string is reserved to create a animation keyframes
    `
}

How to add a gradient

You can find the gradients in gradients.ts, just add colors for the gradient.

Manage GitHub resources like repositories, teams, members, integrations and workflows with the AWS CDK as Custom Resources in CloudFormation.

CDK Github Manage GitHub resources like repositories, teams, members, integrations and workflows with the AWS CDK as Custom Resources in CloudFormatio

Nov 25, 2022

🚀 📈 Stock market game where the stocks are github repositories

GitHubStonks What is githubstonks ? githubstonks.com Githubstonks is a stock market game where the stocks are popular GitHub repositories. You can buy

Sep 27, 2022

Cloney - Clone all Github repositories from a user or organization

Cloney - Clone all Github repositories from a user or organization How to use $ cloney (users|orgs) (name) Preview Installation Prerequisites NodeJS E

May 28, 2022

Token-gated repositories via GitHub API.

GateRepo About | Implementation | License About Simple implementation of ERC20 token-gating GitHub repositories. Fueled by Mike's tweet. Implementatio

Oct 16, 2022

Keeping pace with the increasing number of matches has become very hard. So here we have News Dribble , making following NBA easier, more exciting and engaging. From News Updates, Standing Tables, Upcoming Games to Minting NFTs for your favorite teams and player! Even more, we can place bets on upcoming games and win Crypto!

News Dribble Timeout! Time for News Dribble!!! Inspiration I am a big fan of NBA and personally I have been looking for platforms where I can get upda

Nov 2, 2022

In this project, you will restructure your Awesome books app code. The goal is to make it more organized by using modules and also practice the ES6 syntax.

Awesome-books-with-ES6 In this project, I restructured Awesome books app code. The goal is to make it more organized by using modules and also practic

Sep 16, 2022

In this project, you will restructure your Awesome books app code. The goal is to make it more organized by using modules. You will also practice the ES6 syntax that you have learned.

Awesome books: with ES6 In this project, you will restructure your Awesome books app code. The goal is to make it more organized by using modules. You

Oct 10, 2022

This is an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

Awesome books ES6 This is a website that allows users to add and remove books from a list. This project is build using JavaScript objects Built With H

Jul 21, 2022

Notes may contain grammatical errors and some wont make sense and will only make sense to me

This is my own notes containing all the information and knowledge I've gained during my studying sessions. The notes are all topics that relates to technology such as computers, software or programming.

Dec 15, 2022

Comments

feature(previewer): navbar added

Dynamic Image Previewer

I tried to do a simple update and fix in the dynamic image previewer. I fixed section spacing in mobile layout

before

after

and I added a simple responsive navbar

opened by sennshi 2

[Feature] Generator/Previewer

Dynamic Image generator/previewer

It would be nice to have a "Dynamic image" generator, to be able to freely test the possible customizations.

I made a very simple example below:

example

The example code (I apologize if something is wrong in the code):

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
    <main>
        <section class="preview">
            <h2>Preview</h2>
            <img id="previewImage" src="https://dynamic-image-renderer.vercel.app/api?preset=dracula">
            <span id="url">https://dynamic-image-renderer.vercel.app/api?preset=dracula</span>
        </section>
        <section class="actions">
            <div>
                <label for="title">title:</label>
                <input type="text" class="paramsAction" name="title" id="title">
            </div>
            <div>
                <label for="subtitle">subtitle:</label>
                <input type="text" class="paramsAction" name="subtitle" id="subtitle">
            </div>
            <div>
                <label for="textAnimation">text animation:</label>
                <input type="text" class="paramsAction" name="textAnimation" id="textAnimation">
            </div>
            <div>
                <label for="glowColor">glowColor:</label>
                <input type="text" class="paramsAction" name="glowColor" id="glowColor">
            </div>
            <div>
                <label for="preset">preset:</label>
                <select name="preset" id="preset">
                    <option value="none" selected>none</option>
                    <option value="dracula">Dracula</option>
                    <option value="monokai">Monokai</option>
                    <option value="hub">Hub</option>
                    <option value="minimalist">Minimalist</option>
                    <option value="oneDark">OneDark</option>
                </select>
            </div>
            <button class='btn' id="generate">generate</button>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

script.js

class DynamicImage {
    constructor(data) {
        this.title = data.title
        this.subtitle = data.subtitle
        this.textAnimation = data.textAnimation
        this.glowColor = data.glowColor
        
        this.preset = preset.value
        this.image = document.getElementById('previewImage')
        
        this.containerUrl = document.getElementById('url')
        this.params = `title=${this.title}&subtitle=${this.subtitle}&textAnimation=${this.textAnimation}&glowColor=${this.glowColor}`
    }
    
    update() {
        this.params = preset != 'none' ? `preset=${this.preset}&title=${this.title}&subtitle=${this.subtitle}&textAnimation=${this.textAnimation}&glowColor=${this.glowColor}` : this.params
        this.url = `https://dynamic-image-renderer.vercel.app/api?${this.params}`
        
        this.containerUrl.textContent = this.url
    }
    
    renderAll() {
        this.image.src = this.url
    }
}

const generate = document.querySelector('#generate')

generate.addEventListener('click', (event) => {
    const data = {
        title: 'myTitle', subtitle: 'mySubtitle', 
        textAnimation: 'pulse', glowColor: 'white',
        preset: 'dracula'
    }
    
    for (const item in data) {
        dataValue = document.querySelector(`#${item}`).value
        data[item] = dataValue ? dataValue : data[item]
    }
    
    const dynamicImage = new DynamicImage(data)
    
    dynamicImage.update()
    dynamicImage.renderAll()
})

style.css

* {
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
}

body {background: #3C3B4E;}

main {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.actions, .preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45vw;
    height: 90vh;
    gap: 10px;
    padding: 7px;
    margin-top: 20px;
}

.preview > h2 {
    font-family: Helvetica;
    color: #886EB9;
}

#previewImage {
    width: 100%;
    transition: all .3s ease;
}

#url {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    padding: 5px;
    border-radius: 7px;
    color: #886EB9;
    word-break: break-word;
    background: #2D2C39;
}

.actions > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.actions > div > label {
    display: flex;
    justify-content: flex-start;
    width: 98%;
    font-family: Arial;
    color: #89889F;
}

#preset, .paramsAction {
    width: 98%;
    height: 30px;
    color: #6E6AA3;
    border: none;
    border-radius: 7px;
    background: #2D2C39;
    transition: all .5s ease;
}

#preset:focus, .paramsAction:focus {
    outline: none;
    box-shadow: 0 0 0 5px rgba(136, 110, 185, .4);
}

.btn {
    width: 98%;
    height: 30px;
    border-radius: 7px;
    color: white;
    margin-top: 5px;
    font-size: 10pt;
    background: #886EB9;
}

@media only screen and (max-width: 768px) {
    main {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }
    .actions, .preview {
        width: 90vw;
    }
    
}

opened by sennshi 2

Owner

Thiago

Web Development's student

GitHub https://dynamic-image-renderer.vercel.app/api

A library for boolean aliases to help you make your code more confusing and make your coworkers hate you.

yup-nope A library for boolean aliases to help you make your code more confusing and make your coworkers hate you. Installation Using npm: npm install

4 Dec 10, 2022

portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project Those days of manually updating portfolio website after every new project made are gone ⚡ Yesss . . . you read that right. ?? portfo

15 Aug 3, 2021

A Leaderboard that shows who has given your stars to your repositories

6 Mar 22, 2022

Search your code and 2M+ public repositories on Sourcegraph directly within Raycast.

Sourcegraph for Raycast Search your code and 2M+ public repositories on Sourcegraph directly within Raycast. Install · Setup · Commands · Issues · Cha

5 Jul 10, 2022

Use signature-based minting to allow users who have contributed to your github repositories to claim an NFT!

GitHub contributors NFT rewards This project demonstrates how you can build a full-stack web3 application that allows github contributors of certain r

8 Nov 5, 2022

Node js package makes creating node jd dependincies files like Controllers,Entities and Repositories easier by executing a few instructions

Nodejs Studio Node js package makes creating node js project dependincies files like Controllers,Entities and Repositories easier by executing a few i

9 Oct 12, 2022

GitHub action to automate managing repositories with labels, milestones and projects.

triagecat GitHub action to automate managing repositories with labels, milestones and projects. Link issues and PRs labels. Add issues and PRs to a pr

6 Jun 14, 2022

Tool for GitHub/GitLab to keep Repositories/Projects you are interested in and their Pull/Merge Requests in desktop Tray Menu

Tool for GitHub/GitLab to keep Repositories/Projects you are interested in and their Pull/Merge Requests in desktop Tray Menu. More info in User Guide.

5 Jul 31, 2022

✨ Download templates and git repositories with pleasure!

✨ giget Download templates and git repositories with pleasure! Features ✔ Support popular git providers (GitHub, GitLab, Bitbucket, Sourcehut) out of

177 Jan 7, 2023

A GUI to browse and restore restic backup repositories.

A simple, cross-platform restic backup GUI for browsing and restoring restic repositories. Built with Wails2, based on leaanthony's Restoric PoC. Down

91 Dec 29, 2022

Make your repositories and READMEs more beautiful!

Related tags

Overview

Dynamic Image Renderer API

easy to use - open source

Make your repositories and READMEs more beautiful!

Navigation

About the project

Basic usage

Parameters

Size

Title

Subtitle

Effects

Background

Animations

Pop-up (popup)

Fade-in (fadein)

Pulse (pulse)

Flicker (flicker)

Presets

Default

Minimalist

Dracula

Hub

Monokai

Using presets and animations

Minimalist preset with pulse animation

Dracula preset with flicker animation

How it works?

How to make a preset

How to make a animation

How to add a gradient

You might also like...

Comments

Dynamic Image Previewer

Dynamic Image generator/previewer

index.html

script.js

style.css

Owner

Thiago

A library for boolean aliases to help you make your code more confusing and make your coworkers hate you.

portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

A Leaderboard that shows who has given your stars to your repositories

Search your code and 2M+ public repositories on Sourcegraph directly within Raycast.

Use signature-based minting to allow users who have contributed to your github repositories to claim an NFT!

Node js package makes creating node jd dependincies files like Controllers,Entities and Repositories easier by executing a few instructions

GitHub action to automate managing repositories with labels, milestones and projects.

Tool for GitHub/GitLab to keep Repositories/Projects you are interested in and their Pull/Merge Requests in desktop Tray Menu

✨ Download templates and git repositories with pleasure!

A GUI to browse and restore restic backup repositories.