Improve tab navigation and search results (#89)

* improve tab navigation and search results

* why are you dying

Author: HoodieRocks

gen_search_indexes.js

@@ -32,7 +32,7 @@ for await (const file of matchingFiles) {
   const strippedMarkdown = RemoveMarkdown(contentNoHtml)
     .replaceAll(/:::.*/g, "")
     .replaceAll(/:::/g, "") // remove admonitions
-    .replaceAll(/[^\S\r\n]{2,}/g); // remove extra spaces
+    .replaceAll(/[^\S\r\n]{2,}/g, ""); // remove extra spaces
 
   const tags = frontmatter.data.tags || "";
 

gen_search_indexes_node.js

@@ -19,7 +19,6 @@ const matchingFiles = fg.stream("**/+page.svx", { dot: true });
 
 // read all routes
 for await (const file of matchingFiles) {
-
   const rawContent = await readFile(file);
 
   log.info("Transforming", file);
@@ -30,8 +29,9 @@ for await (const file of matchingFiles) {
   // add to posts
   const contentNoHtml = stripHtml(frontmatter.content).result;
   const strippedMarkdown = RemoveMarkdown(contentNoHtml)
-    .replace(/:::.*/, "")
-    .replace(/:::/, "") // remove admonitions
+    .replaceAll(/:::.*/g, "")
+    .replaceAll(/:::/g, "") // remove admonitions
+    .replaceAll(/[^\S\r\n]{2,}/g, ""); // remove extra spaces
 
   const tags = frontmatter.data.tags || "";
 
@@ -42,7 +42,7 @@ for await (const file of matchingFiles) {
     url: "/" + filePath,
     tags: tags
       .split(",")
-      .map((el) => el.trim())
+      .map(el => el.trim())
       .filter(String),
   });
 }

src/lib/MDLayout.svelte

@@ -37,7 +37,7 @@
     "https://instagram.com/datapackhub",
   ]} />
 
-<main class="md px-4 md:px-8 lg:px-16 prose-headings:text-stone-200">
+<main class="md px-4 md:px-8 lg:px-16 prose-headings:text-stone-200" id="main_content">
   {#if version}
     <Version {version} />
   {/if}

src/lib/Topbar.svelte

@@ -47,12 +47,18 @@
 <svelte:window onkeydown={e => handleKeyInput(e)} />
 
 <div class="bg-stone-800 flex w-full items-center justify-between p-2 h-12 sticky top-0 border-b border-stone-700 z-20">
+  <a
+    class="absolute -translate-y-30 -translate-x-1/2 left-1/2 focus:outline-2 outline-blue-500 focus:translate-y-0"
+    href="#nav_side">Go To Nav</a>
+  <a
+    class="absolute -translate-y-30 -translate-x-1/2 left-1/2 focus:outline-2 outline-blue-500 focus:translate-y-0"
+    href="#main_content">Go To Content</a>
   <div class="flex items-center grow">
     <button
-      class="px-2 pr-3 sm:hidden"
+      class="px-2 pr-3 sm:hidden focus:outline-2 focus:outline-dph-orange"
       aria-label="{windowInfo.isNavOpen ? 'Collapse' : 'Expand'} Sidebar"
       onclick={() => (windowInfo.isNavOpen = !windowInfo.isNavOpen)}><IconMenu /></button>
-    <a class="flex items-center hover:text-white p-1" href="/">
+    <a class="flex items-center hover:text-white p-1 focus:outline-2 focus:outline-dph-orange" href="/">
       <img
         alt="Datapack Hub Logo"
         src="/logos/dph.svg"
@@ -66,21 +72,21 @@
   <div class="flex items-center gap-2">
     <a
       href="https://github.com/Datapack-Hub/wiki/blob/main/src/routes{page.url.pathname}/%2Bpage.svx"
-      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto"
+      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus:outline-2 focus:outline-dph-orange"
       aria-label="Edit">
       <IconEdit />
       <span class="hidden sm:block">Edit</span>
     </a>
     <button
-      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto"
+      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus:outline-2 focus:outline-dph-orange"
       aria-label="Copy URL"
       onclick={copyUrl}>
       <IconShare />
       <span class="hidden sm:block">{shareText}</span>
     </button>
     <a
       href="https://discord.gg/xHTHbZqXr6"
-      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto"
+      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus:outline-2 focus:outline-dph-orange"
       aria-label="Discord">
       <IconDiscord />
       <span class="hidden sm:block">Discord</span>

src/lib/sidebar/SearchBox.svelte

@@ -14,7 +14,7 @@
 
 <button
   aria-label="Open Search Modal"
-  class="bg-black/45 px-2 py-1 rounded-lg flex justify-between items-center mt-1 mb-2 w-full"
+  class="bg-black/45 px-2 py-1 rounded-lg flex justify-between items-center mt-1 mb-2 w-full focus:outline-2 focus:outline-dph-orange"
   onclick={async () => await dialog.showModal()}>
   <div class="flex items-center gap-2">
     <IconSearch />

src/lib/sidebar/Sidebar.svelte

@@ -41,14 +41,14 @@
   class="{windowInfo.isNavOpen
     ? 'fixed w-full sm:w-80'
     : 'w-fit hidden sm:flex'} flex flex-col bg-stone-800 items-center h-[calc(100dvh-3rem)] sm:sticky top-12 z-50 border-r border-stone-700">
