Awesome

Welcome to social-gif-kodyfire 👋

Generate a dynamic gif for social media sharing based on HTML templates using Kodyfire. This is just the beginning.

🏠 Homepage

Requirements

social-gif-kodyfire requires the kodyfire-cli to be installed

npm install -g kodyfire-cli

Install

npm install social-gif-kodyfire

Usage

Method 1: As a generator

In order to generate your artifacts, run the generate command. The syntax is kody generate|g [kody] [concept]. If you ommit kody and concept the assistant will prompt you to select them. As an example, run the following command from your terminal:

kody generate react component

Method 2: As a kody project

Refer to the kodyfire generate your artifact section. Once your project is initialized and ready for kody, run the following command to generate your images.

kody run -s kody-social-gif.json

Available Templates

`doodle` (credits: css-doodle)

Tempate using the doodle-css as animated background

<table> <tr> <td>seeding</td> <td>strings</td> <td>timeTravel</td> </tr> <tr> <td><img src="assets/doodle-seeding.gif" width=240></td> <td><img src="assets/doodle-strings.gif" width=240></td> <td><img src="assets/doodle-timeTravel.gif" width=240></td> </tr> </table>

Params

title string - title text
subtitle string - subtitle text
logo string - URL for the logo
googleFont string - (optional) Google font name
fontFamily string - css rule for font-family (required if using googleFont)
doodle enum - doodle background name [ seeding, strings, timeTravel]
color string - Valid CSS color
watermark string - (optional) text for footer

Add the following params to your generated concepts. As an example, the final updated concepts might look like the following:

{
      "name": "image-3",
      "template": "doodle.html.template",
      "fontWeight": "medium",
      "fontSize": "80px",
      "title": "Hello World!",
      "subtitle": "Your subtitle",
      "eyebrow": "17 July 2022",
      "logo": "https://noqta.tn/_next/image?url=%2Fimages%2Flogo.svg&w=256&q=75",
      "background": "tranparent",
      "doodle": "timeTravel",
      "color": "#000",
      "includeWatermark": true,
      "watermark": "social-gif-kodyfire",
      "size": "facebook",
      "outputDir": ""
    }

📅 Future Features

Add common social post dimensions as size
Allow passing arguments to doodles
Compose doodle for dymamic backgrounds
Add template for most common post subjects
Add meme template

Run tests

TODO

Author

👤 Anis Marrouchi

Website: https://noqta.tn
Twitter: @anis_marrouchi
GitHub: @anis-marrouchi
LinkedIn: @marrouchi

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

Credits

css-doodle by css-doodle Beautiful work, We are so thankful.
puppeteer by puppeteer Danke schone!

📝 License

This project is MIT licensed.

This README was generated with ❤️ by readme-kodyfire