kemono2/client/vite.config.mjs

// @ts-check
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import legacy from "@vitejs/plugin-legacy";
import ViteYaml from "@modyfi/vite-plugin-yaml";
import { viteStaticCopy } from "vite-plugin-static-copy";
import { createHtmlPlugin } from "vite-plugin-html";
import { patchCssModules } from 'vite-css-modules'
import {
  siteName,
  favicon,
  analyticsEnabled,
  analyticsCode,
  kemonoSite,
  sentryDSN,
  iconsPrepend,
  bannersPrepend,
  thumbnailsPrepend,
  artistsOrCreators,
  disableDMs,
  disableFAQ,
  disableFilehaus,
  sidebarItems,
  footerItems,
  bannerGlobal,
  bannerWelcome,
  homeBackgroundImage,
  homeMascotPath,
  homeLogoPath,
  homeWelcomeCredits,
  homeAnnouncements,
  paysiteList,
  headerAd,
  middleAd,
  footerAd,
  sliderAd,
  videoAd,
  isArchiveServerEnabled,
  apiServerBaseURL,
  apiServerPort,
  gitCommitHash,
  isFileServingEnabled,
  buildDate,
  AnnouncementBannerGlobal,
} from "./configs/vars.mjs";

export const baseConfig = defineConfig(async ({ command, mode }) => {
  /**
   * @type {import("vite").UserConfig}
   */
  const config = {
    plugins: [
      legacy({
        targets: ["defaults", "not IE 11"],
      }),
      patchCssModules({ exportMode: "named" }),
      ViteYaml(),
      // TODO: remove it after settling the static files situation
      // by using the vite option of copying public folder instead
      viteStaticCopy({
        structured: true,
        targets: [
          {
            src: "static",
            dest: "./",
          },
        ],
      }),
      createHtmlPlugin({
        entry: "./src/index.tsx",
        inject: {
          data: {
            title: siteName,
            analytics: !analyticsEnabled
              ? undefined
              : !analyticsCode
              ? undefined
              : atob(analyticsCode),
          },
          tags: [
            {
              tag: "link",
              attrs: {
                rel: "icon",
                href: favicon,
              },
              injectTo: "head",
            },
            {
              tag: "meta",
              attrs: {
                name: "og:type",
                content: "website",
              },
              injectTo: "head",
            },
            {
              tag: "meta",
              attrs: {
                name: "og:site_name",
                content: siteName,
              },
              injectTo: "head",
            },
            {
              tag: "meta",
              attrs: {
                name: "og:title",
                content: siteName,
              },
              injectTo: "head",
            },
            {
              tag: "meta",
              attrs: {
                name: "og:image",
                content: `${kemonoSite}/static/kemono-logo.svg`,
              },
              injectTo: "head",
            },
            {
              tag: "meta",
              attrs: {
                name: "og:image:width",
                content: "150",
              },
              injectTo: "head",
            },
            {
              tag: "meta",
              attrs: {
                name: "og:image:height",
                content: "150",
              },
              injectTo: "head",
            },
          ],
        },
      }),
      react(),
    ],
    define: {
      BUNDLER_ENV_KEMONO_SITE: JSON.stringify(kemonoSite),
      BUNDLER_ENV_SENTRY_DSN: JSON.stringify(sentryDSN),
      BUNDLER_ENV_SITE_NAME: JSON.stringify(siteName),
      BUNDLER_ENV_ICONS_PREPEND: JSON.stringify(iconsPrepend),
      BUNDLER_ENV_BANNERS_PREPEND: JSON.stringify(bannersPrepend),
      BUNDLER_ENV_THUMBNAILS_PREPEND: JSON.stringify(thumbnailsPrepend),
      BUNDLER_ENV_ARTISTS_OR_CREATORS: JSON.stringify(artistsOrCreators),
      BUNDLER_ENV_DISABLE_DMS: JSON.stringify(disableDMs),
      BUNDLER_ENV_DISABLE_FAQ: JSON.stringify(disableFAQ),
      BUNDLER_ENV_DISABLE_FILEHAUS: JSON.stringify(disableFilehaus),
      BUNDLER_ENV_SIDEBAR_ITEMS: JSON.stringify(sidebarItems),
      BUNDLER_ENV_FOOTER_ITEMS: JSON.stringify(footerItems),
      BUNDLER_ENV_BANNER_GLOBAL: JSON.stringify(bannerGlobal),
      BUNDLER_ENV_ANNOUNCEMENT_BANNER_GLOBAL: JSON.stringify(AnnouncementBannerGlobal),
      BUNDLER_ENV_BANNER_WELCOME: JSON.stringify(bannerWelcome),
      BUNDLER_ENV_HOME_BACKGROUND_IMAGE: JSON.stringify(homeBackgroundImage),
      BUNDLER_ENV_HOME_MASCOT_PATH: JSON.stringify(homeMascotPath),
      BUNDLER_ENV_HOME_LOGO_PATH: JSON.stringify(homeLogoPath),
      BUNDLER_ENV_HOME_WELCOME_CREDITS: JSON.stringify(homeWelcomeCredits),
      BUNDLER_ENV_HOME_ANNOUNCEMENTS: JSON.stringify(homeAnnouncements),
      BUNDLER_ENV_PAYSITE_LIST: JSON.stringify(paysiteList),
      BUNDLER_ENV_HEADER_AD: JSON.stringify(headerAd),
      BUNDLER_ENV_MIDDLE_AD: JSON.stringify(middleAd),
      BUNDLER_ENV_FOOTER_AD: JSON.stringify(footerAd),
      BUNDLER_ENV_SLIDER_AD: JSON.stringify(sliderAd),
      BUNDLER_ENV_VIDEO_AD: JSON.stringify(videoAd),
      BUNDLER_ENV_IS_ARCHIVER_ENABLED: JSON.stringify(isArchiveServerEnabled),
      BUNDLER_ENV_API_SERVER_BASE_URL: JSON.stringify(apiServerBaseURL),
      BUNDLER_ENV_API_SERVER_PORT: JSON.stringify(apiServerPort),
      BUNDLER_ENV_GIT_COMMIT_HASH: JSON.stringify(gitCommitHash),
      BUNDLER_ENV_BUILD_DATE: JSON.stringify(buildDate),
      BUNDLER_ENV_IS_FILE_SERVING_ENABLED: JSON.stringify(isFileServingEnabled),
    },
  };

  return config;
});