diff --git a/components/help-info.tsx b/components/help-info.tsx
index fa90e7c..0c73978 100644
--- a/components/help-info.tsx
+++ b/components/help-info.tsx
@@ -11,59 +11,65 @@ export default function HomeIntro ({ isFlat = false }) {
{explainCode(isFlat)}
-
Options
+
Badge Generators
+
The detailed help for every badge generator.
+
+ {
+ Object.keys(BadgeList).map(badge => {
+ const href = '/' + badge
+ return
{href}
+ })
+ }
+
+
+
URL Options
-
color
Override default badge color.
- e.g.
+ e.g.
-
icon
Use builtin icon (or url for external icon) in front of subject text.
- e.g.
+ e.g.
- -
+
-
list
Set list=|
will replace ,
with |
in status text.
- e.g.
+ e.g.
-
label
Override default subject text (URL-Encoding needed for spaces or special characters).
- e.g.
+ e.g.
-
labelColor
Override default label color.
- e.g.
+ e.g.
-
scale
Custom badge scale.
- e.g.
+ e.g.
-
cache
Live badge are cached in cdn for 24hrs (86400), you may limit it to a minimum of 5min (300).
- e.g.
+ e.g.
-
Builtin Colors
+
Builtin Colors
+
The colors you can use with query param: ?color=[colorname]
+
{ colorExamples() }
-
Builtin Icons
+
Builtin Icons
+
The icons you can use with query param: ?icon=[iconname]
{ iconExamples() }
-
Badge Generators
- {
- Object.keys(BadgeList).map(badge => {
- const href = '/' + badge
- return
{href}
- })
- }
-
Advanced usage
-
@@ -88,17 +94,27 @@ export default function HomeIntro ({ isFlat = false }) {
margin-right: 6px;
}
.help-info h3 {
+ font-size: 20px;
font-family: Merriweather, serif;
- margin: 2rem 0;
+ margin: 2em 0 1em 0;
+ padding-top: 1em;
font-weight: 400;
}
+ .help-info p {
+ margin: 1rem 0;
+ }
- ul { padding-left: 2em; font-family: "Open Sans", sans-serif }
- li { vertical-align: top; font-size: 14px; line-height: 24px; color: #777; margin: 5px 0 }
- code { padding: 0.3em 0.5em; display: pre; color: #333; background: #EEF2F8 }
+ ul { padding-left: 1em }
+ p, li { vertical-align: top; margin: 1rem 0; color: #333 }
+ code { padding: 0.3em 0.5em; display: pre; color: #333; background: #EEF2F8; font-size: 14px }
a { display: inline; margin-right: 0.3em }
- a:hover { text-decoration: underline }
+ a:hover { text-decoration: underline #06D; color: #06D }
a code { color: #06D }
+
+ .generator-list { display: flex; flex-wrap: wrap }
+ .generator-list a { display: inline-block; margin-bottom: 0.6em }
+
+ .deprecated { display: none }
`}
@@ -107,8 +123,8 @@ export default function HomeIntro ({ isFlat = false }) {
const colorExamples = () => {
const colors = ['blue', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'grey', 'black']
return colors.map(c => (
-