feat(dory): fix up mermaid colors

Author: hkdeman

docs/features.mdx

@@ -32,6 +32,32 @@ description: 'Overview of available components and features'
 ```
 # Heading 6
 
+<br />
+
+## Lists Examples
+
+```mdx
+- List item 1
+- List item 2
+- List item 3
+```
+
+- List item 1
+- List item 2
+- List item 3
+
+```mdx
+1. List item 1
+2. List item 2
+3. List item 3
+```
+
+1. List item 1
+2. List item 2
+3. List item 3
+
+
+
 <br />
 
 ### Images
@@ -79,6 +105,89 @@ function example() {
 
 ## Interactive Components
 
+### Mermaid
+
+```mdx
+mermaid
+graph TD
+
+  %% Main Start
+  Start([Start Process]) --> Validate[Validate Input]
+
+  %% Decision Point
+  Validate -->|Valid| ProcessData{Is Data Clean?}
+  Validate -->|Invalid| Error[Show Error Message]
+
+  %% Clean Data Branch
+  ProcessData -->|Yes| Clean[Clean Data]
+  Clean --> Analyze[Analyze Data]
+
+  %% Dirty Data Branch
+  ProcessData -->|No| Notify[Notify User]
+  Notify --> Wait[Wait for Input]
+  Wait --> Validate
+
+  %% Parallel Branches After Analysis
+  Analyze --> Split1 & Split2
+
+  subgraph Parallel Tasks
+    Split1[Generate Report] --> Merge
+    Split2[Update Dashboard] --> Merge
+  end
+
+  Merge --> Decision2{Is More Input Needed?}
+  Decision2 -->|Yes| WaitMore[Wait for More Input]
+  WaitMore --> Validate
+  Decision2 -->|No| End([End Process])
+
+  %% Style and Class Definitions
+  classDef decision fill:#f9f,stroke:#333,stroke-width:2px;
+  class ProcessData,Decision2 decision;
+
+```
+
+<strong>
+<p>Note: Mermaid should be inside a code block with type "mermaid"</p>
+</strong>
+
+```mermaid
+graph TD
+
+  %% Main Start
+  Start([Start Process]) --> Validate[Validate Input]
+
+  %% Decision Point
+  Validate -->|Valid| ProcessData{Is Data Clean?}
+  Validate -->|Invalid| Error[Show Error Message]
+
+  %% Clean Data Branch
+  ProcessData -->|Yes| Clean[Clean Data]
+  Clean --> Analyze[Analyze Data]
+
+  %% Dirty Data Branch
+  ProcessData -->|No| Notify[Notify User]
+  Notify --> Wait[Wait for Input]
+  Wait --> Validate
+
+  %% Parallel Branches After Analysis
+  Analyze --> Split1 & Split2
+
+  subgraph Parallel Tasks
+    Split1[Generate Report] --> Merge
+    Split2[Update Dashboard] --> Merge
+  end
+
+  Merge --> Decision2{Is More Input Needed?}
+  Decision2 -->|Yes| WaitMore[Wait for More Input]
+  WaitMore --> Validate
+  Decision2 -->|No| End([End Process])
+
+  %% Style and Class Definitions
+  classDef decision fill:#f9f,stroke:#333,stroke-width:2px;
+  class ProcessData,Decision2 decision;
+
+```
+
 ### Accordion
 
 ```mdx
