never/nevereverever.de
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SHORK

Browse source
This commit is contained in:
Never Gude 2026-02-21 02:07:03 +01:00
parent cf93279141
commit 6096df6978
21 changed files with 201 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Makefile
View file

@ -9,6 +9,7 @@ INSTALLDIR_ANSI := public_ansi/
ARTICLEDIR := articles ARTICLEDIR := articles
PANDOCDIR := pandoc PANDOCDIR := pandoc
STYLEDIR := styles STYLEDIR := styles
SCRIPTDIR := scripts
IMAGEDIR := images IMAGEDIR := images
# The name of the stylesheet. This needs to be copied to any directory containing html files that use it. # The name of the stylesheet. This needs to be copied to any directory containing html files that use it.
@ -37,7 +38,7 @@ articles_ansi := $(patsubst $(SRCDIR)/%.md, $(BUILDDIR)/%, $(articles_md))
all: $(BUILDDIR)/index.html $(BUILDDIR)/index $(BUILDDIR)/rss.xml all: $(BUILDDIR)/index.html $(BUILDDIR)/index $(BUILDDIR)/rss.xml
install: install:
cp -r $(BUILDDIR)/index.html $(BUILDDIR)/rss.xml $(articles_html) $(STYLEDIR) $(IMAGEDIR) $(INSTALLDIR_HTML); \ cp -r $(BUILDDIR)/index.html $(BUILDDIR)/rss.xml $(articles_html) $(STYLEDIR) $(SCRIPTDIR) $(IMAGEDIR) $(INSTALLDIR_HTML); \
cp -r $(BUILDDIR)/index $(articles_ansi) $(INSTALLDIR_ANSI); cp -r $(BUILDDIR)/index $(articles_ansi) $(INSTALLDIR_ANSI);
clean: clean:
@ -66,7 +67,7 @@ $(BUILDDIR)/index.html: $(SRCDIR)/index.md $(articles_html) | $(BUILDDIR)
jq '.articles |= sort_by(.date) | .articles |= reverse' ${article_list} > articles.json.tmp; \ jq '.articles |= sort_by(.date) | .articles |= reverse' ${article_list} > articles.json.tmp; \
mv articles.json.tmp ${article_list}; \ mv articles.json.tmp ${article_list}; \
# Build index.html with metadata injected from articles_list # Build index.html with metadata injected from articles_list
pandoc $< --template $(template_html) --include-after-body $(shark_js) --css $(style) --metadata-file $(article_list) --highlight-style $(syntax_style) --mathml --toc --output $@; pandoc $< --template $(template_html) --css $(style) --metadata-file $(article_list) --highlight-style $(syntax_style) --mathml --toc --output $@;
$(BUILDDIR)/index: $(SRCDIR)/index.md $(articles_ansi) | $(BUILDDIR) $(BUILDDIR)/index: $(SRCDIR)/index.md $(articles_ansi) | $(BUILDDIR)
pandoc $< --template $(template_ansi) --metadata-file $(article_list) --to ansi --output $@ pandoc $< --template $(template_ansi) --metadata-file $(article_list) --to ansi --output $@

3
build/articles/latex-endeavors.html
View file

@ -27,7 +27,7 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas> <img id="shork" src="images/shork.png"></img>
<header id="page-header"> <header id="page-header">
<a class="page-header-button" href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a class="rss-button" href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
@ -66,4 +66,5 @@ message</p>
</nav> </nav>
</footer> </footer>
</body> </body>
<script src="scripts/shork.js"></script>
</html> </html>

3
build/articles/random-linux-utils.html
View file

@ -94,7 +94,7 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas> <img id="shork" src="images/shork.png"></img>
<header id="page-header"> <header id="page-header">
<a class="page-header-button" href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a class="rss-button" href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
@ -135,4 +135,5 @@ class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="
</nav> </nav>
</footer> </footer>
</body> </body>
<script src="scripts/shork.js"></script>
</html> </html>

3
build/articles/rsync-android.html
View file

@ -94,7 +94,7 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas> <img id="shork" src="images/shork.png"></img>
<header id="page-header"> <header id="page-header">
<a class="page-header-button" href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a class="rss-button" href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
@ -216,4 +216,5 @@ class="sourceCode sh"><code class="sourceCode bash"><span id="cb18-1"><a href="#
</nav> </nav>
</footer> </footer>
</body> </body>
<script src="scripts/shork.js"></script>
</html> </html>

71
build/index.html
View file

