Updated design

.gitignore

@@ -16,10 +16,7 @@ public/assets/
 /node_modules/
 /public/build/
 ###< pentatrion/vite-bundle ###
-
+###> symfony/asset-mapper ###
-###> symfony/webpack-encore-bundle ###
+/public/assets/
-/node_modules/
+/assets/vendor/
-/public/build/
+###< symfony/asset-mapper ###
-npm-debug.log
-yarn-error.log
-###< symfony/webpack-encore-bundle ###

assets/app.js

@@ -0,0 +1,22 @@
+import 'normalize.css/normalize.min.css';
+import './styles/app.css';
+
+document.addEventListener("readystatechange", event => {
+    if(event.target.readyState === 'complete') {
+        initExternalLinks();
+    }
+});
+
+
+function initExternalLinks() {
+    document.querySelectorAll('a').forEach(elem => {
+        if(isExternalURL(elem.getAttribute('href'))) {
+            elem.setAttribute('target', '_blank');
+        }
+    })
+}
+
+const isExternalURL = (url) => {
+    if(url.startsWith('/')) return false;
+    return new URL(url).origin !== location.origin;
+}

assets/fonts/fira_code.css

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Light.woff2') format('woff2'),
+    url("woff/FiraCode-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Regular.woff2') format('woff2'),
+    url("woff/FiraCode-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Medium.woff2') format('woff2'),
+    url("woff/FiraCode-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-SemiBold.woff2') format('woff2'),
+    url("woff/FiraCode-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Bold.woff2') format('woff2'),
+    url("woff/FiraCode-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code VF';
+  src: url('woff2/FiraCode-VF.woff2') format('woff2-variations'),
+       url('woff/FiraCode-VF.woff') format('woff-variations');
+  /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
+  font-weight: 300 700;
+  font-style: normal;
+}

assets/js/page.js

@@ -1,56 +0,0 @@
-import '/assets/scss/page.scss';
-
-let eastereggsurl = '/assets/js/eastereggstrings.json'
-document.addEventListener("readystatechange", event => {
-    if(event.target.readyState === 'complete') {
-        initExternalLinks();
-        initEasterEgg();
-    }
-});
-
-
-function initExternalLinks() {
-    document.querySelectorAll('a').forEach(elem => {
-        if(isExternalURL(elem.getAttribute('href'))) {
-            elem.setAttribute('target', '_blank');
-        }
-    })
-}
-
-function initEasterEgg() {
-    document.body.addEventListener('click', evt => {
-        fetch(eastereggsurl)
-        .then((response) => {
-            if (!response.ok) {
-                return;
-            }
-            return response.json();
-        }).then((eastereggstrings) => {
-            let randomstring = Math.floor(Math.random() * eastereggstrings.length);
-            document.querySelector('.easter-egg').innerHTML = eastereggstrings[randomstring];
-        })
-    });
-}
-
-function isInteractiveElement(element) {
-    // Check if the element is an interactive element or triggers an event
-    return (
-        element.tagName === 'A' ||
-        element.tagName === 'BUTTON' ||
-        element.tagName === 'INPUT' ||
-        element.tagName === 'SELECT' ||
-        element.tagName === 'TEXTAREA' ||
-        element.getAttribute('onclick') !== null ||
-        element.getAttribute('onmousedown') !== null ||
-        element.getAttribute('onmouseup') !== null ||
-        element.getAttribute('onmouseover') !== null ||
-        element.getAttribute('onmouseout') !== null ||
-        element.getAttribute('onmousemove') !== null ||
-        element.getAttribute('oncontextmenu') !== null
-    );
-}
-
-const isExternalURL = (url) => {
-    if(url.startsWith('/')) return false;
-    return new URL(url).origin !== location.origin;
-}

assets/scss/base.scss

@@ -1,51 +0,0 @@
-@import "custom";
-@import "/node_modules/bootstrap";
-@import "fonts";
-
-$black: #141414;
-$orange: #d6972a;
-$white: #f0f0f0;
-$font: 'Fira Code', monospace;
-
-body {
-  font-family: 'Mukta', sans-serif;
-  background-color: $white;
-}
-
-nav {
-  background-color: $black;
-  color: $orange;
-
-  ul {
-    display: flex;
-    justify-content: end;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-      width: 150px;
-      text-align: right;
-    }
-  }
-}
-
-header {
-  background-color: $black;
-  color: $orange;
-}
-
-main {
-  h1 {
-    background-color: $orange;
-    padding: 5px;
-  }
-  h2 {
-    background-color: $orange;
-    padding: 2px;
-  }
-}
-
-a {
-  color: $orange;
-}

assets/scss/custom.scss

@@ -1,70 +0,0 @@
-@import "/node_modules/bootstrap/scss/functions";
-@import "/node_modules/bootstrap/scss/variables";
-@import "/node_modules/bootstrap/scss/variables-dark";
-@import "/node_modules/bootstrap/scss/maps";
-@import "/node_modules/bootstrap/scss/utilities";
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "width":
-    map-merge(
-      map-get($utilities, "width"),
-      (
-        responsive: true,
-        values: map-merge(
-          map-get(map-get($utilities, "width"), "values"),
-          (
-            10: 10%,
-            20: 20%,
-            30: 30%,
-            40: 40%,
-            60: 60%,
-            70: 70%,
-            80: 80%,
-            90: 90%,
-            50p: 50px,
-            100p: 100px,
-            150p: 150px,
-            200p: 200px,
-            250p: 250px,
-            500p: 500px,
-          ),
-        ),
-      )
-    )
-  ),
-);
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "height":
-    map-merge(
-      map-get($utilities, "height"),
-      (
-        responsive: true,
-        values: map-merge(
-          map-get(map-get($utilities, "height"), "values"),
-          (
-            10: 10%,
-            20: 20%,
-            30: 30%,
-            40: 40%,
-            60: 60%,
-            70: 70%,
-            80: 80%,
-            90: 90%,
-            50p: 50px,
-            100p: 100px,
-            150p: 150px,
-            200p: 200px,
-            250p: 250px,
-            500p: 500px,
-          ),
-        ),
-      )
-    )
-  )
-);
-

