refactor: swap to generic {{ include }} tags

kinda makes more sense as theyre kinda context aware now

pancakz-v3-beam/vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
 import { readFileSync } from 'fs'
-import { basename, extname, join } from 'path'
+import { join } from 'path'
 import { minify } from 'html-minifier-next'
 import { buildSync } from 'esbuild'
 
@@ -51,13 +51,9 @@ export default defineConfig({
         {
             name: 'html-generator',
             transformIndexHtml(html, _) {
-                html = html.replaceAll(/{{ include-b64 '(.*?)' '(.*?)' }}/g, (_, mime: string, filepath: string) => {
-                    const content = readFileSync(join(ROOT, filepath), 'base64')
-                    return `data:${mime};base64,${content}`
-                })
-
-                html = html.replaceAll(/{{ include-tag '(.*?)' '(.*?)' }}/g, (_, tag: string, filepath: string) => {
-                    if (tag === 'script' && filepath.endsWith('.ts')) {
+                html = html.replaceAll(/{{ include '(.*?)' '(.*?)' }}/g, (_, metadata: string, filepath: string) => {
+                    // Transpile typescript and bundle dependencies
+                    if (filepath.endsWith('.ts')) {
                         const result = buildSync({
                             entryPoints: [join(ROOT, filepath)],
                             bundle: true,
@@ -65,28 +61,24 @@ export default defineConfig({
                             format: 'esm',
                             target: 'es2023',
                         })
-                        return `<script>window.addEventListener('load',()=>{${result.outputFiles[0].text}})</script>`
-                    } else {
-                        const content = readFileSync(join(ROOT, filepath), 'utf8')
-                        return `<${tag}>\n${content}</${tag}>`
+                        return `<script>window.addEventListener('load',()=>{${result.outputFiles[0].text};})</script>`
                     }
-                })
 
-                html = html.replaceAll(/{{ include-article '(.*?)' }}/g, (_, filepath: string) => {
-                    const id = basename(filepath).slice(0, -extname(filepath).length)
-                    const content = readFileSync(join(ROOT, filepath), 'utf8').replaceAll(
-                        /<pre([^>]*)>\s*\n([\s\S]*?)<\/pre>/g,
-                        (_, attributes, inner) => {
-                            const lines = inner.split('\n')
-                            const indent = lines[0].match(/^(\s*)/)?.[1].length ?? 0
-                            const trimmed = lines
-                                .map((l: string) => l.slice(indent))
-                                .join('\n')
-                                .trim()
-                            return `<pre${attributes}>${trimmed}</pre>`
-                        },
-                    )
-                    return `<template class="article" id="${id}">\n${content}</template>`
+                    // Embed as JSON string
+                    if (filepath.endsWith('.json')) {
+                        const content = readFileSync(join(ROOT, filepath), 'utf8')
+                        return `<script type="application/json" id="${metadata}">\n${content}</script>`
+                    }
+
+                    // Embed as Base64 URI
+                    if (['.png', '.gif'].find((ext) => filepath.endsWith(ext))) {
+                        const content = readFileSync(join(ROOT, filepath), 'base64')
+                        return `data:${metadata};base64,${content}`
+                    }
+
+                    // Generic tag generator
+                    const content = readFileSync(join(ROOT, filepath), 'utf8')
+                    return `<${metadata}>\n${content}</${metadata}>`
                 })
 
                 return minify(html, {