diff --git a/site/misc/webresources/en.json b/site/misc/webresources/en.json new file mode 100644 index 0000000..d402f37 --- /dev/null +++ b/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 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.", + "click": "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.", + "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." +} \ No newline at end of file diff --git a/site/misc/webresources/index.njk b/site/misc/webresources/index.njk new file mode 100644 index 0000000..db2c74e --- /dev/null +++ b/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 %} + +
+
+

{{ t.pageTitle }}

+

{{ t.intro }}

+
+
+ + + +

tumblr-adapt.js

+

{{ t.tumblrAdapt | safe }}

+ {% 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 %} + +

click.js

+

{{ t.click | safe }}

+ +{% 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 %} + +

ccd.js

+

{{ t.ccd }}

+ +{% 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 %} +
\ No newline at end of file diff --git a/site/misc/webresources/pt.json b/site/misc/webresources/pt.json new file mode 100644 index 0000000..9c2d577 --- /dev/null +++ b/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 tumblr é true 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 target=\"_blank\" (abre em outra janela) para links externos e preserva o atributo tumblr 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 disablesfx no localstorage, se ele for true 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." +} \ No newline at end of file diff --git a/static/prism.css b/static/prism.css index e03e7e2..07a0c79 100644 --- a/static/prism.css +++ b/static/prism.css @@ -6,7 +6,7 @@ code[class*="language-"], pre[class*="language-"] { - color: black; + color: white; background: none; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; @@ -97,8 +97,8 @@ pre[class*="language-"] > code { .token.entity, .token.url, .token.variable { - color: #a67f59; - background: rgba(255, 255, 255, 0.5); + color: red; + background: rgba(255, 255, 255, 0.1); } .token.atrule,