From 0b366d18f77e445a285296fb195e36953b02260b Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sun, 26 Aug 2018 14:05:46 -0700 Subject: [PATCH 1/3] refactor stylesheets abstraction --- components/Meta.js | 75 ++++++++++++++++++++++++---------------------- lib/constants.js | 6 ++-- pages/embed.js | 15 +++------- 3 files changed, 46 insertions(+), 50 deletions(-) diff --git a/components/Meta.js b/components/Meta.js index da479e2..dfd889e 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -4,21 +4,39 @@ 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 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 ( + + + + ) +} export const CodeMirrorLink = () => ( - + + + ) export const MetaTags = () => ( - <> + @@ -42,7 +60,7 @@ export const MetaTags = () => ( Carbon - + ) /* @@ -55,33 +73,20 @@ export default function Meta() {
Carbon - - - - - {LOCAL_STYLESHEETS.map(id => ( - - ))} - {onBrowser - ? CDN_STYLESHEETS.map(theme => ( - - )) - : null} + + + + + {LOCAL_STYLESHEETS.map(id => ( + + ))} + {onBrowser + ? CDN_STYLESHEETS.map(theme => ( + + )) + : null} diff --git a/lib/constants.js b/lib/constants.js index 754560c..8b3e799 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -90,13 +90,11 @@ export const THEMES = [ }, { id: 'solarized dark', - name: 'Solarized (Dark)', - hasStylesheet: false + name: 'Solarized (Dark)' }, { id: 'solarized light', - name: 'Solarized (Light)', - hasStylesheet: false + name: 'Solarized (Light)' }, { id: 'tomorrow-night-bright', diff --git a/pages/embed.js b/pages/embed.js index 2c9b786..69e4ebb 100644 --- a/pages/embed.js +++ b/pages/embed.js @@ -5,7 +5,7 @@ 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' @@ -15,17 +15,10 @@ const Page = props => (
Carbon Embeds - - {LOCAL_STYLESHEETS.indexOf(props.theme) > -1 ? ( - - ) : ( - - )} - + + + {props.children} -
+ ) class Embed extends React.Component {