@ -92,7 +92,7 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas> <img id="shork" src="images/shork.png"></img>
<header id="page-header"> <header id="page-header">
<a class="page-header-button" href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a class="rss-button" href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
@ -161,73 +161,6 @@ tweaking my Linux sytem or trying to do productive things.</p>
<a href="https://cups.teabucket.eu/next?from=never" target="_parent"><img alt="Next" src="images/cups_right.svg" width="30" height="30"></a> <a href="https://cups.teabucket.eu/next?from=never" target="_parent"><img alt="Next" src="images/cups_right.svg" width="30" height="30"></a>
</nav> </nav>
</footer> </footer>
<script>
let speed = 10;
let scale = 0.33; // Image scale (I work on 1080p monitor)
let canvas;
let ctx;
let logoColor;
let dvd = {
x: 256,
y: 354,
xspeed: 2,
yspeed: 2,
img: new Image()
};
(function main(){
canvas = document.getElementById("tv-screen");
ctx = canvas.getContext("2d");
dvd.img.src = 'images/shark.png';
//Draw the "tv screen"
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
pickColor();
update();
})();
function update() {
setTimeout(() => {
//Draw the canvas background
ctx.fillStyle = '#00000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Draw DVD Logo and his background
//ctx.fillStyle = logoColor;
//ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
//Move the logo
dvd.x+=dvd.xspeed;
dvd.y+=dvd.yspeed;
//Check for collision
checkHitBox();
update();
}, speed)
}
//Check for border collision
function checkHitBox(){
if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
dvd.xspeed *= -1;
pickColor();
}
if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
dvd.yspeed *= -1;
pickColor();
}
}
//Pick a random color in RGB format
function pickColor(){
r = Math.random() * (254 - 0) + 0;
g = Math.random() * (254 - 0) + 0;
b = Math.random() * (254 - 0) + 0;
logoColor = 'rgb('+r+','+g+', '+b+')';
}
</script>
</body> </body>
<script src="scripts/shork.js"></script>
</html> </html>

2
build/rss.xml
View file

@ -6,7 +6,7 @@
<description>Here I post random stuff.</description> <description>Here I post random stuff.</description>
<language>en-us</language> <language>en-us</language>
<pubDate>Mon, 12 Jan 2026 00:00:00 +0100</pubDate> <pubDate>Mon, 12 Jan 2026 00:00:00 +0100</pubDate>
<lastBuildDate>Fri, 20 Feb 2026 20:09:52 +0100</lastBuildDate> <lastBuildDate>Sat, 21 Feb 2026 02:06:53 +0100</lastBuildDate>
<docs>https://www.rssboard.org/rss-specification</docs> <docs>https://www.rssboard.org/rss-specification</docs>
<generator>pandoc</generator> <generator>pandoc</generator>
<managingEditor>n.gude@posteo.de (Never)</managingEditor> <managingEditor>n.gude@posteo.de (Never)</managingEditor>

BIN
images/shark.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 113 KiB

BIN
images/shork.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
images/shork.xcf Normal file
View file

Binary file not shown.

3
pandoc/html-template.html
View file

@ -38,7 +38,7 @@ $endif$
$for(include-before)$ $for(include-before)$
$include-before$ $include-before$
$endfor$ $endfor$
<canvas id="tv-screen"></canvas> <img id="shork" src="images/shork.png"></img>
<header id="page-header"> <header id="page-header">
<a class="page-header-button" href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a class="rss-button" href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
@ -114,4 +114,5 @@ $for(include-after)$
$include-after$ $include-after$
$endfor$ $endfor$
</body> </body>
<script src="scripts/shork.js"></script>
</html> </html>

BIN
public_html/eh/eh/eh/eh-eh/images/shork.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
public_html/eh/eh/eh/eh-eh/images/shork.xcf Normal file
View file

Binary file not shown.

71
public_html/eh/eh/eh/eh-eh/index.html
View file

