valaxy-theme-yun 0.3.10 → 0.5.0

package/README.md

@@ -1,8 +1,8 @@
-<p align='center'>
+<p align="center">
   <img width="200" src="https://cdn.jsdelivr.net/gh/YunYouJun/yun/images/meme/yun-good-alpha-compressed.png">
 </p>
 
-<p align='center'>
+<p align="center">
 Theme-Yun<sup><em>(vue)</em></sup>
 </p>
 
@@ -27,7 +27,7 @@ pnpm build
 ## [Sponsors](https://sponsors.yunyoujun.cn)
 
 <p align="center">
-  <a href="https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg">
-    <img src='https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg'/>
+  <a href="https://sponsors.yunyoujun.cn">
+    <img src='https://fastly.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg'/>
   </a>
 </p>

package/components/YunAlgoliaSearchBox.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import '@docsearch/css'
+import docsearch from '@docsearch/js'
+import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
+import { onMounted } from 'vue'
+import type { AlgoliaSearchOptions } from 'valaxy'
+import { useConfig } from 'valaxy/client'
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+const config = useConfig()
+
+onMounted(() => {
+  initialize(config.value.search.algolia)
+  setTimeout(poll, 16)
+})
+
+/**
+ * poll until open
+ */
+function poll() {
+  // programmatically open the search box after initialize
+  const e = new Event('keydown') as any
+
+  e.key = 'k'
+  e.metaKey = true
+
+  window.dispatchEvent(e)
+
+  setTimeout(() => {
+    if (!document.querySelector('.DocSearch-Modal'))
+      poll()
+  }, 16)
+}
+
+function initialize(userOptions: AlgoliaSearchOptions) {
+  // note: multi-lang search support is removed since the theme
+  // doesn't support multiple locales as of now.
+  const options = Object.assign({}, userOptions, {
+    container: '#docsearch',
+    navigator: {
+      navigate({ itemUrl }: { itemUrl: string }) {
+        const { pathname: hitPathname } = new URL(
+          window.location.origin + itemUrl,
+        )
+        // router doesn't handle same-page navigation so we use the native
+        // browser location API for anchor navigation
+        if (route.path === hitPathname)
+          window.location.assign(window.location.origin + itemUrl)
+
+        else
+          router.push(itemUrl)
+      },
+    },
+    transformItems(items: DocSearchHit[]) {
+      return items.map((item) => {
+        return Object.assign({}, item, {
+          url: getRelativePath(item.url),
+        })
+      })
+    },
+    hitComponent({ hit, children }: { hit: DocSearchHit; children: any }) {
+      const relativeHit = hit.url.startsWith('http')
+        ? getRelativePath(hit.url as string)
+        : hit.url
+      return {
+        __v: null,
+        type: 'a',
+        ref: undefined,
+        constructor: undefined,
+        key: undefined,
+        props: {
+          href: hit.url,
+          onClick(event: MouseEvent) {
+            if (isSpecialClick(event))
+              return
+
+            // we rely on the native link scrolling when user is already on
+            // the right anchor because Router doesn't support duplicated
+            // history entries.
+            if (route.path === relativeHit)
+              return
+
+            // if the hits goes to another page, we prevent the native link
+            // behavior to leverage the Router loading feature.
+            if (route.path !== relativeHit)
+              event.preventDefault()
+
+            router.go(relativeHit)
+          },
+          children,
+        },
+      }
+    },
+  })
+  docsearch(options)
+}
+
+function isSpecialClick(event: MouseEvent) {
+  return (
+    event.button === 1
+    || event.altKey
+    || event.ctrlKey
+    || event.metaKey
+    || event.shiftKey
+  )
+}
+
+function getRelativePath(absoluteUrl: string) {
+  const { pathname, hash } = new URL(absoluteUrl)
+  return pathname + hash
+}
+</script>
+
+<template>
+  <div id="docsearch" class="hidden" />
+</template>
+
+<style lang="scss">
+.DocSearch {
+  --docsearch-primary-color: var(--va-c-primary);
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-text-color: var(--va-c-text-primary);
+  --docsearch-muted-color: var(--va-c-text-light);
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-searchbox-shadow: none;
+
+  --docsearch-key-gradient: transparent;
+  --docsearch-key-shadow: none;
+
+  --docsearch-modal-background: var(--va-c-bg-light);
+  --docsearch-footer-background: var(--va-c-bg);
+
+  input {
+    &::placeholder {
+      color: var(--va-c-text-dark);
+    }
+  }
+}
+
+.dark .DocSearch {
+  --docsearch-modal-shadow: none;
+  --docsearch-footer-shadow: none;
+  --docsearch-hit-shadow: none;
+}
+
+.DocSearch-Form {
+  border: 1px solid var(--va-c-primary);
+}
+</style>

