Skip to content
This repository was archived by the owner on Apr 30, 2020. It is now read-only.

Commit 2bc09c5

Browse files
author
7coil
committed
use modals and shit for docs
1 parent 4f67e96 commit 2bc09c5

File tree

19 files changed

+377
-62
lines changed

19 files changed

+377
-62
lines changed

‎.sassrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"includePaths": [
3+
"client/scss"
4+
]
5+
}

‎client/components/ContentBox/index.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
margin-bottom: 1em;
33
padding: 1.5em;
44
border-radius: 0;
5-
overflow: hidden;
5+
// overflow: hidden;
66

77
h1, h2, h3, h4, h5, h6 {
88
margin-bottom: 0;

‎client/components/Layout/Toasts/index.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component } from 'react';
2+
import { connect } from 'react-redux';
3+
import styles from './index.module.scss';
4+
import ConstructCSS from '../../../helpers/ConstructCSS';
5+
6+
class Toasts extends Component {
7+
render() {
8+
const { toasts } = this.props.toasts;
9+
return (
10+
<div className={styles.toastContainer}>
11+
{toasts
12+
.map(toast => (
13+
<div key={toast.id} className={ConstructCSS(styles.toastDiv, toast.leave && styles.toastLeave)}>
14+
<div className={styles.timeout} style={{ animationDuration: `${toast.timeout / 1000}s` }} />
15+
<span
16+
style={{
17+
backgroundColor: toast.colour
18+
}}
19+
className={styles.toast}
20+
>{toast.content}</span>
21+
</div>
22+
))}
23+
</div>
24+
);
25+
}
26+
}
27+
28+
29+
const mapStateToProps = (state) => {
30+
const { toasts } = state;
31+
return { toasts };
32+
}
33+
34+
export default connect(mapStateToProps)(Toasts);

‎client/components/Layout/Toasts/index.module.scss

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
.toastContainer {
2+
position: fixed;
3+
text-align: right;
4+
right: 5px;
5+
bottom: 5px;
6+
z-index: 2000;
7+
.toastDiv {
8+
margin-bottom: 20px;
9+
overflow: hidden;
10+
position: relative;
11+
animation-name: enter;
12+
animation-duration: 1s;
13+
}
14+
.toastLeave {
15+
animation-name: leave;
16+
animation-duration: 1s;
17+
animation-delay: 0.5s;
18+
animation-fill-mode: forwards;
19+
}
20+
.toast {
21+
border-radius: 5px;
22+
padding: 5px;
23+
color: white;
24+
display: block;
25+
}
26+
.timeout {
27+
position: absolute;
28+
border-radius: 5px;
29+
top: 0;
30+
left: 0;
31+
width: 100%;
32+
height: 100%;
33+
background-color: #00000022;
34+
animation-name: timeoutAnimation;
35+
animation-duration: 5s;
36+
animation-delay: 0.5s;
37+
animation-timing-function: linear;
38+
animation-fill-mode: forwards;
39+
}
40+
}
41+
42+
@keyframes leave {
43+
from {
44+
transform: translateX(0);
45+
}
46+
to {
47+
transform: translateX(120%);
48+
}
49+
}
50+
51+
@keyframes enter {
52+
from {
53+
transform: translateX(120%);
54+
}
55+
to {
56+
transform: translateX(0);
57+
}
58+
}
59+
60+
@keyframes timeoutAnimation {
61+
from {
62+
width: 100%;
63+
}
64+
to {
65+
width: 0%;
66+
}
67+
}

‎client/components/Layout/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Container from '../Container';
99
import ContentBox from '../ContentBox';
1010

1111
import './index.module.scss';
12+
import Toasts from './Toasts';
1213

1314
class Layout extends Component {
1415
render() {
@@ -52,6 +53,7 @@ class Layout extends Component {
5253
</noscript>
5354
{this.props.children}
5455
<Footer />
56+
<Toasts />
5557
</div>
5658
)
5759
}

‎client/components/YouTube/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Component } from 'react';
22
import styles from './index.module.scss';
3+
import ConstructCSS from '../../helpers/ConstructCSS';
34

