Merge pull request #10 from eug-vs/preview

Custom markdown page

4 files changed, 108 insertions, 23 deletions

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 84c6a35..6d97946 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -29,7 +29,25 @@ jobs:
           name: Test syntax and perform type checking
           command: npm test
 
-  deploy:
+  deploy_pages:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - add_ssh_keys:
+          fingerprints:
+            - "02:a9:ad:b9:38:7c:39:70:20:ee:92:4c:86:27:43:9d"
+
+      - run:
+          name: Deploy to gh-pages
+          command: npm run deploy-pages
+
+  publish_package:
     <<: *defaults
     steps:
       - checkout
@@ -42,9 +60,10 @@ jobs:
       - run:
           name: Authenticate with registry
           command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
+
       - run:
-          name: Deploy package
-          command: npm run deploy
+          name: Publish package to NPM
+          command: npm run publish-package
 
 
 workflows:
@@ -59,15 +78,24 @@ workflows:
       - checkout_and_test:
           filters:
             branches:
-              ignore: /.*/
-            tags:
-              only: /^v.*/
-      - deploy:
+              only: develop
+      - deploy_pages:
+          filters:
+            branches:
+              only: develop
+          requires:
+            - checkout_and_test
+
+  publish:
+    jobs:
+      - checkout_and_test:
+          filters:
+            branches:
+              only: master
+      - publish_package:
           filters:
             branches:
-              ignore: /.*/
-            tags:
-              only: /^v.*/
+              only: master
           requires:
             - checkout_and_test
 
diff --git a/README.md b/README.md
index e528b03..902f6f2 100644
--- a/README.md
+++ b/README.md
@@ -59,4 +59,6 @@ $ npm run build
 This command will generate `dist/` folder ready for distribution, which you of course can explore. Note that `tsc` creates type definitions (`.d.ts`) for every corresponding `.js` file. It's very useful because consumers also get access to them.
 
 ## Deploying
-Deploying to `npm` is fully automated through **CircleCI**: simply tag a commit as a Release and it will do the job.
+Publishing to `npm` is fully automated through **CircleCI** - package is deployed on every push into `master`. Therefore only release *PR*'s should be merged into `master` branch.
+
+Deploying to `gh-pages` is automatically performed on every commit into `develop` branch.
diff --git a/package.json b/package.json
index a915372..847abef 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,10 @@
     "start": "react-scripts start",
     "lint": "eslint . --ext ts,tsx --max-warnings 0",
     "test": "npm run lint && tsc",
-    "build": "rm -rf dist && tsc --project tsconfig.release.json",
-    "deploy": "npm run lint && npm run build && npm publish --public"
+    "build-pages": "react-scripts build",
+    "deploy-pages": "gh-pages -d build",
+    "compile-dist": "rm -rf dist && tsc --project tsconfig.release.json",
+    "publish-package": "npm run lint && npm run build && npm publish --public"
   },
   "license": "MIT",
   "dependencies": {
diff --git a/src/index.tsx b/src/index.tsx
index b64b207..be76722 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, TextField, Button } from '@material-ui/core';
 
 import {
   Benzin,
   Header,
   Window,
   Markdown,
+  ContentSection,
 } from './lib';
 
 import icon from './assets/icon.svg';
@@ -21,6 +22,11 @@ interface RenderPropTypes {
 const useStyles = makeStyles(theme => ({
   window: {
     padding: theme.spacing(4),
+  },
+  promoButton: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: theme.spacing(4),
   }
 }));
 
@@ -29,29 +35,61 @@ const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
 
 const headerContents = {
   home: null,
-  space: null,
   'spacevim': null,
-  'emoji': null,
   'material-ui': null,
+  'custom': null,
 };
 
 const pageMap: Record<string, string> = {
   home: 'https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md',
-  space: 'https://raw.githubusercontent.com/eug-vs/space/master/docs/environment.md',
   'spacevim': 'https://raw.githubusercontent.com/spacevim/spacevim/master/README.md',
-  emoji: 'https://raw.githubusercontent.com/muan/emoji/gh-pages/README.md',
   'material-ui': 'https://raw.githubusercontent.com/mui-org/material-ui/master/README.md',
 };
 
 
+const CustomPage: React.FC = () => {
+  const [url, setUrl] = useState<string>('');
+  const inputEl = useRef<HTMLInputElement>(null);
+
+  const handleParseUrl = (): void => {
+    setUrl(inputEl.current?.value || '');
+  }
+
+  return (
+    <>
+      <ContentSection sectionName="Render custom markdown document" level={2} >
+        <p>
+          This should be a link to a valid markdown file. Response should give the file contents.
+          If you copy README file from GitHub, make sure you provide link to raw view.
+        </p>
+        <p>
+          <TextField
+            inputRef={inputEl}
+            variant="outlined" color="secondary" label="Markdown url"
+          />
+        </p>
+        <Button variant="contained" color="secondary" onClick={handleParseUrl} >
+          Render!
+        </Button>
+      </ContentSection>
+      <Markdown url={url} />
+    </>
+  );
+}
+
+
 const App: React.FC = () => {
   const classes = useStyles();
-  const [page, setPage] = useState('home');
+  const [page, setPage] = useState<string>('home');
+
+  const handleGoCustom = (): void => {
+    setPage('custom');
+  }
 
   const url = pageMap[page];
-  const fileName = url.slice(url.lastIndexOf('/') + 1);
+  const fileName = url?.slice(url.lastIndexOf('/') + 1);
   const metadata = [
-    `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and processed by **BENZIN**! :rocket:`,
+    `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`,
     'Switch between tabs on the header to explore other markdown templates. :recycle: ',
     'Currently **only core features** of markdown function.',
     'Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen:',
@@ -76,12 +114,27 @@ const App: React.FC = () => {
       />
       <Window type="primary">
         <div className={classes.window}>
-          <Markdown url={url} />
+          {
+            (page === 'custom') ?
+            <CustomPage />
+            :
+            <Markdown url={url} />
+          }
         </div>
       </Window>
       <Window type="secondary" name="Feature preview">
         <div className={classes.window}>
           <Markdown data={metadata} />
+          <p className={classes.promoButton}>
+            <Button
+              variant="contained"
+              color="primary"
+              size="large"
+              onClick={handleGoCustom}
+            >
+              Render custom document
+            </Button>
+          </p>
         </div>
       </Window>
     </Benzin>