add pagefind

astro.config.mjs

@@ -8,12 +8,14 @@ import {remarkReplaceTooltips} from './src/plugins/remark-dictionary-tooltips.ts
 import {remarkAsides} from './src/plugins/remark-asides.ts';
 import remarkDirective from 'remark-directive';
 import mdx from '@astrojs/mdx';
+import pagefind from "astro-pagefind";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), mdx()],
+  integrations: [tailwind(), mdx(), pagefind()],
   site: 'https://nfdi4plants.github.io',
   base: 'arc-website',
+  trailingSlash: "always", // will kill pagefind integration without
   markdown: {
     remarkPlugins: [remarkDirective, remarkReplaceLinks(), remarkReplaceTooltips(), remarkAsides()],
     rehypePlugins: [

package.json

@@ -15,6 +15,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "@tailwindcss/typography": "^0.5.15",
     "astro": "^4.15.4",
+    "astro-pagefind": "^1.6.0",
     "mdast-util-directive": "^3.0.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",

src/components/Navbar.astro

@@ -3,6 +3,8 @@ import ThemeController from "./ThemeController.astro"
 import RecMenu from "./RecMenu.astro"
 import { type Link } from "./RecMenu.astro"
 import { URLS } from "../statics"
+import Search from "./Search.astro"
+
 
 const links: Link[] = [
   {href: URLS.INTERNAL_HOME, text: "Home"},
@@ -53,11 +55,14 @@ const links: Link[] = [
             d="M4 6h16M4 12h8m-8 6h16" />
         </svg>
       </div>
-      <RecMenu className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow" links={links} />
+      <div class="dropdown-content bg-base-100 rounded-box z-[1] mt-3 shadow p-2 w-52">
+        <RecMenu className="menu menu-sm" links={links} />
+      </div>
     </div>
     <a class="btn btn-ghost text-xl" href={URLS.INTERNAL_HOME} >
       <img src="/arc-website/favicon.svg" alt="logo" class="h-8 w-8" />
     </a>
+    <Search />
   </div>
   <div class="navbar-center hidden lg:flex">
     <RecMenu className="menu menu-horizontal px-1" links={links} />

src/components/Search.astro

@@ -0,0 +1,136 @@
+---
+import AstroSearch from "astro-pagefind/components/Search";
+
+---
+
+<script is:inline>
+
+function isModalActive() {
+  return document.getElementById('search-modal').style.display === 'block'
+}
+
+function showModal() {
+  const searchModal = document.getElementById('search-modal');
+  if (searchModal) {
+    searchModal.style.display = 'block';
+    const input = searchModal.querySelector('.pagefind-ui__search-input');
+    input.focus();
+    input.value = null
+  }
+}; 
+
+function hideModal() {
+  const searchModal = document.getElementById('search-modal');
+  if (searchModal) {
+    searchModal.style.display = 'none';
+  }
+};
+
+function toggleModal() {
+  const searchModal = document.getElementById('search-modal');
+  if (searchModal) {
+    searchModal.style.display = searchModal.style.display === 'block' ? 'none' : 'block';
+    if (searchModal.style.display === 'block') {
+      const input = searchModal.querySelector('.pagefind-ui__search-input');
+      input.focus();
+    }
+  }
+};
+
+document.addEventListener('keydown', function(event) {
+  if (isModalActive()) {
+    // If modal is active, do not process the key press
+    return;
+  }
+  // Check if the pressed key is "s" or "S"
+  if (event.key === 's' || event.key === 'S') {
+    event.preventDefault();
+    // Call your function or fire the event
+    showModal();
+  }
+});
+
+</script>
+
+<div>
+  <button class="btn btn-outline no-animation flex-nowrap" onclick="toggleModal()">
+    Search
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="h-4 w-4 opacity-70">
+      <path
+      fill-rule="evenodd"
+      d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+      clip-rule="evenodd" />
+    </svg>
+    <kbd class="kbd kbd-sm text-black dark:text-white">s</kbd>
+  </button>
+  <div id="search-modal" style="display: none">
+    <div id="search-modal-bg" onclick="hideModal()"></div>
+    <div id="search-modal-content">
+      <div id="search-modal-x">
+        <button class="btn btn-square btn-outline btn-xs top-2 right-2 absolute z-50 bg-base-100" tabindex="1" onclick="hideModal()">
+          X
+        </button>
+      </div>
+      <AstroSearch id="search" className="pagefind-ui" uiOptions={{ showImages: false, autofocus: true }} />
+    </div>
+  </div>
+</div>
+
+
+<style is:global>
+
+:root {
+  --pagefind-ui-scale: 0.8;
+  --pagefind-ui-primary: oklch(var(--p));
+  --pagefind-ui-text: oklch(var(--bc) / 1);
+  --pagefind-ui-background: oklch(var(--b1));
+  --pagefind-ui-border: #eeeeee;
+  --pagefind-ui-tag: #eeeeee;
+  --pagefind-ui-border-width: 2px;
+  --pagefind-ui-border-radius: 8px;
+  --pagefind-ui-image-border-radius: 8px;
+  --pagefind-ui-image-box-ratio: 3 / 2;
+  --pagefind-ui-font: sans-serif;
+}
+
+</style>
+
+<style>
+
+#search-modal-bg {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 50;
+  @apply bg-base-200 bg-opacity-50;
+}
+
+#search-modal {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 60;
+}
+
+#search-modal-content {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 70;;
+  border-radius: 8px;
+  padding: 20px;
+  overscroll-behavior: contain;
+  overflow-y: auto;
+  @apply bg-base-100 lg:w-[50%] lg:h-[80%] w-full h-full shadow shadow-base-300 pb-10
+}
+
+</style>

src/pages/index.astro

@@ -10,7 +10,7 @@ import RDMGraphNavigation from '../components/Home/RDMGraphNavigation.astro';
 ---
 
 <Layout title="Home" >
-	<main>
+  <main>
     <HeroText />
     <Banner />
     <CommunityCards />