Merge branch 'git-turns-20'

This little topic branch adds some fun sugar on top of Git's home page
to celebrate its 20th anniversary.

As a sneak-peak, the celebratory additions can be viewed by typing the
digits "2" and "0" when viewing the page.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

assets/js/application.js

@@ -32,6 +32,7 @@ const baseURLPrefix = (() => {
 $(document).ready(function() {
   BrowserFallbacks.init();
   DarkMode.init();
+  GitTurns20.init();
   Search.init();
   Dropdowns.init();
   Forms.init();
@@ -102,6 +103,56 @@ var BrowserFallbacks = {
 
 }
 
+var GitTurns20 = {
+  keySequence: '20',
+  keySequenceOffset: 0,
+
+  init: function() {
+    const today = new Date();
+    if (today.getFullYear() === 2025 && today.getMonth() === 3 && today.getDate() === 7) {
+      this.celebrate();
+    }
+  },
+
+  keydown: function(e) {
+    if (this.keySequenceOffset >= this.keySequence.length) return;
+    if (this.keySequence[this.keySequenceOffset] === e.key) {
+      if (++this.keySequenceOffset === this.keySequence.length) {
+        this.celebrate();
+        this.keySequenceOffset = 0;
+      }
+    }
+  },
+
+  celebrate: function() {
+    document.documentElement.dataset.celebration = 'git-turns-20';
+    $("#tagline").html('<a href="https://discord.com/channels/1042895022950994071/1356927327388434564">--20th-anniversary</a>');
+    if ($("#masthead").length) { // only do this on the front page
+      (async () => {
+        await import('https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js');
+        const count = 200;
+        const defaults = {
+          origin: { y: 0.7 }
+        };
+
+        for (const [particleRatio, opts] of [
+          [0.25, { spread: 26, startVelocity: 55 }],
+          [0.2, { spread: 60 }],
+          [0.35, { spread: 100, decay: 0.91, scalar: 0.8 }],
+          [0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 }],
+          [0.1, { spread: 120, startVelocity: 45 }],
+        ]) {
+          window.confetti({
+            ...defaults,
+            ...opts,
+            particleCount: Math.floor(count * particleRatio)
+          });
+        }
+      })().catch(console.error);
+    }
+  }
+};
+
 var Search = {
   searching: false,
   currentSearch: '',
@@ -166,6 +217,7 @@ var Search = {
         e.preventDefault();
         $('form#search input').focus();
       }
+      else if (e.target.tagName.toUpperCase() !== 'INPUT') GitTurns20.keydown(e);
     });
   },
 
@@ -343,11 +395,11 @@ var Search = {
     (async () => {
       const pagefindURL =
         `${baseURLPrefix}pagefind/pagefind.js`
-	  // adjust the `baseURLPrefix` if it is relative: the `import`
-	  // is relative to the _script URL_ here, which is in /js/.
-	  // That is different from other uses of `baseURLPrefix`, which
-	  // replace `href` and `src` attributes which are relative to the
-	  // page itself that is outside of /js/.
+          // adjust the `baseURLPrefix` if it is relative: the `import`
+          // is relative to the _script URL_ here, which is in /js/.
+          // That is different from other uses of `baseURLPrefix`, which
+          // replace `href` and `src` attributes which are relative to the
+          // page itself that is outside of /js/.
           .replace(/^\.\//, '../')
       Search.pagefind = await import(pagefindURL);
       const options = {

assets/sass/application.scss

@@ -28,6 +28,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
 @import 'lists';
 @import 'about';
 @import 'dark-mode';
+@import 'git-turns-20';
 
 code {
   display: inline;

assets/sass/git-turns-20.css

@@ -0,0 +1,19 @@
+@mixin logo20($infix: '') {
+    img[alt="Git"] {
+        filter: unset;
+        content: url('./images/logo20' + $infix + '.svg');
+    }
+}
+
+:root[data-celebration="git-turns-20"] {
+    @include logo20
+    &[data-theme="dark"] {
+        @include logo20($infix: '.dark-mode')
+    }
+    @media screen and (prefers-color-scheme: dark) {
+        @include logo20
+        &:not([data-theme="light"]) {
+            @include logo20($infix: '.dark-mode')
+        }
+    }
+}