mirror of
https://github.com/marp-team/marp.git
synced 2024-09-11 10:35:38 +03:00
Add re-designed website
This commit is contained in:
parent
0f756898bd
commit
3f15a0e16f
91
.circleci/config.yml
Normal file
91
.circleci/config.yml
Normal file
@ -0,0 +1,91 @@
|
||||
version: 2.1
|
||||
|
||||
executors:
|
||||
node:
|
||||
parameters:
|
||||
version:
|
||||
type: string
|
||||
default: lts
|
||||
docker:
|
||||
- image: circleci/node:<< parameters.version >>
|
||||
working_directory: ~/marp-core
|
||||
|
||||
commands:
|
||||
install:
|
||||
parameters:
|
||||
postinstall:
|
||||
type: steps
|
||||
default: []
|
||||
yarn:
|
||||
type: string
|
||||
default: 1.19.1
|
||||
steps:
|
||||
# https://github.com/nodejs/docker-node/blob/master/docs/BestPractices.md#upgradingdowngrading-yarn
|
||||
- run:
|
||||
name: Upgrade yarn
|
||||
command: |
|
||||
sudo -E sh -c 'curl -fSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
|
||||
&& tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
|
||||
&& ln -snf /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
|
||||
&& ln -snf /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
|
||||
&& rm yarn-v$YARN_VERSION.tar.gz'
|
||||
environment:
|
||||
YARN_VERSION: << parameters.yarn >>
|
||||
|
||||
- restore_cache:
|
||||
keys:
|
||||
- v2.1-dependencies-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-{{ .Branch }}
|
||||
- v2.1-dependencies-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-
|
||||
- v2.1-dependencies-{{ .Environment.CIRCLE_JOB }}-
|
||||
|
||||
- run: yarn install
|
||||
- steps: << parameters.postinstall >>
|
||||
|
||||
- save_cache:
|
||||
key: v2.1-dependencies-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-{{ .Branch }}
|
||||
paths:
|
||||
- node_modules
|
||||
- ~/.cache/yarn
|
||||
|
||||
audit:
|
||||
steps:
|
||||
- checkout
|
||||
- install:
|
||||
postinstall:
|
||||
- run: yarn audit
|
||||
|
||||
test:
|
||||
steps:
|
||||
- run: node --version
|
||||
|
||||
- checkout
|
||||
- install
|
||||
|
||||
- run:
|
||||
name: Prettier formatting
|
||||
command: yarn check:format
|
||||
|
||||
- run:
|
||||
name: ESLint
|
||||
command: yarn lint
|
||||
|
||||
jobs:
|
||||
audit:
|
||||
executor: node
|
||||
steps:
|
||||
- audit
|
||||
|
||||
test-node:
|
||||
executor:
|
||||
name: node
|
||||
version: '12.13.0' # Specify LTS version for development
|
||||
steps:
|
||||
- test
|
||||
|
||||
workflows:
|
||||
test:
|
||||
jobs:
|
||||
- audit
|
||||
- test-node:
|
||||
requires:
|
||||
- audit
|
14
.eslintrc.yml
Normal file
14
.eslintrc.yml
Normal file
@ -0,0 +1,14 @@
|
||||
env:
|
||||
node: true
|
||||
es6: true
|
||||
|
||||
extends:
|
||||
- eslint:recommended
|
||||
- plugin:react/recommended
|
||||
- prettier
|
||||
- prettier/react
|
||||
|
||||
parserOptions:
|
||||
ecmaFeatures:
|
||||
jsx: true
|
||||
sourceType: module
|
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,3 +1,5 @@
|
||||
tmp
|
||||
|
||||
# Created by https://www.gitignore.io/api/node,windows,macos,linux,sublimetext,emacs,vim,visualstudiocode
|
||||
|
||||
### Emacs ###
|
||||
|
@ -1,3 +1,5 @@
|
||||
.git/
|
||||
.vscode/
|
||||
dist
|
||||
node_modules
|
||||
tmp
|
||||
|
6
lerna.json
Normal file
6
lerna.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"version": "0.0.0",
|
||||
"packages": ["packages/*"],
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true
|
||||
}
|
@ -1,3 +0,0 @@
|
||||
[build]
|
||||
publish = "website/public"
|
||||
command = "cd website && yarn build"
|
19
package.json
19
package.json
@ -18,19 +18,24 @@
|
||||
"url": "https://github.com/marp-team/marp"
|
||||
},
|
||||
"workspaces": [
|
||||
"website"
|
||||
"packages/*"
|
||||
],
|
||||
"scripts": {
|
||||
"format": "prettier \"**/*.{css,html,js,json,jsx,md,scss,ts,tsx,yaml,yml}\"",
|
||||
"format:check": "yarn -s --mutex file format -c"
|
||||
},
|
||||
"prettier": {
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
},
|
||||
"scripts": {
|
||||
"check:format": "yarn -s format -c",
|
||||
"docs": "yarn -s workspace @marp-team/marp-website serve",
|
||||
"format": "prettier \"**/*.{css,html,js,json,jsx,md,mdx,scss,yaml,yml}\"",
|
||||
"lint": "eslint \"**/*.{js,jsx}\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^1.18.2",
|
||||
"typescript": "^3.6.4"
|
||||
"eslint": "^6.6.0",
|
||||
"eslint-config-prettier": "^6.4.0",
|
||||
"eslint-plugin-react": "^7.16.0",
|
||||
"lerna": "^3.18.3",
|
||||
"prettier": "^1.18.2"
|
||||
}
|
||||
}
|
||||
|
3
packages/website/.eslintrc.yml
Normal file
3
packages/website/.eslintrc.yml
Normal file
@ -0,0 +1,3 @@
|
||||
rules:
|
||||
react/prop-types: 0
|
||||
react/react-in-jsx-scope: 0 # Charge does not require to import React
|
3
packages/website/netlify.toml
Normal file
3
packages/website/netlify.toml
Normal file
@ -0,0 +1,3 @@
|
||||
[build]
|
||||
publish = "dist"
|
||||
command = "yarn build"
|
23
packages/website/package.json
Normal file
23
packages/website/package.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "@marp-team/marp-website",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Marp team",
|
||||
"url": "https://github.com/marp-team"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/marp-team/marp"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "charge build src dist",
|
||||
"serve": "charge serve src"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@emotion/core": "^10.0.22",
|
||||
"@marp-team/marp-core": "^0.14.0",
|
||||
"@static/charge": "^1.5.0"
|
||||
}
|
||||
}
|
BIN
packages/website/src/assets/hero-background.jpg
Normal file
BIN
packages/website/src/assets/hero-background.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 141 KiB |
1
packages/website/src/assets/marp-logo.svg
Normal file
1
packages/website/src/assets/marp-logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><path fill="#009bda" d="M40 0L0 40h20l20-20V0z"/><path fill="#78c5e9" d="M40 20v20h20V0L40 20z"/><path fill="#007aad" d="M20 40h20V20L20 40z"/></svg>
|
After Width: | Height: | Size: 210 B |
7
packages/website/src/blog.html.jsx
Normal file
7
packages/website/src/blog.html.jsx
Normal file
@ -0,0 +1,7 @@
|
||||
/** @jsx jsx */
|
||||
import { jsx } from '@emotion/core'
|
||||
import { Layout } from './layout.js.jsx'
|
||||
|
||||
export default function Blog() {
|
||||
return <Layout active="blog">{/* TODO: Add list of blog articles */}</Layout>
|
||||
}
|
111
packages/website/src/components/button.js.jsx
Normal file
111
packages/website/src/components/button.js.jsx
Normal file
@ -0,0 +1,111 @@
|
||||
/** @jsx jsx */
|
||||
import { css, jsx } from '@emotion/core'
|
||||
|
||||
const btnShadow = '0 3px 6px rgba(0, 0, 0, 0.25)'
|
||||
const btnShadowFocus = '0 0 0 0.15em #67b8e3'
|
||||
|
||||
const button = css`
|
||||
appearance: none;
|
||||
border-radius: 1.5em;
|
||||
border: 0;
|
||||
box-shadow: ${btnShadow};
|
||||
box-sizing: content-box;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
font-weight: bold;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0.6em 0.95em;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
transition: color 0.15s linear, background-color 0.15s linear;
|
||||
|
||||
&:active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: ${btnShadowFocus}, ${btnShadow};
|
||||
}
|
||||
`
|
||||
|
||||
const outline = css`
|
||||
padding: 0.475em 0.825em;
|
||||
`
|
||||
|
||||
const colors = {
|
||||
default: {
|
||||
common: css`
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
|
||||
&:hover {
|
||||
color: #444;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
&:active {
|
||||
color: #444;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
`,
|
||||
outline: css`
|
||||
border: 0.125em solid #444;
|
||||
`,
|
||||
},
|
||||
primary: {
|
||||
regular: css`
|
||||
color: #fff;
|
||||
background: #0288d1
|
||||
linear-gradient(30deg, transparent, rgba(255, 255, 255, 0.3));
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #0277b7;
|
||||
|
||||
&:active {
|
||||
color: #fff;
|
||||
background-color: #02669d;
|
||||
}
|
||||
}
|
||||
`,
|
||||
outline: css`
|
||||
color: #0288d1;
|
||||
border: 0.125em solid #0288d1;
|
||||
background-color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #0288d1;
|
||||
|
||||
&:active {
|
||||
color: #fff;
|
||||
background-color: #0277b7;
|
||||
border-color: #0277b7;
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
}
|
||||
|
||||
export const Button = props => {
|
||||
const color = colors[props.color] || colors.default
|
||||
const style = [
|
||||
button,
|
||||
color.common,
|
||||
props.outline && outline,
|
||||
color[props.outline ? 'outline' : 'regular'],
|
||||
props.css,
|
||||
]
|
||||
|
||||
if (props.href) return <a tabIndex="0" role="button" {...props} css={style} />
|
||||
return <button {...props} css={style} />
|
||||
}
|
45
packages/website/src/components/marp.js.jsx
Normal file
45
packages/website/src/components/marp.js.jsx
Normal file
@ -0,0 +1,45 @@
|
||||
/** @jsx jsx */
|
||||
import { Marp as MarpCore } from '@marp-team/marp-core'
|
||||
import { css, jsx } from '@emotion/core'
|
||||
|
||||
const reset = css`
|
||||
all: initial;
|
||||
display: inline;
|
||||
display: contents;
|
||||
|
||||
svg {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
`
|
||||
|
||||
const container = css`
|
||||
display: inline-block;
|
||||
`
|
||||
|
||||
export const Marp = props => {
|
||||
const marp = new MarpCore({
|
||||
container: null,
|
||||
script: { source: 'cdn' },
|
||||
printable: false,
|
||||
})
|
||||
const { html, css: renderedCss } = marp.render(props.markdown, {
|
||||
htmlAsArray: true,
|
||||
})
|
||||
|
||||
return (
|
||||
<div css={reset}>
|
||||
<div
|
||||
css={[
|
||||
container,
|
||||
css([renderedCss.replace(/\/\*[\s\S]*?\*\//g, '')]),
|
||||
props.style,
|
||||
]}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: html[props.page ? props.page - 1 : 0],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
141
packages/website/src/index.html.jsx
Normal file
141
packages/website/src/index.html.jsx
Normal file
@ -0,0 +1,141 @@
|
||||
/** @jsx jsx */
|
||||
import { css, jsx } from '@emotion/core'
|
||||
import { Layout, defaultTitle } from './layout.js.jsx'
|
||||
import { Button } from './components/button.js.jsx'
|
||||
import { Marp } from './components/marp.js.jsx'
|
||||
|
||||
const Hero = () => (
|
||||
<section
|
||||
css={css`
|
||||
background: #fcfcfc url('./assets/hero-background.jpg') no-repeat right
|
||||
center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
padding: 70px 20px;
|
||||
text-align: center;
|
||||
`}
|
||||
>
|
||||
<h1
|
||||
css={css`
|
||||
margin: 50px 0;
|
||||
font-size: calc(12px + 0.75vw);
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
max-width: 560px;
|
||||
width: 80%;
|
||||
height: auto;
|
||||
margin: 0 auto 20px auto;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<img
|
||||
src="https://raw.githubusercontent.com/marp-team/marp/master/marp.png"
|
||||
alt={defaultTitle}
|
||||
/>
|
||||
Markdown Presentation Ecosystem
|
||||
</h1>
|
||||
{/* TODO: Link to document
|
||||
<p>
|
||||
<Button
|
||||
color="primary"
|
||||
href="#"
|
||||
css={css`
|
||||
font-size: calc(18px + 0.5vw);
|
||||
padding: 0.75em 1.5em;
|
||||
`}
|
||||
>
|
||||
Get started!
|
||||
</Button>
|
||||
</p>
|
||||
*/}
|
||||
<p>
|
||||
<Button
|
||||
outline="true"
|
||||
href="https://github.com/marp-team/marp/"
|
||||
rel="noopener noreferrer"
|
||||
css={css`
|
||||
font-size: calc(12px + 0.25vw);
|
||||
`}
|
||||
>
|
||||
Find Marp tools at repository...
|
||||
</Button>
|
||||
</p>
|
||||
</section>
|
||||
)
|
||||
|
||||
const example = `
|
||||
---
|
||||
theme: gaia
|
||||
_class: lead
|
||||
paginate: true
|
||||
backgroundImage: url('./assets/hero-background.jpg')
|
||||
---
|
||||
|
||||
![bg left:40% 80%](https://raw.githubusercontent.com/marp-team/marp/master/marp.png)
|
||||
|
||||
# **Marp**
|
||||
|
||||
Markdown Presentation Ecosystem
|
||||
|
||||
https://marp.app/
|
||||
|
||||
---
|
||||
|
||||
# Hello!
|
||||
|
||||
- :smile:
|
||||
`.trim()
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<Layout>
|
||||
<Hero />
|
||||
<section
|
||||
css={css`
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 50px 30px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
`}
|
||||
>
|
||||
<h1>
|
||||
<mark>The great experience</mark> for creating slide deck
|
||||
</h1>
|
||||
<p>
|
||||
Marp, Markdown Presentation Ecosystem, provides the great experience
|
||||
to create beautiful slide deck.
|
||||
</p>
|
||||
<p>You only have to focus into your story in Markdown document.</p>
|
||||
<p>
|
||||
<Marp
|
||||
markdown={example}
|
||||
style={css`
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
border: thin solid #ccc;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
|
||||
`}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<Marp
|
||||
markdown={example}
|
||||
page={2}
|
||||
style={css`
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
border: thin solid #ccc;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
|
||||
`}
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
</Layout>
|
||||
)
|
||||
}
|
216
packages/website/src/layout.js.jsx
Normal file
216
packages/website/src/layout.js.jsx
Normal file
@ -0,0 +1,216 @@
|
||||
/** @jsx jsx */
|
||||
import { Global, css, jsx } from '@emotion/core'
|
||||
|
||||
export const defaultTitle = 'Marp: Markdown Presentation Ecosystem'
|
||||
|
||||
const globalStyle = css`
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
background-color: #f8f8f8;
|
||||
background-image: linear-gradient(to bottom, #f8f8f8, #fff);
|
||||
background-attachment: fixed;
|
||||
font-family: Quicksand, Avenir, Century Gothic, -apple-system,
|
||||
BlinkMacSystemFont, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.3;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0288d1;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #02669d;
|
||||
transition: color 0.15s linear;
|
||||
|
||||
&:active {
|
||||
color: #1b4d68;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(to bottom, transparent 80%, #67b8e3 80%);
|
||||
}
|
||||
`
|
||||
|
||||
const Header = ({ active, height = 80 }) => (
|
||||
<header
|
||||
css={css`
|
||||
--header-gap: calc(5px + 1vw);
|
||||
|
||||
background: #fff;
|
||||
border: 0;
|
||||
border-bottom-width: thin;
|
||||
border-color: rgba(51, 51, 51, 0.07);
|
||||
border-style: solid;
|
||||
box-shadow: 0 0 40px rgba(128, 128, 128, 0.05);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: ${height * 0.22}px;
|
||||
height: ${height}px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 var(--header-gap);
|
||||
position: sticky;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
|
||||
> a {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
margin: 0 var(--header-gap);
|
||||
width: ${height * 0.75}px;
|
||||
|
||||
> img {
|
||||
width: ${height * 0.75}px;
|
||||
height: ${height * 0.75}px;
|
||||
}
|
||||
}
|
||||
|
||||
> nav {
|
||||
> ul {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
height: 100%;
|
||||
letter-spacing: 0.1vw;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
color: currentColor;
|
||||
display: flex;
|
||||
margin: 0 var(--header-gap);
|
||||
text-decoration: none;
|
||||
|
||||
&::before {
|
||||
/* Expand hit area */
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: calc(var(--header-gap) * -1);
|
||||
right: calc(var(--header-gap) * -1);
|
||||
top: ${height * -0.5}px;
|
||||
bottom: ${height * -0.5}px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: ${height * -0.075}px;
|
||||
transition: box-shadow 0.2s linear;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
box-shadow: inset 0 ${height * -0.05}px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
transition: none;
|
||||
box-shadow: inset 0 ${height * -0.05}px #009bda;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
||||
&::after {
|
||||
transition: none;
|
||||
box-shadow: inset 0 ${height * -0.05}px #78c5e9;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:active {
|
||||
&::after {
|
||||
transition: none;
|
||||
box-shadow: inset 0 ${height * -0.05}px #007aad;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
>
|
||||
<a href="/">
|
||||
<img src="./assets/marp-logo.svg" alt={defaultTitle} />
|
||||
</a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/blog" className={active === 'blog' ? 'active' : undefined}>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/marp-team/marp"
|
||||
// eslint-disable-next-line react/jsx-no-target-blank
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
|
||||
export const Layout = ({ active, children, title = defaultTitle }) => (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<meta charSet="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Quicksand:400,500,700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<Global styles={globalStyle} />
|
||||
</head>
|
||||
<body
|
||||
css={css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`}
|
||||
>
|
||||
<Header active={active} />
|
||||
<main>{children}</main>
|
||||
</body>
|
||||
</html>
|
||||
)
|
@ -1,12 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"lib": ["es2016", "es2017", "dom"],
|
||||
"module": "commonjs",
|
||||
"noEmit": true,
|
||||
"noImplicitAny": false,
|
||||
"resolveJsonModule": true,
|
||||
"strict": true,
|
||||
"target": "es2015"
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user