@ -92,7 +92,7 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas> <img id="shork" src="images/shork.png"></img>
<header id="page-header"> <header id="page-header">
<a class="page-header-button" href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a class="rss-button" href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
@ -161,73 +161,6 @@ tweaking my Linux sytem or trying to do productive things.</p>
<a href="https://cups.teabucket.eu/next?from=never" target="_parent"><img alt="Next" src="images/cups_right.svg" width="30" height="30"></a> <a href="https://cups.teabucket.eu/next?from=never" target="_parent"><img alt="Next" src="images/cups_right.svg" width="30" height="30"></a>
</nav> </nav>
</footer> </footer>
<script>
let speed = 10;
let scale = 0.33; // Image scale (I work on 1080p monitor)
let canvas;
let ctx;
let logoColor;
let dvd = {
x: 256,
y: 354,
xspeed: 2,
yspeed: 2,
img: new Image()
};
(function main(){
canvas = document.getElementById("tv-screen");
ctx = canvas.getContext("2d");
dvd.img.src = 'images/shark.png';
//Draw the "tv screen"
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
pickColor();
update();
})();
function update() {
setTimeout(() => {
//Draw the canvas background
ctx.fillStyle = '#00000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Draw DVD Logo and his background
//ctx.fillStyle = logoColor;
//ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
//Move the logo
dvd.x+=dvd.xspeed;
dvd.y+=dvd.yspeed;
//Check for collision
checkHitBox();
update();
}, speed)
}
//Check for border collision
function checkHitBox(){
if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
dvd.xspeed *= -1;
pickColor();
}
if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
dvd.yspeed *= -1;
pickColor();
}
}
//Pick a random color in RGB format
function pickColor(){
r = Math.random() * (254 - 0) + 0;
g = Math.random() * (254 - 0) + 0;
b = Math.random() * (254 - 0) + 0;
logoColor = 'rgb('+r+','+g+', '+b+')';
}
</script>
</body> </body>
<script src="scripts/shork.js"></script>
</html> </html>

3
public_html/eh/eh/eh/eh-eh/latex-endeavors.html
View file

@ -27,7 +27,7 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas> <img id="shork" src="images/shork.png"></img>
<header id="page-header"> <header id="page-header">
<a class="page-header-button" href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a class="rss-button" href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
@ -66,4 +66,5 @@ message</p>
</nav> </nav>
</footer> </footer>
</body> </body>
<script src="scripts/shork.js"></script>
</html> </html>

3
public_html/eh/eh/eh/eh-eh/random-linux-utils.html
View file

@ -94,7 +94,7 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas> <img id="shork" src="images/shork.png"></img>
<header id="page-header"> <header id="page-header">
<a class="page-header-button" href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a class="rss-button" href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
@ -135,4 +135,5 @@ class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="
</nav> </nav>
</footer> </footer>
</body> </body>
<script src="scripts/shork.js"></script>
</html> </html>

2
public_html/eh/eh/eh/eh-eh/rss.xml
View file

@ -6,7 +6,7 @@
<description>Here I post random stuff.</description> <description>Here I post random stuff.</description>
<language>en-us</language> <language>en-us</language>
<pubDate>Mon, 12 Jan 2026 00:00:00 +0100</pubDate> <pubDate>Mon, 12 Jan 2026 00:00:00 +0100</pubDate>
<lastBuildDate>Fri, 20 Feb 2026 20:09:52 +0100</lastBuildDate> <lastBuildDate>Sat, 21 Feb 2026 02:06:53 +0100</lastBuildDate>
<docs>https://www.rssboard.org/rss-specification</docs> <docs>https://www.rssboard.org/rss-specification</docs>
<generator>pandoc</generator> <generator>pandoc</generator>
<managingEditor>n.gude@posteo.de (Never)</managingEditor> <managingEditor>n.gude@posteo.de (Never)</managingEditor>

3
public_html/eh/eh/eh/eh-eh/rsync-android.html
View file

@ -94,7 +94,7 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas> <img id="shork" src="images/shork.png"></img>
<header id="page-header"> <header id="page-header">
<a class="page-header-button" href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a class="rss-button" href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
@ -216,4 +216,5 @@ class="sourceCode sh"><code class="sourceCode bash"><span id="cb18-1"><a href="#
</nav> </nav>
</footer> </footer>
</body> </body>
<script src="scripts/shork.js"></script>
</html> </html>

84
public_html/eh/eh/eh/eh-eh/scripts/shork.js Normal file
View file

