Create modal component, add local FA icons.

Author: nikoshell

package.json

@@ -18,6 +18,7 @@
     "@astrojs/sitemap": "^3.3.0",
     "@astrojs/tailwind": "^5.1.4",
     "@fontsource-variable/inter": "^5.1.1",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@tailwindcss/typography": "^0.5.16",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",

pnpm-lock.yaml

@@ -54,8 +54,3 @@ const { title, description, image = "/social-card.png" } = Astro.props;
   is:inline
   data-domain="ep2025.europython.eu"
   src="https://plausible.io/js/script.js"></script>
-
-<script
-  is:inline
-  src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"
-  crossorigin="anonymous"></script>

src/components/BaseHead.astro

@@ -0,0 +1,46 @@
+---
+import Button from '@ui/Button.astro';
+const { id = 'modal', open = false } = Astro.props;
+---
+
+<div
+  id={id}
+  class={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${
+    open ? 'opacity-100 visible bg-black/50' : 'opacity-0 invisible'
+  }`}
+  data-modal-wrapper
+>
+  <div
+    class="relative bg-white dark:bg-gray-800 p-6 lg:rounded-2xl lg:shadow-xl lg:max-w-4xl lg:mx-4 h-full lg:h-[80vh] w-full lg:w-[70vw] max-h-full overflow-y-auto"
+  >
+    <Button
+      id="search-close"
+      clear
+      icon="close"
+      iconSize="fa-xl"
+      data-close-modal
+      class="w-[3em] h-[3em] absolute top-4 right-4 text-primary hover:text-black "
+    />
+    <slot />
+  </div>
+</div>
+
+<script is:inline>
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-open-modal]').forEach(button => {
+      button.addEventListener('click', () => {
+        const modal = document.getElementById(button.dataset.openModal);
+        modal?.classList.remove('opacity-0', 'invisible');
+        modal?.classList.add('opacity-100', 'visible');
+      });
+    });
+
+    document.querySelectorAll('[data-close-modal]').forEach(button => {
+      button.addEventListener('click', () => {
+        const modal = button.closest('[data-modal-wrapper]');
+        modal?.classList.remove('opacity-100', 'visible');
+        modal?.classList.add('opacity-0', 'invisible');
+      });
+    });
+  });
+</script>

src/components/Modal.astro

@@ -1,23 +1,13 @@
 ---
 import SearchComponent from "astro-pagefind/components/Search";
 import Button from "@ui/Button.astro";
+import Modal from "@components/Modal.astro";
 
 ---
 
-<div class="search-wrapper hidden" style="display: none;">
-
-  <div class="search-header flex items-center justify-between z-40 h-0 md:h-[85px] m-auto ">
-    <h2 class="text-black text-4xl ml-10 top-[46px] md:top-[85px]">Search<h2/>
-    <Button
-      id="search-close"
-      clear
-      icon="close"
-      iconSize="fa-xl"
-      class="w-[3em] h-[3em] top-[46px] md:top-[85px]"
-    />
-  </div>
-  <div class="modal__overlay"></div>
 
+<Modal id="modal-search">
+  <h2 class="text-xl font-bold mb-2 py-2">Search</h2>
   <SearchComponent
     id="search"
     className="pagefind-ui"
@@ -28,21 +18,24 @@ import Button from "@ui/Button.astro";
       },
     }}
   />
+  </div>
 </div>
+</Modal>
+
 
 <script>
 document.addEventListener("DOMContentLoaded", function () {
-  const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement | null;
   const searchContainer = document.querySelector(".pagefind-ui") as HTMLElement | null;
   const searchInput = searchContainer?.querySelector("input") as HTMLInputElement | null;
-  const closeButton = document.querySelector("#search-close") as HTMLElement | null;
   const searchButton = document.getElementById("searchButton") as HTMLElement | null;
+  const openModal = document.querySelector('[data-open-modal="modal-search"]') as HTMLElement;
+  const closeButton = document.querySelector('#search-close') as HTMLElement | null;
 
   let selectedIndex = -1;
 
   function openSearch() {
-    if (searchWrapper) {
-      searchWrapper.style.display = "block";
+    console.log("open");
+    openModal.click();
       if (searchInput) {
         searchInput.value = "Tips";
         const inputEvent = new Event("input", { bubbles: true });
@@ -53,15 +46,11 @@ document.addEventListener("DOMContentLoaded", function () {
         }, 100);
         searchInput.focus();
       }
-    }
   }
 
-  function closeSearch() {
-    if (searchWrapper) {
-      searchWrapper.style.display = "none";
-      selectedIndex = -1;
-    }
-  }
+function closeSearch() {
+  closeButton?.click();
+}
 
   function updateSelection() {
     const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
@@ -99,7 +88,7 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 
-  if (searchButton && searchWrapper) {
+  if (searchButton) {
     searchButton.addEventListener("click", openSearch);
   }
 

src/components/Search.astro

@@ -24,7 +24,7 @@ const IS_LIVE = false;
         <button
           id="searchButton"
           class="mx-6 md:mx-2"
-            data-open-modal
+            data-open-modal="modal-search"
             aria-label="Search"
             aria-keyshortcuts="Control+K"
           >

src/components/header/header-actions.astro

@@ -1,6 +1,7 @@
 ---
 import Icon from "@ui/Icon.astro";
 
+// Destructure known props, rest goes into `restProps`
 const {
   url,
   id,
@@ -14,38 +15,39 @@ const {
   iconSvg = false,
   iconRight = true,
   iconSize = "",
-  title="",
+  title = "",
+  ...restProps // all data-*, aria-* and custom attributes
 } = Astro.props;
 
 const resolvedIsExternal = isExternal ?? url?.startsWith("http");
 
 const baseClasses = "font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black";
 const primaryClasses = "bg-button text-text-inverted hover:bg-button-hover border-transparent";
 const secondaryClasses = "bg-primary text-white hover:bg-primary-hover border-transparent";
-const clearClasses = "bg-transparent text-primary hover:bg-transparent hover:text-primary-active border-transparent"
+const clearClasses = "bg-transparent text-primary hover:bg-transparent hover:text-primary-active border-transparent";
 const outlineClasses = "border-gray-500 text-gray-700 hover:bg-gray-100 hover:bg-button-hover";
 const disabledClasses = "opacity-50 pointer-events-none";
 const iconClasses = "mx-2 ";
-const idName = id;
-const slotContent = await Astro.slots.render('default')
-
 
+const idName = id;
+const slotContent = await Astro.slots.render('default');
 ---
 
 {url ? (
   <a
     id={idName}
     href={disabled ? undefined : url}
     title={title}
-    aria-label={title ? title : slotContent }
+    aria-label={title ? title : slotContent}
     class={`${baseClasses}
       ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}
       ${className}`}
     aria-disabled={disabled}
     {...(resolvedIsExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+    {...restProps}
   >
-    {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize}  class={iconClasses} />}
+    {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
     <slot />
     {iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
     {resolvedIsExternal && <Icon name="external-link" svg={iconSvg} size={iconSize} class={iconClasses} />}
@@ -54,15 +56,16 @@ const slotContent = await Astro.slots.render('default')
   <button
     id={idName}
     title={title}
-    aria-label={title ? title : slotContent }
+    aria-label={title ? title : slotContent}
     class={`${baseClasses}
       ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}
       ${className}`}
     disabled={disabled}
     aria-disabled={disabled}
+    {...restProps}
   >
-  {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
+    {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
     <slot />
     {iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
   </button>

src/components/ui/Button.astro

@@ -4,9 +4,12 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Search from "@components/Search.astro";
 
+
 import "@src/styles/global.css";
 import "@src/styles/search.css";
 import "@fontsource-variable/inter";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
 
 export interface Props {
   title: string;

src/layouts/Layout.astro

@@ -20,7 +20,6 @@ deadlines = deadlines
   title="EuroPython 2025 | July 14th-20th 2025 | Prague, Czech Republic & Remote"
   description="EuroPython is the largest Python conference in Europe. We are looking forward to seeing you in Prague, Czech Republic & Remote from July 14th-20th 2025."
 >
-
   <Hero />
   <Updates />
   <Keynoters />

src/pages/index.astro

@@ -1,21 +1,12 @@
 #search {
-  padding: 85px 10px 10px 10px;
+  padding: 10px;
   position: relative;
-  max-height: 80vh;
   width: 100%;
   max-width: 48rem;
   margin: auto;
-  background: #f5e5d6;
-  border-radius: 0.5rem;
-  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.4);
   overflow: auto;
   transition: background ease-out 0.2s;
   z-index: 2;
-  overflow: auto;
-  height: 100%;
-
-  border-bottom: 1px solid #e1e3e6;
-  border-bottom-color: rgb(225, 227, 230);
 }
 
 .pagefind-ui__search-input {
@@ -25,17 +16,17 @@
   padding-inline-end: 0.5rem;
   background-color: #fff;
   font-size: 16px;
-  color: #5f3d1b;
+  color: #000000;
 }
 
 .pagefind-ui__result.selected {
-  background-color: #f5f5f5;
+  background-color: #f8f8f8;
   background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
 .pagefind-ui__result:hover {
-  background-color: #f5f5f5;
+  background-color: #f8f8f8;
 }
 .pagefind-ui__message {
   margin: 1em;
@@ -59,13 +50,11 @@
   --pagefind-ui-border: #d8d8d8;
   --pagefind-ui-border-width: 2px;
   --pagefind-ui-border-radius: 0.5rem;
-  /*width: 50%;*/
 }
 .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
   z-index: 9999;
   position: relative;
   overflow: auto;
-  height: 100%;
 }
 .pagefind-ui__result {
   padding: 0 2em 1em !important;
@@ -76,47 +65,3 @@
 .pagefind-ui .pagefind-ui__result-excerpt {
   color: var(--pagefind-ui-text);
 }
-
-.search-header {
-  max-width: 48rem;
-  margin: auto;
-}
-.search-header h2 {
-  position: relative;
-  left: -12px;
-  z-index: 100;
-}
-.modal__overlay {
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.search-wrapper {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  display: block;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 500;
-  box-sizing: border-box;
-  display: none;
-  transition: opacity ease-out 0.2s;
-  background: rgba(116, 116, 116, 0.9);
-  z-index: 100;
-}
-
-#search-close {
-  position: relative;
-  left: -12px;
-  margin: 0;
-  border: 0;
-  transition: opacity ease-out 0.2s;
-  z-index: 10;
-}