Awesome

Welcome to social-image-kodyfire 👋

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

🏠 Homepage

Requirements

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

npm install -g kodyfire-cli

Install

npm install social-image-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-image.json

Available Templates

basic (credits: puppeteer-social-image)

Renders text on a background image.

Params

• title string - text to render
• logo string - URL for the logo
• imageUrl string - URL for the background image
• background string - Valid CSS background color
• color string - Valid CSS color
• watermark string - (optional) text for footer

article (credits: puppeteer-social-image)

Display a title and subtitle on a background image, with an optional eyebrow

Params

• title string - title text
• subtitle string - subtitle text
• eyebrow string - eyebrow text that renders above the title. Use for date
• logo string - URL for the logo
• imageUrl string - URL for the background image
• background string - Valid CSS background color
• color string - Valid CSS color
• watermark string - (optional) text for footer

fiftyfifty (credits: puppeteer-social-image)

Tempate with split content

Params

• title string - title text
• subtitle string - subtitle text
• logo string - URL for the logo
• imageUrl string - URL for the background image
• background string - Valid CSS background color
• color string - Valid CSS color
• watermark string - (optional) text for footer

doodle (credits: css-doodle)

Tempate using the doodle-css as background

Params

• title string - title text
• subtitle string - subtitle text
• logo string - URL for the logo
• doodle enum - doodle background name [fakeBox, neon, seeding, strings, timeTravel,tubes, unicode]
• 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": "fiftyfifty.html.template",
      "split": "diagonal",
      "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",
      "imageUrl": "https://images.unsplash.com/photo-1507608869274-d3177c8bb4c7?w=1950&q=80",
      "color": "#000",
      "includeWatermark": true,
      "watermark": "social-image-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 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

• puppeteer-social-image by chrisvxd Big Thanks for the provided templates.
• css-doodle by css-doodle Beautiful work, We are so thankful.
• puppeteer by puppeteer Danke schone!

📝 License

Copyright © 2022 Anis Marrouchi.

This project is MIT licensed.

This README was generated with ❤️ by readme-kodyfire