restructure layouts and includes to be written around njk blocks

_data/88x31.toml

@@ -1,15 +1,16 @@
 [buttons]
 people = [
-    { image = "soniweb", name = "soniweb", link = "https://soniweb.org/" },
+    { image = "soniweb", name = "soniweb [en]", link = "https://soniweb.org/" },
-    { image = "https://vanityruins.neocities.org/8831/8831.gif", name = "vanityruins", link = "https://vanityruins.neocities.org" },
+    { image = "https://vanityruins.neocities.org/8831/8831.gif", name = "vanityruins [en]", link = "https://vanityruins.neocities.org" },
-    { image = "https://saint-images.neocities.org/images/buttons/me-zanarkand.png", name = "saint-images", link = "https://saint-images.neocities.org"},
+    { image = "https://saint-images.neocities.org/images/buttons/me-zanarkand.png", name = "saint-images [en]", link = "https://saint-images.neocities.org"},
-    { image = "cidoku", name = "Cidoku", link = "https://cidoku.net" }
+    { image = "cidoku", name = "Cidoku [es] [en]", link = "https://cidoku.net" }
 ]
 
 misc = [
-    { image = "bookmarkme", alt = "bookmark this page NOW!" },
+    { image = "puyopuyo2", alt = "puyo puyo witch!!", author = "Cidoku" },
     { image = "blink", alt = "blinking eyes" },
     { image = "parentaladvisory", alt = "PARENTAL ADVISORY: i say FUCK a lot" },
+    { image = "bookmarkme", alt = "bookmark this page NOW!" },
     { image = "4everfriend", alt = "4everfriend!!" }
 ]
 

_data/locale.toml

@@ -1,6 +1,14 @@
+[home]
+en = "home"
+es = "inicio"
+
+[lang-available]
+en = "esta página también está disponible en"
+es = "this page also available in"
+
 [license]
 en = "Do What The Fuck You Want To Public License"
-es = "WTFPL"
+es = "Licencia Pública WTFPL"
 
 [please-visit]
 en = "please visit..."
@@ -9,3 +17,15 @@ es = "visita también..."
 [recent-posts]
 en = "recent posts"
 es = "posts recientes"
+
+[listening-to]
+en = "listening to..."
+es = "estoy escuchando..."
+
+[mobile-warning]
+en = "this site is NOT optimized for mobile (yet). the groundwork is laid but i have not finished the css so things will look very ugly for you. sorry!!"
+es = "aún NO optimizo el sitio para verlo en celulares o pantallas más chicas. aunque escribí el html pensando también en soportar celulares, la parte de css no está hecha así que se verá bien feo para ti. sorry!!"
+
+[button-author]
+en = "button by"
+es = "botón hecho por"

_includes/default_footer.njk

@@ -0,0 +1,13 @@
+<div class="footer-flex">
+    <div class="footer-left">
+        {% if show-lang-in-footer %}
+            {% include "lang-available.njk" %}
+        {% endif %}
+    </div>
+    <div class="footer-middle">
+        <div class="nekojiru-angel"></div>
+    </div>
+    <div class="footer-right">
+        <p>{% for button in 88x31.buttons.misc.slice(0, 3) %}<img src="/img/buttons/{{ button.image }}.gif" alt="{{ button.alt }}" {% if button.author %}title="{{ "button-author" | i18n }} {{ button.author }}"{% endif %}>{% endfor %}<br>est. 2025 | yuki &#169; <a href="/LICENSE.txt">{{ "license" | i18n }}</a></p>
+    </div>
+</div>

_includes/default_header.njk

@@ -0,0 +1,11 @@
+<div class="header">
+    <h1>{{ meta.sitename }}</h1>
+    <a href={{ "/" | locale_url }}><div class="header-banner" title="{{ "home" | i18n }}"></div></a>
+    <!--<div class="motd">
+        <marquee behavior="scroll" direction="left">
+            <p>{{ meta.motd }}</p>
+        </marquee>
+    </div>-->
+</div>
+
+{% include "default_navbar.njk" %}

_includes/footer.njk

@@ -1 +0,0 @@
-<p>{% for button in 88x31.buttons.misc.slice(0, 3) %}<img src="/img/buttons/{{ button.image }}.gif" alt="{{ button.alt }}">{% endfor %}<br>est. 2025 | yuki &#169; <a href="/LICENSE.txt">{{ "license" | i18n }}</a> </p>