package/components/YunBanner.vue

@@ -6,7 +6,7 @@
  */
 
 import { CSSProperties, computed } from 'vue'
-import { useThemeConfig } from 'valaxy'
+import { useThemeConfig } from 'valaxy/client'
 import { random } from '~/utils'
 const themeConfig = useThemeConfig()
 

package/components/YunBase.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // export layouts/base.vue as components
-import { useThemeConfig } from 'valaxy'
+import { useThemeConfig } from 'valaxy/client'
 import Base from '../layouts/base.vue'
 
 const themeConfig = useThemeConfig()

package/components/YunCategories.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Categories } from 'valaxy'
+import type { Categories } from 'valaxy/client'
 import { ref } from 'vue'
 
 const props = withDefaults(defineProps<{

package/components/YunCategory.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import type { Category, Post } from 'valaxy'
-import { isParentCategory } from 'valaxy'
+import type { Post } from 'valaxy'
+import type { Category } from 'valaxy/client'
+import { isParentCategory } from 'valaxy/client'
 import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(defineProps<{

package/components/YunOverview.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useConfig } from 'valaxy/client'
 import { useRouter } from 'vue-router'
 
 const config = useConfig()

package/components/YunPostCollapse.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
 import type { Post } from 'valaxy'
-import { formatDate, sortByDate } from 'valaxy'
+import { formatDate, sortByDate } from 'valaxy/client'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{

package/components/YunPostMeta.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { formatDate } from 'valaxy'
+import { formatDate } from 'valaxy/client'
 
 defineProps<{
   frontmatter: Post

package/components/YunSay.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { useThemeConfig } from 'valaxy'
+import { useThemeConfig } from 'valaxy/client'
 
 const themeConfig = useThemeConfig()
 

package/components/YunSearch.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const YunAlgoliaSearchBox = __ALGOLIA__
+  ? defineAsyncComponent(() => import('./YunAlgoliaSearchBox.vue'))
+  : () => null
+
+const { t } = useI18n()
+
+// to avoid loading the docsearch js upfront (which is more than 1/3 of the
+// payload), we delay initializing it until the user has actually clicked or
+// hit the hotkey to invoke it.
+const loaded = ref(false)
+
+function load() {
+  if (!loaded.value)
+    loaded.value = true
+}
+
+onMounted(() => {
+  if (!__ALGOLIA__)
+    return
+
+  const handleSearchHotKey = (e: KeyboardEvent) => {
+    if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      load()
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      remove()
+    }
+  }
+
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
+})
+
+const trigger = () => {
+  const e = new Event('keydown') as any
+
+  e.key = 'k'
+  e.metaKey = true
+
+  window.dispatchEvent(e)
+}
+</script>
+
+<template>
+  <div>
+    <button class="search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="trigger">
+      <div i-ri-search-line />
+      <!-- <div v-else text="!2xl" i-ri-close-line /> -->
+    </button>
+
+    <YunAlgoliaSearchBox v-if="loaded" />
+  </div>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use '~/styles/vars' as *;
+
+.search-btn {
+  position: fixed;
+  top: 0.6rem;
+  right: 0.8rem;
+
+  color: var(--va-c-primary);
+  z-index: var(--yun-z-search-btn);
+}
+
+.search-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+
+  text-align: center;
+  padding-top: 3.5rem;
+  margin: 0;
+  z-index: var(--yun-z-search-popup);
+  transition: 0.6s;
+}
+
+.search-header {
+  .close-icon {
+    position: fixed;
+    top: 0.6rem;
+    right: 0.8rem;
+  }
+}
+
+.search-input {
+  background: transparent;
+  color: var(--va-c-text);
+  font-size: 1.5rem;
+  border-radius: 3rem;
+  padding: 1rem 1.5rem;
+  border: 1px solid var(--va-c-gray);
+  box-sizing: border-box;
+  width: 90%;
+  max-width: 800px;
+  font-family: var(--va-font-serif);
+  font-weight: 900;
+  text-align: center;
+}
+
+.popup {
+  .search-icon, .close-icon {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    padding: 0.5rem;
+
+    .icon {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+}
+</style>

package/components/YunSidebarLinks.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useThemeConfig } from 'valaxy'
+import { useThemeConfig } from 'valaxy/client'
 const themeConfig = useThemeConfig()
 </script>
 

package/components/YunSidebarNav.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useCategory, usePostList, useTag, useThemeConfig } from 'valaxy'
+import { useCategory, usePostList, useTag, useThemeConfig } from 'valaxy/client'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()

package/components/YunSocialLinks.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useConfig } from 'valaxy/client'
 
 const config = useConfig()
 </script>

package/components/YunSponsor.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useConfig } from 'valaxy/client'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()

package/components/YunTwikoo.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig, useTwikoo } from 'valaxy'
+import { useConfig, useTwikoo } from 'valaxy/client'
 
 const config = useConfig()
 useTwikoo(config.value.comment.twikoo)

