Project: Adding docs to Storybook

.storybook/main.ts

@@ -1,11 +1,22 @@
 import type { StorybookConfig } from "@storybook/html-vite";
+import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@jls-digital/storybook-addon-code",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
   framework: {
     name: "@storybook/html-vite",

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" type="image/png" href="https://cosmograph.app/img/favicon.png" />

.storybook/manager.ts

@@ -1,6 +1,14 @@
 import { addons } from '@storybook/manager-api';
-import { themes } from '@storybook/theming';
+import { create } from '@storybook/theming';
+
+const theme = create({
+  base: 'dark',
+  brandTitle: 'Cosmos',
+  brandUrl: 'https://cosmograph.app',
+  brandImage: 'https://github.com/user-attachments/assets/f1d7540e-7791-4c5c-9804-65b9d45acd7e',
+  brandTarget: '_self',
+});
 
 addons.setConfig({
-  theme: themes.dark,
+  theme,
 });

.storybook/preview.ts

@@ -1,6 +1,8 @@
 import type { Preview } from "@storybook/html";
 import { themes } from '@storybook/theming';
 
+import './style.css';
+
 const preview: Preview = {
   parameters: {
     layout: 'fullscreen',

.storybook/style.css

@@ -0,0 +1,3 @@
+tr:nth-of-type(2n) {
+  background-color: #1e2326;
+}