import { defineConfig } from "astro/config";

import react from "@astrojs/react";
import sitemap from "@astrojs/sitemap";
import icon from "astro-icon";

import { rehypeHeadingIds } from "@astrojs/markdown-remark";
import remarkCallout from "@r4ai/remark-callout";
import expressiveCode from "astro-expressive-code";
import rehypeDocument from "rehype-document";
import rehypeExternalLinks from "rehype-external-links";
import rehypeKatex from "rehype-katex";
import rehypePrettyCode from "rehype-pretty-code";
import remarkEmoji from "remark-emoji";
import remarkMath from "remark-math";
import remarkSectionize from "remark-sectionize";

import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";

import tailwindcss from "@tailwindcss/vite";
import umami from "@yeskunall/astro-umami";

import partytown from "@astrojs/partytown";

export default defineConfig({
	site: "https://blog.z0x.ca",
	integrations: [
		expressiveCode({
			themes: ["github-light", "github-dark"],
			plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
			useDarkModeMediaQuery: false,
			themeCssSelector: (theme) => `.${theme.name.split("-")[1]}`,
			defaultProps: {
				wrap: true,
				collapseStyle: "collapsible-auto",
				overridesByLang: {
					"ansi,bat,bash,batch,cmd,console,powershell,ps,ps1,psd1,psm1,sh,shell,shellscript,shellsession,text,zsh":
						{
							showLineNumbers: false,
						},
				},
			},
			styleOverrides: {
				borderColor: "var(--border)",
				codeFontFamily: "var(--font-mono)",
				codeBackground:
					"color-mix(in oklab, var(--secondary) 25%, transparent)",
				frames: {
					editorActiveTabForeground: "var(--muted-foreground)",
					editorActiveTabBackground:
						"color-mix(in oklab, var(--secondary) 25%, transparent)",
					editorActiveTabIndicatorBottomColor: "transparent",
					editorActiveTabIndicatorTopColor: "transparent",
					editorTabBarBackground: "transparent",
					editorTabBarBorderBottomColor: "transparent",
					frameBoxShadowCssValue: "none",
					terminalBackground:
						"color-mix(in oklab, var(--secondary) 25%, transparent)",
					terminalTitlebarBackground: "transparent",
					terminalTitlebarBorderBottomColor: "transparent",
					terminalTitlebarForeground: "var(--muted-foreground)",
				},
				lineNumbers: {
					foreground: "var(--muted-foreground)",
				},
				uiFontFamily: "var(--font-sans)",
			},
		}),
		react(),
		sitemap(),
		icon(),
		umami({
			id: "b691181e-cad7-4c23-b16a-709872a0a7ab",
			endpointUrl: "https://umami.z0x.ca",
			withPartytown: true,
		}),
		partytown(),
	],
	vite: {
		plugins: [tailwindcss()],
	},
	server: {
		host: true,
	},
	devToolbar: {
		enabled: false,
	},
	markdown: {
		syntaxHighlight: false,
		rehypePlugins: [
			[
				rehypeDocument,
				{
					css: "https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css",
				},
			],
			[
				rehypeExternalLinks,
				{
					target: "_blank",
					rel: ["nofollow", "noreferrer", "noopener"],
				},
			],
			rehypeHeadingIds,
			rehypeKatex,
			[
				rehypePrettyCode,
				{
					theme: {
						light: "github-light",
						dark: "github-dark",
					},
				},
			],
		],
		remarkPlugins: [remarkMath, remarkEmoji, remarkSectionize, remarkCallout],
	},
});