make messy homepage preview

Sayeem2004 · Sayeem2004 · commit e3f2aad93998 · 2026-02-06T14:58:25.000-05:00
diff --git a/src/index.njk b/src/index.njk
@@ -8,21 +8,57 @@ layout: layout.njk
     We have further grouped these extensions into {{ extensionGroups | length }} <strong>extension groups</strong> based on their common functionality. These extension groups are listed below for your convenience, in relative order of importance. Feel free to explore!
 <p>
 
+<p>Search by mnemonic or long name. Hit Enter on an exact mnemonic match to jump straight to the instruction details.</p>
+
+<input id="search" placeholder="Search mnemonic, e.g. addi" style="padding:8px; width: 100%; max-width: 480px;" />
+
+{# Creates box divide between checkboxes and rest of page #}
+<fieldset id="extension-filters-fieldset" class="filters">
+    <legend>Filter by extension group</legend>
+    <div id="extension-filters" class="filter-options"></div>
+</fieldset>
+
 {% for extGroupName, extGroupInfo in extensionGroups %}
     <div class="dropdown-callout {% if loop.first %} open{% endif %}">
         <div class="header">
-            <strong>{{ extGroupName }}</strong> - <span class="group-description">{{ extGroupInfo.description }}</span>
+            <strong>{{ extGroupName }}</strong> - {{ extGroupInfo.description }}
         </div>
         <div class="content">
-            <ul>
+            <ul class="extension-list">
                 {% for ext in extensions %}
                     {% if ext.group == extGroupName %}
-                        <li>
-                            <strong>{{ ext.name }}</strong>
-                            <a href="/extensions/{{ ext.slug }}/">({{ ext.description }})</a>:
-                            {% for inst in ext.instructions %}
-                                <a href="/instructions/{{ inst.name }}/" style="color: #000000">{{ inst.name }}</a>,
-                            {% endfor %}
+                        <li class="extension-entry">
+                            <div class="extension-header">
+                                <strong>{{ ext.name }}</strong>
+                                (<a href="/extensions/{{ ext.slug }}/" class="extension-desc">{{ ext.description }}</a>)
+                                - Add small description here...
+                            </div>
+
+                            {% set limit = 28 %}
+                            {% set total = ext.instructions | length %}
+
+                            <div class="instruction-grid">
+                                {% for inst in ext.previewInstructions %}
+                                    <a href="/instructions/{{ inst.name }}/" class="instruction-pill">
+                                        {{ inst.name }}
+                                    </a>
+                                {% endfor %}
+                            </div>
+
+                            {% if total > limit %}
+                                <div class="instruction-grid" style="display: none;">
+                                    {% for inst in ext.instructions %}
+                                        <a href="/instructions/{{ inst.name }}/" class="instruction-pill">
+                                            {{ inst.name }}
+                                        </a>
+                                    {% endfor %}
+                                </div>
+
+                                <button class="show-more" data-total="{{ total }}" onclick="toggleInstructions(this)">
+                                    Show all {{ total }} instructions
+                                </button>
+
+                            {% endif %}
                         </li>
                     {% endif %}
                 {% endfor %}
@@ -38,23 +74,28 @@ layout: layout.njk
             parent.classList.toggle("open");
         });
     });
+
+    function toggleInstructions(button) {
+        const hiddenGrid = button.previousElementSibling;
+        const originalGrid = hiddenGrid.previousElementSibling;
+
+        hiddenGrid.style.display = hiddenGrid.style.display === "none" ? "grid" : "none";
+        originalGrid.style.display = originalGrid.style.display === "none" ? "grid" : "none";
+
+        if (hiddenGrid.style.display === "grid") button.textContent = "Show first 49 instructions";
+        else button.textContent = `Show all ${button.dataset.total} instructions`;
+    }
 </script>
 
-<ul id="extensions">
-{% for ext in extensions %}
-    <li data-name="{{ ext.name | lower }}">
-        <a href="/extensions/{{ ext.slug }}/">{{ ext.name }}</a>
-            <p class="extension-description">
-            {% if ext.description %}
-                {{ ext.description }}
-            {% else %}
-                Description coming soon.
-            {% endif %}
-        </p>
-    </li>
-{% endfor %}
-</ul>
+<div id="instruction_list" class="instruction-grid" style="display: none;">
+    {% for inst in instructions %}
+        <a data-search="{{ (inst.name ~ ' ' ~ inst.longName) | lower }}"
+            data-mnemonic="{{ inst.name | lower }}"
+            data-extension="{{ inst.extension }}"
+            data-extension-slug="{{ inst.extensionSlug }}"
+            data-extension-group="{{ inst.extensionGroup }}"
+            href="/instructions/{{ inst.name }}/" class="instruction-pill" style="display: none;">{{ inst.name }}</a>
+    {% endfor %}
+</div>
 
