Added contributors base page, Improved home page, Added grids

Update .gitignore, head-preloads.php, and 22 more files...

.gitignore

@@ -34,3 +34,4 @@ tools/items/formula-wizard/src/*.js
 # Temporary
 articles/*.txt
 commons/strings/_*/
+*.ogg

commons/DOM/head-preloads.php

@@ -0,0 +1,6 @@
+<?php
+if($enable_kitty_and_doggo_sounds) {
+	echo('<link rel="prefetch" as="audio" href="/resources/NibblePoker/sounds/meow-test-01.ogg">');
+	echo('<link rel="prefetch" as="audio" href="/resources/NibblePoker/sounds/meow-test-02.ogg">');
+}
+?>

commons/DOM/scripts.php

@@ -23,4 +23,7 @@ if($enable_glider) {
 if($enable_code_highlight) {
 	echo('<script src="/resources/NibblePoker/js/nibblepoker-code.min.js"></script>');
 }
+if($enable_kitty_and_doggo_sounds) {
+	echo('<script src="/resources/NibblePoker/js/nibblepoker-contributors.min.js"></script>');
+}
 ?>

commons/DOM/sidebar.php

@@ -62,6 +62,7 @@ function printSidebarEntry($url, $title, $icon, $activeId) {
 	<hr class="subtle">
 	<?php
 	printSidebarEntry(l10n_url_abs('/about/'), localize("sidebar.text.about"), "fad fa-user", "about");
+	//printSidebarEntry(l10n_url_abs('/contributors/'), localize("sidebar.text.contributors"), "fad fa-users", "contributors");
 	printSidebarEntry(l10n_url_abs('/contact/'), localize("sidebar.text.contact"), "fad fa-mailbox", "contact");
 	?>
 </nav>

commons/config.php

@@ -6,14 +6,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 
 // Used for opengraph head tags.
 switch($_SERVER['SERVER_NAME']) {
+	case "192.168.1.85":
 	case "localhost":
 	case "nibblepoker.lu":
 		$host = "nibblepoker.lu";
 		$host_uri = "https://nibblepoker.lu";
+		$host_tld = "lu";
 		break;
 	case "nibblepoker.com":
 		$host = "nibblepoker.com";
 		$host_uri = "https://nibblepoker.com";
+		$host_tld = "com";
 		break;
 	default:
 		http_response_code(400);
@@ -29,6 +32,7 @@ $config_dir_tools = realpath($dir_commons . "/../" . "tools/");
 $enable_grids = false;
 $enable_code_highlight = false;
 $enable_glider = false;
+$enable_kitty_and_doggo_sounds = false;
 
 // Easter-egg optional features
 // > Belgium's independence day.

commons/langs.php

@@ -100,9 +100,19 @@ function localize_private(string $string_key, array $private_lang_data, bool $fa
 	return $string_key;
 }
 
-function localize($string_key) : string {
+function localize($string_key, ?array $param_values = null) : string {
 	global $lang_data;
-	return localize_private($string_key, $lang_data, false);
+	if(is_null($param_values)) {
+		return localize_private($string_key, $lang_data, false);
+	} else {
+		$localized_string = localize_private($string_key, $lang_data, false);
+		
+		for($iStrParam = 0; $iStrParam < sizeof($param_values); $iStrParam++) {
+			$localized_string = str_replace("%" . $iStrParam, $param_values[$iStrParam], $localized_string);
+		}
+		
+		return $localized_string;
+	}
 }
 
 function l10n_url_abs($url) : string {

commons/strings/en/contributors.json

@@ -0,0 +1,12 @@
+{
+	"contributors.head.title": "Contributors - NibblePoker",
+	"contributors.head.description": "TODO: description",
+	"contributors.og.title": "NibblePoker - Contributors",
+	"contributors.og.description": "TODO: description",
+	"contributors.header.title": "Contributors",
+	
+	"contributors.intro.title": "???",
+	"contributors.sponsors.title": "Sponsors",
+	"contributors.code.title": "???",
+	"contributors.spiritualis.title": "Spiritual support"
+}

commons/strings/en/home.json

@@ -6,9 +6,9 @@
   "home.header.title": "Homepage",
   
   
-  "home.intro.title": "",
-  "home.intro.text.1": "",
-  "home.intro.text.2": "",
+  "home.intro.title": "Welcome to %0",
+  "home.intro.text.1": "This website contains a collection of my personal work through blog posts, software releases and other forms of media, all of which is accessible for free and under open-source friendly licenses.",
+  "home.intro.text.2": "If you wish to contact me, you can do so through the contact form linked in the sidebar or via the email address present on that page.",
   
   
   "home.showcase.title": "Showcase",

commons/strings/en/sidebar.json

@@ -13,5 +13,6 @@
   "sidebar.text.gitea": "Git Repos.",
   "sidebar.text.wiki": "Wiki",
   "sidebar.text.about": "About",
+  "sidebar.text.contributors": "Contributors",
   "sidebar.text.contact": "Contact"
 }

commons/strings/fr/contributors.json

@@ -0,0 +1,12 @@
+{
+	"contributors.head.title": "Contributeurs - NibblePoker",
+	"contributors.head.description": "TODO: description",
+	"contributors.og.title": "NibblePoker - Contributeurs",
+	"contributors.og.description": "TODO: description",
+	"contributors.header.title": "Contributeurs",
+	
+	"contributors.intro.title": "???",
+	"contributors.sponsors.title": "Sponsors",
+	"contributors.code.title": "???",
+	"contributors.spiritualis.title": "Support spirituel"
+}

commons/strings/fr/home.json

@@ -6,9 +6,10 @@
   "home.header.title": "Page d'accueil",
   
   
-  "home.intro.title": "",
-  "home.intro.text.1": "",
-  "home.intro.text.2": "",
+  "_home.intro.title": "Bienvenue sur '<i>%0</i>'",
+  "home.intro.title": "Bienvenue sur %0",
+  "home.intro.text.1": "Ce site web contient une collection de mes travaux personnels tels que des articles de blog, des logiciels utilitaires ou d'autres formes de médias.<br>Tout est accessible gratuitement et sous des licences à l'open source.",
+  "home.intro.text.2": "Si vous souhaitez me contacter, vous pouvez le faire via la page de contact lié dans la barre de navigation latérale.",
   
   
   "home.showcase.title": "Vitrine",
@@ -19,7 +20,7 @@
   "home.updates.text.privacy": "●&nbsp;&nbsp;Mise-à-jour de notre politique de confidentialité.",
   
   "home.updates.3.date": "12 novembre 2023",
-  "home.updates.3.text.1": "●&nbsp;&nbsp;Les services annexes sont complètement disponibles.",
+  "home.updates.3.text.1": "●&nbsp;&nbsp;Les services annexes sont disponibles.",
   "home.updates.3.text.2": "●&nbsp;&nbsp;Changement d'hébergeur vers <a href=\"https://www.ionos.fr/\">IONOS</a>.",
   "home.updates.3.text.3": "●&nbsp;&nbsp;Finition des pages annexes.",
   

commons/strings/fr/sidebar.json

@@ -13,5 +13,6 @@
   "sidebar.text.gitea": "Dépôts Git",
   "sidebar.text.wiki": "Wiki",
   "sidebar.text.about": "À-propos",
+  "sidebar.text.contributors": "Contributeurs",
   "sidebar.text.contact": "Contact"
 }

compile.bat

@@ -51,6 +51,8 @@ echo ^> resources\NibblePoker\js\nibblepoker.js
 call "%~dp0node_modules\.bin\terser" nibblepoker.js -c -m -o nibblepoker.min.js
 echo ^> resources\NibblePoker\js\nibblepoker-code.js
 call "%~dp0node_modules\.bin\terser" nibblepoker-code.js -c -m -o nibblepoker-code.min.js
+echo ^> resources\NibblePoker\js\nibblepoker-contributors.js
+call "%~dp0node_modules\.bin\terser" nibblepoker-contributors.js -c -m -o nibblepoker-contributors.min.js
 echo ^> resources\NibblePoker\js\nibblepoker-glider.js
 call "%~dp0node_modules\.bin\terser" nibblepoker-glider.js -c -m -o nibblepoker-glider.min.js
 popd

contributors/index.php

@@ -0,0 +1,65 @@
+<?php
+$start_time = microtime(true);
+set_include_path('../');
+include_once 'commons/config.php';
+include_once 'commons/langs.php';
+$enable_kitty_and_doggo_sounds = true;
+?>
+<!DOCTYPE html>
+<html lang="<?php echo($user_language); ?>">
+<head>
+	<?php include 'commons/DOM/head.php'; ?>
+	<title><?php print(localize('contributors.head.title')); ?></title>
+	<meta name="description" content="<?php print(localize('contributors.head.description')); ?>">
+	<meta property="og:title" content="<?php print(localize('contributors.og.title')); ?>"/>
+	<meta property="og:type" content="website"/>
+	<meta property="og:url" content="<?php echo($host_uri . l10n_url_abs('/contributors/')); ?>"/>
+	<meta property="og:image" content="<?php echo($host_uri); ?>/resources/NibblePoker/images/logos/v2_opengraph_v2.png"/>
+	<meta property="og:image:type" content="image/png"/>
+	<meta property="og:description" content="<?php print(localize('contributors.og.description')); ?>"/>
+	<?php include 'commons/DOM/head-preloads.php'; ?>
+</head>
+<body>
+<?php
+include_once 'commons/DOM/utils.php';
+$SIDEBAR_IDS = ['contributors'];
+include 'commons/DOM/sidebar.php';
+?>
+<header class="w-full p-m pl-s">
+	<h1 class="t-size-17 t-w-500">
+		<i class="fad fa-user t-size-16 mr-s t-muted"></i><?php print(localize("contributors.header.title")); ?>
+	</h1>
+	<?php include 'commons/DOM/header-lang.php'; ?>
+</header>
+<main id="main" class="rl-m border border-r-0 p-l">
+	
+	<?php printMainHeader(localize("contributors.intro.title")); ?>
+	
+	<?php //printSubHeader(localize("contributors.sponsors.title")); ?>
+	
+	<?php printSubHeader(localize("contributors.code.title")); ?>
+	
+	<?php printSubHeader(localize("contributors.spiritualis.title")); ?>
+	<div class="mx-xs mt-s">
+		<div id="kitty-kiki" class="img-contributor kitty">
+			<img src="/resources/NibblePoker/images/contributors/kiki-02.jpg" draggable="false">
+			<img src="/resources/NibblePoker/images/contributors/kiki-03.jpg" draggable="false">
+		</div>
+		<div id="kitty-maki" class="img-contributor kitty">
+			<img src="/resources/NibblePoker/images/contributors/maki-02.jpg" draggable="false">
+			<img src="/resources/NibblePoker/images/contributors/maki-03.jpg" draggable="false">
+		</div>
+	</div>
+</main>
+<?php
+include 'commons/DOM/footer.php';
+include 'commons/DOM/scripts.php';
+?>
+</body>
+</html>
+<?php
+$end_time = microtime(true);
+if($print_execution_timer) {
+	echo("<!-- PHP execution took " . round(($end_time - $start_time) * 1000, 2) . " ms -->");
+}
+?>

index.php

@@ -3,9 +3,6 @@ $start_time = microtime(true);
 set_include_path('./');
 include_once 'commons/config.php';
 include_once 'commons/langs.php';
-
-// Page-specific config
-$enable_glider = true;
 ?>
 <!DOCTYPE html>
 <html lang="<?php echo($user_language); ?>">
@@ -34,19 +31,13 @@ include 'commons/DOM/sidebar.php';
 </header>
 <main id="main" class="rl-m border border-r-0 p-l">
 	
-	<?php printMainHeader(localize("home.intro.title")); ?>
-    <p class="mt-xs ml-s"><?php print(localize("home.intro.text.1")); ?></p>
-    <p class="mt-xs ml-s"><?php print(localize("home.intro.text.2")); ?></p>
+	<?php printMainHeader(localize("home.intro.title", ["<i class='ml-xxs'>NibblePoker." . $host_tld . "</i>"])); ?>
+    <p class="mt-xs mx-s"><?php print(localize("home.intro.text.1")); ?></p>
+    <p class="mt-xs mx-s"><?php print(localize("home.intro.text.2")); ?></p>
+	
 	
 	<?php printMainHeader(localize("home.showcase.title")); ?>
-	<div class="mt-xs mx-s border r-s">
-		<div class="glider">
-			<img src="/resources/NibblePoker/images/content/lscom/lscom-legacy-simple.png" alt="test123">
-			<img src="/resources/NibblePoker/images/content/lscom/lscom-legacy-simple.png" alt="test123">
-			<img src="/resources/NibblePoker/images/content/lscom/lscom-legacy-simple.png" alt="test123">
-			<img src="/resources/NibblePoker/images/content/lscom/lscom-legacy-simple.png" alt="test123">
-		</div>
-	</div>
+	<p class="mt-xs mx-s t-bold">TODO</p>
 	
 	<?php printMainHeader(localize("home.updates.title")); ?>
 	<p class="mt-xs ml-s t-w-600"><i class="fad fa-calendar-alt mr-xs"></i><?php print(localize("home.updates.3.date")); ?></p>
@@ -56,7 +47,7 @@ include 'commons/DOM/sidebar.php';
 		<?php print(localize("home.updates.3.text.3")); ?><br>
 		<?php print(localize("home.updates.text.privacy")); ?>
 	</p>
-	<p class="mt-xs ml-s t-w-600"><i class="fad fa-calendar-alt mr-xs"></i><?php print(localize("home.updates.2.date")); ?></p>
+	<p class="mt-s ml-s t-w-600"><i class="fad fa-calendar-alt mr-xs"></i><?php print(localize("home.updates.2.date")); ?></p>
 	<p class="mt-xxs ml-m">
 		<?php print(localize("home.updates.2.text.1")); ?><br>
 		<?php print(localize("home.updates.2.text.2")); ?><br>

resources/NibblePoker/js/nibblepoker-contributors.js

@@ -0,0 +1,27 @@
+const rootSoundDirectory = "/resources/NibblePoker/sounds/"
+
+const kittySoundData = {
+	"kitty-kiki" : [
+		"meow-test-01.ogg",
+	],
+	"kitty-maki" : [
+		"meow-test-02.ogg",
+	],
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	for (const [eId, sounds] of Object.entries(kittySoundData)) {
+		const eHovered = document.getElementById(eId);
+		
+		if(eHovered !== null) {
+			eHovered.addEventListener('mouseover', function() {
+				const randomIndex = Math.floor(Math.random() * sounds.length);
+				const audio= new Audio(rootSoundDirectory + sounds[randomIndex]);
+				audio.volume = 0.1;
+				try {
+					audio.play();
+				} catch(DOMException) {}
+			});
+		}
+	}
+});

resources/NibblePoker/scss/core/display.scss

@@ -11,3 +11,5 @@
 .o-hidden {
 	overflow: hidden;
 }
+
+// Note: 'core/grid.scss' defines '.d-grid' !

resources/NibblePoker/scss/core/grid.scss

@@ -0,0 +1,25 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+.grid, .d-grid {
+	display: grid;
+}
+
+@mixin grid-col-maker($col-count, $middle-part) {
+	.col-#{$middle-part}#{$col-count} {
+		grid-template-columns: repeat(#{$col-count}, 1fr);
+	}
+}
+
+// Defining rules for all devices.
+@include grid-col-maker("1", "");
+@include grid-col-maker("2", "");
+@include grid-col-maker("3", "");
+@include grid-col-maker("4", "");
+@include grid-col-maker("6", "");
+@include grid-col-maker("8", "");
+
+@media only screen and (max-width: 768px) {
+	@include grid-col-maker("1", "mobile-");
+	@include grid-col-maker("2", "mobile-");
+	@include grid-col-maker("3", "mobile-");
+}

resources/NibblePoker/scss/nibblepoker.scss

@@ -23,6 +23,7 @@
 @import 'core/float';
 @import 'core/sizing';
 @import 'core/flex';
+@import 'core/grid';
 @import 'core/text';
 @import 'core/containers';
 @import 'core/display';

resources/NibblePoker/scss/site/image.scss

@@ -15,6 +15,49 @@
 	height: 7.5rem;
 }
 
+.img-contributor, .img-contributor > img {
+	width: 6rem;
+	height: 6rem;
+	
+	border-radius: 50%;
+	
+	transition: width 0.175s ease-in-out, height 0.175s ease-in-out, opacity 0.175s ease-in-out;
+	
+	&:hover, &:hover > img {
+		width: 7.5rem;
+		height: 7.5rem;
+	}
+	
+	&.kitty {
+		cursor: grab;
+	}
+}
+
+.img-contributor {
+	display: inline-block;
+	box-shadow: 0 0 6px 0 rgba(0,0,0,0.75);
+	
+	&>img {
+		position: absolute;
+		
+		&:last-child {
+			box-shadow: none;
+			position: relative;
+			opacity: 0.0;
+		}
+	}
+	
+	&:hover {
+		img {
+			opacity: 0.0;
+		}
+		&>img:last-child {
+			opacity: 1.0;
+		}
+	}
+}
+
+
 .sidebar-entry > i {
 
 }