_includes/general.scss

@@ -1,5 +1,7 @@
 @use "main-palette.scss" as mp;
 
+$breakpoint: 768px;
+
 * {
     margin: 0;
     box-sizing: border-box;
@@ -11,4 +13,15 @@
     max-width: 802px;
     margin: 8px auto;
     border: 1px solid mp.$border;
+
+    /* DEATH TO ANTIALIASING */
+    img, .header-banner, #nav-hover {
+        image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
+        image-rendering: -moz-crisp-edges;          /* Firefox                        */
+        image-rendering: -o-crisp-edges;            /* Opera                          */
+        image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
+        image-rendering: pixelated;                 /* Universal support since 2021   */
+        image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
+        -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
+    }
 }

_includes/lang-available.njk

@@ -0,0 +1,3 @@
+{% for link in page.url | locale_links %}
+<p class="lang-available" lang="{{ link.lang }}">{{ "lang-available" | i18n }} <a href="{{ link.url }}" hreflang="{{ link.lang }}">{{ link.label | lower }}</a></p>
+{% endfor %}

_layouts/base.njk

@@ -1,40 +1,39 @@
----
-lastfm: false
----
 <!DOCTYPE html>
 <html lang="{{ lang }}">
     <head>
-        {% include "base_head.njk" %}
+        {% block head %}
+            {% include "base_head.njk" %}       
+        {% endblock head %}
     </head>
     <body>
         <div class="main-page-wrapper">
             <div class="header-wrapper">
-                <div class="header">
+                {% block header %}
-                    <h1>{{ meta.sitename }}</h1>
+                    {% include "default_header.njk" %}
-                    <a href="/"><div class="header-banner" title="{{ meta.sitename }}"></div></a>
+                {% endblock header %}    
-                    <!--<div class="motd">
-                        <marquee behavior="scroll" direction="left">
-                            <p>{{ meta.motd }}</p>
-                        </marquee>
-                    </div>-->
-                </div>
-
-                {% include "default_navbar.njk" %}
             </div>
-            
+            <div id="mobile-warning" class="warning">
+                <p>{{ "mobile-warning" | i18n }}</p>
+            </div>
+
             <div class="base-content-wrapper">
-                {{ content | safe }}
+                {% block content %}
+                    <!-- default fallback -->
+                {% endblock content %}
             </div>
 
             <footer>
-                <marquee behavior="scroll" direction="left">
+                {% block footer %}
-                    <a href="https://www.youtube.com/embed/w1dXpAJ1qfA" target="_blank"><img src="/img/Witch-on-broom.gif" alt=""></a>
+                    {% if flight %}
-                </marquee>
+                        <marquee behavior="scroll" direction="left">
-                {% include "footer.njk" %}
+                            <a href="{{ flight.url }}" target="_blank"><img src="{{ flight.img }}" alt=""></a>
+                        </marquee>
+                    {% endif %}
+                    {% include "default_footer.njk" %}
+                {% endblock footer %}
             </footer>
         </div>
-    {% if lastfm %}
+    
-    <script src="/js/lastfm.js"></script>
+    {% block scripts %}{% endblock scripts %}
-    {% endif %}
     </body>
 </html>

_layouts/home.njk

@@ -1,44 +1,53 @@
 ---
-layout: base
-title: home
 lastfm: true
+flight: 
+    img: "/img/Witch-on-broom.gif"
+    url: "https://www.youtube.com/embed/w1dXpAJ1qfA"
 ---
-<div class="welcome-aside-left">
+{% extends "_layouts/base.njk" %}
-    <div id="listening"></div>
+
-    <!-- TODO: fake ad
+{% block content %}
-    <div class="leftside-fake-ad"></div>
+        <div class="welcome-aside-left">
-    -->
+        <div id="listening" title="{{ "listening-to" | i18n }}"></div>
-    <div class="buttons-wrapper box">
+        <!-- TODO: fake ad
-        <h2>{{ "please-visit" | i18n }}</h2>
+        <div class="leftside-fake-ad"></div>
-        <div class="buttons">
+        -->
-            {% for button in 88x31.buttons.people.slice(0, 5) %}
+        <div class="buttons-wrapper box">
-            <a href="{{ button.link }}" target="_blank" title="{{ button.name }}">
+            <h2>{{ "please-visit" | i18n }}</h2>
-            {% if button.image.startsWith("http") %}
+            <div class="buttons">
-                <img src="{{ button.image }}" alt="{{ button.name }}">
+                {% for button in 88x31.buttons.people.slice(0, 5) %}
-            {% else %}
+                <a href="{{ button.link }}" target="_blank" title="{{ button.name }}">
-                <img src="/img/buttons/{{ button.image }}.gif" alt="{{ button.name }}">
+                {% if button.image.startsWith("http") %}
-            {% endif %}
+                    <img src="{{ button.image }}" alt="{{ button.name }}">
-            </a>
+                {% else %}
-            {% endfor %}
+                    <img src="/img/buttons/{{ button.image }}.gif" alt="{{ button.name }}">
+                {% endif %}
+                </a>
+                {% endfor %}
+            </div>
         </div>
     </div>
