filip(feat): docs site redesign

docs/website/docusaurus.config.js

@@ -15,7 +15,7 @@ const config = {
   baseUrl: "/doc/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/logo.svg",
+  favicon: "img/mithril-logo.svg",
   organizationName: "Input Output Global",
   projectName: "Mithril",
 
@@ -88,6 +88,17 @@ const config = {
   ],
 
   plugins: [
+    async function myPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
     [
       "@docusaurus/plugin-content-blog",
       {
@@ -200,15 +211,20 @@ const config = {
         id: "announcement",
         content:
           'Participate in Mithril Protocol’s Mainnet Beta! Follow our SPO on-boarding guide  <a rel="noopener noreferrer" href="https://mithril.network/doc/manual/operate/become-mithril-spo">here</a>!',
-        backgroundColor: "#2e8555",
+        backgroundColor: "#2A598E",
         textColor: "#f1f1f1",
         isCloseable: true,
       },
+      colorMode: {
+        defaultMode: "light",
+        disableSwitch: true,
+        respectPrefersColorScheme: false,
+      },
       navbar: {
-        title: "Mithril",
         logo: {
           alt: "Mithril. A complete guide.",
-          src: "img/logo.svg",
+
+          src: "img/mithril-logo-text.svg",
         },
         items: [
           {
@@ -238,23 +254,21 @@ const config = {
             label: "Glossary",
             position: "right",
           },
-          { to: "/dev-blog", label: "Dev blog", position: "right" },
+          { to: "/dev-blog", label: "Blog", position: "right" },
           { to: "/adr", label: "ADRs", position: "right" },
-          {
-            className: "header-github-link",
-            href: "https://github.com/input-output-hk/mithril/",
-            position: "right",
-          },
         ],
       },
       footer: {
-        style: "dark",
+        logo: {
+          alt: "Mithril. A complete guide.",
+          src: "img/mithril-logo-dark.svg",
+        },
         links: [
           {
             title: "Contributing",
             items: [
               {
-                label: "Contributing Guidelines",
+                label: "Contributing guidelines",
                 href: "https://github.com/input-output-hk/mithril/blob/main/CONTRIBUTING.md",
               },
               {
@@ -271,7 +285,7 @@ const config = {
                 href: "https://discord.gg/5kaErDKDRq",
               },
               {
-                label: "GitHub Discussions",
+                label: "GitHub discussions",
                 href: "https://github.com/input-output-hk/mithril/discussions",
               },
               {
@@ -284,11 +298,11 @@ const config = {
             title: "More",
             items: [
               {
-                label: "Mithril Networks Status",
+                label: "Mithril networks status",
                 href: "https://mithril.cronitorstatus.com/",
               },
               {
-                label: "Mithril Protocol Insights",
+                label: "Mithril protocol insights",
                 href: "https://lookerstudio.google.com/s/mbL23-8gibI",
               },
               {
@@ -301,8 +315,21 @@ const config = {
               },
             ],
           },
+          {
+            title: "Legal",
+            items: [
+              {
+                label: "Privacy policy",
+                href: "https://static.iohk.io/terms/iog-privacy-policy.pdf",
+              },
+              {
+                label: "Terms and conditions",
+                href: "https://static.iohk.io/terms/iog-terms-and-conditions.pdf",
+              },
+            ],
+          },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} <strong>Input Output Global</strong> <br/> <a href="https://static.iohk.io/terms/iog-privacy-policy.pdf" target="_blank" class="footer__link-item">Privacy Policy</a> | <a href="https://static.iohk.io/terms/iohktermsandconditions.pdf" target="_blank" class="footer__link-item">Terms & Conditions</a> <br/> <small>Built with Docusaurus</small>`,
+        copyright: `Copyright © ${new Date().getFullYear()} IOG, Inc.`,
       },
       prism: {
         theme: lightCodeTheme,

docs/website/helpers/media-queries.ts

@@ -0,0 +1,11 @@
+export const not = (query: string) => "not screen and " + query;
+
+export const forPhablet = "(min-width: 640px)";
+
+export const forTablet = "(min-width: 768px)";
+
+export const forLaptop = "(min-width: 1024px)";
+
+export const forDesktop = "(min-width: 1280px)";
+
+export const forTabletOnly = `${forTablet} and (max-width: 1024px)`;

docs/website/homepage-content/features.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { translate } from "@docusaurus/Translate";
+import Security from "../src/components/icons/Security";
+import Speed from "../src/components/icons/Speed";
+import Verification from "../src/components/icons/Verification";
+import Scalability from "../src/components/icons/Scalability";
+
+export const FeatureList = [
+  {
+    title: translate({
+      id: "homepage.featureList.security.title",
+      message: "Secure data exchange",
+    }),
+    icon: <Security />,
+    description: translate({
+      id: "homepage.featureList.security.description",
+      message:
+        "Fast and secure data synchronization with layer 2 solutions – including bridges, sidechains, and rollups – as well as applications like light wallets.",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureList.speed.title",
+      message: "Faster node bootstrapping",
+    }),
+    icon: <Speed />,
+    description: translate({
+      id: "homepage.featureList.speed.description",
+      message:
+        "Mithril's certified snapshots allow nodes to bootstrap quickly while maintaining the same level of security.",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureList.verification.title",
+      message: "Trustless state verification",
+    }),
+    icon: <Verification />,
+    description: translate({
+      id: "homepage.featureList.verification.description",
+      message:
+        "Blockchain data is validated and certified by a minimum share of the stake, enabling secure data exchange between decentralized applications.",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureList.scalability.title",
+      message: "Scalability",
+    }),
+    icon: <Scalability />,
+    description: translate({
+      id: "homepage.featureList.scalability.description",
+      message:
+        "Stake-based threshold multi-signatures efficiently aggregate individual signatures, ensuring scalability even as the number of participants grows.",
+    }),
+  },
+];

docs/website/homepage-content/hero.ts

@@ -0,0 +1,12 @@
+import { translate } from "@docusaurus/Translate";
+
+export const hero = {
+  title: translate({
+    id: "homepage.hero.title",
+    message: "Mithril documentation",
+  }),
+  standfirst: translate({
+    id: "homepage.hero.standfirst",
+    message: `Mithril is a protocol and network designed for proof-of-stake blockchains. It aims to provide lightweight access to blockchain data with a high degree of security and decentralization.`,
+  }),
+};

docs/website/homepage-content/use-cases.ts

@@ -0,0 +1,21 @@
+import { translate } from "@docusaurus/Translate";
+
+export const useCases = {
+  nonScrollingText: translate({
+    id: "homepage.useCases.nonScrollingText",
+    message: "Use cases include:",
+  }),
+  scrollingText: {
+    id: "homepage.useCases.scrollingText",
+    items: [
+      "Full node clients",
+      "Light clients",
+      "Light wallets",
+      "Mobile applications",
+      "Sidechains",
+      "Bridges",
+      "Rollups",
+      "State channels",
+    ],
+  },
+};

docs/website/homepage-content/why-mithril.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { translate } from "@docusaurus/Translate";
+
+export const WhyMithrilContents = {
+  title: translate({
+    id: "homepage.whyMithril.title",
+    message: "WHY MITHRIL?",
+  }),
+  descriptionParagraph: {
+    id: "homepage.whyMithril.paragraphs",
+    message: (
+      <div className="flex flex-col gap-6">
+        <p>
+          The Cardano blockchain offers robust security, but starting up a new
+          node, syncing it with the network, or exchanging data can be slow and
+          resource intensive (24GB of RAM, 150GB (and growing) of storage, and
+          over 24 hours for initial synchronization.)
+        </p>
+        <p>
+          Mithril was developed for Cardano as part of the Basho development
+          phase to support optimization, scalability, and interoperability.
+        </p>
+      </div>
+    ),
+  },
+  timeline: ["Byron", "Shelley", "Goguen", "Basho", "Voltaire"],
+};