assets/scss/fonts.scss

@@ -1,64 +0,0 @@
-/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 21, 2023 */
-
-@font-face {
-    font-family: 'Mukta';
-    src: url('../fonts/mukta-extrabold-webfont.woff2') format('woff2'),
-    url('../fonts/mukta-extrabold-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: normal;
-
-}
-
-@font-face {
-    font-family: 'Mukta';
-    src: url('../fonts/mukta-bold-webfont.woff2') format('woff2'),
-    url('../fonts/mukta-bold-webfont.woff') format('woff');
-    font-weight: 700;
-    font-style: normal;
-
-}
-
-@font-face {
-    font-family: 'Mukta';
-    src: url('../fonts/mukta-semibold-webfont.woff2') format('woff2'),
-    url('../fonts/mukta-semibold-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-
-}
-
-@font-face {
-    font-family: 'Mukta';
-    src: url('../fonts/mukta-medium-webfont.woff2') format('woff2'),
-    url('../fonts/mukta-medium-webfont.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-
-}
-
-@font-face {
-    font-family: 'Mukta';
-    src: url('../fonts/mukta-regular-webfont.woff2') format('woff2'),
-    url('../fonts/mukta-regular-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-
-}
-
-@font-face {
-    font-family: 'Mukta';
-    src: url('../fonts/mukta-light-webfont.woff2') format('woff2'),
-    url('../fonts/mukta-light-webfont.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-
-}
-
-@font-face {
-    font-family: 'Mukta';
-    src: url('../fonts/mukta-extralight-webfont.woff2') format('woff2'),
-    url('../fonts/mukta-extralight-webfont.woff') format('woff');
-    font-weight: 200;
-    font-style: normal;
-
-}

assets/scss/page.scss

@@ -1,5 +0,0 @@
-@import 'base';
-
-img {
-  max-width: 100%;
-}

assets/styles/app.css

@@ -0,0 +1,141 @@
+@import url('./vars.css');
+@import url('../fonts/fira_code.css');
+
+body, html {
+    height: 100vh;
+}
+body {
+    display: grid;
+    grid-template-columns: 2fr 10fr;
+    background-color: var(--main-background);
+}
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sidebar-background);
+    color: var(--sidebar-text-color);
+    font-family: var(--sidebar-font);
+    height: 100%;
+    min-height: 100vh;
+
+    header {
+        padding: 15px;
+        text-align: center;
+
+        img {
+            border-radius: 50%;
+            width: 200px;
+        }
+    }
+    nav {
+        padding: 15px;
+        flex-grow: 1;
+
+        ul {
+            list-style: none;
+            padding: 0;
+
+            li {
+                padding: 15px 0;
+                a {
+                    color: var(--sidebar-text-color);
+                }
+            }
+        }
+    }
+    footer {
+        text-align: center;
+        padding: 15px;
+        font-size: var(--sidebar-text-muted-size);
+        color: var(--sidebar-text-muted-color);
+        a {
+            color: var(--sidebar-text-muted-color);
+        }
+    }
+}
+
+main {
+    font-family: var(--main-font);
+    background-color: var(--main-background);
+    padding: 0 15px;
+
+    h1 {
+        font-weight: normal;
+        font-size: var(--main-h1-size);
+        margin: 5px 0;
+    }
+    h1:before {
+        color: var(--main-h1-before-color);
+        content: "# ";
+    }
+
+    h2 {
+        font-weight: normal;
+        margin: 5px 0;
+    }
+    h2:before {
+        content: "## ";
+        color: var(--main-h1-before-color);
+        font-size: var(--main-h2-size);
+    }
+
+    h3 {
+        font-weight: normal;
+        margin: 10px 0;
+    }
+    h3:before {
+        font-size: var(--main-h3-size);
+    }
+    p {
+        margin: 5px 0;
+    }
+
+    a {
+        color: var(--main-link-color);
+    }
+    img {
+        max-height: 250px;
+    }
+    ul {
+        padding: 0 15px;
+        margin: 5px;
+
+        li  {
+            max-width: calc(100vw - 30px);
+        }
+    }
+}
+
+/* X-Small devices (portrait phones, less than 576px) */
+@media (max-width: 575.98px) {
+
+}
+
+/* Small devices (landscape phones, less than 768px) */
+@media (max-width: 767.98px) {
+    body {
+        grid-template-columns: 12fr;
+    }
+    .sidebar {
+        display: none;
+    }
+
+}
+
+/* Medium devices (tablets, less than 992px) */
+@media (max-width: 991.98px) {
+
+}
+
+/* Large devices (desktops, less than 1200px) */
+@media (max-width: 1199.98px) {
+
+}
+
+/* X-Large devices (large desktops, less than 1400px) */
+@media (max-width: 1399.98px) {
+
+}
+
+

assets/styles/vars.css

@@ -0,0 +1,16 @@
+:root {
+    --sidebar-background: rgb(0, 0, 0);
+    --sidebar-text-color: rgb(255, 255, 255);
+    --sidebar-text-muted-color: rgb(192, 192, 192);
+    --sidebar-text-muted-size: 10px;
+    --sidebar-font: 'Fira Code', monospace;
+
+    --main-font: 'Fira Code', monospace;
+    --main-background: rgb(224, 224, 224);
+    --main-h1-size: 28px;
+    --main-h1-before-color: rgb(128,128,128);
+    --main-h2-size: 24px;
+    --main-h2-before-color: rgb(128,128,128);
+    --main-h3-size: 24px;
+    --main-link-color: rgb(64,64,64);
+}

composer.json

@@ -9,14 +9,17 @@
         "ext-iconv": "*",
         "erusev/parsedown": "^1.7",
         "nelmio/security-bundle": "^3.4",
+        "symfony/asset": "^7.2",
+        "symfony/asset-mapper": "^7.2",
         "symfony/console": "^7.2",
         "symfony/dotenv": "^7.2",
         "symfony/flex": "^2.4",
         "symfony/framework-bundle": "^7.2",
         "symfony/runtime": "^7.2",
         "symfony/twig-bundle": "^7.2",
-        "symfony/webpack-encore-bundle": "^2.1",
+        "symfony/yaml": "^7.2",
-        "symfony/yaml": "^7.2"
+        "twig/extra-bundle": "^2.12|^3.0",
+        "twig/twig": "^2.12|^3.0"
     },
     "config": {
         "allow-plugins": {
@@ -51,7 +54,8 @@
     "scripts": {
         "auto-scripts": {
             "cache:clear": "symfony-cmd",
-            "assets:install %PUBLIC_DIR%": "symfony-cmd"
+            "assets:install %PUBLIC_DIR%": "symfony-cmd",
+            "importmap:install": "symfony-cmd"
         },
         "post-install-cmd": [
             "@auto-scripts"

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "cc83f6a5f9c1f56634fa0d2a44c80077",
+    "content-hash": "d717ff4c07f81f9c351b316ecfc40ac5",
     "packages": [
         {
             "name": "composer/ca-bundle",
@@ -82,6 +82,87 @@
             ],
             "time": "2024-11-27T15:35:25+00:00"
         },
+        {
+            "name": "composer/semver",
+            "version": "3.4.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/composer/semver.git",
+                "reference": "4313d26ada5e0c4edfbd1dc481a92ff7bff91f12"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/composer/semver/zipball/4313d26ada5e0c4edfbd1dc481a92ff7bff91f12",
+                "reference": "4313d26ada5e0c4edfbd1dc481a92ff7bff91f12",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^5.3.2 || ^7.0 || ^8.0"
+            },
+            "require-dev": {
+                "phpstan/phpstan": "^1.11",
+                "symfony/phpunit-bridge": "^3 || ^7"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Composer\\Semver\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nils Adermann",
+                    "email": "naderman@naderman.de",
+                    "homepage": "http://www.naderman.de"
+                },
+                {
+                    "name": "Jordi Boggiano",
+                    "email": "j.boggiano@seld.be",
+                    "homepage": "http://seld.be"
+                },
+                {
+                    "name": "Rob Bast",
+                    "email": "rob.bast@gmail.com",
+                    "homepage": "http://robbast.nl"
+                }
+            ],
+            "description": "Semver library that offers utilities, version constraint parsing and validation.",
+            "keywords": [
+                "semantic",
+                "semver",
+                "validation",
+                "versioning"
+            ],
+            "support": {
+                "irc": "ircs://irc.libera.chat:6697/composer",
+                "issues": "https://github.com/composer/semver/issues",
+                "source": "https://github.com/composer/semver/tree/3.4.3"
+            },
+            "funding": [
+                {
+                    "url": "https://packagist.com",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/composer",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/composer/composer",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-19T14:15:21+00:00"
+        },
         {
             "name": "erusev/parsedown",
             "version": "1.7.4",
@@ -477,6 +558,85 @@
             ],
             "time": "2024-10-25T15:15:23+00:00"
         },
+        {
+            "name": "symfony/asset-mapper",
+            "version": "v7.2.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/asset-mapper.git",
+                "reference": "ffb733232bb6bb85ef6a994f47c817e7c2ecab9c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/asset-mapper/zipball/ffb733232bb6bb85ef6a994f47c817e7c2ecab9c",
+                "reference": "ffb733232bb6bb85ef6a994f47c817e7c2ecab9c",
+                "shasum": ""
+            },
+            "require": {
+                "composer/semver": "^3.0",
+                "php": ">=8.2",
+                "symfony/deprecation-contracts": "^2.1|^3",
+                "symfony/filesystem": "^7.1",
+                "symfony/http-client": "^6.4|^7.0"
+            },
+            "conflict": {
+                "symfony/framework-bundle": "<6.4"
+            },
+            "require-dev": {
+                "symfony/asset": "^6.4|^7.0",
+                "symfony/browser-kit": "^6.4|^7.0",
+                "symfony/console": "^6.4|^7.0",
+                "symfony/event-dispatcher-contracts": "^3.0",
+                "symfony/finder": "^6.4|^7.0",
+                "symfony/framework-bundle": "^6.4|^7.0",
+                "symfony/http-foundation": "^6.4|^7.0",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/web-link": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\AssetMapper\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Maps directories of assets & makes them available in a public directory with versioned filenames.",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/asset-mapper/tree/v7.2.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-11-20T11:17:29+00:00"
+        },
         {
             "name": "symfony/cache",
             "version": "v7.2.1",
@@ -1619,6 +1779,179 @@
             ],
             "time": "2024-12-07T13:24:01+00:00"
         },
+        {
+            "name": "symfony/http-client",
+            "version": "v7.2.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-client.git",
+                "reference": "339ba21476eb184290361542f732ad12c97591ec"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-client/zipball/339ba21476eb184290361542f732ad12c97591ec",
+                "reference": "339ba21476eb184290361542f732ad12c97591ec",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "psr/log": "^1|^2|^3",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/http-client-contracts": "~3.4.4|^3.5.2",
+                "symfony/service-contracts": "^2.5|^3"
+            },
+            "conflict": {
+                "amphp/amp": "<2.5",
+                "php-http/discovery": "<1.15",
+                "symfony/http-foundation": "<6.4"
+            },
+            "provide": {
+                "php-http/async-client-implementation": "*",
+                "php-http/client-implementation": "*",
+                "psr/http-client-implementation": "1.0",
+                "symfony/http-client-implementation": "3.0"
+            },
+            "require-dev": {
+                "amphp/http-client": "^4.2.1|^5.0",
+                "amphp/http-tunnel": "^1.0|^2.0",
+                "amphp/socket": "^1.1",
+                "guzzlehttp/promises": "^1.4|^2.0",
+                "nyholm/psr7": "^1.0",
+                "php-http/httplug": "^1.0|^2.0",
+                "psr/http-client": "^1.0",
+                "symfony/amphp-http-client-meta": "^1.0|^2.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/messenger": "^6.4|^7.0",
+                "symfony/process": "^6.4|^7.0",
+                "symfony/rate-limiter": "^6.4|^7.0",
+                "symfony/stopwatch": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\HttpClient\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides powerful methods to fetch HTTP resources synchronously or asynchronously",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "http"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/http-client/tree/v7.2.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-12-30T18:35:15+00:00"
+        },
+        {
+            "name": "symfony/http-client-contracts",
+            "version": "v3.5.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-client-contracts.git",
+                "reference": "ee8d807ab20fcb51267fdace50fbe3494c31e645"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-client-contracts/zipball/ee8d807ab20fcb51267fdace50fbe3494c31e645",
+                "reference": "ee8d807ab20fcb51267fdace50fbe3494c31e645",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/contracts",
+                    "name": "symfony/contracts"
+                },
+                "branch-alias": {
+                    "dev-main": "3.5-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Contracts\\HttpClient\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Test/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Generic abstractions related to HTTP clients",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/http-client-contracts/tree/v3.5.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-12-07T08:49:48+00:00"
+        },
         {
             "name": "symfony/http-foundation",
             "version": "v7.2.0",
@@ -3514,78 +3847,6 @@
             ],
             "time": "2024-10-18T07:58:17+00:00"
         },
-        {
-            "name": "symfony/webpack-encore-bundle",
-            "version": "v2.2.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/webpack-encore-bundle.git",
-                "reference": "e335394b68a775a9b2bd173a8ba4fd2001f3870c"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/webpack-encore-bundle/zipball/e335394b68a775a9b2bd173a8ba4fd2001f3870c",
-                "reference": "e335394b68a775a9b2bd173a8ba4fd2001f3870c",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=8.1.0",
-                "symfony/asset": "^5.4 || ^6.2 || ^7.0",
-                "symfony/config": "^5.4 || ^6.2 || ^7.0",
-                "symfony/dependency-injection": "^5.4 || ^6.2 || ^7.0",
-                "symfony/http-kernel": "^5.4 || ^6.2 || ^7.0",
-                "symfony/service-contracts": "^1.1.9 || ^2.1.3 || ^3.0"
-            },
-            "require-dev": {
-                "symfony/framework-bundle": "^5.4 || ^6.2 || ^7.0",
-                "symfony/http-client": "^5.4 || ^6.2 || ^7.0",
-                "symfony/phpunit-bridge": "^5.4 || ^6.2 || ^7.0",
-                "symfony/twig-bundle": "^5.4 || ^6.2 || ^7.0",
-                "symfony/web-link": "^5.4 || ^6.2 || ^7.0"
-            },
-            "type": "symfony-bundle",
-            "extra": {
-                "thanks": {
-                    "url": "https://github.com/symfony/webpack-encore",
-                    "name": "symfony/webpack-encore"
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Symfony\\WebpackEncoreBundle\\": "src"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Integration of your Symfony app with Webpack Encore",
-            "support": {
-                "issues": "https://github.com/symfony/webpack-encore-bundle/issues",
-                "source": "https://github.com/symfony/webpack-encore-bundle/tree/v2.2.0"
-            },
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2024-10-02T07:27:19+00:00"
-        },
         {
             "name": "symfony/yaml",
             "version": "v7.2.0",
@@ -3658,6 +3919,80 @@
             ],
             "time": "2024-10-23T06:56:12+00:00"
         },
+        {
+            "name": "twig/extra-bundle",
+            "version": "v3.18.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/twigphp/twig-extra-bundle.git",
+                "reference": "9746573ca4bc1cd03a767a183faadaf84e0c31fa"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/twigphp/twig-extra-bundle/zipball/9746573ca4bc1cd03a767a183faadaf84e0c31fa",
+                "reference": "9746573ca4bc1cd03a767a183faadaf84e0c31fa",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.0.2",
+                "symfony/framework-bundle": "^5.4|^6.4|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.4|^7.0",
+                "twig/twig": "^3.2|^4.0"
+            },
+            "require-dev": {
+                "league/commonmark": "^1.0|^2.0",
+                "symfony/phpunit-bridge": "^6.4|^7.0",
+                "twig/cache-extra": "^3.0",
+                "twig/cssinliner-extra": "^3.0",
+                "twig/html-extra": "^3.0",
+                "twig/inky-extra": "^3.0",
+                "twig/intl-extra": "^3.0",
+                "twig/markdown-extra": "^3.0",
+                "twig/string-extra": "^3.0"
+            },
+            "type": "symfony-bundle",
+            "autoload": {
+                "psr-4": {
+                    "Twig\\Extra\\TwigExtraBundle\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com",
+                    "homepage": "http://fabien.potencier.org",
+                    "role": "Lead Developer"
+                }
+            ],
+            "description": "A Symfony bundle for extra Twig extensions",
+            "homepage": "https://twig.symfony.com",
+            "keywords": [
+                "bundle",
+                "extra",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/twigphp/twig-extra-bundle/tree/v3.18.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-26T19:22:23+00:00"
+        },
         {
             "name": "twig/twig",
             "version": "v3.17.1",

config/bundles.php

@@ -3,7 +3,7 @@
 return [
     Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
     Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
-    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
     Nelmio\SecurityBundle\NelmioSecurityBundle::class => ['all' => true],
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
+    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
 ];

config/packages/asset_mapper.yaml

@@ -0,0 +1,11 @@
+framework:
+    asset_mapper:
+        # The paths to make available to the asset mapper.
+        paths:
+            - assets/
+        missing_import_mode: strict
+
+when@prod:
+    framework:
+        asset_mapper:
+            missing_import_mode: warn

config/packages/webpack_encore.yaml

@@ -1,45 +0,0 @@
-webpack_encore:
-    # The path where Encore is building the assets - i.e. Encore.setOutputPath()
-    output_path: '%kernel.project_dir%/public/build'
-    # If multiple builds are defined (as shown below), you can disable the default build:
-    # output_path: false
-
-    # Set attributes that will be rendered on all script and link tags
-    script_attributes:
-        defer: true
-        # Uncomment (also under link_attributes) if using Turbo Drive
-        # https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
-        # 'data-turbo-track': reload
-    # link_attributes:
-        # Uncomment if using Turbo Drive
-        # 'data-turbo-track': reload
-
-    # If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
-    # crossorigin: 'anonymous'
-
-    # Preload all rendered script and link tags automatically via the HTTP/2 Link header
-    # preload: true
-
-    # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
-    # strict_mode: false
-
-    # If you have multiple builds:
-    # builds:
-        # frontend: '%kernel.project_dir%/public/frontend/build'
-
-        # pass the build name as the 3rd argument to the Twig functions
-        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
-
-framework:
-    assets:
-        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
-
-#when@prod:
-#    webpack_encore:
-#        # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
-#        # Available in version 1.2
-#        cache: true
-
-#when@test:
-#    webpack_encore:
-#        strict_mode: false

importmap.php

@@ -0,0 +1,26 @@
+<?php
+
+/**
+ * Returns the importmap for this application.
+ *
+ * - "path" is a path inside the asset mapper system. Use the
+ *     "debug:asset-map" command to see the full list of paths.
+ *
+ * - "entrypoint" (JavaScript only) set to true for any module that will
+ *     be used as an "entrypoint" (and passed to the importmap() Twig function).
+ *
+ * The "importmap:require" command can be used to add new entries to this file.
+ */
+return [
+    'app' => [
+        'path' => './assets/app.js',
+        'entrypoint' => true,
+    ],
+    'normalize.css' => [
+        'version' => '8.0.1',
+    ],
+    'normalize.css/normalize.min.css' => [
+        'version' => '8.0.1',
+        'type' => 'css',
+    ],
+];

package.json

@@ -1,38 +0,0 @@
-{
-    "name": "website",
-    "version": "1.0.0",
-    "description": "(c) 2021- Jeroen De Meerleer <me@jeroened.be>",
-    "main": "webpack.config.js",
-    "directories": {
-        "lib": "lib"
-    },
-    "dependencies": {
-        "bootstrap": "^5.3",
-        "js-cookie": "^3.0"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.26",
-        "@babel/preset-env": "^7.26",
-        "@babel/plugin-proposal-class-properties": "^7.18",
-        "@symfony/webpack-encore": "^5.0",
-        "core-js": "^3.39",
-        "regenerator-runtime": "^0.14",
-        "sass": "^1.83",
-        "sass-loader": "^16.0",
-        "webpack": "^5.97",
-        "webpack-cli": "^5.1",
-        "webpack-notifier": "^1.15"
-    },
-    "license": "AGPL-3.0-or-later",
-    "private": true,
-    "scripts": {
-        "dev": "encore dev",
-        "watch": "encore dev --watch",
-        "build": "encore production --progress"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://git.jeroened.be/JeroenED/website.git"
-    },
-    "author": "Jeroen De Meerleer <me@jeroened.be>"
-}

src/Controller/DefaultController.php

@@ -14,7 +14,7 @@ class DefaultController extends AbstractController
     {
         $return = $page->getPage($slug);
         $response = new Response('', (int)$return['status']);
-        return $this->render('/page.html.twig', $return, $response);
+        return $this->render('app.html.twig', $return, $response);
     }
 
     #[Route('/error/{status}', name: 'error', requirements: ['status' => '[0-9]{3}'], priority: 2)]
@@ -22,6 +22,6 @@ class DefaultController extends AbstractController
     {
         $return = $page->getPage('error/' . $status);
         $response = new Response('', (int)$status);
-        return $this->render('/page.html.twig', $return, $response);
+        return $this->render('app.html.twig', $return, $response);
     }
 }

symfony.lock

@@ -11,6 +11,21 @@
             "config/packages/nelmio_security.yaml"
         ]
     },
+    "symfony/asset-mapper": {
+        "version": "7.2",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "6.4",
+            "ref": "5ad1308aa756d58f999ffbe1540d1189f5d7d14a"
+        },
+        "files": [
+            "assets/app.js",
+            "assets/styles/app.css",
+            "config/packages/asset_mapper.yaml",
+            "importmap.php"
+        ]
+    },
     "symfony/console": {
         "version": "6.0",
         "recipe": {
@@ -93,20 +108,7 @@
             "config/routes/web_profiler.yaml"
         ]
     },
