Add re-designed website

.circleci/config.yml

@@ -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

.eslintrc.yml

@@ -0,0 +1,14 @@
+env:
+  node: true
+  es6: true
+
+extends:
+  - eslint:recommended
+  - plugin:react/recommended
+  - prettier
+  - prettier/react
+
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  sourceType: module

.gitignore

@@ -1,3 +1,5 @@
+tmp
+
 # Created by https://www.gitignore.io/api/node,windows,macos,linux,sublimetext,emacs,vim,visualstudiocode
 
 ### Emacs ###

.prettierignore

@@ -1,3 +1,5 @@
 .git/
 .vscode/
+dist
 node_modules
+tmp

lerna.json

@@ -0,0 +1,6 @@
+{
+  "version": "0.0.0",
+  "packages": ["packages/*"],
+  "npmClient": "yarn",
+  "useWorkspaces": true
+}

netlify.toml

@@ -1,3 +0,0 @@
-[build]
-  publish = "website/public"
-  command = "cd website && yarn build"

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"
   }
 }

packages/website/.eslintrc.yml

@@ -0,0 +1,3 @@
+rules:
+  react/prop-types: 0
+  react/react-in-jsx-scope: 0 # Charge does not require to import React

packages/website/netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  publish = "dist"
+  command = "yarn build"

packages/website/package.json

@@ -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"
+  }
+}

packages/website/src/assets/marp-logo.svg

@@ -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>

packages/website/src/blog.html.jsx

@@ -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>
+}

packages/website/src/components/button.js.jsx

@@ -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} />
+}

packages/website/src/components/marp.js.jsx

@@ -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>
+  )
+}

packages/website/src/index.html.jsx

@@ -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>
+  )
+}

packages/website/src/layout.js.jsx

@@ -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>
+)

tsconfig.base.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "lib": ["es2016", "es2017", "dom"],
-    "module": "commonjs",
-    "noEmit": true,
-    "noImplicitAny": false,
-    "resolveJsonModule": true,
-    "strict": true,
-    "target": "es2015"
-  }
-}