Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wei/socialify

💞 Socialify your project. 🌐 Share with the world!
https://github.com/wei/socialify

badges github hacktoberfest sharing social social-image

Last synced: 2 days ago
JSON representation

💞 Socialify your project. 🌐 Share with the world!

Awesome Lists containing this project

README 

        
[![GitHub Socialify][socialify-image]][socialify-edit-link]



Want your project to stand out? **Socialify** helps you showcase your project to the world by generating a beautiful project image like the one above!



It includes a ton of options including custom logo, description, badges, and many fonts and background patterns to choose from.



Join [![thousands of repositories](https://socialify.git.ci/api/stats.svg)](https://github.com/search?o=desc&q=%22socialify.git.ci%22&s=indexed&type=Code) today!



## Usage



Project site: https://socialify.git.ci



### Social Image as a Service



Click on the image to use the link anywhere, the image will be programmatically generated with live data. This means the badges will automatically update.



**Recommended for `README` files or `img` tags.**



### Image Download



You can download the image as a `.png`, `.jpeg` or `.webp` and use it anywhere in the world!



**Recommended for GitHub repository [social preview image](https://docs.github.com/en/free-pro-team@latest/github/administering-a-repository/customizing-your-repositorys-social-media-preview)** and other sites that require image upload.



### CLI



You can use cli tool [mheap/github-social-image](https://github.com/mheap/github-social-image) to upload social images to all your repos at once.



## Examples





  

    Session Bot Example

  



  

    Class Photo Example

  



  

    Modfy Example

  



  

    Pull Example

  



  

    Traefik Example

  



  

    React Example

  




## Contributing



Please read and agree to our [Contributor Covenant Code of Conduct](https://github.com/wei/socialify/blob/master/CONTRIBUTING.md) to get started.



### Running Socialify Locally



Run the following commands to get Socialify running locally:



```shell

# Clone your fork of wei/socialify if contributing

git clone https://github.com/wei/socialify.git && cd $_



# Set environment variables in .env.

cp .env.example .env



# Install dependencies

pnpm install



# Start local development server

pnpm dev

```



### Testing and Committing



[![Open in Dev Container](https://img.shields.io/static/v1?label=Dev%20Containers&message=Click%20to%20Launch&color=blue)](https://open.vscode.dev/wei/socialify)



If you already have VS Code and Docker installed locally, you can also click [here](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/wei/socialify) to get started. Clicking this link will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.



Socialify uses [`biomejs`](https://biomejs.dev/) as linter/formatter, [`Jest`](https://jestjs.io/) for unit testing, and [`Playwright`](https://playwright.dev/) for end-to-end testing.



Make sure to run and pass the linter, unit and end-to-end tests locally before committing your code. Please let us know in case you need to update the test snapshots. More in `"scripts"` section in your `package.json` file.



```shell

# Required: Set environment variables in .env.

cp .env.example .env



# Run linter/formatter

pnpm lint



# Fix linter/formatter errors

# pnpm lint:fix



# Run unit tests

pnpm test:unit



# Install Playwright dependencies (first-time)

# pnpm playwright:install



# Run e2e tests

pnpm test:e2e

```



**One** changeset file is required per each PR.



  1. Run `pnpm changeset` and select the appropriate senmantic versioning type (major, minor, patch) based on the scope of the change, together with an concise message.

  2. You will see a new markdown file with a silly name like `milk-honey-eggs.md` in the `.changeset` directory.

  3. Test, commit, and push your code **WITH** this changeset file when submitting a new PR.

  4. You can manually edit it to include more information. For example:



      ```markdown

      ---

      "socialify": minor

      ---



      Added playwright e2e testing to capture user stories and main UI

      ```



That's it! We are tremendously grateful for your contribution to Socialify! :heart:



## Authors



- [@CryogenicPlanet](https://github.com/CryogenicPlanet)

- [@wei](https://github.com/wei)



_Part of [@MLH-Fellowship](https://github.com/MLH-Fellowship) Pod 1.0.6_



## Community



These are the heros who continue to make Socialify the best social preview generator for the community.





  




## License



- [MIT](https://wei.mit-license.org)



## Hosting





  Deploys by Netlify




### SLA



Socialify is under active development. Design and project domain are subject to change without notice.



Please subscribe to [#47](https://github.com/wei/socialify/issues/47) if you would like to receive service updates.



Consider downloading the images or self-hosting should this be a problem.



[socialify-image]: https://socialify.git.ci/wei/socialify/image?description=1&font=Raleway&issues=1&language=1&pattern=Charlie%20Brown&pulls=1&stargazers=1&theme=Light

[socialify-edit-link]: https://socialify.git.ci/wei/socialify?description=1&font=Raleway&issues=1&language=1&pattern=Charlie%20Brown&pulls=1&stargazers=1&theme=Light



## Privacy



Socialify does not collect any personal or identifiable information, we do not use cookies, do not collect emails or anything.



Socialify uses Google Analytics on web pages to understand overall usage. Generated image links do not have any tracking.