Add webresources misc page

site/misc/webresources/en.json

@@ -0,0 +1,8 @@
+{
+    "pageTitle": "Web assets",
+	"pageDescription": "My library of assets/scripts for websites.",
+    "intro": "This page's dedicated to showcasing some stuff I made for websites that may also be useful to you. Everything's on public domain unless otherwise stated, and atributtion is very appreciated ;-)",
+    "tumblrAdapt": "A script that detects if the URL attribute <i>tumblr</i> is <i>true</i> and adapts the website design to dodge Tumblr menu, useful if you point your blog HTML to your website (doable with iframe). It also sanitizes external links adding <i>target=\"_blank\"</i> (opens in a new tab) and preserves the <i>tumblr</i> attribute in each link.",
+    "click": "Script that plays a custom sound when you click the page or hover a link. The code checks <i>disablesfx</i> on localstorage, if it's <i>true</i> the sound does not play. Localstorage is checked when playing the audio, so it's possible to enable/disable it without reloading the page.",
+    "ccd": "Triggered when the user types the famous Konami Code inside the page and redirects to another page. The script name is an abbreviation of Konami Code, but with a C instead of K to be less obvious. It's pretty easy to modify it do other stuff."
+}

site/misc/webresources/index.njk

@@ -0,0 +1,123 @@
+---
+layout: text.njk
+pagination:
+  data: languages
+  size: 1
+  alias: langKey
+---
+{% from "macros.njk" import i88x31 with context %}
+
+<main>
+  <div class="box pageHeaderBox">
+    <h1>{{ t.pageTitle }}</h1>
+    <p>{{ t.intro }}</p>
+  </div>
+  <hr>
+
+  <style>
+    pre.language-js {
+      height: 10em;
+      resize: vertical;
+    }
+  </style>
+
+  <h2>tumblr-adapt.js</h2>
+  <p>{{ t.tumblrAdapt | safe }}</p>
+  {% highlight 'js'%}const isTumblr = new URLSearchParams(location.search).get("tumblr") == "true"; // add ?tumblr=true to the tumblr iframe src attribute
+
+function adaptToTumblrLayout() {
+    const header = document.querySelector('header'); // change to anything that would return your header
+    header.classList.add("tumblr"); // your CSS must handle the rest
+
+    // will calc the size of the header and save as a CSS variable called --header-height
+    const setHeaderOffset = () => {
+      const height = header.offsetHeight + "px";
+      document.documentElement.style.setProperty('--header-height', height);
+    };
+
+    // do this once and when the page resizes
+    setHeaderOffset();
+    window.addEventListener('resize', setHeaderOffset);
+    
+    // sanitizing links so they don't open in your tumblr iframe
+    // also making sure all links carry the tumblr property!
+    document.querySelectorAll("a").forEach(link => {
+        if (new URL(link.href).host !== location.host) {
+            link.target = "_blank";
+        }
+        const u = new URL(link.href);
+        u.searchParams.set("tumblr", "true");
+        link.href = u.toString();
+    });
+}
+
+if (isTumblr) adaptToTumblrLayout();
+
+/* 
+    By tenkuma ^^
+    https://adrianvic.github.io
+    For those thumblrs that change the blog HTML for an iframe poiting to your personal website!
+*/{% endhighlight %}
+
+<h2>click.js</h2>
+<p>{{ t.click | safe }}</p>
+
+{% highlight 'js' %}// these must be URLs pointing to your audio!
+const click = new Audio(`https://adrianvic.github.io/static/audio/click.ogg`);
+const hover = new Audio(`https://adrianvic.github.io/static/audio/hover.ogg`);
+click.preload = "auto";
+hover.preload = "auto";
+
+// adjust volume below
+click.volume = 0.5;
+hover.volume = 0.5;
+
+
+document.body.addEventListener("click", () => {
+    // set disablesfx in the local storage to true to
+    // disable sound effects
+    if (localStorage.getItem("disablesfx") == 'true') return;
+    
+    click.currentTime = 0;
+    click.play().catch(() => {});
+});
+
+document.querySelectorAll('a').forEach(link => {
+    link.addEventListener("mouseenter", () => {
+        if (localStorage.getItem("disablesfx") == 'true') return;
+        hover.currentTime = 0;
+        hover.play().catch(() => {});
+    })
+})
+
+/* 
+    By tenkuma ^^
+    https://adrianvic.github.io
+    For those thumblrs that change the blog HTML for an iframe poiting to your personal website!
+*/{% endhighlight %}
+
+<h2>ccd.js</h2>
+<p>{{ t.ccd }}</p>
+
+{% highlight 'js' %}const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'];
+let keyIndex = 0;
+
+document.addEventListener('keydown', function(event) {
+  if (event.code === konamiCode[keyIndex]) {
+    keyIndex++;
+    if (keyIndex === konamiCode.length) {
+        // change this to your link!
+        window.location.href = `https://adrianvic.github.io/static/toyourdreams.txt`
+        keyIndex = 0;
+    }
+  } else {
+    keyIndex = 0;
+  }
+});
+
+/* 
+    By tenkuma ^^
+    https://adrianvic.github.io
+    For those thumblrs that change the blog HTML for an iframe poiting to your personal website!
+*/{% endhighlight %}
+</main>

site/misc/webresources/pt.json

@@ -0,0 +1,8 @@
+{
+    "pageTitle": "Recursos web",
+	"pageDescription": "Meu acervo de assets/scripts para websites.",
+    "intro": "Essa página é dedicada para reunir algumas coisas que eu fiz para websites que podem ser úteis para você também. Tudo daqui está em domínio público, a não ser que esteja escrito o contrário, mas deixar os créditos seria legal ;-)",
+    "tumblrAdapt": "Um script que detecta se o atributo de URL <i>tumblr</i> é <i>true</i> e adapta o design do site para desviar do menu do Tumblr, caso você coloque seu site como blog do Tumblr (dá para fazer com iframe). Ele também limpa os links adicionando <i>target=\"_blank\"</i> (abre em outra janela) para links externos e preserva o atributo <i>tumblr</i> em todos.",
+    "click": "Script que toca um som customizado quando você clica ou coloca o cursor em cima de um link. O código verifica o valor de <i>disablesfx</i> no localstorage, se ele for <i>true</i> o som não toca. O localstorage é verificado toda vez que o som toca, então dá para habilitar/desabilitar sem recarregar a página.",
+    "ccd": "Acionado quando o usuário digita o famoso Konami Code dentro da página e redireciona para outra página. O nome é a abreviação de Konami Code, mas com C ao invés de K para ficar menos óbvio. É bem fácil modificar ele para fazer outra coisa."
+}