kopia lustrzana https://github.com/badgen/badgen.net
chore: refine content and styles for help page
rodzic
e9dccf4391
commit
ff31870781
|
@ -11,58 +11,64 @@ export default function HomeIntro ({ isFlat = false }) {
|
||||||
<div className={`help-info`}>
|
<div className={`help-info`}>
|
||||||
<pre>{explainCode(isFlat)}</pre>
|
<pre>{explainCode(isFlat)}</pre>
|
||||||
|
|
||||||
<h3>Options</h3>
|
<h3 id={'generators'}>Badge Generators</h3>
|
||||||
<ul>
|
<p>The detailed help for every badge generator.</p>
|
||||||
<li>
|
<div className={'generator-list'}>
|
||||||
<code>color</code>
|
|
||||||
Override default badge color.
|
|
||||||
<a href='/npm/dm/express?color=pink'>e.g.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<code>icon</code>
|
|
||||||
Use builtin icon (or url for external icon) in front of subject text.
|
|
||||||
<a href='/badge/docker/v1.2.3/blue?icon=docker'>e.g.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<code>list</code>
|
|
||||||
Set <code>list=|</code> will replace <code>,</code> with <code>|</code> in status text.
|
|
||||||
<a href='/badge/platform/ios,macos,tvos?list=|'>e.g.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<code>label</code>
|
|
||||||
Override default subject text (<a href='https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding'>URL-Encoding</a> needed for spaces or special characters).
|
|
||||||
<a href='/badge/docker/v1.2.3/blue?label=container'>e.g.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<code>labelColor</code>
|
|
||||||
Override default label color.
|
|
||||||
<a href='/npm/dm/express?labelColor=pink'>e.g.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<code>scale</code>
|
|
||||||
Custom badge scale.
|
|
||||||
<a href='/badge/docker/v1.2.3/blue?icon=docker&scale=2'>e.g.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<code>cache</code>
|
|
||||||
Live badge are cached in cdn for 24hrs (86400), you may limit it to a minimum of 5min (300).
|
|
||||||
<a href='/npm/dm/express?cache=600'>e.g.</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3>Builtin Colors</h3>
|
|
||||||
{ colorExamples() }
|
|
||||||
|
|
||||||
<h3>Builtin Icons</h3>
|
|
||||||
{ iconExamples() }
|
|
||||||
|
|
||||||
<h3>Badge Generators</h3>
|
|
||||||
{
|
{
|
||||||
Object.keys(BadgeList).map(badge => {
|
Object.keys(BadgeList).map(badge => {
|
||||||
const href = '/' + badge
|
const href = '/' + badge
|
||||||
return <a key={badge} href={href}><code>{href}</code></a>
|
return <a key={badge} href={href}><code>{href}</code></a>
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 id={'options'}>URL Options</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>color</code>
|
||||||
|
Override default badge color.
|
||||||
|
<a href='/npm/dm/express?color=pink'>e.g.</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>icon</code>
|
||||||
|
Use builtin icon (or url for external icon) in front of subject text.
|
||||||
|
<a href='/badge/docker/v1.2.3/blue?icon=docker'>e.g.</a>
|
||||||
|
</li>
|
||||||
|
<li className='deprecated'>
|
||||||
|
<code>list</code>
|
||||||
|
Set <code>list=|</code> will replace <code>,</code> with <code>|</code> in status text.
|
||||||
|
<a href='/badge/platform/ios,macos,tvos?list=|'>e.g.</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>label</code>
|
||||||
|
Override default subject text (<a href='https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding'>URL-Encoding</a> needed for spaces or special characters).
|
||||||
|
<a href='/badge/docker/v1.2.3/blue?label=container'>e.g.</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>labelColor</code>
|
||||||
|
Override default label color.
|
||||||
|
<a href='/npm/dm/express?labelColor=pink'>e.g.</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>scale</code>
|
||||||
|
Custom badge scale.
|
||||||
|
<a href='/badge/docker/v1.2.3/blue?icon=docker&scale=2'>e.g.</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>cache</code>
|
||||||
|
Live badge are cached in cdn for 24hrs (86400), you may limit it to a minimum of 5min (300).
|
||||||
|
<a href='/npm/dm/express?cache=600'>e.g.</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3 id={'colors'}>Builtin Colors</h3>
|
||||||
|
<p>The colors you can use with query param: <code>?color=[colorname]</code></p>
|
||||||
|
|
||||||
|
{ colorExamples() }
|
||||||
|
|
||||||
|
<h3 id={'icons'}>Builtin Icons</h3>
|
||||||
|
<p>The icons you can use with query param: <code>?icon=[iconname]</code></p>
|
||||||
|
{ iconExamples() }
|
||||||
|
|
||||||
<h3>Advanced usage</h3>
|
<h3>Advanced usage</h3>
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -88,17 +94,27 @@ export default function HomeIntro ({ isFlat = false }) {
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
.help-info h3 {
|
.help-info h3 {
|
||||||
|
font-size: 20px;
|
||||||
font-family: Merriweather, serif;
|
font-family: Merriweather, serif;
|
||||||
margin: 2rem 0;
|
margin: 2em 0 1em 0;
|
||||||
|
padding-top: 1em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
.help-info p {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
ul { padding-left: 2em; font-family: "Open Sans", sans-serif }
|
ul { padding-left: 1em }
|
||||||
li { vertical-align: top; font-size: 14px; line-height: 24px; color: #777; margin: 5px 0 }
|
p, li { vertical-align: top; margin: 1rem 0; color: #333 }
|
||||||
code { padding: 0.3em 0.5em; display: pre; color: #333; background: #EEF2F8 }
|
code { padding: 0.3em 0.5em; display: pre; color: #333; background: #EEF2F8; font-size: 14px }
|
||||||
a { display: inline; margin-right: 0.3em }
|
a { display: inline; margin-right: 0.3em }
|
||||||
a:hover { text-decoration: underline }
|
a:hover { text-decoration: underline #06D; color: #06D }
|
||||||
a code { 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 }
|
||||||
`}
|
`}
|
||||||
</style>
|
</style>
|
||||||
</div>
|
</div>
|
||||||
|
@ -107,8 +123,8 @@ export default function HomeIntro ({ isFlat = false }) {
|
||||||
const colorExamples = () => {
|
const colorExamples = () => {
|
||||||
const colors = ['blue', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'grey', 'black']
|
const colors = ['blue', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'grey', 'black']
|
||||||
return colors.map(c => (
|
return colors.map(c => (
|
||||||
<a href={`/badge/color/${c}/${c}`} key={c}>
|
<a href={`/badge/color/${c}/${c}?label=`} key={c}>
|
||||||
<img alt={c} src={`/static/color/${c}/${c}`} />
|
<img alt={c} src={`/static/color/${c}/${c}?label=`} />
|
||||||
<style>{`
|
<style>{`
|
||||||
a {
|
a {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
|
|
@ -2,6 +2,8 @@ import '../styles/globals.css'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import { Analytics } from '@vercel/analytics/react'
|
import { Analytics } from '@vercel/analytics/react'
|
||||||
|
|
||||||
|
import './global.css'
|
||||||
|
|
||||||
import type { AppProps } from 'next/app'
|
import type { AppProps } from 'next/app'
|
||||||
|
|
||||||
export default function App({ Component, pageProps }: AppProps) {
|
export default function App({ Component, pageProps }: AppProps) {
|
||||||
|
|
File diff suppressed because one or more lines are too long
Ładowanie…
Reference in New Issue