tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🤨 Build banner for homepage. Starting to get my head round Docusourus

This commit is contained in:
Alicia Sykes 2021-06-27 17:58:08 +01:00
parent b4d3f32a10
commit 6d1b2b2210
13 changed files with 242 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
docs/index.js Normal file
View File

0
docs/readme.md → docs/index.md
View File

7
docusaurus.config.js
View File

@ -12,6 +12,7 @@ module.exports = {
favicon: 'img/favicon.ico', favicon: 'img/favicon.ico',
organizationName: 'facebook', // Usually your GitHub org/user name. organizationName: 'facebook', // Usually your GitHub org/user name.
projectName: 'docusaurus', // Usually your repo name. projectName: 'docusaurus', // Usually your repo name.
plugins: ['docusaurus-plugin-sass'],
themeConfig: { themeConfig: {
navbar: { navbar: {
title: 'Dashy', title: 'Dashy',
@ -73,7 +74,11 @@ module.exports = {
'https://github.com/facebook/docusaurus/edit/master/website/blog/', 'https://github.com/facebook/docusaurus/edit/master/website/blog/',
}, },
theme: { theme: {
customCss: require.resolve('./src/css/custom.css'), customCss: [
require.resolve('./src/styles/Colors.scss'),
require.resolve('./src/styles/Typography.scss'),
require.resolve('./src/styles/custom.scss'),
]
}, },
}, },
], ],

2
package.json
View File

@ -19,10 +19,12 @@
"@mdx-js/react": "^1.6.21", "@mdx-js/react": "^1.6.21",
"@svgr/webpack": "^5.5.0", "@svgr/webpack": "^5.5.0",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"docusaurus-plugin-sass": "^0.2.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"prism-react-renderer": "^1.2.1", "prism-react-renderer": "^1.2.1",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"sass": "^1.35.1",
"url-loader": "^4.1.1" "url-loader": "^4.1.1"
}, },
"browserslist": { "browserslist": {

14
src/components/Button.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import './../styles/Button.scss';
export default function Button({ children, to, color }) {
return (
<Link to={to}>
<button className={clsx('button', color && 'color-btn', `btn-${color}`)}>
{children}
</button>
</Link>
);
}

28
src/pages/index.js
View File

@ -3,37 +3,33 @@ import clsx from 'clsx';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css'; import styles from './index.module.scss';
import HomepageFeatures from '../components/HomepageFeatures'; import Button from './../components/Button';
function HomepageHeader() { function HomepageHeader() {
const {siteConfig} = useDocusaurusContext(); const { siteConfig } = useDocusaurusContext();
return ( return (
<header className={clsx('hero hero--primary', styles.heroBanner)}> <header className={styles.heroBanner}>
<div className="container"> <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
<h1 className="hero__title">{siteConfig.title}</h1> <h3 className={styles.heroSubTitle}>{siteConfig.tagline}</h3>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}> <div className={styles.buttons}>
<Link <Button to="/docs" color="pink">Try it Out</Button>
className="button button--secondary button--lg" <Button to="/docs" color="blue">Get Started</Button>
to="/docs/intro"> <Button to="/docs" color="green">Source Code</Button>
Docusaurus Tutorial - 5min ⏱️ <Button to="/docs" color="yellow">Documentation</Button>
</Link>
</div>
</div> </div>
</header> </header>
); );
} }
export default function Home() { export default function Home() {
const {siteConfig} = useDocusaurusContext(); const { siteConfig } = useDocusaurusContext();
return ( return (
<Layout <Layout
title={`Hello from ${siteConfig.title}`} title={siteConfig.title}
description="Description will go into a meta tag in <head />"> description="Description will go into a meta tag in <head />">
<HomepageHeader /> <HomepageHeader />
<main> <main>
<HomepageFeatures />
</main> </main>
</Layout> </Layout>
); );

25
src/pages/index.module.css
View File

@ -1,25 +0,0 @@
/* 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;
}

45
src/pages/index.module.scss Normal file
View File

@ -0,0 +1,45 @@
/* stylelint-disable docusaurus/copyright-header */
html {
&[data-theme='dark'] {
--heading-shadow: -5px 4px 0px #000000;
--sub-heading-shadow: -3px 3px 1px #000000;
}
&[data-theme='light'] {
--heading-shadow: -2px 3px 2px #a2a1a1;
--sub-heading-shadow: -1px 1px 1px #a2a1a1;
}
}
header.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
background: var(--hero-background);
h1.heroTitle {
font-size: 6rem;
font-family: 'Racing Sans One', cursive;
text-shadow: var(--heading-shadow);
}
h3.heroSubTitle {
text-shadow: var(--sub-heading-shadow);
}
}
@media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
@media screen and (max-width: 966px) {
flex-direction: column;
}
}

62
src/styles/Button.scss Normal file
View File

@ -0,0 +1,62 @@
.button {
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-weight: 600;
position: relative;
transition: none;
border: none;
min-width: 12rem;
font-weight: bold;
font-size: 1.3rem;
padding: 0.75rem 1rem;
margin: 0.5rem;
color: var(--black);
&.color-btn:hover {
color: #000000b3;
top: 2px;
}
&.color-btn:active {
color: #00000080;
top: 4px;
box-shadow: none !important;
}
&.color-btn.btn-pink {
background: #db78fc;
box-shadow: 0 4px #b83ddd;
&:hover {
box-shadow: 0 2px #b83ddd;
}
}
&.color-btn.btn-purple {
background: #9083ed;
box-shadow: 0 4px #6b3cd6;
&:hover {
box-shadow: 0 2px #6b3cd6;
}
}
&.color-btn.btn-blue {
background: #5c85f7;
box-shadow: 0 4px #3d48dd;
&:hover {
box-shadow: 0 2px #3d48dd;
}
}
&.color-btn.btn-green {
background: #41ef90;
box-shadow: 0 4px #1e9554;
&:hover {
box-shadow: 0 2px #1e9554;
}
}
&.color-btn.btn-yellow {
background: #dcff5a;
box-shadow: 0 4px #ceb73f;
&:hover {
box-shadow: 0 2px #ceb73f;
}
}
}

33
src/styles/Colors.scss Normal file
View File

@ -0,0 +1,33 @@
/* Global Color Palette */
:root {
/* Greyscale */
--bright-white: #ffffff;
--white: #d8d8d8;
--pale-grey: #e9e9e8;
--mid-grey: #a9a9a9;
--dark-grey: #3a3939;
--black: #121212;
--pitch-black: #000000;
/* Action Colors */
--info: #35c9fa;
--success: #88ff88;
--warning: #ece715;
--danger: #f80363;
}
/* Themed Color Palette */
html { /* Light Theme */
--primary: #54bff7;
--background: var(--white);
--text-color: var(--black);
--hero-background: var(--pale-grey);
}
html[data-theme='dark'] { /* Dark Theme */
--primary: #a324fb;
--background: var(--black);
--text-color: var(--white);
--hero-background: var(--black);
}

16
src/styles/Typography.scss Normal file
View File

@ -0,0 +1,16 @@
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Roboto+Mono:wght@500&display=swap');
h1, h2, h3, h4, h5, button {
font-family: 'Roboto Mono', monospace;
}
h1 {
font-size: 4rem;
}
h2 {
font-size: 3rem;
}
h3 {
font-size: 2rem;
}

13
src/css/custom.css → src/styles/custom.scss
View File

@ -7,7 +7,7 @@
/* You can override the default Infima variables here. */ /* You can override the default Infima variables here. */
:root { :root {
--ifm-color-primary: #25c2a0; --ifm-color-primary: var(--background);
--ifm-color-primary-dark: rgb(33, 175, 144); --ifm-color-primary-dark: rgb(33, 175, 144);
--ifm-color-primary-darker: rgb(31, 165, 136); --ifm-color-primary-darker: rgb(31, 165, 136);
--ifm-color-primary-darkest: rgb(26, 136, 112); --ifm-color-primary-darkest: rgb(26, 136, 112);
@ -15,15 +15,18 @@
--ifm-color-primary-lighter: rgb(102, 212, 189); --ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: rgb(146, 224, 208); --ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-code-font-size: 95%; --ifm-code-font-size: 95%;
--ifm-navbar-background-color: var(--background-darken);
} }
.hero {
--ifm-hero-background-color: var(--hero-background);
--ifm-hero-text-color: var(--text-color);
}
.docusaurus-highlight-code-line { .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
display: block; display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding)); margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding); padding: 0 var(--ifm-pre-padding);
} }
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}

