|
| 1 | +/** |
| 2 | + * Per-route HTML and a sitemap, written after the Vite build. |
| 3 | + * |
| 4 | + * The app renders in the browser, so every route would otherwise be served the |
| 5 | + * same index.html carrying the home page's title and description. Google |
| 6 | + * executes JavaScript and would eventually see the right ones, but WhatsApp, |
| 7 | + * Facebook, X and most other link unfurlers do not run it at all -- they read |
| 8 | + * the HTML as served and stop. Sharing niteshacars.in/tariff would preview as |
| 9 | + * the home page. |
| 10 | + * |
| 11 | + * So each route gets its own directory with its own index.html: same bundle, |
| 12 | + * same markup, but title, description, canonical and og: tags rewritten. Pages |
| 13 | + * serves /tariff/ from /tariff/index.html, and a request for /tariff without |
| 14 | + * the slash is redirected to it. |
| 15 | + * |
| 16 | + * dist/404.html stays a copy of the root page: it is what Pages serves for |
| 17 | + * anything unmatched, and the router resolves the URL once the app boots. |
| 18 | + */ |
| 19 | +import { readFileSync, writeFileSync, mkdirSync, copyFileSync } from 'node:fs'; |
| 20 | +import { join } from 'node:path'; |
| 21 | + |
| 22 | +const root = join(import.meta.dirname, '..'); |
| 23 | +const dist = join(root, 'dist'); |
| 24 | +const seo = JSON.parse(readFileSync(join(root, 'src/data/seo.json'), 'utf8')); |
| 25 | +const template = readFileSync(join(dist, 'index.html'), 'utf8'); |
| 26 | + |
| 27 | +/** Replace the content of a meta/title/canonical tag, leaving the rest alone. */ |
| 28 | +function rewrite(html, { title, description, url }) { |
| 29 | + return html |
| 30 | + .replace(/<title>[\s\S]*?<\/title>/, `<title>${title}</title>`) |
| 31 | + .replace( |
| 32 | + /(<meta\s+name="description"\s+content=")[\s\S]*?(")/, |
| 33 | + `$1${description}$2`, |
| 34 | + ) |
| 35 | + .replace( |
| 36 | + /(<link\s+rel="canonical"\s+href=")[^"]*(")/, |
| 37 | + `$1${url}$2`, |
| 38 | + ) |
| 39 | + .replace( |
| 40 | + /(<meta\s+property="og:title"\s+content=")[\s\S]*?(")/, |
| 41 | + `$1${title}$2`, |
| 42 | + ) |
| 43 | + .replace( |
| 44 | + /(<meta\s+property="og:description"\s+content=")[\s\S]*?(")/, |
| 45 | + `$1${description}$2`, |
| 46 | + ) |
| 47 | + .replace( |
| 48 | + /(<meta\s+property="og:url"\s+content=")[^"]*(")/, |
| 49 | + `$1${url}$2`, |
| 50 | + ); |
| 51 | +} |
| 52 | + |
| 53 | +const escape = (s) => |
| 54 | + s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); |
| 55 | + |
| 56 | +let written = 0; |
| 57 | +for (const route of seo.routes) { |
| 58 | + const url = seo.site.origin + route.path; |
| 59 | + const html = rewrite(template, { |
| 60 | + title: escape(route.title), |
| 61 | + description: escape(route.description), |
| 62 | + url, |
| 63 | + }); |
| 64 | + |
| 65 | + if (route.path === '/') { |
| 66 | + writeFileSync(join(dist, 'index.html'), html); |
| 67 | + } else { |
| 68 | + const dir = join(dist, route.path.replace(/^\//, '')); |
| 69 | + mkdirSync(dir, { recursive: true }); |
| 70 | + writeFileSync(join(dir, 'index.html'), html); |
| 71 | + } |
| 72 | + written++; |
| 73 | +} |
| 74 | + |
| 75 | +// The SPA fallback must carry the root page's tags, not the last route's. |
| 76 | +copyFileSync(join(dist, 'index.html'), join(dist, '404.html')); |
| 77 | + |
| 78 | +const today = new Date().toISOString().slice(0, 10); |
| 79 | +const sitemap = |
| 80 | + '<?xml version="1.0" encoding="UTF-8"?>\n' + |
| 81 | + '<urlset xmlns="http://www.sitemap.org/schemas/sitemap/0.9">\n'.replace( |
| 82 | + 'www.sitemap.org', |
| 83 | + 'www.sitemaps.org', |
| 84 | + ) + |
| 85 | + seo.routes |
| 86 | + .map( |
| 87 | + (r) => |
| 88 | + ` <url>\n <loc>${seo.site.origin}${r.path}</loc>\n` + |
| 89 | + ` <lastmod>${today}</lastmod>\n` + |
| 90 | + ` <priority>${r.priority}</priority>\n </url>`, |
| 91 | + ) |
| 92 | + .join('\n') + |
| 93 | + '\n</urlset>\n'; |
| 94 | + |
| 95 | +writeFileSync(join(dist, 'sitemap.xml'), sitemap); |
| 96 | + |
| 97 | +console.log( |
| 98 | + `prerender-seo: ${written} routes, plus sitemap.xml and the 404 fallback`, |
| 99 | +); |
0 commit comments