Generate a dynamic gif for social media sharing based on HTML templates using Kodyfire. This is just the beginning.
🏠 Homepage
social-gif-kodyfire requires the kodyfire-cli to be installed
npm install -g kodyfire-cli
npm install social-gif-kodyfire
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
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
doodle
(credits: css-doodle)
Tempate using the doodle-css as animated background
seeding | strings | timeTravel |
![]() |
![]() |
![]() |
title
string - title textsubtitle
string - subtitle textlogo
string - URL for the logogoogleFont
string - (optional) Google font namefontFamily
string - css rule for font-family (required if using googleFont)doodle
enum - doodle background name [ seeding, strings, timeTravel]color
string - Valid CSS colorwatermark
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": ""
}
- 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
TODO
👤 Anis Marrouchi
- Website: https://noqta.tn
- Twitter: @anis_marrouchi
- GitHub: @anis-marrouchi
- LinkedIn: @marrouchi
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
- css-doodle by css-doodle Beautiful work, We are so thankful.
- puppeteer by puppeteer Danke schone!
Copyright © 2022 Anis Marrouchi.
This project is MIT licensed.
This README was generated with ❤️ by readme-kodyfire