fixed styling for search bar, fixed positioning for widescreens(needs testing), restricted pagefind indexing, made titles top weight, added root module description

src/components/navigation/Search.astro

@@ -138,12 +138,12 @@ import { getQMLTypeLinkObject, getQMLTypeLink, getIconForLink } from '@src/confi
 						showSubResults: true,
             processResult: (result: { url: string; excerpt:string; sub_results: Array<{ url: string, excerpt:string }> }) => {
 							result.url = formatURL(result.url);
+              result.excerpt = processExcerpt(result.excerpt)
 							result.sub_results = result.sub_results.map((sub_result) => {
 								sub_result.url = formatURL(sub_result.url);
                 sub_result.excerpt = processExcerpt(sub_result.excerpt)
 								return sub_result;
 							});
-              result.excerpt = processExcerpt(result.excerpt)
 						},
 					});
 				});

src/layouts/ConfigLayout.astro

@@ -33,7 +33,7 @@ const { headings, frontmatter } = Astro.props;
       <slot />
     </div>
   </div>
-  <TOC mobile={false} headings={headings}/>
+  <TOC mobile={false} headings={headings} data-pagefind-ignore/>
 </DocsLayout>
 
 <TOCIntersectionObserver/>

src/layouts/DocsLayout.astro

@@ -67,8 +67,8 @@ if (url[2]) {
     <Header headings={headings}/>
     <div class="docslayout-root">
       <Nav mobile={false}/>
-      <div class="docslayout-inner">
+      <div class="docslayout-inner" data-pagefind-body>
-        <Breadcrumbs  crumbs={customBreadcrumbs} linkTextFormat="sentence" truncated={true}>
+        <Breadcrumbs  crumbs={customBreadcrumbs} linkTextFormat="sentence" truncated={true} data-pagefind-ignore>
           <svg
             slot="index"
             xmlns="http://www.w3.org/2000/svg"
@@ -94,7 +94,7 @@ if (url[2]) {
             ></path></svg
           >
         </Breadcrumbs>
-        <slot />
+          <slot />
       </div>
     </div>
     <Footer />

src/pages/docs/types/[type]/[name].astro

@@ -49,23 +49,26 @@ const sidebarData = {
 
 const superLink = data.super ? getQMLTypeLink(data.super) : null;
 
-const details = data.details ? await processQsMarkdown(data.details) : null;
+const details = data.details
+  ? await processQsMarkdown(data.details)
+  : null;
 ---
 <DocsLayout title={`${route.name} - ${route.type}`} description={data?.description ?? ""}>
   <div class="docs">
     <div class="typedocs-content">
       <hr />
-      <h2 class="typedocs-title">
+      <h2 class="typedocs-title" data-pagefind-weight="10">
         {route.name}:
           {data.super ? (
             <a
               target="_blank"
               href={superLink!}
+              data-pagefind-ignore
             >
             {data.super.name}
             </a>
           ):(
-            <span class="type-datatype">{data.type}</span>
+            <span class="type-datatype" data-pagefind-ignore>{data.type}</span>
           )
           }
       </h2>
@@ -73,17 +76,16 @@ const details = data.details ? await processQsMarkdown(data.details) : null;
         route && data ? (
           <section class="typedocs-data typedata">
             <subheading class="typedocs-subheading">
-              <code class="type-module">import {data.module}</code>
+              <code class="type-module" data-pagefind-ignore>import {data.module}</code>
               {data.flags ? (
-                <div class="type-flags">{data.flags.map(flag => (
+                <div class="type-flags" data-pagefind-ignore>{data.flags.map(flag => (
                   <span class="type-flag">
                     <Flag client:idle/>
                     {flag}
                   </span>
                 ))}</div>
               ):null}
-              {details ? <span set:html={details}/> : null}
+              {details ? <span class="parsedMD" set:html={details}/> : (<span class="toparse">{data.description}</span>)}
-              {!details ? (<span class="toparse">{data.description}</span>):null}
             </subheading>
             { data.properties && propsKeys ? (
               <Properties
@@ -112,7 +114,7 @@ const details = data.details ? await processQsMarkdown(data.details) : null;
         ) : null
       }
     </div>
-    <TOC mobile={false} types={sidebarData}/>
+    <TOC mobile={false} types={sidebarData} data-pagefind-ignore/>
   </div>
 </DocsLayout>
 

src/pages/docs/types/[type]/index.astro

@@ -1,6 +1,7 @@
 ---
 import DocsLayout from "@layouts/DocsLayout.astro";
 import { generateTypeData } from "@config/io/generateTypeData";
+import { processQsMarkdown } from "@src/config/io/helpers";
 
 export async function getStaticPaths() {
   const routes = await generateTypeData();
@@ -24,6 +25,9 @@ export async function getStaticPaths() {
     });
 }
 const { route, children } = Astro.props;
+const details = route.data.details
+  ? await processQsMarkdown(route.data.details)
+  : null;
 ---
 
 <DocsLayout
@@ -32,7 +36,7 @@ const { route, children } = Astro.props;
 >
   <hr />
   <h2 class="typedocs-title">{route.type[0].toUpperCase() + route.type.slice(1)} Definitions</h2>
-  <div class="root-nav">
+  <div class="root-nav" data-pagefind-ignore>
     {route.data.contains!.map((childName:string) => 
       (
       <div class="root-nav-entry">
@@ -46,4 +50,5 @@ const { route, children } = Astro.props;
       )
     )}
   </div>
+  {details ? <span class="parsedMD" set:html={details}/> : (<span class="toparse">{route.data.description}</span>)}
 </DocsLayout>

src/pages/index.astro

@@ -2,7 +2,7 @@
 import BaseLayout from "@layouts/BaseLayout.astro";
 ---
 <BaseLayout title="Quickshell" description="A fully user customizable desktop shell" image="/quickshell.png">
-  <div class="main-page_hero">
+  <div class="main-page_hero" data-pagefind-ignore>
     <section class="main-page_hero-text">
       <h2>A fully <em>user-customizable</em> desktop <em>shell</em></h2>
       <h3>Based on QtQuick</h3>

src/styles/docs/docs.css

@@ -81,6 +81,7 @@ ul {
 }
 
 @media (min-width: 768px) {
+
   .docs,
   .docslayout-root {
     gap: 0.648rem;
@@ -88,7 +89,8 @@ ul {
 
   .docslayout-root {
     margin-left: calc(1.618rem + 260px);
-    padding-bottom: 3rem;
+    display: flex;
+    flex-direction: row;
   }
 
   .docs-content {
@@ -109,6 +111,11 @@ ul {
 }
 
 @media (min-width: 1280px) {
+  .docs {
+    display: flex;
+    flex-direction: row;
+  }
+
   .docs-content {
     & section {
       max-width: 45svw;
@@ -116,7 +123,7 @@ ul {
   }
 
   .docslayout-root {
-    margin-inline: calc(10svw + 260px);
+    margin-inline: 15svw;
   }
 
   .docslayout-inner {

src/styles/docs/nav/nav.css

@@ -103,13 +103,12 @@
   .nav-wrapper {
     display: block;
     width: 250px;
-    position: fixed;
+    position: sticky;
-    top: 5rem;
+    top: 4rem;
-    bottom: 3rem;
     left: 1.618rem;
     flex-shrink: 0;
     overflow: scroll;
-    max-height: 90svh;
+    max-height: calc(100svh - 8rem);
     scrollbar-width: none;
     -ms-overflow-style: none;
     z-index: 10;

src/styles/docs/nav/search.css

@@ -19,6 +19,12 @@
 #qs_search .pagefind-ui__form::before {
   --pagefind-ui-text: hsl(0 0 65);
   opacity: 1;
+  outline: unset;
+}
+
+#qs_search .pagefind-ui--reset *:where( :not(html, iframe, canvas, img, svg, video):not(svg *,
+    symbol *)) {
+  outline: unset;
 }
 
 #qs_search .pagefind-ui__search-input {
@@ -47,7 +53,7 @@
   content: "";
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
-  background-color: hsl(var(--accent-600));
+  background-color: hsl(0 25 45);
   display: block;
   width: 100%;
   height: 100%;
@@ -140,7 +146,7 @@
   inset-block: 0;
   inset-inline-start: var(--search-tree-diagram-inline-start);
   width: var(--search-tree-diagram-size);
-  background: hsl(var(--blue) 5 25);
+  background: hsl(var(--blue) 10 30);
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
 }
@@ -161,6 +167,26 @@
   overflow-wrap: anywhere;
 }
 
+#qs_search .pagefind-ui__result-inner>.pagefind-ui__result-excerpt {
+  display: inline-block;
+  position: relative;
+  background: hsl(0 0 10);
+  padding: var(--search-result-nested-pad-block) var(--search-result-pad-inline-end);
+  padding-inline-start: var(--search-result-pad-inline-start);
+  margin-top: unset;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--search-tree-diagram-inline-start);
+    width: var(--search-tree-diagram-size);
+    background: hsl(var(--blue) 10 30);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
+  }
+}
+
 #qs_search mark {
   color: hsl(var(--blue) 15 60);
   background-color: transparent;
@@ -325,14 +351,14 @@ button[data-close-modal] {
     }
   }
 
-	html.dark button[data-open-modal] {
+  html.dark button[data-open-modal] {
     background-color: hsla(var(--blue) 15 15 / 0.5);
     color: hsl(var(--blue) 40 65);
 
     &:hover {
       color: hsl(var(--blue) 60 85);
     }
-	}
+  }
 
   #qs_search {
     --search-cancel-space: 0px;

src/styles/docs/toc/toc.css

@@ -100,7 +100,7 @@
   .toc-wrapper {
     background-color: transparent;
     display: block;
-    position: fixed;
+    position: sticky;
     top: 5rem;
     right: 8svw;
     width: 18rem;

src/styles/global.css

@@ -113,8 +113,8 @@ html.dark {
 }
 
 footer {
-  position: absolute;
+  position: sticky;
-  bottom: 0;
+  bottom: -3.5rem;
   z-index: 10;
   width: 100%;
   height: 3.5rem;