Updated png and bmp related-libs, Updated home page and sidebar

Update sidebar.yml, home.yml, and 7 more files...

data/sidebar.yml

@@ -48,7 +48,7 @@
   abs_href: "/tools"
   icon: fad fa-toolbox
   active_id: tools
-  has_new_until_utc: 1760986472
+  has_new_until_utc: 1758726438
 
 - title_key: text.downloads
   raw_href: "https://files.nibblepoker.lu/"
@@ -58,11 +58,11 @@
 
 -
 
-- title_key: text.about
+#- title_key: text.about
-  abs_href: "/about"
+#  abs_href: "/about"
-  icon: fad fa-user
+#  icon: fad fa-user
-  active_id: about
+#  active_id: about
-  has_new_until_utc: 0
+#  has_new_until_utc: 0
 
 - title_key: text.contact
   abs_href: "/contact"

data/strings/fr/home.yml

@@ -15,7 +15,7 @@ header.title: Page d'accueil
 intro.title: Bienvenue sur %0
 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.
+  est accessible gratuitement et sous des licences open source.
 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.
 

static/resources/Externals/.gitignore

@@ -0,0 +1 @@
+*.svg

static/resources/NibblePoker/applets/png-analyser/png-analyser.mjs

@@ -1,6 +1,7 @@
 
 import {initCore} from "../../js/nibblepoker-core.mjs"
 import {parsePngFile} from "../../libs/png-utils.mjs";
+import {parseBmpFile} from "../../libs/bmp-utils.mjs";
 
 {
     initCore();
@@ -16,12 +17,18 @@ import {parsePngFile} from "../../libs/png-utils.mjs";
 
             console.log(files);
 
-            parsePngFile(files[0]).then(pngFile => {
+            if(files[0].name.endsWith(".png")) {
-                console.log(pngFile);
+                parsePngFile(files[0]).then(pngFile => {
+                    console.log(pngFile);
+                    console.log(pngFile.getImageHeaderChunk().getWidth());
+                    console.log(pngFile.getImageHeaderChunk().getHeight());
+                });
+            } else if(files[0].name.endsWith(".bmp")) {
+                parseBmpFile(files[0]).then(bmpFile => {
+                    console.log(bmpFile);
+                });
+            }
 
-                console.log(pngFile.getImageHeaderChunk().getWidth());
-                console.log(pngFile.getImageHeaderChunk().getHeight());
-            });
         });
     };
 }

static/resources/NibblePoker/libs/bmp-utils.mjs

@@ -0,0 +1,57 @@
+import {loadFileAsUint8Array} from "./file-utils.mjs";
+import {peekUInt32BE, peekUInt16BE} from "./data-utils.mjs";
+
+/*export const test = {
+    WINDOWS: "BM",
+    OS2_STRUCT_BITMAP_ARRAY: "BA",
+    OS2_STRUCT_COLOR_ICON: "CI",
+    OS2_CONST_COLOR_POINTER: "CP",
+    OS2_STRUCT_ICON: "IC",
+    OS2_POINTER: "PT",
+}*/
+
+export class BmpHeader {
+    /** @type {Uint8Array} */
+    data;
+
+    /**
+     * @param byteArray {Uint8Array|null}
+     */
+    constructor(byteArray) {
+        if(byteArray === null || byteArray === undefined) {
+            this.data = new Uint8Array(14);
+        } else {
+            this.data = byteArray;
+        }
+    }
+
+    getSignature() {
+        return peekUInt16BE(this.data, 0);
+    }
+
+    getFileSize() {
+        return peekUInt32BE(this.data, 2);
+    }
+
+    getReserved() {
+        return peekUInt32BE(this.data, 6);
+    }
+
+    getDataOffset() {
+        return peekUInt32BE(this.data, 10);
+    }
+}
+
+export class CrudeBmpFile {
+
+    constructor(file = null, fileData = null) {
+        this.originalFile = file;
+    }
+
+}
+
+export function parseBmpFile(file) {
+    return loadFileAsUint8Array(file).then(byteBuffer => {
+        return new CrudeBmpFile(file, byteBuffer);
+    });
+}

static/resources/NibblePoker/libs/data-utils.mjs

@@ -23,6 +23,34 @@ export function areUintArraysEqual(array1, array2) {
     return true;
 }
 
