diff options
| -rw-r--r-- | .circleci/config.yml | 59 | ||||
| -rw-r--r-- | README.md | 4 | ||||
| -rw-r--r-- | package.json | 6 | ||||
| -rw-r--r-- | src/index.tsx | 125 |
4 files changed, 168 insertions, 26 deletions
diff --git a/.circleci/config.yml b/.circleci/config.yml index 84c6a35..85fd519 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -29,7 +29,31 @@ 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: Configure github user + command: | + git config user.email "eug-vs@keemail.me" + git config user.name "eug-vs" + + - run: + name: Deploy to gh-pages + command: npm run deploy-pages + + publish_package: <<: *defaults steps: - checkout @@ -42,9 +66,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: @@ -52,22 +77,34 @@ workflows: test: jobs: - - checkout_and_test + - checkout_and_test: + filters: + branches: + ignore: /^(master|develop)$/ deploy: jobs: - 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..f5e6d22 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": "npm run build-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..a9a7012 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,99 @@ 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, + 'live preview': 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 + fullWidth + inputRef={inputEl} + variant="outlined" + color="secondary" + label="Markdown url" + /> + </p> + <Button variant="contained" color="secondary" onClick={handleParseUrl} > + Render! + </Button> + </ContentSection> + <Markdown url={url} /> + </> + ); +} + +interface LivePropTypes { + setLivePreviewData: (livePreviewData: string) => void; +} + +const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => { + const inputEl = useRef<HTMLInputElement>(null); + + const handleRender = (): void => { + setLivePreviewData(inputEl.current?.value || ''); + } + + return ( + <> + <ContentSection sectionName="Markdown live preview" level={2} > + <p> + Start typing and see your text rendered on the left window! We recommend starting with # Header. + </p> + <p> + <TextField + fullWidth + multiline + inputRef={inputEl} + variant="outlined" + color="primary" + label="Markdown" + onChange={handleRender} + /> + </p> + </ContentSection> + </> + ) +} + + const App: React.FC = () => { const classes = useStyles(); - const [page, setPage] = useState('home'); + const [page, setPage] = useState<string>('home'); + const [livePreviewData, setLivePreviewData] = useState<string>(''); + + const handleGoLivePreview = (): void => { + setPage('live preview'); + } const url = pageMap[page]; - 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:`, + const fileName = url?.slice(url.lastIndexOf('/') + 1); + const info = [ + `## 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 +152,37 @@ const App: React.FC = () => { /> <Window type="primary"> <div className={classes.window}> - <Markdown url={url} /> + { + (page === 'custom') ? + <CustomPage /> + : + (page === 'live preview') ? + <Markdown data={livePreviewData || '# Start typing in the right window!'} /> + : + <Markdown url={url} /> + } </div> </Window> <Window type="secondary" name="Feature preview"> <div className={classes.window}> - <Markdown data={metadata} /> + { + (page === 'live preview') ? + <LivePreviewPage setLivePreviewData={setLivePreviewData} /> + : + <> + <Markdown data={info} /> + <p className={classes.promoButton}> + <Button + variant="contained" + color="primary" + size="large" + onClick={handleGoLivePreview} + > + Try it yourself! + </Button> + </p> + </> + } </div> </Window> </Benzin> |