45
class YouTube extends Component {
56
render() {
@@ -9,7 +10,7 @@ class YouTube extends Component {
910
frameBorder="0"
1011
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
1112
allowFullScreen
12-
className={styles.video}
13+
className={ConstructCSS(styles.video, this.props.className)}
1314
title={this.props.title}
1415
></iframe>
1516
)

‎client/data/routes.js

+6
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,19 @@ import RpcHome from "../pages/RpcHome";
1414
import EditRpc from "../pages/EditRpc";
1515
import DocsHome from "../pages/DocsHome";
1616
import DocPage from "../pages/DocPage";
17+
import AboutPage from "../pages/AboutPage";
1718

1819
const routes = [
1920
{
2021
path: '/:locale/',
2122
exact: true,
2223
component: Home,
2324
status: 200,
25+
// }, {
26+
// path: '/:locale/about',
27+
// exact: true,
28+
// component: AboutPage,
29+
// status: 200,
2430
}, {
2531
path: '/:locale/game',
2632
exact: true,

‎client/locales/en-GB.json

+2
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,8 @@
422422
"back": "Back to posts",
423423
"title": "Terminal.ink Documentation and Blog",
424424
"description": "See posts about how Terminal.ink operates, or see a tutorial on how to do something.",
425+
"copy": "Click to copy link to this section",
426+
"copied": "Copied link to your clipboard",
425427
"headers": {
426428
"blog": "Latest blog posts",
427429
"howto": "Tutorials",

‎client/pages/AboutPage/index.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { Component } from 'react';
2+
import Container from '../../components/Container';
3+
import Layout from '../../components/Layout';
4+
import ContentBox from '../../components/ContentBox';
5+
import { Modesta } from '../../data/Styles';
6+
import FlexColumns from '../../components/FlexColumns';
7+
import GitHubButton from 'react-github-btn'
8+
9+
class AboutPage extends Component {
10+
render() {
11+
return (
12+
<Layout match={this.props.match}>
13+
<Container>
14+
<ContentBox>
15+
<h2>Discord Apps</h2>
16+
<p>
17+
Discord Apps is the longest running Open Source application store for Discord Bots and other Discord Applications.<br />
18+
We are empowered by members of the open source community to help contribute translations, fixes and overall presentation of the website.
19+
</p>
20+
</ContentBox>
21+
<ContentBox>
22+
<FlexColumns>
23+
<FlexColumns columns={6}>
24+
<h4>Open Source</h4>
25+
<p>We are open source</p>
26+
</FlexColumns>
27+
<FlexColumns columns={6}>
28+
<h4>Bot List People</h4>
29+
<p>
30+
We're bad people
31+
</p>
32+
</FlexColumns>
33+
<FlexColumns columns={6}>
34+
<h4>Bot List People</h4>
35+
<p>
36+
We're good people
37+
</p>
38+
</FlexColumns>
39+
</FlexColumns>
40+
<GitHubButton href="https://github.com/terminal/discordapps.dev" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star terminal/discordapps.dev on GitHub">Star</GitHubButton>
41+
</ContentBox>
42+
</Container>
43+
</Layout>
44+
);
45+
}
46+
}
47+
48+
export default AboutPage;

‎client/pages/DocPage/DocPageContentBox/ClickableHeading/index.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { Component, createElement } from 'react';
2+
import { Modesta, TwitterEmojis } from '../../../../data/Styles';
3+
import FlexContainer from '../../../../components/FlexContainer';
4+
import ConstructCSS from '../../../../helpers/ConstructCSS';
5+
import styles from './index.module.scss';
6+
import { createToast } from '../../../../redux/actions/toasts';
7+
import { connect } from 'react-redux';
8+
import { FormattedMessage } from 'react-intl';
9+
10+
class ClickableHeading extends Component {
11+
constructor(props) {
12+
super(props)
13+
this.onClick = this.onClick.bind(this);
14+
this.input = React.createRef();
15+
this.header = React.createRef();
16+
}
17+
componentDidMount() {
18+
if (window.location.hash === `#${this.props.id}`) window.scrollTo(0, this.header.current.offsetTop);
19+
}
20+
onClick(e, copied) {
21+
window.scrollTo(0, this.header.current.offsetTop);
22+
23+
const { dispatch } = this.props;
24+
dispatch(createToast({
25+
content: copied,
26+
timeout: 3000
27+
}))
28+
29+
this.input.current.select();
30+
document.execCommand('copy');
31+
}
32+
render() {
33+
return <>
34+
<FormattedMessage id="pages.docs.copy">
35+
{copy =>
36+
<FormattedMessage id="pages.docs.copied">
37+
{
38+
copied =>
39+
createElement(this.props.tag, {
40+
children: this.props.children,
41+
className: ConstructCSS(Modesta.tooltip, styles.heading),
42+
'data-tooltip': copy,
43+
id: this.props.id,
44+
ref: this.header,
45+
onClick: (e) => this.onClick(e, copied)
46+
})
47+
}
48+
</FormattedMessage>
49+
}
50+
</FormattedMessage>
51+
<input value={`${window.location.origin}${window.location.pathname}#${this.props.id}`} ref={this.input} className={styles.hidden} />
52+
</>
53+
}
54+
}
55+
56+
export default connect()(ClickableHeading);

‎client/pages/DocPage/DocPageContentBox/ClickableHeading/index.module.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.heading {
2+
&:after {
3+
background-color: #787eb4;
4+
font-size: 16pt;
5+
top: 100%;
6+
}
7+
}
8+
9+
.hidden {
10+
position: fixed;
11+
top: -100vh;
12+
left: -100vw;
13+
}

‎client/pages/DocPage/DocPageContentBox/index.js

+8-29
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import TableContainer from '../../../components/TableContainer';
1111
import Locations from '../../../data/Locations';
1212
import styles from './index.module.scss';
1313
import './vs2015.scss';
14+
import ClickableHeading from './ClickableHeading';
1415

1516
hljs.registerLanguage('javascript', hljsJavascript);
1617
hljs.registerLanguage('bash', hljsBash);
@@ -19,41 +20,20 @@ hljs.registerLanguage('json5', hljsJavascript);
1920
hljs.registerLanguage('json', hljsJson);
2021

2122
class BotPageContentBox extends Component {
22-
constructor(props) {
23-
super(props);
24-
25-
this.textArea = React.createRef();
26-
this.onClick = this.onClick.bind(this);
27-
}
28-
onClick(e) {
29-
if (e.target) {
30-
let tag = null;
31-
32-
// whoops
33-
if (/h[1-6]/i.test(e.target.tagName)) tag = e.target;
34-
if (/h[1-6]/i.test(e.target.parentElement.tagName)) tag = e.target.parentElement;
35-
if (/h[1-6]/i.test(e.target.parentElement.parentElement.tagName)) tag = e.target.parentElement.parentElement;
36-
37-
if (tag) {
38-
this.textArea.current.value = `${window.location.origin}${window.location.pathname}#${tag.attributes.id.value}`;
39-
this.textArea.current.select();
40-
document.execCommand('copy');
41-
42-
const element = document.getElementById(tag.attributes.id.value)
43-
if (element) {
44-
window.scrollTo(0, element.offsetTop);
45-
}
46-
}
47-
}
48-
}
4923
render() {
5024
const page = this.props.page;
5125

5226
const compiler = marksy({
5327
createElement,
5428
elements: {
5529
img: ({src, alt}) => <ModalImage className={styles.img} src={src.startsWith('http') ? src : `${Locations.docsServer}/posts${this.props.requestURL}${src}`} alt={alt} title={alt}/>,
56-
table: ({children}) => <TableContainer><table>{children}</table></TableContainer>
30+
table: ({children}) => <TableContainer><table>{children}</table></TableContainer>,
31+
h1: ({children, id}) => <ClickableHeading tag="h1" id={id}>{children}</ClickableHeading>,
32+
h2: ({children, id}) => <ClickableHeading tag="h2" id={id}>{children}</ClickableHeading>,
33+
h3: ({children, id}) => <ClickableHeading tag="h3" id={id}>{children}</ClickableHeading>,
34+
h4: ({children, id}) => <ClickableHeading tag="h4" id={id}>{children}</ClickableHeading>,
35+
h5: ({children, id}) => <ClickableHeading tag="h5" id={id}>{children}</ClickableHeading>,
36+
h6: ({children, id}) => <ClickableHeading tag="h6" id={id}>{children}</ClickableHeading>,
5737
},
5838
highlight: (language, code) => hljs.highlight(language, code).value
5939
});
@@ -71,7 +51,6 @@ class BotPageContentBox extends Component {
7151
{compiled.tree}
7252
</div>
7353
</div>
74-
<textarea ref={this.textArea} className={styles.hidden}></textarea>
7554
</ContentBox>
7655
)
7756
}

0 commit comments

Comments
 (0)