kopia lustrzana https://github.com/badgen/badgen.net
feat: add colors, icons, and generator links to help
rodzic
6d2ab69b74
commit
aa9c6a65aa
|
@ -1,12 +1,14 @@
|
||||||
|
/* eslint-disable @next/next/no-img-element */
|
||||||
import icons from 'badgen-icons'
|
import icons from 'badgen-icons'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
|
import BadgeList from '../public/.meta/badge-list.json'
|
||||||
|
|
||||||
// import { Open_Sans } from '@next/font/google'
|
// import { Open_Sans } from '@next/font/google'
|
||||||
// const openSans = Open_Sans({ subsets: ['latin'], weight: ['400'] })
|
// const openSans = Open_Sans({ subsets: ['latin'], weight: ['400'] })
|
||||||
|
|
||||||
export default function HomeIntro ({ isFlat = false }) {
|
export default function HomeIntro ({ isFlat = false }) {
|
||||||
return (
|
return (
|
||||||
<div className={`home-intro`}>
|
<div className={`help-info`}>
|
||||||
<pre>{explainCode(isFlat)}</pre>
|
<pre>{explainCode(isFlat)}</pre>
|
||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
|
@ -48,6 +50,20 @@ export default function HomeIntro ({ isFlat = false }) {
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<h3>Builtin Colors</h3>
|
||||||
|
{ colorExamples() }
|
||||||
|
|
||||||
|
<h3>Builtin Icons</h3>
|
||||||
|
{ iconExamples() }
|
||||||
|
|
||||||
|
<h3>Badge Generators</h3>
|
||||||
|
{
|
||||||
|
Object.keys(BadgeList).map(badge => {
|
||||||
|
const href = '/' + badge
|
||||||
|
return <a key={badge} href={href}><code>{href}</code></a>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
<h3>Advanced usage</h3>
|
<h3>Advanced usage</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
@ -59,6 +75,7 @@ export default function HomeIntro ({ isFlat = false }) {
|
||||||
turn an api endpoint into a svg live badge.
|
turn an api endpoint into a svg live badge.
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
pre {
|
pre {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
@ -70,7 +87,7 @@ export default function HomeIntro ({ isFlat = false }) {
|
||||||
code {
|
code {
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
.home-intro h3 {
|
.help-info h3 {
|
||||||
font-family: Merriweather, serif;
|
font-family: Merriweather, serif;
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
@ -78,8 +95,9 @@ export default function HomeIntro ({ isFlat = false }) {
|
||||||
|
|
||||||
ul { padding-left: 2em; font-family: "Open Sans", sans-serif }
|
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 }
|
li { vertical-align: top; font-size: 14px; line-height: 24px; color: #777; margin: 5px 0 }
|
||||||
li code { padding: 0.3em 0.5em; display: pre; color: #333; background: #EEF2F8 }
|
code { padding: 0.3em 0.5em; display: pre; color: #333; background: #EEF2F8 }
|
||||||
li a { display: inline; margin-left: 0.3em; text-decoration: underline }
|
a { display: inline; margin-right: 0.3em }
|
||||||
|
a:hover { text-decoration: underline }
|
||||||
a code { color: #06D }
|
a code { color: #06D }
|
||||||
`}
|
`}
|
||||||
</style>
|
</style>
|
||||||
|
@ -90,7 +108,7 @@ 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}`} key={c}>
|
||||||
<Image alt={c} src={`/badge/color/${c}/${c}`} width='30' height='20' />
|
<img alt={c} src={`/static/color/${c}/${c}`} />
|
||||||
<style>{`
|
<style>{`
|
||||||
a {
|
a {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
@ -106,7 +124,7 @@ const iconExamples = () => {
|
||||||
const url = `/badge/icon/${icon}?icon=${icon}&label`
|
const url = `/badge/icon/${icon}?icon=${icon}&label`
|
||||||
return (
|
return (
|
||||||
<a href={url} key={icon}>
|
<a href={url} key={icon}>
|
||||||
<Image alt={icon} src={url} width='30' height='20' />
|
<img alt={icon} src={url} />
|
||||||
<style>{`
|
<style>{`
|
||||||
a {
|
a {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
|
@ -14,7 +14,7 @@ export default {
|
||||||
github: github.meta,
|
github: github.meta,
|
||||||
npm: npm.meta,
|
npm: npm.meta,
|
||||||
bundlephobia: bundlephobia.meta,
|
bundlephobia: bundlephobia.meta,
|
||||||
chromeWebStore: chromeWebStore.meta,
|
'chrome-web-store': chromeWebStore.meta,
|
||||||
hackage: hackage.meta,
|
hackage: hackage.meta,
|
||||||
pypi: pypi.meta,
|
pypi: pypi.meta,
|
||||||
runkit: runkit.meta,
|
runkit: runkit.meta,
|
||||||
|
|
|
@ -4,7 +4,7 @@ import styles from '../styles/Home.module.css'
|
||||||
|
|
||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import BadgenTitle from '../components/badgen-title'
|
import BadgenTitle from '../components/badgen-title'
|
||||||
import Intro from '../components/home-intro'
|
import HelpInfo from '../components/help-info'
|
||||||
import Footer from '../components/footer'
|
import Footer from '../components/footer'
|
||||||
import examples from '../public/.meta/badges.json'
|
import examples from '../public/.meta/badges.json'
|
||||||
|
|
||||||
|
@ -25,7 +25,7 @@ export default function Index () {
|
||||||
</Head>
|
</Head>
|
||||||
<BadgenTitle host={host} />
|
<BadgenTitle host={host} />
|
||||||
<div className='body-wrapper'>
|
<div className='body-wrapper'>
|
||||||
<Intro />
|
<HelpInfo />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
|
@ -67,3 +67,7 @@ export default function Index () {
|
||||||
</style>
|
</style>
|
||||||
</> // eslint-disable-line
|
</> // eslint-disable-line
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function ColorBadge ({color: string}) {
|
||||||
|
return <a href="/badge/color/blue/blue"><img src="/badge/color/blue/blue" alt="blue" /></a>
|
||||||
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue