github-readme-daily-quotes

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

github-readme-daily-quotes

(★ 24)

💡Daily Quote Widget for your GitHub README

github-readme-daily-quotes Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <a href="https://github.com/cheehwatang/github-readme-daily-quotes">
    <img width="100" height="100" src="assets/logo.svg" />
  </a>
  </br>
  <h1 align="center">Daily Quotes Card</h1>
  <p align="center">Inspiring Quotes on your Github Profile</p>
</div>

</br>

</br>

</br>

<div align="center">
  <h2 align="center">Tech Stack</h1>
  &nbsp;
  <a href="#gh-dark-mode-only">
      <img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-050505?style=for-the-badge&logo=typescript#gh-dark-mode-only">
  </a>
  <a href="#gh-light-mode-only">
      <img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-FFFFFF?style=for-the-badge&logo=typescript#gh-light-mode-only">
  </a>
  &nbsp;
  <a href="#gh-dark-mode-only">
    <img alt="SVG" src="https://img.shields.io/badge/SVG-050505?style=for-the-badge&logo=svg#gh-dark-mode-only"/>
  </a>
  <a href="#gh-light-mode-only">
    <img alt="SVG" src="https://img.shields.io/badge/SVG-FFFFFF?style=for-the-badge&logo=svg#gh-light-mode-only"/>
  </a>
  &nbsp;
  <a href="#gh-dark-mode-only">
    <img alt="Jest" src="https://img.shields.io/badge/Jest-050505?style=for-the-badge&logo=jest&logoColor=C21325#gh-dark-mode-only"/>
  </a>
  <a href="#gh-light-mode-only">
    <img alt="Jest" src="https://img.shields.io/badge/Jest-FFFFFF?style=for-the-badge&logo=jest&logoColor=C21325#gh-light-mode-only"/>
  </a>
  &nbsp;
  <a href="#gh-dark-mode-only">
    <img alt="Axios" src="https://img.shields.io/badge/Axios-050505?style=for-the-badge&logo=axios&logoColor=5A29E4#gh-dark-mode-only"/>
  </a>
  <a href="#gh-light-mode-only">
    <img alt="Axios" src="https://img.shields.io/badge/Axios-FFFFFF?style=for-the-badge&logo=axios&logoColor=5A29E4#gh-light-mode-only"/>
  </a>
  &nbsp;
  <a href="#gh-dark-mode-only">
    <img alt="Github Actions" src="https://img.shields.io/badge/Github Actions-050505?style=for-the-badge&logo=githubactions#gh-dark-mode-only"/>
  </a>
  <a href="#gh-light-mode-only">
    <img alt="Github Actions" src="https://img.shields.io/badge/Github Actions-FFFFFF?style=for-the-badge&logo=githubactions#gh-light-mode-only"/>
  </a>
  &nbsp;
  <a href="#gh-dark-mode-only">
    <img alt="Vercel" src="https://img.shields.io/badge/Vercel-050505?style=for-the-badge&logo=vercel&logoColor=white#gh-dark-mode-only"/>
  </a>
  <a href="#gh-light-mode-only">
    <img alt="Vercel" src="https://img.shields.io/badge/Vercel-FFFFFF?style=for-the-badge&logo=vercel&logoColor=black#gh-light-mode-only"/>
  </a>
  &nbsp;
</div>

</br>

## Features

