valaxy-theme-press 0.26.13 → 0.28.0-beta.1

package/components/PressAlgoliaSearch.vue

@@ -1,262 +1,274 @@
-<script lang="ts" setup>
-import { useAddonAlgolia } from 'valaxy-addon-algolia'
-import { onMounted, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
+<script setup lang="ts">
+import type { DocSearchInstance, DocSearchProps } from '@docsearch/js'
+import type { SidepanelInstance, SidepanelProps } from '@docsearch/sidepanel-js'
+import type { AlgoliaSearchOptions } from 'valaxy-addon-algolia'
+import { useAddonAlgoliaConfig } from 'valaxy-addon-algolia'
+import { nextTick, onUnmounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import '../styles/docsearch.css'
+
+const props = defineProps<{
+  openRequest?: {
+    target: 'search' | 'askAi' | 'toggleAskAi'
+    nonce: number
+  } | null
+}>()
+
+const router = useRouter()
+const algoliaConfig = useAddonAlgoliaConfig()
+
+let cleanup = () => {}
+let docsearchInstance: DocSearchInstance | undefined
+let sidepanelInstance: SidepanelInstance | undefined
+let openOnReady: 'search' | 'askAi' | null = null
+let initializeCount = 0
+let docsearchLoader: Promise<typeof import('@docsearch/js')> | undefined
+let sidepanelLoader: Promise<typeof import('@docsearch/sidepanel-js')> | undefined
+let lastFocusedElement: HTMLElement | null = null
+let skipEventDocsearch = false
+let skipEventSidepanel = false
+
+watch(
+  () => algoliaConfig.value?.options,
+  (options) => {
+    if (options)
+      update(options)
+  },
+  { immediate: true },
+)
+
+onUnmounted(cleanup)
+
+watch(
+  () => props.openRequest?.nonce,
+  () => {
+    const req = props.openRequest
+    if (!req)
+      return
+
+    if (req.target === 'search') {
+      if (docsearchInstance?.isReady) {
+        onBeforeOpen('docsearch', () => docsearchInstance?.open())
+      }
+      else {
+        openOnReady = 'search'
+      }
+    }
+    else if (req.target === 'toggleAskAi') {
+      if (sidepanelInstance?.isOpen) {
+        sidepanelInstance.close()
+      }
+      else {
+        onBeforeOpen('sidepanel', () => sidepanelInstance?.open())
+      }
+    }
+    else {
+      // askAi - open sidepanel or fallback to docsearch modal
+      if (sidepanelInstance?.isReady) {
+        onBeforeOpen('sidepanel', () => sidepanelInstance?.open())
+      }
+      else if (sidepanelInstance) {
+        openOnReady = 'askAi'
+      }
+      else if (docsearchInstance?.isReady) {
+        onBeforeOpen('docsearch', () => docsearchInstance?.openAskAi())
+      }
+      else {
+        openOnReady = 'askAi'
+      }
+    }
+  },
+  { immediate: true },
+)
 
-const { t } = useI18n()
+async function update(options: AlgoliaSearchOptions) {
+  await nextTick()
 
-const { loaded, load, dispatchEvent } = useAddonAlgolia()
+  // Normalize askAi: string -> { assistantId }
+  const askAi = typeof options.askAi === 'string'
+    ? { assistantId: options.askAi }
+    : options.askAi || undefined
 
-defineExpose({
-  loaded,
-  load,
-  dispatchEvent,
-})
+  const appId = options.appId ?? askAi?.appId
+  const apiKey = options.apiKey ?? askAi?.apiKey
+  const indexName = options.indexName ?? askAi?.indexName
 
-function isEditingContent(event: KeyboardEvent): boolean {
-  const element = event.target as HTMLElement
-  const tagName = element.tagName
+  if (!appId || !apiKey || !indexName) {
+    console.warn('[valaxy-theme-press] Algolia search cannot be initialized: missing appId/apiKey/indexName.')
+    return
+  }
 
-  return (
-    element.isContentEditable
-    || tagName === 'INPUT'
-    || tagName === 'SELECT'
-    || tagName === 'TEXTAREA'
-  )
+  await initialize({ ...options, appId, apiKey, indexName })
 }
 
-onMounted(() => {
-  const handleSearchHotKey = (event: KeyboardEvent) => {
-    if (
-      (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey))
-      || (!isEditingContent(event) && event.key === '/')
-    ) {
-      event.preventDefault()
-      load()
-      // eslint-disable-next-line ts/no-use-before-define
-      remove()
-    }
+async function initialize(userOptions: AlgoliaSearchOptions) {
+  const currentInitialize = ++initializeCount
+
+  // Always tear down previous instances first
+  cleanup()
+
+  const { askAi: _askAi, locales: _locales, mode: _mode, ...docSearchUserOptions } = userOptions
+  // Normalize askAi: string -> { assistantId }
+  const askAi = typeof _askAi === 'string'
+    ? { assistantId: _askAi }
+    : _askAi || undefined
+
+  const { default: docsearch } = await loadDocsearch()
+  if (currentInitialize !== initializeCount)
+    return
+
+  // Initialize sidepanel if askAi.sidePanel is configured
+  if (askAi?.sidePanel) {
+    const { default: sidepanel } = await loadSidepanel()
+    if (currentInitialize !== initializeCount)
+      return
+
+    const sidePanelConfig = askAi.sidePanel === true ? {} : askAi.sidePanel
+
+    sidepanelInstance = sidepanel({
+      ...sidePanelConfig,
+      container: '#press-docsearch-sidepanel',
+      indexName: askAi.indexName ?? docSearchUserOptions.indexName,
+      appId: askAi.appId ?? docSearchUserOptions.appId,
+      apiKey: askAi.apiKey ?? docSearchUserOptions.apiKey,
+      assistantId: askAi.assistantId,
+      onOpen: focusInput,
+      onClose: onClose.bind(null, 'sidepanel'),
+      onReady: () => {
+        if (openOnReady === 'askAi') {
+          openOnReady = null
+          onBeforeOpen('sidepanel', () => sidepanelInstance?.open())
+        }
+      },
+      keyboardShortcuts: {
+        'Ctrl/Cmd+I': false,
+      },
+    } as SidepanelProps)
   }
 
-  const remove = () => {
-    window.removeEventListener('keydown', handleSearchHotKey)
+  const options: DocSearchProps = {
+    ...docSearchUserOptions as DocSearchProps,
+    container: '#press-docsearch',
+    navigator: {
+      navigate(item) {
+        const { pathname, hash } = new URL(item.itemUrl, location.origin)
+        router.push(pathname + hash)
+      },
+    },
+    transformItems: items =>
+      items.map(item => ({
+        ...item,
+        url: getRelativePath(item.url),
+      })),
+    // When sidepanel is enabled, intercept Ask AI events to open it instead
+    ...(sidepanelInstance && {
+      interceptAskAiEvent: (initialMessage: any) => {
+        onBeforeOpen('sidepanel', () => sidepanelInstance?.open(initialMessage))
+        return true
+      },
+    }),
+    onOpen: focusInput,
+    onClose: onClose.bind(null, 'docsearch'),
+    onReady: () => {
+      if (openOnReady === 'search') {
+        openOnReady = null
+        onBeforeOpen('docsearch', () => docsearchInstance?.open())
+      }
+      else if (openOnReady === 'askAi' && !sidepanelInstance) {
+        openOnReady = null
+        onBeforeOpen('docsearch', () => docsearchInstance?.openAskAi())
+      }
+    },
+    keyboardShortcuts: {
+      '/': false,
+      'Ctrl/Cmd+K': false,
+    },
   }
 
-  window.addEventListener('keydown', handleSearchHotKey)
-
-  onUnmounted(remove)
-})
-</script>
-
-<template>
-  <div>
-    <AlgoliaSearchBox v-if="loaded" />
-
-    <div v-else id="docsearch" @click="load">
-      <button
-        class="DocSearch DocSearch-Button"
-        aria-label="Search"
-      >
-        <span class="DocSearch-Button-Container">
-          <svg
-            class="DocSearch-Search-Icon"
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-          >
-            <path
-              d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-              stroke="currentColor"
-              fill="none"
-              fill-rule="evenodd"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-          <span class="DocSearch-Button-Placeholder">{{ t('search.placeholder') }}</span>
-        </span>
-        <span class="DocSearch-Button-Keys">
-          <kbd class="DocSearch-Button-Key" />
-          <kbd class="DocSearch-Button-Key">K</kbd>
-        </span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<style>
-/* stylelint-disable selector-class-pattern */
-.DocSearch-Button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  width: 32px;
-  height: 55px;
-  background: transparent;
-  transition: border-color 0.25s;
-}
-
-.DocSearch-Button:hover {
-  background: transparent;
-}
+  docsearchInstance = docsearch(options)
 
-.DocSearch-Button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-.DocSearch-Button-Key--pressed {
-  transform: none;
-  box-shadow: none;
+  cleanup = () => {
+    docsearchInstance?.destroy()
+    sidepanelInstance?.destroy()
+    docsearchInstance = undefined
+    sidepanelInstance = undefined
+    openOnReady = null
+    lastFocusedElement = null
+  }
 }
 
-.DocSearch-Button:focus:not(:focus-visible) {
-  outline: none !important;
+function focusInput() {
+  requestAnimationFrame(() => {
+    const input
+      = document.querySelector<HTMLInputElement>('#docsearch-input')
+        || document.querySelector<HTMLInputElement>('#docsearch-sidepanel textarea')
+    input?.focus()
+  })
 }
 
-@media (width >= 768px) {
-  .DocSearch-Button {
-    justify-content: flex-start;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    padding: 0 10px 0 12px;
-    width: 100%;
-    height: 40px;
-    background-color: var(--va-c-bg-alt);
+function onBeforeOpen(target: 'docsearch' | 'sidepanel', cb: () => void) {
+  if (target === 'docsearch') {
+    if (sidepanelInstance?.isOpen) {
+      skipEventSidepanel = true
+      sidepanelInstance.close()
+    }
+    else if (!docsearchInstance?.isOpen) {
+      if (document.activeElement instanceof HTMLElement)
+        lastFocusedElement = document.activeElement
+    }
   }
-
-  .DocSearch-Button:hover {
-    border-color: var(--va-c-brand);
-    background: var(--va-c-bg-alt);
+  else if (target === 'sidepanel') {
+    if (docsearchInstance?.isOpen) {
+      skipEventDocsearch = true
+      docsearchInstance.close()
+    }
+    else if (!sidepanelInstance?.isOpen) {
+      if (document.activeElement instanceof HTMLElement)
+        lastFocusedElement = document.activeElement
+    }
   }
+  setTimeout(cb, 0)
 }
 
-.DocSearch-Button .DocSearch-Button-Container {
-  display: flex;
-  align-items: center;
-}
-
-.DocSearch-Button .DocSearch-Search-Icon {
-  position: relative;
-  width: 16px;
-  height: 16px;
-  color: var(--va-c-text-1);
-  fill: currentcolor;
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Search-Icon {
-  color: var(--va-c-text-1);
-}
-
-@media (width >= 768px) {
-  .DocSearch-Button .DocSearch-Search-Icon {
-    top: 1px;
-    margin-right: 8px;
-    width: 14px;
-    height: 14px;
-    color: var(--va-c-text-2);
+function onClose(target: 'docsearch' | 'sidepanel') {
+  if (target === 'docsearch') {
+    if (skipEventDocsearch) {
+      skipEventDocsearch = false
+      return
+    }
   }
-}
-
-.DocSearch-Button .DocSearch-Button-Placeholder {
-  display: none;
-  margin-top: 2px;
-  padding: 0 16px 0 0;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--va-c-text-2);
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Button-Placeholder {
-  color: var(--va-c-text-1);
-}
-
-@media (width >= 768px) {
-  .DocSearch-Button .DocSearch-Button-Placeholder {
-    display: inline-block;
+  else if (target === 'sidepanel') {
+    if (skipEventSidepanel) {
+      skipEventSidepanel = false
+      return
+    }
   }
-}
-
-.DocSearch-Button .DocSearch-Button-Keys {
-  /* rtl:ignore */
-  direction: ltr;
-  display: none;
-  min-width: auto;
-}
-
-@media (width >= 768px) {
-  .DocSearch-Button .DocSearch-Button-Keys {
-    display: flex;
-    align-items: center;
+  if (lastFocusedElement) {
+    lastFocusedElement.focus()
+    lastFocusedElement = null
   }
 }
 
-.DocSearch-Button .DocSearch-Button-Key {
-  display: block;
-  margin: 2px 0 0;
-  border: 1px solid var(--va-c-divider);
-
-  /* rtl:begin:ignore */
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  padding-left: 6px;
-
-  /* rtl:end:ignore */
-  min-width: 0;
-  width: auto;
-  height: 22px;
-  font-family: var(--va-font-sans);
-  font-size: 12px;
-  font-weight: 500;
-  transition: color 0.5s, border-color 0.5s;
+function loadDocsearch() {
+  if (!docsearchLoader)
+    docsearchLoader = import('@docsearch/js')
+  return docsearchLoader
 }
 
-.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
-  /* rtl:begin:ignore */
-  border-right: 1px solid var(--va-c-divider);
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-  padding-left: 2px;
-  padding-right: 6px;
-
-  /* rtl:end:ignore */
+function loadSidepanel() {
+  if (!sidepanelLoader)
+    sidepanelLoader = import('@docsearch/sidepanel-js')
+  return sidepanelLoader
 }
 
-.DocSearch-Button .DocSearch-Button-Key:first-child {
-  font-size: 1px;
-  letter-spacing: -12px;
-  color: transparent;
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child::after {
-  content: 'Ctrl';
-  font-size: 12px;
-  letter-spacing: normal;
-  color: var(--docsearch-muted-color);
-}
-
-.mac .DocSearch-Button .DocSearch-Button-Key:first-child::after {
-  content: '\2318';
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child > * {
-  display: none;
-}
-
-.dark .DocSearch-Footer {
-  border-top: 1px solid var(--va-c-divider);
-}
-
-.DocSearch-Form {
-  border: 1px solid var(--va-c-brand);
-  background-color: var(--va-c-white);
+function getRelativePath(url: string) {
+  const { pathname, hash } = new URL(url, location.origin)
+  return pathname.replace(/\.html$/, '') + hash
 }
+</script>
 
-.dark .DocSearch-Form {
-  background-color: var(--va-c-bg-soft-mute);
-}
-</style>
+<template>
+  <div id="press-docsearch" />
+  <div id="press-docsearch-sidepanel" />
+</template>

package/components/PressArticle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useFrontmatter, useSiteStore, useValaxyI18n } from 'valaxy'
+import { formatDate, useFrontmatter, useSiteStore, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
 
 import { useRoute } from 'vue-router'
@@ -10,20 +10,23 @@ const route = useRoute()
 const site = useSiteStore()
 
 function findCurrentIndex() {
-  return site.postList.findIndex(p => p.href === route.path)
+  return site.postList.findIndex(p => p.path === route.path)
 }
 
 const nextPost = computed(() => site.postList[findCurrentIndex() - 1])
 const prevPost = computed(() => site.postList[findCurrentIndex() + 1])
+const posts = computed(() => site.postList.filter(p => p.path && !p.path.endsWith('/')))
 
 const { $tO } = useValaxyI18n()
 const $title = computed(() => $tO(frontmatter.value.title))
+
+const createdDate = computed(() => frontmatter.value.date ? formatDate(frontmatter.value.date) : '')
+const updatedDate = computed(() => frontmatter.value.updated ? formatDate(frontmatter.value.updated) : '')
 </script>
 
 <template>
   <article class="xl:divide-y xl:divide-gray-200 max-w-7xl m-auto" p="x-6" w="full">
-    <header class="pt-20 xl:pb-10 space-y-1 text-center">
-      <PressDate :date="frontmatter.date" />
+    <header class="pt-20 xl:pb-10 text-center">
       <h1
         class="
           text-3xl
@@ -32,10 +35,30 @@ const $title = computed(() => $tO(frontmatter.value.title))
           tracking-tight
           sm:text-4xl sm:leading-10
           md:text-5xl md:leading-14
+          mb-4
         "
       >
         {{ $title }}
       </h1>
+      <div class="flex items-center justify-center gap-4 text-sm text-gray-500">
+        <span v-if="createdDate" class="inline-flex items-center gap-1">
+          <span class="i-ri-calendar-line" />
+          <time :datetime="createdDate">{{ createdDate }}</time>
+        </span>
+        <span v-if="updatedDate && updatedDate !== createdDate" class="inline-flex items-center gap-1">
+          <span class="i-ri-edit-line" />
+          <time :datetime="updatedDate">{{ updatedDate }}</time>
+        </span>
+      </div>
+      <div v-if="frontmatter.tags?.length || frontmatter.categories" class="mt-3 flex items-center justify-center gap-2 flex-wrap text-xs">
+        <RouterLink
+          v-for="tag in (Array.isArray(frontmatter.tags) ? frontmatter.tags : [])" :key="tag"
+          class="px-2 py-0.5 rounded-full bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 no-underline hover:bg-primary/10 hover:text-primary transition-colors"
+          :to="{ path: '/tags/', query: { tag } }"
+        >
+          #{{ tag }}
+        </RouterLink>
+      </div>
     </header>
 
     <div
@@ -63,29 +86,47 @@ const $title = computed(() => $tO(frontmatter.value.title))
           xl:col-start-1 xl:row-start-2 xl:col-span-2
         "
       >
-        <div v-if="nextPost" class="py-8">
+        <div v-if="nextPost && nextPost.path" class="py-8">
           <h2 class="text-xs tracking-wide uppercase text-gray-500">
             Next Article
           </h2>
           <div class="link">
-            <RouterLink :to="nextPost.href">
+            <RouterLink :to="nextPost.path">
               {{ $tO(nextPost.title) }}
             </RouterLink>
           </div>
         </div>
-        <div v-if="prevPost && prevPost.href" class="py-8">
+        <div v-if="prevPost && prevPost.path" class="py-8">
           <h2 class="text-xs tracking-wide uppercase text-gray-500">
             Previous Article
           </h2>
           <div class="link">
-            <RouterLink :to="prevPost.href">
+            <RouterLink :to="prevPost.path">
               {{ $tO(prevPost.title) }}
             </RouterLink>
           </div>
         </div>
+
+        <div v-if="posts.length" class="py-8">
+          <h2 class="text-xs tracking-wide uppercase text-gray-500 mb-4">
+            All Posts
+          </h2>
+          <ul class="space-y-2">
+            <li v-for="post in posts" :key="post.path">
+              <RouterLink
+                class="link block truncate" :class="post.path === route.path ? 'font-bold text-primary' : 'op-50 hover:op-80'"
+                :to="post.path || ''"
+                :title="$tO(post.title)"
+              >
+                {{ $tO(post.title) }}
+              </RouterLink>
+            </li>
+          </ul>
+        </div>
+
         <div class="pt-8">
-          <RouterLink class="link" to="/">
-            ← Back to Home
+          <RouterLink class="link" to="/posts/">
+            ← Back to Posts
           </RouterLink>
         </div>
       </footer>

package/components/PressArticleCard.vue

@@ -10,26 +10,38 @@ const { $tO } = useValaxyI18n()
 </script>
 
 <template>
-  <article class="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
+  <article class="press-article-card space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
     <PressDate :date="post.date" />
     <div class="space-y-5 xl:col-span-3">
       <div class="space-y-6">
         <h2 class="text-2xl leading-8 font-bold tracking-tight">
-          <RouterLink class="text-gray-900" :to="post.path || ''">
+          <RouterLink class="press-article-card-link text-gray-900 dark:text-gray-100 hover:text-primary transition-colors" :to="post.path || ''">
             {{ $tO(post.title) }}
           </RouterLink>
         </h2>
         <div
           v-if="post.excerpt"
-          class="prose dark:prose-invert max-w-none text-gray-500"
-          v-html="post.excerpt"
-        />
+          class="press-article-card-excerpt prose dark:prose-invert max-w-none"
+        >
+          <ValaxyDynamicComponent :template-str="post.excerpt" />
+        </div>
       </div>
       <div class="text-base leading-6 font-medium">
-        <RouterLink class="link" aria-label="read more" :to="post.path || ''">
+        <RouterLink class="press-article-card-link text-primary hover:underline" aria-label="read more" :to="post.path || ''">
           Read more →
         </RouterLink>
       </div>
     </div>
   </article>
 </template>
+
+<style scoped>
+.press-article-card-link {
+  text-decoration: none !important;
+  border-bottom: none !important;
+}
+
+.press-article-card-excerpt :deep(a) {
+  border-bottom: none;
+}
+</style>

package/components/PressDocFooter.vue

@@ -7,7 +7,7 @@ const editLink = useEditLink()
 </script>
 
 <template>
-  <div flex justify="between" text="sm">
+  <div flex justify="between" items="center" text="sm">
     <a flex items="center" class="decoration-none!" :href="editLink.url" target="_blank">
       <div i-ri-external-link-line />
       <span ml-1>{{ editLink.text || t('tooltip.edit_this_page') }}</span>