-  <div class="flex flex-col p-2 pt-1 grow overflow-y-auto w-full">
+  <div class="flex flex-col p-2 pt-1 grow overflow-y-auto w-full" id="nav_side">
     {#if windowInfo.isNavOpen}
       <SearchBox keyActivated />
       <div class="flex items-center mb-2 gap-1">
         <button
           class="{page == 'wiki'
             ? 'bg-stone-700'
-            : 'bg-stone-800'} hover:text-stone-400 px-2 py-1 rounded-md flex items-center gap-1"
+            : 'bg-stone-800'} hover:text-stone-400 px-2 py-1 rounded-md flex items-center gap-1 focus:outline-2 focus:outline-dph-orange"
           onclick={() => {
             page = "wiki";
             sessionStorage.setItem("page", "wiki");
@@ -58,7 +58,7 @@
         <button
           class="{page == 'guides'
             ? 'bg-stone-700'
-            : 'bg-stone-800'} hover:text-stone-400 px-2 py-1 rounded-md flex items-center gap-1"
+            : 'bg-stone-800'} hover:text-stone-400 px-2 py-1 rounded-md flex items-center gap-1 focus:outline-2 focus:outline-dph-orange"
           onclick={() => {
             page = "guides";
             sessionStorage.setItem("page", "guides");
@@ -91,7 +91,7 @@
     {/if}
     <button
       aria-label="{windowInfo.isNavOpen ? 'Collapse' : 'Expand'} Sidebar"
-      class="hidden sm:block text-stone-200 text-lg motion-safe:transition-all {windowInfo.isNavOpen
+      class="hidden sm:block text-stone-200 text-lg motion-safe:transition-all focus:outline-2 focus:outline-dph-orange {windowInfo.isNavOpen
         ? 'rotate-0'
         : 'rotate-180'}"
       onclick={() => (windowInfo.isNavOpen = !windowInfo.isNavOpen)}>

src/lib/sidebar/navigation/SidebarCategory.svelte

@@ -16,7 +16,7 @@
 
 <details ontoggle={() => (windowInfo.isNavOpen = true)} class="w-full group marker:hidden">
   <summary
-    class="rounded-lg cursor-pointer p-1 w-full flex gap-2 items-center text-left hover:bg-stone-700 hover:text-white hover:font-medium marker:hidden">
+    class="rounded-lg cursor-pointer p-1 w-full flex gap-2 items-center text-left hover:bg-stone-700 hover:text-white hover:font-medium marker:hidden focus:outline-2 focus:outline-dph-orange">
     <Icon />
     {#if windowInfo.isNavOpen}
       <span class="grow">{name}</span>

src/lib/sidebar/navigation/SidebarPage.svelte

@@ -15,7 +15,7 @@
 <a
   href={page}
   onclick={() => (windowInfo.width < 768 ? (windowInfo.isNavOpen = !windowInfo.isNavOpen) : null)}
-  class="hover:bg-stone-700 hover:text-white hover:font-medium py-1 rounded-lg flex gap-2 pl-1 items-center">
+  class="hover:bg-stone-700 hover:text-white hover:font-medium py-1 rounded-lg flex gap-2 pl-1 items-center focus:outline-2 focus:outline-dph-orange">
   <Icon />
 
   {#if windowInfo.isNavOpen}

src/routes/+error.svx

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from "$app/state";
-  import {Version, Discord} from '$lib/reusables';
+  import { Discord} from '$lib/reusables';
 
   let messages = new Map([
     [404, "This page does not exist. It might have been removed, or never existed in the first place. Try searching for the page you need, or if this page should exist, let us know in our discord (use the link below)"],
@@ -9,5 +9,5 @@
 </script>
 
 # Error {page.status}: {page.error?.message}
-{messages.get($page.status)}
+{messages.get(page.status)}
 <Discord />

src/routes/+page.svx

@@ -1,4 +1,5 @@
 ---
+title: Home
 description: "Welcome to the Datapack Wiki, a resource for everything related to Minecraft Datapacks. We've got guides, tutorials, and documentation to help you build your knowledge about data packs."
 ---