Docs Revamp – Set up baseline themes (#23691)

## Summary & Motivation Sets up the dark and light mode themes -- this still needs some refactoring. Docs will now look right at home alongside the app UI <img width="1427" alt="image" src="https://github.com/user-attachments/assets/c4e71707-d0f1-4135-aaed-3853079b6b9e"> <img width="1424" alt="image" src="https://github.com/user-attachments/assets/ee9d600a-a332-4665-b78f-86c8ffa3df77">
dagster-io · Aug 15, 2024 · 1718a78 · 1718a78
1 parent 354c69f
commit 1718a78
Show file tree

Hide file tree

Showing 10 changed files with 647 additions and 388 deletions.
diff --git a/docs/docs-next/docusaurus.config.ts b/docs/docs-next/docusaurus.config.ts
@@ -3,166 +3,164 @@ import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 
 const config: Config = {
-  title: "Dagster Docs - Beta",
-  tagline:
-    "Dagster is a Python framework for building production-grade data platforms.",
-  url: "https://docs.dagster.io",
-  favicon: "img/favicon.ico",
+	title: "Dagster Docs - Beta",
+	tagline:
+		"Dagster is a Python framework for building production-grade data platforms.",
+	url: "https://docs.dagster.io",
+	favicon: "img/favicon.ico",
 
-  baseUrl: "/",
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "throw",
-  organizationName: "dagster",
-  projectName: "dagster",
-  markdown: {
-    mermaid: true,
-  },
-  themes: ["@docusaurus/theme-mermaid"],
-  i18n: { defaultLocale: "en", locales: ["en"] },
-  plugins: [
-    require.resolve("docusaurus-plugin-sass"),
-    require.resolve("docusaurus-plugin-image-zoom"),
-  ],
-  themeConfig: {
-    colorMode: {
-      defaultMode: "dark",
-      disableSwitch: false,
-      respectPrefersColorScheme: true,
-    },
-    prism: {
-      theme: prismThemes.github,
-      darkTheme: prismThemes.dracula,
-      additionalLanguages: ["diff", "json", "bash"],
-    },
-    zoom: {
-      selector: ".markdown > img, .tabs-container img ",
-      config: {
-        // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
-        background: {
-          light: "rgb(255, 255, 255)",
-          dark: "rgb(50, 50, 50)",
-        },
-      },
-    },
-    tableOfContents: {
-      minHeadingLevel: 2,
-      maxHeadingLevel: 4,
-    },
-    navbar: {
-      title: "Dagster Docs - Beta",
-      style: "dark",
-      logo: {
-        alt: "Dagster Logo",
-        src: "img/logo.svg",
-        href: "/",
-      },
-      items: [
-        {
-          label: "Docs",
-          type: "doc",
-          docId: "intro",
-          position: "left",
-        },
-        {
-          label: "Integrations",
-          type: "doc",
-          docId: "integrations",
-          position: "left",
-        },
-        {
-          label: "Dagster+",
-          type: "doc",
-          docId: "dagster-plus",
-          position: "left",
-        },
-        {
-          label: "References",
-          type: "doc",
-          docId: "api",
-          position: "left",
-        },
-        {
-          label: "Changelog",
-          type: "doc",
-          docId: "changelog",
-          position: "right",
-        },
-      ],
-    },
-    image: "img/docusaurus-social-card.jpg",
-    docs: {
-      sidebar: {
-        autoCollapseCategories: true,
-        hideable: true,
-      },
-    },
+	baseUrl: "/",
+	onBrokenLinks: "throw",
+	onBrokenMarkdownLinks: "throw",
+	organizationName: "dagster",
+	projectName: "dagster",
+	markdown: {
+		mermaid: true,
+	},
+	themes: ["@docusaurus/theme-mermaid"],
+	i18n: { defaultLocale: "en", locales: ["en"] },
+	plugins: [
+		require.resolve("docusaurus-plugin-sass"),
+		require.resolve("docusaurus-plugin-image-zoom"),
+	],
+	themeConfig: {
+		colorMode: {
+			defaultMode: "dark",
+			disableSwitch: false,
+			respectPrefersColorScheme: true,
+		},
+		prism: {
+			theme: prismThemes.github,
+			darkTheme: prismThemes.dracula,
+			additionalLanguages: ["diff", "json", "bash"],
+		},
+		zoom: {
+			selector: ".markdown > img, .tabs-container img ",
+			config: {
+				// options you can specify via https://github.com/francoischalifour/medium-zoom#usage
+				background: {
+					light: "rgb(255, 255, 255)",
+					dark: "rgb(50, 50, 50)",
+				},
+			},
+		},
+		tableOfContents: {
+			minHeadingLevel: 2,
+			maxHeadingLevel: 4,
+		},
+		navbar: {
+			logo: {
+				alt: "Dagster Logo",
+				src: "img/dagster-docs-logo.svg",
+				srcDark: "img/dagster-docs-logo-dark.svg",
+				href: "/",
+			},
+			items: [
+				{
+					label: "Docs",
+					type: "doc",
+					docId: "intro",
+					position: "left",
+				},
+				{
+					label: "Integrations",
+					type: "doc",
+					docId: "integrations",
+					position: "left",
+				},
+				{
+					label: "Dagster+",
+					type: "doc",
+					docId: "dagster-plus",
+					position: "left",
+				},
+				{
+					label: "References",
+					type: "doc",
+					docId: "api",
+					position: "left",
+				},
+				{
+					label: "Changelog",
+					type: "doc",
+					docId: "changelog",
+					position: "right",
+				},
+			],
+		},
+		image: "img/docusaurus-social-card.jpg",
+		docs: {
+			sidebar: {
+				autoCollapseCategories: true,
+				hideable: true,
+			},
+		},
 
-    footer: {
-      style: "dark",
-      logo: {
-        alt: "Dagster Logo",
-        src: "img/logo.svg",
-        href: "/",
-      },
-      links: [
-        {
-          title: "Docs",
-          items: [
-            {
-              label: "Docs",
-              to: "/",
-            },
-          ],
-        },
-        {
-          title: "Community",
-          items: [
-            {
-              label: "Stack Overflow",
-              href: "https://stackoverflow.com/questions/tagged/dagster",
-            },
-            {
-              label: "Twitter",
-              href: "https://twitter.com/dagster",
-            },
-          ],
-        },
-        {
-          title: "More",
-          items: [
-            {
-              label: "GitHub",
-              href: "https://github.com/dagster-io/dagster",
-            },
-          ],
-        },
-      ],
-      copyright: `Copyright © ${new Date().getFullYear()} Dagster Labs.`,
-    },
-  } satisfies Preset.ThemeConfig,
+		footer: {
+			logo: {
+				alt: "Dagster Logo",
+				src: "img/logo.svg",
+				href: "/",
+			},
+			links: [
+				{
+					title: "Docs",
+					items: [
+						{
+							label: "Docs",
+							to: "/",
+						},
+					],
+				},
+				{
+					title: "Community",
+					items: [
+						{
+							label: "Stack Overflow",
+							href: "https://stackoverflow.com/questions/tagged/dagster",
+						},
+						{
+							label: "Twitter",
+							href: "https://twitter.com/dagster",
+						},
+					],
+				},
+				{
+					title: "More",
+					items: [
+						{
+							label: "GitHub",
+							href: "https://github.com/dagster-io/dagster",
+						},
+					],
+				},
+			],
+			copyright: `Copyright © ${new Date().getFullYear()} Dagster Labs.`,
+		},
+	} satisfies Preset.ThemeConfig,
 
-  presets: [
-    [
-      "@docusaurus/preset-classic",
-      {
-        docs: {
-          sidebarPath: "./sidebars.ts",
-          routeBasePath: "/",
-          editUrl:
-            "https://github.com/dagster-io/dagster/tree/docs/revamp/docs/docs-next",
-        },
-        blog: false,
-        theme: {
-          customCss: [
-            require.resolve(
-              "./node_modules/modern-normalize/modern-normalize.css"
-            ),
-            require.resolve("./src/styles/custom.scss"),
-          ],
-        },
-      } satisfies Preset.Options,
-    ],
-  ],
+	presets: [
+		[
+			"@docusaurus/preset-classic",
+			{
+				docs: {
+					sidebarPath: "./sidebars.ts",
+					routeBasePath: "/",
+					editUrl:
+						"https://github.com/dagster-io/dagster/tree/docs/revamp/docs/docs-next",
+				},
+				blog: false,
+				theme: {
+					customCss: [
+						require.resolve(
+							"./node_modules/modern-normalize/modern-normalize.css"
+						),
+						require.resolve("./src/styles/custom.scss"),
+					],
+				},
+			} satisfies Preset.Options,
+		],
+	],
 };
 
 export default config;