From 515857d90ad69aab83884e3600fc36daae4d8e68 Mon Sep 17 00:00:00 2001 From: Nash Date: Mon, 13 Nov 2023 02:14:53 -0500 Subject: [PATCH 1/2] Update README.md --- README.md | 82 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 77 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f0fdcc0..55eb0c7 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,21 @@ Get dynamically generated StackOverflow stats on your readmes. +Use the HTML `img` tag: + ```markdown ``` +Or use the Markdown image syntax: + +``` +![StackOverflow Card](https://stackoverflow-card.vercel.app/?userID=353337) +``` + You have to provide a valid `userID`. Apart from that, StackOverflow Card supports @@ -20,9 +28,73 @@ showBorder: true showIcons: true showAnimations: true ``` -See [here](https://github.com/nschloe/stackoverflow-card/blob/main/src/themes.js) for -all available themes. Some examples -[here](https://github.com/nschloe/stackoverflow-card/blob/main/themes.md). + +### Themes +With built-in themes, you can customize the look of the card. + +Use `&theme=THEME_NAME` parameter like so: +``` +![StackOverflow Card](https://stackoverflow-card.vercel.app/?userID=353337&theme=dracula) +``` +![StackOverflow Card](https://stackoverflow-card.vercel.app/?userID=353337&theme=dracula) + +#### All built-in themes +StackOverflow Card comes with several built-in themes (E.g. `dracula`, `stackoverflowdark`, `stackoverflowdark`, `gruvboxdark`, `gruvboxlight`, `solarizeddark`, `solarizedlight`, `tomorrownight`, `tomorrow`). + +See [here](https://github.com/nschloe/stackoverflow-card/blob/main/src/themes.js) for all available themes. + +Some card examples can be found [here](https://github.com/nschloe/stackoverflow-card/blob/main/themes.md). + +#### Use GitHub's theme context tag + +You can use [GitHub's theme context](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) to make the card match the user's GitHub theme automatically. Just add #gh-dark-mode-only or #gh-light-mode-only at the end of an image link. This tells GitHub how to show the card to users with a light or dark theme preference. + +``` +[![StackOverflow Card Light](https://stackoverflow-card.vercel.app/?userID=353337&theme=tomorrow#gh-light-mode-only)](https://stackoverflow-card.vercel.app/?userID=353337&theme=tomorrow#gh-light-mode-only) +[![StackOverflow Card Dark](https://stackoverflow-card.vercel.app/?userID=353337&theme=dracula#gh-dark-mode-only)](https://stackoverflow-card.vercel.app/?userID=353337&theme=dracula#gh-dark-mode-only) +``` +
+Show example + +[![StackOverflow Card Light](https://stackoverflow-card.vercel.app/?userID=353337&theme=tomorrow#gh-light-mode-only)](https://stackoverflow-card.vercel.app/?userID=353337&theme=tomorrow#gh-light-mode-only) +[![StackOverflow Card Dark](https://stackoverflow-card.vercel.app/?userID=353337&theme=dracula#gh-dark-mode-only)](https://stackoverflow-card.vercel.app/?userID=353337&theme=dracula#gh-dark-mode-only) + +
+ +#### Use GitHub's new media feature + +You can also use [GitHub's new media feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) in HTML to control how cards appear in light or dark themes. This is done using the `picture` element in combination with the `prefers-color-scheme` media feature. + +```html + + + + + +``` + +
+Show example + + + + + + + +
### Development From 913adaa2def25bedb36c0729a34e0536c2f30b45 Mon Sep 17 00:00:00 2001 From: Nash Date: Mon, 13 Nov 2023 02:20:17 -0500 Subject: [PATCH 2/2] Update README.md --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 55eb0c7..a0922e6 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,13 @@ Use `&theme=THEME_NAME` parameter like so: ``` ![StackOverflow Card](https://stackoverflow-card.vercel.app/?userID=353337&theme=dracula) ``` +
+Show example + ![StackOverflow Card](https://stackoverflow-card.vercel.app/?userID=353337&theme=dracula) +
+ #### All built-in themes StackOverflow Card comes with several built-in themes (E.g. `dracula`, `stackoverflowdark`, `stackoverflowdark`, `gruvboxdark`, `gruvboxlight`, `solarizeddark`, `solarizedlight`, `tomorrownight`, `tomorrow`).