astro.config.ts

import type { Options as AutolinkHeadingsOptions } from "rehype-autolink-headings";
import type { Options as ExternalLinkOptions } from "rehype-external-links";
import mdx from "@astrojs/mdx";
import react from "@astrojs/react";
import sitemap from "@astrojs/sitemap";
import remarkSandpack from "@lekoarts/remark-sandpack";
import sentry from "@sentry/astro";
import tailwindcss from "@tailwindcss/vite";
import { imageService } from "@unpic/astro/service";
import expressiveCode from "astro-expressive-code";
import { defineConfig } from "astro/config";
import { toString } from "hast-util-to-string";
import { h, s } from "hastscript";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeExternalLinks from "rehype-external-links";
import remarkDirective from "remark-directive";
import remarkSmartypants from "remark-smartypants";
import { SITE } from "./src/constants";
import { rehypeSlugCompat } from "./src/lib/rehype-slug-compat";
import { remarkAsides } from "./src/remark";
import { pagefindIntegration } from "./src/utils";

import "dotenv/config";

export default defineConfig({
  output: "static",
  base: "/blog",
  trailingSlash: "never",
  site: SITE.url,
  integrations: [
    ...(process.env.NODE_ENV === "production"
      ? [
          sentry({
            telemetry: false,
            org: process.env.SENTRY_ORG,
            project: process.env.SENTRY_PROJECT,
            authToken: process.env.SENTRY_AUTH_TOKEN,
          }),
        ]
      : []),
    expressiveCode(),
    mdx(),
    sitemap(),
    pagefindIntegration(),
    react(),
  ],
  vite: {
    server: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    },
    preview: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    },
    ssr: {
      noExternal: [
        "react-spring-carousel",
        "react-spring",
        "@react-spring/web",
      ],
    },
    resolve: {
      dedupe: ["react", "react-dom"],
    },
    // Astro 6 config types come from Vite 7, but @tailwindcss/vite still exposes
    // a Vite 6 plugin type here, so we cast the plugin item to avoid a false-positive.
    plugins: tailwindcss().map((plugin) => plugin as any),
  },
  image: {
    service: imageService(),
  },
  devToolbar: {
    enabled: false,
  },
  markdown: {
    remarkPlugins: [
      // @ts-expect-error: Astro types don't match remark plugin
      [remarkSmartypants, { backticks: false }],
      remarkDirective,
      remarkAsides,
      [remarkSandpack, { componentName: ["Playground"] }],
    ],
    rehypePlugins: [
      rehypeSlugCompat,
      [
        rehypeExternalLinks,
        {
          target: "_blank",
          rel: ["nofollow"],
          content: { type: "text", value: " (opens in a new window)" },
          properties: { className: ["external_link"] },
          contentProperties: { className: ["sr-only"] },
        } satisfies ExternalLinkOptions,
      ],
      [
        rehypeAutolinkHeadings,
        {
          behavior: "after",
          group() {
            return h("div", {
              className:
                "group/heading relative block w-fit max-w-full after:absolute after:top-0 after:bottom-0 after:left-full after:w-[calc(var(--spacing)*9)] after:content-[''] after:pointer-events-none sm:w-auto sm:after:hidden sm:before:absolute sm:before:top-0 sm:before:bottom-0 sm:before:right-full sm:before:w-[calc(var(--spacing)*9)] sm:before:content-[''] sm:before:pointer-events-none",
            });
          },
          headingProperties() {
            return {
              tabIndex: -1,
              className:
                "focus:outline-none focus-visible:outline-none focus:shadow-none focus-visible:shadow-none",
            };
          },
          properties(node) {
            return {
              ariaLabel: `Permalink: ${toString(node)}`,
              className:
                "absolute left-full ml-1 top-1/2 z-10 flex h-[calc(var(--spacing)*6)] w-[calc(var(--spacing)*8)] -translate-y-1/2 cursor-pointer items-center justify-center opacity-0 transition-opacity duration-200 ease-in-out pointer-events-auto md:h-[calc(var(--spacing)*7)] md:w-[calc(var(--spacing)*10)] lg:h-[calc(var(--spacing)*8)] lg:w-[calc(var(--spacing)*11)] sm:left-[calc(-9*var(--spacing))] sm:ml-0 sm:pl-0 sm:pr-[calc(var(--spacing)*4)] group-hover/heading:opacity-100 group-focus-within/heading:opacity-100 group-active/heading:opacity-100 focus-visible:outline-none focus-visible:shadow-none focus-visible:rounded-none focus-visible:[&_.anchor-icon]:rounded-[0.375rem] focus-visible:[&_.anchor-icon]:shadow-[0_0_0_2px_var(--color-primary),0_0_0_4px_color-mix(in_srgb,var(--color-primary)_24%,transparent)]",
            };
          },
          content() {
            return h(
              "svg",
              {
                className:
                  "anchor-icon inline-block !overflow-visible align-text-bottom fill-current h-[calc(var(--spacing)*4)] w-[calc(var(--spacing)*4)] md:h-[calc(var(--spacing)*5)] md:w-[calc(var(--spacing)*5)] lg:h-[calc(var(--spacing)*6)] lg:w-[calc(var(--spacing)*6)]",
                viewBox: "0 0 16 16",
                ariaHidden: true,
              },
              [
                s("path", {
                  d: "m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z",
                }),
              ],
            );
          },
        } satisfies AutolinkHeadingsOptions,
      ],
    ],
  },
});