-</div>
 
-<div class="welcome-content">
+    <div class="true-content welcome-content">
-    {{ content | safe }}
+        {{ content | safe }}
-    <img src="/img/nekojiru.png">
-</div>
-
-<div class="welcome-aside-right">
-    <div class="recent-posts box">
-        <h2>{{ "recent-posts" | i18n }}</h2>
-        <ul>
-        {% for post in collections.post | i18n_filter(5) %}
-            <li><p><a href="{{ post.url }}">{{ post.data.title }}</a> | <span class="date"> {{ post.date.toLocaleString("en-GB", {year: 'numeric', month: '2-digit', day: '2-digit'}) }}</span></p></li>
-        {% endfor %}
-        </ul>
     </div>
-    <!-- TODO: rightside home image
+
-    <img src="/img/home_rightside.jpg" id="rightside">
+    <div class="welcome-aside-right">
-    -->
+        <div class="recent-posts box">
-</div>
+            <h2>{{ "recent-posts" | i18n }}</h2>
+            <ul>
+            {% for post in collections.post | i18n_filter(5) %}
+                <li><p><a href="{{ post.url }}">{{ post.data.title }}</a><br><span class="date"> {{ post.date.toLocaleString("en-GB", {year: 'numeric', month: '2-digit', day: '2-digit'}) }}</span></p></li>
+            {% endfor %}
+            </ul>
+        </div>
+        <!-- TODO: better rightside home image -->
+        <img src="/img/home_rightside.jpg" id="rightside">
+    </div>
+{% endblock content %}
+
+{% block scripts %}
+    {% if lastfm %}
+        <script src="/js/lastfm.js"></script>
+    {% endif %}
+{% endblock scripts %}

_layouts/post.njk

@@ -1,4 +1,8 @@
 ---
-layout: base
+# TODO: finish post page
 tags: post
 ---
+{% extends "_layouts/base.njk" %}
+{% block content %}
+    {{ content | safe }}
+{% endblock content %}

css/main.scss

@@ -4,6 +4,14 @@
 @use "fonts";
 @use "main-palette" as mp;
 
