kopia lustrzana https://github.com/badgen/badgen.net
web: move doc pages to next.js
Amio
rodzic
6b08f37766
commit
41025d8e81
|
|
@ -0,0 +1,13 @@
|
|||
export default ({ children, ...args }) => (
|
||||
<div {...args}>
|
||||
{children}
|
||||
<style jsx>{`
|
||||
div {
|
||||
margin: 0 20px;
|
||||
}
|
||||
`}</style>
|
||||
<style jsx global>{`
|
||||
@import url('/static/doc-styles.css')
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -16,6 +16,7 @@ module.exports = [
|
|||
get('/_next/*', servePublicPages),
|
||||
get('/static/*', servePublicPages),
|
||||
get('/builder', servePublicPages),
|
||||
get('/docs/*', servePublicPages),
|
||||
get('/gallery', redirectTo('/gallery/live')),
|
||||
get('/gallery/', redirectTo('/gallery/live')),
|
||||
get('/gallery/*', servePublicPages)
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const serveMarked = require('serve-marked')
|
||||
const serve404 = require('./serve-404.js')
|
||||
|
||||
const serveMarkedOptions = {
|
||||
preset: 'merri',
|
||||
inlineCSS: `
|
||||
body { max-width: 800px; padding: 0 2rem 5rem 2rem }
|
||||
h1 + p { letter-spacing: 0.1px; margin-top: 2em }
|
||||
h1 + p + p { text-align: center; margin: 1em 0 }
|
||||
img { height: 20px }
|
||||
em { font-size: 0.8em; color: #666 }
|
||||
li { padding: 0.4em 0 }
|
||||
code { padding: 0.4em 0.6em; display: pre }
|
||||
pre code { padding: 0 }
|
||||
p { margin: 0; line-height: 2em }
|
||||
p img + a { vertical-align: top; margin-left: 0.4em; font: 14px/20px monospace }
|
||||
`,
|
||||
beforeHeadEnd: `<link rel="icon" type="image/png" href="/static/favicon.png">`,
|
||||
trackingGA: process.env.TRACKING_GA || null
|
||||
}
|
||||
|
||||
const docsFolder = path.join(__dirname, 'docs')
|
||||
const docHandlers = fs.readdirSync(docsFolder).reduce((map, filename) => {
|
||||
const key = filename.replace('.md', '')
|
||||
const title = `Usage of /${key} - Badgen`
|
||||
const options = { title, ...serveMarkedOptions }
|
||||
map[key] = serveMarked(path.join(docsFolder, filename), options)
|
||||
return map
|
||||
}, {})
|
||||
|
||||
module.exports = (req, res) => {
|
||||
const handler = docHandlers[req.params.topic]
|
||||
if (handler) {
|
||||
return handler(req, res)
|
||||
} else {
|
||||
return serve404(req, res)
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1,5 @@
|
|||
module.exports = {}
|
||||
const withMDX = require('@zeit/next-mdx')()
|
||||
|
||||
module.exports = withMDX({
|
||||
pageExtensions: ['js', 'jsx', 'mdx']
|
||||
})
|
||||
|
|
|
|||
Plik diff jest za duży
Load Diff
|
|
@ -39,6 +39,8 @@
|
|||
"xml2js": "^0.4.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mdx-js/mdx": "^0.16.0",
|
||||
"@zeit/next-mdx": "^1.2.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"micro-dev": "^3.0.0",
|
||||
"next": "^7.0.2",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
import React from 'react'
|
||||
import App, { Container } from 'next/app'
|
||||
import Head from 'next/head'
|
||||
import DocsLayout from '../components/docs-layout.js'
|
||||
|
||||
export default class MyApp extends App {
|
||||
render () {
|
||||
const { Component, pageProps } = this.props
|
||||
const { Component, pageProps, router } = this.props
|
||||
const pageContent = router.route.startsWith('/docs/')
|
||||
? <DocsLayout><Component {...pageProps} /></DocsLayout>
|
||||
: <Component {...pageProps} />
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Head>
|
||||
|
|
@ -13,7 +18,7 @@ export default class MyApp extends App {
|
|||
<link rel='stylesheet'
|
||||
href='https://fonts.googleapis.com/css?family=Merriweather:700,300' />
|
||||
</Head>
|
||||
<Component {...pageProps} />
|
||||
{ pageContent }
|
||||
<style jsx global>{`
|
||||
html, body { margin: 0; height: 100%; scroll-behavior: smooth }
|
||||
#__next { height: 100% }
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
|
||||
`$ now amio/badgen-service`
|
||||
|
||||
<style>
|
||||
<style jsx global>{`
|
||||
h1 + p { padding: 3em }
|
||||
img { height: 42px !important; margin: 0 !important; vertical-align: top }
|
||||
code { display: inline-block; margin-left: 1em; padding: 5px 1em; color: #111; font: 18px/32px monospace }
|
||||
code { background-color: #F0F3F6; border-radius: 4px }
|
||||
</style>
|
||||
`}</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
export default class extends React.Component {
|
||||
componentDidMount () {
|
||||
// Generate the icons example
|
||||
fetch('/metadata.json')
|
||||
.then((resp) => resp.json())
|
||||
.then(json => {
|
||||
const blacklist = ['postgresql', 'discord']
|
||||
const icons = document.querySelector('#icon-examples')
|
||||
for (const icon of json.icons) {
|
||||
if (blacklist.indexOf(icon) !== -1) continue;
|
||||
const img = document.createElement('img')
|
||||
img.src = `/badge//${icon}?icon=${icon}`
|
||||
icons.appendChild(img)
|
||||
icons.appendChild(document.createTextNode("\n"))
|
||||
}
|
||||
})
|
||||
}
|
||||
render = () => this.props.children
|
||||
}
|
||||
|
||||
# Badgen Options
|
||||
|
||||
Advance usage of badgen url.
|
||||
|
||||
|
||||
|
||||
### Available Color Names
|
||||
|
||||
<div>{
|
||||
['blue', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'grey'].map(c => {
|
||||
return (
|
||||
<a key={`${c}`} href={`/badge/color/${c}/${c}`}>
|
||||
<img src={`/badge/color/${c}/${c}`} />
|
||||
</a>
|
||||
)
|
||||
})
|
||||
}</div>
|
||||
|
||||
### Available Icons
|
||||
|
||||
<div id="icon-examples"></div>
|
||||
|
||||
### Available Query Params
|
||||
|
||||
- `icon` Use builtin icon in front of subject text. [e.g.][icon-eg-href]
|
||||
- `list` Set `list=1` will replace `,` with ` | ` in status text. [e.g.][list-eg-href]
|
||||
- `label` Override default subject text ([URL-Encoding][url-enc-href] needed for spaces or special characters).
|
||||
- `color` Override badge color. [e.g.][color-eg-href]
|
||||
|
||||
### See Also
|
||||
|
||||
- [`/runkit`](/docs/runkit) create arbitrary live badge with RunKit's online IDE.
|
||||
- [`/https`](/docs/https) let Badgen serve arbitrary live badge from custom api endpoint.
|
||||
|
||||
|
||||
[url-enc-href]: https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding
|
||||
[style-eg-href]: /badge/color/blue/blue?style=flat
|
||||
[list-eg-href]: /badge/platform/ios,macos,tvos?list=1
|
||||
[icon-eg-href]: /badge/docker/v1.2.3/blue?icon=docker
|
||||
[color-eg-href]: /npm/dm/express?color=pink
|
||||
|
|
@ -3,7 +3,6 @@ const { router, get } = require('micro-fork')
|
|||
const publicHandlers = require('./libs/public-handlers.js')
|
||||
const serveIndex = require('./libs/serve-index.js')
|
||||
const serve404 = require('./libs/serve-404.js')
|
||||
const serveDocs = require('./libs/serve-docs.js')
|
||||
const serveBadge = require('./libs/serve-badge.js')
|
||||
const serveMetadata = require('./libs/serve-metadata.js')
|
||||
const liveHandlers = require('./libs/live-handlers.js')
|
||||
|
|
@ -27,7 +26,6 @@ const main = router()(
|
|||
get('/*', serve404),
|
||||
get('/', indexHandler),
|
||||
get('/metadata.json', serveMetadata),
|
||||
get('/docs/:topic', serveDocs),
|
||||
get('/badge/:subject/:status', serveStaticBadge),
|
||||
get('/badge/:subject/:status/:color', serveStaticBadge),
|
||||
...liveHandlers,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Ładowanie…
Reference in New Issue