From 822a467d933566ca618564ffa5732a85db9e6117 Mon Sep 17 00:00:00 2001
From: Peyton Murray <peynmurray@gmail.com>
Date: Mon, 3 Feb 2025 23:26:19 -0800
Subject: [PATCH] [MAINT] Replace prettier with biome; fix bad pre-commit
 exclusion rule (#1075)

---
 .pre-commit-config.yaml                    |  13 +-
 docusaurus-docs/babel.config.js            |   2 +-
 docusaurus-docs/docusaurus.config.js       | 370 +++++++++++----------
 docusaurus-docs/package.json               |  80 +++--
 docusaurus-docs/sidebarsCommunity.js       |   8 +-
 docusaurus-docs/sidebarsCondaStore.js      |   8 +-
 docusaurus-docs/sidebarsCondaStoreUI.js    |   8 +-
 docusaurus-docs/sidebarsJupyterLab.js      |  12 +-
 docusaurus-docs/src/css/custom.css         |  58 ++--
 docusaurus-docs/src/pages/index.js         | 332 +++++++++---------
 docusaurus-docs/src/pages/index.module.css |  32 +-
 11 files changed, 466 insertions(+), 457 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index bcd76ba95..e6f1c232a 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -12,6 +12,10 @@ ci:
   autofix_commit_msg: |
     [pre-commit.ci] Apply automatic pre-commit fixes
 
+exclude: |
+  (?x)^(
+    docusaurus-docs/static/openapi.json
+  )
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
@@ -32,8 +36,9 @@ repos:
       - id: end-of-file-fixer
         exclude: ".python-version-default"
 
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v4.0.0-alpha.8
+  - repo: https://github.com/biomejs/pre-commit
+    rev: "v0.6.1"
     hooks:
-      - id: prettier
-        exclude: ^(examples/|templates/|)
+    - id: biome-check
+      additional_dependencies: ["@biomejs/biome@1.9.4"]
+      exclude: ^(examples/|templates/)
diff --git a/docusaurus-docs/babel.config.js b/docusaurus-docs/babel.config.js
index bfd75dbdf..f8c7bb99e 100644
--- a/docusaurus-docs/babel.config.js
+++ b/docusaurus-docs/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+	presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };
diff --git a/docusaurus-docs/docusaurus.config.js b/docusaurus-docs/docusaurus.config.js
index 4b662141a..6726730e7 100644
--- a/docusaurus-docs/docusaurus.config.js
+++ b/docusaurus-docs/docusaurus.config.js
@@ -10,197 +10,201 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "conda-store",
-  tagline: "Data science environments for collaboration",
-  favicon: "img/favicon.ico",
+	title: "conda-store",
+	tagline: "Data science environments for collaboration",
+	favicon: "img/favicon.ico",
 
-  // Set production url
-  url: "https://conda.store",
-  // Set /<baseUrl>/ pathname under which your site is served
-  baseUrl: "/",
+	// Set production url
+	url: "https://conda.store",
+	// Set /<baseUrl>/ pathname under which your site is served
+	baseUrl: "/",
 
-  organizationName: "conda-incubator",
-  projectName: "conda-store",
+	organizationName: "conda-incubator",
+	projectName: "conda-store",
 
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
+	onBrokenLinks: "throw",
+	onBrokenMarkdownLinks: "warn",
 
-  // Even if you don't use internalization, you can use this field to set useful
-  // metadata like html lang. For example, if your site is Chinese, you may want
-  // to replace "en" with "zh-Hans".
-  i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
-  },
+	// Even if you don't use internalization, you can use this field to set useful
+	// metadata like html lang. For example, if your site is Chinese, you may want
+	// to replace "en" with "zh-Hans".
+	i18n: {
+		defaultLocale: "en",
+		locales: ["en"],
+	},
 
-  // Add Plausible snippet as script
-  scripts: [
-    {
-      src: "https://plausible.io/js/script.js",
-      defer: true,
-      "data-domain": "conda.store",
-    }
-  ],
+	// Add Plausible snippet as script
+	scripts: [
+		{
+			src: "https://plausible.io/js/script.js",
+			defer: true,
+			"data-domain": "conda.store",
+		},
+	],
 
