arsanig · arsanig · Feb 22, 2026 · Feb 22, 2026 · Feb 25, 2026 · Feb 25, 2026
diff --git a/messages/en.json b/messages/en.json
@@ -11,7 +11,7 @@
     "contactLabel": "Contact",
     "aaLabel": "Apostolic Answers",
     "ddLabel": "Deep Dive",
-    "wowLabel": "Word of Wisdom",
+    "wowLabel": "Words of Wisdom",
     "shopLabel": "Shop",
     "copyright": "© {year} Coptic Orthodox Answers. All Rights Reserved.",
     "homePageTitle": "Becoming a Generation of Enlightened Christians",
@@ -27,6 +27,12 @@
     "contactEmailPlaceholder": "your.email@example.com",
     "contactMessagePlaceholder": "Tell us what's on your mind...",
     "contactSubmitButton": "Send Message",
+    "searchResultsLabel": "Search results for",
+    "noResultsFound": "No results found.",
+    "perPageLabel": "Results per page",
+    "filterLabel": "Filter",
+    "filterAll": "All",
+    "searchingLabel": "Searching...",
     "faithTitle1": "What is the Coptic Orthodox Church",
     "faithBody1": "The Coptic Orthodox Church is the ancient Christian Church of Egypt. It is one-part of the worldwide Orthodox Church, established by the Apostles in the first century. The word 'Coptic' derives from the Greek word for 'Egyptian'. It is a Christian community which has its roots in Egypt, where over ten million members are found. Although the Coptic Orthodox Church may appear to be a recent presence in the West, it represents the earliest and original Apostolic Christianity. Far from being something new and alien, the Orthodox Faith is ancient and universal (catholic), and has a great deal of wealth to offer all those seeking a true and genuine relationship with God.",
     "faithTitle2": "Our History",

diff --git a/messages/fr.json b/messages/fr.json
@@ -11,7 +11,7 @@
     "contactLabel": "(FR) Contact",
     "aaLabel": "(FR) Apostolic Answers",
     "ddLabel": "(FR) Deep Dive",
-    "wowLabel": "(FR) Word of Wisdom",
+    "wowLabel": "(FR) Words of Wisdom",
     "shopLabel": "(FR) Shop",
     "copyright": "(FR) © {year} Coptic Orthodox Answers. All Rights Reserved.",
     "homePageTitle": "(FR) Becoming a Generation of Enlightened Christians",
@@ -27,6 +27,12 @@
     "contactEmailPlaceholder": "(FR) your.email@example.com",
     "contactMessagePlaceholder": "(FR) Tell us what's on your mind...",
     "contactSubmitButton": "(FR) Send Message",
+    "searchResultsLabel": "(FR) Search results for",
+    "noResultsFound": "(FR) No results found.",
+    "perPageLabel": "(FR) Results per page",
+    "filterLabel": "(FR) Filter",
+    "filterAll": "(FR) All",
+    "searchingLabel": "(FR) Searching...",
     "faithTitle1": "(FR) What is the Coptic Orthodox Church",
     "faithBody1": "(FR) The Coptic Orthodox Church is the ancient Christian Church of Egypt. It is one-part of the worldwide Orthodox Church, established by the Apostles in the first century. The word 'Coptic' derives from the Greek word for 'Egyptian'. It is a Christian community which has its roots in Egypt, where over ten million members are found. Although the Coptic Orthodox Church may appear to be a recent presence in the West, it represents the earliest and original Apostolic Christianity. Far from being something new and alien, the Orthodox Faith is ancient and universal (catholic), and has a great deal of wealth to offer all those seeking a true and genuine relationship with God.",
     "faithTitle2": "(FR) Our History",

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "scripts": {
         "start": "astro dev",
         "dev": "astro dev",
-        "build": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide && astro build && pagefind --site dist",
+        "build": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide && astro build",
         "preview": "astro preview",
         "astro": "astro"
     },

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -4,6 +4,7 @@ const year = new Date().getFullYear();
 ---
 
 <div
+    data-pagefind-ignore
     class="flex flex-col min-h-100 bg-black justify-between px-4 sm:px-8 lg:px-21 pt-8 pb-4 sm:pt-12 lg:pt-16 gap-8 sm:gap-12"
 >
     <div class="flex flex-col gap-2 sm:gap-4">

diff --git a/src/components/Head.astro b/src/components/Head.astro
@@ -8,7 +8,7 @@ const { title } = Astro.props;
 <meta charset="utf-8" />
 <meta
     name="viewport"
-    content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,orientation=portrait"
+    content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
 />
 <title data-pagefind-meta="title">{title}</title>
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -5,10 +5,10 @@ import * as m from "@paraglide/messages.js";
 import SearchIcon from "./SearchIcon.astro";
 ---
 