+$psize: 0.8em;
+$h1size: 1.8em;
+$h2size: 1.6em;
+$h3size: 1.4em;
+$h4size: 1.2em;
+$h5size: 1.1em;
+$h6size: 1em;
+
 body {
     color: mp.$text;
     background-color: mp.$bg;
@@ -15,8 +23,33 @@ body {
 
     p {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-        font-size: 0.8em;
+        font-size: $psize;
     }
+
+    h1, h2, h3, h4, h5, h6 {
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-weight: bold;
+        text-decoration: underline;
+        text-decoration-color: mp.$border;
+    }
+
+    h1 { font-size: $h1size; }
+    h2 { font-size: $h2size; }
+    h3 { font-size: $h3size; }
+    h4 { font-size: $h4size; }
+    h5 { font-size: $h5size; }
+    h6 { font-size: $h6size; }
+
+    .warning {
+        padding: 2px;
+        margin: 2px auto;
+        text-align: center;
+        border-top: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
+        border-bottom: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
+        background: c.adjust($color: mp.$border, $saturation: 15%, $lightness: -20%);
+    }
+
+    @media (min-width: general.$breakpoint) { #mobile-warning { display: none; }}
 }
 
 .header-wrapper {
@@ -111,9 +144,10 @@ body {
         margin: 10px;
 
         h2 {
-            padding: 2px;
+            padding: 3px 6px;
             margin-bottom: 4px;
             border-bottom: 1px solid mp.$border;
+            text-decoration: none;
             font-family: fonts.$ll;
             font-size: 1em;
             background: mp.$bg;
@@ -127,8 +161,7 @@ body {
         .now-playing-wrapper {
             width: 190px;
 
-            h2 { margin-bottom: 0px; }
+            h3, a { text-decoration: none; }
-            a { text-decoration: none; }
 
             #trackInfo {
                 display: flex;
@@ -177,13 +210,7 @@ body {
         }
     }
 
-    .welcome-content {
+    .welcome-content { margin: 8px 4px; }
-        margin: 8px 4px;
-        h1 {
-            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-            font-size: 1em;
-        }
-    }
 
     .welcome-aside-right {
         width: max-content;
@@ -195,12 +222,11 @@ body {
             width: 190px;
             ul {
                 list-style: none;
-                padding: 0 0 4px 0;
+                padding: 0 2px 4px 2px;
                 list-style: none;
                 text-align: center;
                 .date {
-                    vertical-align: middle;
+                    font-size: 0.7em;
-                    font-size: 0.9em;
                     color: c.adjust($color: mp.$text, $lightness: -10%);
                 }
             }
@@ -212,11 +238,54 @@ body {
         } 
         */
     }
+
+    .true-content {
+        h1, h2, h3, h4, h5, h6 { margin: 2px 4px; }
+        p { margin: 8px 4px; }
+        ul {
+            /* TODO: better list image
+            list-style-image: url(/img/icons/apple.png); */
+            list-style-type: disc;
+            li {
+                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+                font-size: $psize;
+                margin: auto;
+            }
+        }
+        img { 
+            display: block;
+            margin: 12px auto;
+        }
+    }
 }
 
-footer p {
+footer {
-    margin: 2px;
+    p {
-    font-size: 0.7em;
+        margin: 2px;
-    text-align: right;
+        font-size: 0.7em;
+        text-align: right;
+    }
+    .footer-flex {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        width: 100%;
+        .footer-left {
+            margin: auto 0px 0px 0px;
+        }
+        .footer-middle .nekojiru-angel { 
+            background-image: url("/img/nekojiru.png");
+            width: 64px;
+            height: 64px;
+            margin: auto 0px 0px 0px;
+            vertical-align: bottom;
+            &:hover { background-image: url("/img/nekojiruhalo.png"); }
+        }
+        
+        .footer-right {
+            margin: auto 0px 0px 0px;
+        }
+    }
 }
 

eleventy.config.js

@@ -26,7 +26,8 @@ module.exports = function(eleventyConfig) {
 
     eleventyConfig.addPlugin(eleventySass);
     eleventyConfig.addPlugin(I18nPlugin, {
-        defaultLanguage: "en"
+        defaultLanguage: "en",
+        errorMode: "allow-fallback" // /en/ -> /
     });
     eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));
 
@@ -40,7 +41,7 @@ module.exports = function(eleventyConfig) {
         translations,
         fallbackLocales: {
             "*": "en",
-        },
+        }
     });
 
     return {

en/index.md

@@ -1,5 +1,12 @@
 ---
+title: home
 layout: home
 ---
-# hey...
+#### hey...
-welcome to my site!! not much is done yet but please have a look around.
+welcome to my site!! as with every website this is a heavy work in progress. however my priorities right now are:
+- atom feed
+- mobile support
+- 404 page
+- all pages marked as "under construction"
+
+![rakka hairbush fail](/img/rakka-hairbrush-fail.gif)

es/index.md

@@ -1,5 +1,12 @@
 ---
 layout: home
+title: home
 ---
-# oye...
+#### holaaa
-bienvenido a mi sitio!! aun no lo termino pero revisa lo que tenga hecho <3
+bienvenid@ a mi sitio!! aun no lo termino pero revisa lo que tenga hecho <3 pienso terminar primero:
+- un feed rss (atom)
+- mejor soporte para celulares
+- página 404
+- terminar todas las páginas marcadas como "en construcción"
+
+![rakka hairbush fail](/img/rakka-hairbrush-fail.gif)

js/lastfm.js

@@ -23,7 +23,7 @@ const getTrack = async () => {
     // ARTIST: json.track.artist['#text']
 
     document.getElementById("listening").innerHTML = `
-    <div class="now-playing-wrapper box" title="listening to...">
+    <div class="now-playing-wrapper box">
         <!--<h2>listening to:</h2>-->
             <a href="https://fm.yuki.k4w411.net/" target="_blank">
                 <div id="trackInfo">