wholteza/blog
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add playground

Browse Source
This commit is contained in:
wholteza
2025-10-04 16:08:11 +02:00
parent 98b041e056
commit 2ef2f5d974
7 changed files with 216 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/@zblog/toolchain/src/file-loader.ts
View File

@@ -19,23 +19,24 @@ export class FileLoader implements IPluginBuilder {
const { menuManifest } = builderContext;
const { files } = this.options;
files.forEach((file) => {
const fileName =
file.nameOverride ?? file.path.split("/").pop() ?? file.path;
const filePath = file.path.split("/").pop() ?? file.path;
const fileName = file.nameOverride ?? filePath;
const isImage = fileName.match(/\.(png|jpe?g|gif|webp)$/);
if (isImage) {
console.log("Processing image", file.path);
ffmpeg(file.path)
.output(`${builderContext.outputDirectory}/${fileName}`)
.output(`${builderContext.outputDirectory}/${filePath}`)
.size(`${this.options.imageWidth ?? 200}x?`)
.run();
} else {
console.log("Copying file", file.path);
copyFile(file.path, `${builderContext.outputDirectory}/${fileName}`);
const destination = `${builderContext.outputDirectory}/${filePath}`;
console.log("Copying file", file.path, "to", destination);
copyFile(file.path, destination);
}
if (file.menuEntry) {
menuManifest.push({
name: fileName,
link: file.path,
link: filePath,
});
}
});

53
src/assets/base.css Normal file
View File

@@ -0,0 +1,53 @@
:root {
--color-background: #1c1b28;
--color-accent: #00FFFF;
--color-text: #FFF;
--content-width: 800px;
--font-size-base: 18px;
--line-height-base: 26px;
--font-family: monospace;
--space-base: 1rem;
}
.banner {
margin-top: 1rem;
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
margin-bottom: 1rem;
align-items: center;
flex: 1;
font-family: monospace;
}
.banner {
.title {
display: flex;
flex-direction: row;
flex: 1;
.name {
color: #1c1b28;
background-color: #00FFFF;
white-space: nowrap;
padding: 5px;
a {
color: unset;
text-decoration: none;
}
}
}
.title::after {
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
content: "";
display: block;
width: 100%;
margin-left: 10px;
}
}

9
src/index.ts
View File

@@ -24,7 +24,6 @@ new ToolchainBuilder(paths)
files: [
{
path: "src/templates/404.html",
nameOverride: "Not Found Page",
menuEntry: false,
},
{
@@ -32,6 +31,14 @@ new ToolchainBuilder(paths)
},
{
path: "src/assets/favicon.ico",
},
{
path: "src/assets/base.css"
},
{
path: "src/playground/playground.html",
menuEntry: true,
nameOverride: "CSS/HTML playground"
}
],
}),