-<header>
-    <div class="absolute top-4 left-4 z-50">
+<header data-pagefind-ignore>
+    <!-- <div class="absolute top-4 left-4 z-50">
         <LanguageToggle />
-    </div>
+    </div> -->
     <div class="bg-no-repeat bg-cover bg-center bg-[url(/assets/images/church.webp)]">
         <div class="bg-black/85 min-h-96 flex flex-col justify-center items-center">
             <a href="/">
@@ -25,19 +25,12 @@ import SearchIcon from "./SearchIcon.astro";
                         id="search"
                         type="text"
                         placeholder={m.searchPlaceholder()}
-                        class="w-full px-10 sm:px-12 py-2.5 sm:py-3 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-jonquil text-center text-sm sm:text-base [&:focus::placeholder]:opacity-0"
+                        class="w-full px-10 sm:px-12 py-2.5 sm:py-3 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-jonquil text-center text-sm sm:text-base [&:focus::placeholder]:opacity-0"
                     />
                     <div class="absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
                         <SearchIcon class="w-4 h-4 sm:w-5 sm:h-5" />
                     </div>
                 </div>
-                <div id="results" class="fixed inset-0 hidden z-100">
-                    <div
-                        class="absolute w-[calc(100%-2rem)] sm:w-4/5 md:w-1/2 left-1/2 -translate-x-1/2 mt-2 max-h-[60vh] overflow-y-auto bg-white rounded-lg shadow-xl p-3 sm:p-4"
-                    >
-                        <div class="space-y-4"></div>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
@@ -47,100 +40,21 @@ import SearchIcon from "./SearchIcon.astro";
 </header>
 
 <script is:inline>
