Add misc section with full per-page strings translation support, 88x31 page and bookmarks page.

.eleventy.js

@@ -1,7 +1,29 @@
+const fs = require("fs");
+const path = require("path");
+
 module.exports = function(eleventyConfig) {
   eleventyConfig.addCollection("post", function(collectionApi) {
     return collectionApi.getFilteredByGlob("./posts/*").sort((a, b) => b.date - a.date);
   });
+  eleventyConfig.addCollection("misc", (api) =>
+    api.getFilteredByTag("misc")
+  );
+  eleventyConfig.addFilter("getTranslation", (page, lang) => {
+    const dir = path.dirname(page.inputPath);
+    const file = path.join(dir, `${lang}.json`);
+    
+    if (fs.existsSync(file)) {
+      return JSON.parse(fs.readFileSync(file, "utf-8"));
+    }
+  
+    return {};
+  });
+  eleventyConfig.addCollection("88x31", () => {
+    return fs.readdirSync("static/images/88x31")
+    .map(file => ({
+      url: `/static/images/88x31/${file}`
+    }));
+  });
 
 eleventyConfig.addPassthroughCopy("static");
 
@@ -16,10 +38,10 @@ eleventyConfig.addNunjucksFilter("alternateLanguages", function(collection, post
   }))
 });
 
-  eleventyConfig.addFilter("absoluteUrl", function(path) {
+eleventyConfig.addFilter("absoluteUrl", function(path) {
-    const base = "https://adrianvic.github.io";
+  const base = "https://adrianvic.github.io";
-    return base + path;
+  return base + path;
-  });
+});
 
 eleventyConfig.addNunjucksFilter("smartTitle", function(str) {
   if (!str) return "";
@@ -30,7 +52,7 @@ eleventyConfig.addNunjucksFilter("smartTitle", function(str) {
       return smallWords.includes(word) ? word : word.charAt(0).toUpperCase() + word.slice(1);
     }).join(" ");
   });
