the shape of future yukinets to come...

add banners and image passthrough
initial scss templating
2025-08-02 23:32:36 -04:00 · 2025-03-29 08:15:14 -03:00 · 2025-03-27 06:29:56 -03:00 · 2025-03-27 05:58:59 -03:00 · 2025-03-27 05:58:51 -03:00
17 changed files with 115 additions and 21 deletions
--- a/_data/meta.json
+++ b/_data/meta.json
@ -0,0 +1,4 @@
+{
+    "sitename": "yukinets",
+    "motd": "kill everyone now!! condone first degree murder!!"
+}
--- a/_includes/base.njk
+++ b/_includes/base.njk
@ -1,11 +1,21 @@
 <!DOCTYPE html>
 <html>
    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>{% if title %} {{ title }} | yukinets {% else %} yukinets {% endif %}</title>
+        {% include "base_head.njk" %}
    </head>
    <body>
-        {{ content | safe }}
+        <div class="main-page-wrapper">
+                <div class="header-wrapper">
+                    <img class="header-banner" src="/img/banner-alt.png" alt="yukinets">
+                </div>
+                <marquee class="motd" behavior="scroll" direction="left">
+                    <img src="/img/Witch-on-broom.gif" alt="">
+                    <p>{{ motd if motd else meta.motd }}</p>
+                </marquee>
+                <nav class="navbar-wrapper">
+                    <img class="nav-button" src="/img/hbutton.png" alt="Home">
+                </nav>
+            {{ content | safe }}
+        </div>
    </body>
 </html>
--- a/_includes/base_head.njk
+++ b/_includes/base_head.njk
@ -0,0 +1,4 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{% if title %} {{ title }} | {{ meta.sitename }} {% else %} {{ meta.sitename }} {% endif %}</title>
+<link rel="stylesheet" href="/css/{{ style if style else "main" }}.css">
--- a/_includes/general.scss
+++ b/_includes/general.scss
@ -0,0 +1,11 @@
+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.main-page-wrapper {
+    height: min-content;
+    min-width: 0;
+    max-width: 802px;
+    margin: 8px auto;
+}
--- a/_includes/main-palette.scss
+++ b/_includes/main-palette.scss
@ -0,0 +1,2 @@
+$bg: #e4ffdc;
+$border: #000;
--- a/css/main.scss
+++ b/css/main.scss
@ -0,0 +1,32 @@
+@use "general";
+@use "main-palette" as mp;
+
+body {
+    background-color: mp.$bg;
+    background-image: url("/img/bgpat.png");
+    background-repeat: repeat;
+}
+
+.header-wrapper {
+    width: 100%;
+
+    img {
+        border: 1px solid mp.$border;
+        display: block;
+        margin-bottom: 8px;
+    }
+}
+
+.motd {
+    img { display: inline; }
+    p { display: inline; }
+}
+
+.navbar-wrapper {
+    margin: 0;
+    padding: 0;
+
+    .nav-button {
+        border: 1px solid mp.$border;
+    }
+}
--- a/eleventy.config.js
+++ b/eleventy.config.js
@ -1,21 +1,12 @@
-const sass = require("sass");
+const eleventySass = require("eleventy-sass");

 module.exports = function (eleventyConfig) {
-	eleventyConfig.addTemplateFormats("scss");
+	eleventyConfig.addPlugin(eleventySass);
+	eleventyConfig.addPassthroughCopy("img");

-	// Creates the extension for use
-	eleventyConfig.addExtension("scss", {
-		outputFileExtension: "css", // optional, default: "html"
-
-		// `compile` is called once per .scss file in the input directory
-		compile: async function (inputContent) {
-			let result = sass.compileString(inputContent);
-
-			// This is the render function, `data` is the full data cascade
-			return async (data) => {
-				return result.css;
-			};
-		},
-	});
+	return {
+		markdownTemplateEngine: "njk",
+		htmlTemplateEngine: "njk"
+	  }
 };

--- a/img/Witch-on-broom.gif
+++ b/img/Witch-on-broom.gif
--- a/img/banner-alt.png
+++ b/img/banner-alt.png
--- a/img/banner.png
+++ b/img/banner.png
--- a/img/bgpat.png
+++ b/img/bgpat.png
--- a/img/btnbg.png
+++ b/img/btnbg.png
--- a/img/button.png
+++ b/img/button.png
--- a/img/hbutton.png
+++ b/img/hbutton.png
--- a/img/homeb.png
+++ b/img/homeb.png
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "license": "WTFPL",
      "dependencies": {
        "@11ty/eleventy": "^3.0.0",
+        "eleventy-sass": "^3.0.0-beta.0",
        "sass": "^1.86.0"
      }
    },
@ -1095,6 +1096,34 @@
      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
      "license": "MIT"
    },
+    "node_modules/eleventy-sass": {
+      "version": "3.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/eleventy-sass/-/eleventy-sass-3.0.0-beta.0.tgz",
+      "integrity": "sha512-pO+CLz3M/MgOkZ4L7zp0pCY7cxXvX23yTZBEp8vcgIr2Z8xiSfeZqhHMiz53GazJay0A8AUnhBbEfuGMI1RLXA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.3",
+        "kleur": "^4.1.4",
+        "sass": "^1.49.7",
+        "upath": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      },
+      "peerDependencies": {
+        "@11ty/eleventy": "^3.0.0-beta.1",
+        "eleventy-plugin-clean": "^1.1.0",
+        "eleventy-plugin-rev": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eleventy-plugin-clean": {
+          "optional": true
+        },
+        "eleventy-plugin-rev": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/emoji-regex": {
      "version": "9.2.2",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@ -2461,6 +2490,16 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/upath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
    "node_modules/urlpattern-polyfill": {
      "version": "10.0.0",
      "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -4,7 +4,7 @@
  "description": "my website!!",
  "main": "index.js",
  "scripts": {
-    "watch:eleventy": "npx @11ty/eleventy --watch",
+    "watch:eleventy": "npx --node-options=\"--experimental-require-module\" @11ty/eleventy --watch",
    "watch:sass": "npx sass sass:_site/css --watch",
    "start": "npm run watch:eleventy"
  },
@ -14,6 +14,7 @@
  "type": "commonjs",
  "dependencies": {
    "@11ty/eleventy": "^3.0.0",
+    "eleventy-sass": "^3.0.0-beta.0",
    "sass": "^1.86.0"
  }
 }
Author	SHA1	Message	Date
yuki	6ca2842b45	the shape of future yukinets to come...	2025-08-02 23:32:36 -04:00
yuki	f2ca1d74d6	add banners and image passthrough	2025-03-29 08:15:14 -03:00
yuki	6cd5becee9	initial scss templating	2025-03-27 06:29:56 -03:00
yuki	44205a7d24	set nunjucks as engine	2025-03-27 05:58:59 -03:00
yuki	524461f092	add initial metadata structure	2025-03-27 05:58:51 -03:00