Merge branch 'refactor-stylesheets'

6 years ago · 7bab61ee81
parent 72426ec54a c246b5c45d
commit 7bab61ee81
3 changed files with 46 additions and 51 deletions
--- a/components/Meta.js
+++ b/components/Meta.js
@ -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 />
--- a/lib/constants.js
+++ b/lib/constants.js
@ -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',
--- a/pages/embed.js
+++ b/pages/embed.js
@ -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 {