From 85a27923c728db442c8b28200f591479c4b93875 Mon Sep 17 00:00:00 2001 From: WindowsAddict Date: Fri, 12 Apr 2024 08:35:28 +0530 Subject: Move to Docusaurus --- src/components/DiscordBadge.js | 11 +++ src/components/HomepageFeatures/index.js | 64 +++++++++++++++ src/components/HomepageFeatures/styles.module.css | 11 +++ src/css/custom.css | 95 +++++++++++++++++++++++ src/pages/index.module.css | 23 ++++++ src/pages/markdown-page.md | 7 ++ 6 files changed, 211 insertions(+) create mode 100644 src/components/DiscordBadge.js create mode 100644 src/components/HomepageFeatures/index.js create mode 100644 src/components/HomepageFeatures/styles.module.css create mode 100644 src/css/custom.css create mode 100644 src/pages/index.module.css create mode 100644 src/pages/markdown-page.md (limited to 'src') diff --git a/src/components/DiscordBadge.js b/src/components/DiscordBadge.js new file mode 100644 index 0000000..33b1c11 --- /dev/null +++ b/src/components/DiscordBadge.js @@ -0,0 +1,11 @@ +import React from 'react'; + +function DiscordBadge() { + return ( + + Discord + + ); +} + +export default DiscordBadge; diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js new file mode 100644 index 0000000..acc7621 --- /dev/null +++ b/src/components/HomepageFeatures/index.js @@ -0,0 +1,64 @@ +import clsx from 'clsx'; +import Heading from '@theme/Heading'; +import styles from './styles.module.css'; + +const FeatureList = [ + { + title: 'Easy to Use', + Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, + 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', + Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, + description: ( + <> + Docusaurus lets you focus on your docs, and we'll do the chores. Go + ahead and move your docs into the docs directory. + + ), + }, + { + title: 'Powered by React', + Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, + description: ( + <> + Extend or customize your website layout by reusing React. Docusaurus can + be extended while reusing the same header and footer. + + ), + }, +]; + +function Feature({Svg, title, description}) { + return ( +
+
+ +
+
+ {title} +

{description}

+
+
+ ); +} + +export default function HomepageFeatures() { + return ( +
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
+ ); +} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css new file mode 100644 index 0000000..b248eb2 --- /dev/null +++ b/src/components/HomepageFeatures/styles.module.css @@ -0,0 +1,11 @@ +.features { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.featureSvg { + height: 200px; + width: 200px; +} diff --git a/src/css/custom.css b/src/css/custom.css new file mode 100644 index 0000000..a69b1a2 --- /dev/null +++ b/src/css/custom.css @@ -0,0 +1,95 @@ +:root { + --ifm-color-primary: #a43b8d; + --ifm-color-primary-dark: #94357f; + --ifm-color-primary-darker: #8b3278; + --ifm-color-primary-darkest: #732963; + --ifm-color-primary-light: #b4419b; + --ifm-color-primary-lighter: #bc45a2; + --ifm-color-primary-lightest: #c55dae; +} + +[data-theme='dark'] { + --ifm-color-primary: #e685d0; + --ifm-color-primary-dark: #e376ca; + --ifm-color-primary-darker: #e067c4; + --ifm-color-primary-darkest: #da49b9; + --ifm-color-primary-light: #e994d6; + --ifm-color-primary-lighter: #eca3dc; + --ifm-color-primary-lightest: #f2c1e7; +} + +.navbar, +.navbar-sidebar__brand { + background-image: url('/img/bg.png'); + background-size: cover; + background-color: #000; + box-shadow: 0 0 10px #0006; +} + +.navbar__logo img { + filter: drop-shadow(1px 1px 2px #0003); +} + +.navbar__inner, +.navbar__inner a, +.navbar__inner a:hover, +.navbar-sidebar__brand, +.navbar-sidebar__brand a, +.navbar-sidebar__brand a:hover { + color: #fff; +} + +.navbar__inner .navbar__item { + transition: background var(--ifm-transition-fast); + border-radius: var(--ifm-breadcrumb-border-radius); +} + +.navbar__inner .navbar__item:hover, +.navbar__inner .clean-btn:hover, +.navbar-sidebar__brand .clean-btn:hover { + background-color: #fff3; +} + +.navbar-sidebar__close { + --ifm-color-emphasis-600: #fff; +} + +.navbar__toggle.clean-btn:hover, +.navbar-sidebar__close.clean-btn:hover { + background: none; +} + +.navbar__inner .github-button, +.navbar__inner .discord-button { + width: 32px; + height: 32px; + font-size: 0; +} + +.navbar__inner .github-button *, +.navbar__inner .discord-button * { + display: none; +} + +.navbar__inner .github-button:before, +.navbar__inner .discord-button:before { + content: ''; + width: 22px; + height: 22px; + display: block; +} + +.navbar__inner .discord-button:before { + background: url('/img/discord.svg') no-repeat; + margin: 3px 0 0 -7px; +} + +.navbar__inner .github-button:before { + background: url('/img/github.svg') no-repeat; + margin: 1px 0 0 -7px; +} + +table { + font-family: "Consolas", "Source Code Pro", monospace; + font-size: 14px +} 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.md b/src/pages/markdown-page.md new file mode 100644 index 0000000..9756c5b --- /dev/null +++ b/src/pages/markdown-page.md @@ -0,0 +1,7 @@ +--- +title: Markdown page example +--- + +# Markdown page example + +You don't need React to write simple standalone pages. -- cgit v1.2.3