// @ts-check

import mdx from '@astrojs/mdx';
import react from '@astrojs/react';
import tailwindcss from '@tailwindcss/vite';
import expressiveCode from 'astro-expressive-code';
import { defineConfig } from 'astro/config';
import remarkToc from 'remark-toc';
import remarkCodeFile from './src/plugins/remarkCodeFile';
import rehypeMermaid from "rehype-mermaid";
import { icons } from "@iconify-json/material-symbols"


// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()]
  },

  integrations: [
    expressiveCode({
      themes: ["github-dark", "github-light"],
    }),
    mdx({
      remarkPlugins: [remarkToc, remarkCodeFile],
    }),
    react()
  ],

  markdown: {
    remarkPlugins: [remarkCodeFile],

    syntaxHighlight: {
      excludeLangs: ["mermaid"],
    },
    rehypePlugins: [
      [
        rehypeMermaid,
        {
          mermaindConfig: {
            registerIconPacks: [
              {
                name: icons.prefix,
                icons
              },
            ]
          },
          errorFallback: (element, diagram, error) => {
            console.error("Mermaid error:", error); // ターミナルにエラーを表示
            return { type: 'text', value: `Error: ${error.message}` };
          },

          securityLevel: "loose",
          strategy: "img-png",
        }
      ]
    ],
  },
});