diff --git a/packages/@zblog/toolchain/src/file-loader.ts b/packages/@zblog/toolchain/src/file-loader.ts
index 640b273..9b3f019 100644
--- a/packages/@zblog/toolchain/src/file-loader.ts
+++ b/packages/@zblog/toolchain/src/file-loader.ts
@@ -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,
});
}
});
diff --git a/src/assets/base.css b/src/assets/base.css
new file mode 100644
index 0000000..a6e6280
--- /dev/null
+++ b/src/assets/base.css
@@ -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;
+ }
+}
diff --git a/src/index.ts b/src/index.ts
index 8f10ac9..23ccf86 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -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"
}
],
}),
diff --git a/src/playground/playground.html b/src/playground/playground.html
new file mode 100644
index 0000000..a7b96d4
--- /dev/null
+++ b/src/playground/playground.html
@@ -0,0 +1,130 @@
+
+
+
+
+
+
+
+
+
+
+
+ This is an interactive html and css playground built with minimal JS.
+
+
+
+
+
+