-  // Install plugins, then add here
-  plugins: [
-    require.resolve("docusaurus-lunr-search"),
-    [
-      "content-docs",
-      /** @type {import('@docusaurus/plugin-content-docs').Options} */
-      ({
-        id: "community",
-        path: "community",
-        routeBasePath: "/community",
-        breadcrumbs: true,
-      }),
-    ],
-    [
-      "content-docs",
-      /** @type {import('@docusaurus/plugin-content-docs').Options} */
-      ({
-        id: "conda-store-ui",
-        path: "conda-store-ui",
-        routeBasePath: "/conda-store-ui",
-        breadcrumbs: true,
-      }),
-    ],
-    [
-      "content-docs",
-      /** @type {import('@docusaurus/plugin-content-docs').Options} */
-      ({
-        id: "jupyterlab-conda-store",
-        path: "jupyterlab-conda-store",
-        routeBasePath: "/jupyterlab-conda-store",
-        breadcrumbs: true,
-      }),
-    ],
-  ],
+	// Install plugins, then add here
+	plugins: [
+		require.resolve("docusaurus-lunr-search"),
+		[
+			"content-docs",
+			/** @type {import('@docusaurus/plugin-content-docs').Options} */
+			({
+				id: "community",
+				path: "community",
+				routeBasePath: "/community",
+				breadcrumbs: true,
+			}),
+		],
+		[
+			"content-docs",
+			/** @type {import('@docusaurus/plugin-content-docs').Options} */
+			({
+				id: "conda-store-ui",
+				path: "conda-store-ui",
+				routeBasePath: "/conda-store-ui",
+				breadcrumbs: true,
+			}),
+		],
+		[
+			"content-docs",
+			/** @type {import('@docusaurus/plugin-content-docs').Options} */
+			({
+				id: "jupyterlab-conda-store",
+				path: "jupyterlab-conda-store",
+				routeBasePath: "/jupyterlab-conda-store",
+				breadcrumbs: true,
+			}),
+		],
+	],
 