-<p class="secondary-callout">
-<a href="/search/">Try the searchable instruction index.</a>
-</p>
+<script src="/scripts/search.js"></script>
diff --git a/src/lib/loadExtensions.ts b/src/lib/loadExtensions.ts
@@ -13,6 +13,10 @@ export default () => {
         }
     }
 
+    for (const inst of instructions) {
+        inst.extensionGroup = extensionsToGroup[inst.extension] || "Remaining Instructions";
+    }
+
     const extensions = {}
     for (const inst of instructions) {
         const name = inst.extension || "unknown";
@@ -33,6 +37,7 @@ export default () => {
     for (const entry of list) {
         entry.instructions.sort((a, b) => a.name.localeCompare(b.name));
         entry.count = entry.instructions.length;
+        entry.previewInstructions = entry.instructions.slice(0, 49);
     }
 
     list.sort((a, b) => a.name.localeCompare(b.name));
diff --git a/src/scripts/search.ts b/src/scripts/search.ts
@@ -1,91 +1,104 @@
 const input = document.getElementById("search");
 const instruction_list = document.getElementById("instruction_list");
 const filtersFieldset = document.getElementById("extension-filters-fieldset");
-// the blank area where we’ll insert checkboxes
+// The blank area where we’ll insert checkboxes
 const filtersContainer = document.getElementById("extension-filters");
-const items = Array.from(instruction_list.querySelectorAll("li"));
-const activeExtensions = new Set();
+const items = Array.from(instruction_list.querySelectorAll("a"));
+const dropdowns = Array.from(document.querySelectorAll(".dropdown-callout"));
+const activeExtensionGroups = new Set();
 
 // Gather unique extension names from the rendered instruction <li> items.
-const extensionSet = new Set();
-for (const li of items) {
-  const extension = li.dataset.extension;
-  extensionSet.add(extension);
+const extensionGroupSet = new Set();
+for (const a of items) {
+    const extension = a.dataset.extensionGroup;
+    extensionGroupSet.add(extension);
 }
 
-const extensions = Array.from(extensionSet).sort();
-for (const extension of extensions) {
-  const id = `ext-${extension}`;
-  const label = document.createElement("label");
-  label.className = "filter-option";
-
-  const checkbox = document.createElement("input");
-  checkbox.type = "checkbox";
-  checkbox.value = extension;
-  checkbox.id = id;
-  checkbox.addEventListener("change", () => {
-    if (checkbox.checked) {
-      activeExtensions.add(extension);
+const extensionGroups = Array.from(extensionGroupSet).sort();
+for (const extensionGroup of extensionGroups) {
+    const id = `ext-group-${extensionGroup}`;
+    const label = document.createElement("label");
+    label.className = "filter-option";
+
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.value = extensionGroup;
+    checkbox.id = id;
+
+    checkbox.addEventListener("change", () => {
+        if (checkbox.checked) activeExtensionGroups.add(extensionGroup);
+        else activeExtensionGroups.delete(extensionGroup);
+        applyFilters();
+    });
+
+    const text = document.createElement("span");
+    text.textContent = extensionGroup;
+
+    label.appendChild(checkbox);
+    label.appendChild(text);
+    filtersContainer.appendChild(label);
+}
+
+function applyFilters() {
+    const q = input.value.trim().toLowerCase();
+    const filtersActive = activeExtensionGroups.size > 0;
+
+    if (q || filtersActive) {
+        // If there’s a search query, hide the dropdowns to save space
+        instruction_list.style.display = "grid";
+        for (const dropdown of dropdowns) {
+            dropdown.style.display = "none";
+        }
     } else {
-      activeExtensions.delete(extension);
+        // If the search box is empty, show the dropdowns again
+        instruction_list.style.display = "none";
+        for (const dropdown of dropdowns) {
+            dropdown.style.display = "block";
+        }
     }
-    applyFilters();
-  });
 
-  const text = document.createElement("span");
-  text.textContent = extension;
+    for (const a of items) {
+        /* Check if the item matches the text search
+        - If the search box is empty, match everything
+        - Otherwise, match if the search string includes the query */
+        const matchesQuery = !q || (a.dataset.search || "").includes(q);
 
-  label.appendChild(checkbox);
-  label.appendChild(text);
-  filtersContainer.appendChild(label);
-}
+        /* Check if the item matches an active extension filter
+        - If no filters are active, match everything
+        - Otherwise, show only if its extension is selected */
+        const matchesExtensionGroup = !filtersActive || activeExtensionGroups.has(a.dataset.extensionGroup);
 
-function applyFilters() {
-  const q = input.value.trim().toLowerCase();
-  const filtersActive = activeExtensions.size > 0;
-  for (const li of items) {
-    /* Check if the item matches the text search
-       - If the search box is empty, match everything
-       - Otherwise, match if the search string includes the query */
-    const matchesQuery = !q || (li.dataset.search || "").includes(q);
-
-    /* Check if the item matches an active extension filter
-       - If no filters are active, match everything
-       - Otherwise, show only if its extension is selected */
-    const matchesExtension =
-      !filtersActive || activeExtensions.has(li.dataset.extension);
-
-    // Show or hide this <li> depending on whether both match conditions are true
-    li.style.display = matchesQuery && matchesExtension ? "" : "none";
-  }
+        // Show or hide this <li> depending on whether both match conditions are true
+        a.style.display = matchesQuery && matchesExtensionGroup ? "grid" : "none";
+    }
 }
 
 input.addEventListener("input", applyFilters);
 
 input.addEventListener("keydown", (e) => {
-  // Only act if Enter is pressed
-  if (e.key !== "Enter") return;
+    // Only act if Enter is pressed
+    if (e.key !== "Enter") return;
 
-  const q = input.value.trim().toLowerCase();
+    const q = input.value.trim().toLowerCase();
 
-  // Do nothing if the box is empty
-  if (!q) return;
+    // Do nothing if the box is empty
+    if (!q) return;
 
-  const filtersActive = activeExtensions.size > 0;
+    const filtersActive = activeExtensionGroups.size > 0;
 
-  /* Look for an exact mnemonic match among all instructions
+    /* Look for an exact mnemonic match among all instructions
      - If filters are active, also ensure it belongs to one of the selected extensions */
-  const exact = items.find((li) => {
-    if (li.dataset.mnemonic !== q) return false;
-    if (!filtersActive) return true;
-    return activeExtensions.has(li.dataset.extension);
-  });
-
-  // If an exact match is found, redirect to that instruction's detail page
-  if (exact) {
-    const link = exact.querySelector("a").getAttribute("href");
-    location.href = link;
-  }
+    const exact = items.find((a) => {
+        if (a.dataset.mnemonic !== q) return false;
+        if (!filtersActive) return true;
+        return activeExtensionGroups.has(a.dataset.extensionGroup);
+    });
+
+    // If an exact match is found, redirect to that instruction's detail page
+    if (exact) {
+        const link = exact.getAttribute("href");
+        location.href = link;
+    }
 });
 
 applyFilters();
diff --git a/src/style.css b/src/style.css
@@ -106,6 +106,7 @@ small {
     margin-left: 3px;
 }
 
+/* Dropdown Styling For Extension Groups */
 .dropdown-callout {
     background: #f1f8ff;
     border-left: 4px solid #0366d6;
@@ -132,14 +133,7 @@ small {
     border-radius: 4px;
 }
 
-.group-description {
-    font-weight: normal;
-    font-size: 0.95rem;
-    margin-left: 0.5rem;
-}
-
 .dropdown-callout .content {
-    margin-top: 12px;
     display: none;
 }
 
@@ -159,3 +153,39 @@ small {
 .dropdown-callout.open .header::after {
     transform: rotate(90deg);
 }
+
+/* Instruction List Styling */
+.instruction-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    gap: 6px;
+    margin-top: 6px;
+}
+
+.instruction-pill {
+    display: inline-block;
+    padding: 4px 8px;
+    background: #dee5ef;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    color: #0346b6;
+    text-align: center;
+}
+
+.instruction-pill:hover {
+    background: #dceeff;
+    text-decoration: none;
+}
+
+.show-more {
+    all: unset;
+    cursor: pointer;
+    display: block;
+    margin: 1rem auto;
+    padding: 8px 12px;
+    background: #dee5ef;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    color: #000000;
+    text-align: center;
+}

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,10 @@ export default () => {`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`
	`16`	`+ for (const inst of instructions) {`
	`17`	`+ inst.extensionGroup = extensionsToGroup[inst.extension] \|\| "Remaining Instructions";`
	`18`	`+ }`
	`19`	`+`
`16`	`20`	`const extensions = {}`
`17`	`21`	`for (const inst of instructions) {`
`18`	`22`	`const name = inst.extension \|\| "unknown";`
`@@ -33,6 +37,7 @@ export default () => {`
`33`	`37`	`for (const entry of list) {`
`34`	`38`	`entry.instructions.sort((a, b) => a.name.localeCompare(b.name));`
`35`	`39`	`entry.count = entry.instructions.length;`
	`40`	`+ entry.previewInstructions = entry.instructions.slice(0, 49);`
`36`	`41`	`}`
`37`	`42`
`38`	`43`	`list.sort((a, b) => a.name.localeCompare(b.name));`