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

preload experiment

Browse Source
main
Mike Fix 6 years ago committed by Michael Fix
parent 4321c28609
commit ec101f0ad2
2 changed files with 31 additions and 43 deletions
Show Stats Download Patch File Download Diff File

6
components/ImagePicker.js
Unescape Escape View File

@ -1,10 +1,10 @@
import React from 'react' import React from 'react'
import Head from 'next/head'
import ReactCrop, { makeAspectCrop } from 'react-image-crop' import ReactCrop, { makeAspectCrop } from 'react-image-crop'
import RandomImage, { downloadThumbnailImage } from './RandomImage' import RandomImage, { downloadThumbnailImage } from './RandomImage'
import PhotoCredit from './PhotoCredit' import PhotoCredit from './PhotoCredit'
import Input from './Input' import Input from './Input'
import { Link } from './Meta'
import { fileToDataURL } from '../lib/util' import { fileToDataURL } from '../lib/util'
const getCroppedImg = (imageDataURL, pixelCrop) => { const getCroppedImg = (imageDataURL, pixelCrop) => {
@ -309,9 +309,7 @@ export default class ImagePicker extends React.Component {
return ( return (
<div className="image-picker-container"> <div className="image-picker-container">
<Head> <Link href="/static/react-crop.css" />
<link rel="stylesheet" href="/static/react-crop.css" />
</Head>
{content} {content}
<style jsx> <style jsx>
{` {`

68
components/Meta.js
Unescape Escape View File

@ -6,9 +6,17 @@ import Font from './style/Font'
import Typography from './style/Typography' import Typography from './style/Typography'
const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord'] const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord']
const CDN_STYLESHEETS = THEMES.filter(t => LOCAL_STYLESHEETS.indexOf(t.id) < 0) const CDN_STYLESHEETS = THEMES.filter(t => LOCAL_STYLESHEETS.indexOf(t.id) < 0)
export function Link({ key, href }) {
return (
<Head>
<link rel="preload" as="style" href={href} />
<link key={key} rel="stylesheet" href={href} />
</Head>
)
}
export const StylesheetLink = ({ theme }) => { export const StylesheetLink = ({ theme }) => {
let href let href
if (LOCAL_STYLESHEETS.indexOf(theme) > -1) { if (LOCAL_STYLESHEETS.indexOf(theme) > -1) {
@ -19,67 +27,49 @@ export const StylesheetLink = ({ theme }) => {
(themeDef.link || themeDef.id)}.min.css` (themeDef.link || themeDef.id)}.min.css`
} }
return ( return <Link href={href} />
<Head>
<link key={href} rel="stylesheet" href={href} />
</Head>
)
} }
export const CodeMirrorLink = () => ( export const CodeMirrorLink = () => (
<Head> <Link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/codemirror.min.css" />
<link
key="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/codemirror.min.css"
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/codemirror.min.css"
/>
</Head>
) )
const title = 'Carbon'
const description =
'Carbon is the easiest way to create and share beautiful images of your source code.'
export const MetaTags = () => ( export const MetaTags = () => (
<Head> <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" />
<meta <meta name="description" content={description} />
name="description" <meta name="application-name" content={title} />
content="Carbon is the easiest way to create and share beautiful images of your source code." <meta name="twitter:title" content={title} />
/> <meta name="twitter:description" content={description} />
<meta name="application-name" content="Carbon" /> <meta name="og:title" content={title} />
<meta name="twitter:title" content="Carbon" /> <meta name="og:description" content={description} />
<meta
name="twitter:description"
content="Carbon is the easiest way to create and share beautiful images of your source code."
/>
<meta name="og:title" content="Carbon" />
<meta
name="og:description"
content="Carbon is the easiest way to create and share beautiful images of your source code."
/>
<meta name="og:image" content="/static/banner.png" /> <meta name="og:image" content="/static/banner.png" />
<meta name="theme-color" content="#121212" /> <meta name="theme-color" content="#121212" />
<title>Carbon</title> <title>{title}</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> </Head>
) )
/*
* Before supporting <link rel="preload"> verify that it is widely supported in FireFox
* with out a flag here: https://caniuse.com/#feat=link-rel-preload
*/
export const MetaLinks = () => { export const MetaLinks = () => {
const onBrowser = typeof window !== 'undefined'
return ( return (
<React.Fragment> <React.Fragment>
<StylesheetLink theme="seti" /> <Link href="/static/themes/seti.css" />
<CodeMirrorLink /> <CodeMirrorLink />
{LOCAL_STYLESHEETS.map(id => ( {LOCAL_STYLESHEETS.map(id => (
<StylesheetLink key={id} theme={id} /> <Link key={id} href={`/static/themes/${id}.css`} />
))} ))}
{onBrowser {CDN_STYLESHEETS.map(theme => {
? CDN_STYLESHEETS.map(theme => <StylesheetLink key={theme.id} theme={theme.id} />) const themeDef = THEMES_HASH[theme]
: null} const href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/theme/${themeDef &&
(themeDef.link || themeDef.id)}.min.css`
return <Link key={href} href={href} />
})}
</React.Fragment> </React.Fragment>
) )
} }

Write Preview
Loading…
Cancel
Save