chore: consistent formatting using prettier

This commit is contained in:
Hichem Fantar 2024-06-16 21:32:12 +01:00
parent 306a003563
commit d9a6cc59a6
14 changed files with 511 additions and 509 deletions

2
.prettierignore Normal file
View File

@ -0,0 +1,2 @@
**/*.md
**/*.mdx

View File

@ -1,3 +1,3 @@
module.exports = { module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')], presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
}; };

View File

@ -1,7 +1,7 @@
{ {
"label": "📝 Tutorial", "label": "📝 Tutorial",
"position": 300, "position": 300,
"link": { "link": {
"type": "generated-index" "type": "generated-index"
} }
} }

View File

@ -1,6 +1,6 @@
module.exports = { module.exports = {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

View File

@ -13,11 +13,11 @@
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = { const sidebars = {
// By default, Docusaurus generates a sidebar from the docs folder structure // By default, Docusaurus generates a sidebar from the docs folder structure
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
// But you can create a sidebar manually // But you can create a sidebar manually
/* /*
tutorialSidebar: [ tutorialSidebar: [
'intro', 'intro',
'hello', 'hello',

View File

@ -1,64 +1,64 @@
import clsx from 'clsx'; import clsx from "clsx";
import Heading from '@theme/Heading'; import Heading from "@theme/Heading";
import styles from './styles.module.css'; import styles from "./styles.module.css";
const FeatureList = [ const FeatureList = [
{ {
title: 'Easy to Use', title: "Easy to Use",
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
description: ( description: (
<> <>
Docusaurus was designed from the ground up to be easily installed and Docusaurus was designed from the ground up to be easily installed and
used to get your website up and running quickly. used to get your website up and running quickly.
</> </>
), ),
}, },
{ {
title: 'Focus on What Matters', title: "Focus on What Matters",
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
description: ( description: (
<> <>
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
ahead and move your docs into the <code>docs</code> directory. ahead and move your docs into the <code>docs</code> directory.
</> </>
), ),
}, },
{ {
title: 'Powered by React', title: "Powered by React",
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
description: ( description: (
<> <>
Extend or customize your website layout by reusing React. Docusaurus can Extend or customize your website layout by reusing React. Docusaurus can
be extended while reusing the same header and footer. be extended while reusing the same header and footer.
</> </>
), ),
}, },
]; ];
function Feature({Svg, title, description}) { function Feature({ Svg, title, description }) {
return ( return (
<div className={clsx('col col--4')}> <div className={clsx("col col--4")}>
<div className="text--center"> <div className="text--center">
<Svg className={styles.featureSvg} role="img" /> <Svg className={styles.featureSvg} role="img" />
</div> </div>
<div className="text--center padding-horiz--md"> <div className="text--center padding-horiz--md">
<Heading as="h3">{title}</Heading> <Heading as="h3">{title}</Heading>
<p>{description}</p> <p>{description}</p>
</div> </div>
</div> </div>
); );
} }
export default function HomepageFeatures() { export default function HomepageFeatures() {
return ( return (
<section className={styles.features}> <section className={styles.features}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
{FeatureList.map((props, idx) => ( {FeatureList.map((props, idx) => (
<Feature key={idx} {...props} /> <Feature key={idx} {...props} />
))} ))}
</div> </div>
</div> </div>
</section> </section>
); );
} }

View File

@ -1,11 +1,11 @@
.features { .features {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 2rem 0; padding: 2rem 0;
width: 100%; width: 100%;
} }
.featureSvg { .featureSvg {
height: 200px; height: 200px;
width: 200px; width: 200px;
} }

View File

@ -1,21 +1,21 @@
import { Sponsor } from "@site/src/components/Sponsors/Sponsor"; import { Sponsor } from "@site/src/components/Sponsors/Sponsor";
export const SponsorList = () => { export const SponsorList = () => {
const sponsors = [ const sponsors = [
{ {
imgSrc: "/sponsors/sponsor.png", imgSrc: "/sponsors/sponsor.png",
url: "https://openwebui.com", url: "https://openwebui.com",
name: "Open WebUI", name: "Open WebUI",
description: description:
"On a mission to build the best open-source AI user interface.", "On a mission to build the best open-source AI user interface.",
}, },
]; ];
return ( return (
<div className=" flex gap-5 flex-wrap items-center justify-center"> <div className=" flex gap-5 flex-wrap items-center justify-center">
{sponsors.map((sponsor) => ( {sponsors.map((sponsor) => (
<Sponsor sponsor={sponsor} /> <Sponsor sponsor={sponsor} />
))} ))}
</div> </div>
); );
}; };

View File

@ -1,32 +1,32 @@
export const Sponsor = ({ sponsor }) => { export const Sponsor = ({ sponsor }) => {
return ( return (
<> <>
<div className="flex flex-col mb-2 "> <div className="flex flex-col mb-2 ">
<div className="text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold underline mb-1.5"> <div className="text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold underline mb-1.5">
<a href={sponsor.url} target="_blank"> <a href={sponsor.url} target="_blank">
{sponsor.name} {sponsor.name}
</a> </a>
</div> </div>
<a a href={sponsor.url} target="_blank"> <a a href={sponsor.url} target="_blank">
<div className="flex w-32 md:w-48 gap-2.5 items-start"> <div className="flex w-32 md:w-48 gap-2.5 items-start">
<div className=" basis-1/2"> <div className=" basis-1/2">
<img <img
className="rounded-xl " className="rounded-xl "
loading="lazy" loading="lazy"
alt={sponsor.name} alt={sponsor.name}
src={sponsor.imgSrc} src={sponsor.imgSrc}
/> />
</div> </div>
<div className=" basis-1/2 flex"> <div className=" basis-1/2 flex">
<div className=" text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-4 md:line-clamp-5 no-underline"> <div className=" text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-4 md:line-clamp-5 no-underline">
{sponsor.description} {sponsor.description}
</div> </div>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</> </>
); );
}; };

View File

@ -1,35 +1,35 @@
export const TopBanner = ({ items }) => { export const TopBanner = ({ items }) => {
return ( return (
<div className="pb-4"> <div className="pb-4">
{items.map((item) => ( {items.map((item) => (
<> <>
<div className="mb-2"> <div className="mb-2">
<div className="text-xs text-gray-500 dark:text-gray-400 font-bold underline mb-1"> <div className="text-xs text-gray-500 dark:text-gray-400 font-bold underline mb-1">
Sponsored by {item.name} Sponsored by {item.name}
</div> </div>
<a href={item.url} target="_blank"> <a href={item.url} target="_blank">
<img <img
className="w-full rounded-xl hidden md:block" className="w-full rounded-xl hidden md:block"
loading="lazy" loading="lazy"
alt={item.name} alt={item.name}
src={item.imgSrc} src={item.imgSrc}
/> />
<img <img
className="w-full rounded-xl block md:hidden" className="w-full rounded-xl block md:hidden"
loading="lazy" loading="lazy"
alt={item.name} alt={item.name}
src={item?.mobileImgSrc || item.imgSrc} src={item?.mobileImgSrc || item.imgSrc}
/> />
</a> </a>
<div className="text-right text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-1"> <div className="text-right text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-1">
{item.description} {item.description}
</div> </div>
</div> </div>
</> </>
))} ))}
</div> </div>
); );
}; };

View File

@ -1,43 +1,43 @@
import { TopBanner } from "@site/src/components/Sponsors/TopBanner"; import { TopBanner } from "@site/src/components/Sponsors/TopBanner";
export const TopBanners = () => { export const TopBanners = () => {
const items = [ const items = [
{ {
imgSrc: "/ads/pipelines-banner.png", imgSrc: "/ads/pipelines-banner.png",
mobileImgSrc: "/ads/pipelines-banner-mobile.png", mobileImgSrc: "/ads/pipelines-banner-mobile.png",
url: "https://github.com/open-webui/pipelines", url: "https://github.com/open-webui/pipelines",
name: "Open WebUI Pipelines", name: "Open WebUI Pipelines",
description: description:
"Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework", "Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework",
}, },
{ {
imgSrc: "/ads/pipelines-banner.png", imgSrc: "/ads/pipelines-banner.png",
mobileImgSrc: "/ads/pipelines-banner-mobile.png", mobileImgSrc: "/ads/pipelines-banner-mobile.png",
url: "https://github.com/open-webui/pipelines", url: "https://github.com/open-webui/pipelines",
name: "Open WebUI Pipelines", name: "Open WebUI Pipelines",
description: description:
"Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework", "Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework",
}, },
{ {
imgSrc: "/ads/pipelines-banner.png", imgSrc: "/ads/pipelines-banner.png",
mobileImgSrc: "/ads/pipelines-banner-mobile.png", mobileImgSrc: "/ads/pipelines-banner-mobile.png",
url: "https://github.com/open-webui/pipelines", url: "https://github.com/open-webui/pipelines",
name: "Open WebUI Pipelines", name: "Open WebUI Pipelines",
description: description:
"Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework", "Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework",
}, },
{ {
imgSrc: "/ads/placeholder.png", imgSrc: "/ads/placeholder.png",
mobileImgSrc: "/ads/placeholder-mobile.png", mobileImgSrc: "/ads/placeholder-mobile.png",
url: "https://github.com/sponsors/tjbck", url: "https://github.com/sponsors/tjbck",
name: "Open WebUI", name: "Open WebUI",
description: description:
"The top banner spot is reserved for only two Enterprise Diamond sponsors on a first-come, first-served basis", "The top banner spot is reserved for only two Enterprise Diamond sponsors on a first-come, first-served basis",
}, },
]; ];
// Randomly select an item to display // Randomly select an item to display
let selectedItemIdx = Math.floor(Math.random() * items.length); let selectedItemIdx = Math.floor(Math.random() * items.length);
return <TopBanner items={[items[selectedItemIdx]]} />; return <TopBanner items={[items[selectedItemIdx]]} />;
}; };

View File

@ -14,27 +14,27 @@
/* You can override the default Infima variables here. */ /* You can override the default Infima variables here. */
:root { :root {
--ifm-color-primary: #327eff; --ifm-color-primary: #327eff;
--ifm-color-primary-dark: #2a2978; --ifm-color-primary-dark: #2a2978;
--ifm-color-primary-darker: #362771; --ifm-color-primary-darker: #362771;
--ifm-color-primary-darkest: #000000; --ifm-color-primary-darkest: #000000;
--ifm-color-primary-light: hwb(216 27% 39%); --ifm-color-primary-light: hwb(216 27% 39%);
--ifm-footer-background-color: #111; --ifm-footer-background-color: #111;
--ifm-color-primary-lighter: #7062c8; --ifm-color-primary-lighter: #7062c8;
--ifm-color-primary-lightest: #6c87c5; --ifm-color-primary-lightest: #6c87c5;
--ifm-link-color: #333; --ifm-link-color: #333;
--ifm-code-font-size: 95%; --ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--ifm-hover-overlay: #fafafa; --ifm-hover-overlay: #fafafa;
--ifm-heading-color: #111; --ifm-heading-color: #111;
} }
[data-theme="light"] { [data-theme="light"] {
--ifm-menu-color: #000; --ifm-menu-color: #000;
} }
.theme-doc-sidebar-container { .theme-doc-sidebar-container {
border-width: 0px !important; border-width: 0px !important;
} }
/* .hiring-link { /* .hiring-link {
@ -51,549 +51,549 @@
/* For readability concerns, you should choose a lighter palette in dark mode. */ /* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] { [data-theme="dark"] {
--ifm-color-primary: #5693fc; --ifm-color-primary: #5693fc;
--ifm-color-primary-dark: #21af90; --ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588; --ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870; --ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0; --ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf; --ifm-color-primary-lightest: #4fddbf;
--ifm-link-color: #ccc; --ifm-link-color: #ccc;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
--ifm-heading-color: #fff; --ifm-heading-color: #fff;
} }
code { code {
color: #eb5757; color: #eb5757;
border-width: 0px; border-width: 0px;
padding: 3px 8px; padding: 3px 8px;
font-size: 0.8em; font-size: 0.8em;
font-weight: 600; font-weight: 600;
} }
[data-theme="light"] code { [data-theme="light"] code {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
[data-theme="dark"] code { [data-theme="dark"] code {
background-color: #111; background-color: #111;
} }
.theme-code-block { .theme-code-block {
font-family: "IBM Plex Mono", monospace; font-family: "IBM Plex Mono", monospace;
font-size: 0.9em; font-size: 0.9em;
} }
.theme-code-block .token { .theme-code-block .token {
font-family: "IBM Plex Mono", monospace; font-family: "IBM Plex Mono", monospace;
} }
[data-theme="light"] .theme-code-block pre { [data-theme="light"] .theme-code-block pre {
background-color: #fafafa; background-color: #fafafa;
} }
/* hide breadcrumbs from top of posts */ /* hide breadcrumbs from top of posts */
.theme-doc-breadcrumbs { .theme-doc-breadcrumbs {
display: none; display: none;
} }
.theme-doc-sidebar-menu.menu__list { .theme-doc-sidebar-menu.menu__list {
margin-top: 20px; margin-top: 20px;
} }
nav.menu { nav.menu {
margin-right: 1px; margin-right: 1px;
padding: 0px; padding: 0px;
} }
nav.menu::-webkit-scrollbar { nav.menu::-webkit-scrollbar {
display: none; display: none;
} }
.menu__link { .menu__link {
transition-property: none; transition-property: none;
line-height: 1.5; line-height: 1.5;
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
padding-left: 20px; padding-left: 20px;
/* word-spacing: 7px; */ /* word-spacing: 7px; */
margin: 0px 10px; margin: 0px 10px;
border-radius: 3px; border-radius: 3px;
} }
p { p {
line-height: 1.5; line-height: 1.5;
} }
blockquote { blockquote {
padding: 20px 30px; padding: 20px 30px;
border-radius: 3px; border-radius: 3px;
font-style: italic; font-style: italic;
line-height: 1.5; line-height: 1.5;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
[data-theme="light"] blockquote { [data-theme="light"] blockquote {
background-color: #f0f0f0; background-color: #f0f0f0;
color: #000; color: #000;
} }
[data-theme="dark"] blockquote { [data-theme="dark"] blockquote {
background-color: #111; background-color: #111;
} }
[data-theme="light"] .pagination-nav__link:hover { [data-theme="light"] .pagination-nav__link:hover {
border-color: #000; border-color: #000;
} }
[data-theme="dark"] .pagination-nav__link:hover { [data-theme="dark"] .pagination-nav__link:hover {
border-color: #fff; border-color: #fff;
} }
.navbar__brand { .navbar__brand {
margin-right: 0px; margin-right: 0px;
} }
.navbar__logo { .navbar__logo {
width: 3em; width: 3em;
} }
[data-theme="light"] .navbar__brand:hover { [data-theme="light"] .navbar__brand:hover {
color: #000; color: #000;
} }
[data-theme="dark"] .navbar__brand:hover { [data-theme="dark"] .navbar__brand:hover {
color: #fff; color: #fff;
} }
.iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module { .iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module {
display: none; display: none;
} }
/* .navbar__items svg { /* .navbar__items svg {
display: none; display: none;
} */ } */
.pagination-nav__link { .pagination-nav__link {
border-radius: 0px; border-radius: 0px;
border: 0px; border: 0px;
} }
[data-theme="light"] .pagination-nav__link { [data-theme="light"] .pagination-nav__link {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
[data-theme="dark"] .pagination-nav__link { [data-theme="dark"] .pagination-nav__link {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
[data-theme="light"] .pagination-nav__link:hover { [data-theme="light"] .pagination-nav__link:hover {
border-top: 1px solid #000; border-top: 1px solid #000;
} }
[data-theme="dark"] .pagination-nav__link:hover { [data-theme="dark"] .pagination-nav__link:hover {
border-top: 1px solid #fff; border-top: 1px solid #fff;
} }
.hero__subtitle { .hero__subtitle {
font-weight: 600; font-weight: 600;
margin-bottom: 40px; margin-bottom: 40px;
margin-top: 30px; margin-top: 30px;
} }
[data-theme="light"] .hero__subtitle { [data-theme="light"] .hero__subtitle {
color: #000; color: #000;
} }
[data-theme="dark"] .hero__subtitle { [data-theme="dark"] .hero__subtitle {
color: #fff !important; color: #fff !important;
} }
.btn--black { .btn--black {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
} }
.btn--black:hover { .btn--black:hover {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
} }
.iconExternalLink_nPIU { .iconExternalLink_nPIU {
display: none; display: none;
} }
.btn--landing { .btn--landing {
border-radius: 0px; border-radius: 0px;
margin-right: 8px; margin-right: 8px;
margin-left: 8px; margin-left: 8px;
border-color: #000; border-color: #000;
} }
[data-theme="light"] .hero--bg { [data-theme="light"] .hero--bg {
background-color: #fafafa; background-color: #fafafa;
} }
[data-theme="dark"] .hero--bg { [data-theme="dark"] .hero--bg {
background-color: #111 !important; background-color: #111 !important;
} }
.hero--banner { .hero--banner {
padding: 10px !important; padding: 10px !important;
} }
.hero--banner, .hero--banner,
.hero--banner a { .hero--banner a {
margin: 0px; margin: 0px;
color: #fff; color: #fff;
background-color: #000; background-color: #000;
width: 100%; width: 100%;
} }
.homepage-svg svg { .homepage-svg svg {
height: auto !important; height: auto !important;
width: 100% !important; width: 100% !important;
padding: 20px; padding: 20px;
max-width: 200px; max-width: 200px;
} }
[data-theme="light"] .homepage-svg svg { [data-theme="light"] .homepage-svg svg {
background-color: #fafafa; background-color: #fafafa;
color: #000; color: #000;
} }
[data-theme="dark"] .homepage-svg svg { [data-theme="dark"] .homepage-svg svg {
background-color: #111 !important; background-color: #111 !important;
color: #fff !important; color: #fff !important;
} }
[data-theme="dark"] .homepage-svg path { [data-theme="dark"] .homepage-svg path {
filter: invert(1); filter: invert(1);
} }
.index-buttons { .index-buttons {
padding: 0px !important; padding: 0px !important;
} }
.hero--container-small img { .hero--container-small img {
max-width: 100%; max-width: 100%;
} }
.footer__item .hiring-link { .footer__item .hiring-link {
margin-top: 20px; margin-top: 20px;
} }
.hiring-link { .hiring-link {
background-color: #ffde2d; background-color: #ffde2d;
color: #000; color: #000;
font-weight: 600; font-weight: 600;
padding: 5px 10px; padding: 5px 10px;
border-radius: 1px; border-radius: 1px;
} }
@media screen and (min-width: 997px) { @media screen and (min-width: 997px) {
.hero--container { .hero--container {
padding-left: 200px; padding-left: 200px;
padding-right: 200px; padding-right: 200px;
padding-top: 80px; padding-top: 80px;
padding-bottom: 80px; padding-bottom: 80px;
} }
.hero--container-small { .hero--container-small {
padding-left: 200px; padding-left: 200px;
padding-right: 200px; padding-right: 200px;
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
} }
} }
@media screen and (max-width: 996px) { @media screen and (max-width: 996px) {
.hero--container { .hero--container {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 20px; padding-top: 20px;
padding-bottom: 0px; padding-bottom: 0px;
} }
.hero--container h2, .hero--container h2,
.hero--container-small h2 { .hero--container-small h2 {
font-size: 1.2em; font-size: 1.2em;
} }
.hero--container-small { .hero--container-small {
padding-left: 40px; padding-left: 40px;
padding-right: 40px; padding-right: 40px;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.index-buttons { .index-buttons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.index-buttons a { .index-buttons a {
margin-bottom: 10px; margin-bottom: 10px;
} }
.hero--banner a { .hero--banner a {
font-size: 0.8em; font-size: 0.8em;
} }
.hero__subtitle { .hero__subtitle {
font-size: 1.3rem; font-size: 1.3rem;
margin-bottom: 25px; margin-bottom: 25px;
} }
.homepage-svg svg { .homepage-svg svg {
max-width: 120px; max-width: 120px;
margin-left: 15px; margin-left: 15px;
} }
} }
article a { article a {
/* background-color: #f6f3d2; */ /* background-color: #f6f3d2; */
text-decoration: underline; text-decoration: underline;
} }
article p a { article p a {
text-decoration: underline; text-decoration: underline;
font-weight: 600; font-weight: 600;
text-underline-position: under; text-underline-position: under;
margin-bottom: 5px; margin-bottom: 5px;
/* display: block; */ /* display: block; */
} }
[data-theme="light"] article p a { [data-theme="light"] article p a {
color: #333; color: #333;
text-decoration-color: #bfbfbf; text-decoration-color: #bfbfbf;
} }
[data-theme="dark"] article p a { [data-theme="dark"] article p a {
color: #ccc; color: #ccc;
text-decoration-color: #454545; text-decoration-color: #454545;
} }
[data-theme="light"] article p a:hover { [data-theme="light"] article p a:hover {
color: #111; color: #111;
} }
[data-theme="dark"] article p a:hover { [data-theme="dark"] article p a:hover {
color: #fff; color: #fff;
} }
.menu__link--active { .menu__link--active {
font-weight: 600; font-weight: 600;
} }
.margin-bottom--sm { .margin-bottom--sm {
margin-top: 200px !important; margin-top: 200px !important;
margin-bottom: 200px !important; margin-bottom: 200px !important;
} }
.footer__title { .footer__title {
color: #fff; color: #fff;
} }
[data-theme="light"] a.footer__link-item { [data-theme="light"] a.footer__link-item {
color: #fff; color: #fff;
} }
[data-theme="dark"] a.footer__link-item { [data-theme="dark"] a.footer__link-item {
color: #fff; color: #fff;
} }
[data-theme="light"] .menu__link--active { [data-theme="light"] .menu__link--active {
color: #000; color: #000;
background-color: #f0f0f0; background-color: #f0f0f0;
} }
[data-theme="dark"] .menu__link--active { [data-theme="dark"] .menu__link--active {
color: #fff; color: #fff;
background-color: #111; background-color: #111;
} }
@media screen and (min-width: 997px) { @media screen and (min-width: 997px) {
.menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module { .menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module {
padding: 0px !important; padding: 0px !important;
} }
.menu__list-item:not(:first-child) { .menu__list-item:not(:first-child) {
margin-top: 0px; margin-top: 0px;
} }
} }
.docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { .docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module {
border-right-width: 0px !important; border-right-width: 0px !important;
} }
/* from here - https://theochu.com/docusaurus/styling/ */ /* from here - https://theochu.com/docusaurus/styling/ */
@media screen and (max-width: 996px) { @media screen and (max-width: 996px) {
:root { :root {
--ifm-font-size-base: 18px; --ifm-font-size-base: 18px;
} }
h1 { h1 {
font-size: 1.5rem !important; font-size: 1.5rem !important;
font-weight: 600; font-weight: 600;
} }
.hero .hero__title { .hero .hero__title {
font-size: 2.5rem; font-size: 2.5rem;
} }
} }
@media screen and (min-width: 997px) { @media screen and (min-width: 997px) {
:root { :root {
--ifm-font-size-base: 17px; --ifm-font-size-base: 17px;
} }
h1 { h1 {
font-size: 2rem !important; font-size: 2rem !important;
} }
h2 { h2 {
font-size: 1.5rem !important; font-size: 1.5rem !important;
} }
h3 { h3 {
font-size: 1rem !important; font-size: 1rem !important;
} }
article { article {
max-width: 700px; max-width: 700px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 20px; padding-top: 20px;
} }
} }
:root { :root {
--ifm-font-family-base: "Archivo"; --ifm-font-family-base: "Archivo";
} }
/* Header Dropdown Menu */ /* Header Dropdown Menu */
.dropdown__link { .dropdown__link {
font-size: inherit; font-size: inherit;
} }
/* Remove shadow on the left */ /* Remove shadow on the left */
:root { :root {
--ifm-global-shadow-md: 0px; --ifm-global-shadow-md: 0px;
} }
@media screen and (min-width: 997px) { @media screen and (min-width: 997px) {
/* Show inline table of contents on mobile only */ /* Show inline table of contents on mobile only */
div[class^="tableOfContentsInline"] { div[class^="tableOfContentsInline"] {
display: none; display: none;
} }
} }
.tabs { .tabs {
} }
.tabs__item { .tabs__item {
padding: 3px 15px 2px 15px; padding: 3px 15px 2px 15px;
font-weight: 600; font-weight: 600;
font-size: 0.9em; font-size: 0.9em;
border-radius: 30px; border-radius: 30px;
color: #999; color: #999;
margin-right: 8px; margin-right: 8px;
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.tabs__item:hover { .tabs__item:hover {
background-color: #e5e5e5; background-color: #e5e5e5;
} }
.tabs__item--active { .tabs__item--active {
border-bottom: 0px; border-bottom: 0px;
background-color: rgb(50 125 255); background-color: rgb(50 125 255);
border-radius: 30px; border-radius: 30px;
color: #ffffff; color: #ffffff;
} }
.tabs__item--active:hover { .tabs__item--active:hover {
background-color: rgb(50 125 255); background-color: rgb(50 125 255);
} }
.tabs + .margin-top--md { .tabs + .margin-top--md {
margin-top: 5px !important; margin-top: 5px !important;
} }
.tabs + .margin-top--md pre { .tabs + .margin-top--md pre {
border-top-right-radius: 0px; border-top-right-radius: 0px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
} }
.margin-bottom--xl { .margin-bottom--xl {
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
.margin-bottom--sm { .margin-bottom--sm {
margin-top: 10px !important; margin-top: 10px !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
.hideTabSwitcher { .hideTabSwitcher {
display: none; display: none;
} }
.markdown hr { .markdown hr {
background-color: rgba(120, 120, 120, 0.2); background-color: rgba(120, 120, 120, 0.2);
} }
div.special_table + table { div.special_table + table {
border: none; border: none;
/* border-collapse: separate; */ /* border-collapse: separate; */
/* border-spacing: 0px; */ /* border-spacing: 0px; */
} }
div.special_table + table thead { div.special_table + table thead {
background: rgba(120, 120, 120, 0.1); background: rgba(120, 120, 120, 0.1);
border-top-right-radius: 10px; border-top-right-radius: 10px;
overflow: hidden; overflow: hidden;
} }
div.special_table + table thead tr { div.special_table + table thead tr {
background: rgba(255, 255, 255, 0); background: rgba(255, 255, 255, 0);
border-top: 0px; border-top: 0px;
border-bottom: 0px; border-bottom: 0px;
} }
div.special_table + table tr th { div.special_table + table tr th {
background: rgba(255, 255, 255, 0); background: rgba(255, 255, 255, 0);
color: #000; color: #000;
font-weight: 600; font-weight: 600;
padding: 5px 20px; padding: 5px 20px;
} }
div.special_table + table tr td { div.special_table + table tr td {
padding: 5px 20px; padding: 5px 20px;
text-align: left; text-align: left;
} }
div.special_table + table tr:nth-child(even) { div.special_table + table tr:nth-child(even) {
background: rgba(255, 255, 255, 0); background: rgba(255, 255, 255, 0);
} }
div.special_table + table, div.special_table + table,
th, th,
td { td {
border-width: 0px !important; border-width: 0px !important;
} }
.custom-tag { .custom-tag {
display: inline; display: inline;
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 3px 10px; padding: 3px 10px;
margin-right: 5px; margin-right: 5px;
border-radius: 8px; border-radius: 8px;
font-size: 0.7em; font-size: 0.7em;
/* text-transform: uppercase; */ /* text-transform: uppercase; */
font-weight: 900; font-weight: 900;
color: #000; color: #000;
} }
.custom-tag:hover { .custom-tag:hover {
background-color: #e5e5e5; background-color: #e5e5e5;
} }
.select-language { .select-language {
font-size: 1em; font-size: 1em;
font-weight: bolder; font-weight: bolder;
margin-bottom: 8px; margin-bottom: 8px;
} }
.navbar__link:has(div.custom-tag) { .navbar__link:has(div.custom-tag) {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
margin-left: 5px; margin-left: 5px;
} }
.notbold a { .notbold a {
font-weight: 400 !important; font-weight: 400 !important;
} }
.small-text { .small-text {
font-size: 0.8em; font-size: 0.8em;
} }
.em { .em {
font-style: italic; font-style: italic;
} }
.category-header .menu__list-item-collapsible { .category-header .menu__list-item-collapsible {
pointer-events: none; pointer-events: none;
} }
.category-header .menu__link--sublist { .category-header .menu__link--sublist {
text-transform: uppercase; text-transform: uppercase;
font-size: small; font-size: small;
font-weight: bold; font-weight: bold;
margin-top: 40px; margin-top: 40px;
} }
.category-header .menu__link--sublist-caret:after { .category-header .menu__link--sublist-caret:after {
display: none; display: none;
} }
.category-link a::after { .category-link a::after {
content: "\2192"; content: "\2192";
font-size: 20px; font-size: 20px;
margin-left: 5px; /* for spacing */ margin-left: 5px; /* for spacing */
transform: scaleX(-1) rotate(180deg); transform: scaleX(-1) rotate(180deg);
margin-left: 9px; margin-left: 9px;
position: absolute; position: absolute;
right: 30px; right: 30px;
opacity: 0.3; opacity: 0.3;
} }
.main-wrapper { .main-wrapper {
min-height: 100vh; min-height: 100vh;
} }

View File

@ -4,20 +4,20 @@
*/ */
.heroBanner { .heroBanner {
padding: 4rem 0; padding: 4rem 0;
text-align: center; text-align: center;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@media screen and (max-width: 996px) { @media screen and (max-width: 996px) {
.heroBanner { .heroBanner {
padding: 2rem; padding: 2rem;
} }
} }
.buttons { .buttons {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }

View File

@ -2,21 +2,21 @@ const { fontFamily } = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
corePlugins: { corePlugins: {
preflight: false, preflight: false,
container: false, container: false,
}, },
darkMode: ["class", '[data-theme="dark"]'], darkMode: ["class", '[data-theme="dark"]'],
content: ["./src/**/*.{js,jsx,tsx,html}", "./docs/**/*.{md,mdx}"], content: ["./src/**/*.{js,jsx,tsx,html}", "./docs/**/*.{md,mdx}"],
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
sans: ['"Inter"', ...fontFamily.sans], sans: ['"Inter"', ...fontFamily.sans],
jakarta: ['"Plus Jakarta Sans"', ...fontFamily.sans], jakarta: ['"Plus Jakarta Sans"', ...fontFamily.sans],
mono: ['"Fira Code"', ...fontFamily.mono], mono: ['"Fira Code"', ...fontFamily.mono],
}, },
colors: {}, colors: {},
}, },
}, },
plugins: [], plugins: [],
}; };