package/components/YunWaline.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig, useWaline } from 'valaxy'
+import { useConfig, useWaline } from 'valaxy/client'
 
 const config = useConfig()
 useWaline(config.value.comment.waline)

package/config/index.ts

@@ -1,5 +1,9 @@
 export const anonymousImage = 'https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg'
 
+export namespace YunTheme {
+  export type Config = ThemeConfig
+}
+
 /**
  * Theme Config
  */

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 import { Plugin } from 'vite';
 
 declare const anonymousImage = "https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg";
+declare namespace YunTheme {
+    type Config = ThemeConfig;
+}
 /**
  * Theme Config
  */
@@ -124,4 +127,4 @@ interface UserOptions {
 }
 declare function yunPlugin(userOptions?: Partial<ThemeConfig>): Plugin;
 
-export { ThemeConfig, ThemeUserConfig, UserOptions, anonymousImage, yunPlugin as default, defaultThemeConfig, generateSafelist, yunPlugin };
+export { ThemeConfig, ThemeUserConfig, UserOptions, YunTheme, anonymousImage, yunPlugin as default, defaultThemeConfig, generateSafelist, yunPlugin };

package/layouts/archives.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useFrontmatter, usePostList, usePostTitle } from 'valaxy'
+import { useFrontmatter, usePostList, usePostTitle } from 'valaxy/client'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()

package/layouts/base.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig, useFrontmatter, usePostProperty, usePostTitle } from 'valaxy'
+import { useConfig, useFrontmatter, usePostProperty, usePostTitle } from 'valaxy/client'
 const frontmatter = useFrontmatter()
 
 const config = useConfig()
@@ -22,7 +22,7 @@ const title = usePostTitle(frontmatter)
     <div flex="~ 1 col" w="full" p="l-4 lt-md:0" class="content">
       <YunCard m="0" p="4" class="relative sm:p-6 lg:px-12 xl:px-16" :style="styles">
         <slot name="header">
-          <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" />
+          <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" :cover="frontmatter.cover" />
         </slot>
         <template #content>
           <slot name="content">
@@ -58,7 +58,7 @@ const title = usePostTitle(frontmatter)
     </slot>
   </main>
 
-  <YunAlgoliaSearch v-if="config.search.algolia.enable" />
+  <YunSearch v-if="config.search.enable" />
   <YunBackToTop />
 </template>
 

