Giter VIP home page Giter VIP logo

socialize's Introduction

Socialize

discord dribbble facebook github instagram linkedin mail opensea reddit snapchat spotify stackoverflow steam tiktok twitch twitter web youtube

Elegant social media badges to spice up your markdown at your disposal.

Usage

Getting an icon in markdown:

![twitter](https://socialize-md.vercel.app/api/badge/twitter)

Linking social to icon in markdown:

[![twitter](https://socialize-md.vercel.app/api/badge/twitter)](https://twitter.com/your_handle)

Adding a new badge

To add a new icon you must follow a couple of steps:

  1. Fork this repo and create a new branch.
  2. Add your icon template to the /assets/server/icons directory.
    • In order to properly align icon create a 20x20 pixel box and align 10-12px wide icon in the center both vertically and horizontally.
    • Icons must be between 10-12 pixels.
    • Icons must be white (#fff).
    • Strip all svg properties except for path.
  3. Import and add your icon to the i object in /assets/server/icons/index.ts.
  4. Navigate to pages/api/badge/[ico].ts and add your icon to the switch statement with the desired background color.
  5. Create a pull request and wait for review!

All current icons

Name Icon
Discord (discord) discord
Dribbble (dribbble) dribbble
Facebook (facebook) facebook
Github (github) github
Instagram (instagram) instagram
Linkedin (linkedin) linkedin
Mail (mail) mail
Opensea (opensea) opensea
Reddit (reddit) reddit
Snapchat (snapchat) snapchat
Spotify (spotify) spotify
Stack Overflow (stackoverflow) stack overflow
Steam (steam) steam
Tiktok (tiktok) tiktok
Twitch (twitch) twitch
Twitter (twitter) twitter
Web (web) web
Youtube (youtube) youtube

Like this project? Support me with ethereum: 0xD4c6325E42fac0625B25C0d4DB40823870986609

socialize's People

Contributors

kevin-dough avatar paul-bokelman avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

socialize's Issues

Socialize overhaul

Overhaul socialize api and adding of icons

icons directory

  • directory for each icon
  • directories contain svg for icon and json object with name and color

[ico].ts

  • depending on params get folder in icons directory and contents

IconDisplay.tsx

  • use existing icon wrapper and map over all icon paths (no additional config)
  • Or pull from api

md

  • sync readme.md and index.mdx for no repeat information

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.