-    "symfony/webpack-encore-bundle": {
+    "twig/extra-bundle": {
-        "version": "2.0",
+        "version": "v3.18.0"
-        "recipe": {
-            "repo": "github.com/symfony/recipes",
-            "branch": "main",
-            "version": "2.0",
-            "ref": "13ebe04e25085e2ff0bcb0f9218b561d8b5089f3"
-        },
-        "files": [
-            "assets/app.js",
-            "assets/styles/app.css",
-            "config/packages/webpack_encore.yaml",
-            "package.json",
-            "webpack.config.js"
-        ]
     }
 }

templates/app.html.twig

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="h-100">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>{{ title }}{% if title is not empty %} :: {% endif %}Jeroen De Meerleer</title>
+        {{ importmap('app') }}
+
+        {% if css is defined and css is not empty %}
+            {% for sheet in css %}
+                <link rel="stylesheet" href="{{ sheet.file }}" integrity="sha384-{{ sheet.sha384 }}">
+            {% endfor %}
+        {% endif %}
+
+        {% if js is defined and js is not empty %}
+            {% for script in js %}
+                <script src="{{ script.file }}" integrity="sha384-{{ script.sha384 }}"></script>
+            {% endfor %}
+        {% endif %}
+
+    </head>
+    
+    <body>
+        <div class="sidebar">
+            <header>
+                <div>
+                    {{ header | raw }}
+                </div>
+            </header>
+            <nav>
+                <div>
+                    {{ nav | raw }}
+                </div>
+            </nav>
+            <footer>
+                {{ footer | raw }}
+            </footer>
+        </div>
+
+        <main>
+            <div>
+                {{ content | raw }}
+            </div>
+        </main>
+    </body>
+</html>
+

