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>
+              <div class="action_buttons">
-                Click any guide in the top menu to open it or
+                <button id="welcome_expand">Extra features</button>
-                <a href="#" id="welcome_expand">click here</a> to learn about
+              </div>
-                some of the extra features packed in.
-              </p>
             </div>
-            <div class="features">
+            <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

@@ -1,68 +1,73 @@
 #Welcome {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    &.center {
+  &.center {
-        align-items: center;
+    align-items: center;
-        justify-content: center;
+    justify-content: center;
-    }
+  }
-    &:not(.center) {
+  &:not(.center) {
-        header {
-            margin-top: 20px;
-        }
-    }
-    font-size: 12pt;
-    line-height: 1.4em;
     header {
-        display: flex;
+      margin-top: 20px;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        padding: 20pt;
-        .icon {
-            max-width: 25vw;
-            width: 200px;
-            margin-right: 20px;
-        }
-        .type {
-            max-width: 50vw;
-            width: 400px;
-        }
     }
+  }
+  font-size: 12pt;
+  line-height: 1.4em;
+  header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 20pt;
+    .icon {
+      max-width: 25vw;
+      width: 200px;
+      margin-right: 20px;
+    }
+    .type {
+      max-width: 50vw;
+      width: 400px;
+    }
+  }
 
-    .features {
+  .hidden {
-        width: 100%;
+    width: 100%;
-        opacity: 0;
+    opacity: 0;
-        display: none;
+    display: none;
-        transition: all 200ms;
+    transition: all 200ms;
-    }
+  }
 
-    h3 {
+  h1,
-        font-size: 15pt;
+  h2 {
-    }
+    margin-top: 2em;
+  }
 
-    h3.nobg {
+  h3 {
-        background: transparent;
+    font-size: 15pt;
-        margin-bottom: 0;
+  }
-        padding-bottom: 0;
-        position: relative;
-        z-index: 2;
-        &:before {
-            display: none;
-        }
-    }
 
-    code {
+  h3.nobg {
-        display: inline-block;
+    background: transparent;
-        background-color: #222;
+    margin-bottom: 0;
-        border-radius: 3px;
+    padding-bottom: 0;
-        padding: 2px 5px;
+    position: relative;
+    z-index: 2;
+    &:before {
+      display: none;
     }
+  }
 
-    .images {
+  code {
-        display: flex;
+    display: inline-block;
-        flex-wrap: wrap;
+    background-color: #222;
-        img {
+    border-radius: 3px;
-            margin: 10px;
+    padding: 2px 5px;
-        }
+  }
+
+  .images {
+    display: flex;
+    flex-wrap: wrap;
+    img {
+      margin: 10px;
     }
+  }
 }