update

.docusaurus/docusaurus.config.mjs

@@ -4,7 +4,7 @@
  * Modify the docusaurus.config.js file at your site's root instead.
  */
 export default {
-  "title": "My Site",
+  "title": "DOCS | SNIGDHA OS",
   "tagline": "Dinosaurs are cool",
   "favicon": "img/favicon.ico",
   "url": "https://docs.snigdhaos.org",
@@ -43,7 +43,7 @@ export default {
   "themeConfig": {
     "image": "img/docusaurus-social-card.jpg",
     "navbar": {
-      "title": "My Site",
+      "title": "SNIGDHA OS DOCS 📚",
       "logo": {
         "alt": "My Site Logo",
         "src": "img/logo.svg"
@@ -62,14 +62,15 @@ export default {
         },
         {
           "href": "https://github.com/facebook/docusaurus",
-          "label": "GitHub",
+          "position": "right",
-          "position": "right"
+          "className": "navbar__icon navbar__github",
+          "html": "<i class=\"fa fa-github\"></i>"
         }
       ],
       "hideOnScroll": false
     },
     "footer": {
-      "style": "dark",
+      "style": "light",
       "links": [
         {
           "title": "Docs",

docusaurus.config.js

@@ -8,7 +8,7 @@ import {themes as prismThemes} from 'prism-react-renderer';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'My Site',
+  title: 'DOCS | SNIGDHA OS',
   tagline: 'Dinosaurs are cool',
   favicon: 'img/favicon.ico',
 
@@ -67,7 +67,7 @@ const config = {
       // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',
       navbar: {
-        title: 'My Site',
+        title: 'SNIGDHA OS DOCS 📚',
         logo: {
           alt: 'My Site Logo',
           src: 'img/logo.svg',
@@ -82,13 +82,15 @@ const config = {
           {to: '/blog', label: 'Blog', position: 'left'},
           {
             href: 'https://github.com/facebook/docusaurus',
-            label: 'GitHub',
+            // label: 'GitHub',
             position: 'right',
+            className: 'navbar__icon navbar__github',
+            html: '<i class="fa fa-github"></i>',
           },
         ],
       },
       footer: {
-        style: 'dark',
+        style: 'light',
         links: [
           {
             title: 'Docs',

package-lock.json

@@ -12,6 +12,7 @@
         "@docusaurus/preset-classic": "3.1.1",
         "@mdx-js/react": "^3.0.0",
         "clsx": "^2.0.0",
+        "font-awesome": "^4.7.0",
         "prism-react-renderer": "^2.3.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
@@ -6310,6 +6311,14 @@
         }
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",

package.json

@@ -18,6 +18,7 @@
     "@docusaurus/preset-classic": "3.1.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "font-awesome": "^4.7.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

src/css/custom.css

@@ -3,6 +3,7 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
+ @import 'font-awesome/css/font-awesome.min.css';
 
 /* You can override the default Infima variables here. */
 :root {
@@ -19,12 +20,39 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: #754ffe;
-  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-dark: #754ffe;
-  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darker: #754ffe;
-  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-darkest: #754ffe;
-  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-light: #754ffe;
-  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lighter: #754ffe;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary-lightest: #754ffe;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.navbar__icon {
+  height: 2rem;
+  width: 2rem;
+}
+
+.navbar__github {
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 1.5rem;
+  transition: background var(--ifm-transition-fast);
+}
+
+html[data-theme='light'] .navbar__github {
+  color: #754ffe;
+}
+
+html[data-theme='dark'] .navbar__github {
+  color: #754ffe;
+}
+
+.navbar__github:hover {
+  background: var(--ifm-color-emphasis-200);
+}