Merge branch 'refactor-stylesheets'

main
Mike Fix 6 years ago
commit 7bab61ee81

@ -1,24 +1,42 @@
import Head from 'next/head'
import { THEMES } from '../lib/constants'
import { THEMES, THEMES_HASH } from '../lib/constants'
import Reset from './style/Reset'
import Font from './style/Font'
import Typography from './style/Typography'
export const LOCAL_STYLESHEETS = ['one-dark', 'verminal', 'night-owl', 'nord']
const LOCAL_STYLESHEETS = ['one-dark', 'verminal', 'night-owl', 'nord']
const CDN_STYLESHEETS = THEMES.filter(
t => t.hasStylesheet !== false && LOCAL_STYLESHEETS.indexOf(t.id) < 0
)
const CDN_STYLESHEETS = THEMES.filter(t => LOCAL_STYLESHEETS.indexOf(t.id) < 0)
export const StylesheetLink = ({ theme }) => {
let href
if (LOCAL_STYLESHEETS.indexOf(theme) > -1) {
href = `/static/themes/${theme}.css`
} else {
const themeDef = THEMES_HASH[theme]
href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/theme/${themeDef &&
(themeDef.link || themeDef.id)}.min.css`
}
return (
<Head>
<link key={href} rel="stylesheet" href={href} />
</Head>
)
}
export const CodeMirrorLink = () => (
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.min.css"
/>
<Head>
<link
key="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.min.css"
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.min.css"
/>
</Head>
)
export const MetaTags = () => (
<>
<Head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@ -42,7 +60,7 @@ export const MetaTags = () => (
<title>Carbon</title>
<link rel="shortcut icon" href="/static/favicon.ico" />
<link rel="manifest" href="/static/manifest.json" />
</>
</Head>
)
/*
@ -55,33 +73,17 @@ export default function Meta() {
<div className="meta">
<Head>
<title>Carbon</title>
<MetaTags />
<link rel="stylesheet" href="/static/react-crop.css" />
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/theme/seti.min.css"
/>
<CodeMirrorLink />
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/theme/solarized.min.css"
/>
{LOCAL_STYLESHEETS.map(id => (
<link key={id} rel="stylesheet" href={`/static/themes/${id}.css`} />
))}
{onBrowser
? CDN_STYLESHEETS.map(theme => (
<link
key={theme.id}
rel="stylesheet"
href={
theme.link ||
`//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/theme/${theme.id}.min.css`
}
/>
))
: null}
</Head>
<MetaTags />
<StylesheetLink theme="seti" />
<CodeMirrorLink />
{LOCAL_STYLESHEETS.map(id => (
<StylesheetLink key={id} theme={id} />
))}
{onBrowser
? CDN_STYLESHEETS.map(theme => <StylesheetLink key={theme.id} theme={theme.id} />)
: null}
<Reset />
<Font />
<Typography />

@ -91,12 +91,12 @@ export const THEMES = [
{
id: 'solarized dark',
name: 'Solarized (Dark)',
hasStylesheet: false
link: 'solarized'
},
{
id: 'solarized light',
name: 'Solarized (Light)',
hasStylesheet: false
link: 'solarized'
},
{
id: 'tomorrow-night-bright',

@ -5,27 +5,20 @@ import { withRouter } from 'next/router'
import url from 'url'
// Ours
import { LOCAL_STYLESHEETS, CodeMirrorLink, MetaTags } from '../components/Meta'
import { StylesheetLink, CodeMirrorLink, MetaTags } from '../components/Meta'
import Carbon from '../components/Carbon'
import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../lib/constants'
import { getQueryStringState } from '../lib/routing'
const Page = props => (
<div>
<React.Fragment>
<Head>
<title>Carbon Embeds</title>
<MetaTags />
{LOCAL_STYLESHEETS.indexOf(props.theme) > -1 ? (
<link rel="stylesheet" href={`/static/themes/${props.theme}.css`} />
) : (
<link
rel="stylesheet"
href={`//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/theme/${props.theme}.min.css`}
/>
)}
<CodeMirrorLink />
</Head>
<MetaTags />
<StylesheetLink theme={props.theme} />
<CodeMirrorLink />
{props.children}
<style jsx global>
{`
@ -37,7 +30,7 @@ const Page = props => (
}
`}
</style>
</div>
</React.Fragment>
)
class Embed extends React.Component {

Loading…
Cancel
Save