Skip to content

Commit 6e810e6

Browse files
committed
Add meta tags and refactor code
1 parent 950f5d3 commit 6e810e6

File tree

15 files changed

+48
-103
lines changed

15 files changed

+48
-103
lines changed

README.md

Lines changed: 1 addition & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,3 @@
11
# Algorithm Visualizer
22

3-
[![Join the chat at https://gitter.im/parkjs814/AlgorithmVisualizer](https://badges.gitter.im/parkjs814/AlgorithmVisualizer.svg)](https://gitter.im/parkjs814/AlgorithmVisualizer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
4-
[![OpenCollective](https://opencollective.com/algorithmvisualizer/backers/badge.svg)](#backers)
5-
[![OpenCollective](https://opencollective.com/algorithmvisualizer/sponsors/badge.svg)](#sponsors)
6-
7-
http://parkjs814.github.io/AlgorithmVisualizer
8-
9-
![Algorithm Visualizer](http://i.giphy.com/3o6EhJFgsyShX6MHeM.gif)
10-
11-
### Contributing
12-
13-
We encourage you to check out [**Wiki**](https://github.com/parkjs814/AlgorithmVisualizer/wiki) before you get started.
14-
15-
If in need of any help, join our [Gitter](https://gitter.im/parkjs814/AlgorithmVisualizer?utm_source=share-link&utm_medium=link&utm_campaign=share-link) chatroom!
16-
17-
Special thanks to our [Top Contributors](CONTRIBUTORS.md)!
18-
19-
### Backers
20-
21-
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/algorithmvisualizer#backer)]
22-
23-
<a href="https://opencollective.com/algorithmvisualizer/backer/0/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/0/avatar.svg"></a>
24-
<a href="https://opencollective.com/algorithmvisualizer/backer/1/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/1/avatar.svg"></a>
25-
<a href="https://opencollective.com/algorithmvisualizer/backer/2/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/2/avatar.svg"></a>
26-
<a href="https://opencollective.com/algorithmvisualizer/backer/3/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/3/avatar.svg"></a>
27-
<a href="https://opencollective.com/algorithmvisualizer/backer/4/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/4/avatar.svg"></a>
28-
<a href="https://opencollective.com/algorithmvisualizer/backer/5/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/5/avatar.svg"></a>
29-
<a href="https://opencollective.com/algorithmvisualizer/backer/6/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/6/avatar.svg"></a>
30-
<a href="https://opencollective.com/algorithmvisualizer/backer/7/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/7/avatar.svg"></a>
31-
<a href="https://opencollective.com/algorithmvisualizer/backer/8/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/8/avatar.svg"></a>
32-
<a href="https://opencollective.com/algorithmvisualizer/backer/9/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/9/avatar.svg"></a>
33-
<a href="https://opencollective.com/algorithmvisualizer/backer/10/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/10/avatar.svg"></a>
34-
<a href="https://opencollective.com/algorithmvisualizer/backer/11/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/11/avatar.svg"></a>
35-
<a href="https://opencollective.com/algorithmvisualizer/backer/12/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/12/avatar.svg"></a>
36-
<a href="https://opencollective.com/algorithmvisualizer/backer/13/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/13/avatar.svg"></a>
37-
<a href="https://opencollective.com/algorithmvisualizer/backer/14/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/14/avatar.svg"></a>
38-
<a href="https://opencollective.com/algorithmvisualizer/backer/15/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/15/avatar.svg"></a>
39-
<a href="https://opencollective.com/algorithmvisualizer/backer/16/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/16/avatar.svg"></a>
40-
<a href="https://opencollective.com/algorithmvisualizer/backer/17/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/17/avatar.svg"></a>
41-
<a href="https://opencollective.com/algorithmvisualizer/backer/18/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/18/avatar.svg"></a>
42-
<a href="https://opencollective.com/algorithmvisualizer/backer/19/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/19/avatar.svg"></a>
43-
<a href="https://opencollective.com/algorithmvisualizer/backer/20/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/20/avatar.svg"></a>
44-
<a href="https://opencollective.com/algorithmvisualizer/backer/21/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/21/avatar.svg"></a>
45-
<a href="https://opencollective.com/algorithmvisualizer/backer/22/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/22/avatar.svg"></a>
46-
<a href="https://opencollective.com/algorithmvisualizer/backer/23/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/23/avatar.svg"></a>
47-
<a href="https://opencollective.com/algorithmvisualizer/backer/24/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/24/avatar.svg"></a>
48-
<a href="https://opencollective.com/algorithmvisualizer/backer/25/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/25/avatar.svg"></a>
49-
<a href="https://opencollective.com/algorithmvisualizer/backer/26/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/26/avatar.svg"></a>
50-
<a href="https://opencollective.com/algorithmvisualizer/backer/27/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/27/avatar.svg"></a>
51-
<a href="https://opencollective.com/algorithmvisualizer/backer/28/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/28/avatar.svg"></a>
52-
<a href="https://opencollective.com/algorithmvisualizer/backer/29/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/backer/29/avatar.svg"></a>
53-
54-
### Sponsors
55-
56-
Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/algorithmvisualizer#sponsor)]
57-
58-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/0/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/0/avatar.svg"></a>
59-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/1/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/1/avatar.svg"></a>
60-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/2/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/2/avatar.svg"></a>
61-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/3/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/3/avatar.svg"></a>
62-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/4/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/4/avatar.svg"></a>
63-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/5/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/5/avatar.svg"></a>
64-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/6/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/6/avatar.svg"></a>
65-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/7/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/7/avatar.svg"></a>
66-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/8/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/8/avatar.svg"></a>
67-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/9/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/9/avatar.svg"></a>
68-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/10/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/10/avatar.svg"></a>
69-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/11/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/11/avatar.svg"></a>
70-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/12/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/12/avatar.svg"></a>
71-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/13/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/13/avatar.svg"></a>
72-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/14/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/14/avatar.svg"></a>
73-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/15/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/15/avatar.svg"></a>
74-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/16/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/16/avatar.svg"></a>
75-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/17/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/17/avatar.svg"></a>
76-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/18/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/18/avatar.svg"></a>
77-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/19/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/19/avatar.svg"></a>
78-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/20/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/20/avatar.svg"></a>
79-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/21/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/21/avatar.svg"></a>
80-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/22/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/22/avatar.svg"></a>
81-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/23/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/23/avatar.svg"></a>
82-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/24/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/24/avatar.svg"></a>
83-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/25/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/25/avatar.svg"></a>
84-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/26/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/26/avatar.svg"></a>
85-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/27/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/27/avatar.svg"></a>
86-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/28/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/28/avatar.svg"></a>
87-
<a href="https://opencollective.com/algorithmvisualizer/sponsor/29/website" target="_blank"><img src="https://opencollective.com/algorithmvisualizer/sponsor/29/avatar.svg"></a>
3+
Write down your algorithm to be visualized.

branding/icon.png

28 KB
Loading

branding/icon.psd

287 KB
Binary file not shown.

branding/logo.png

38.2 KB
Loading

branding/logo.psd

267 KB
Binary file not shown.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"react-ace": "^6.1.4",
7777
"react-chartjs-2": "^2.7.0",
7878
"react-dom": "^16.3.1",
79+
"react-helmet": "^5.2.0",
7980
"react-input-autosize": "^2.2.1",
8081
"react-input-range": "^1.3.0",
8182
"react-markdown": "^3.3.0",

src/frontend/common/config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,16 @@ const languages = [{
1515
ext: 'py',
1616
mode: 'python',
1717
}];
18+
1819
const exts = languages.map(language => language.ext);
1920

21+
const us = {
22+
login: 'algorithm-visualizer',
23+
avatar_url: 'https://github.com/algorithm-visualizer.png',
24+
};
25+
2026
export {
2127
languages,
2228
exts,
29+
us,
2330
};

src/frontend/components/App/index.jsx

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import Cookies from 'js-cookie';
33
import { connect } from 'react-redux';
44
import Promise from 'bluebird';
5+
import { Helmet } from 'react-helmet';
56
import AutosizeInput from 'react-input-autosize';
67
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
78
import faPlus from '@fortawesome/fontawesome-free-solid/faPlus';
@@ -21,7 +22,7 @@ import { CategoryApi, GitHubApi } from '/apis';
2122
import { tracerManager } from '/core';
2223
import { actions } from '/reducers';
2324
import { extension, refineGist } from '/common/util';
24-
import { exts } from '/common/config';
25+
import { exts, us } from '/common/config';
2526
import README from '/static/README.md';
2627
import styles from './stylesheet.scss';
2728

@@ -127,7 +128,7 @@ class App extends React.Component {
127128

128129
loadAlgorithm({ categoryKey, algorithmKey, gistId }) {
129130
const { ext } = this.props.env;
130-
let fetchPromise = Promise.reject();
131+
let fetchPromise = null;
131132
if (categoryKey && algorithmKey) {
132133
fetchPromise = CategoryApi.getAlgorithm(categoryKey, algorithmKey)
133134
.then(({ algorithm }) => algorithm);
@@ -136,7 +137,7 @@ class App extends React.Component {
136137
titles: ['Scratch Paper', 'Untitled'],
137138
files: [{
138139
name: 'README.md',
139-
content: '# README',
140+
content: `# Scratch Paper\nVisualize your own algorithm here!\n\n[Tracer API](https://github.com/algorithm-visualizer/tracers/wiki)`,
140141
contributors: [],
141142
}, {
142143
name: `code.${ext}`,
@@ -146,16 +147,15 @@ class App extends React.Component {
146147
});
147148
} else if (gistId) {
148149
fetchPromise = GitHubApi.getGist(gistId, { timestamp: Date.now() }).then(refineGist);
150+
} else {
151+
fetchPromise = Promise.reject(new Error());
149152
}
150153
fetchPromise
151154
.then(algorithm => this.props.setCurrent(categoryKey, algorithmKey, gistId, algorithm.titles, algorithm.files))
152155
.catch(() => this.props.setCurrent(undefined, undefined, undefined, ['Algorithm Visualizer'], [{
153156
name: 'README.md',
154157
content: README,
155-
contributors: [{
156-
login: 'algorithm-visualizer',
157-
avatar_url: 'https://github.com/algorithm-visualizer.png',
158-
}],
158+
contributors: [us],
159159
}]))
160160
.finally(() => {
161161
const { files } = this.props.current;
@@ -214,7 +214,13 @@ class App extends React.Component {
214214
const { navigatorOpened, workspaceWeights, viewerTabIndex, editorTabIndex } = this.state;
215215
const { titles, files } = this.props.current;
216216

217-
const readmeFile = files.find(file => file.name === 'README.md');
217+
const readmeFile = files.find(file => file.name === 'README.md') || {
218+
name: 'README.md',
219+
content: `# ${titles[1]}\nREADME.md not found`,
220+
contributors: [us],
221+
};
222+
const groups = /^\s*# .*\n+([^\n]+)/.exec(readmeFile.content);
223+
const description = groups && groups[1] || '';
218224

219225
const editorTitles = files.map(file => file.name);
220226
if (files[editorTabIndex]) {
@@ -229,6 +235,10 @@ class App extends React.Component {
229235

230236
return (
231237
<div className={styles.app}>
238+
<Helmet>
239+
<title>{titles.join(' - ')}</title>
240+
<meta name="description" content={description} />
241+
</Helmet>
232242
<Header className={styles.header} onClickTitleBar={() => this.toggleNavigatorOpened()}
233243
navigatorOpened={navigatorOpened} loadScratchPapers={() => this.loadScratchPapers()}
234244
loadAlgorithm={params => this.loadAlgorithm(params)}
@@ -239,7 +249,7 @@ class App extends React.Component {
239249
<Navigator loadAlgorithm={params => this.loadAlgorithm(params)} />
240250
<TabContainer titles={['Description', 'Visualization']} tabIndex={viewerTabIndex}
241251
onChangeTabIndex={tabIndex => this.handleChangeViewerTabIndex(tabIndex)}>
242-
<MarkdownViewer source={readmeFile ? readmeFile.content : 'README.md not found'} />
252+
<MarkdownViewer source={readmeFile.content} />
243253
<VisualizationViewer />
244254
</TabContainer>
245255
<TabContainer className={styles.editor_tab_container} titles={editorTitles} tabIndex={editorTabIndex}

src/frontend/components/Button/index.jsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ class Button extends React.Component {
1313
this.state = {
1414
confirming: false,
1515
};
16+
17+
this.timeout = null;
18+
}
19+
20+
componentWillUnmount() {
21+
if (this.timeout) window.clearTimeout(this.timeout);
1622
}
1723

1824
render() {
@@ -29,7 +35,8 @@ class Button extends React.Component {
2935
href = null;
3036
onClick = () => {
3137
this.setState({ confirming: true });
32-
window.setTimeout(() => {
38+
this.timeout = window.setTimeout(() => {
39+
this.timeout = null;
3340
this.setState({ confirming: false });
3441
}, 2000);
3542
};

src/frontend/components/ToastContainer/stylesheet.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
display: flex;
55
flex-direction: column-reverse;
66
padding: 16px;
7+
pointer-events: none;
78
}
89

910
.toast {
@@ -14,6 +15,7 @@
1415
margin: 8px;
1516
font-size: $font-size-large;
1617
white-space: pre-line;
18+
pointer-events: auto;
1719

1820
&.success {
1921
border-color: rgb(0, 150, 0);

0 commit comments

Comments
 (0)