-  presets: [
-    [
-      "classic",
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        docs: {
-          id: "conda-store",
-          path: "conda-store",
-          routeBasePath: "conda-store",
-          editUrl:
-            "https://github.com/conda-incubator/conda-store/tree/main/docusaurus-docs",
-        },
-        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
-        },
-      }),
-    ],
-  ],
+	presets: [
+		[
+			"classic",
+			/** @type {import('@docusaurus/preset-classic').Options} */
+			({
+				docs: {
+					id: "conda-store",
+					path: "conda-store",
+					routeBasePath: "conda-store",
+					editUrl:
+						"https://github.com/conda-incubator/conda-store/tree/main/docusaurus-docs",
+				},
+				theme: {
+					customCss: require.resolve("./src/css/custom.css"),
+				},
+			}),
+		],
+	],
 
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      // og:image
-      image: "img/horizontal-logo.png",
-      metadata: [
-        { name: 'keywords', content: 'conda, python, conda environments, dependencies, reproducibility' },
-      ],
-      navbar: {
-        title: "Home",
-        logo: {
-          alt: "conda-store logo - conda-store Homepage",
-          src: "img/logo.svg",
-        },
-        items: [
-          {
-            label: "conda-store",
-            to: "conda-store/introduction",
-            position: "left",
-          },
-          {
-            label: "conda-store UI",
-            to: "conda-store-ui/introduction",
-            position: "left",
-          },
-          {
-            label: "JupyterLab extension",
-            to: "jupyterlab-conda-store/introduction",
-            position: "left",
-          },
-          {
-            label: "Community",
-            to: "community/introduction",
-            position: "left",
-          },
-          {
-            label: "GitHub",
-            position: "right",
-            items: [
-              {
-                label: "conda-store",
-                href: "https://github.com/conda-incubator/conda-store",
-              },
-              {
-                label: "conda-store-ui",
-                href: "https://github.com/conda-incubator/conda-store-ui",
-              },
-              {
-                label: "jupyterlab-conda-store",
-                href: "https://github.com/conda-incubator/jupyterlab-conda-store",
-              },
-            ],
-          },
-        ],
-      },
-      footer: {
-        style: "dark",
-        links: [
-          {
-            items: [
-              {
-                label: "Code of Conduct",
-                href: "https://github.com/conda-incubator/governance/blob/main/CODE_OF_CONDUCT.md",
-              },
-              {
-                label: "Governance",
-                href: "https://github.com/conda-incubator/governance/tree/main",
-              },
-              {
-                label: "Support",
-                to: "community/introduction#support",
-              },
-            ],
-          },
-          {
-            items: [
-              {
-                label: "Brand guidelines",
-                to: "community/design",
-              },
-              {
-                label: "Contribute",
-                to: "community/contribute/",
-              },
-            ],
-          },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} | Made with 💚 by conda - store development team`,
-      },
-      prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
-      announcementBar: {
-        id: 'WIP',
-        content:
-          '⚠️ We are in the process of revamping our docs, some pages may be incomplete or inaccurate. ⚠️',
-        isCloseable: false,
-      },
-      docs: {
-        sidebar: {
-          hideable: true,
-        },
-      },
-    }),
+	themeConfig:
+		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+		({
+			// og:image
+			image: "img/horizontal-logo.png",
+			metadata: [
+				{
+					name: "keywords",
+					content:
+						"conda, python, conda environments, dependencies, reproducibility",
+				},
+			],
+			navbar: {
+				title: "Home",
+				logo: {
+					alt: "conda-store logo - conda-store Homepage",
+					src: "img/logo.svg",
+				},
+				items: [
+					{
+						label: "conda-store",
+						to: "conda-store/introduction",
+						position: "left",
+					},
+					{
+						label: "conda-store UI",
+						to: "conda-store-ui/introduction",
+						position: "left",
+					},
+					{
+						label: "JupyterLab extension",
+						to: "jupyterlab-conda-store/introduction",
+						position: "left",
+					},
+					{
+						label: "Community",
+						to: "community/introduction",
+						position: "left",
+					},
+					{
+						label: "GitHub",
+						position: "right",
+						items: [
+							{
+								label: "conda-store",
+								href: "https://github.com/conda-incubator/conda-store",
+							},
+							{
+								label: "conda-store-ui",
+								href: "https://github.com/conda-incubator/conda-store-ui",
+							},
+							{
+								label: "jupyterlab-conda-store",
+								href: "https://github.com/conda-incubator/jupyterlab-conda-store",
+							},
+						],
+					},
+				],
+			},
+			footer: {
+				style: "dark",
+				links: [
+					{
+						items: [
+							{
+								label: "Code of Conduct",
+								href: "https://github.com/conda-incubator/governance/blob/main/CODE_OF_CONDUCT.md",
+							},
+							{
+								label: "Governance",
+								href: "https://github.com/conda-incubator/governance/tree/main",
+							},
+							{
+								label: "Support",
+								to: "community/introduction#support",
+							},
+						],
+					},
+					{
+						items: [
+							{
+								label: "Brand guidelines",
+								to: "community/design",
+							},
+							{
+								label: "Contribute",
+								to: "community/contribute/",
+							},
+						],
+					},
+				],
+				copyright: `Copyright © ${new Date().getFullYear()} | Made with 💚 by conda - store development team`,
+			},
+			prism: {
+				theme: lightCodeTheme,
+				darkTheme: darkCodeTheme,
+			},
+			announcementBar: {
+				id: "WIP",
+				content:
+					"⚠️ We are in the process of revamping our docs, some pages may be incomplete or inaccurate. ⚠️",
+				isCloseable: false,
+			},
+			docs: {
+				sidebar: {
+					hideable: true,
+				},
+			},
+		}),
 };
 
 module.exports = config;
diff --git a/docusaurus-docs/package.json b/docusaurus-docs/package.json
index 8bff289c9..b8c50d06c 100644
--- a/docusaurus-docs/package.json
+++ b/docusaurus-docs/package.json
@@ -1,44 +1,40 @@
 {
-  "name": "docs",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
-    "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
-    "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
-  },
-  "dependencies": {
-    "@docusaurus/core": "^3.0.0",
-    "@docusaurus/preset-classic": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "clsx": "^1.2.1",
-    "docusaurus-lunr-search": "^3.3.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.1"
-  },
-  "browserslist": {
-    "production": [
-      ">0.5%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "engines": {
-    "node": ">=16.14"
-  }
+	"name": "docs",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"docusaurus": "docusaurus",
+		"start": "docusaurus start",
+		"build": "docusaurus build",
+		"swizzle": "docusaurus swizzle",
+		"deploy": "docusaurus deploy",
+		"clear": "docusaurus clear",
+		"serve": "docusaurus serve",
+		"write-translations": "docusaurus write-translations",
+		"write-heading-ids": "docusaurus write-heading-ids"
+	},
+	"dependencies": {
+		"@docusaurus/core": "^3.0.0",
+		"@docusaurus/preset-classic": "^3.0.0",
+		"@mdx-js/react": "^3.0.0",
+		"clsx": "^1.2.1",
+		"docusaurus-lunr-search": "^3.3.1",
+		"prism-react-renderer": "^1.3.5",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"devDependencies": {
+		"@docusaurus/module-type-aliases": "2.4.1"
+	},
+	"browserslist": {
+		"production": [">0.5%", "not dead", "not op_mini all"],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"engines": {
+		"node": ">=16.14"
+	}
 }
diff --git a/docusaurus-docs/sidebarsCommunity.js b/docusaurus-docs/sidebarsCommunity.js
index d134d1d8c..6ca73b481 100644
--- a/docusaurus-docs/sidebarsCommunity.js
+++ b/docusaurus-docs/sidebarsCommunity.js
@@ -6,11 +6,11 @@
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{ type: "autogenerated", dirName: "community" }],
+	// By default, Docusaurus generates a sidebar from the docs folder structure
+	tutorialSidebar: [{ type: "autogenerated", dirName: "community" }],
 
-  // Manual sidebar template
-  /*
+	// Manual sidebar template
+	/*
   tutorialSidebar: [
     'introduction',
     'get-started',
diff --git a/docusaurus-docs/sidebarsCondaStore.js b/docusaurus-docs/sidebarsCondaStore.js
index 65a6c229a..d642604b3 100644
--- a/docusaurus-docs/sidebarsCondaStore.js
+++ b/docusaurus-docs/sidebarsCondaStore.js
@@ -6,11 +6,11 @@
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{ type: "autogenerated", dirName: "conda-store" }],
+	// By default, Docusaurus generates a sidebar from the docs folder structure
+	tutorialSidebar: [{ type: "autogenerated", dirName: "conda-store" }],
 
-  // But you can create a sidebar manually
-  /*
+	// But you can create a sidebar manually
+	/*
   tutorialSidebar: [
     'intro',
     'hello',
diff --git a/docusaurus-docs/sidebarsCondaStoreUI.js b/docusaurus-docs/sidebarsCondaStoreUI.js
index 444fd80a9..bfb15030e 100644
--- a/docusaurus-docs/sidebarsCondaStoreUI.js
+++ b/docusaurus-docs/sidebarsCondaStoreUI.js
@@ -6,11 +6,11 @@
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{ type: "autogenerated", dirName: "conda-store-ui" }],
+	// By default, Docusaurus generates a sidebar from the docs folder structure
+	tutorialSidebar: [{ type: "autogenerated", dirName: "conda-store-ui" }],
 
-  // But you can create a sidebar manually
-  /*
+	// But you can create a sidebar manually
+	/*
   tutorialSidebar: [
     'intro',
     'hello',
diff --git a/docusaurus-docs/sidebarsJupyterLab.js b/docusaurus-docs/sidebarsJupyterLab.js
index 129b85bf7..44d640c9a 100644
--- a/docusaurus-docs/sidebarsJupyterLab.js
+++ b/docusaurus-docs/sidebarsJupyterLab.js
@@ -6,13 +6,13 @@
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [
-    { type: "autogenerated", dirName: "jupyterlab-conda-store" },
-  ],
+	// By default, Docusaurus generates a sidebar from the docs folder structure
+	tutorialSidebar: [
+		{ type: "autogenerated", dirName: "jupyterlab-conda-store" },
+	],
 
-  // But you can create a sidebar manually
-  /*
+	// But you can create a sidebar manually
+	/*
   tutorialSidebar: [
     'intro',
     'hello',
diff --git a/docusaurus-docs/src/css/custom.css b/docusaurus-docs/src/css/custom.css
index 8daf1d6bc..8bf6df9b6 100644
--- a/docusaurus-docs/src/css/custom.css
+++ b/docusaurus-docs/src/css/custom.css
@@ -12,53 +12,53 @@
 
 /* Override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #298642;
-  --ifm-color-primary-dark: #206532;
-  --ifm-color-primary-darker: #144321;
-  --ifm-color-primary-darkest: #0a2210;
-  --ifm-color-primary-light: #85cb97;
-  --ifm-color-primary-lighter: #addcba;
-  --ifm-color-primary-lightest: #d6eedc;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --ifm-breadcrumb-color-active: var(--ifm-color-primary-dark);
+	--ifm-color-primary: #298642;
+	--ifm-color-primary-dark: #206532;
+	--ifm-color-primary-darker: #144321;
+	--ifm-color-primary-darkest: #0a2210;
+	--ifm-color-primary-light: #85cb97;
+	--ifm-color-primary-lighter: #addcba;
+	--ifm-color-primary-lightest: #d6eedc;
+	--ifm-code-font-size: 95%;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+	--ifm-breadcrumb-color-active: var(--ifm-color-primary-dark);
 }
 
 /* For readability concerns, choose a lighter palette in dark mode. */
 [data-theme="dark"] {
-  --ifm-color-primary: #5cb975;
-  --ifm-color-primary-dark: #85cb97;
-  --ifm-color-primary-darker: #addcba;
-  --ifm-color-primary-darkest: #d6eedc;
-  --ifm-color-primary-light: #206532;
-  --ifm-color-primary-lighter: #144321;
-  --ifm-color-primary-lightest: #0a2210;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+	--ifm-color-primary: #5cb975;
+	--ifm-color-primary-dark: #85cb97;
+	--ifm-color-primary-darker: #addcba;
+	--ifm-color-primary-darkest: #d6eedc;
+	--ifm-color-primary-light: #206532;
+	--ifm-color-primary-lighter: #144321;
+	--ifm-color-primary-lightest: #0a2210;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
 div[class^="announcementBar_"] {
-  font-weight: 500;
-  color: var(--ifm-color-content);
-  background-color: var(--ifm-color-primary-light);
-  border-bottom: 1.5px solid var(--ifm-color-primary-darkest);
+	font-weight: 500;
+	color: var(--ifm-color-content);
+	background-color: var(--ifm-color-primary-light);
+	border-bottom: 1.5px solid var(--ifm-color-primary-darkest);
 }
 
 div[class^="announcementBarContent_"] {
-  font-size: 1rem;
-  padding: 20px 0;
+	font-size: 1rem;
+	padding: 20px 0;
 }
 
 img {
-  border-color: var(--ifm-color-primary);
-  border-width: 2px;
-  border-style: solid;
+	border-color: var(--ifm-color-primary);
+	border-width: 2px;
+	border-style: solid;
 }
 
 .footer--dark {
-  --ifm-footer-background-color: #242526;
+	--ifm-footer-background-color: #242526;
 }
 
 /* Remove border (only) for conda-store logo in the top navbar */
 .navbar__logo img {
-  border-width: 0;
+	border-width: 0;
 }
diff --git a/docusaurus-docs/src/pages/index.js b/docusaurus-docs/src/pages/index.js
index e1d3bae76..4cc8040c8 100644
--- a/docusaurus-docs/src/pages/index.js
+++ b/docusaurus-docs/src/pages/index.js
@@ -2,199 +2,203 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import React from "react";
-import clsx from "clsx";
 import Link from "@docusaurus/Link";
+import useBaseUrl, { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Layout from "@theme/Layout";
 import CondaStoreLogo from "@site/static/img/logo.svg";
-import useBaseUrl, { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
+import Layout from "@theme/Layout";
+import clsx from "clsx";
+import React from "react";
 
 import styles from "./index.module.css";
 
 function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx("hero hero--secondary", styles.heroBanner)}>
-      <div className="container">
-        <CondaStoreLogo
-          alt={siteConfig.title}
-          className={clsx(styles.logo, "margin-vert--md")}
-        />
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link className="button button--primary button--lg" to="/community/introduction">
-            Learn more
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<header className={clsx("hero hero--secondary", styles.heroBanner)}>
+			<div className="container">
+				<CondaStoreLogo
+					alt={siteConfig.title}
+					className={clsx(styles.logo, "margin-vert--md")}
+				/>
+				<h1 className="hero__title">{siteConfig.title}</h1>
+				<p className="hero__subtitle">{siteConfig.tagline}</p>
+				<div className={styles.buttons}>
+					<Link
+						className="button button--primary button--lg"
+						to="/community/introduction"
+					>
+						Learn more
+					</Link>
+				</div>
+			</div>
+		</header>
+	);
 }
 
 const ProjectsList = [
-  {
-    title: "📦 conda-store",
-    link: "/conda-store/introduction",
-    description: (
-      <>Core library that provides key features through a REST API</>
-    ),
-  },
-  {
-    title: "💻 conda-store UI",
-    link: "/conda-store-ui/introduction",
-    description: (
-      <>
-        User-friendly frontend to access conda-store features in a React
-        application
-      </>
-    ),
-  },
-  {
-    title: "🪐 JupyterLab extension",
-    link: "/jupyterlab-conda-store/introduction",
-    description: (
-      <>JupyterLab interface that provides conda-store-ui frontend</>
-    ),
-  },
+	{
+		title: "📦 conda-store",
+		link: "/conda-store/introduction",
+		description: (
+			<>Core library that provides key features through a REST API</>
+		),
+	},
+	{
+		title: "💻 conda-store UI",
+		link: "/conda-store-ui/introduction",
+		description: (
+			<>
+				User-friendly frontend to access conda-store features in a React
+				application
+			</>
+		),
+	},
+	{
+		title: "🪐 JupyterLab extension",
+		link: "/jupyterlab-conda-store/introduction",
+		description: (
+			<>JupyterLab interface that provides conda-store-ui frontend</>
+		),
+	},
 ];
 
 const FeatureList = [
-  {
-    title: "🧶 Flexible & Intuitive UI",
-    description: (
-      <>
-        Create, update, and manage environments using a user-friendly graphical
-        UI or YAML editor, available from within JupyterLab or standalone.
-      </>
-    ),
-  },
-  {
-    title: "📋 Reproducible Artifacts",
-    description: (
-      <>
-        Share fully-reproducible environments with auto-generated artifacts like
-        lockfiles, YAML files, and tarballs.
-      </>
-    ),
-  },
-  {
-    title: "🌱 Free and Open Source",
-    description: (
-      <>
-        A part of the conda (incubator) community, conda-store tools are built
-        using OSS libraries and developed under a permissive license.
-      </>
-    ),
-  },
-  {
-    title: "🔀 Version Controlled",
-    description: (
-      <>
-        Reference or use previous versions or artifacts of your environments
-        with automatic version-control.
-      </>
-    ),
-  },
-  {
-    title: "⚖️ Role-based Access Control",
-    description: (
-      <>
-        Admins can manage users or teams and approve packages and channels to
-        maintain organizational standards.
-      </>
-    ),
-  },
-  {
-    title: "💻 System Agnostic",
-    description: (
-      <>
-        Run conda-store on any major cloud provider, on-prem, or on local
-        machines.
-      </>
-    ),
-  },
+	{
+		title: "🧶 Flexible & Intuitive UI",
+		description: (
+			<>
+				Create, update, and manage environments using a user-friendly graphical
+				UI or YAML editor, available from within JupyterLab or standalone.
+			</>
+		),
+	},
+	{
+		title: "📋 Reproducible Artifacts",
+		description: (
+			<>
+				Share fully-reproducible environments with auto-generated artifacts like
+				lockfiles, YAML files, and tarballs.
+			</>
+		),
+	},
+	{
+		title: "🌱 Free and Open Source",
+		description: (
+			<>
+				A part of the conda (incubator) community, conda-store tools are built
+				using OSS libraries and developed under a permissive license.
+			</>
+		),
+	},
+	{
+		title: "🔀 Version Controlled",
+		description: (
+			<>
+				Reference or use previous versions or artifacts of your environments
+				with automatic version-control.
+			</>
+		),
+	},
+	{
+		title: "⚖️ Role-based Access Control",
+		description: (
+			<>
+				Admins can manage users or teams and approve packages and channels to
+				maintain organizational standards.
+			</>
+		),
+	},
+	{
+		title: "💻 System Agnostic",
+		description: (
+			<>
+				Run conda-store on any major cloud provider, on-prem, or on local
+				machines.
+			</>
+		),
+	},
 ];
 
 function Project({ Svg, title, description, link }) {
-  return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center padding--md">
-        <h2>{title}</h2>
-        <p>{description}</p>
-        <a href={link}> Learn more →</a>
-      </div>
-    </div>
-  );
+	return (
+		<div className={clsx("col col--4")}>
+			<div className="text--center padding--md">
+				<h2>{title}</h2>
+				<p>{description}</p>
+				<a href={link}> Learn more →</a>
+			</div>
+		</div>
+	);
 }
 
 function HomepageProjects() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {ProjectsList.map((props, idx) => (
-            <Project key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<section className={styles.features}>
+			<div className="container">
+				<div className="row">
+					{ProjectsList.map((props, idx) => (
+						<Project key={props.link} {...props} />
+					))}
+				</div>
+			</div>
+		</section>
+	);
 }
 
 function Feature({ Svg, title, description }) {
-  return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center padding--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
+	return (
+		<div className={clsx("col col--4")}>
+			<div className="text--center padding--md">
+				<h3>{title}</h3>
+				<p>{description}</p>
+			</div>
+		</div>
+	);
 }
 
 function HomepageFeatures() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <section className={clsx(styles.features, "hero hero--primary")}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<section className={clsx(styles.features, "hero hero--primary")}>
+			<div className="container">
+				<div className="row">
+					{FeatureList.map((props, idx) => (
+						<Feature key={props.title} {...props} />
+					))}
+				</div>
+			</div>
+		</section>
+	);
 }
 
 function HomepageVideo() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx(styles.heroBanner)}>
-      <div className="container">
-        <img
-          src={useBaseUrl("/img/conda-store-ui.webp")}
-          className={styles.video}
-        />
-        <br></br>
-      </div>
-    </header>
-  );
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<header className={clsx(styles.heroBanner)}>
+			<div className="container">
+				<img
+					src={useBaseUrl("/img/conda-store-ui.webp")}
+					className={styles.video}
+					alt="An animated webp showing the conda-store UI and some of its major features."
+				/>
+				<br />
+			</div>
+		</header>
+	);
 }
 
 export default function Home() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <Layout title="Homepage" description={`${siteConfig.tagline}`}>
-      <HomepageHeader />
-      <main>
-        <HomepageProjects />
-        <HomepageFeatures />
-        <HomepageVideo />
-      </main>
-    </Layout>
-  );
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<Layout title="Homepage" description={`${siteConfig.tagline}`}>
+			<HomepageHeader />
+			<main>
+				<HomepageProjects />
+				<HomepageFeatures />
+				<HomepageVideo />
+			</main>
+		</Layout>
+	);
 }
diff --git a/docusaurus-docs/src/pages/index.module.css b/docusaurus-docs/src/pages/index.module.css
index 051daf6a3..f0f4be9d3 100644
--- a/docusaurus-docs/src/pages/index.module.css
+++ b/docusaurus-docs/src/pages/index.module.css
@@ -9,35 +9,35 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+	padding: 4rem 0;
+	text-align: center;
+	position: relative;
+	overflow: hidden;
 }
 
 @media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+	.heroBanner {
+		padding: 2rem;
+	}
 }
 
 .buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
 }
 
 .logo {
-  max-width: 15%;
+	max-width: 15%;
 }
 
 .video {
-  width: 80%;
+	width: 80%;
 }