templates/base.html.twig

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html class="h-100">
-    <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <title>{% block title %}{% endblock %}{% if block("title") is not empty %} :: {% endif %}Jeroen De Meerleer</title>
-
-        {% block styles %}{% endblock %}
-
-        {% block scripts %}{% endblock %}
-
-    </head>
-    
-    <body class="d-flex flex-column h-100">
-        {% block content %}{% endblock %}
-        {% block extrahtml %}{% endblock %}
-        <footer class="footer mt-auto py-2">
-            {% block footer %}{% endblock %}
-        </footer>
-    </body>
-</html>
-

templates/page.html.twig

@@ -1,42 +0,0 @@
-{% extends "base.html.twig" %}
-{% block title %}{{ title }}{% endblock %}
-{% block content %}
-    <nav>
-        <div class="container py-3">
-        {{ nav | raw }}
-        </div>
-    </nav>
-    <header>
-        <div class="container py-4">
-            {{ header | raw }}
-        </div>
-    </header>
-    <main class="flex-shrink-0">
-        <div class="container py-4">
-            {{ content | raw }}
-        </div>
-    </main>
-{% endblock %}
-
-{% block styles %}
-    {{ encore_entry_link_tags('page') }}
-    {% if css is defined and css is not empty %}
-        {% for sheet in css %}
-            <link rel="stylesheet" href="{{ sheet.file }}" integrity="sha384-{{ sheet.sha384 }}">
-        {% endfor %}
-    {% endif %}
-{% endblock %}
-
-{% block scripts %}
-    {{ encore_entry_script_tags('page') }}
-    {% if js is defined and js is not empty %}
-        {% for script in js %}
-            <script src="{{ script.file }}" integrity="sha384-{{ script.sha384 }}"></script>
-        {% endfor %}
-    {% endif %}
-{% endblock %}
-
-{% block footer %}
-    {{ footer | raw }}
-{% endblock %}
-