-    (function () {
+    (() => {
         const searchBox = document.querySelector("#search");
-        const resultsContainer = document.querySelector("#results");
-        const resultsContent = resultsContainer?.querySelector(".space-y-4");
-        if (!searchBox || !resultsContainer || !resultsContent) return;
-
-        let debounceTimer = null;
-        let searchCounter = 0;
-
-        function closeResults() {
-            resultsContainer.classList.add("hidden");
-            document.body.classList.remove("overflow-hidden");
-        }
-
-        function openResults() {
-            resultsContainer.classList.remove("hidden");
-            document.body.classList.add("overflow-hidden");
-
-            const searchRect = searchBox.getBoundingClientRect();
-            const resultsDiv = resultsContainer.querySelector("div");
-            if (resultsDiv) {
-                resultsDiv.style.top = searchRect.bottom + 8 + "px";
-            }
-        }
-
-        async function performSearch(searchTerm) {
-            if (!searchTerm.trim()) {
-                closeResults();
-                return;
-            }
-
-            openResults();
-
-            if (searchBox.dataset.loaded !== "true") {
-                searchBox.dataset.loaded = "true";
-                window.pagefind = await import("/pagefind/pagefind.js");
-            }
-
-            const currentSearch = ++searchCounter;
-            const search = await window.pagefind.search(searchTerm);
+        if (!searchBox) return;
 
-            if (currentSearch !== searchCounter) return;
+        const navigateToSearch = (query) => {
+            const q = query.trim();
+            if (!q) return;
+            const prefix = window.location.pathname.startsWith("/fr") ? "/fr" : "";
+            window.location.href = prefix + "/search?q=" + encodeURIComponent(q);
+        };
 
-            let html = "";
-            for (const result of search.results) {
-                const data = await result.data();
-                if (currentSearch !== searchCounter) return;
-                html +=
-                    '<a href="' + data.url + '" class="block p-4 hover:bg-gray-50 rounded-lg">' +
-                    '<h3 class="text-lg font-semibold text-gray-900">' + escapeHtml(data.meta.title) + "</h3>" +
-                    '<p class="text-gray-600 mt-1">' + (data.excerpt || "") + "</p>" +
-                    "</a>";
-            }
-
-            if (currentSearch !== searchCounter) return;
-
-            if (html) {
-                resultsContent.innerHTML = html;
-            } else {
-                resultsContent.innerHTML =
-                    '<p class="text-gray-500 text-center py-4">No results found.</p>';
-            }
-        }
-
-        function escapeHtml(str) {
-            const div = document.createElement("div");
-            div.textContent = str;
-            return div.innerHTML;
-        }
-
-        searchBox.addEventListener("input", function (e) {
-            clearTimeout(debounceTimer);
-            debounceTimer = setTimeout(function () {
-                performSearch(e.target.value);
-            }, 250);
-        });
-
-        searchBox.addEventListener("keypress", function (e) {
+        searchBox.addEventListener("keypress", (e) => {
             if (e.key === "Enter") {
-                clearTimeout(debounceTimer);
-                performSearch(e.target.value);
-            }
-        });
-
-        resultsContainer.addEventListener("click", function (e) {
-            if (e.target === e.currentTarget) {
-                closeResults();
-            }
-        });
-
-        document.addEventListener("keydown", function (e) {
-            if (e.key === "Escape" && !resultsContainer.classList.contains("hidden")) {
-                closeResults();
-                searchBox.blur();
+                e.preventDefault();
+                navigateToSearch(e.target.value);
             }
         });
     })();

diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
@@ -1,17 +1,21 @@
 ---
 import { type CollectionEntry, render } from "astro:content";
 
-const post = Astro.props;
+interface Props extends CollectionEntry<"posts"> {
+    category?: string;
+}
 
-type Props = CollectionEntry<"posts">;
-const { Content } = await render(post);
+const { category, ...post } = Astro.props;
+const { Content } = await render(post as CollectionEntry<"posts">);
 ---
 
 <div class="bg-gray w-full">
     <div
         class="flex flex-col justify-center text-justify px-4 sm:px-8 md:px-16 lg:px-42 py-8 sm:py-12 md:py-16 lg:py-21"
         data-pagefind-body
     >
+        {post.data.imgSrc && <meta data-pagefind-meta={`image:${post.data.imgSrc}`} />}
+        {category && <meta data-pagefind-filter={`category:${category}`} />}
         <h4
             data-pagefind-weight="9"
             class="font-noto text-2xl sm:text-3xl md:text-4xl text-pearl text-center pb-4 sm:pb-8 md:pb-12 lg:pb-21 max-w-full sm:max-w-[90%] md:max-w-[80%] lg:max-w-[66%] place-self-center"

diff --git a/src/pages/apostolic-answers/[...slug].astro b/src/pages/apostolic-answers/[...slug].astro
@@ -18,5 +18,5 @@ const post = Astro.props;
 ---
 
 <Main title={post.data.title}>
-    <Post {...post} />
+    <Post {...post} category="apostolic-answers" />
 </Main>
diff --git a/src/pages/deep-dive/[...slug].astro b/src/pages/deep-dive/[...slug].astro
@@ -18,5 +18,5 @@ const post = Astro.props;
 ---
 
 <Main title={post.data.title}>
-    <Post {...post} />
+    <Post {...post} category="deep-dive" />
 </Main>
diff --git a/src/pages/fr/apostolic-answers/[...slug].astro b/src/pages/fr/apostolic-answers/[...slug].astro
@@ -18,5 +18,5 @@ const post = Astro.props;
 ---
 
 <Main title={post.data.title}>
-    <Post {...post} />
+    <Post {...post} category="apostolic-answers" />
 </Main>
diff --git a/src/pages/fr/deep-dive/[...slug].astro b/src/pages/fr/deep-dive/[...slug].astro
@@ -18,5 +18,5 @@ const post = Astro.props;
 ---
 
 <Main title={post.data.title}>
-    <Post {...post} />
+    <Post {...post} category="deep-dive" />
 </Main>
diff --git a/src/pages/fr/podcasts/[slug].astro b/src/pages/fr/podcasts/[slug].astro
@@ -20,13 +20,14 @@ const { podcast } = Astro.props;
 <Main title={`${podcast.title} | ${m.podcastsLabel()} | ${m.siteName()}`}>
     <div class="bg-gray w-full">
         <div data-pagefind-body class="flex flex-col justify-center py-8 sm:py-12 md:py-16 lg:py-21">
+            <meta data-pagefind-meta={`image:https://i.ytimg.com/vi/${podcast.id}/hqdefault.jpg`} />
+            <meta data-pagefind-filter="category:podcasts" />
             <h4
                 class="font-noto text-2xl sm:text-3xl md:text-4xl text-pearl text-center pb-4 sm:pb-8 md:pb-12 lg:pb-21 max-w-full sm:max-w-[90%] md:max-w-[80%] lg:max-w-[66%] place-self-center"
                 data-pagefind-weight="10"
             >
                 {podcast.title}
             </h4>
-            <p class="text-jonquil text-sm text-center pb-4 sm:pb-8 md:pb-12 lg:pb-21">{podcast.publishedAt}</p>
             <div class="relative w-full px-4 sm:px-8 md:px-16 lg:px-40 mb-4">
                 <div class="relative pb-[56.25%] h-0">
                     <iframe
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ const year = new Date().getFullYear(); @@
     ---
     <div
+        data-pagefind-ignore
         class="flex flex-col min-h-100 bg-black justify-between px-4 sm:px-8 lg:px-21 pt-8 pb-4 sm:pt-12 lg:pt-16 gap-8 sm:gap-12"
     >
         <div class="flex flex-col gap-2 sm:gap-4">
@@ Expand Down @@