import React from 'react' import Head from 'next/head' import { THEMES, THEMES_HASH } from '../lib/constants' import Reset from './style/Reset' import Font from './style/Font' import Typography from './style/Typography' const LOCAL_STYLESHEETS = [ 'one-light', 'one-dark', 'verminal', 'night-owl', 'nord', 'shades-of-purple' ] const CDN_STYLESHEETS = THEMES.filter(t => LOCAL_STYLESHEETS.indexOf(t.id) < 0) export function Link({ href }) { return ( ) } 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.42.2/theme/${themeDef && (themeDef.link || themeDef.id)}.min.css` } return } export const CodeMirrorLink = () => ( ) const title = 'Carbon' const description = 'Carbon is the easiest way to create and share beautiful images of your source code.' export const MetaTags = React.memo(() => ( {title} )) export const MetaLinks = React.memo(() => { return ( {LOCAL_STYLESHEETS.map(id => ( ))} {CDN_STYLESHEETS.map(themeDef => { const href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/theme/${themeDef && (themeDef.link || themeDef.id)}.min.css` return })} ) }) export default React.memo(function Meta() { return ( ) })