refactor: swap to generic {{ include }} tags

kinda makes more sense as theyre kinda context aware now
This commit is contained in:
2026-06-17 01:12:22 -07:00
parent e117d4cbcc
commit cee55012a5
8 changed files with 66 additions and 52 deletions
+3 -3
View File
@@ -5,11 +5,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#4D58FF">
<link rel="icon" href="{{ include-b64 'type='image/png' '/include/favicon.png' }}" />
<link rel="icon" href="{{ include 'image/png' '/include/favicon.png' }}" />
<title>About &bull; pancakz.net</title>
{{ include-tag 'style' '/include/fonts/poppins.css' }}
{{ include-tag 'style' '/include/about/main.css' }}
{{ include 'style' '/include/fonts/poppins.css' }}
{{ include 'style' '/include/about/main.css' }}
</head>
<body>
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#4D58FF">
<link rel="icon" href="{{ include 'image/png' '/include/favicon.png' }}" />
<title>Blog &bull; pancakz.net</title>
{{ include 'style' '/include/fonts/poppins.css' }}
{{ include 'style' '/include/blog/main.css' }}
{{ include 'script' '/include/blog/main.ts' }}
{{ include 'directory' '/include/blog/directory.json' }}
</head>
<body>
</body>
</html>
+8 -8
View File
@@ -6,17 +6,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="description" content="Tech, Chunibyo & Other Delusions" />
<meta property="theme-color" content="#4D58FF" />
<link rel="icon" href="{{ include-b64 'type='image/png' '/include/favicon.png' }}" />
<link rel="icon" href="{{ include 'image/png' '/include/favicon.png' }}" />
<title>pancakz.net</title>
{{ include-tag 'style' '/include/fonts/poppins.css' }}
{{ include-tag 'style' '/include/index/main.css' }}
{{ include-tag 'script' '/include/index/main.ts' }}
{{ include-tag 'script' '/include/index/motd.ts' }}
{{ include 'style' '/include/fonts/poppins.css' }}
{{ include 'style' '/include/index/main.css' }}
{{ include 'script' '/include/index/main.ts' }}
{{ include 'script' '/include/index/motd.ts' }}
</head>
<body>
{{ include-tag 'noscript' '/include/noscript.html' }}
{{ include 'noscript' '/include/noscript.html' }}
<noscript>
<style>
div.layout-wrapper {
@@ -42,14 +42,14 @@
<canvas class="layout-section layout-display"></canvas>
<div class="layout-section layout-footer">
<img class="barcode" alt="QR Code" src="{{ include-b64 'type='image/png' '/include/index/qrcode.png' }}">
<img class="barcode" alt="QR Code" src="{{ include 'image/png' '/include/index/qrcode.png' }}">
<div role="main" class="tooltip">
<p class="header"></p>
<p class="description"> </p>
<a class="redirect">See More &gt;&gt;&gt;</a>
</div>
<a href="/secret-sprites.html">
<img height="80" width="210" alt="Site Logo" src="{{ include-b64 'type='image/png' '/include/index/logo.png' }}">
<img height="80" width="210" alt="Site Logo" src="{{ include 'image/png' '/include/index/logo.png' }}">
</a>
</div>
+4 -4
View File
@@ -6,12 +6,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="Tech, Chunibyo & Other Delusions" />
<meta property="theme-color" content="#4D58FF" />
<link rel="icon" href="{{ include-b64 'type='image/png' '/include/favicon.png' }}" />
<link rel="icon" href="{{ include 'image/png' '/include/favicon.png' }}" />
<title>Lost &amp; Found &bull; pancakz.net</title>
{{ include-tag 'style' '/include/fonts/terminus.css' }}
{{ include-tag 'style' '/include/not-found/main.css' }}
{{ include-tag 'script' '/include/not-found/main.ts' }}
{{ include 'style' '/include/fonts/terminus.css' }}
{{ include 'style' '/include/not-found/main.css' }}
{{ include 'script' '/include/not-found/main.ts' }}
</head>
<body>
@@ -5,12 +5,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<link rel="icon" href="{{ include-b64 'type='image/png' '/include/favicon.png' }}" />
<link rel="icon" href="{{ include 'image/png' '/include/favicon.png' }}" />
<title>Picross &bull; pancakz.net</title>
{{ include-tag 'style' '/include/fonts/poppins.css' }}
{{ include-tag 'style' '/include/secret-picross/main.css' }}
{{ include-tag 'script' '/include/secret-picross/main.ts' }}
{{ include 'style' '/include/fonts/poppins.css' }}
{{ include 'style' '/include/secret-picross/main.css' }}
{{ include 'script' '/include/secret-picross/main.ts' }}
</head>
<body>
@@ -5,12 +5,12 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<link rel="texture" href="{{ include-b64 'type='image/png' '/include/secret-sprites/sprite.gif' }}" />
<link rel="icon" href="{{ include-b64 'type='image/png' '/include/favicon.png' }}" />
<link rel="texture" href="{{ include 'image/png' '/include/secret-sprites/sprite.gif' }}" />
<link rel="icon" href="{{ include 'image/png' '/include/favicon.png' }}" />
<title>Sprites &bull; pancakz.net</title>
{{ include-tag 'style' '/include/fonts/poppins.css' }}
{{ include-tag 'style' '/include/secret-sprites/main.css' }}
{{ include 'style' '/include/fonts/poppins.css' }}
{{ include 'style' '/include/secret-sprites/main.css' }}
</head>
<body>
@@ -42,7 +42,7 @@
<canvas id="sprites"></canvas>
<audio id="active" hidden src="/secret-sprites/pop.webm"></audio>
<audio id="bounce" hidden src="/secret-sprites/pop.webm"></audio>
{{ include-tag 'script' '/include/secret-sprites/banner.ts' }}
{{ include 'script' '/include/secret-sprites/banner.ts' }}
</div>
</body>
+20 -28
View File
@@ -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, {