kopia lustrzana https://github.com/badgen/badgen.net
Consistent badgen-title
Amio
rodzic
fb9cb6c6d2
commit
4cd0188864
|
|
@ -0,0 +1,111 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
const BadgenTitle = ({ host }) => {
|
||||
return (
|
||||
<div className='title-block'>
|
||||
<div className='title'>
|
||||
<h1>
|
||||
<img src='/static/badgen-logo.svg' />
|
||||
Badgen
|
||||
<StyleSwitch host={host} />
|
||||
</h1>
|
||||
<p>Fast badge generating service</p>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.title-block {
|
||||
height: calc(50vh - 100px);
|
||||
width: 100%;
|
||||
min-height: 160px;
|
||||
position: relative;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
.title.hidden {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
.title.show {
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
.title img {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
vertical-align: top;
|
||||
margin-top: -1px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.title h1 {
|
||||
margin: 1.5rem 0 0 0;
|
||||
font: 46px/48px Merriweather, serif;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
height: 52px;
|
||||
width: 235px;
|
||||
position: relative;
|
||||
}
|
||||
.title p {
|
||||
font: 20px/32px Merriweather, serif;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.3px;
|
||||
color: #333;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const StyleSwitch = ({ host }) => {
|
||||
if (!host) return null
|
||||
|
||||
return (
|
||||
<span className='style-switch'>
|
||||
{ host.includes('https://flat.') ? [
|
||||
<Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>,
|
||||
<Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>
|
||||
] : [
|
||||
<Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>,
|
||||
<Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>
|
||||
] }
|
||||
<style jsx>{`
|
||||
.style-switch {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: -2px;
|
||||
left: 235px;
|
||||
height: 26px;
|
||||
font: 16px/26px sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
a {
|
||||
color: #999;
|
||||
display: block;
|
||||
line-height: 26px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
a:first-child {
|
||||
margin-top: 0;
|
||||
transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.style-switch:hover a:first-child {
|
||||
margin-top: -26px;
|
||||
}
|
||||
a:focus {
|
||||
outline: none;
|
||||
color: #08C;
|
||||
}
|
||||
`}</style>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export default BadgenTitle
|
||||
|
|
@ -1,17 +1,12 @@
|
|||
import Link from 'next/link'
|
||||
import debounceRender from 'react-debounce-render'
|
||||
import BadgenTitle from './badgen-title.jsx'
|
||||
|
||||
const BadgePreview = ({ host, badgeURL, focus }) => {
|
||||
const showPreview = focus || !!badgeURL
|
||||
return (
|
||||
<div className='header-preview'>
|
||||
<div className={'title ' + (showPreview ? 'hidden' : 'show')}>
|
||||
<h1>
|
||||
<img src='/static/badgen-logo.svg' />
|
||||
Badgen
|
||||
<StyleSwitch host={host} />
|
||||
</h1>
|
||||
<p>Fast badge generating service</p>
|
||||
<BadgenTitle host={host} />
|
||||
</div>
|
||||
<div className={'preview ' + (showPreview ? 'show' : 'none')}>
|
||||
<PreviewBadge host={host} url={badgeURL} />
|
||||
|
|
@ -42,28 +37,6 @@ const BadgePreview = ({ host, badgeURL, focus }) => {
|
|||
.title.show {
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
.title img {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
vertical-align: top;
|
||||
margin-top: -1px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.title h1 {
|
||||
margin: 1.5rem 0 0 0;
|
||||
font: 46px/48px Merriweather, serif;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
height: 52px;
|
||||
width: 235px;
|
||||
position: relative;
|
||||
}
|
||||
.title p {
|
||||
font: 20px/32px Merriweather, serif;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.3px;
|
||||
color: #333;
|
||||
}
|
||||
.preview {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
|
|
@ -80,56 +53,12 @@ const BadgePreview = ({ host, badgeURL, focus }) => {
|
|||
)
|
||||
}
|
||||
|
||||
const StyleSwitch = ({ host }) => {
|
||||
if (!host) return null
|
||||
|
||||
return (
|
||||
<span className='style-switch'>
|
||||
{ host.includes('https://flat.') ? [
|
||||
<Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>,
|
||||
<Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>
|
||||
] : [
|
||||
<Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>,
|
||||
<Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>
|
||||
] }
|
||||
<style jsx>{`
|
||||
.style-switch {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: -2px;
|
||||
left: 235px;
|
||||
height: 26px;
|
||||
font: 16px/26px sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
a {
|
||||
color: #999;
|
||||
display: block;
|
||||
line-height: 26px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
a:first-child {
|
||||
margin-top: 0;
|
||||
transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.style-switch:hover a:first-child {
|
||||
margin-top: -26px;
|
||||
}
|
||||
a:focus {
|
||||
outline: none;
|
||||
color: #08C;
|
||||
}
|
||||
`}</style>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const PreviewBadge = debounceRender(({ host, url }) => {
|
||||
return <img style={{ height: '30px' }} src={genBadgeSrc(host, url)} />
|
||||
}, 400)
|
||||
}, 300)
|
||||
|
||||
const genBadgeSrc = (host, url) => {
|
||||
if (url === '') {
|
||||
if (!url) {
|
||||
return host + 'badge/badgen/preview'
|
||||
}
|
||||
if (url.split('/').length > 2) {
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
export default () => <>
|
||||
<h1>
|
||||
<img src='https://badgen.net/static/badgen-logo.svg' /> Badgen
|
||||
</h1>
|
||||
<p>Fast badge generating service.</p>
|
||||
<p>
|
||||
<a href='https://badgen.net'>classic</a>
|
||||
<a href='https://flat.badgen.net'>flat</a>
|
||||
</p>
|
||||
</>
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
import { useState } from 'react'
|
||||
import BadgeExamples from '../components/badge-examples.js'
|
||||
import Header from '../components/home-header.js'
|
||||
import BadgenTitle from '../components/badgen-title.jsx'
|
||||
import Intro from '../components/home-intro.js'
|
||||
import Footer from '../components/footer.js'
|
||||
import examples from '../static/.gen/badges.json'
|
||||
|
||||
const Index = ({ badgeExamples }) => {
|
||||
const Index = () => {
|
||||
const [ tab, setTab ] = useState('live')
|
||||
const badges = examples[tab]
|
||||
|
||||
return <>
|
||||
<Header />
|
||||
<BadgenTitle host='https://badgen.net' />
|
||||
<div className='docs'>
|
||||
<Intro />
|
||||
<h2 style={{ textAlign: 'center' }}>Badge Gallery</h2>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue