feat/dark-mode (#15)

Add dark mode for website
Lyearn · Jan 10, 2024 · 1219141 · 1219141
1 parent 663e07a
commit 1219141
Show file tree

Hide file tree

Showing 5 changed files with 333 additions and 66 deletions.
diff --git a/website/.prettierrc.js b/website/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  bracketSpacing: true,
+  bracketSameLine: true,
+  singleQuote: true,
+  printWidth: 100,
+  trailingComma: 'all',
+};
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -1,5 +1,5 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
+import { themes as prismThemes } from 'prism-react-renderer';
+import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
@@ -13,7 +13,7 @@ const config: Config = {
   // GitHub pages deployment config.
   organizationName: 'Lyearn',
   projectName: 'mgod',
-  trailingSlash: false, // https://github.com/slorber/trailing-slash-guide 
+  trailingSlash: false, // https://github.com/slorber/trailing-slash-guide
 
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
@@ -46,12 +46,12 @@ const config: Config = {
   plugins: [
     // https://www.swyx.io/tailwind-docusaurus-2022
     async function tailwindPlugin(context, options) {
-      const tailwindCssNesting = (await import("tailwindcss/nesting"));
-      const tailwindCss = (await import("tailwindcss"));
-      const autoprefixer = (await import("autoprefixer"));
-    
+      const tailwindCssNesting = await import('tailwindcss/nesting');
+      const tailwindCss = await import('tailwindcss');
+      const autoprefixer = await import('autoprefixer');
+
       return {
-        name: "docusaurus-tailwindcss",
+        name: 'docusaurus-tailwindcss',
         configurePostCss(postcssOptions) {
           postcssOptions.plugins.push(tailwindCssNesting);
           postcssOptions.plugins.push(tailwindCss);
@@ -64,10 +64,6 @@ const config: Config = {
 
   themeConfig: {
     image: 'img/social-card.jpg', // twitter:image
-    colorMode: {
-      disableSwitch: true,
-      respectPrefersColorScheme: false,
-    },
     navbar: {
       title: 'mgod',
       logo: {
@@ -81,7 +77,7 @@ const config: Config = {
           label: 'Docs',
           position: 'right',
         },
-        { 
+        {
           href: 'https://pkg.go.dev/github.com/Lyearn/mgod',
           label: 'API',
           position: 'right',

diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx
@@ -11,37 +11,50 @@ const FeatureList: FeatureItem[] = [
   {
     icon: 'icon/plug-large.svg',
     title: 'Simplified Integration',
-    description: 'Streamline MongoDB interactions with mgod. Reduce redundancy and enhance type safety.'
+    description:
+      'Streamline MongoDB interactions with mgod. Reduce redundancy and enhance type safety.',
   },
   {
     icon: 'icon/setup-large.svg',
     title: 'Flexible and Open Source',
-    description: 'With an MIT license, mgod gives you flexibility and control over your MongoDB stack. Ensure transparency, avoid unexpected API changes.',
+    description:
+      'With an MIT license, mgod gives you flexibility and control over your MongoDB stack. Ensure transparency, avoid unexpected API changes.',
   },
   {
     icon: 'icon/trending-up-large.svg',
     title: 'Continuous Improvement',
-    description: 'Dedicated to delivering regular updates, mgod consistently introduces new features and improvements.',
+    description:
+      'Dedicated to delivering regular updates, mgod consistently introduces new features and improvements.',
   },
 ];
 
 function Feature({ icon, title, description }: FeatureItem) {
   return (
     <div className="xs:max-w-[30rem]">
-      <img width="40rem" height="40rem" src={icon} alt={title} className="mb-[1.6rem]" aria-hidden="true" />
-      <Heading as="h3" className="mb-[0.4rem] heading-xs text-text-paragraph">{title}</Heading>
-      <p className="body-short-01 text-text-paragraph">{description}</p>
+      <div
+        aria-hidden
+        className="w-[4rem] h-[4rem] mb-[1.6rem] bg-[#000] dark:bg-[#fff]"
+        style={{ WebkitMaskImage: `url(${icon})`, maskImage: `url(${icon})` }}
+      />
+      <Heading as="h3" className="mb-[0.4rem] heading-xs text-text-paragraph dark:text-[#eaeaea]">
+        {title}
+      </Heading>
+      <p className="body-short-01 text-text-paragraph dark:text-text-placeholder">{description}</p>
     </div>
   );
 }
 
-export default function HomepageFeatures(): JSX.Element {
+function HomepageFeatures() {
   return (
     <section className="sm:py-[10rem] px-[4.8rem] mx-auto flex flex-row flex-wrap gap-[7.2rem] place-content-evenly">
-      <Heading as="h2" className="screen-reader-only">Features</Heading>
+      <Heading as="h2" className="screen-reader-only">
+        Features
+      </Heading>
       {FeatureList.map((props, idx) => (
         <Feature key={idx} {...props} />
       ))}
     </section>
   );
 }
+
+export default HomepageFeatures;