72 | {/*
81 | );
82 | }
83 |
84 | export default function HomepageFeatures() {
85 | return (
86 |
73 |
74 |
*/}
75 |
76 |
80 | {title}
77 |{description}
78 |{link}
79 |
88 |
94 |
89 | {FeatureList.map((props, idx) => (
90 |
93 |
13 | 
14 |
15 | )
16 | }
--------------------------------------------------------------------------------
/src/components/PageRef.module.css:
--------------------------------------------------------------------------------
1 | .pageRef {
2 | display: flex;
3 | margin: 32px 0px;
4 | align-items: center;
5 | text-decoration: none;
6 | justify-content: space-between;
7 | padding: 8px 16px;
8 | border: 1px solid var(--ifm-color-secondary);
9 | border-radius: 3px;
10 | box-shadow: rgb(116 129 141 / 10%) 0px 3px 8px 0px;
11 | transition: border 250ms ease 0s;
12 | }
13 |
14 | .left {
15 | display: flex;
16 | align-items: center;
17 | }
18 |
19 | .pageRef:hover {
20 | text-decoration: none;
21 | border: 1px solid var(--ifm-color-primary);
22 | }
23 |
24 | .arrow {
25 | font-size: 30px;
26 | margin-right: 16px;
27 | }
28 |
29 | .pageName {
30 | }
31 |
32 | .url {
33 | justify-self: end;
34 | color: var(--ifm-color-secondary-darkest);
35 | font-size: 12px;
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/PageRef.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './PageRef.module.css';
3 |
4 | type PageRefProps = {
5 | url: string,
6 | pageName: string,
7 | }
8 |
9 | export default function PageRef({ url, pageName } : PageRefProps) {
10 | return (
11 |
15 |
16 |
19 | →
17 | {pageName}
18 | {url}
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/YouTube.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | margin: 24px 0px;
3 | width: 100%;
4 | /* Small trick to get the height a ratio of the width */
5 | padding-bottom: 56.25%;
6 | position: relative;
7 | height: 0;
8 | }
9 |
10 | .sizer {
11 | position: absolute;
12 | height: 100%;
13 | width: 100%;
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/YouTube.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactYouTube from 'react-youtube';
3 | import styles from './YouTube.module.css';
4 |
5 | export default function YouTube({ videoId } : { videoId: string }) {
6 | return (
7 |
8 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/pages/index.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS files with the .module.css suffix will be treated as CSS modules
3 | * and scoped locally.
4 | */
5 |
6 | .heroBanner {
7 | padding: 4rem 0;
8 | text-align: center;
9 | position: relative;
10 | overflow: hidden;
11 | }
12 |
13 | @media screen and (max-width: 966px) {
14 | .heroBanner {
15 | padding: 2rem;
16 | }
17 | }
18 |
19 | .buttons {
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | }
24 |
--------------------------------------------------------------------------------
/src/pages/markdown-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Markdown page example
3 | ---
4 |
5 | # Markdown page example
6 |
7 | You don't need React to write simple standalone pages.
8 |
--------------------------------------------------------------------------------
/src/pages/remove-index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import Layout from '@theme/Layout';
4 | import Link from '@docusaurus/Link';
5 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
6 | import styles from './index.module.css';
7 | import HomepageFeatures from '../components/HomepageFeatures';
8 |
9 | function HomepageHeader() {
10 | const {siteConfig} = useDocusaurusContext();
11 | return (
12 |
14 |
24 | {siteConfig.title}
15 |{siteConfig.tagline}
16 |
17 |
20 | Get Started
21 |
22 |
23 |