Merge pull request #104 from foxeddev/main

Author: Silabear

src/lib/Topbar.svelte

@@ -79,21 +79,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 focus-visible:outline-2 focus-visible:outline-dph-orange"
+      class="p-2 rounded-lg py-1 flex items-center gap-2 hover:bg-stone-700 hover:text-white hover:font-medium aspect-square sm:aspect-auto focus-visible:outline-2 focus-visible: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 focus-visible:outline-2 focus-visible:outline-dph-orange cursor-pointer"
+      class="p-2 rounded-lg py-1 flex items-center gap-2 hover:bg-stone-700 hover:text-white hover:font-medium aspect-square sm:aspect-auto focus-visible:outline-2 focus-visible:outline-dph-orange cursor-pointer"
       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 focus-visible:outline-2 focus-visible:outline-dph-orange"
+      class="p-2 rounded-lg py-1 flex items-center gap-2 hover:bg-stone-700 hover:text-white hover:font-medium aspect-square sm:aspect-auto focus-visible:outline-2 focus-visible:outline-dph-orange"
       aria-label="Discord">
       <IconDiscord />
       <span class="hidden sm:block">Discord</span>

src/lib/sidebar/Sidebar.svelte

@@ -24,11 +24,14 @@
     page = sessionStorage.getItem("page") || "wiki";
   });
 
-  export async function handleKeyInput(e: KeyboardEvent & {
-    currentTarget: EventTarget & Window;
-}) {
+  export async function handleKeyInput(
+    e: KeyboardEvent & {
+      currentTarget: EventTarget & Window;
+    }
+  ) {
     const doc = e.currentTarget.document;
-    const notAnInput = !(doc.activeElement instanceof HTMLInputElement) && !(doc.activeElement instanceof HTMLTextAreaElement);
+    const notAnInput =
+      !(doc.activeElement instanceof HTMLInputElement) && !(doc.activeElement instanceof HTMLTextAreaElement);
     if (e.key == "ArrowLeft" && windowInfo.isNavOpen && notAnInput) {
       windowInfo.isNavOpen = false;
     }
@@ -52,7 +55,7 @@
         <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 focus-visible:outline-2 focus-visible:outline-dph-orange"
+            : 'bg-stone-800'} cursor-pointer hover:text-white hover:font-medium px-2 py-1 rounded-md flex items-center gap-1 focus-visible:outline-2 focus-visible:outline-dph-orange"
           onclick={() => {
             page = "wiki";
             sessionStorage.setItem("page", "wiki");
@@ -62,7 +65,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 focus-visible:outline-2 focus-visible:outline-dph-orange"
+            : 'bg-stone-800'} cursor-pointer hover:text-white hover:font-medium px-2 py-1 rounded-md flex items-center gap-1 focus-visible:outline-2 focus-visible:outline-dph-orange"
           onclick={() => {
             page = "guides";
             sessionStorage.setItem("page", "guides");

src/lib/sidebar/SidebarSearchDialog.svelte

@@ -37,7 +37,11 @@
   });
 </script>
 
-<svelte:window onkeydown={e => (e.key == "k" && e.ctrlKey ? showModalWithEvent(e) : null)} />
+<svelte:window
+  onkeydown={e => (e.key == "k" && e.ctrlKey ? showModalWithEvent(e) : null)}
+  onclick={e => {
+    e.target === dialog ? dialog.close() : null;
+  }} />
 
 <dialog
   bind:this={dialog}
@@ -82,6 +86,7 @@
             : results.length + " result(s) found!"}
     </p>
 
-    <button class="bg-stone-700 w-full rounded-sm p-2 mt-2 text-white cursor-pointer" onclick={() => dialog.close()}>Close</button>
+    <button class="bg-stone-700 w-full rounded-sm p-2 mt-2 text-white cursor-pointer" onclick={() => dialog.close()}
+      >Close</button>
   </div>
 </dialog>

src/lib/sidebar/tabs/Guides.svelte

@@ -37,6 +37,9 @@
   import IconBuilding from "~icons/tabler/building-factory-2";
   import IconCottage from "~icons/tabler/building-cottage";
   import IconTrees from "~icons/tabler/trees";
+  import IconBackhoe from "~icons/tabler/backhoe";
+  import IconMountain from "~icons/tabler/mountain";
+  import IconBuildingCastle from "~icons/tabler/building-castle";
   import SidebarPlaceholder from "../navigation/SidebarPlaceholder.svelte";
 </script>
 
@@ -85,6 +88,11 @@
   <SidebarPlaceholder label="Twilight Forest" icon={IconTrees} />
 </SidebarCategory>
 
+<SidebarCategory name="World Generation" icon={IconBackhoe}>
+  <SidebarPage label="Custom World Generation" icon={IconMountain} page="/guide/worldgen/custom-worldgen"></SidebarPage>
+  <SidebarPlaceholder label="Custom Structures" icon={IconBuildingCastle}></SidebarPlaceholder>
+</SidebarCategory>
+
 <SidebarCategory name="Misc" icon={IconBrackets}>
   <SidebarPage label="Debugging" icon={IconBug} page="/guide/misc/debugging" />
   <SidebarPage label="Raycasts" icon={IconArrow} page="/guide/misc/raycasts" />