130
src/playground/playground.html Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<meta>
<link href="base.css" rel="stylesheet" />
<style>
html {
line-height: var(--line-height-base);
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-family);
}
body {
max-width: var(--content-width);
background-color: var(--color-background);
color: var(--color-text);
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
#style-editor {
width: 100%;
padding: 1rem;
margin-bottom: 1rem;
background-color: var(--color-background);
color: var(--color-text);
font-size: 18px;
display: flex;
flex: 1;
outline: none;
border: 1px solid var(--color-accent);
box-sizing: border-box;
}
#html-editor {
width: 100%;
padding: 1rem;
margin-bottom: 1rem;
background-color: var(--color-background);
color: var(--color-text);
font-size: 18px;
display: flex;
flex: 1;
outline: none;
border: 1px solid var(--color-accent);
box-sizing: border-box;
}
#preview {
width: 100%;
box-sizing: border-box;
padding: 1rem;
margin-bottom: 1rem;
background-color: var(--color-background);
color: var(--color-text);
font-size: 18px;
display: flex;
flex: 1;
outline: none;
border: 1px solid var(--color-accent);
justify-content: center;
align-items: center;
}
}
</style>
<style id="style">
.square {
height: 150px;
width: 150px;
background-color: #553FF3;
color: white;
font-weight: bold;
font-size: 3rem;
position: ;
border-radius: 30px;
border-top-left-radius: 5px;
}
span {
display: block;
position: relative;
top: 100px;
left: 45px;
}
</style>
<div id="markup" aria-hidden="true" hidden="true" style="display: none;">
<div class="square"><span>CSS</span></div>
</div>
<script type="text/javascript">
window.onload = function () {
const style = document.getElementById('style').innerHTML;
const formattedStyle = style.split("\n").reduce((agg, curr) => {
console.log(curr)
if (curr === "") return agg;
const line = curr.replace('\t', '').replaceAll('\t', ' ');
if (agg.length === 0) return line;
return agg + "\n" + line;;
}, "");
console.log(formattedStyle)
document.getElementById('style-editor').value = formattedStyle;
document.getElementById('style').innerHTML = formattedStyle;
const markup = document.getElementById('markup').innerHTML;
const formattedMarkup = markup.replace('\t', '').replaceAll('\t', ' ').split('\n').filter(line => line !== '').join('\n');
document.getElementById('html-editor').value = formattedMarkup;
document.getElementById('preview').innerHTML = formattedMarkup;
}
</script>
</meta>
<body>
<div class="banner">
<div class="title">
<div class="name"><a href="/">Zackarias Montell</a></div>
</div>
</div>
<p>This is an interactive html and css playground built with minimal JS.</p>
<div id="preview"></div>
<textarea rows="15" autocomplete="false" autocorrect="false" id="style-editor"
oninput="document.getElementById('style').innerHTML = this.value">
</textarea>
<textarea id="html-editor" oninput="document.getElementById('preview').innerHTML=this.value" rows="15"
autocomplete="false" autocorrect="false" id="style-editor">
</textarea>
</body>
</html>

27
src/templates/404.html
View File

@@ -1,15 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Not Found</title>
</head>
<body>
<div id="message">
<h2>404</h2>
<h1>Page Not Found</h1>
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
</div>
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Not Found</title>
</head>
<body>
<div id="message">
<h2>404</h2>
<h1>Page Not Found</h1>
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
</div>
</body>
</html>

43
src/templates/index.html
View File

@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="base.css" rel="stylesheet" />
<style>
html {
font-size: 18px;
@@ -23,7 +24,7 @@
body {
max-width: 800px;
color: #fbfbfe;
background-color: #1c1b28;
background-color: var(--color-background);
display: flex;
flex-direction: column;
align-items: center;
@@ -84,46 +85,6 @@
}
.profile li {}
.banner {
margin-top: 1rem;
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
margin-bottom: 1rem;
align-items: center;
flex: 1;
font-family: monospace;
}
.banner {
.title {
display: flex;
flex-direction: row;
flex: 1;
.name {
color: #1c1b28;
background-color: #00FFFF;
white-space: nowrap;
padding: 5px;
a {
color: unset;
text-decoration: none;
}
}
}
.title::after {
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
content: "";
display: block;
width: 100%;
margin-left: 10px;
}
}
</style>
</head>

41
src/templates/note.html
View File

@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="base.css" rel="stylesheet" />
<style>
html {
font-family: monospace;
@@ -82,46 +83,6 @@
margin-top: 0px;
}
.banner {
margin-top: 1rem;
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
margin-bottom: 1rem;
align-items: center;
flex: 1;
font-family: monospace;
}
.banner {
.title {
display: flex;
flex-direction: row;
flex: 1;
.name {
color: #1c1b28;
background-color: #00FFFF;
white-space: nowrap;
padding: 5px;
a {
color: unset;
text-decoration: none;
}
}
}
.title::after {
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
content: "";
display: block;
width: 100%;
margin-left: 10px;
}
}
a {
color: #00FFFF;
}