About the community author
7 |
8 |
27 |
28 | );
29 | };
30 |
31 | export default CommunityAuthor;
32 |
--------------------------------------------------------------------------------
/src/GithubLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const githubIcon = require('./components/images/github.svg');
3 |
4 | const GithubLink = ({ link, text }) => {
5 | return (
6 |
7 |
9 | 
10 |
11 |
12 |
26 |
13 | {name}
14 | {githubUrl ? (
15 |
16 | 
21 |
22 | ) : null}
23 |
24 |
21 |
22 | ) : null}
23 | {description}
25 |
6 |
15 |
16 | );
17 | };
18 |
19 | export default YoutubeEmbed;
20 |
--------------------------------------------------------------------------------
/src/components/DarkModeSwitch.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from '@emotion/styled';
3 |
4 | import NightImage from './images/night.png';
5 | import DayImage from './images/day.png';
6 |
7 | const StyledSwitch = styled('div')`
8 | display: flex;
9 | justify-content: flex-end;
10 | width: 100%;
11 | padding: 0 20px 0 25px;
12 |
13 | /* The switch - the box around the slider */
14 | .switch {
15 | position: relative;
16 | display: inline-block;
17 | width: 50px;
18 | height: 20px;
19 | }
20 |
21 | /* Hide default HTML checkbox */
22 | .switch input {
23 | opacity: 0;
24 | width: 0;
25 | height: 0;
26 | }
27 |
28 | /* The slider */
29 | .slider {
30 | position: absolute;
31 | cursor: pointer;
32 | top: 0;
33 | left: 0;
34 | right: 0;
35 | bottom: 0;
36 | background-color: #ccc;
37 | -webkit-transition: 0.4s;
38 | transition: 0.4s;
39 | }
40 |
41 | .slider:before {
42 | position: absolute;
43 | content: '';
44 | height: 30px;
45 | width: 30px;
46 | left: 0px;
47 | bottom: 4px;
48 | top: 0;
49 | bottom: 0;
50 | margin: auto 0;
51 | -webkit-transition: 0.4s;
52 | transition: 0.4s;
53 | background: white url(${NightImage});
54 | background-repeat: no-repeat;
55 | background-position: center;
56 | }
57 |
58 | input:checked + .slider {
59 | background: linear-gradient(to right, #fefb72, #f0bb31);
60 | }
61 |
62 | input:checked + .slider:before {
63 | -webkit-transform: translateX(24px);
64 | -ms-transform: translateX(24px);
65 | transform: translateX(24px);
66 | background: white url(${DayImage});
67 | background-repeat: no-repeat;
68 | background-position: center;
69 | }
70 |
71 | /* Rounded sliders */
72 | .slider.round {
73 | border-radius: 34px;
74 | }
75 |
76 | .slider.round:before {
77 | border-radius: 50%;
78 | }
79 | `;
80 |
81 | export const DarkModeSwitch = ({ isDarkThemeActive, toggleActiveTheme }) => (
82 |
42 |
67 |
68 |
84 |
85 | )
86 | };
87 |
88 | export default Header;
89 |
--------------------------------------------------------------------------------
/src/components/NextPrevious.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Link from './link';
3 |
4 | import { StyledNextPrevious } from './styles/PageNavigationButtons';
5 |
6 | const NextPrevious = ({ mdx, nav }) => {
7 | let currentIndex;
8 |
9 | const currentPaginationInfo = nav.map((el, index) => {
10 | if (el && el.url === mdx.fields.slug) {
11 | currentIndex = index;
12 | }
13 | });
14 |
15 | const nextInfo = {};
16 |
17 | const previousInfo = {};
18 |
19 | if (currentIndex === undefined) {
20 | // index
21 | if (nav[0]) {
22 | nextInfo.url = nav[0].url;
23 | nextInfo.title = nav[0].title;
24 | }
25 | previousInfo.url = null;
26 | previousInfo.title = null;
27 | currentIndex = -1;
28 | } else if (currentIndex === 0) {
29 | // first page
30 | nextInfo.url = nav[currentIndex + 1] ? nav[currentIndex + 1].url : null;
31 | nextInfo.title = nav[currentIndex + 1] ? nav[currentIndex + 1].title : null;
32 | previousInfo.url = null;
33 | previousInfo.title = null;
34 | } else if (currentIndex === nav.length - 1) {
35 | // last page
36 | nextInfo.url = null;
37 | nextInfo.title = null;
38 | previousInfo.url = nav[currentIndex - 1] ? nav[currentIndex - 1].url : null;
39 | previousInfo.title = nav[currentIndex - 1] ? nav[currentIndex - 1].title : null;
40 | } else if (currentIndex) {
41 | // any other page
42 | nextInfo.url = nav[currentIndex + 1].url;
43 | nextInfo.title = nav[currentIndex + 1].title;
44 | if (nav[currentIndex - 1]) {
45 | previousInfo.url = nav[currentIndex - 1].url;
46 | previousInfo.title = nav[currentIndex - 1].title;
47 | }
48 | }
49 |
50 | return (
51 |
69 |
76 |
81 |
82 |
83 |
55 |
73 |
74 |
75 |
82 |
83 | ) : null}
84 | {nextInfo.url && currentIndex >= 0 ? (
85 |
86 |
76 | Previous
77 |
78 |
79 | {nav[currentIndex - 1].title}
80 |
81 |
87 |
94 |
88 | Next
89 |
90 |
91 | {nav[currentIndex + 1] && nav[currentIndex + 1].title}
92 |
93 |
95 |
113 |
114 |
115 | ) : null}
116 |
36 | {cleanTokens(tokens).map((line, i) => {
37 | let lineClass = {};
38 |
39 | let isDiff = false;
40 |
41 | if (line[0] && line[0].content.length && line[0].content[0] === '+') {
42 | lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
43 | isDiff = true;
44 | } else if (line[0] && line[0].content.length && line[0].content[0] === '-') {
45 | lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
46 | isDiff = true;
47 | } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '+') {
48 | lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
49 | isDiff = true;
50 | } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '-') {
51 | lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
52 | isDiff = true;
53 | }
54 | const lineProps = getLineProps({ line, key: i });
55 |
56 | lineProps.style = lineClass;
57 | const diffStyle = {
58 | userSelect: 'none',
59 | MozUserSelect: '-moz-none',
60 | WebkitUserSelect: 'none',
61 | };
62 |
63 | let splitToken;
64 |
65 | return (
66 |
67 | {line.map((token, key) => {
68 | if (isDiff) {
69 | if (
70 | (key === 0 || key === 1) &
71 | (token.content.charAt(0) === '+' || token.content.charAt(0) === '-')
72 | ) {
73 | if (token.content.length > 1) {
74 | splitToken = {
75 | types: ['template-string', 'string'],
76 | content: token.content.slice(1),
77 | };
78 | const firstChar = {
79 | types: ['operator'],
80 | content: token.content.charAt(0),
81 | };
82 |
83 | return (
84 |
85 |
89 |
90 |
91 | );
92 | } else {
93 | return ;
94 | }
95 | }
96 | }
97 | return ;
98 | })}
99 |
100 | );
101 | })}
102 |
103 | )}
104 | -
63 |
- CONTENTS 64 | {finalNavItems} 65 |
81 |
-
120 |
-
41 | {items.map((item, index) => (
42 |
39 | {children}
46 |
47 | );
48 | }
49 | }
50 |
51 | export default ThemeProvider;
52 |
--------------------------------------------------------------------------------
/src/components/themeProvider.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
3 | import { default as defaultTheme } from './theme';
4 | import Header from './Header';
5 |
6 | export default function ThemeProvider({ children, theme = {}, location }) {
7 | return (
8 |
9 | {children}
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/custom-sw-code.js:
--------------------------------------------------------------------------------
1 | workbox.routing.registerRoute(
2 | new RegExp('https:.*min.(css|js)'),
3 | workbox.strategies.staleWhileRevalidate({
4 | cacheName: 'cdn-cache',
5 | })
6 | );
7 |
--------------------------------------------------------------------------------
/src/html.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import config from '../config';
4 |
5 | export default class HTML extends React.Component {
6 | render() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | {config.siteMetadata.title ? (
14 |
15 | ) : null }
16 | {config.siteMetadata.title ? (
17 |
90 | {mdx.fields.title}
91 |
92 | {docsLocation && (
93 |
94 | 
Edit on GitHub
95 |
96 | )}
97 |
98 |
99 |
103 |
105 |