Add playground
This commit is contained in:
@@ -19,23 +19,24 @@ export class FileLoader implements IPluginBuilder {
|
|||||||
const { menuManifest } = builderContext;
|
const { menuManifest } = builderContext;
|
||||||
const { files } = this.options;
|
const { files } = this.options;
|
||||||
files.forEach((file) => {
|
files.forEach((file) => {
|
||||||
const fileName =
|
const filePath = file.path.split("/").pop() ?? file.path;
|
||||||
file.nameOverride ?? file.path.split("/").pop() ?? file.path;
|
const fileName = file.nameOverride ?? filePath;
|
||||||
const isImage = fileName.match(/\.(png|jpe?g|gif|webp)$/);
|
const isImage = fileName.match(/\.(png|jpe?g|gif|webp)$/);
|
||||||
if (isImage) {
|
if (isImage) {
|
||||||
console.log("Processing image", file.path);
|
console.log("Processing image", file.path);
|
||||||
ffmpeg(file.path)
|
ffmpeg(file.path)
|
||||||
.output(`${builderContext.outputDirectory}/${fileName}`)
|
.output(`${builderContext.outputDirectory}/${filePath}`)
|
||||||
.size(`${this.options.imageWidth ?? 200}x?`)
|
.size(`${this.options.imageWidth ?? 200}x?`)
|
||||||
.run();
|
.run();
|
||||||
} else {
|
} else {
|
||||||
console.log("Copying file", file.path);
|
const destination = `${builderContext.outputDirectory}/${filePath}`;
|
||||||
copyFile(file.path, `${builderContext.outputDirectory}/${fileName}`);
|
console.log("Copying file", file.path, "to", destination);
|
||||||
|
copyFile(file.path, destination);
|
||||||
}
|
}
|
||||||
if (file.menuEntry) {
|
if (file.menuEntry) {
|
||||||
menuManifest.push({
|
menuManifest.push({
|
||||||
name: fileName,
|
name: fileName,
|
||||||
link: file.path,
|
link: filePath,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
53
src/assets/base.css
Normal file
53
src/assets/base.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -24,7 +24,6 @@ new ToolchainBuilder(paths)
|
|||||||
files: [
|
files: [
|
||||||
{
|
{
|
||||||
path: "src/templates/404.html",
|
path: "src/templates/404.html",
|
||||||
nameOverride: "Not Found Page",
|
|
||||||
menuEntry: false,
|
menuEntry: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -32,6 +31,14 @@ new ToolchainBuilder(paths)
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "src/assets/favicon.ico",
|
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
130
src/playground/playground.html
Normal 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>
|
||||||
@@ -1,10 +1,12 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Page Not Found</title>
|
<title>Page Not Found</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="message">
|
<div id="message">
|
||||||
<h2>404</h2>
|
<h2>404</h2>
|
||||||
@@ -12,4 +14,5 @@
|
|||||||
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
|
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<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">
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
|
<link href="base.css" rel="stylesheet" />
|
||||||
<style>
|
<style>
|
||||||
html {
|
html {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@@ -23,7 +24,7 @@
|
|||||||
body {
|
body {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
color: #fbfbfe;
|
color: #fbfbfe;
|
||||||
background-color: #1c1b28;
|
background-color: var(--color-background);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -84,46 +85,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.profile li {}
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<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">
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
|
<link href="base.css" rel="stylesheet" />
|
||||||
<style>
|
<style>
|
||||||
html {
|
html {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
@@ -82,46 +83,6 @@
|
|||||||
margin-top: 0px;
|
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 {
|
a {
|
||||||
color: #00FFFF;
|
color: #00FFFF;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user