From c47347ff76f115f56676f5ecad0032bfcb98a03d Mon Sep 17 00:00:00 2001 From: Xe Iaso Date: Thu, 20 Mar 2025 15:06:58 -0400 Subject: add docs site based on docusarus (#35) * add docs site based on docusarus Closes #2 Signed-off-by: Xe Iaso * docs: deploy to aeacus Signed-off-by: Xe Iaso * ready for merge Signed-off-by: Xe Iaso * docs: fix anubis port Signed-off-by: Xe Iaso --------- Signed-off-by: Xe Iaso --- docs/src/components/HomepageFeatures/index.tsx | 72 ++++++++++++++++++++++ .../components/HomepageFeatures/styles.module.css | 11 ++++ docs/src/css/custom.css | 69 +++++++++++++++++++++ docs/src/pages/index.module.css | 23 +++++++ docs/src/pages/index.tsx | 43 +++++++++++++ 5 files changed, 218 insertions(+) create mode 100644 docs/src/components/HomepageFeatures/index.tsx create mode 100644 docs/src/components/HomepageFeatures/styles.module.css create mode 100644 docs/src/css/custom.css create mode 100644 docs/src/pages/index.module.css create mode 100644 docs/src/pages/index.tsx (limited to 'docs/src') diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx new file mode 100644 index 0000000..645f795 --- /dev/null +++ b/docs/src/components/HomepageFeatures/index.tsx @@ -0,0 +1,72 @@ +import type { ReactNode } from "react"; +import clsx from "clsx"; +import Heading from "@theme/Heading"; +import styles from "./styles.module.css"; + +type FeatureItem = { + title: string; + Svg: React.ComponentType>; + description: ReactNode; +}; + +const FeatureList: FeatureItem[] = [ + { + title: "Easy to Use", + Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default, + description: ( + <> + Anubis is easy to set up, lightweight, and helps get rid of the lowest + hanging fruit so you can sleep at night. + + ), + }, + { + title: "", + Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default, + description: ( + <> + Anubis is efficient and as lightweight as possible, blocking the worst + of the bots on the internet and makes it easy to protect what you host + online. + + ), + }, + { + title: "Powered by React", + Svg: require("@site/static/img/undraw_docusaurus_react.svg").default, + description: ( + <> + Anubis uses a multi-threaded proof of work check to ensure that users + browsers are up to date and support modern standards. + + ), + }, +]; + +function Feature({ title, Svg, description }: FeatureItem) { + return ( +
+
+ +
+
+ {title} +

{description}

+
+
+ ); +} + +export default function HomepageFeatures(): ReactNode { + return ( +
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
+ ); +} diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css new file mode 100644 index 0000000..b248eb2 --- /dev/null +++ b/docs/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/docs/src/css/custom.css b/docs/src/css/custom.css new file mode 100644 index 0000000..84b09b1 --- /dev/null +++ b/docs/src/css/custom.css @@ -0,0 +1,69 @@ +/** + * 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: #2e8555; + --ifm-color-primary-dark: #29784c; + --ifm-color-primary-darker: #277148; + --ifm-color-primary-darkest: #205d3b; + --ifm-color-primary-light: #33925d; + --ifm-color-primary-lighter: #359962; + --ifm-color-primary-lightest: #3cad6e; + --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); +} + +/* For readability concerns, you should choose a lighter palette in dark mode. */ +[data-theme="dark"] { + --ifm-color-primary: #25c2a0; + --ifm-color-primary-dark: #21af90; + --ifm-color-primary-darker: #1fa588; + --ifm-color-primary-darkest: #1a8870; + --ifm-color-primary-light: #29d5b0; + --ifm-color-primary-lighter: #32d8b4; + --ifm-color-primary-lightest: #4fddbf; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); +} + +.code-block-diff-add-line { + background-color: #ccffd8; + display: block; + margin: 0 -40px; + padding: 0 40px; +} + +.code-block-diff-add-line::before { + position: absolute; + left: 8px; + padding-right: 8px; + content: "+"; +} + +.code-block-diff-remove-line { + background-color: #ffebe9; + display: block; + margin: 0 -40px; + padding: 0 40px; +} + +.code-block-diff-remove-line::before { + position: absolute; + left: 8px; + padding-right: 8px; + content: "-"; +} + +/** + * use magic comments to mark diff blocks + */ +pre code:has(.code-block-diff-add-line) { + padding-left: 40px !important; +} + +pre code:has(.code-block-diff-remove-line) { + padding-left: 40px !important; +} diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css new file mode 100644 index 0000000..9f71a5d --- /dev/null +++ b/docs/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/docs/src/pages/index.tsx b/docs/src/pages/index.tsx new file mode 100644 index 0000000..c9bcfc1 --- /dev/null +++ b/docs/src/pages/index.tsx @@ -0,0 +1,43 @@ +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 ( +
+
+ + {siteConfig.title} + +

{siteConfig.tagline}

+
+ + Get started + +
+
+
+ ); +} + +export default function Home(): ReactNode { + const { siteConfig } = useDocusaurusContext(); + return ( + + +
+ +
+ + ); +} -- cgit v1.2.3