fix: search not possible

GonzaloHirsch · Feb 21, 2024 · 5fb0cef · 5fb0cef
1 parent c3ae5c2
commit 5fb0cef
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 56 deletions.
diff --git a/components/blog/hero.vue b/components/blog/hero.vue
@@ -48,9 +48,9 @@
       <a href="#signup" target="_self" class="hover:underline"
         ><em>sign up for updates!</em></a
       >
-      Search for blog posts
+      <!-- Search for blog posts
       <a href="/search/" target="_self" class="hover:underline"><em>here</em></a
-      >!
+      >! -->
     </p>
     <div
       class="border-t-2 mt-8 border-typography_primary_light dark:border-typography_primary_dark flex flex-col md:flex-row items-center md:justify-between md:text-right"

diff --git a/components/blog/list.vue b/components/blog/list.vue
@@ -1,43 +1,53 @@
 <template>
-    <ul class="grid grid-cols-10 gap-4 text-typography_primary_light dark:text-typography_primary_dark">
-        <li
-            v-for="article in data"
-            :key="article._path"
-            class="col-span-full md:col-span-5 relative rounded-md border-2 border-typography_primary_light dark:border-typography_primary_dark hover:border-brand_primary_light hover:dark:border-brand_primary_dark group"
-        >
-            <NuxtLink :to="article._path + '/'" class="p-4 block relative">
-                <div class="wrapper">
-                    <header>
-                        <h2
-                            class="text-h3 leading-h3 font-semibold mb-2 group-hover:text-brand_primary_light dark:group-hover:text-brand_primary_dark"
-                        >
-                            {{ article.headline }}
-                        </h2>
-                        <p class="text-sm leading-sm mb-4 text-typography_primary_light/75 dark:text-typography_primary_dark/75">
-                            {{ $formatDate(article.date) }}
-                        </p>
-                        <p>{{ article.excerpt }}</p>
-                        <!-- <ul class="article-tags">
+  <ul
+    class="grid grid-cols-10 gap-4 text-typography_primary_light dark:text-typography_primary_dark"
+  >
+    <li
+      v-for="article in data"
+      :key="article._path"
+      class="col-span-full md:col-span-5 relative rounded-md border-2 border-typography_primary_light dark:border-typography_primary_dark hover:border-brand_primary_light hover:dark:border-brand_primary_dark group"
+    >
+      <NuxtLink :to="article._path + '/'" class="p-4 block relative">
+        <div class="wrapper">
+          <header>
+            <h2
+              class="text-h3 leading-h3 font-semibold mb-2 group-hover:text-brand_primary_light dark:group-hover:text-brand_primary_dark"
+            >
+              {{ article.headline }}
+            </h2>
+            <p
+              class="text-sm leading-sm mb-4 text-typography_primary_light/75 dark:text-typography_primary_dark/75"
+            >
+              {{ $formatDate(article.date) }}
+            </p>
+            <p>{{ article.excerpt }}</p>
+            <!-- <ul class="article-tags">
                                             <li class="tag !py-0.5" v-for="(tag, n) in article.tags" :key="n">{{ tag }}</li>
                                         </ul> -->
-                    </header>
-                </div>
-            </NuxtLink>
-        </li>
-    </ul>
-    <p v-if="data.length == 0" class="w-full md:w-7/12 text-h3 leading-h3 font-bold dark:text-white">{{message}}</p>
+          </header>
+        </div>
+      </NuxtLink>
+    </li>
+  </ul>
+  <p
+    v-if="data?.length == 0"
+    class="w-full md:w-7/12 text-h3 leading-h3 font-bold dark:text-white"
+  >
+    {{ message }}
+  </p>
 </template>
 
 <script setup>
 const props = defineProps({
-    data: {
-        type: Array,
-        required: true
-    },
-    message: {
-        type: String,
-        default: "There are no posts right now, but stay tuned for newer releases in the future."
-    }
+  data: {
+    type: Array,
+    required: true,
+  },
+  message: {
+    type: String,
+    default:
+      'There are no posts right now, but stay tuned for newer releases in the future.',
+  },
 });
 const { $formatDate } = useNuxtApp();
 </script>
diff --git a/components/sections/blogCta.vue b/components/sections/blogCta.vue
@@ -21,14 +21,14 @@
         aria="Check out the blog."
         extraClass="mx-auto mr-2"
       />
-      <ButtonsButton
+      <!-- <ButtonsButton
         text="Search Posts"
         format="white"
         href="/search/"
         target="_self"
         aria="Search for blog posts."
         extraClass="mx-auto ml-2"
-      />
+      /> -->
     </div>
   </Section>
 </template>

diff --git a/pages/search/index.vue → ideas/search/index.vue b/pages/search/index.vue → ideas/search/index.vue
@@ -18,25 +18,10 @@
       />
     </Section>
     <Section id="main" class="!pt-4">
-      <ContentQuery
-        path="/blog"
-        :only="['headline', 'excerpt', 'date', 'tags', '_path', 'image']"
-        :sort="{
-          date: -1,
-        }"
-        :where="{
-          $or: [
-            { headline: { $regex: `/${filter}/ig` } },
-            { tags: { $regex: `/${filter}/ig` } },
-          ],
-        }"
-        v-slot="{ data }"
-      >
-        <BlogList
-          :data="data"
-          message="No blog posts found. Try searching for something different."
-        />
-      </ContentQuery>
+      <BlogList
+        :data="data"
+        message="No blog posts found. Try searching for something different."
+      />
     </Section>
     <SectionsNewsletterCta :tags="['2824862', '2824865']" class="!pt-0">
       <template #title>Unlock Valuable Tech Knowledge!</template>
@@ -48,6 +33,25 @@
 import { ref } from 'vue';
 const filter = ref('');
 
+const { data } = await useAsyncData(
+  `search`,
+  async () => {
+    return await queryContent('/blog')
+      .where({
+        $or: [
+          { headline: { $regex: `/${filter.value}/ig` } },
+          { tags: { $regex: `/${filter.value}/ig` } },
+        ],
+      })
+      .sort({ date: -1 })
+      .only(['headline', 'excerpt', 'date', 'tags', '_path'])
+      .find();
+  },
+  {
+    watch: [filter],
+  }
+);
+
 // Set the meta
 const title = 'Search for Blog Posts | Gonzalo Hirsch';
 const description =

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -126,6 +126,10 @@ export default defineNuxtConfig({
   sourcemap: false,
   // Inspired on https://blog.openreplay.com/power-your-blog-with-nuxt-content
   content: {
+    experimental: {
+      clientDB: true,
+      stripQueryParameters: false,
+    },
     // https://content.nuxtjs.org/api/configuration
     highlight: {
       theme: 'github-dark',