frontend/scripts/prerender.mjs

import { mkdirSync, readFileSync, writeFileSync } from 'fs';
import { join } from 'path';

const BUILD_DIR = 'build';
const BASE_URL = 'https://omaib-musprot.hf.space';
const template = readFileSync(join(BUILD_DIR, 'index.html'), 'utf-8');

const routes = [
  {
    path: '',
    title: 'MuSProt: Multistate Protein Structure Database',
    description:
      'Explore multistate protein structures, pairwise comparisons, energy scores, and functional annotations.',
  },
  {
    path: 'docs',
    title: 'MuSProt Documentation',
    description: 'MuSProt dataset format, SQLite schema, and usage examples.',
  },
];

for (const route of routes) {
  const canonical = `${BASE_URL}/${route.path}`;
  const head = [
    `<title>${route.title}</title>`,
    `<meta name="description" content="${route.description}" />`,
    `<link rel="canonical" href="${canonical}" />`,
    `<meta property="og:title" content="${route.title}" />`,
    `<meta property="og:description" content="${route.description}" />`,
    `<meta property="og:url" content="${canonical}" />`,
    `<meta property="og:site_name" content="MuSProt" />`,
  ].join('\n    ');

  const html = template
    .replace(/<title>[^<]*<\/title>/, '')
    .replace(/<meta\s+name="description"[^>]*\/?>/, '')
    .replace('</head>', `    ${head}\n  </head>`);

  const outputDir = route.path ? join(BUILD_DIR, route.path) : BUILD_DIR;
  mkdirSync(outputDir, { recursive: true });
  writeFileSync(join(outputDir, 'index.html'), html, 'utf-8');
}