docs: update readme with sample

darkterminal · darkterminal · commit 6f36d1bf086a · 2023-03-15T17:12:59.000+07:00
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -0,0 +1,15 @@
+# OG:IMAGE REST Generator Code of Conduct
+
+OG:IMAGE REST Generator is committed to providing a safe, inclusive, and harassment-free environment for everyone who contributes to the project, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, or religion.
+
+As a member of this community, you agree to abide by the following Code of Conduct:
+
+- Respect and be kind to all community members, regardless of their background or beliefs.
+- Do not engage in any form of harassment, discrimination, or intimidation, including but not limited to: offensive comments, verbal or written abuse, sexual harassment, or physical violence.
+- Do not engage in any behavior that may be deemed as threatening or harmful, either physically or mentally, to any community member.
+- Refrain from engaging in any inappropriate behavior, such as using profanity or engaging in disruptive behavior during community events or discussions.
+- Report any incidents of harassment, discrimination, or inappropriate behavior to the project maintainers immediately.
+
+Failure to adhere to this Code of Conduct may result in disciplinary action, up to and including removal from the project and its associated platforms.
+
+By contributing to OG:IMAGE REST Generator, you agree to abide by this Code of Conduct and help to create a safe and welcoming environment for all community members.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,16 @@
+# Contributing Guidelines
+Thank you for your interest in contributing to OG:IMAGE REST Generator! We welcome contributions from all members of the community.
+
+## Getting Started
+To get started, simply fork the repository and make any changes or additions you'd like. Please ensure that your changes are related to the project's goal of simplifying the process of generating Open Graph images. #Ref: [DESIGN_GUIDELINE.md](DESIGN_GUIDELINE.md)
+
+## Submitting Changes
+Once you've made your changes, please submit a pull request. Be sure to include a detailed description of your changes and any relevant information about the issue or feature you're addressing.
+
+## Code of Conduct
+We follow the Contributor Covenant Code of Conduct in all our interactions. Please review the code of conduct before contributing: [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
+
+## License
+By contributing to OG:IMAGE REST Generator, you agree that your contributions will be licensed under the project's [GPLv3 License](LICENSE).
+
+Thank you for your contributions to OG:IMAGE REST Generator!
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 <h1 align="center">OG:IMAGE REST Generator</h1>
 
 <p align="center">
-  <strong>OG:IMAGE REST Generator</strong> is a free and powerful tool that simplifies the process of generating Open Graph images for your website or application. With our RESTful API, you can quickly and easily create customized images that will make your content stand out on social media platforms like Facebook, Twitter, and LinkedIn.
+  <strong>OG:IMAGE REST Generator</strong> is a free and powerful tool that simplifies the process of generating Open Graph images for your website or application. With our RESTful API, you can quickly and easily create customized images that will make your content stand out on social media platforms like Facebook, Twitter, Instagram, Pinterest and LinkedIn.
 </p>
 
 <p align="center">
@@ -16,82 +16,64 @@
 https://og-image-rest-generator.fly.dev
 ```
 
-## API Reference
-
-#### Generate Simple Image (with gradient background)
-
+## Usage
 ```http
-POST /generate
-Content-Type: application/json
+GET /seo-banner
 ```
 
-| Parameter | Type     | Description                |
-| :-------- | :------- | :------------------------- |
-| `canonicalName` | `string` | this is the name we'll use to save our image (slugify first: Recomended!) |
-| `gradientColors` | `array` | an array of two colors, i.e. `[ '#ffffff', '#000000' ]`, used for our gradient |
-| `articleName` | `string` | the title of the article or site you want to appear in the image |
-| `articleCategory` | `string` | the category which that article sits in - or the subtext of the article |
-| `emoji` | `string` | the emoji you want to appear in the image. |
-
-**Example**
-```curl
-curl -X POST \
-  'https://<base-url>/generator' \
-  --header 'Accept: */*' \
-  --header 'Content-Type: application/json' \
-  --data-raw '{
-  "canonicalName": "metaphor-website-live",
-  "articleName": "Metaphor Website Live",
-  "gradientColors": ["#fc00ff","#00dbde"],
-  "articleCategory": "open-sorce",
-  "emoji": "🎉"
-}'
-```
+| Query     | Type     | Description                       |
+| :-------- | :------- | :-------------------------------- |
+| `head` | `string` | the head title legend |
+| `title` | `string` | the title of the article or site you want to appear in the image |
+| `writer` | `string` | the author legend |
+| `author` | `string` | the name of author |
+| `logo` | `string` | the logo of your app / web |
+| `template` | `string` | Choose one: `default`, `facebook`, `facebook-minimal`, `twitter`, `twitter-minimal`, `instagram`, `instagram-minimal`, `linkedin`, `linkedin-minimal`, `pinterest` |
 
-**Result**:
+## Sample Images
 
-```json
-{
-    "message": "Image generated!",
-    "image": "data:image/png;base64,y12msd..."
-}
-```
+### Default template (1342x853)
+![Template Default](images/sample-ogDefault.png)
 
-**Sample Image**:
-![Legacy Generator](images/create-banner-image-from-grithub-action.png)
+### Facebook template (Recommended size: 1200 x 630 pixels)
+![Template Facebook](images/sample-ogFacebook.png)
 
-#### Classic SEO Banner
+### Facebook Minimal template (Minimum size: 600 x 315 pixels)
+![Template Facebook Minimal](images/sample-ogFacebookMinimal.png)
 
-```http
-GET /classic-seo-banner
-```
+### Twitter template (Recommended size: 1200 x 675 pixels)
+![Template Twitter](images/sample-ogTwitter.png)
 
-| Query     | Type     | Description                       |
-| :-------- | :------- | :-------------------------------- |
-| `articleName` | `string` | the title of the article or site you want to appear in the image |
-| `author` | `string` | the name of author |
-| `language` | `string` | the category of programming language |
+### Twitter Minimal template (Minimum size: 600 x 335 pixels)
+![Template Twitter Minimal](images/sample-ogTwitterMinimal.png)
 
-Result: `image/png`
+### Linkedin template (Recommended size: 1200 x 675 pixels)
+![Template Linkedin](images/sample-ogLinkedin.png)
 
-**Sampe Image**:
-![Legacy Generator](images/classic-seo-banner.png)
+### Linkedin Minimal template (Minimum size: 600 x 400 pixels)
+![Template Linkedin Minimal](images/sample-ogLinkedinMinimal.png)
 
-#### SEO Banner (New)
+### Instagram template (Recommended size: 1080 x 1080 pixels)
+![Template Instagram](images/sample-ogInstagram.png)
 
-```http
-GET /seo-banner
-```
+### Instagram Minimal template (Minimum size: 600 x 600 pixels)
+![Template Instagram Minimal](images/sample-ogInstagramMinimal.png)
 
-| Query     | Type     | Description                       |
-| :-------- | :------- | :-------------------------------- |
-| `title` | `string` | the title of the article or site you want to appear in the image |
-| `author` | `string` | the name of author |
-| `logo` | `string` | the logo of your app / web |
-| `head` | `string` | title legend |
-| `writer` | `string` | author legend |
+### Pinterest template (Recommended size: 1000 x 1500 pixels)
+![Template Pinterest](images/sample-ogPinterest.png)
+
+## Help Wanted
+- [ ] Improve font scaling and title truncation
+- [ ] Improve layouts
+- [ ] Adding more fonts (Currently using `Inter Extrabold` and `Inter Medium`)
+
+Welcoming everyone that have passion and skill to make this app powerfull and free.
+
+## Contribute
+
+OG:IMAGE REST Generator is an open-source project, and we welcome contributions from developers and enthusiasts of all levels of experience.
 
-Result: `image/png`
+[CONTRIBUTING.md]
 
-**Sample Image**:
-![Legacy Generator](images/seo-banner.png)
+## Donation / Support
+If you find OG:IMAGE REST Generator to be a helpful tool for your website or application, please consider supporting the project. Your donation or sponsorship can help ensure that the project continues to thrive and improve over time. You can sponsor the project directly through Github Sponsor or donate through Paypal. Your support is greatly appreciated and will help to ensure that this powerful tool remains available for free to users all over the world. Thank you for your generosity and support!