-    return {
+  return {
     dir: {
       output: "docs"
     }

_data/i18n.js

@@ -56,7 +56,8 @@ module.exports = {
     hideBackground: "Hide background",
     options: "Options",
     alsoAvailableAsVideo: "Also available as video",
-    websiteDescription: "Personal website/blog of Adrian Victor."
+    websiteDescription: "Personal website/blog of Adrian Victor.",
+    miscellaneous: "Miscellaneous"
   },
   pt: {
     language: "português",
@@ -100,6 +101,7 @@ module.exports = {
     hideBackground: "Esconder imagem de fundo",
     options: "Opções",
     alsoAvailableAsVideo: "Também disponível em vídeo",
-    websiteDescription: "Website/blog pessoal de Adrian Victor."
+    websiteDescription: "Website/blog pessoal de Adrian Victor.",
+    miscellaneous: "Miscelâneo"
   }
 };

_includes/base.njk

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/static/main.css?fixcache=1">
     <script src="/static/scripts/ccd.js"></script>
     <script src="/static/scripts/main.js" defer></script>
+    <script src="/static/scripts/88x31.js" defer></script>
     <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
@@ -24,6 +25,13 @@
             opacity: {{ backgroundOpacity or ".4" }}!important;
         }
     </style>
+    <noscript>
+        <style>
+            .i88x31:hover {
+                transform: scale(2);
+            }
+        </style>    
+    </noscript>
     <div id="everythingHelper">
         <img src="/static/images/{{ background or "bear.jpg" }}" class="bg">
         {% include "header.njk" %}

_includes/header.njk

@@ -18,6 +18,7 @@
         <ul id="headerLinks">
             <a href="/{{ langKey }}/">{{ i18n[langKey].home }}</a>
             <a href="/{{ langKey }}/blog/">blog</a>
+            <a href="/{{ langKey }}/misc/">misc</a>
         </ul>
     </div>
 </header>

index.njk

@@ -22,6 +22,14 @@ layout: base.njk
     <div class="hs" id="hsDefault">
         <h1 id="homeTitle">{{ i18n[langKey].welcome | smartTitle }}</h1>
         <p>{{ i18n[langKey].homeWelcomeParagraph | safe }}</p>
+        <img class="i88x31" src="/static/images/88x31/tenkuma.gif">
+        <img class="i88x31" src="/static/images/88x31/anybrowser6.gif">
+        <img class="i88x31" src="/static/images/88x31/ai.gif">
+        <img class="i88x31" src="/static/images/88x31/WEBP.gif">
+        <img class="i88x31" src="/static/images/88x31/rainbowrain.gif">
+        <img class="i88x31" src="/static/images/88x31/rave.gif">
+        <img class="i88x31" src="/static/images/88x31/blasphemy.gif">
+
         <h2>{{ i18n[langKey].socialsAndContact | smartTitle }}</h2>
         <p>{{ i18n[langKey].homeSocialsAndContactParagraph | safe }}</p>
         <p>{{ i18n[langKey].homeSocialsAndContactParagraphTwo | safe }}</p>
@@ -36,7 +44,7 @@ layout: base.njk
         <p>{{ i18n[langKey].homeMyVideoParagraph | safe }}</p>
         <p>{{ i18n[langKey].homeMyVideoRandomVideoParagraph | safe }}</p>
         <a href="https://www.youtube.com/watch?v=6bnNAnSY9Uo">
-            <div class="blogpostYoutubeVideo">
+            <div style="margin-bottom: 1em;" class="blogpostYoutubeVideo">
                 <img src="/static/images/thumbnails/fl_studio_linux.png">
                 <div class="videoHeader">
                     <h2 class="videoTitle">{{ i18n[langKey].homeVideoTitle | safe }}</h2>

misc.njk

@@ -0,0 +1,33 @@
+---
+pagination:
+  data: i18n
+  size: 1
+  alias: langKey
+permalink: "/{{ langKey }}/misc/index.html"
+layout: base.njk
+title: Adrian Victor:Misc
+---
+
+<main>
+  <h1>{{ i18n[langKey].miscellaneous }}</h1>
+  <ul>
+    <dl>
+      {% for page in collections.misc %}
+        {% set t = page | getTranslation(langKey) %}
+
+        <dt>
+          <a href="/{{ langKey }}/misc/{{ page.fileSlug }}/">
+            {{ page.data.pageTitle or t.pageTitle }}
+          </a>
+        </dt>
+
+        <dd>
+          {% if page.data["88x31"] %}
+            <img src="/static/images/88x31/{{ page.data["88x31"] }}"><br>
+          {% endif %}
+          {{ t.pageDescription }}
+        </dd>
+      {% endfor %}
+    </dl>
+  </ul>
+</main>

misc/88x31/en.json

@@ -0,0 +1,6 @@
+{
+  "pageDescription": "My collection of 88x31 GIFs and images.",
+  "intro": "This is the collection of 88x31 GIFs and images I've downloaded across the web.",
+  "others": "Others",
+  "me": "Made by me"
+}

misc/88x31/index.njk

@@ -0,0 +1,26 @@
+---
+layout: base.njk
+pagination:
+  data: languages
+  size: 1
+  alias: langKey
+<!-- 88x31: WEBP.gif -->
+pageTitle: 88x31
+tags: misc
+---
+
+<main>
+  <div class="box pageHeaderBox">
+    <h1>88x31</h1>
+    <p>{{ t.intro }}</p>
+  </div>
+  <hr>
+    <h2>{{ t.me }}</h2>
+    <img class="i88x31" src="/static/images/88x31/tenkuma.gif">
+  <h2>{{ t.others }}</h2>
+  <div class="">
+    {% for image in collections.88x31 %}
+    <img class="i88x31" src="{{ image.url }}">
+    {% endfor %}
+  </div>
+</main>

misc/88x31/pt.json

@@ -0,0 +1,6 @@
+{
+    "pageDescription": "Minha coleção de GIFs e imagens 88x31.",
+    "intro": "Essa é uma coleção de GIFs e imagens 88x31 que eu baixei pela internet.",
+    "others": "Outros",
+    "me": "Feitos por mim"
+}

misc/bookmarks/common.json

@@ -0,0 +1,43 @@
+{
+    "links": {
+        "downloads": [
+            {
+                "name": "MalwareWatch",
+                "link": "https://malwarewatch.org/",
+                "description": {
+                    "pt": "Website do Enderman. Tem download de vários softwares úteis, imagens de sistemas operacionais e malware.",
+                    "en": "Enderman's website. Provides download to various useful softwares, operating system images and malware."
+                }
+            },
+            {
+                "name": "88x31",
+                "link": "https://88x31.nl/",
+                "description": {
+                    "pt": "Essa é uma coleção de mais de 6500 GIFs e PNGs no formato 88x31. No final dos anos 1990 e começo dos 2000 era muito comum usar essas imagens no seu site pessoal.",
+                    "en": "This website is a collection with over 6500 GIF's and PNG's in 88x31 format. In the late 1990 and begin of the 2000's it was very common to use these pictures on your personal website."
+                },
+                "88x31": [
+                    "WEBP.gif"
+                ]
+            }
+        ],
+        "profiles": [
+            {
+                "name": "Mr. Nando",
+                "link": "https://www.youtube.com/@mrnandokk",
+                "description": {
+                    "pt": "Meu amigo Fernando, ele faz músicas e vídeos de Minecraft e speedrun.",
+                    "en": "My friend Fernando, he makes music and YouTube videos of Minecraft and speedrun."
+                }
+            },
+            {
+                "name": "Endermanch",
+                "link": "https://enderman.ch/",
+                "description": {
+                    "pt": "Andrew é um engenheiro de software, entusiasta de malware e, mais importante, uma estranha e alta criatura. Cresci com os seus videos e ele é uma grande inspiração para mim.",
+                    "en": "Andrew is a software engineer, a malware enthusiast and most importantly, a weird tall creature. I've grown up with his videos and he's a great inspiration for me."
+                }
+            }
+        ]
+    }
+}

misc/bookmarks/en.json

@@ -0,0 +1,6 @@
+{
+	"pageTitle": "Bookmarks",
+	"pageDescription": "Minha coleção de sites e páginas interessantes.",
+	"profiles": "Profiles",
+	"downloads": "Downloads"
+}

misc/bookmarks/index.njk

@@ -0,0 +1,36 @@
+---
+layout: base.njk
+pagination:
+  data: languages
+  size: 1
+  alias: langKey
+tags: misc
+background: towers.jpg
+backgroundOpacity: .2
+---
+
+<main>
+  <div class="box pageHeaderBox">
+    <h1>{{ t.pageTitle }}</h1>
+    <p>{{ t.intro }}</p>
+    <img class="i88x31" src="/static/images/88x31/BOOKMARKthispageNOW.png" alt="">
+  </div>
+  <hr>
+  {% for sectionName, section in c.links %}
+  <h2>{{ t[sectionName] }}</h2>
+  <dl>
+    {% for link in section %}
+    <dt><a href="{{ link.link }}">{{ link.name }}</a></dt>
+    <dd>
+      {% if link.88x31 %}
+      {% for 88x31 in link.88x31 %}
+      <img class="i88x31" style="margin-top: .6em;" src="/static/images/88x31/{{ 88x31 }}">
+      {% endfor %}
+      <br>
+      {% endif %}
+      {{ link.description[langKey] }}
+    </dd>
+    {% endfor %}
+  </dl>
+  {% endfor %}
+</main>

misc/bookmarks/pt.json

@@ -0,0 +1,7 @@
+{
+	"pageTitle": "Favoritos",
+	"pageDescription": "Minha coleção de sites e páginas interessantes.",
+	"profiles": "Perfis",
+	"downloads": "Downloads",
+	"intro": "Essa é a lista de links favoritos curada por mim, dividida em seções para facilitar a navegação ;-)"
+}

misc/misc.11tydata.js

@@ -0,0 +1,34 @@
+const fs = require("fs");
+const path = require("path");
+
+module.exports = {
+    eleventyComputed: {
+        t: (data) => {
+            const dir = path.dirname(data.page.inputPath);
+            
+            const file = path.join(dir, `${data.langKey}.json`);
+            if (fs.existsSync(file)) {
+                return JSON.parse(fs.readFileSync(file, "utf-8"));
+            }
+            
+            return {};
+        },
+        c: (data) => {
+            const dir = path.dirname(data.page.inputPath);
+            
+            const file = path.join(dir, `common.json`);
+            if (fs.existsSync(file)) {
+                return JSON.parse(fs.readFileSync(file, "utf-8"));
+            }
+            
+            return {};
+        }
+    },
+    
+    
+    languages: ["en", "pt"],
+    permalink: data => {
+        return `/${data.langKey}/misc/${data.page.fileSlug}/`;
+    },
+    tags: "misc"
+};

static/main.css

@@ -147,7 +147,7 @@ blockquote, main p {
 }
 
 main h1, main h2 {
-    margin-bottom: .5em;
+    /* margin-bottom: .2em; */
 }
 
 main h2 {
@@ -163,6 +163,28 @@ blockquote {
     margin-left: 2.8em;
 }
 
+hr {
+    border-bottom: thick solid rgba(255, 255, 255, 0.1);
+    box-shadow: 
+    2px 7px 5px rgba(0,0,0,0.3),
+    0px -4px 10px rgba(0,0,0,0.3);
+    /* margin: .5em 0; */
+}
+
+.box {
+    border: thick solid rgba(255, 255, 255, 0.1);
+    padding: 1em;
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+.box *:last-child {
+    margin-bottom: 0;
+}
+
+.pageHeaderBox {
+    border-bottom: 0;
+}
+
 #headerSubtitle {
     color: white;
     opacity: 0.6;
@@ -760,6 +782,15 @@ hs {
     margin-bottom: 1em;
 }
 
+.i88x31 {
+    transition: .2s;
+    image-rendering: pixelated;
+}
+
+.i88x31.selected {
+    transform: scale(2);
+}
+
 @keyframes ellipsis-loader {
     0%, 25% {
         transform: translateX(0);

static/scripts/88x31.js

@@ -0,0 +1,13 @@
+const images = document.querySelectorAll(".i88x31");
+
+images.forEach(image => {
+    image.addEventListener("click", () => {
+        const selected = document.querySelectorAll(".i88x31.selected");
+        selected.forEach(s => {
+            if (s != image) {
+                s.classList.toggle("selected");
+            }
+        })
+        image.classList.toggle("selected");
+    })
+})