@ -0,0 +1,84 @@
let shork_image = document.getElementById("shork");
let shork = {x: 0, y: 0};
let mouse = {x: 0, y: 0};
let zoomies = 4;
onmousemove = function(e){
mouse.x = e.clientX;
mouse.y = e.clientY;
}
function vector(a, b) {
return {
x: b.x - a.x,
y: b.y - a.y
};
}
function angle(v) {
return Math.atan2(v.y, v.x);
}
function norm(v) {
return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
}
function unit(v) {
let length = norm(v);
if (length == 0) return {x: 0, y: 0};
return {x: v.x / length, y: v.y / length};
}
function scalar(v, a) {
return {x: v.x * a, y: v.y * a};
}
function add(v, u) {
return {x: v.x + u.x, y: v.y + u.y};
}
function equal(v, u, a) {
return (Math.abs(v.x - u.x) < a && Math.abs(v.y - u.y) < a);
}
function distance(x, y, a) {
return (norm(vector(x, y)) >= a);
}
function round(v) {
return {x: Math.round(v.x), y: Math.round(v.y)};
}
function transform(v, a) {
return {a: Math.cos(a), b: -Math.sin(a), c: Math.sin(a), d: Math.cos(a), x: v.x, y: v.y};
}
let direction = vector(shork, mouse)
let movement = scalar(unit(direction), zoomies);
let rotation = angle(direction);
function move() {
direction = vector(shork, mouse)
if (norm(direction) < 4) {
shork = mouse;
}
movement = scalar(unit(direction), zoomies * norm(direction)/128);
shork = add(shork, movement);
if (norm(direction) >= 16) {
rotation = -(angle(direction) - Math.PI/2 + Math.sin(norm(movement)*2)/8);
}
let trans = transform(shork, rotation);
shork_image.style.transform = `matrix(${trans.a}, ${trans.b}, ${trans.c}, ${trans.d}, ${trans.x}, ${trans.y})`;
setTimeout(move, 30);
}
shork_image.addEventListener("click", function(e) {move()}, {once: true});

13
public_html/eh/eh/eh/eh-eh/styles/style.css
View file

@ -38,8 +38,6 @@ body {
} }
main { main {
position: relative;
z-index: 2;
max-width: 48em; max-width: 48em;
margin: 0 auto; margin: 0 auto;
@ -58,16 +56,15 @@ main {
border-right: solid 3pt var(--html-border); border-right: solid 3pt var(--html-border);
} }
#tv-screen { #shork {
position: fixed; position: fixed;
top: 0; left: -32px;
left: 0; top: -36px;
z-index: 1; width: 64px;
transform-origin: 50% 50%;
} }
#page-header { #page-header {
position: relative;
z-index: 2;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
max-width: 60em; max-width: 60em;

84
scripts/shork.js Normal file
View file

@ -0,0 +1,84 @@
let shork_image = document.getElementById("shork");
let shork = {x: 0, y: 0};
let mouse = {x: 0, y: 0};
let zoomies = 4;
onmousemove = function(e){
mouse.x = e.clientX;
mouse.y = e.clientY;
}
function vector(a, b) {
return {
x: b.x - a.x,
y: b.y - a.y
};
}
function angle(v) {
return Math.atan2(v.y, v.x);
}
function norm(v) {
return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
}
function unit(v) {
let length = norm(v);
if (length == 0) return {x: 0, y: 0};
return {x: v.x / length, y: v.y / length};
}
function scalar(v, a) {
return {x: v.x * a, y: v.y * a};
}
function add(v, u) {
return {x: v.x + u.x, y: v.y + u.y};
}
function equal(v, u, a) {
return (Math.abs(v.x - u.x) < a && Math.abs(v.y - u.y) < a);
}
function distance(x, y, a) {
return (norm(vector(x, y)) >= a);
}
function round(v) {
return {x: Math.round(v.x), y: Math.round(v.y)};
}
function transform(v, a) {
return {a: Math.cos(a), b: -Math.sin(a), c: Math.sin(a), d: Math.cos(a), x: v.x, y: v.y};
}
let direction = vector(shork, mouse)
let movement = scalar(unit(direction), zoomies);
let rotation = angle(direction);
function move() {
direction = vector(shork, mouse)
if (norm(direction) < 4) {
shork = mouse;
}
movement = scalar(unit(direction), zoomies * norm(direction)/128);
shork = add(shork, movement);
if (norm(direction) >= 16) {
rotation = -(angle(direction) - Math.PI/2 + Math.sin(norm(movement)*2)/8);
}
let trans = transform(shork, rotation);
shork_image.style.transform = `matrix(${trans.a}, ${trans.b}, ${trans.c}, ${trans.d}, ${trans.x}, ${trans.y})`;
setTimeout(move, 30);
}
shork_image.addEventListener("click", function(e) {move()}, {once: true});

13
styles/style.css
View file

@ -38,8 +38,6 @@ body {
} }
main { main {
position: relative;
z-index: 2;
max-width: 48em; max-width: 48em;
margin: 0 auto; margin: 0 auto;
@ -58,16 +56,15 @@ main {
border-right: solid 3pt var(--html-border); border-right: solid 3pt var(--html-border);
} }
#tv-screen { #shork {
position: fixed; position: fixed;
top: 0; left: -32px;
left: 0; top: -36px;
z-index: 1; width: 64px;
transform-origin: 50% 50%;
} }
#page-header { #page-header {
position: relative;
z-index: 2;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
max-width: 60em; max-width: 60em;