import React from 'react'
import Head from 'next/head'
import { THEMES, THEMES_HASH, COLORS } from '../lib/constants'
import Reset from './style/Reset'
import Font from './style/Font'
import Typography from './style/Typography'
const CODEMIRROR_VERSION = '5.61.1'
export const HIGHLIGHTS_ONLY = ['shades-of-purple', 'vscode', 'a11y-dark']
const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord', 'synthwave-84']
const CDN_STYLESHEETS = THEMES.filter(
t => LOCAL_STYLESHEETS.indexOf(t.id) < 0 && HIGHLIGHTS_ONLY.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}.min.css`
} else {
const themeDef = THEMES_HASH[theme]
href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/${CODEMIRROR_VERSION}/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} | Create and share beautiful images of your source code
))
export const MetaLinks = React.memo(() => {
return (
{LOCAL_STYLESHEETS.map(id => (
))}
{CDN_STYLESHEETS.map(themeDef => {
const href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/${CODEMIRROR_VERSION}/theme/${
themeDef && (themeDef.link || themeDef.id)
}.min.css`
return
})}
)
})
export default React.memo(function Meta() {
return (
)
})