Finished (?) welcome page

index.html

@@ -49,12 +49,12 @@
       <nav id="section-list"></nav>
       <nav id="tab-list"></nav>
       <section id="tabs">
-        <div class="page active" id="Welcome" data-tab="$Welcome">
+        <div class="page center" id="Welcome" data-tab="$Welcome">
           <header>
             <img class="icon" src="assets/images/outline.svg" />
             <img class="type" src="assets/images/type.svg" />
           </header>
-          <div>
+          <div class="maxw">
             <p>
               This handbook is a collection of tweaks of the /tg/station wiki
               pages to make them prettier and easier to navigate.
@@ -71,10 +71,57 @@
                 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>
+          <div class="features">
+            <h2>
+              <div class="maxw">
+                <div>Extra Features</div>
+              </div>
+            </h2>
+            <div class="maxw">
+              <h3 class="nobg">Jump to section/item</h3>
+              <p>
+                Press <b>SHIFT+S</b> on any page (except this one) to open up a
+                quick search menu.
+              </p>
+              <p>
+                Results for most pages are section titles, but some pages like
+                Chemistry have support for searching recipes etc.
+              </p>
+              <div class="images">
+                <img
+                  src="assets/images/welcome/bs-local.png"
+                  style="width: 40%;"
+                  loading="lazy"
+                />
+                <img
+                  src="assets/images/welcome/bs-global.png"
+                  style="width: 40%;"
+                  loading="lazy"
+                />
+              </div>
+              <p>
+                By default, only results for the current page are shown, you can
+                use <code>@</code> as prefix to search in all guides at once.
+              </p>
+              <h3 class="nobg">(Chemistry) Auto-Expanded tooltips</h3>
+              <p>
+                Recipes for reagent ingredients are now always shown in each
+                recipe rather than being tooltips.
+              </p>
+              <h3 class="nobg">(Chemistry) Beaker sizing</h3>
+              <p>
+                Press <b>SHIFT+B</b> to set your target reagent output and the
+                inputs will change from "part" to "ml". This is currently quite
+                inaccurate, use it as a guideline but apply common sense.
+              </p>
+            </div>
           </div>
-          <p>
-            Click any guide in the top menu to open it.
-          </p>
         </div>
       </section>
     </main>

src/index.ts

@@ -5,6 +5,7 @@ import { searchBox } from "./scripts/search";
 
 // @ts-expect-error: Parcel image import
 import unknown from "~/assets/images/tab-icons/unknown.svg";
+import { bindFunctions } from "./scripts/index";
 
 async function load() {
   const sectionListContainer = document.getElementById("section-list");
@@ -36,8 +37,7 @@ async function load() {
 
   const promises = sections.flatMap(async (section) => {
     manager.createSection(section.name);
-    return null;
+
-    /*
     return section.tabs.map(async (tab) => {
       // Load page
       await manager.openTab(section.name, tab.page, {
@@ -47,7 +47,6 @@ async function load() {
       // Remove icon from loading
       icons.removeChild(icons.querySelector(`img[data-tab=${tab.page}]`));
     });
-    */
   });
 
   manager.showSection("Medical");
@@ -55,9 +54,14 @@ async function load() {
   // manager.createSection("Medical");
   // const promises = [manager.openTab("Medical", "Infections", {})];
 
+  const welcome = document.getElementById("Welcome");
+  bindFunctions(welcome, "$Welcome");
+
   Promise.all(promises).then(() => {
     // Remove app-wide loading
     manager.setLoading(false);
+
+    welcome.classList.add("active");
   });
 }
 if ("serviceWorker" in navigator) {

src/scripts/index.ts

@@ -2,6 +2,7 @@ import { chemistryScript, processChemistry } from "./pages/chemistry";
 import { processVirology, virologyScript } from "./pages/virology";
 import { genericScript } from "./pages/generic";
 import { processGlobal } from "./pages/global";
+import { welcomeScript } from "./pages/welcome";
 
 // This is used for cache busting when userscript changes significantly.
 // Only change it when you made changes to the processHTML part!
@@ -59,6 +60,9 @@ export function bindFunctions(root: HTMLElement, docname: string): void {
       genericScript(root, docname);
       virologyScript(root);
       break;
+    case "$Welcome":
+      welcomeScript(root);
+      break;
     default:
       genericScript(root, docname);
       break;

src/scripts/pages/welcome.ts

@@ -0,0 +1,19 @@
+import { nextAnimationFrame } from "../../utils";
+
+export function welcomeScript(root: HTMLElement): void {
+  const expandLink = document.getElementById("welcome_expand");
+  expandLink.addEventListener("click", async () => {
+    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",
+      behavior: "smooth",
+    });
+  });
+}
+
+export default { welcomeScript };

style/pages/welcome.scss

@@ -1,11 +1,17 @@
 #Welcome {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    &.center {
-    justify-content: center;
+        align-items: center;
+        justify-content: center;
+    }
+    &:not(.center) {
+        header {
+            margin-top: 20px;
+        }
+    }
     font-size: 12pt;
     line-height: 1.4em;
-    padding: 10pt;
     header {
         display: flex;
         flex-direction: row;
@@ -22,8 +28,44 @@
             width: 400px;
         }
     }
-    p,
+
-    ul {
+    .features {
+        width: 100%;
+        opacity: 0;
+        display: none;
+        transition: all 200ms;
+    }
+
+    .maxw {
+        margin: 0 auto;
         max-width: 960px;
+        text-align: left;
+    }
+
+    h3 {
+        font-size: 15pt;
+    }
+
+    h3.nobg {
+        background: transparent;
+        margin-bottom: 0;
+        padding-bottom: 0;
+        position: relative;
+        z-index: 2;
+    }
+
+    code {
+        display: inline-block;
+        background-color: #222;
+        border-radius: 3px;
+        padding: 2px 5px;
+    }
+
+    .images {
+        display: flex;
+        flex-wrap: wrap;
+        img {
+            margin: 10px;
+        }
     }
 }