diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/_index.tsx | 44 | ||||
| -rw-r--r-- | src/pages/index.module.css | 23 | ||||
| -rw-r--r-- | src/pages/markdown-page.mdx | 8 |
3 files changed, 75 insertions, 0 deletions
diff --git a/src/pages/_index.tsx b/src/pages/_index.tsx new file mode 100644 index 0000000..2e006d1 --- /dev/null +++ b/src/pages/_index.tsx @@ -0,0 +1,44 @@ +import type {ReactNode} from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; +import HomepageFeatures from '@site/src/components/HomepageFeatures'; +import Heading from '@theme/Heading'; + +import styles from './index.module.css'; + +function HomepageHeader() { + const {siteConfig} = useDocusaurusContext(); + return ( + <header className={clsx('hero hero--primary', styles.heroBanner)}> + <div className="container"> + <Heading as="h1" className="hero__title"> + {siteConfig.title} + </Heading> + <p className="hero__subtitle">{siteConfig.tagline}</p> + <div className={styles.buttons}> + <Link + className="button button--secondary button--lg" + to="/docs/intro"> + Docusaurus Tutorial - 5min ⏱️ + </Link> + </div> + </div> + </header> + ); +} + +export default function Home(): ReactNode { + const {siteConfig} = useDocusaurusContext(); + return ( + <Layout + title={`Hello from ${siteConfig.title}`} + description="Description will go into a meta tag in <head />"> + <HomepageHeader /> + <main> + <HomepageFeatures /> + </main> + </Layout> + ); +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css new file mode 100644 index 0000000..9f71a5d --- /dev/null +++ b/src/pages/index.module.css @@ -0,0 +1,23 @@ +/** + * CSS files with the .module.css suffix will be treated as CSS modules + * and scoped locally. + */ + +.heroBanner { + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; +} + +@media screen and (max-width: 996px) { + .heroBanner { + padding: 2rem; + } +} + +.buttons { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/pages/markdown-page.mdx b/src/pages/markdown-page.mdx new file mode 100644 index 0000000..ffc8c39 --- /dev/null +++ b/src/pages/markdown-page.mdx @@ -0,0 +1,8 @@ +--- +title: Markdown page example +--- + +# Markdown page example + +You don't need React to write simple standalone pages. + |
