tech-leadership/astro.config.mjs at main · carlsendk/tech-leadership · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import mdx from '@astrojs/mdx';
import alpinejs from '@astrojs/alpinejs';
import remarkToc from 'remark-toc';
import remarkFixInternalLinks from './src/plugins/remark-fix-internal-links.js';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeMermaid from 'rehype-mermaid';
import addMermaidClass from './src/plugins/add-mermaid-class.js';

// Common configuration for markdown processing
const markdownConfig = {
  syntaxHighlight: {
    type: 'shiki',
    excludeLangs: ['mermaid'],  // Exclude mermaid from syntax highlighting
  },
  remarkPlugins: [
    [remarkToc, { heading: "Contents" }],
    remarkFixInternalLinks,
  ],
  rehypePlugins: [
    addMermaidClass,  // 1. restore <pre class="mermaid">
    [rehypeMermaid, {
      strategy: 'inline-svg',
      mermaidConfig: {
        startOnLoad: false,
        securityLevel: 'loose',
        fontFamily: 'Inter, system-ui, sans-serif',
        theme: 'base',
        // Use neutral theme for pre-rendering - client will override with custom colors
        themeVariables: {
          primaryColor: '#64748b',
          primaryTextColor: '#1e293b',
          primaryBorderColor: '#64748b',
          mainBkg: '#ffffff',
          nodeBkg: '#f8fafc',
          clusterBkg: '#f1f5f9',
          nodeTextColor: '#1e293b',
          lineColor: '#64748b'
        },
        flowchart: {
          curve: 'basis',
          padding: 20,
          useMaxWidth: true,
          htmlLabels: true,
          diagramPadding: 8,
          nodeSpacing: 50,
          rankSpacing: 50,
        },
      },
      launchOptions: {
        args: ['--no-sandbox'],
        headless: true
      }
    }],
    rehypeSlug,
    [rehypeAutolinkHeadings, { behavior: 'append' }]
  ],
};

export default defineConfig({
  site: 'https://carlsendk.github.io',
  base: '/tech-leadership',
  trailingSlash: 'always',
  output: 'static',
  build: {
    format: 'directory',
  },
  integrations: [
    tailwind(),
    mdx({
      ...markdownConfig,
    }),
    alpinejs(),
  ],
  markdown: {
    ...markdownConfig,
    remarkPlugins: [
      [remarkToc, { heading: "Contents" }],
      remarkFixInternalLinks,
    ],
    rehypePlugins: [
      addMermaidClass,
      [rehypeMermaid, {
        strategy: 'inline-svg',
        mermaidConfig: {
          startOnLoad: false,
          securityLevel: 'loose',
          fontFamily: 'Inter, system-ui, sans-serif',
          theme: 'base',
          // Use neutral theme for pre-rendering - client will override with custom colors
          themeVariables: {
            primaryColor: '#64748b',
            primaryTextColor: '#1e293b',
            primaryBorderColor: '#64748b',
            mainBkg: '#ffffff',
            nodeBkg: '#f8fafc',
            clusterBkg: '#f1f5f9',
            nodeTextColor: '#1e293b',
            lineColor: '#64748b'
          },
          flowchart: {
            curve: 'basis',
            padding: 20,
            useMaxWidth: true,
            htmlLabels: true,
            diagramPadding: 8,
            nodeSpacing: 50,
            rankSpacing: 50,
          },
        }
      }],
      rehypeSlug,
      [rehypeAutolinkHeadings, { behavior: 'append' }]
    ],
  },
});