Skip to content

🏷️ Utilize Lanyard to display your Discord Presence in your GitHub Profile

Notifications You must be signed in to change notification settings

kyrie25/lanyard-profile-readme

 
 

Repository files navigation

lanyard-profile-readme

Pretty much the same as upstream repo, with custom stylings.

Some niche features are also added:

  • Banners are supported!
  • Time Left are supported and displayed over Elapsed Time whenever possible.
  • Show large image of activities with only application icons. (e.g. CS2, BG3, Genshin, WuWa, etc.)
  • Allows displaying special activities.

Please do consider giving this fork a star 🌟 if you liked it, it means a lot :)

Credit to @NYRI4 for the wave asset and original animation CSS rules.

https://lanyard.kyrie25.me/api/368399721494216706

img

Options

Everything from upstream, in addition with my own below:

Banners

  • Banners are supported and can be enabled
  • Banner from USRBG are supported, and Nitro banners are prioritized over USRBG banners.
https://lanyard.kyrie25.me/api/368399721494216706?showBanner=true

banner

https://lanyard.kyrie25.me/api/368399721494216706?showBanner=animated

animated-banner

You can combine this with waveColor=transparent and waveSpotifyColor=transparent to make the banner more visible.

https://lanyard.kyrie25.me/api/368399721494216706?showBanner=animated&waveColor=transparent&waveSpotifyColor=transparent

banner-transparent

If the contents on the card are hard to read, you can use bannerFilter to pass in CSS filter for the banner.

https://lanyard.kyrie25.me/api/368399721494216706?showBanner=animated&waveColor=transparent&bannerFilter=brightness(0.8)%20blur(2px)

banner-filter

Banners are disabled by default & caveats

Banners are disabled by default because not every card will look good with it. It would also increase the API's response time, and you may hit the 5MB limit for assets on markdown files if you have a lot of animated assets in your card.

Banners are cached for 5 minutes to avoid API rate limit.

Experiment with it and see if it fits your needs!

Avatar Decorator

  • Avatar decorator are supported! It is enabled by default:

decoration

decoration-square

If you wish to disable it (because the round decoration on square image look weird perhaps?), you can use decoration=false:

https://lanyard.kyrie25.me/api/368399721494216706?decoration=false
  • You can choose to use your display name instead of username using useDisplayName=true:
https://lanyard.kyrie25.me/api/368399721494216706?useDisplayName=true

display-name

Activity Customizations

  • Use animationDuration to customize the speed of the wave animation (0s to disable)
https://lanyard.kyrie25.me/api/368399721494216706?animationDuration=4s

duration showcase

  • Define activity color using waveColor and waveSpotifyColor
https://lanyard.kyrie25.me/api/368399721494216706?waveColor=FF597B&waveSpotifyColor=FF597B

waveColor showcase

Text & Image Customizations

You can also change the color of the text by specifying theme following the hex color code.
E.g. waveColor=FF597B-light will make the text darker.

  • Use custom gradient colors for your user name using gradient
https://lanyard.kyrie25.me/api/368399721494216706?gradient=645CBB-A084DC-BFACE2-EBC7E6

gradient showcase

  • Change your profile picture/images style using imgStyle and imgBorderRadius
    • imgStyle: Defines style for your profile picture and activity small image.
      • Default: circle
      • Accepts: circle, square
    • imgBorderRadius: Define border radius for your profile picture, status indicator, and activity images.
      • Profile picture and activity small image unaffected if imgStyle is not square because, well, circle lol.
      • Default: 10px
https://lanyard.kyrie25.me/api/368399721494216706?imgStyle=square

imgStyle showcase

https://lanyard.kyrie25.me/api/368399721494216706?imgStyle=square&imgBorderRadius=15px

imgBorderRadius showcase

About

🏷️ Utilize Lanyard to display your Discord Presence in your GitHub Profile

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.9%
  • JavaScript 0.1%