css.js

import { read, write, fs, path } from "./node_utils.js";
import subsetFont from "subset-font";
const config = read("./pages/config.json");

async function downloadAndSubset(fontUrl, fontPath) {
  try {
    console.log(`Fetching CSS from: ${fontUrl}`);
    const cssResponse = await fetch(fontUrl);
    const cssText = await cssResponse.text();

    const ttfUrl = cssText.match(/url\((.*?)\)/)[1].replace(/['"]/g, "");

    const fontResponse = await fetch(ttfUrl);
    const arrayBuffer = await fontResponse.arrayBuffer();
    const inputBuffer = Buffer.from(arrayBuffer);

    fs.writeFileSync(fontPath, inputBuffer);

    let characters = "";
    for (let i = 32; i <= 255; i++) characters += String.fromCharCode(i);

    const subsetBuffer = await subsetFont(inputBuffer, characters, {
      targetFormat: "woff2",
    });

    // Use the specific filename passed in
    fs.writeFileSync(fontPath, subsetBuffer);
    console.log(`Saved: ${fontPath}`);
  } catch (e) {
    console.log(e);
  }
}

function camelCase(str) {
  return str
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join("");
}

export async function getFontCSS(theme) {
  const fonts = [theme.headingFont, theme.bodyFont];
  let preloads = [];

  for (const fontName of fonts) {
    const fileName = `${camelCase(fontName)}.woff2`;
    const fontPath = `./docs/public/${fileName}`;

    if (!fs.existsSync(fontPath)) {
      // Corrected the URL construction
      const googleUrl = `https://fonts.googleapis.com/css2?family=${fontName.replace(/\s+/g, "+")}&subset=latin,latin-ext&display=swap`;
      await downloadAndSubset(googleUrl, fontPath);
    }

    preloads.push(["link", { rel: "preload", href: `/${fileName}`, as: "font", type: "font/woff2", crossorigin: "" }]);
  }

  return { preloads };
}

const getHue = (hex) => {
  try {
    const r = parseInt(hex.slice(1, 3), 16) / 255;
    const g = parseInt(hex.slice(3, 5), 16) / 255;
    const b = parseInt(hex.slice(5, 7), 16) / 255;
    const max = Math.max(r, g, b),
      min = Math.min(r, g, b),
      d = max - min;
    if (d === 0) return 0;
    let h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
    return h * 60;
  } catch (e) {
    return 0;
  }
};

export async function printCSS() {
  let css = `/* AUTOGENERATED, DO NOT EDIT MANUALLY, SEE css.js */
@import "tailwindcss";
@plugin "@tailwindcss/typography";


@theme {
  /* === Your core parameters === */
  --font-body: '${config.theme.bodyFont}', sans-serif;
  --font-heading: '${config.theme.headingFont}', sans-serif;
  --color-accent: ${config.theme.accentColor};
  --color-primary: ${config.theme.accentPrimary};
  --accent-angle: ${getHue(config.theme.accentColor)}deg;
  --primary-angle: ${getHue(config.theme.primaryColor)}deg;

    
    /* Apply directly to Tailwind font vars */
    --font-sans: var(--font-body);
    --font-display: var(--font-heading);
  }


  @font-face {
    font-family: '${config.theme.bodyFont}';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/${camelCase(config.theme.bodyFont)}.woff2);
  }

  @font-face {
    font-family: '${config.theme.headingFont}';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/${camelCase(config.theme.headingFont)}.woff2);
  }

/* You can also include other global styles */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

.legal * {
  opacity: 1 !important;          /* fully visible */
  color: black !important;
  transform: scale(1) rotate(0) translate(0)  !important; /* no scaling or translation */
}

@keyframes scrolled {
  to {
    opacity: 1;          /* fully visible */
    transform: scale(1) rotate(0) translate(0); /* no scaling or translation */
  }
}\n\n`;

  config.theme.styles?.forEach(({ selector, cssClass, scroll }) => {
    if (scroll) {
      css += `${selector} {
  ${cssClass};
  animation: scrolled linear both;
  animation-timeline: view();
  animation-range: entry 30% cover 30%;
}\n\n`;
    } else {
      css += `${selector} {  ${cssClass}; }\n\n`;
    }
  });

  const baseDir = path.resolve("");

  fs.writeFileSync(baseDir + "/docs/.vitepress/theme/style.css", css, "utf8");
}