@@ -203,6 +312,20 @@ function example() {
   This is an expandable section that can be toggled.
 </Expandable>
 
+### Source
+
+```mdx
+<Source url="https://github.com/clidey/dory" paths={[
+  { path: "src/mdx/source.tsx", range: "1-46" },
+  { path: "docs/features.mdx", range: "318-322" },
+]} />
+```
+
+<Source url="https://github.com/clidey/dory" paths={[
+  { path: "src/mdx/source.tsx", range: "1-46" },
+  { path: "docs/features.mdx", range: "318-322" },
+]} />
+
 <br />
 <br />
 <br />

src/components/routes.tsx

@@ -72,6 +72,11 @@ export default function Routes() {
     }
   }, [routes, pathname]);
 
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [pathname]);
+  
+
   if (loading) return <div className="h-[25vh] flex grow"><Loading /></div>;
 
   return (

src/mdx/list.tsx

@@ -4,4 +4,4 @@ export const UnorderedList = (props: JSX.IntrinsicElements['ul']) => <ul classNa
 
 export const OrderedList = (props: JSX.IntrinsicElements['ol']) => <ol className="list-decimal list-inside" {...props} />;
 
-export const ListItem = (props: JSX.IntrinsicElements['li']) => <li className="ml-4 mb-1" {...props} />;
+export const ListItem = (props: JSX.IntrinsicElements['li']) => <li className="ml-4 mt-2" {...props} />;

src/mdx/mdx.tsx

@@ -14,6 +14,7 @@ export { Steps, Step } from './step';
 export { Table as table, Th as th, Td as td } from './table';
 export { UnorderedList as ul, OrderedList as ol, ListItem as li } from './list';
 export { APIPlayground } from './api-playground';
+export { Source } from './source';
 
 export const wrapper = ({ children }: { children: preact.ComponentChildren }) => {
   return <div className="flex flex-col w-full">{children}</div>;

src/mdx/mermaid.tsx

@@ -34,14 +34,16 @@ export function MermaidRenderer({ content }: { content: string }) {
                         rankSpacing: 80,      // vertical spacing between layers
                         padding: 20,
                         useMaxWidth: true,
-                    }
+                    },
                 })
 
                 if (mermaidRef.current) {
                     mermaidRef.current.innerHTML = ''
                 }
 
-                const { svg } = await mermaid.render(diagramId, content)
+                const contentWithoutStyle = content.replace(/classDef.*\n.*class.*\n/, '')
+
+                const { svg } = await mermaid.render(diagramId, contentWithoutStyle)
 
                 if (mounted && mermaidRef.current) {
                     mermaidRef.current.innerHTML = svg

src/mdx/source.tsx

@@ -0,0 +1,46 @@
+type PathRange = {
+    path: string;
+    range: string;
+};
+
+type SourceProps = {
+    url: string;
+    paths: PathRange[];
+};
+
+export const Source = ({ url, paths }: SourceProps) => {
+    const createSourceUrl = (path: string, range: string) => {
+        const [start, end] = range.split('-');
+
+        if (url.includes('github.com')) {
+            return `${url}/blob/main/${path}#L${start}${end ? `-L${end}` : ''}`;
+        } else if (url.includes('bitbucket.org')) {
+            return `${url}/src/main/${path}#lines-${start}${end ? `:${end}` : ''}`;
+        } else if (url.includes('gitlab.com')) {
+            return `${url}/-/blob/main/${path}#L${range.replace('-', '-')}`;
+        }
+
+        return url;
+    };
+
+    return (
+        <div>
+            <p className="text-sm text-slate-900 dark:text-white">Sources:</p>
+            <ul className="list-none pl-0 flex flex-wrap gap-2 mt-2">
+                {paths.map(({ path, range }) => (
+                    <li key={path + range}>
+                        <a
+                            href={createSourceUrl(path, range)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="rounded px-3 py-1 font-mono text-sm text-slate-700 dark:text-slate-400 hover:opacity-80 transition-colors border border-slate-200 dark:border-slate-700"
+                        >
+                            {path}
+                            <span className="ml-2 opacity-70">{range}</span>
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};

src/mdx/text.tsx

@@ -7,15 +7,15 @@ export const h1 = function H1(props: preact.JSX.HTMLAttributes<HTMLHeadingElemen
 }
 
 export const h2 = function H2(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
-  return <h2 className="text-3xl font-bold mb-3 mt-8" {...props} />
+  return <h2 className="text-3xl font-bold mb-3 mt-10" {...props} />
 }
 
 export const h3 = function H3(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
-  return <h3 className="text-2xl font-bold mb-2" {...props} />
+  return <h3 className="text-2xl font-bold mb-2 mt-8" {...props} />
 }
 
 export const h4 = function H4(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
-  return <h4 className="text-xl font-bold mb-2" {...props} />
+  return <h4 className="text-xl font-bold mb-2 mt-6" {...props} />
 }
 
 export const h5 = function H5(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
@@ -27,7 +27,7 @@ export const h6 = function H6(props: preact.JSX.HTMLAttributes<HTMLHeadingElemen
 }
 
 export const p = function P(props: preact.JSX.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className="mb-2" {...props} />
+  return <p className="mb-2 inline-block" {...props} />
 }
 
 export function Row({ children, cols = 1 }: { children: preact.ComponentChildren, cols?: number }) {