tumblr-adapt.js

A script that detects if the URL attribute tumblr is true 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 target="_blank" (opens in a new tab) and preserves the tumblr attribute in each link.

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!
*/

click.js

Script that plays a custom sound when you click the page or hover a link. The code checks disablesfx on localstorage, if it's true the sound does not play. Localstorage is checked when playing the audio, so it's possible to enable/disable it without reloading the page.

// 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!
*/

ccd.js

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.

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!
*/