bakonpancakz/pancakz-homepage
1
0
Fork 0
Code Actions Activity

refactor: swap to generic {{ include }} tags

Browse Source 
kinda makes more sense as theyre kinda context aware now
This commit is contained in:
BAKON☆PANCAKZ
2026-06-17 01:12:22 -07:00
parent e117d4cbcc
commit cee55012a5
8 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pancakz-v3-beam/application/about.html
+3 -3
View File
@@ -5,11 +5,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#4D58FF"> <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> <title>About &bull; pancakz.net</title>
{{ include-tag 'style' '/include/fonts/poppins.css' }} {{ include 'style' '/include/fonts/poppins.css' }}
{{ include-tag 'style' '/include/about/main.css' }} {{ include 'style' '/include/about/main.css' }}
</head> </head>
<body> <body>
pancakz-v3-beam/application/blog.html
+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>
pancakz-v3-beam/application/index.html
+8 -8
View File
@@ -6,17 +6,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="description" content="Tech, Chunibyo & Other Delusions" /> <meta property="description" content="Tech, Chunibyo & Other Delusions" />
<meta property="theme-color" content="#4D58FF" /> <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> <title>pancakz.net</title>
{{ include-tag 'style' '/include/fonts/poppins.css' }} {{ include 'style' '/include/fonts/poppins.css' }}
{{ include-tag 'style' '/include/index/main.css' }} {{ include 'style' '/include/index/main.css' }}
{{ include-tag 'script' '/include/index/main.ts' }} {{ include 'script' '/include/index/main.ts' }}
{{ include-tag 'script' '/include/index/motd.ts' }} {{ include 'script' '/include/index/motd.ts' }}
</head> </head>
<body> <body>
{{ include-tag 'noscript' '/include/noscript.html' }} {{ include 'noscript' '/include/noscript.html' }}
<noscript> <noscript>
<style> <style>
div.layout-wrapper { div.layout-wrapper {
@@ -42,14 +42,14 @@
<canvas class="layout-section layout-display"></canvas> <canvas class="layout-section layout-display"></canvas>
<div class="layout-section layout-footer"> <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"> <div role="main" class="tooltip">
<p class="header"></p> <p class="header"></p>
<p class="description"> </p> <p class="description"> </p>
<a class="redirect">See More &gt;&gt;&gt;</a> <a class="redirect">See More &gt;&gt;&gt;</a>
</div> </div>
<a href="/secret-sprites.html"> <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> </a>
</div> </div>
pancakz-v3-beam/application/not-found.html
+4 -4
View File
@@ -6,12 +6,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="Tech, Chunibyo & Other Delusions" /> <meta property="description" content="Tech, Chunibyo & Other Delusions" />
<meta property="theme-color" content="#4D58FF" /> <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> <title>Lost &amp; Found &bull; pancakz.net</title>
{{ include-tag 'style' '/include/fonts/terminus.css' }} {{ include 'style' '/include/fonts/terminus.css' }}
{{ include-tag 'style' '/include/not-found/main.css' }} {{ include 'style' '/include/not-found/main.css' }}
{{ include-tag 'script' '/include/not-found/main.ts' }} {{ include 'script' '/include/not-found/main.ts' }}
</head> </head>
<body> <body>
pancakz-v3-beam/application/include/articles/setting-up-an-email-server.html → pancakz-v3-beam/application/public/articles/setting-up-an-email-server/content.html
View File
pancakz-v3-beam/application/secret-picross.html
+4 -4
View File
@@ -5,12 +5,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex"> <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> <title>Picross &bull; pancakz.net</title>
{{ include-tag 'style' '/include/fonts/poppins.css' }} {{ include 'style' '/include/fonts/poppins.css' }}
{{ include-tag 'style' '/include/secret-picross/main.css' }} {{ include 'style' '/include/secret-picross/main.css' }}
{{ include-tag 'script' '/include/secret-picross/main.ts' }} {{ include 'script' '/include/secret-picross/main.ts' }}
</head> </head>
<body> <body>
pancakz-v3-beam/application/secret-sprites.html
+5 -5
View File
@@ -5,12 +5,12 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<link rel="texture" href="{{ include-b64 'type='image/png' '/include/secret-sprites/sprite.gif' }}" /> <link rel="texture" href="{{ include 'image/png' '/include/secret-sprites/sprite.gif' }}" />
<link rel="icon" href="{{ include-b64 'type='image/png' '/include/favicon.png' }}" /> <link rel="icon" href="{{ include 'image/png' '/include/favicon.png' }}" />
<title>Sprites &bull; pancakz.net</title> <title>Sprites &bull; pancakz.net</title>
{{ include-tag 'style' '/include/fonts/poppins.css' }} {{ include 'style' '/include/fonts/poppins.css' }}
{{ include-tag 'style' '/include/secret-sprites/main.css' }} {{ include 'style' '/include/secret-sprites/main.css' }}
</head> </head>
<body> <body>
@@ -42,7 +42,7 @@
<canvas id="sprites"></canvas> <canvas id="sprites"></canvas>
<audio id="active" hidden src="/secret-sprites/pop.webm"></audio> <audio id="active" hidden src="/secret-sprites/pop.webm"></audio>
<audio id="bounce" 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> </div>
</body> </body>
pancakz-v3-beam/vite.config.ts
+20 -28
View File
@@ -1,6 +1,6 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import { readFileSync } from 'fs' import { readFileSync } from 'fs'
import { basename, extname, join } from 'path' import { join } from 'path'
import { minify } from 'html-minifier-next' import { minify } from 'html-minifier-next'
import { buildSync } from 'esbuild' import { buildSync } from 'esbuild'
@@ -51,13 +51,9 @@ export default defineConfig({
{ {
name: 'html-generator', name: 'html-generator',
transformIndexHtml(html, _) { transformIndexHtml(html, _) {
html = html.replaceAll(/{{ include-b64 '(.*?)' '(.*?)' }}/g, (_, mime: string, filepath: string) => { html = html.replaceAll(/{{ include '(.*?)' '(.*?)' }}/g, (_, metadata: string, filepath: string) => {
const content = readFileSync(join(ROOT, filepath), 'base64') // Transpile typescript and bundle dependencies
return `data:${mime};base64,${content}` if (filepath.endsWith('.ts')) {
})
html = html.replaceAll(/{{ include-tag '(.*?)' '(.*?)' }}/g, (_, tag: string, filepath: string) => {
if (tag === 'script' && filepath.endsWith('.ts')) {
const result = buildSync({ const result = buildSync({
entryPoints: [join(ROOT, filepath)], entryPoints: [join(ROOT, filepath)],
bundle: true, bundle: true,
@@ -65,28 +61,24 @@ export default defineConfig({
format: 'esm', format: 'esm',
target: 'es2023', target: 'es2023',
}) })
return `<script>window.addEventListener('load',()=>{${result.outputFiles[0].text}})</script>` return `<script>window.addEventListener('load',()=>{${result.outputFiles[0].text};})</script>`
} else {
const content = readFileSync(join(ROOT, filepath), 'utf8')
return `<${tag}>\n${content}</${tag}>`
} }
})
html = html.replaceAll(/{{ include-article '(.*?)' }}/g, (_, filepath: string) => { // Embed as JSON string
const id = basename(filepath).slice(0, -extname(filepath).length) if (filepath.endsWith('.json')) {
const content = readFileSync(join(ROOT, filepath), 'utf8').replaceAll( const content = readFileSync(join(ROOT, filepath), 'utf8')
/<pre([^>]*)>\s*\n([\s\S]*?)<\/pre>/g, return `<script type="application/json" id="${metadata}">\n${content}</script>`
(_, attributes, inner) => { }
const lines = inner.split('\n')
const indent = lines[0].match(/^(\s*)/)?.[1].length ?? 0 // Embed as Base64 URI
const trimmed = lines if (['.png', '.gif'].find((ext) => filepath.endsWith(ext))) {
.map((l: string) => l.slice(indent)) const content = readFileSync(join(ROOT, filepath), 'base64')
.join('\n') return `data:${metadata};base64,${content}`
.trim() }
return `<pre${attributes}>${trimmed}</pre>`
}, // Generic tag generator
) const content = readFileSync(join(ROOT, filepath), 'utf8')
return `<template class="article" id="${id}">\n${content}</template>` return `<${metadata}>\n${content}</${metadata}>`
}) })
return minify(html, { return minify(html, {