chore: replace algolia with meilisearch, remove ssr so project can be…

… deployed on firebase again (#372)

* feat: add meilisearch indexer script

* fix: remove file that was breaking the indexer, fix styling on mobile version of content list

* chore: create search input replacement for home page

* chore: use domain class

* chore: remove algolia and add modal version of the search component

* chore: update lock file

* fix: handle case where env variables are not set, add key down events

* chore: remove sitemap server endpoint and use a package library instead

* fix: close search modal on selecting option

.env.example

@@ -1,5 +1,5 @@
-ALGOLIA_SEARCH_API_KEY=
-ALGOLIA_WRITE_API_KEY=
-ALGOLIA_APPLICATION_ID=
-ALGOLIA_INDEX=
+MEILISEARCH_SEARCH_API_KEY=
+MEILISEARCH_WRITE_API_KEY=
+MEILISEARCH_INDEX=
+MEILISEARCH_HOST=
 ENV=staging | production

README.md

@@ -27,7 +27,7 @@ npm run dev
 
 ### Using Docker
 
-You can also spin up the development environment using Docker. First, you have to add the Algolia secrets to the `.env` file. You can use the example file for that:
+You can also spin up the development environment using Docker. First, you have to add the Meilisearch secrets to the `.env` file. You can use the example file for that:
 
 ```bash
 cp .env.example .env

components/GettingStarted/WhatsNext.vue

@@ -33,7 +33,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-8 pt-12">
       <Link
         :href="url"
-        class="flex space-x-4 bg-white dark:bg-black-18 rounded-2xl shadow-card dark:shadow-black py-10 px-6"
+        class="flex space-x-4 bg-white dark:bg-black-100 rounded-2xl shadow-card dark:shadow-black py-10 px-6"
         :external-icon="false"
         v-for="{ title, description, url, icon } in steps"
       >

components/Header.vue

@@ -1,13 +1,12 @@
 <script setup>
   import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
-  import { Link, SwitchColorMode, ArchwayBrand, ArchwayLogo, CloseIcon, MenuIcon, SearchIcon } from '@/components/Ui';
-  import AutocompleteSearch from '@/components/Ui/Algolia/AutocompleteSearch.vue';
+  import { Link, SwitchColorMode, ArchwayBrand, ArchwayLogo, CloseIcon, MenuIcon, SearchIcon, ContentSearchButton } from '@/components/Ui';
   import BrandGithub from '@/components/Ui/Brands/Github.vue';
   import BrandDiscord from '@/components/Ui/Brands/Discord.vue';
 
   const openSearch = () => {
-    const btn = document.getElementsByClassName('aa-DetachedSearchButton');
-    btn[0].click();
+    const btn = document.getElementById('open-search-modal');
+    btn.click();
   };
 </script>
 
@@ -34,7 +33,7 @@
               <BrandGithub class="flex-shrink-0 w-6 h-6 text-black/60 dark:text-white" aria-hidden="true" />
             </Link>
             <SwitchColorMode />
-            <AutocompleteSearch detached />
+            <ContentSearchButton />
             <Link href="https://archway.io" :external-icon="false" class="caption">Back to Archway</Link>
           </div>
           <div class="flex-1 flex justify-end items-center lg:hidden space-x-2">

components/Home/FeaturedSection.vue

@@ -10,7 +10,7 @@
 </script>
 
 <template>
-  <Link :href="url" class="relative block border border-transparent rounded-2xl bg-white dark:bg-black-18 shadow-card dark:shadow-black">
+  <Link :href="url" class="relative block border border-transparent rounded-2xl bg-white dark:bg-black-100 shadow-card dark:shadow-black">
     <div class="flex flex-col md:flex-row md:items-center space-y-6 md:space-x-6 md:space-y-0 px-6 py-8">
       <div class="flex-shrink-0">
         <slot></slot>

components/Home/Hero.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="pb-[4.5em]  space-y-8">
+  <div class="pb-[4.5em] space-y-8">
     <h1 class="hero-1 uppercase">Make it happen.</h1>
     <p class="hero-2 max-w-5xl text-gray-900">
       Discover why and how to build, run a node, and participate on Archway, the incentivized smart contract platform that rewards dapp
       <span class="text-orange">architects.</span>
     </p>
-    <UiAlgoliaAutocompleteSearch class="w-full lg:w-6/12 min-h-" component-id="hero-autocomplete" />
+    <UiMeilisearchContentSearchInput class="w-full lg:w-6/12" />
   </div>
 </template>

components/Home/LearnAboutArchway.vue

@@ -40,7 +40,7 @@
       <Link
         :key="id"
         :href="path"
-        class="flex space-x-4 bg-white dark:bg-black-18 rounded-2xl shadow-card dark:shadow-black py-10 px-6"
+        class="flex space-x-4 bg-white dark:bg-black-100 rounded-2xl shadow-card dark:shadow-black py-10 px-6"
         v-for="{ id, title, description, path, logo } in articles"
       >
         <div class="flex-shrink-0">

components/Home/Sections.vue

@@ -11,7 +11,7 @@
 
 <template>
   <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 pb-16">
-    <Link href="/developers" class="rounded-2xl bg-white dark:bg-black-18 shadow-card dark:shadow-black px-6 py-8">
+    <Link href="/developers" class="rounded-2xl bg-white dark:bg-black-100 shadow-card dark:shadow-black px-6 py-8">
       <h3 class="text-gray-700 pb-4">Dapp Developers</h3>
       <SectionImage>
         <img class="w-[145px] dark:hidden" :src="DevelopersIllustration" />
@@ -20,7 +20,7 @@
       <h2 class="heading-3 pt-6 pb-2.5">Build a dapp</h2>
       <p class="text-gray-500 dark:text-gray-900">Get answers for your doubts and learn how to build a dapp on Archway.</p>
     </Link>
-    <Link href="/validators" class="rounded-2xl bg-white dark:bg-black-18 shadow-card dark:shadow-black px-6 py-8">
+    <Link href="/validators" class="rounded-2xl bg-white dark:bg-black-100 shadow-card dark:shadow-black px-6 py-8">
       <h3 class="text-gray-700 pb-4">Node Operators</h3>
       <SectionImage>
         <img class="w-[197px] dark:hidden" :src="ValidatorsIllustration" />
@@ -29,7 +29,7 @@
       <h2 class="heading-3 pt-6 pb-2.5">Run a node</h2>
       <p class="text-gray-500 dark:text-gray-900">Learn, get clarity on what it takes and how to run your very own Archway node.</p>
     </Link>
-    <Link href="/community" class="rounded-2xl bg-white dark:bg-black-18 shadow-card dark:shadow-black px-6 py-8">
+    <Link href="/community" class="rounded-2xl bg-white dark:bg-black-100 shadow-card dark:shadow-black px-6 py-8">
       <h3 class="text-gray-700 pb-4">Community Members</h3>
       <SectionImage>
         <img class="w-[210px] dark:hidden" :src="CommunityIllustration" />

components/Sections/Categories.vue

@@ -10,7 +10,7 @@
     <Link
       :key="id"
       :href="articlePath"
-      class="bg-white dark:bg-black-18 rounded-2xl shadow-card px-6 py-8"
+      class="bg-white dark:bg-black-100 rounded-2xl shadow-card px-6 py-8"
       v-for="{ id, category, title, description, articlePath } in categories"
     >
       <label class="block text-black/20 dark:text-white/60 pb-6" v-if="!!category">{{ category }}</label>

components/Sections/MostPopularArticles.vue

@@ -1,20 +1,13 @@
 <script lang="ts" setup>
   import { PropType } from 'vue';
   import ArticlesSection from '@/components/ArticlesSection.vue';
-  import { useHighlightedArticles } from '@/data/useHighlightedArticles';
-  import { SortingReplicas } from '@/domain/AlgoliaSearch';
   import { Article } from '@/domain';
 
   const props = defineProps({
     section: { type: String as PropType<'developers' | 'validators' | 'community'>, required: true },
   });
 
   const articles = ref<Article[]>([]);
-  const { search, isLoading } = await useHighlightedArticles(SortingReplicas.DocsByViewed);
-
-  onMounted(async () => {
-    articles.value = await search(props.section);
-  });
 </script>
 
 <template>

components/Test.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="fixed inset-0 flex items-center justify-center">
+    <button
+      type="button"
+      @click="openModal"
+      class="rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+    >
+      Open dialog
+    </button>
+  </div>
+  <TransitionRoot appear :show="isOpen" as="template">
+    <Dialog as="div" @close="closeModal" class="relative z-10">
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-black bg-opacity-25" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <DialogPanel
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"
+            >
+              <DialogTitle
+                as="h3"
+                class="text-lg font-medium leading-6 text-gray-900"
+              >
+                Payment successful
+              </DialogTitle>
+              <div class="mt-2">
+                <p class="text-sm text-gray-500">
+                  Your payment has been successfully submitted. We’ve sent you
+                  an email with all of the details of your order.
+                </p>
+              </div>
+
+              <div class="mt-4">
+                <button
+                  type="button"
+                  class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                  @click="closeModal"
+                >
+                  Got it, thanks!
+                </button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/vue'
+
+const isOpen = ref(true)
+
+function closeModal() {
+  isOpen.value = false
+}
+function openModal() {
+  isOpen.value = true
+}
+</script>