package/layouts/categories.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { useCategory, useFrontmatter, useInvisibleElement, usePostList, usePostTitle } from 'valaxy'
+import { useCategory, useFrontmatter, useInvisibleElement, usePostList, usePostTitle } from 'valaxy/client'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -15,12 +15,14 @@ const curCategory = computed(() => (route.query.category as string || ''))
 const postList = usePostList()
 const posts = computed(() => {
   const list = postList.value.filter((post) => {
-    if (post.categories) {
+    if (post.categories && curCategory.value !== 'Uncategorized') {
       if (typeof post.categories === 'string')
         return post.categories === curCategory.value
       else
         return post.categories.includes(curCategory.value)
     }
+    if (!post.categories && curCategory.value === 'Uncategorized')
+      return post.categories === undefined
     return false
   })
   return list
@@ -61,7 +63,7 @@ const title = usePostTitle(frontmatter)
     </template>
 
     <YunCard v-if="curCategory" ref="collapse" m="t-4" w="full">
-      <YunPageHeader m="t-4" :title="curCategory" icon="i-ri-folder-open-line" />
+      <YunPageHeader m="t-4" :title="curCategory === 'Uncategorized' ? t('category.uncategorized') : curCategory" icon="i-ri-folder-open-line" />
       <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
     </YunCard>
   </YunBase>

package/layouts/home.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useConfig } from 'valaxy/client'
 import { useLayout } from '~/composables'
 
 import { useAppStore } from '~/stores/app'
@@ -34,5 +34,5 @@ const isHome = useLayout('home')
     </ValaxyFooter>
   </main>
 
-  <YunAlgoliaSearch v-if="config.search.algolia.enable" />
+  <YunSearch v-if="config.search.enable" />
 </template>

package/layouts/post.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useConfig, useFrontmatter, useFullUrl } from 'valaxy'
+import { useConfig, useFrontmatter, useFullUrl } from 'valaxy/client'
 
 const config = useConfig()
 const frontmatter = useFrontmatter()

package/layouts/tags.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useFrontmatter, useInvisibleElement, usePostList, usePostTitle, useTags, useThemeConfig } from 'valaxy'
+import { useFrontmatter, useInvisibleElement, usePostList, usePostTitle, useTags, useThemeConfig } from 'valaxy/client'
 import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.3.10",
+  "version": "0.5.0",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -15,10 +15,10 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@iconify-json/ant-design": "^1.1.2",
-    "@iconify-json/simple-icons": "^1.1.14"
+    "@iconify-json/simple-icons": "^1.1.15"
   },
   "devDependencies": {
-    "valaxy": "0.3.10"
+    "valaxy": "0.5.0"
   },
   "scripts": {
     "build": "tsup",

package/styles/layout/post.scss

@@ -5,6 +5,24 @@
   max-width: var(--yun-post-card-max-width);
 }
 
