Future-proof maintainability for the new website

[jpraynaud]

Why

We want to make sure that we can maintain the new website (home page and new design).

What

Review in depth and document the modifications. Also identify the pain points that will likely occur in the future with dependencies upgrades.

How

• Review in depth the modifications
• Add missing documentation for the modifications
• Identify the future pain points when upgrading dependencies:
  • docusaurus
  • tailwind
  • cva

[Alenar]

Future-proof maintainability for the new website

Docusaurus

Swizzled components

Here's the list of the ejected theme components with:

• their safety: if they can break with minor docusaurus versions (unsafe ⚠️) or with
  major docusaurus versions (safe)
• if they have changes over docusaurus theme classic: if they don't, we can delete them as docusaurus will fall back to
  the standard component

Note

For more details on swizzling 'safety' see: https://docusaurus.io/docs/swizzling/#what-is-safe-to-swizzle

Component	Eject safe	Have changes
Footer	Safe	❌
Footer/Copyright	Safe	❌
Footer/Layout	Safe	✔️
Footer/LinkItem	Safe	✔️
Footer/Links	Safe	❌
Footer/Links/MultiColumn	Safe	✔️
Footer/Links/Simple	Safe	❌
Footer/Logo	Safe	✔️
Navbar/Content	Unsafe ⚠️	✔️
Navbar/Layout	Unsafe ⚠️	✔️
Navbar/MobileSidebar	Unsafe ⚠️	❌
Navbar/MobileSidebar/Header	Unsafe ⚠️	❌
Navbar/MobileSidebar/Layout	Unsafe ⚠️	✔️
Navbar/MobileSidebar/PrimaryMenu	Unsafe ⚠️	✔️
Navbar/MobileSidebar/SecondaryMenu	Unsafe ⚠️	❌
Navbar/MobileSidebar/Toggle	Unsafe ⚠️	❌
Navbar/Search	Unsafe ⚠️	❌

Enabling future flags to tests Docusaurus v4 compatibility

Note

Preview of docusaurus v4 changes can be enabling by setting the future parameter in docusaurus.config.js:

 future: {
   v4: true,
},

As of the 10 July 2025, this:

• break the Navbar indentation and alter its, and the main navbar, styles (same problem with the mobile version):

• No changes for the footer
• No visible issue on the main page

Findings

• Half of the swizzled components are unneeded and can be deleted (9 out of 17): Footer, Footer/Copyright,
  Footer/Links, Footer/Links/Simple, Navbar, Navbar/MobileSidebar, Navbar/MobileSidebar/Header,
  Navbar/MobileSidebar/SecondaryMenu, Navbar/Search.
• ⚠️ Navbar components, which have the most changes, are unsafe to eject and can break at each docusaurus minor version
• ⚠️ Upgrading to Docusaurus v4 will require reworking the Navbar style

CVA

The redesign introduced cva 1.0-beta 4 as a dependency to the website.

This package is the (yet to) stabilized version of a well-used npm package: class-variance-authority
(~6M downloads).

It's used only once in the project (in docs/website/src/components/WhyMithril.tsx) and upgrading from beta 1 to beta 4
did not raise any problem (both versions are two years apart).

With only one use and the fact that the use case seems stable, this should be fine and even futurproof compared to if
its predecessor, class-variance-authority, was used.

Tailwind

V4 upgrade test

The auto-upgrader raises no warning when run:

npx @tailwindcss/upgrade

... But the website build fails:

Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
-- inner error --
Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
Generated code for /home/denis/dev/mithril/docs/website/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].use[1]!/home/denis/dev/mithril/docs/website/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].use[2]!/home/denis/dev/mithril/docs/website/src/theme/Navbar/Search/styles.module.css

But with some minor manual additional changes, the build succeeds:

diff --git a/docs/website/docusaurus.config.js b/docs/website/docusaurus.config.js
index a160d5ba8..dad2e075f 100644
--- a/docs/website/docusaurus.config.js
+++ b/docs/website/docusaurus.config.js
@@ -93,8 +93,7 @@ const config = {
         name: "docusaurus-tailwindcss",
         configurePostCss(postcssOptions) {
           // Appends TailwindCSS and AutoPrefixer.
-          postcssOptions.plugins.push(require("tailwindcss"));
-          postcssOptions.plugins.push(require("autoprefixer"));
+          postcssOptions.plugins.push(require("@tailwindcss/postcss"));
           return postcssOptions;
         },
       };
