web: move examples to gallery page

pull/179/head
Amio 2018-10-15 17:33:58 +08:00
rodzic 034417949c
commit 5a1a4198a9
6 zmienionych plików z 95 dodań i 53 usunięć

Wyświetl plik

@ -1,5 +1,7 @@
---
extends: standard
extends:
- standard
- standard-react
parser: babel-eslint
rules:
max-len:

Wyświetl plik

@ -1,40 +1,5 @@
import React from 'react'
import liveExamples from '../libs/examples-live.js'
export default class extends React.Component {
state = { expanded: false }
expand = () => this.setState({ expanded: !this.state.expanded })
render () {
return (
<div className='wrapper'>
<div className='ex-header'>
<a id='examples' href='#examples' onClick={this.expand}>
Badge Examples
</a>
</div>
{ this.state.expanded && <Examples data={liveExamples} /> }
<style jsx>{`
.wrapper {
border-top: 1px solid #EEE;
width: 100%;
}
.ex-header {
height: 59px;
line-height: 59px;
padding: 0 1rem;
}
#examples {
display: inline-block;
}
`}</style>
</div>
)
}
}
const Examples = ({ data }) => {
export default ({ data }) => {
return Object.entries(data).map(([category, egs]) => (
<dl key={category}>
<dt>{category}</dt>
@ -49,7 +14,7 @@ const Examples = ({ data }) => {
dl {
padding: 0 1em;
margin: 0 auto;
width: 920px;
max-width: 920px;
}
dt {
margin-bottom: 1em;
@ -66,7 +31,7 @@ const Examples = ({ data }) => {
}
b {
display: inline-block;
min-width: 15em;
min-width: 14em;
font-family: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
text-align: right;
font-weight: 300;
@ -84,6 +49,11 @@ const Examples = ({ data }) => {
span {
font-family: monospace;
}
@media (max-width: 600px) {
span {
display: none;
}
}
`}</style>
</dl>
))

Wyświetl plik

@ -1,9 +1,10 @@
import examplesLive from '../libs/examples-live.js'
import examplesStatic from '../libs/examples-static.js'
const egs = Object.entries(examplesLive).reduce((accu, curr) => {
return accu.concat(curr[1].map(eg => eg.concat(curr[0])))
}, examplesStatic.map(eg => ['', eg, 'static']))
const egs = Object.entries({ ...examplesLive, ...examplesStatic })
.reduce((accu, curr) => {
return accu.concat(curr[1].map(eg => eg.concat(curr[0])))
}, [])
export default ({ badgeURL, onSelect }) => {
const matched = badgeURL.length > 1 && egs.filter(eg => {

Wyświetl plik

@ -1,9 +1,11 @@
module.exports = [
'badge/Swift/4.2/orange',
'badge/license/MIT/blue',
'badge/chat/on%20gitter/cyan',
'badge/stars/★★★★☆',
'badge/become/a%20patron/F96854',
'badge/code%20style/standard/f2a',
'badge/platform/ios,macos,tvos?list=1'
]
module.exports = {
'static': [
['swift version', 'badge/Swift/4.2/orange'],
['license mit', 'badge/license/MIT/blue'],
['gitter', 'badge/chat/on%20gitter/cyan'],
['star rating', 'badge/stars/★★★★☆'],
['patreon', 'badge/become/a%20patron/F96854'],
['code style: standard', 'badge/code%20style/standard/f2a'],
['platform', 'badge/platform/ios,macos,tvos?list=1']
]
}

Wyświetl plik

@ -2,7 +2,6 @@ import React from 'react'
import Preview from '../components/builder-preview.js'
import Bar from '../components/builder-bar.js'
import Helper from '../components/builder-helper.js'
import ExFooter from '../components/ex-footer.js'
export default class BuilderPage extends React.Component {
state = {
@ -40,7 +39,6 @@ export default class BuilderPage extends React.Component {
onChange={this.setBadgeURL}
onFocus={this.setFocus} />
<Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} />
<ExFooter />
<style jsx>{`
div {
height: 100%;

69
pages/gallery.js 100644
Wyświetl plik

@ -0,0 +1,69 @@
import React from 'react'
import BadgeExamples from '../components/badge-examples.js'
import liveExamples from '../libs/examples-live.js'
import staticExamples from '../libs/examples-static.js'
export default class Gallery extends React.Component {
state = {
tab: 'live'
}
switch = () => this.setState({
tab: this.state.tab === 'live' ? 'static' : 'live'
})
render () {
const { tab } = this.state
const egData = tab === 'live' ? liveExamples : staticExamples
return (
<div className='wrapper'>
<div className='header'>
<h1>Badgen Gallery</h1>
<div className='tab' onClick={this.switch}>
<a className={tab === 'live' ? 'current' : ''}>Live Badges</a>
<a className={tab === 'static' ? 'current' : ''}>Static Badges</a>
</div>
</div>
<div className='content'>
<BadgeExamples data={egData} />
</div>
<style jsx>{`
.header {
background-color: #F7F7F7;
text-align: center;
padding: 5rem 0;
}
h1 {
font: 3rem/5rem Merriweather, serif;
letter-spacing: 1px;
font-weight: 700;
color: #333;
margin: 0;
}
.tab {
display: inline-block;
border: 1px solid #333;
margin-top: 1rem;
}
.tab a {
display: inline-block;
padding: 0 8px;
color: #333;
font: 14px/26px sans-serif;
text-transform: uppercase;
}
.tab a:hover {
cursor: pointer;
}
.tab a.current {
color: #EEE;
background-color: #333;
}
.content {
padding: 3rem 0;
}
`}</style>
</div>
)
}
}