+.post-card-image {
+  @extend .post-card;
+
+  .post-card-image-info-text {
+    height: 0;
+  }
+
+  @include mobile {
+    .post-card-info {
+      flex-direction: column;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
 .post-title {
   display: flex;
   justify-content: center;
@@ -75,4 +93,4 @@
   &:before {
     content: none;
   }
-}
+}

package/components/YunAlgoliaSearch.vue

@@ -1,227 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { useMagicKeys } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
-import { useConfig } from 'valaxy'
-import { useAlgoliaSearch } from '~/composables/search/algolia'
-
-const { t } = useI18n()
-
-const config = useConfig()
-const showPopup = ref(false)
-
-const { Escape } = useMagicKeys()
-
-useAlgoliaSearch({
-  ...config.value.search.algolia,
-  hits: {
-    per_page: 8,
-  },
-})
-
-watch(Escape, () => {
-  showPopup.value = false
-})
-
-watch(showPopup, () => {
-  if (showPopup.value)
-    document.documentElement.classList.add('no-scroll')
-  else
-    document.documentElement.classList.remove('no-scroll')
-})
-</script>
-
-<template>
-  <button class="search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="showPopup = !showPopup">
-    <div v-if="!showPopup" i-ri-search-line />
-    <div v-else text="!2xl" i-ri-close-line />
-  </button>
-
-  <transition>
-    <div v-show="showPopup" class="search-popup">
-      <div class="search-header" />
-      <div class="search-input-container" />
-      <div class="algolia-results">
-        <div id="algolia-stats" />
-        <div id="algolia-hits" />
-        <div id="algolia-pagination" class="algolia-pagination" />
-      </div>
-    </div>
-  </transition>
-</template>
-
-<style lang="scss">
-@use 'sass:map';
-@use '~/styles/vars' as *;
-
-.search-btn {
-  position: fixed;
-  top: 0.6rem;
-  right: 0.8rem;
-
-  color: var(--va-c-primary);
-  z-index: var(--yun-z-search-btn);
-}
-
-.search-popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  backdrop-filter: blur(30px);
-  -webkit-backdrop-filter: blur(30px);
-
-  text-align: center;
-  padding-top: 3.5rem;
-  margin: 0;
-  z-index: var(--yun-z-search-popup);
-  transition: 0.6s;
-}
-
-.search-header {
-  .close-icon {
-    position: fixed;
-    top: 0.6rem;
-    right: 0.8rem;
-  }
-}
-
-.search-input {
-  background: transparent;
-  color: var(--va-c-text);
-  font-size: 1.5rem;
-  border-radius: 3rem;
-  padding: 1rem 1.5rem;
-  border: 1px solid var(--va-c-gray);
-  box-sizing: border-box;
-  width: 90%;
-  max-width: 800px;
-  font-family: var(--va-font-serif);
-  font-weight: 900;
-  text-align: center;
-}
-
-.popup {
-  .search-icon, .close-icon {
-    display: inline-block;
-    width: 2rem;
-    height: 2rem;
-    padding: 0.5rem;
-
-    .icon {
-      width: 2rem;
-      height: 2rem;
-    }
-  }
-}
-
-.ais-Stats {
-  .ais-Stats-text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    position: relative;
-
-    padding-bottom: 8px;
-    margin-bottom: 8px;
-    font-size: small;
-  }
-}
-
-.algolia-powered {
-  position: absolute;
-  top: 0;
-  right: 1rem;
-
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-
-  img {
-    width: 1rem;
-    height: 1rem;
-    display: inline-flex;
-  }
-}
-
-.algolia-results {
-  position: relative;
-  overflow: auto;
-  padding: 10px 30px 0 30px;
-
-  hr {
-    margin-top: 10px;
-    margin-bottom: 0;
-  }
-}
-
-.algolia-hit-item {
-  display: flex;
-  justify-content: center;
-}
-
-.algolia-hit-item-link {
-  display: block;
-  width: 100%;
-  padding: 0.5rem;
-  border-bottom: 1px dashed #ccc;
-  font-family: var(--va-font-serif);
-  font-weight: 900;
-  font-size: 1.2rem;
-  max-width: 800px;
-
-  mark {
-    color: var(--va-c-danger);
-    font-family: 900;
-    background-color: transparent;
-    text-decoration: underline;
-  }
-
-  small {
-    display: flex;
-    font-size: 12px;
-    justify-content: center;
-    font-family: var(--va-font-sans);
-    font-weight: normal;
-    line-height: 1;
-    margin-top: -0.2rem;
-  }
-}
-
-.algolia-pagination {
-  margin-top: 1rem;
-  .ais-Pagination-list {
-    display: flex;
-    padding-inline-start: 0;
-  }
-
-  .pagination-item {
-    display: inline-flex;
-    list-style-type: none;
-  }
-
-  .page-number {
-    border-top: none;
-  }
-
-  .disabled-item {
-    display: none;
-  }
-
-  .active {
-    .page-number {
-      background: var(--page-btn-active-bg-color);
-      color: var(--va-c-bg);
-    }
-  }
-}
-
-.ais-Hits-list {
-  margin: 0;
-  list-style-type: none;
-  padding-inline-start: 0;
-}
-</style>