hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor stylesheets abstraction

Browse Source
main
Mike Fix 6 years ago
parent 68469a4dbb
commit 0b366d18f7
3 changed files with 46 additions and 50 deletions
Show Stats Download Patch File Download Diff File

55
components/Meta.js
Unescape Escape View File

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

6
lib/constants.js
Unescape Escape View File

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

13
pages/embed.js
Unescape Escape View File

@ -5,7 +5,7 @@ import { withRouter } from 'next/router'
import url from 'url' import url from 'url'
// Ours // Ours
import { LOCAL_STYLESHEETS, CodeMirrorLink, MetaTags } from '../components/Meta' import { StylesheetLink, CodeMirrorLink, MetaTags } from '../components/Meta'
import Carbon from '../components/Carbon' import Carbon from '../components/Carbon'
import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../lib/constants' import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../lib/constants'
@ -15,17 +15,10 @@ const Page = props => (
<div> <div>
<Head> <Head>
<title>Carbon Embeds</title> <title>Carbon Embeds</title>
</Head>
<MetaTags /> <MetaTags />
{LOCAL_STYLESHEETS.indexOf(props.theme) > -1 ? ( <StylesheetLink theme={props.theme} />
<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 /> <CodeMirrorLink />
</Head>
{props.children} {props.children}
<style jsx global> <style jsx global>
{` {`

Write Preview
Loading…
Cancel
Save