57
yarn.lock
View File

@ -2606,6 +2606,21 @@ cheerio@^0.22.0:
lodash.reject "^4.4.0" lodash.reject "^4.4.0"
lodash.some "^4.4.0" lodash.some "^4.4.0"
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1:
version "3.5.2"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
dependencies:
anymatch "~3.1.2"
braces "~3.0.2"
glob-parent "~5.1.2"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.6.0"
optionalDependencies:
fsevents "~2.3.2"
chokidar@^2.1.8: chokidar@^2.1.8:
version "2.1.8" version "2.1.8"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@ -2625,21 +2640,6 @@ chokidar@^2.1.8:
optionalDependencies: optionalDependencies:
fsevents "^1.2.7" fsevents "^1.2.7"
chokidar@^3.5.1:
version "3.5.2"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
dependencies:
anymatch "~3.1.2"
braces "~3.0.2"
glob-parent "~5.1.2"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.6.0"
optionalDependencies:
fsevents "~2.3.2"
chrome-trace-event@^1.0.2: chrome-trace-event@^1.0.2:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac" resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@ -3384,6 +3384,13 @@ dns-txt@^2.0.2:
dependencies: dependencies:
buffer-indexof "^1.0.0" buffer-indexof "^1.0.0"
docusaurus-plugin-sass@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.1.tgz#673c6b6ac00b581e8fb0baab22f2b3766735aafc"
integrity sha512-cRugbRWnKLjFPQTo1k2cyn/AANYkXAPHv+DaLs7bkOfOofEgTSrMdpNidt3oZ0ltQcjUUbvmSRRjH9R1ifdRMA==
dependencies:
sass-loader "^10.1.1"
dom-converter@^0.2.0: dom-converter@^0.2.0:
version "0.2.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@ -7316,6 +7323,24 @@ safe-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sass-loader@^10.1.1:
version "10.2.0"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.0.tgz#3d64c1590f911013b3fa48a0b22a83d5e1494716"
integrity sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==
dependencies:
klona "^2.0.4"
loader-utils "^2.0.0"
neo-async "^2.6.2"
schema-utils "^3.0.0"
semver "^7.3.2"
sass@^1.35.1:
version "1.35.1"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.35.1.tgz#90ecf774dfe68f07b6193077e3b42fb154b9e1cd"
integrity sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ==
dependencies:
chokidar ">=3.0.0 <4.0.0"
sax@^1.2.4, sax@~1.2.4: sax@^1.2.4, sax@~1.2.4:
version "1.2.4" version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@ -7403,7 +7428,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
semver@^7.3.4, semver@^7.3.5: semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
version "7.3.5" version "7.3.5"
resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ== integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==