diff options
| author | Pete Johanson <peter@peterjohanson.com> | 2020-05-25 21:33:21 -0400 |
|---|---|---|
| committer | Pete Johanson <peter@peterjohanson.com> | 2020-05-25 21:33:21 -0400 |
| commit | e00408d7464e597bab543ff61a4af8b9beb17629 (patch) | |
| tree | 1b60b9b57b9ede7656f31d4dd390891cb7135b07 /docs/src | |
| parent | 96b87b2594d590b9eed009803218f773716fd2ac (diff) | |
Initial work on basic documentation.
Diffstat (limited to 'docs/src')
| -rw-r--r-- | docs/src/css/custom.css | 25 | ||||
| -rw-r--r-- | docs/src/pages/index.js | 97 | ||||
| -rw-r--r-- | docs/src/pages/styles.module.css | 37 |
3 files changed, 159 insertions, 0 deletions
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css new file mode 100644 index 0000000..74ba0f2 --- /dev/null +++ b/docs/src/css/custom.css @@ -0,0 +1,25 @@ +/* stylelint-disable docusaurus/copyright-header */ +/** + * Any CSS included here will be global. The classic template + * bundles Infima by default. Infima is a CSS framework designed to + * work well for content-centric websites. + */ + +/* You can override the default Infima variables here. */ +:root { + --ifm-color-primary: #25c2a0; + --ifm-color-primary-dark: rgb(33, 175, 144); + --ifm-color-primary-darker: rgb(31, 165, 136); + --ifm-color-primary-darkest: rgb(26, 136, 112); + --ifm-color-primary-light: rgb(70, 203, 174); + --ifm-color-primary-lighter: rgb(102, 212, 189); + --ifm-color-primary-lightest: rgb(146, 224, 208); + --ifm-code-font-size: 95%; +} + +.docusaurus-highlight-code-line { + background-color: rgb(72, 77, 91); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js new file mode 100644 index 0000000..f24bc96 --- /dev/null +++ b/docs/src/pages/index.js @@ -0,0 +1,97 @@ +import React from 'react'; +import classnames from 'classnames'; +import Layout from '@theme/Layout'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from './styles.module.css'; + +const features = [ + { + title: <>Easy to Use</>, + imageUrl: 'img/undraw_docusaurus_mountain.svg', + description: ( + <> + Docusaurus was designed from the ground up to be easily installed and + used to get your website up and running quickly. + </> + ), + }, + { + title: <>Focus on What Matters</>, + imageUrl: 'img/undraw_docusaurus_tree.svg', + description: ( + <> + Docusaurus lets you focus on your docs, and we'll do the chores. Go + ahead and move your docs into the <code>docs</code> directory. + </> + ), + }, + { + title: <>Powered by React</>, + imageUrl: 'img/undraw_docusaurus_react.svg', + description: ( + <> + Extend or customize your website layout by reusing React. Docusaurus can + be extended while reusing the same header and footer. + </> + ), + }, +]; + +function Feature({imageUrl, title, description}) { + const imgUrl = useBaseUrl(imageUrl); + return ( + <div className={classnames('col col--4', styles.feature)}> + {imgUrl && ( + <div className="text--center"> + <img className={styles.featureImage} src={imgUrl} alt={title} /> + </div> + )} + <h3>{title}</h3> + <p>{description}</p> + </div> + ); +} + +function Home() { + const context = useDocusaurusContext(); + const {siteConfig = {}} = context; + return ( + <Layout + title={`Hello from ${siteConfig.title}`} + description="Description will go into a meta tag in <head />"> + <header className={classnames('hero hero--primary', styles.heroBanner)}> + <div className="container"> + <h1 className="hero__title">{siteConfig.title}</h1> + <p className="hero__subtitle">{siteConfig.tagline}</p> + <div className={styles.buttons}> + <Link + className={classnames( + 'button button--outline button--secondary button--lg', + styles.getStarted, + )} + to={useBaseUrl('docs/')}> + Get Started + </Link> + </div> + </div> + </header> + <main> + {features && features.length > 0 && ( + <section className={styles.features}> + <div className="container"> + <div className="row"> + {features.map((props, idx) => ( + <Feature key={idx} {...props} /> + ))} + </div> + </div> + </section> + )} + </main> + </Layout> + ); +} + +export default Home; diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css new file mode 100644 index 0000000..c1aa851 --- /dev/null +++ b/docs/src/pages/styles.module.css @@ -0,0 +1,37 @@ +/* stylelint-disable docusaurus/copyright-header */ + +/** + * 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: 966px) { + .heroBanner { + padding: 2rem; + } +} + +.buttons { + display: flex; + align-items: center; + justify-content: center; +} + +.features { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.featureImage { + height: 200px; + width: 200px; +} |