wallpaper on root domain

5 files changed, 95 insertions, 3 deletions

diff --git a/config.py b/config.py
index fb87a82..5e40876 100644
--- a/config.py
+++ b/config.py
@@ -15,6 +15,7 @@ class Config:
     # MAIN
     MAIN_ROOT_URL = "https://wazul.moe"
     MAIN_NAME = "Wazul's website"
+    MAIN_ASSETS_SOURCE_DIR = os.path.join(__DIR, "main/assets")
 
     # BLOG
     BLOG_ROOT_URL = "https://blog.wazul.moe"
diff --git a/main/assets/css/main.css b/main/assets/css/main.css
new file mode 100644
index 0000000..856b5ab
--- /dev/null
+++ b/main/assets/css/main.css
@@ -0,0 +1,6 @@
+canvas.canvas_bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
\ No newline at end of file
diff --git a/main/assets/js/main.js b/main/assets/js/main.js
new file mode 100644
index 0000000..de090d1
--- /dev/null
+++ b/main/assets/js/main.js
@@ -0,0 +1,80 @@
+"use strict"
+const canvas_bg = document.getElementById("canvas_bg");
+const ctx = canvas_bg.getContext("2d");
+const ORANGE_COLOR = "#fe8b00ff";
+const WHITE_COLOR = "#ffffffff";
+const CELL_WIDTH = 256;
+
+const WALLPAPER_FONT = "30px Arial";
+const WALLPAPER_COL = 30;
+const WALLPAPER_ROW = 50;
+
+const UNDERLINE_COL_START = 25;
+const UNDERLINE_COL_END = CELL_WIDTH - UNDERLINE_COL_START;
+const UNDERLINE_ROW = 60;
+
+const SIZE_TEXT_FONT = "36px Arial";
+const SIZE_TEXT_COL = 25;
+const SIZE_TEXT_ROW = 96;
+
+function drawCanvasBg() {
+    ctx.clearRect(0, 0, canvas_bg.width, canvas_bg.height);
+    ctx.fillStyle = ORANGE_COLOR;
+    ctx.fillRect(0, 0, canvas_bg.width, canvas_bg.height);
+
+    var largerSize = Math.max(canvas_bg.width, canvas_bg.height);
+    var width = Math.max(3, Math.ceil(largerSize / 1000) + 1);
+
+    ctx.fillStyle = WHITE_COLOR;
+    ctx.fillRect(0, 0, width, canvas_bg.height);
+    ctx.fillRect(0, 0, canvas_bg.width, width);
+    ctx.fillRect(canvas_bg.width - width, 0, canvas_bg.width, canvas_bg.height);
+    ctx.fillRect(0, canvas_bg.height - width, canvas_bg.width, canvas_bg.height);
+
+    var lineWidth = 1;
+    var lineOffset = 0.5;
+    if (largerSize > 5000) {
+        lineWidth = 2;
+        lineOffset = 0;
+    }
+
+    ctx.strokeStyle = WHITE_COLOR;
+    ctx.lineWidth = lineWidth;
+
+    var currentColPos = CELL_WIDTH + lineOffset;
+
+    while (currentColPos < canvas_bg.width) {
+        ctx.moveTo(currentColPos, 0);
+        ctx.lineTo(currentColPos, canvas_bg.height);
+        ctx.stroke();
+        currentColPos += CELL_WIDTH;
+    }
+
+    var currentRowPos = CELL_WIDTH + lineOffset;
+
+    while (currentRowPos < canvas_bg.height) {
+        ctx.moveTo(0, currentRowPos);
+        ctx.lineTo(canvas_bg.width, currentRowPos);
+        ctx.stroke();
+        currentRowPos += CELL_WIDTH;
+    }
+
+    ctx.font = WALLPAPER_FONT;
+    ctx.fillText("WALLPAPER", WALLPAPER_COL, WALLPAPER_ROW);
+
+    ctx.moveTo(UNDERLINE_COL_START + lineOffset, UNDERLINE_ROW);
+    ctx.lineTo(UNDERLINE_COL_END + lineOffset, UNDERLINE_ROW);
+    ctx.stroke();
+
+    ctx.font = SIZE_TEXT_FONT;
+    ctx.fillText(canvas_bg.width + "x" + canvas_bg.height, SIZE_TEXT_COL, SIZE_TEXT_ROW);
+}
+
+function onResize() {
+    canvas_bg.width = window.innerWidth;
+    canvas_bg.height = window.innerHeight;
+    drawCanvasBg();
+}
+
+onResize();
+window.addEventListener("resize", onResize);
\ No newline at end of file
diff --git a/main/templates/main_base.html.j2 b/main/templates/main_base.html.j2
index 6eb6f91..6bac9c3 100644
--- a/main/templates/main_base.html.j2
+++ b/main/templates/main_base.html.j2
@@ -1,5 +1,10 @@
 {% extends "base.html.j2" %}
 {% block page_title %}{{ main.main_name }}{% endblock %}
 {% block og_page_title %}{{ main.main_name }}{% endblock %}
-{% block body %}{{ super() }}
-<p>Hello world.</p>{% endblock %}
+{% block head_extra %}{{ super() }}
+    <link rel="stylesheet" href="{{ site.assets_path }}/css/main.css" />{% endblock %}
+{% block body %}<canvas id="canvas_bg" class="canvas_bg"></canvas>
+{{ super() }}
+<footer>
+    <script src="/assets/js/main.js"></script>
+</footer>{% endblock %}
diff --git a/modules/main_generate.py b/modules/main_generate.py
index f8aae67..550c77c 100644
--- a/modules/main_generate.py
+++ b/modules/main_generate.py
@@ -27,4 +27,4 @@ def generate(jinja_env: jinja2.Environment, output_root_path: str, local: bool):
     with open(os.path.join(output_root_path, "index.html"), "w") as f:
         f.write(root_template.render({"url" : Config.MAIN_ROOT_URL}))
 
-    shutil.copytree(Config.CODENAMES_ASSETS_SOURCE_DIR, output_root_path + Config.ASSETS_IMPORT_PATH)
\ No newline at end of file
+    shutil.copytree(Config.MAIN_ASSETS_SOURCE_DIR, output_root_path + Config.ASSETS_IMPORT_PATH)
\ No newline at end of file