Improve bday js, add /m redirect, add info page, fix default fonts, fix sitemap

Signed-off-by: Ari Archer <ari.web.xyz@gmail.com>
This commit is contained in:
Ari Archer 2022-09-29 03:41:06 +03:00
parent 56be07ead7
commit 37fa115a5d
8 changed files with 322 additions and 96 deletions

View file

@ -1,21 +1,21 @@
"use strict"; "use strict";
// Conffeti.js source: https://www.cssscript.com/confetti-falling-animation/ // Confetti.js source: https://www.cssscript.com/confetti-falling-animation/
var maxParticleCount = 150; // set max confetti count let max_partics = 150; // set max confetti count
var particleSpeed = 2; // set the particle animation speed let partic_spd = 2; // set the particle animation speed
var startConfetti; // call to start confetti animation let confetti; // call to start confetti animation
var stopConfetti; // call to stop adding confetti let stop_confetti; // call to stop adding confetti
var removeConfetti; // call to stop the confetti animation and remove all confetti immediately let rm_confetti; // call to stop the confetti animation and remove all confetti immediately
(function () { (function () {
startConfetti = startConfettiInner; confetti = start_confetti_inner;
stopConfetti = stopConfettiInner; stop_confetti = stop_confetti_inner;
removeConfetti = removeConfettiInner; rm_confetti = remove_confetti_inner;
var context, canvas;
var colors = [ let ctx, canvas;
let clrs = [
"DodgerBlue", "DodgerBlue",
"OliveDrab", "OliveDrab",
"Gold", "Gold",
@ -29,26 +29,38 @@ var removeConfetti; // call to stop the confetti animation and remove all confet
"Chocolate", "Chocolate",
"Crimson", "Crimson",
]; ];
var streamingConfetti = false; let confetti_on = false;
var animationTimer = null; let anim_t = null;
var particles = []; let particles = [];
var waveAngle = 0; let wav_angle = 0;
function resetParticle(particle, width, height) { function reset_particle(part, width, height) {
particle.color = colors[(Math.random() * colors.length) | 0]; part.color = clrs[(Math.random() * clrs.length) | 0];
particle.x = Math.random() * width; part.x = Math.random() * width;
particle.y = Math.random() * height - height; part.y = Math.random() * height - height;
particle.diameter = Math.random() * 10 + 5; part.diameter = Math.random() * 10 + 5;
particle.tilt = Math.random() * 10 - 10; part.tilt = Math.random() * 10 - 10;
particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05; part.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
particle.tiltAngle = 0; part.tiltAngle = 0;
return particle;
return part;
} }
function startConfettiInner(text, textclr) { function stop_confetti_inner() {
var width = window.innerWidth; confetti_on = false;
var height = window.innerHeight; }
window.requestAnimFrame = (function () {
function remove_confetti_inner() {
stop_confetti();
rm_confetti();
particles = [];
}
function start_confetti_inner(text, textclr) {
let width = window.innerWidth;
let height = window.innerHeight;
window.req_animf = (function () {
return ( return (
window.requestAnimationFrame || window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
@ -61,21 +73,24 @@ var removeConfetti; // call to stop the confetti animation and remove all confet
); );
})(); })();
canvas = document.getElementById("confetti-canvas"); canvas = document.getElementById("c");
if (canvas === null) { if (canvas === null) {
canvas = document.createElement("canvas"); canvas = document.createElement("canvas");
canvas.setAttribute("id", "confetti-canvas"); canvas.setAttribute("id", "c");
canvas.setAttribute( canvas.setAttribute(
"style", "style",
"display: block;z-index:999999;pointer-events:none;overflow-y:hidden;min-width:100%;min-height:100%;position:fixed;top:0;left:0;" "display:block;z-index:999999;pointer-events:none;overflow-y:hidden;min-width:100%;min-height:100%;position:fixed;top:0;left:0"
); );
document.body.appendChild(canvas); document.body.appendChild(canvas);
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
window.addEventListener( window.addEventListener(
"resize", "resize",
function () { () => {
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
}, },
@ -83,89 +98,102 @@ var removeConfetti; // call to stop the confetti animation and remove all confet
); );
} }
context = canvas.getContext("2d"); ctx = canvas.getContext("2d");
while (particles.length < maxParticleCount) while (particles.length < max_partics)
particles.push(resetParticle({}, width, height)); particles.push(reset_particle({}, width, height));
streamingConfetti = true;
if (animationTimer === null) { confetti_on = true;
(function runAnimation() {
context.clearRect(0, 0, window.innerWidth, window.innerHeight); if (anim_t === null) {
(function anim() {
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
if (particles.length === 0) { if (particles.length === 0) {
animationTimer = null; anim_t = null;
context.clearRect( ctx.clearRect(
0, 0,
0, 0,
window.innerWidth, window.innerWidth,
window.innerHeight window.innerHeight
); );
} else { } else {
updateParticles(); try {
drawParticles(context); upd_partics();
animationTimer = requestAnimFrame(runAnimation); drw_partics();
context.textAlign = "center"; anim_t = req_animf(anim);
context.fillStyle = textclr;
context.font = "2em sans";
context.fillText(text, canvas.width / 2, canvas.height / 2); ctx.textAlign = "center";
ctx.fillStyle = textclr;
ctx.font = "2em sans-serif";
ctx.fillText(
text,
canvas.width / 2,
canvas.height / 2
);
} catch (e) {
console.error(e);
alert(`\u{0001f389} ${text} \u{0001f389}`);
particles = [];
return stop_confetti();
}
} }
})(); })();
} }
} }
function stopConfettiInner() { function drw_partics() {
streamingConfetti = false; let part, x;
}
function removeConfettiInner() { for (let i = 0; i < particles.length; i++) {
stopConfetti(); part = particles[i];
particles = []; ctx.beginPath();
} ctx.lineWidth = part.diameter;
ctx.strokeStyle = part.color;
function drawParticles(context) { x = part.x + part.tilt;
var particle;
var x; ctx.moveTo(x + part.diameter / 2, part.y);
for (var i = 0; i < particles.length; i++) { ctx.lineTo(
particle = particles[i];
context.beginPath();
context.lineWidth = particle.diameter;
context.strokeStyle = particle.color;
x = particle.x + particle.tilt;
context.moveTo(x + particle.diameter / 2, particle.y);
context.lineTo(
x, x,
particle.y + particle.tilt + particle.diameter / 2 part.y + part.tilt + part.diameter / 2
); );
context.stroke(); ctx.stroke();
} }
} }
function updateParticles() { function upd_partics() {
var width = window.innerWidth; let width = window.innerWidth;
var height = window.innerHeight; let height = window.innerHeight;
var particle; let part;
waveAngle += 0.01;
for (var i = 0; i < particles.length; i++) { wav_angle += 0.01;
particle = particles[i];
if (!streamingConfetti && particle.y < -15) for (let i = 0; i < particles.length; i++) {
particle.y = height + 100; part = particles[i];
if (!confetti_on && part.y < -15)
part.y = height + 100;
else { else {
particle.tiltAngle += particle.tiltAngleIncrement; part.tiltAngle += part.tiltAngleIncrement;
particle.x += Math.sin(waveAngle); part.x += Math.sin(wav_angle);
particle.y += part.y +=
(Math.cos(waveAngle) + particle.diameter + particleSpeed) * (Math.cos(wav_angle) + part.diameter + partic_spd) *
0.5; 0.5;
particle.tilt = Math.sin(particle.tiltAngle) * 15; part.tilt = Math.sin(part.tiltAngle) * 15;
} }
if ( if (
particle.x > width + 20 || part.x > width + 20 ||
particle.x < -20 || part.x < -20 ||
particle.y > height part.y > height
) { ) {
if (streamingConfetti && particles.length <= maxParticleCount) if (confetti_on && particles.length <= max_partics)
resetParticle(particle, width, height); reset_particle(part, width, height);
else { else {
particles.splice(i, 1); particles.splice(i, 1);
i--; i--;
@ -192,15 +220,12 @@ function main() {
) { ) {
let bday = ctime.getFullYear() - BIRTHDAY.getFullYear(); let bday = ctime.getFullYear() - BIRTHDAY.getFullYear();
startConfetti( confetti(
`Happy ${human_num(bday)} birthday, ${site_name}!`, `Happy ${human_num(bday)} birthday, ${site_name}!`,
"#f0f7ff" "#f0f7ff"
); );
setTimeout(() => { setTimeout(() => stop_confetti(), 5000);
stopConfetti();
removeConfetti();
}, 5000);
window.localStorage.setItem("bday", ctime.getFullYear()); window.localStorage.setItem("bday", ctime.getFullYear());
} }

View file

@ -92,7 +92,7 @@ const locations = {
}, },
13: { 13: {
url: "/90s", url: "/page/90s",
desc: "90s page", desc: "90s page",
aliases: ["90s", "90", "vintage", "old"], aliases: ["90s", "90", "vintage", "old"],
}, },
@ -102,6 +102,18 @@ const locations = {
desc: "Export and/or import your ari-web data", desc: "Export and/or import your ari-web data",
aliases: ["export", "import", "data"], aliases: ["export", "import", "data"],
}, },
15: {
url: "/m",
desc: "Favourite song",
aliases: ["song", "favsong"],
},
16: {
url: "/page/info",
desc: "Important ari-web info",
aliases: ["info", "important"],
},
}; };
const escape_HTML = (str) => const escape_HTML = (str) =>
str.replace( str.replace(

View file

@ -1,3 +1,3 @@
$default-font: sans; $default-font: sans-serif;
$bg: black; $bg: black;
$default-font-colour: white; $default-font-colour: white;

View file

@ -0,0 +1,51 @@
*,
*::before,
*::after {
color: whitesmoke;
background-color: black;
line-height: 1.5;
}
li {
padding: 0.2em;
}
*:not(h1) {
font-size: 1.08em;
}
ul {
margin: 1em;
}
h1 {
text-align: center;
font-size: 2em;
}
body {
max-width: 1200px;
margin: auto;
padding: 2em;
}
a:not(a[na])::before {
content: attr(href);
}
a,
a::before {
color: #b1b4c0;
text-decoration: none;
}
a:focus,
a:hover {
text-decoration: underline;
}
blockquote,
blockquote * {
line-height: 1;
text-align: center;
}

View file

@ -20,6 +20,12 @@
status = 302 status = 302
force = true force = true
[[redirects]]
from = "/m"
to = "/yt/watch?v=8MMa35B3HT8"
status = 302
force = true
# https://codeberg.org/teddit/teddit # https://codeberg.org/teddit/teddit
[[redirects]] [[redirects]]
from = "/r/*" from = "/r/*"

View file

@ -213,6 +213,7 @@
/></a> /></a>
</li> </li>
<li><a href="/be">Build error submission</a></li> <li><a href="/be">Build error submission</a></li>
<li><a href="/info">Important ari-web info</a></li>
</ul> </ul>
</li> </li>
@ -266,7 +267,12 @@
</ul> </ul>
</li> </li>
<li><a href="/mp">Music playlist</a></li> <li>
<a href="/mp">Music playlist</a>
<ul>
<li><a href="/m">Favourite song</a></li>
</ul>
</li>
<li> <li>
<a <a

118
page/info/index.html Normal file
View file

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ari::web -&gt; Info</title>
<meta name="description" content="Important ari-web info" />
<meta
name="keywords"
content="website, ari, dark, blog, minimal, minimalism, opensource, free, info, important"
/>
<meta
name="robots"
content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"
/>
<meta property="og:type" content="website" />
<meta name="color-scheme" content="dark" />
<meta name="theme-color" content="black" />
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/content/styles/info/index.css" />
<base target="_blank" />
</head>
<body>
<h1>Important ari-web info</h1>
<blockquote>
<a na href="#!" target="_parent">This is a link</a>
<p>And this is text</p>
</blockquote>
<hr />
<ul>
<li>
Impersonation of me on the internet:
<a
href="https://blog.ari-web.xyz/b/important--impersonation-of-me-on-the-internet/"
></a>
</li>
<li>
Ari-web restricted contributions:
<a
href="https://blog.ari-web.xyz/b/restricting-contributions-on-ari-web/"
></a>
</li>
<li>
The 'www' subdomain is no longer the default for ari-web.xyz:
<a
href="https://blog.ari-web.xyz/b/the--www--subdomain-is-no-longer-the-default-for-ari-web-xyz/"
></a>
</li>
<li>
Ari-web now delivers minified content:
<a
href="https://blog.ari-web.xyz/b/ari-web-now-delivers-minified-content/"
></a>
</li>
<li>
Ari-web APIs: How to use them:
<a
href="https://blog.ari-web.xyz/b/ari-web-apis--how-to-use-them/"
></a>
</li>
<li>
Ari-web APIs are going public:
<a
href="https://blog.ari-web.xyz/b/ari-web-apis-are-going-public/"
></a>
</li>
<li>
Ari-web browser compatibility:
<a
href="https://blog.ari-web.xyz/b/ari-web-browser-compatibility/"
></a>
</li>
<li>
Accesibility issues of ari-web:
<a
href="https://blog.ari-web.xyz/b/accesibility-issues-of-ari-web/"
></a>
</li>
<li>
Introducing the ari-web API:
<a
href="https://blog.ari-web.xyz/b/introducing-the-ari-web-api-/"
></a>
</li>
<li>
New blog management system!:
<a
href="https://blog.ari-web.xyz/b/new-blog-management-system-/"
></a>
</li>
<li>
Legacy blog shutdown:
<a
href="https://legacy.blog.ari-web.xyz/blogs/This-subdomain-is-no-longer-in-use_-7309129151"
></a>
</li>
<li>
Old blog new design:
<a
href="https://legacy.blog.ari-web.xyz/blogs/New-blog-design!_-9192801266"
></a>
</li>
<!--
<li>: <a href=""></a></li>
-->
</ul>
</body>
</html>

View file

@ -1,9 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>https://www.ari-web.xyz/</loc> <loc>https://ari-web.xyz/</loc>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url>
<loc>https://ari-web.xyz/page/info</loc>
<priority>0.99</priority>
</url>
<url> <url>
<loc>https://user.ari-web.xyz/</loc> <loc>https://user.ari-web.xyz/</loc>
<priority>0.9</priority> <priority>0.9</priority>
@ -12,6 +16,10 @@
<loc>https://www.ari-web.xyz/90s.html</loc> <loc>https://www.ari-web.xyz/90s.html</loc>
<priority>0.89</priority> <priority>0.89</priority>
</url> </url>
<url>
<loc>https://www.ari-web.xyz/</loc>
<priority>0.88</priority>
</url>
<url> <url>
<loc>https://blog.ari-web.xyz/</loc> <loc>https://blog.ari-web.xyz/</loc>
<priority>0.8</priority> <priority>0.8</priority>