Better home, crips images

.drone.yml

@@ -34,6 +34,7 @@ steps:
       - yarn build
     environment:
       SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}-${DRONE_COMMIT_SHA:0:8}
+      REVISION: ${DRONE_COMMIT_SHA}
     when:
       event:
         - push
@@ -47,6 +48,7 @@ steps:
     environment:
       SUBPATH: /tghandbook/pr-${DRONE_PULL_REQUEST}
       OUTDIR: ./dist-pr
+      REVISION: ${DRONE_COMMIT_SHA}
     when:
       event:
         - pull_request
@@ -60,6 +62,7 @@ steps:
     environment:
       SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}
       OUTDIR: ./dist-branch
+      REVISION: ${DRONE_COMMIT_SHA}
     when:
       event:
         - push

index.html

@@ -49,7 +49,7 @@
       <nav id="section-list"></nav>
       <nav id="tab-list"></nav>
       <section id="tabs">
-        <div class="page center" id="Welcome" data-tab="$Welcome">
+        <div class="page special center" id="Welcome" data-tab="$Welcome">
           <div class="wrapper">
             <header>
               <img class="icon" src="assets/images/outline.svg" />
@@ -72,13 +72,11 @@
                   are not as polished as they should be.
                 </li>
               </ul>
-              <p>
-                Click any guide in the top menu to open it or
-                <a href="#" id="welcome_expand">click here</a> to learn about
-                some of the extra features packed in.
-              </p>
+              <div class="action_buttons">
+                <button id="welcome_expand">Extra features</button>
               </div>
-            <div class="features">
+            </div>
+            <div class="features hidden">
               <h2>
                 Extra Features
               </h2>
@@ -123,6 +121,24 @@
                 </p>
               </div>
             </div>
+            <div class="credits hidden">
+              <h2>
+                Other infos
+              </h2>
+              <p>
+                Thanks to /tg/station and every wiki contributor who did most of
+                the work!
+              </p>
+              <p>
+                This thing is Open Source:
+                <a href="https://git.fromouter.space/hamcha/tghandbook"
+                  >git.fromouter.space/hamcha/tghandbook</a
+                >
+              </p>
+              <p>
+                /tg/station handbook revision: <span id="tgh-version"></span>
+              </p>
+            </div>
           </div>
         </div>
       </section>

src/index.ts

@@ -75,6 +75,13 @@ if ("serviceWorker" in navigator) {
     });
 }
 
+// Start loading pages
 load();
 
+// Add search box
 document.body.appendChild(searchBox());
+
+// Add revision info
+document
+  .getElementById("tgh-version")
+  .appendChild(document.createTextNode(process.env.REVISION || "unknown"));

src/scripts/pages/welcome.ts

@@ -1,13 +1,25 @@
 import { nextAnimationFrame } from "../../utils";
 
+function expandPage(root: HTMLElement) {
+  // Show all sections
+  root.querySelectorAll<HTMLElement>("div.hidden").forEach((div) => {
+    div.style.display = "block";
+    div.style.opacity = "1";
+  });
+
+  // Hide buttons
+  root.querySelector<HTMLElement>(".action_buttons").style.display = "none";
+
+  // Remove vertical centering
+  root.classList.remove("center");
+}
+
 export function welcomeScript(root: HTMLElement): void {
   const expandLink = document.getElementById("welcome_expand");
   expandLink.addEventListener("click", async () => {
+    expandPage(root);
     const featureDiv = root.querySelector<HTMLDivElement>(".features");
-    featureDiv.style.display = "block";
-    root.classList.remove("center");
     await nextAnimationFrame();
-    featureDiv.style.opacity = "1";
     featureDiv.scrollIntoView({
       block: "start",
       inline: "nearest",

style/pages/global.scss

@@ -76,6 +76,12 @@ $max-width: 960px;
   }
 }
 
+.page:not(.special) img {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: pixelated;
+  -ms-interpolation-mode: nearest-neighbor;
+}
+
 .wrapper {
   margin: 0 auto;
   max-width: $max-width;

style/pages/welcome.scss

@@ -29,13 +29,18 @@
     }
   }
 
-    .features {
+  .hidden {
     width: 100%;
     opacity: 0;
     display: none;
     transition: all 200ms;
   }
 
+  h1,
+  h2 {
+    margin-top: 2em;
+  }
+
   h3 {
     font-size: 15pt;
   }