diff options
| -rw-r--r-- | .circleci/config.yml | 48 | ||||
| -rw-r--r-- | README.md | 4 | ||||
| -rw-r--r-- | package.json | 6 | ||||
| -rw-r--r-- | src/index.tsx | 73 |
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 @@ -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> |