website/astro.config.mjs at main · ghostdevv/website · 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
119
120
121
// @ts-check
import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
import { serendipity } from './src/lib/shiki/serendipity-shiki';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import { rehypeGithubAlerts } from 'rehype-github-alerts';
import expressiveCode from 'astro-expressive-code';
import cloudflare from '@astrojs/cloudflare';
import { defineConfig } from 'astro/config';
import { readFile } from 'node:fs/promises';
import rehypeWrap from 'rehype-wrap-all';
import icons from 'unplugin-icons/vite';
import sitemap from '@astrojs/sitemap';
import svelte from '@astrojs/svelte';
import { join } from 'node:path';
import mdx from '@astrojs/mdx';

/** @param {string} lang */
async function shikiLang(lang) {
	const path = join(
		import.meta.dirname,
		'./src/lib/shiki',
		`${lang}.tmLanguage.json`,
	);

	const data = await readFile(path, 'utf8');
	return JSON.parse(data);
}

// https://astro.build/config
export default defineConfig({
	integrations: [
		svelte(),
		sitemap(),
		expressiveCode({
			plugins: [pluginCollapsibleSections()],
			defaultProps: {
				collapseStyle: 'collapsible-auto',
				overridesByLang: {
					'bash,sh': {
						frame: 'code',
					},
				},
			},

			themes: [serendipity],
			shiki: {
				langs: [await shikiLang('caddyfile')],
			},

			useThemedScrollbars: false,
			useStyleReset: true,
			styleOverrides: {
				uiFontFamily: 'var(--font-family)',
				codeFontSize: 'var(--post-font-size)',
				codeFontFamily: "'Comic Mono', monospace",
				codeBackground: 'var(--background-secondary)',
				borderColor: 'transparent',
				borderWidth: '0px',
				frames: {
					frameBoxShadowCssValue: 'none',
					// code frame + title
					editorTabBarBackground: 'transparent',
					editorActiveTabBackground: 'var(--background-secondary)',
					editorActiveTabBorderColor: 'transparent',
					editorActiveTabIndicatorTopColor:
						'var(--background-secondary)',
					editorActiveTabIndicatorBottomColor: 'var(--primary)',
					editorActiveTabIndicatorHeight: '1px',
					// Copy Button
					tooltipSuccessBackground: 'var(--green)',
					inlineButtonBackground: 'var(--background-tertiary)',
					inlineButtonBackgroundHoverOrFocusOpacity: '1',
					inlineButtonBackgroundActiveOpacity: '1',
				},
				collapsibleSections: {
					openBackgroundColorCollapsible:
						'var(--background-tertiary)',
					closedBackgroundColor: 'var(--background-tertiary)',
				},
			},
		}),
		mdx(),
	],

	site: 'https://ghostdev.xyz/',

	adapter: cloudflare({ imageService: 'compile' }),
	output: 'static',
	trailingSlash: 'never',
	build: {
		format: 'file',
	},

	markdown: {
		gfm: true,
		syntaxHighlight: false,
		rehypePlugins: [
			rehypeGithubAlerts,
			[
				rehypeWrap,
				{
					wrapper: 'div.table-wrapper',
					selector: 'table',
				},
			],
		],
	},

	vite: {
		plugins: [
			icons({
				compiler: 'svelte',
				defaultStyle:
					'vertical-align: -.125em; transform-origin: center;',
				customCollections: {
					custom: FileSystemIconLoader('./src/lib/icons'),
				},
			}),
		],
	},
});