diff --git a/.github/ISSUE_TEMPLATE/3_Badge_request.yml b/.github/ISSUE_TEMPLATE/3_Badge_request.yml
index af72465f561571d3c9658caa3404c0bdc3cbb1a8..c8424fe52d16b942369de8c021fb12818b98f187 100644
--- a/.github/ISSUE_TEMPLATE/3_Badge_request.yml
+++ b/.github/ISSUE_TEMPLATE/3_Badge_request.yml
@@ -12,7 +12,7 @@ body:
**fetch and display data from an upstream service**.
If your suggestion is for a static badge
(which shows the same information every time it is requested), it is
- [already possible to make these](https://github.com/badges/shields/blob/master/doc/static-badges.md).
+ [already possible to make these](https://shields.io/docs/static-badges).
We don't add specific routes for badges which only show static information.
- type: textarea
@@ -25,7 +25,7 @@ body:
- Which service is this badge for e.g: GitHub, Travis CI
- What sort of information should this badge show?
Provide an example in plain text e.g: "version | v1.01" or as a static badge
- (static badge generator can be found at https://shields.io/#your-badge )
+ (static badge generator can be found at https://shields.io/badges/static-badge )
validations:
required: true
diff --git a/README.md b/README.md
index b8c4f8f9706ecde767beb7448e7ffdabc81d64f0..7e9d549096f0088fbdfce462187079ecfe228e7c 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ This repo hosts:
[Make your own badges!][custom badges]
(Quick example: `https://img.shields.io/badge/left-right-f39f37`)
-[custom badges]: https://shields.io/#your-badge
+[custom badges]: http://localhost:3000/badges/static-badge
### Quickstart
diff --git a/core/base-service/openapi.js b/core/base-service/openapi.js
index 97760dd1f059be4529a9d386d340b795c0b1f3a5..c357e5aed796086bf1941b47efc9fa1e6e0a5e69 100644
--- a/core/base-service/openapi.js
+++ b/core/base-service/openapi.js
@@ -247,7 +247,7 @@ function category2openapi(category, services) {
in: 'query',
required: false,
description:
- 'One of the named logos (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. All simple-icons are referenced using icon slugs. You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository.',
+ 'One of the named logos (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. All simple-icons are referenced using icon slugs. You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository. <a href="/docs/logos">Further info</a>.',
schema: {
type: 'string',
},
diff --git a/core/base-service/openapi.spec.js b/core/base-service/openapi.spec.js
index f36e514fcec6a0ba8a48fc04834841f14bcd6e76..a70d803716df137ba8c1a515ca67322fa5df7828 100644
--- a/core/base-service/openapi.spec.js
+++ b/core/base-service/openapi.spec.js
@@ -92,7 +92,7 @@ const expected = {
in: 'query',
required: false,
description:
- 'One of the named logos (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. All simple-icons are referenced using icon slugs. You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository.',
+ 'One of the named logos (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. All simple-icons are referenced using icon slugs. You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository. <a href="/docs/logos">Further info</a>.',
schema: { type: 'string' },
example: 'appveyor',
},
diff --git a/doc/logos.md b/doc/logos.md
index 48617b7111d78eefedf606384ab6d7c47aab4420..84915cb18fb01c017f659a2f7ce8c3c5a049466a 100644
--- a/doc/logos.md
+++ b/doc/logos.md
@@ -1,38 +1,6 @@
# Logos
-## Using Logos
-
-### SimpleIcons
-
-We support a wide range of logos via [SimpleIcons][]. They should be referenced by the logo slug e.g:
-
- - https://img.shields.io/npm/v/npm.svg?logo=nodedotjs
-
-The set of Simple Icon slugs can be found in the [slugs.md](https://github.com/simple-icons/simple-icons/blob/develop/slugs.md) file in the Simple Icons repository. NB - the Simple Icons site and that slugs.md page may at times contain new icons that haven't yet been pulled into the Shields.io runtime. More information on how and when we incorporate icon updates can be found [here](https://github.com/badges/shields/discussions/5369).
-
-### Shields logos
-
-We also maintain a small number of custom logos for some services: https://github.com/badges/shields/tree/master/logo They can also be referenced by name and take preference to SimpleIcons e.g:
-
- - https://img.shields.io/npm/v/npm.svg?logo=npm
-
-### Custom Logos
-
-Any custom logo can be passed in a URL parameter by base64 encoding it. e.g:
-
- - https://img.shields.io/badge/play-station-blue.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj48cGF0aCBkPSJNMTI5IDExMWMtNTUgNC05MyA2Ni05MyA3OEwwIDM5OGMtMiA3MCAzNiA5MiA2OSA5MWgxYzc5IDAgODctNTcgMTMwLTEyOGgyMDFjNDMgNzEgNTAgMTI4IDEyOSAxMjhoMWMzMyAxIDcxLTIxIDY5LTkxbC0zNi0yMDljMC0xMi00MC03OC05OC03OGgtMTBjLTYzIDAtOTIgMzUtOTIgNDJIMjM2YzAtNy0yOS00Mi05Mi00MmgtMTV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+
-
-### logoColor parameter
-
-The `logoColor` param can be used to set the color of the logo. Hex, rgb, rgba, hsl, hsla and css named colors can all be used. For SimpleIcons named logos (which are monochrome), the color will be applied to the SimpleIcons logo.
-
--  - https://img.shields.io/badge/logo-javascript-blue?logo=javascript
--  - https://img.shields.io/badge/logo-javascript-blue?logo=javascript&logoColor=f5f5f5
-
-In the case where Shields hosts a custom multi-colored logo, if the `logoColor` param is passed, the corresponding SimpleIcons logo will be substituted and colored.
-
--  - https://img.shields.io/badge/logo-gitlab-blue?logo=gitlab
--  - https://img.shields.io/badge/logo-gitlab-blue?logo=gitlab&logoColor=white
+For documentation on using logos, see https://shields.io/docs/logos
## Contributing Logos
@@ -69,7 +37,6 @@ If you are submitting a pull request for a custom logo, please:
We try to ensure our logos are compliant with brand guidelines. If one of our custom logos does not conform to the necessary brand guidelines, please open an issue on the [shields.io tracker](https://github.com/badges/shields/issues) and we'll work with you to resolve it. If a logo from the simple-icons set does not conform to the relevant brand guidelines, please open an issue on the [simple-icons tracker](https://github.com/simple-icons/simple-icons/issues) first.
-[simpleicons]: https://simpleicons.org/
[simple-icons github]: https://github.com/simple-icons/simple-icons
[svgo]: https://github.com/svg/svgo
[svgomg]: https://jakearchibald.github.io/svgomg/
diff --git a/doc/static-badges.md b/doc/static-badges.md
index 75d9df2f45c356f1c95d976801b7fb8758a8e708..13ff0a86784c741413979d18d71862cda5e99564 100644
--- a/doc/static-badges.md
+++ b/doc/static-badges.md
@@ -1,12 +1 @@
-# Static Badges
-
-It is possible to use shields.io to make a wide variety of badges displaying static text and/or logos. For example:
-
--  - https://img.shields.io/badge/any%20text-you%20like-blue
--  - https://img.shields.io/badge/just%20the%20message-8A2BE2
--  - https://img.shields.io/badge/%27for%20the%20badge%27%20style-20B2AA?style=for-the-badge
--  - https://img.shields.io/badge/with%20a%20logo-grey?style=for-the-badge&logo=javascript
-
-Full documentation of styles and parameters: https://shields.io/#styles
-
-More documentation on logos: https://github.com/badges/shields/blob/master/doc/logos.md
+This documentation has moved to https://shields.io/docs/static-badges
diff --git a/frontend/blog/2023-07-03-new-frontend.md b/frontend/blog/2023-07-03-new-frontend.md
new file mode 100644
index 0000000000000000000000000000000000000000..f5322b8abdae8cc3a51307d344b4db53416de035
--- /dev/null
+++ b/frontend/blog/2023-07-03-new-frontend.md
@@ -0,0 +1,21 @@
+---
+slug: new-frontend
+title: We launched a new frontend
+authors:
+ name: chris48s
+ title: Shields.io Core Team
+ url: https://github.com/chris48s
+ image_url: https://avatars.githubusercontent.com/u/6025893
+tags: []
+---
+
+Alongside the general visual refresh and improvements to look and feel, our new frontend has allowed us to address a number of long-standing feature requests and enhancements:
+
+- Clearer and more discoverable documentation for our [static](https://shields.io/badges/static-badge), dynamic [json](https://shields.io/badges/dynamic-json-badge)/[xml](https://shields.io/badges/dynamic-xml-badge)/[yaml](https://shields.io/badges/dynamic-yaml-badge) and [endpoint](https://shields.io/badges/endpoint-badge) badges
+- Improved badge builder interface, with all optional query parameters included in the builder for each badge
+- Each badge now has its own documentation page, which we can link to. e.g: [https://shields.io/badges/discord](https://shields.io/badges/discord)
+- Light/dark mode themes
+- Improved search
+- Documentation for individual path and query parameters
+
+The new site also comes with big maintenance benefits for the core team. We rely heavily on [docusaurus](https://docusaurus.io/), [docusaurus-openapi](https://github.com/cloud-annotations/docusaurus-openapi), and [docusaurus-search-local](https://github.com/easyops-cn/docusaurus-search-local). This moves us to a mostly declarative setup, massively reducing the amount of custom frontend code we maintain ourselves.
diff --git a/frontend/docs/index.md b/frontend/docs/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..11aa648de7f5b49c422c5cd39a7554413e642a81
--- /dev/null
+++ b/frontend/docs/index.md
@@ -0,0 +1,13 @@
+---
+sidebar_position: 1
+---
+
+# Intro
+
+Shields.io is a service for concise, consistent, and legible badges, which can easily be included in GitHub readmes or any other web page. The service supports dozens of continuous integration services, package registries, distributions, app stores, social networks, code coverage services, and code analysis services. It is used by some of the world's most popular open-source projects.
+
+Browse a [complete list of badges](/badges) and locate a particular badge by using the search bar or by browsing the categories.
+
+Use the builder to fill in required path parameters for that badge type (like your username or repo) and optionally customize (label, colors etc.). And it's ready for use! Copy your badge url or code snippet, which can then be added to places like your GitHub readme files or other web pages.
+
+
diff --git a/frontend/docs/intro.md b/frontend/docs/intro.md
deleted file mode 100644
index fc44a306987f67f612850deecd5f879b02846e30..0000000000000000000000000000000000000000
--- a/frontend/docs/intro.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-sidebar_position: 1
----
-
-# TODO
diff --git a/frontend/docs/logos.md b/frontend/docs/logos.md
new file mode 100644
index 0000000000000000000000000000000000000000..0b43ef16091c5e9a66f0b96f940102b740fd0e68
--- /dev/null
+++ b/frontend/docs/logos.md
@@ -0,0 +1,37 @@
+---
+sidebar_position: 2
+---
+
+# Logos
+
+## SimpleIcons
+
+We support a wide range of logos via [SimpleIcons](https://simpleicons.org/). All simple-icons are referenced using icon slugs. e.g:
+
+ - https://img.shields.io/npm/v/npm.svg?logo=nodedotjs
+
+You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository. NB - the Simple Icons site and slugs.md page may at times contain new icons that haven't yet been pulled into Shields.io yet. More information on how and when we incorporate icon updates can be found [here](https://github.com/badges/shields/discussions/5369).
+
+## Shields logos
+
+We also maintain a small number of custom logos for a handful of services: https://github.com/badges/shields/tree/master/logo They can also be referenced by name and take preference to SimpleIcons e.g:
+
+ - https://img.shields.io/npm/v/npm.svg?logo=npm
+
+## Custom Logos
+
+Any custom logo can be passed in a URL parameter by base64 encoding it. e.g:
+
+ - https://img.shields.io/badge/play-station-blue.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj48cGF0aCBkPSJNMTI5IDExMWMtNTUgNC05MyA2Ni05MyA3OEwwIDM5OGMtMiA3MCAzNiA5MiA2OSA5MWgxYzc5IDAgODctNTcgMTMwLTEyOGgyMDFjNDMgNzEgNTAgMTI4IDEyOSAxMjhoMWMzMyAxIDcxLTIxIDY5LTkxbC0zNi0yMDljMC0xMi00MC03OC05OC03OGgtMTBjLTYzIDAtOTIgMzUtOTIgNDJIMjM2YzAtNy0yOS00Mi05Mi00MmgtMTV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+
+
+## logoColor parameter
+
+The `logoColor` param can be used to set the color of the logo. Hex, rgb, rgba, hsl, hsla and css named colors can all be used. For SimpleIcons named logos (which are monochrome), the color will be applied to the SimpleIcons logo.
+
+-  - https://img.shields.io/badge/logo-javascript-blue?logo=javascript
+-  - https://img.shields.io/badge/logo-javascript-blue?logo=javascript&logoColor=f5f5f5
+
+In the case where Shields hosts a custom multi-colored logo, if the `logoColor` param is passed, the corresponding SimpleIcons logo will be substituted and colored.
+
+-  - https://img.shields.io/badge/logo-gitlab-blue?logo=gitlab
+-  - https://img.shields.io/badge/logo-gitlab-blue?logo=gitlab&logoColor=white
diff --git a/frontend/docs/static-badges.md b/frontend/docs/static-badges.md
new file mode 100644
index 0000000000000000000000000000000000000000..56a72f1317fad21a99e41be0df040ef7f302901d
--- /dev/null
+++ b/frontend/docs/static-badges.md
@@ -0,0 +1,13 @@
+# Static Badges
+
+It is possible to use shields.io to make a wide variety of badges displaying static text and/or logos. For example:
+
+-  - https://img.shields.io/badge/any%20text-you%20like-blue
+-  - https://img.shields.io/badge/just%20the%20message-8A2BE2
+-  - https://img.shields.io/badge/%27for%20the%20badge%27%20style-20B2AA?style=for-the-badge
+-  - https://img.shields.io/badge/with%20a%20logo-grey?style=for-the-badge&logo=javascript
+
+For more info, see:
+
+- [Static badge builder](/badges/static-badge), including full documentation of styles and parameters
+- [Logos](/docs/logos)
diff --git a/frontend/docusaurus.config.cjs b/frontend/docusaurus.config.cjs
index 4169b36b968097a3416830d66c16c1c6b09fccee..6a6bc2c98805bb3e4d9b6dad0e4e73ac739e9cd8 100644
--- a/frontend/docusaurus.config.cjs
+++ b/frontend/docusaurus.config.cjs
@@ -31,11 +31,11 @@ const config = {
({
docs: {
sidebarPath: require.resolve('./sidebars.cjs'),
- editUrl: 'https://github.com/badges/shields/',
+ editUrl: 'https://github.com/badges/shields/tree/master/frontend',
},
blog: {
showReadingTime: true,
- editUrl: 'https://github.com/badges/shields/',
+ editUrl: 'https://github.com/badges/shields/tree/master/frontend',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
@@ -60,7 +60,13 @@ const config = {
},
items: [
{ to: '/badges', label: 'Badges', position: 'left' },
+ {
+ to: '/docs',
+ label: 'Documentation',
+ position: 'left',
+ },
{ to: '/community', label: 'Community', position: 'left' },
+ { to: '/blog', label: 'Blog', position: 'left' },
{
href: 'https://github.com/badges/shields',
label: 'GitHub',
diff --git a/frontend/static/img/builder.png b/frontend/static/img/builder.png
new file mode 100644
index 0000000000000000000000000000000000000000..1196e758f67e411790960b1f946418d2aba75857
Binary files /dev/null and b/frontend/static/img/builder.png differ