Search UI

astro.config.mjs

@@ -1,11 +1,11 @@
 import { defineConfig } from 'astro/config'
-
+import pagefind from "astro-pagefind";
 import tailwind from '@astrojs/tailwind'
 
 // https://astro.build/config
 export default defineConfig({
   build: {
     inlineStylesheets: 'always'
   },
-  integrations: [tailwind()]
+    integrations: [tailwind(), pagefind()]
 })

package.json

@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
+    "astro-pagefind": "^1.3.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.53.0",
     "eslint-config-standard": "^17.1.0",

src/components/Header.astro

@@ -1,8 +1,11 @@
+
 <header class="sticky top-0 z-50 flex items-center justify-between px-3 py-2 border-b shadow-lg bg-white/90 backdrop-blur-sm border-slate-400/40">
   <div class="flex items-center flex-grow basis-0">
     <a href="/" class="text-lg font-semibold tracking-tight text-slate-900">
       Noop Docs
     </a>
+
+
   </div>
 
   <div>SEARCH</div>

src/components/Navigation.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
+
 const docs = [].concat(await getCollection('docs'));
 
 const sections = ['getting started', 'core concepts', 'guides', 'components', 'resources', 'reference']
@@ -18,31 +19,33 @@ Object.keys(groupedDocs).forEach(k => {
   })
 })
 ---
+<div>
+
+  <nav class="pr-8 text-base lg:text-sm">
+    <ul role="list" class="-ml-0.5  overflow-y-auto pl-0.5 space-y-8">
+      {
+      sections.filter(s => !!groupedDocs[s]).map((section) => (
+      <li>
+        <h3 class="font-bold capitalize">
+          {section}
+        </h3>
 
-<nav class="pr-8 text-base lg:text-sm">
-  <ul role="list" class="-ml-0.5  overflow-y-auto pl-0.5 space-y-8">
-    {
-    sections.filter(s => !!groupedDocs[s]).map((section) => (
-    <li>
-      <h3 class="font-bold capitalize">
-        {section}
-      </h3>
-
-      <ul role="list" class="pl-3 mt-3 space-y-2">
-        {
-        groupedDocs[section].map((item) => (
-        <li>
-          <a href={`/docs/${item.slug}/`}>
-            {item.data.title}
-          </a>
-        </li>
-        ))
-        }
-      </ul>
-    </li>
-    ))
-    }
-  </ul>
-</nav>
+        <ul role="list" class="pl-3 mt-3 space-y-2">
+          {
+          groupedDocs[section].map((item) => (
+          <li>
+            <a href={`/docs/${item.slug}/`}>
+              {item.data.title}
+            </a>
+          </li>
+          ))
+          }
+        </ul>
+      </li>
+      ))
+      }
+    </ul>
+  </nav>
 
 
+</div>

src/components/Search.astro

@@ -0,0 +1,34 @@
+---
+import Search from "astro-pagefind/components/Search";
+const {id} = Astro.props
+---
+<div>
+  <Search id={id} className="pagefind-ui dark" uiOptions={{ showImages: false }} />
+</div>
+
+<style is:global>
+
+ :root {
+   --pagefind-ui-background: #334155;
+   --pagefind-ui-primary: #eeeeee;
+	 --pagefind-ui-text: #eeeeee;
+	 --pagefind-ui-border: #334155;
+	 --pagefind-ui-tag: #000;
+ }
+
+
+ .pagefind-ui__drawer {
+   position: absolute;
+   top: 75px;
+   right: 0;
+   left: 0;
+ }
+
+ .pagefind-ui__drawer {
+   @apply bg-gray-900 p-6 rounded-lg border-red-600 border z-10;
+ }
+
+ .pagefind-ui__results-area {
+
+ }
+</style>

src/content/docs/installation.md

@@ -0,0 +1,17 @@
+---
+title: 'Installation'
+description: ''
+slug: 'installation'
+section: 'getting started'
+layout: '../../layouts/Doc.astro'
+pubDate: ''
+order: 3
+---
+
+## Prerequisites
+
+Docker Desktop is the only system requirement. Download and install [Docker](https://docs.docker.com/get-docker/). Make sure it is running on your computer before starting Noop Desktop.
+
+## Download
+
+Noop Desktop, which includes Workshop, can be downloaded from the [downloads page](/downloads).

src/layouts/Doc.astro

@@ -4,7 +4,7 @@ import TOC from '../components/TOC.astro'
 const { content = {}, headings } = Astro.props
 ---
 
-<Layout>
+<Layout data={content}>
   <main class="lg:col-span-6 col-span-12">
     <article>
       <header>