feat: update layout, set docs config and hide navbar for the desktop

docs/intro.md

@@ -1,7 +1,11 @@
 ---
 sidebar_position: 1
+slug: /
+title: Introduction
 ---
 
+![erc7824](/img/erc7824.png)
+
 # Introduction
 
 ## Inject Nitro in your Stack

docusaurus.config.js

@@ -42,27 +42,15 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
+          routeBasePath: '/',
           sidebarPath: './sidebars.js',
+          breadcrumbs: false,
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/erc7824/website/tree/main/docs/',
         },
-        blog: {
-          showReadingTime: true,
-          feedOptions: {
-            type: ['rss', 'atom'],
-            xslt: true,
-          },
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
-          // Useful options to enforce blogging best practices
-          onInlineTags: 'warn',
-          onInlineAuthors: 'warn',
-          onUntruncatedBlogPosts: 'warn',
-        },
+        blog: false,
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -76,25 +64,11 @@ const config = {
       // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',
       navbar: {
-        title: 'ERC7824',
         logo: {
           alt: 'ERC-7824',
           src: 'img/logo.svg',
+          srcDark: 'img/logo_dark.svg',
         },
-        items: [
-          {
-            type: 'docSidebar',
-            sidebarId: 'tutorialSidebar',
-            position: 'left',
-            label: 'Tutorial',
-          },
-          {to: '/blog', label: 'Blog', position: 'left'},
-          {
-            href: 'https://github.com/erc7824/nitro',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
       },
       footer: {
         style: 'dark',

src/css/custom.css

@@ -1,30 +1,66 @@
 /**
- * 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.
+ * Global CSS overrides for Docusaurus.
+ * Infima is bundled by default.
  */
 
-/* You can override the default Infima variables here. */
+/* Default theme variables */
 :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);
+    --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);
+}
+
+/* Dark mode variables */
+[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);
+}
+
+[data-theme="light"] .logo [fill="#000"] {
+    fill: #000;
+}
+
+[data-theme="dark"] .logo [fill="#000"] {
+    fill: #fff;
+}
+
+.logo {
+    width: -webkit-fill-available;
+    height: 70px;
+    padding-top: 16px;
+    margin-top: 8px;
+}
+
+@media (min-width: 1416px) {
+    html.docs-doc-page .main-wrapper {
+        align-self: center;
+        max-width: 1400px;
+        width: 1400px;
+    }
+}
+
+.navbar .navbar__inner {
+    margin: 0 auto;
+    max-width: 1360px;
+}
+
+@media (min-width: 996px) {
+    :root {
+        --ifm-navbar-height: 0;
+    }
+    .navbar {
+        display: none !important;
+    }
 }

src/theme/Admonition/Layout/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Layout from '@theme-original/Admonition/Layout';
+
+export default function LayoutWrapper(props) {
+  return (
+    <>
+      <Layout {...props} />
+    </>
+  );
+}

src/theme/DocSidebar/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import DocSidebar from '@theme-original/DocSidebar';
+import Logo from '@site/static/img/logo.svg';
+
+export default function DocSidebarWrapper(props) {
+
+  return (
+    <>
+      <div className="logo__wrapper">
+        <Logo className='logo'/>
+      </div>
+      <DocSidebar {...props} />
+    </>
+  );
+}