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

Merge branch 'refactor-stylesheets'

Browse Source
main
Mike Fix 6 years ago
parent 72426ec54a c246b5c45d
commit 7bab61ee81
3 changed files with 46 additions and 51 deletions
Show Stats Download Patch File Download Diff File

58
components/Meta.js
Unescape Escape View File

@ -1,24 +1,42 @@
import Head from 'next/head' import Head from 'next/head'
import { THEMES } from '../lib/constants' import { THEMES, THEMES_HASH } from '../lib/constants'
import Reset from './style/Reset' 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 {
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 = () => ( 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,17 @@ 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
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 => <StylesheetLink key={theme.id} theme={theme.id} />)
<link
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 />

4
lib/constants.js
Unescape Escape View File

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

17
pages/embed.js
Unescape Escape View File

@ -5,27 +5,20 @@ 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'
import { getQueryStringState } from '../lib/routing' import { getQueryStringState } from '../lib/routing'
const Page = props => ( const Page = props => (
<div> <React.Fragment>
<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>
{` {`
@ -37,7 +30,7 @@ const Page = props => (
} }
`} `}
</style> </style>
</div> </React.Fragment>
) )
class Embed extends React.Component { class Embed extends React.Component {

Write Preview
Loading…
Cancel
Save