Daily Quotes Card

Inspiring Quotes on your Github Profile

               

Tech Stack

             

Features

• Usage
  • Options Summary
• Daily Quotes
  • Quotes Based on Category
  • Customize Quotes
• Themes
  • Customization
  • Responsive Theme
• Fonts
• Deploy Yourself
  • On Vercel
  • Keep your fork up to date

Usage

Copy the markdown below and paste it in your Github Readme.

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api)](https://github.com/cheehwatang/github-readme-daily-quotes)

Options Summary

You can customize your quote card using the options below.

Use OPTION=VALUE parameter like so:

![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=light)

Append the options using the & symbol like so:

![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=light&category=programming)

OPTION	DEFAULT	AVAILABLE
theme	github_dark	All available themes
font	helvetica	All available fonts
quote	-	Customize your quote
author	-	The name of the quote's author
category	-	All available categories
bg_color	0d1117	Card's background color (hex color)
quote_color	58a6ff	Quote text color (hex color)
author_color	c3d1d9	Author text color (hex color)
accent_color	1f6feb	Accent color for the quotation marks and spacer (hex color)
border_color	e4e2e2	Card's border color (hex color)
border_width	1	Card's border width (in px) (range from 0 - 5)
border_radius	8	Card's border radius (in px) (range from 0 - 40)

Daily Quotes

By default, the quote card will display a general quote that will refresh once a day.

For customization, you can:

• Select a category
• Customize your quote

Quotes from Category

You can use the following categories for the quote:

• age
• alone
• amazing
• anger
• architecture
• art
• attitude
• beauty
• best
• birthday
• business
• car
• change
• communications
• computers
• cool
• courage
• dad
• dating
• death
• design
• dreams
• education
• environmental
• equality
• experience
• failure
• faith
• family
• famous
• fear
• fitness
• food
• forgiveness
• freedom
• friendship
• funny
• future
• god
• good
• government
• graduation
• great
• happiness
• health
• history
• home
• hope
• humor
• imagination
• inspirational
• intelligence
• jealousy
• knowledge
• leadership
• learning
• legal
• life
• love
• marriage
• medical
• men
• mom
• money
• morning
• movies
• programming
• stoicism
• success

Use category=QUOTE_CATEGORY parameter like so:

![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?category=programming)

Note on using category parameter:
Since the API Ninjas only allows 50k requests per month, my https://readme-daily-quotes.vercel.app/api could possibly hit the rate limiter.
If you host it on your own Vercel server, then you do not have to worry about anything.
Deploy your own Readme Daily Quotes!

This does not affect programming and stoicism category.

Customize Your Quotes

You can customize the quote and author.

Use quote=QUOTE and author=AUTHOR parameter, and replace the spaces with +. like so:

![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?author=Me&quote=My+quote)

Recommended to type the quote and the url in the browser, to reformat it, before copying the URL to render the image.

If only quote is added, the author defaults to Anonymous

Themes

You can customize the look of the card without any manual customization.

Use theme=THEME_NAME parameter like so:

![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=algolia)

🎨 All Available Inbuilt Themes

Daily Quotes comes with the inbuilt themes (e.g. light, dark, vue, algolia, nord, radial, dracula, monokai).

You can look at a preview for all available themes.

Consideration: Accessibility with Good Contrast Colors.

Below are some of my personal recommendations:

Github Dark (Default) theme=github_dark

Light theme=light

Dark theme=dark

Vue theme=vue

Algolia theme=algolia

Radical theme=radical

Customization

You can customize the appearance of your quote card as you wish with the URL parameters.

If theme is applied, the specified color customization will override the set color theme.

Customization Options

• bg_color - Card's background color (hex color). Default: 0d1117.
• quote_color - Quote text color (hex color). Default: 58a6ff.
• author_color - Author text color (hex color). Default: c3d1d9.
• accent_color - Accent color for the quotation marks and spacer (hex color). Default: 1f6feb.
• border_color - Card's border color (hex color). Default: e4e2e2.
• border_width - Card's border width. Default: 1. Range from 0 - 5.
• border_radius - Card's border radius. Default: 8. Range from 0 - 40.

To hide border, set border_width=0.

Responsive Theme

You can make the appearance of your quote card responsive to the github light and dark theme, with the following 3 methods:

• Use transparent theme
• Use Github theme context tag
• Use Github media feature

Try changing the appearance of your Github here to see the quote card change.

Use Transparent Theme

The transparent theme has a transparent background that would make the card background the same as the Github background color.

You can use the transparent theme by using the theme=transparent parameter like so:

![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=transparent)

Use Github Theme Context Tag

You can use Github's theme context tags to switch the theme of the quote card based on the user's Github theme setting automatically.

All you need to do is to append #gh-dark-mode-only or #gh-light-mode-only to the end of an image URL like so:

[![Github Readme Daily Quotes - Dark](https://readme-daily-quotes.vercel.app/api?theme=dark#gh-dark-mode-only)](https://github.com/cheehwatang/github-readme-daily-quotes#gh-dark-mode-only)
[![Github Readme Daily Quotes - Light](https://readme-daily-quotes.vercel.app/api?theme=light#gh-light-mode-only)](https://github.com/cheehwatang/github-readme-daily-quotes#gh-light-mode-only)

Use Github Media Feature

You can use Github's media feature to switch the theme of the quote card based on the user's Github theme setting automatically.

All you need to do is to use the HTML <picture> element with the prefers-color-scheme media feature like so:

<picture>
  <source
    srcset="https://readme-daily-quotes.vercel.app/api?theme=dark"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://readme-daily-quotes.vercel.app/api?theme=light"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src="https://readme-daily-quotes.vercel.app/api?theme=dark" />
</picture>

Fonts

You can customize the font of the text.

Use font=FONT_NAME parameter like so:

![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?font=garamond)

✍️ All Available Inbuilt Fonts

Daily Quotes comes with the common fonts (e.g. helvetica, arial, verdana, tahoma, trebuchet_ms, times_new_roman, georgia, garamond, courier_new).

You can look at a preview for all available fonts.

Consideration: Readability and Accessibility (especially for cursive fonts).

Below are some of my personal recommendations:

Trebuchet MS font=trebuchet_ms

Delius font=delius

Libre Baskerville font=libre_baskerville

Merienda font=merienda

MedievalSharp font=medieval_sharp

Deploy On Your Own

On Vercel

Click on the deploy button to get started!

🛠️ Step-by-step guide on setting up your own Vercel instance

1. Go to vercel.com/login.
2. Sign in with GitHub by pressing Continue with GitHub.
3. Sign in to GitHub and allow access to all repositories if prompted.
4. Fork this repo.
5. Go back to your Vercel new project page.
6. Click the Continue with GitHub button, search for the required Git Repository and import it by clicking the Import button. Alternatively, you can import a Third-Party Git Repository using the Import Third-Party Git Repository -> link at the bottom of the page.
7. Click deploy, and you're good to go.
8. To access the api, visit https://[YOUR DOMAIN]/api

Optional - To Use Category

9. Create an account with API Ninjas.
10. Go to the API Ninjas Dashboard and copy the API Key.
11. Go to project setting in vercel and add the API key as an environment variable named API_NINJAS_KEY, and save (as shown).

Keep your fork up to date

You can keep your fork, and thus your private Vercel instance up to date with the upstream using GitHubs' Sync Fork button. You can also use the pull package created by @wei to automate this process.

🙏 Contributions

If you wish to contribute to the project, please refer to the Contributing Guidelines.

I thank you in advance!

🌟 Special Thanks

Appreciate the wonderful contributions from the community.
If you like their work, give a star to their repo and contribute if you can.

Inspiration and Learning

• Themes Based-on

  

• Learning From

  

External API

• 
• 
• 
•