mirror
/
badgen.net
kopia lustrzana https://github.com/badgen/badgen.net
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

web: add Badgen logo & title

pull/166/head
Amio 2018-09-20 14:38:02 +08:00
rodzic 3cb388643c
commit 5678c0964f
5 zmienionych plików z 90 dodań i 53 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
components/builder-bar.js
Wyświetl plik

@ -20,6 +20,7 @@ export default class extends React.Component {
size={(inputSize || placeholder.length) + 1}
placeholder={placeholder}
onChange={this.onChange}
onFocus={this.props.onFocus}
value={badgeURL}
/>
<style jsx>{`

68
components/builder-preview.js
Wyświetl plik

@ -1,24 +1,76 @@
import debounceRender from './libs/debounce-render.js'
const BadgePreview = ({ host = 'https://badgen.net/', badgeURL }) => {
const BadgePreview = ({ host = 'https://badgen.net/', badgeURL, focus }) => {
return (
<div>
<img src={genBadgeSrc(host, badgeURL)} />
<div className='wrapper'>
<div className={'title' + (focus ? ' focus' : '')}>
<h1><img src='/static/badgen-logo.svg' /> Badgen</h1>
<p>Fast badge generating service</p>
</div>
<div className={'preview' + (focus ? ' focus' : '')}>
<PreviewBadge host={host} url={badgeURL} />
</div>
<style jsx>{`
div {
height: calc(50vh - 160px);
.wrapper {
height: calc(50vh - 100px);
width: 100%;
min-height: 100px;
position: relative;
}
.title, .preview {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
height: 30px;
.title.focus {
opacity: 0;
transform: translateY(-20px);
transition: all 200ms ease-out;
}
.title img {
height: 44px;
width: 44px;
vertical-align: top;
margin-top: 2px;
}
.title h1 {
margin: 1.5rem 0 0 0;
font: 52px/52px Merriweather, serif;
font-weight: 700;
color: #555;
height: 52px;
width: 256px;
}
.title p {
font: 18px/32px Merriweather, serif;
font-weight: 300;
letter-spacing: 0.3px;
color: #555;
}
.preview {
pointer-events: none;
opacity: 0;
transform: translateY(30px);
transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 200ms;
}
.preview.focus {
opacity: 1;
transform: translateY(0);
}
`}</style>
</div>
)
}
const PreviewBadge = debounceRender(({ host, url }) => {
return <img style={{ height: '30px' }} src={genBadgeSrc(host, url)} />
}, 400)
const genBadgeSrc = (host, url) => {
if (url === '') {
return host + 'badge///blue'
@ -30,4 +82,4 @@ const genBadgeSrc = (host, url) => {
}
}
export default debounceRender(BadgePreview, 400)
export default BadgePreview

61
package-lock.json wygenerowano
Wyświetl plik

@ -2171,7 +2171,7 @@
},
"browserify-aes": {
"version": "1.2.0",
"resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
"resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
"dev": true,
"requires": {
@ -2208,7 +2208,7 @@
},
"browserify-rsa": {
"version": "4.0.1",
"resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
"dev": true,
"requires": {
@ -2859,7 +2859,7 @@
},
"create-hash": {
"version": "1.2.0",
"resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
"dev": true,
"requires": {
@ -2872,7 +2872,7 @@
},
"create-hmac": {
"version": "1.1.7",
"resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
"resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
"dev": true,
"requires": {
@ -3150,7 +3150,7 @@
},
"diffie-hellman": {
"version": "5.0.3",
"resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
"dev": true,
"requires": {
@ -4213,8 +4213,7 @@
"version": "2.1.1",
"resolved": false,
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -4238,15 +4237,13 @@
"version": "1.0.0",
"resolved": false,
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"resolved": false,
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -4263,22 +4260,19 @@
"version": "1.1.0",
"resolved": false,
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"resolved": false,
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"resolved": false,
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -4409,8 +4403,7 @@
"version": "2.0.3",
"resolved": false,
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -4424,7 +4417,6 @@
"resolved": false,
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -4441,7 +4433,6 @@
"resolved": false,
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -4450,15 +4441,13 @@
"version": "0.0.8",
"resolved": false,
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.2.4",
"resolved": false,
"integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@ -4479,7 +4468,6 @@
"resolved": false,
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -4568,8 +4556,7 @@
"version": "1.0.1",
"resolved": false,
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -4583,7 +4570,6 @@
"resolved": false,
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -4679,8 +4665,7 @@
"version": "5.1.1",
"resolved": false,
"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@ -4722,7 +4707,6 @@
"resolved": false,
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -4744,7 +4728,6 @@
"resolved": false,
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -4793,15 +4776,13 @@
"version": "1.0.2",
"resolved": false,
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.2",
"resolved": false,
"integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
"dev": true,
"optional": true
"dev": true
}
}
},
@ -6695,7 +6676,6 @@
"resolved": false,
"integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
"dev": true,
"optional": true,
"requires": {
"kind-of": "^3.0.2",
"longest": "^1.0.1",
@ -8029,8 +8009,7 @@
"version": "1.0.1",
"resolved": false,
"integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
"dev": true,
"optional": true
"dev": true
},
"loose-envify": {
"version": "1.3.1",
@ -9852,7 +9831,7 @@
},
"parse-asn1": {
"version": "5.1.1",
"resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
"resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
"integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
"dev": true,
"requires": {
@ -10185,7 +10164,7 @@
},
"public-encrypt": {
"version": "4.0.2",
"resolved": "http://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
"integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
"dev": true,
"requires": {
@ -10910,7 +10889,7 @@
},
"sha.js": {
"version": "2.4.11",
"resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
"resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
"dev": true,
"requires": {

2
pages/_app.js
Wyświetl plik

@ -10,6 +10,8 @@ export default class MyApp extends App {
<Head>
<link rel='icon' type='image/png' href='/static/favicon.png' />
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
<link rel='stylesheet'
href='https://fonts.googleapis.com/css?family=Merriweather:700,300' />
</Head>
<Component {...pageProps} />
<style jsx global>{`

11
pages/builder.js
Wyświetl plik

@ -7,9 +7,11 @@ export default class BuilderPage extends React.Component {
state = {
host: undefined,
badgeURL: '',
placeholder: ''
placeholder: '',
focus: false
}
setFocus = () => this.state.focus || this.setState({ focus: true })
setBadgeURL = badgeURL => this.setState({ badgeURL })
selectExample = exampleURL => this.setState({ badgeURL: exampleURL })
@ -25,16 +27,17 @@ export default class BuilderPage extends React.Component {
}
render () {
const { host, placeholder, badgeURL } = this.state
const { host, placeholder, badgeURL, focus } = this.state
return (
<div>
<Preview host={host} badgeURL={badgeURL} />
<Preview host={host} badgeURL={badgeURL} focus={focus} />
<Bar
host={host}
badgeURL={badgeURL}
placeholder={placeholder}
onChange={this.setBadgeURL} />
onChange={this.setBadgeURL}
onFocus={this.setFocus} />
<Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} />
<style jsx>{`
div {