diff --git a/docs/website/package.json b/docs/website/package.json
index 3b1a800cb..7b03846ce 100644
--- a/docs/website/package.json
+++ b/docs/website/package.json
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "prettier": "3.3.2",
-    "tailwindcss": "^3.4.7",
-    "autoprefixer": "^10.4.19"
+    "tailwindcss": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.11"
   }
 }

This is not enough has there's some issue:

• Links colors now use a unified green even with light text over dark background (i.e. in the footer)
• Footers links now have an incorrect indent

Trying to solve those issues is not trivial, this upgrade introduce usage of css cascade layers in the generated styles which have a consequence: imported tailwind styles have a lower priority than docusaurus styles (this explains the two problems above + why some spacing have changes).

Moreover, enabling docusaurus future v4 flag (whose modification introduce as well css cascade layers), almost completely broke the website style.
From what I understand this breakage is due to bad interactions between docusaurus css layers and tailwind v4 layers, meaning that solving this issue probably need the equivalent of a docusaurus-theme-tailwind plugins, something asked by the docusaurus community since 5 years (see issue 2961, New Tailwind theme, in the docusaurus repository).
At a minimum we would need help from a specialist.

Findings

• Auto upgrade tool is able to run but the site doesn't build
• Minimal additional manual works are needed for the site to build
• Some additional modifications are needed to align the CSS with the previous behavior, and can't be solved easily
• enabling tailwind v4 with docusaurus future v4 flag broke the website style ➡️ without a docusaurus-theme-tailwind we have to chose between docusaurus v4 and tailwind v4

[Alenar]

Patches for swizzled Docusaurus theme classic components

Those patches contains all the modifications applied to the ejected components.

Patch for ejected Footer components

diff --git a/docs/website/src/theme/Footer/Layout/index.tsx b/docs/website/src/theme/Footer/Layout/index.tsx
index 9ccff2426..dbf8df940 100644
--- a/docs/website/src/theme/Footer/Layout/index.tsx
+++ b/docs/website/src/theme/Footer/Layout/index.tsx
@@ -1,24 +1,18 @@
 import React, { type ReactNode } from "react";
-import clsx from "clsx";
-import { ThemeClassNames } from "@docusaurus/theme-common";
 import type { Props } from "@theme/Footer/Layout";