webpack.config.js

@@ -1,75 +0,0 @@
-const Encore = require('@symfony/webpack-encore');
-
-// Manually configure the runtime environment if not already configured yet by the "encore" command.
-// It's useful when you use tools that rely on webpack.config.js file.
-if (!Encore.isRuntimeEnvironmentConfigured()) {
-    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
-}
-
-Encore
-    // directory where compiled assets will be stored
-    .setOutputPath('public/build/')
-    // public path used by the web server to access the output path
-    .setPublicPath('/build')
-    // only needed for CDN's or subdirectory deploy
-    //.setManifestKeyPrefix('build/')
-
-    /*
-     * ENTRY CONFIG
-     *
-     * Each entry will result in one JavaScript file (e.g. app.js)
-     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
-     */
-    .addEntry('page', './assets/js/page.js')
-
-    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
-    //.enableStimulusBridge('./assets/controllers.json')
-
-    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
-    .splitEntryChunks()
-
-    // will require an extra script tag for runtime.js
-    // but, you probably want this, unless you're building a single-page app
-    .enableSingleRuntimeChunk()
-
-    /*
-     * FEATURE CONFIG
-     *
-     * Enable & configure other features below. For a full
-     * list of features, see:
-     * https://symfony.com/doc/current/frontend.html#adding-more-features
-     */
-    .cleanupOutputBeforeBuild()
-    //.enableBuildNotifications()
-    .enableSourceMaps(!Encore.isProduction())
-    // enables hashed filenames (e.g. app.abc123.css)
-    .enableVersioning(Encore.isProduction())
-
-    .configureBabel((config) => {
-        config.plugins.push('@babel/plugin-proposal-class-properties');
-    })
-
-    // enables @babel/preset-env polyfills
-    .configureBabelPresetEnv((config) => {
-        config.useBuiltIns = 'usage';
-        config.corejs = '3.23';
-    })
-
-    // enables Sass/SCSS support
-    .enableSassLoader()
-
-    // uncomment if you use TypeScript
-    //.enableTypeScriptLoader()
-
-    // uncomment if you use React
-    //.enableReactPreset()
-
-    // uncomment to get integrity="..." attributes on your script & link tags
-    // requires WebpackEncoreBundle 1.4 or higher
-    .enableIntegrityHashes()
-
-    // uncomment if you're having problems with a jQuery plugin
-    //.autoProvidejQuery()
-;
-
-module.exports = Encore.getWebpackConfig();