- [Usage](#usage)
  - [Options Summary](#options-summary)
- [Daily Quotes](#daily-quotes)
  - [Quotes Based on Category](#quotes-from-category)
  - [Customize Quotes](#customize-your-quotes)
- [Themes](#themes)
  - [Customization](#customization)
  - [Responsive Theme](#responsive-theme)
- [Fonts](#fonts)
- [Deploy Yourself](#deploy-on-your-own)
  - [On Vercel](#on-vercel)
  - [Keep your fork up to date](#keep-your-fork-up-to-date)

</br>

## Usage

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

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

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

</br>

### Options Summary

You can customize your quote card using the options below.

Use `OPTION=VALUE` parameter like so:

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

Append the options using the `&` symbol like so:

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

| OPTION        |    DEFAULT    | AVAILABLE                                                     |
| ------------- | :-----------: | ------------------------------------------------------------- |
| theme         | `github_dark` | [All available themes](./src/app/themes/README.md)            |
| font          |  `helvetica`  | [All available fonts](./src/app/fonts/README.md)              |
| quote         |       -       | Customize your quote                                          |
| author        |       -       | The name of the quote's author                                |
| category      |       -       | [All available categories](#quotes-from-category)             |
| 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`)            |

</br>

## 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](#quotes-from-category)
- [Customize your quote](#customize-your-quotes)

</br>

### Quotes from Category

<details>
  <summary>You can use the following categories for the quote:</summary>

- 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

</details>

Use `category=QUOTE_CATEGORY` parameter like so:

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

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

> This does not affect `programming` and `stoicism` category.

</br>

### Customize Your Quotes

You can customize the quote and author.

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

```md
![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`

</br>

## Themes

You can customize the look of the card without any [manual customization](#color-customization).

Use `theme=THEME_NAME` parameter like so:

```md
![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](./src/app/themes/README.md).

> Consideration: Accessibility with Good Contrast Colors.

Below are some of my personal recommendations:

#### Github Dark (Default) `theme=github_dark`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

#### Light `theme=light`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=light&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

#### Dark `theme=dark`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=dark&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

#### Vue `theme=vue`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=vue&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

#### Algolia `theme=algolia`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=algolia&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

#### Radical `theme=radical`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=radical&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

</br>

### 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`.

</br>

### 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-transparent-theme)
- [Use Github theme context tag](#use-github-theme-context-tag)
- [Use Github media feature](#use-github-media-feature)

Try changing the appearance of your Github [here](https://github.com/settings/appearance) to see the quote card change.

</br>

#### 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:

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

![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?theme=transparent&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)

</br>

#### Use Github Theme Context Tag

You can use [Github's theme context](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) 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:

```md
[![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)
```

[![Github Readme Daily Quotes - Dark](https://readme-daily-quotes.vercel.app/api?theme=dark&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E#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&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E#gh-light-mode-only)](https://github.com/cheehwatang/github-readme-daily-quotes#gh-light-mode-only)

</br>

#### Use Github Media Feature

You can use [Github's media feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) 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:

```md
<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>
```

</br>

## Fonts

You can customize the font of the text.

Use `font=FONT_NAME` parameter like so:

```md
![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](./src/app/fonts/README.md).

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

Below are some of my personal recommendations:

#### Trebuchet MS `font=trebuchet_ms`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?font=trebuchet_ms&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

#### Delius `font=delius`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?font=delius&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

#### Libre Baskerville `font=libre_baskerville`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?font=libre_baskerville&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

#### Merienda `font=merienda`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?font=merienda&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

#### MedievalSharp `font=medieval_sharp`

[![Github Readme Daily Quotes](https://readme-daily-quotes.vercel.app/api?font=medieval_sharp&author=Seneca&quote=If%20a%20man%20knows%20not%20to%20which%20port%20he%20sails%2C%20no%20wind%20is%20favorable%2E)](https://github.com/cheehwatang/github-readme-daily-quotes)

</br>

## Deploy On Your Own

### On Vercel

Click on the deploy button to get started!

[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/cheehwatang/github-readme-daily-quotes)

<details>
  <summary>
    <strong>🛠️ Step-by-step guide on setting up your own Vercel instance</strong>
  </summary>

1.  Go to [vercel.com/login](https://vercel.com/login).
2.  Sign in with GitHub by pressing `Continue with GitHub`.
    ![Vercel Login Page](https://res.cloudinary.com/dsx50recn/image/upload/v1683881307/Github%20Readme%20Daily%20Quotes/Vercel_Login_pupkez.png)
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](https://vercel.com/new).
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.
    ![Vercel New Project Page](https://res.cloudinary.com/dsx50recn/image/upload/v1683881309/Github%20Readme%20Daily%20Quotes/Import_Github_Repo_n71zr8.png)
7.  Click deploy, and you're good to go.
8.  To access the api, visit `https://[YOUR DOMAIN]/api`

<strong>Optional - To Use Category</strong>

9.  Create an account with [API Ninjas](https://api-ninjas.com/register).
10. Go to the [API Ninjas Dashboard](https://api-ninjas.com/profile) and copy the API Key.
    ![API Ninja Dashboard](https://res.cloudinary.com/dsx50recn/image/upload/v1684920472/Github%20Readme%20Daily%20Quotes/Get-Ninja-API-Key_kmeflu.png)
11. Go to project setting in vercel and add the API key as an environment variable named `API_NINJAS_KEY`, and save (as shown).
    ![Add API Key to Vercel](https://res.cloudinary.com/dsx50recn/image/upload/v1684921142/Github%20Readme%20Daily%20Quotes/Add-API-Key-to-Vercel_mfgui0.png)

</details>

### 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](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork). You can also use the [pull](https://github.com/wei/pull) package created by [@wei](https://github.com/wei) to automate this process.

</br>

## 🙏 Contributions

If you wish to contribute to the project, please refer to the [Contributing Guidelines](./CONTRIBUTING.md).

I thank you in advance!

</br>

## 🌟 Special Thanks

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

</br>

#### Inspiration and Learning

<ul>
  <li>
    <p>Themes Based-on </p>
    <a href="https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only">
      <img src="https://img.shields.io/badge/GitHub Readme Stats-0D1117?style=flat-square#gh-dark-mode-only"/>
    </a>
    <a href="https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only">
      <img src="https://img.shields.io/badge/GitHub Readme Stats-FFFFFF?style=flat-square#gh-light-mode-only"/>
    </a>
    <a href="https://github.com/anuraghazra#gh-dark-mode-only">
      <img src="https://img.shields.io/badge/by-@anuraghazra-0D1117?style=flat-square#gh-dark-mode-only"/>
    </a>
    <a href="https://github.com/anuraghazra#gh-light-mode-only">
      <img src="https://img.shields.io/badge/by-@anuraghazra-FFFFFF?style=flat-square#gh-light-mode-only"/>
    </a>
  </li>
  <li>
    <p>Learning From </p>
    <a href="https://github.com/PiyushSuthar/github-readme-quotes#gh-dark-mode-only">
      <img src="https://img.shields.io/badge/Github Readme Quotes-0D1117?style=flat-square#gh-dark-mode-only"/>
    </a>
    <a href="https://github.com/PiyushSuthar/github-readme-quotes#gh-light-mode-only">
      <img src="https://img.shields.io/badge/Github Readme Quotes-FFFFFF?style=flat-square#gh-light-mode-only"/>
    </a>
    <a href="https://github.com/PiyushSuthar#gh-dark-mode-only">
      <img src="https://img.shields.io/badge/by-@PiyushSuthar-0D1117?style=flat-square#gh-dark-mode-only"/>
    </a>
    <a href="https://github.com/PiyushSuthar#gh-light-mode-only">
      <img src="https://img.shields.io/badge/by-@PiyushSuthar-FFFFFF?style=flat-square#gh-light-mode-only"/>
    </a>
  </li>
</ul>

</br>

#### External API

</br>

github-readme-daily-quotes

github-readme-daily-quotes Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

github-readme-daily-quotes

github-readme-daily-quotes Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README