+import clsx from "clsx";
 
 export default function FooterLayout({
-  style,
   links,
   logo,
   copyright,
 }: Props): ReactNode {
   return (
-    <footer
-      className={clsx(ThemeClassNames.layout.footer.container, "footer", {
-        "footer--dark": style === "dark",
-      })}
-    >
-      <div className="container container-fluid">
+    <footer className="bg-blue">
+      <div className="pageContainer py-14 text-gray-extra-light">
         {links}
         {(logo || copyright) && (
-          <div className="footer__bottom text--center">
+          <div className="flex tablet:items-center gap-2 tablet:flex-row flex-col text-gray-dark tablet:justify-between tablet:pt-4 tablet:border-t border-t-gray-dark">
             {logo && <div className="margin-bottom--sm">{logo}</div>}
             {copyright}
           </div>
diff --git a/docs/website/src/theme/Footer/LinkItem/index.tsx b/docs/website/src/theme/Footer/LinkItem/index.tsx
index c0dfe6e7b..5aedc324b 100644
--- a/docs/website/src/theme/Footer/LinkItem/index.tsx
+++ b/docs/website/src/theme/Footer/LinkItem/index.tsx
@@ -2,8 +2,7 @@ import React, { type ReactNode } from "react";
 import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import isInternalUrl from "@docusaurus/isInternalUrl";
-import IconExternalLink from "@theme/Icon/ExternalLink";
+
 import type { Props } from "@theme/Footer/LinkItem";
 
 export default function FooterLinkItem({ item }: Props): ReactNode {
@@ -13,7 +12,7 @@ export default function FooterLinkItem({ item }: Props): ReactNode {
 
   return (
     <Link
-      className={clsx("footer__link-item", className)}
+      className={clsx("", className)}
       {...(href
         ? {
             href: prependBaseUrlToHref ? normalizedHref : href,
@@ -24,7 +23,6 @@ export default function FooterLinkItem({ item }: Props): ReactNode {
       {...props}
     >
       {label}
-      {href && !isInternalUrl(href) && <IconExternalLink />}
     </Link>
   );
 }
diff --git a/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx b/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx
index f06d1ea4b..dec1797ad 100644
--- a/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx
+++ b/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx
@@ -1,6 +1,5 @@
 import React, { type ReactNode } from "react";
 import clsx from "clsx";
-import { ThemeClassNames } from "@docusaurus/theme-common";
 import LinkItem from "@theme/Footer/LinkItem";
 import type { Props } from "@theme/Footer/Links/MultiColumn";
 
@@ -24,15 +23,9 @@ function ColumnLinkItem({ item }: { item: ColumnItemType }) {
 
 function Column({ column }: { column: ColumnType }) {
   return (
-    <div
-      className={clsx(
-        ThemeClassNames.layout.footer.column,
-        "col footer__col",
-        column.className,
-      )}
-    >
-      <div className="footer__title">{column.title}</div>
-      <ul className="footer__items clean-list">
+    <div className="flex flex-col gap-6">
+      <div className="font-bold min-h-5">{column.title}</div>
+      <ul className="flex flex-col gap-6">
         {column.items.map((item, i) => (
           <ColumnLinkItem key={i} item={item} />
         ))}
@@ -43,7 +36,7 @@ function Column({ column }: { column: ColumnType }) {
 
 export default function FooterLinksMultiColumn({ columns }: Props): ReactNode {
   return (
-    <div className="row footer__links">
+    <div className="laptop:flex laptop:flex-row tablet:grid tablet:grid-cols-2 laptop:gap-[6.25rem] gap-y-7 flex flex-col text-sm pb-12 tablet:pb-[3.625rem]">
       {columns.map((column, i) => (
         <Column key={i} column={column} />
       ))}
diff --git a/docs/website/src/theme/Footer/Logo/index.tsx b/docs/website/src/theme/Footer/Logo/index.tsx
index 2aa257a75..e7427e732 100644
--- a/docs/website/src/theme/Footer/Logo/index.tsx
+++ b/docs/website/src/theme/Footer/Logo/index.tsx
@@ -15,7 +15,7 @@ function LogoImage({ logo }: Props) {
   };
   return (
     <ThemedImage
-      className={clsx("footer__logo", logo.className)}
+      className={clsx(logo.className)}
       alt={logo.alt}
       sources={sources}
       width={logo.width}
@@ -35,6 +35,9 @@ export default function FooterLogo({ logo }: Props): ReactNode {
       <LogoImage logo={logo} />
     </Link>
   ) : (
-    <LogoImage logo={logo} />
+    <div className="flex items-center text-2xl tracking-[-0.01125rem] gap-1">
+      <LogoImage logo={logo} />
+      <h4>Mithril</h4>
+    </div>
   );
 }

Patch for ejected Navbar components

diff --git a/docs/website/src/theme/Navbar/Content/index.tsx b/docs/website/src/theme/Navbar/Content/index.tsx
index 43f2a1e73..2c98c10ac 100644
--- a/docs/website/src/theme/Navbar/Content/index.tsx
+++ b/docs/website/src/theme/Navbar/Content/index.tsx
@@ -1,29 +1,24 @@
-import React, { type ReactNode } from "react";
-import clsx from "clsx";
-import {
-  useThemeConfig,
-  ErrorCauseBoundary,
-  ThemeClassNames,
-} from "@docusaurus/theme-common";
+import React from "react";
+import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common";
 import {
   splitNavbarItems,
   useNavbarMobileSidebar,
 } from "@docusaurus/theme-common/internal";
-import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem";
+import NavbarItem from "@theme/NavbarItem";
 import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle";
 import SearchBar from "@theme/SearchBar";
 import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
 import NavbarLogo from "@theme/Navbar/Logo";
 import NavbarSearch from "@theme/Navbar/Search";
-
 import styles from "./styles.module.css";
+import Discord from "../../../components/icons/Discord";
+import Github from "../../../components/icons/Github";
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
-  return useThemeConfig().navbar.items as NavbarItemConfig[];
+  return useThemeConfig().navbar.items;
 }
-
-function NavbarItems({ items }: { items: NavbarItemConfig[] }): ReactNode {
+function NavbarItems({ items }) {
   return (
     <>
       {items.map((item, i) => (
@@ -44,57 +39,28 @@ ${JSON.stringify(item, null, 2)}`,
     </>
   );
 }
-
-function NavbarContentLayout({
-  left,
-  right,
-}: {
-  left: ReactNode;
-  right: ReactNode;
-}) {
+function NavbarContentLayout({ left, right }) {
   return (
     <div className="navbar__inner">
-      <div
-        className={clsx(
-          ThemeClassNames.layout.navbar.containerLeft,
-          "navbar__items",
-        )}
-      >
-        {left}
-      </div>
-      <div
-        className={clsx(
-          ThemeClassNames.layout.navbar.containerRight,
-          "navbar__items navbar__items--right",
-        )}
-      >
-        {right}
-      </div>
+      <div className="navbar__items">{left}</div>
+      <div className="navbar__items navbar__items--right">{right}</div>
     </div>
   );
 }
-
-export default function NavbarContent(): ReactNode {
+export default function NavbarContent() {
   const mobileSidebar = useNavbarMobileSidebar();
-
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
-
   const searchBarItem = items.find((item) => item.type === "search");
-
   return (
     <NavbarContentLayout
       left={
-        // TODO stop hardcoding items?
         <>
-          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
           <NavbarLogo />
           <NavbarItems items={leftItems} />
         </>
       }
       right={
-        // TODO stop hardcoding items?
-        // Ask the user to add the respective navbar items => more flexible
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
@@ -103,6 +69,23 @@ export default function NavbarContent(): ReactNode {
               <SearchBar />
             </NavbarSearch>
           )}
+          <a
+            href="https://github.com/input-output-hk/mithril/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-[var(--ifm-navbar-link-hover-color)] mx-3 py-1 laptop:flex hidden"
+          >
+            <Github />
+          </a>
+          <a
+            href="https://discord.gg/5kaErDKDRq"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-[var(--ifm-navbar-link-hover-color)] mx-3 py-1 laptop:flex hidden"
+          >
+            <Discord />
+          </a>
+          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
         </>
       }
     />
diff --git a/docs/website/src/theme/Navbar/Content/styles.module.css b/docs/website/src/theme/Navbar/Content/styles.module.css
index 9f080ff96..4c9471e10 100644
--- a/docs/website/src/theme/Navbar/Content/styles.module.css
+++ b/docs/website/src/theme/Navbar/Content/styles.module.css
@@ -6,11 +6,3 @@ Hide color mode toggle in small viewports
     display: none;
   }
 }
-
-/*
-Restore some Infima style that broke with CSS Cascade Layers
-See https://github.com/facebook/docusaurus/pull/11142
- */
-:global(.navbar__items--right) > :last-child {
-  padding-right: 0;
-}
diff --git a/docs/website/src/theme/Navbar/Layout/index.tsx b/docs/website/src/theme/Navbar/Layout/index.tsx
index c5de1274f..ef085dfb8 100644
--- a/docs/website/src/theme/Navbar/Layout/index.tsx
+++ b/docs/website/src/theme/Navbar/Layout/index.tsx
@@ -1,17 +1,16 @@
-import React, { type ComponentProps, type ReactNode } from "react";
+import React, { useEffect, useState } from "react";
 import clsx from "clsx";
-import { ThemeClassNames, useThemeConfig } from "@docusaurus/theme-common";
+import { useThemeConfig } from "@docusaurus/theme-common";
 import {
   useHideableNavbar,
   useNavbarMobileSidebar,
 } from "@docusaurus/theme-common/internal";
 import { translate } from "@docusaurus/Translate";
 import NavbarMobileSidebar from "@theme/Navbar/MobileSidebar";
-import type { Props } from "@theme/Navbar/Layout";
-
 import styles from "./styles.module.css";
+import { useIsLandingPage } from "../../../hooks/useIsLandingPage";
 
-function NavbarBackdrop(props: ComponentProps<"div">) {
+function NavbarBackdrop(props) {
   return (
     <div
       role="presentation"
@@ -21,14 +20,27 @@ function NavbarBackdrop(props: ComponentProps<"div">) {
   );
 }
 
-export default function NavbarLayout({ children }: Props): ReactNode {
+export default function NavbarLayout({ children }) {
+  const isLandingPage = useIsLandingPage();
   const {
-    navbar: { hideOnScroll, style },
+    navbar: { hideOnScroll },
   } = useThemeConfig();
   const mobileSidebar = useNavbarMobileSidebar();
   const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
+
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrolled(window.scrollY > 70);
+    };
+
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
   return (
-    <nav
+    <header
       ref={navbarRef}
       aria-label={translate({
         id: "theme.NavBar.navAriaLabel",
@@ -36,23 +48,28 @@ export default function NavbarLayout({ children }: Props): ReactNode {
         description: "The ARIA label for the main navigation",
       })}
       className={clsx(
-        ThemeClassNames.layout.navbar.container,
-        "navbar",
+        "flex navbar tablet:py-[30px] !px-0 shadow-none z-50",
+        isLandingPage
+          ? "border-none pt-3"
+          : "border-b border-[#EAEAEB] pt-3 pb-4 tablet:px-2",
         "navbar--fixed-top",
-        hideOnScroll && [
-          styles.navbarHideable,
-          !isNavbarVisible && styles.navbarHidden,
-        ],
+        hideOnScroll && !isNavbarVisible && styles.navbarHidden,
         {
-          "navbar--dark": style === "dark",
-          "navbar--primary": style === "primary",
           "navbar-sidebar--show": mobileSidebar.shown,
+          "landing-navbar--scrolled": isLandingPage && scrolled,
+          "landing-navbar--top": isLandingPage && !scrolled,
         },
       )}
     >
-      {children}
+      <div
+        className={clsx(
+          isLandingPage ? "pageContainer py-0.5 tablet:py-0" : "w-full px-6",
+        )}
+      >
+        {children}
+      </div>
       <NavbarBackdrop onClick={mobileSidebar.toggle} />
       <NavbarMobileSidebar />
-    </nav>
+    </header>
   );
 }
diff --git a/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx
index 59691182a..18659aa18 100644
--- a/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx
+++ b/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx
@@ -1,40 +1,8 @@
-import React, { version, type ReactNode } from "react";
+import React, { type ReactNode } from "react";
 import clsx from "clsx";
 import { useNavbarSecondaryMenu } from "@docusaurus/theme-common/internal";
-import { ThemeClassNames } from "@docusaurus/theme-common";
 import type { Props } from "@theme/Navbar/MobileSidebar/Layout";
 
-// TODO Docusaurus v4: remove temporary inert workaround
-//  See https://github.com/facebook/react/issues/17157
-//  See https://github.com/radix-ui/themes/pull/509
-function inertProps(inert: boolean) {
-  const isBeforeReact19 = parseInt(version!.split(".")[0]!, 10) < 19;
-  if (isBeforeReact19) {
-    return { inert: inert ? "" : undefined };
-  }
-  return { inert };
-}
-
-function NavbarMobileSidebarPanel({
-  children,
-  inert,
-}: {
-  children: ReactNode;
-  inert: boolean;
-}) {
-  return (
-    <div
-      className={clsx(
-        ThemeClassNames.layout.navbar.mobileSidebar.panel,
-        "navbar-sidebar__item menu",
-      )}
-      {...inertProps(inert)}
-    >
-      {children}
-    </div>
-  );
-}
-
 export default function NavbarMobileSidebarLayout({
   header,
   primaryMenu,
@@ -42,24 +10,15 @@ export default function NavbarMobileSidebarLayout({
 }: Props): ReactNode {
   const { shown: secondaryMenuShown } = useNavbarSecondaryMenu();
   return (
-    <div
-      className={clsx(
-        ThemeClassNames.layout.navbar.mobileSidebar.container,
-        "navbar-sidebar",
-      )}
-    >
+    <div className="navbar-sidebar">
       {header}
       <div
         className={clsx("navbar-sidebar__items", {
           "navbar-sidebar__items--show-secondary": secondaryMenuShown,
         })}
       >
-        <NavbarMobileSidebarPanel inert={secondaryMenuShown}>
-          {primaryMenu}
-        </NavbarMobileSidebarPanel>
-        <NavbarMobileSidebarPanel inert={!secondaryMenuShown}>
-          {secondaryMenu}
-        </NavbarMobileSidebarPanel>
+        <div className="navbar-sidebar__item menu">{primaryMenu}</div>
+        <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
       </div>
     </div>
   );
diff --git a/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
index 8c51b751e..4e8f3d918 100644
--- a/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
+++ b/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -2,6 +2,7 @@ import React, { type ReactNode } from "react";
 import { useThemeConfig } from "@docusaurus/theme-common";
 import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
 import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem";
+import Discord from "../../../../components/icons/Discord";
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -26,6 +27,14 @@ export default function NavbarMobilePrimaryMenu(): ReactNode {
           key={i}
         />
       ))}
+      <a
+        href="https://discord.com/invite/Qq5vNTg9PT"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="hover:text-blue-light mx-3 my-2 py-1 flex"
+      >
+        <Discord />
+      </a>
     </ul>
   );
 }