+/**
+ * Peeks a UInt16 from the given data at the given offset in Big-Endian.
+ * @param data {Uint8Array} - Data to read from.
+ * @param offset {number} - Offset to read from in the given `data`.
+ * @return {number} The peeked number.
+ * @throws RangeError If the given offset is too close or over the end of the data.
+ */
+export function peekUInt16BE(data, offset = 0) {
+    if(offset + 2 > data.length) {
+        throw new RangeError(`Offset is too far into the given data ! (${offset} & ${data.length})`);
+    }
+    return new DataView(data.buffer, offset, 2).getUint16(0, false);
+}
+
+/**
+ * Peeks a UInt16 from the given data at the given offset in Little-Endian.
+ * @param data {Uint8Array} - Data to read from.
+ * @param offset {number} - Offset to read from in the given `data`.
+ * @return {number} The peeked number.
+ * @throws RangeError If the given offset is too close or over the end of the data.
+ */
+export function peekUInt16LE(data, offset = 0) {
+    if(offset + 2 > data.length) {
+        throw new RangeError(`Offset is too far into the given data ! (${offset} & ${data.length})`);
+    }
+    return new DataView(data.buffer, offset, 2).getUint16(0, true);
+}
+
 /**
  * Peeks a UInt32 from the given data at the given offset in Big-Endian.
  * @param data {Uint8Array} - Data to read from.

templates/applets/png-analyser.jinja

@@ -1,3 +1,3 @@
 
-{{ render_file_input(tool_id + "-test-input", true, ".png", true, true) }}
+{{ render_file_input(tool_id + "-test-input", true, ".png, .bmp", true, true) }}
 

templates/base_www.jinja

@@ -17,13 +17,12 @@
     <link rel="prefetch" href="https://cdn.nibblepoker.lu/FontAwesomePro/6.7.2/webfonts/fa-brands-400.woff2" as="font" />
     <link rel="prefetch" href="https://cdn.nibblepoker.lu/FontAwesomePro/6.7.2/webfonts/fa-duotone-900.woff2" as="font" />
     <link rel="prefetch" href="https://cdn.nibblepoker.lu/FontAwesomePro/6.7.2/webfonts/fa-solid-900.woff2" as="font" />
-    <link rel="prefetch" href="https://cdn.nibblepoker.lu/NibblePoker/StandardCSS/3px-tile-0.1.png" as="image" />
-    <link rel="prefetch" href="https://cdn.nibblepoker.lu/NibblePoker/StandardCSS/3px-tile-0.4.png" as="image" />
     {% block extra_preloads %}{% endblock %}
 
     <link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/FontAwesomePro/6.7.2/css/all.min.css">
-    <link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/NibblePoker/IndevCSS/nibblepoker.min.css">
+    <link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/NibblePoker/StandardCSS/nibblepoker.min.css">
     <link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/Quantum/Quantum.min.css">
+    <link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/FamFamFam/FlagsExtended/famfamfam-flags.min.css">
 
     <link rel="stylesheet" href="{{ url_for("static", filename="resources/NibblePoker/css/extra.css") }}">
 
@@ -53,16 +52,37 @@
         </summary>
 
         <div class="p-xs border bkgd-surround r-m t-w-500">
-            <a href="{{ l10n_url_switch(request_path, "en") }}" class="a-hidden">
+            <table class="w-full table-p-xxs">
-                <p class="mb-s px-xxs">{{ l10n("english", "langs", user_lang) }}</p>
+                <tr>
-            </a>
+                    <td>
-            <a href="{{ l10n_url_switch(request_path, "fr") }}" class="a-hidden">
+                        <a href="{{ l10n_url_switch(request_path, "en") }}" class="w-full d-inline-block a-hidden">
-                <p class="my-s px-xxs">{{ l10n("french", "langs", user_lang) }}</p>
+                            {{ l10n("english", "langs", user_lang) }}
-            </a>
+                        </a>
-            <hr class="subtle m-0">
+                    </td>
-            <a href="{{ l10n_url_switch(request_path) }}" class="a-hidden">
+                    <td class="t-center"><i class="famfamfam-flag-us"></i></td>
-                <p class="mt-xs px-xxs">{{ l10n("automatic", "langs", user_lang) }}</p>
+                </tr>
-            </a>
+                <tr>
+                    <td>
+                        <a href="{{ l10n_url_switch(request_path, "fr") }}" class="w-full d-inline-block a-hidden">
+                            {{ l10n("french", "langs", user_lang) }}
+                        </a>
+                    </td>
+                    <td class="t-center"><i class="famfamfam-flag-be"></i></td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <hr class="subtle m-0">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <a href="{{ l10n_url_switch(request_path) }}" class="w-full d-inline-block a-hidden">
+                            {{ l10n("automatic", "langs", user_lang) }}
+                        </a>
+                    </td>
+                    <td class="t-center"><i class="famfamfam-flag-unknown"></i></td>
+                </tr>
+            </table>
         </div>
     </details>
 </header>

templates/pages/root.jinja

@@ -12,51 +12,58 @@
 {% endblock %}
 
 {% block main_content %}
-    {{ render_h1(l10n("intro.title", "home", user_lang, ["NibblePoker." + domain_tld] )) }}
+    <section>
+        {{ render_h1(l10n("intro.title", "home", user_lang, ["NibblePoker." + domain_tld] )) }}
 
-    {{ render_paragraph(l10n("intro.text.1", "home", user_lang)) }}
+        <div class="content-spacer">
-    {{ render_paragraph(l10n("intro.text.2", "home", user_lang)) }}
+            {{ render_paragraph(l10n("intro.text.1", "home", user_lang)) }}
+            {{ render_paragraph(l10n("intro.text.2", "home", user_lang)) }}
+        </div>
+    </section>
+    
+    <section>
+        {{ render_h2(l10n("updates.title", "home", user_lang)) }}
 
+        <div class="content-spacer">
+            <p><i class="fad fa-calendar-alt mr-xs"></i>{{ l10n("updates.5.date", "home", user_lang) }}</p>
+            {{ render_list_ul([
+                l10n("updates.5.text.1", "home", user_lang),
+                l10n("updates.5.text.2", "home", user_lang),
+                l10n("updates.text.privacy", "home", user_lang)
+            ]) }}
 
-    {{ render_h2(l10n("updates.title", "home", user_lang)) }}
+            <p><i class="fad fa-calendar-alt mr-xs mt-s"></i>{{ l10n("updates.4.date", "home", user_lang) }}</p>
+            {{ render_list_ul([
+                l10n("updates.4.text.1", "home", user_lang),
+                l10n("updates.4.text.2", "home", user_lang),
+                l10n("updates.4.text.3", "home", user_lang),
+                l10n("updates.text.privacy", "home", user_lang)
+            ]) }}
 
-    <p><i class="fad fa-calendar-alt mr-xs mt-s"></i>{{ l10n("updates.5.date", "home", user_lang) }}</p>
+            <p><i class="fad fa-calendar-alt mr-xs mt-s"></i>{{ l10n("updates.3.date", "home", user_lang) }}</p>
-    {{ render_list_ul([
+            {{ render_list_ul([
-        l10n("updates.5.text.1", "home", user_lang),
+                l10n("updates.3.text.1", "home", user_lang),
-        l10n("updates.5.text.2", "home", user_lang),
+                l10n("updates.3.text.2", "home", user_lang),
-        l10n("updates.text.privacy", "home", user_lang)
+                l10n("updates.3.text.3", "home", user_lang),
-    ]) }}
+                l10n("updates.text.privacy", "home", user_lang)
+            ]) }}
 
-    <p><i class="fad fa-calendar-alt mr-xs mt-s"></i>{{ l10n("updates.4.date", "home", user_lang) }}</p>
+            <p><i class="fad fa-calendar-alt mr-xs mt-s"></i>{{ l10n("updates.2.date", "home", user_lang) }}</p>
-    {{ render_list_ul([
+            {{ render_list_ul([
-        l10n("updates.4.text.1", "home", user_lang),
+                l10n("updates.2.text.1", "home", user_lang),
-        l10n("updates.4.text.2", "home", user_lang),
+                l10n("updates.2.text.2", "home", user_lang),
-        l10n("updates.4.text.3", "home", user_lang),
+                l10n("updates.2.text.3", "home", user_lang),
-        l10n("updates.text.privacy", "home", user_lang)
+                l10n("updates.2.text.4", "home", user_lang),
-    ]) }}
+                l10n("updates.text.privacy", "home", user_lang)
+            ]) }}
 
-    <p><i class="fad fa-calendar-alt mr-xs mt-s"></i>{{ l10n("updates.3.date", "home", user_lang) }}</p>
+            <p><i class="fad fa-calendar-alt mr-xs mt-s"></i>{{ l10n("updates.1.date", "home", user_lang) }}</p>
-    {{ render_list_ul([
+            {{ render_list_ul([
-        l10n("updates.3.text.1", "home", user_lang),
+                l10n("updates.1.text.1", "home", user_lang),
-        l10n("updates.3.text.2", "home", user_lang),
+                l10n("updates.text.privacy", "home", user_lang)
-        l10n("updates.3.text.3", "home", user_lang),
+            ]) }}
-        l10n("updates.text.privacy", "home", user_lang)
+        </div>
-    ]) }}
+    </section>
-
-    <p><i class="fad fa-calendar-alt mr-xs mt-s"></i>{{ l10n("updates.2.date", "home", user_lang) }}</p>
-    {{ render_list_ul([
-        l10n("updates.2.text.1", "home", user_lang),
-        l10n("updates.2.text.2", "home", user_lang),
-        l10n("updates.2.text.3", "home", user_lang),
-        l10n("updates.2.text.4", "home", user_lang),
-        l10n("updates.text.privacy", "home", user_lang)
-    ]) }}
-
-    <p><i class="fad fa-calendar-alt mr-xs mt-s"></i>{{ l10n("updates.1.date", "home", user_lang) }}</p>
-    {{ render_list_ul([
-        l10n("updates.1.text.1", "home", user_lang),
-        l10n("updates.text.privacy", "home", user_lang)
-    ]) }}
 
 {% endblock %}