fix: fix recommend article + article body layout

packages/karbon/package.json

@@ -223,4 +223,4 @@
     "access": "public"
   },
   "gitHead": "8df1f4d5837a7e2ddbff6cc79f5fec256c34a394"
-}
+}

packages/karbon/src/runtime/article/components/ArticleBody.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useAsyncState, useElementBounding, whenever } from '@vueuse/core'
+import { useAsyncState, whenever } from '@vueuse/core'
 import { AdvertisingSlot } from '@storipress/vue-advertising'
 import { useArticle, useOptionalArticle } from '../utils'
 import { decryptPaidContent, processingArticles } from '../utils/inject-paid-content'
@@ -8,22 +8,23 @@ import { CUSTOM_FIELD_EDITOR_BLOCK_KEY } from '../../constants'
 import type { AdSegment, NormalSegment, Segment } from '../../lib/split-article'
 import type { ViewableApiResult } from '../../composables/viewable'
 import { ArticlePlan } from '../../types'
-
-// @ts-expect-error virtual file
 import { verboseInvariant } from '../../utils/verbose-invariant'
-import { editorBlocks } from '#build/editor-blocks.mjs'
 import {
   computed,
   nextTick,
   onMounted,
   ref,
+  useArticleBodyStyle,
   useDecryptClient,
   useEmbed,
   useNuxtApp,
   watch,
   watchEffect,
 } from '#imports'
 
+// @ts-expect-error virtual file
+import { editorBlocks } from '#build/editor-blocks.mjs'
+
 const { $paywall } = useNuxtApp()
 const { loadAll: fixArticleEmbed } = useEmbed()
 
@@ -65,7 +66,7 @@ watch(
   },
 )
 
-const { left, width } = useElementBounding(root)
+const style = useArticleBodyStyle(root)
 const { render } = useRenderEditorBlock(editorBlocks)
 const customFieldsKey = CUSTOM_FIELD_EDITOR_BLOCK_KEY
 // @ts-expect-error internal untyped property
@@ -134,7 +135,7 @@ whenever(
 </script>
 
 <template>
-  <div ref="root" class="article-body" :style="{ '--left-offset': `${left}px`, '--body-width': `${width}px` }">
+  <div ref="root" class="article-body" :style="style">
     <div
       v-for="(segment, index) of wrapArticleSegments"
       :key="`${segment.id}-${index}`"

packages/karbon/src/runtime/article/utils/index.ts

@@ -70,9 +70,10 @@ export function useRecommendArticle(article: Article, options: RecommendArticleO
     async () => {
       const relevancesArticles = await getRelevancesArticles(article, options)
       const alreadyRecommend = new Set<string>(relevancesArticles.map(({ id }) => id))
-      const extraArticles = fillArticles.value
-        .filter(({ id }) => !alreadyRecommend.has(id))
-        .map((article) => enhanceArticleWithURL(article))
+      const extraArticles =
+        fillArticles.value
+          ?.filter(({ id }) => !alreadyRecommend.has(id))
+          .map((article) => enhanceArticleWithURL(article)) ?? []
 
       const recommendArticles = [...relevancesArticles, ...extraArticles]
 

packages/karbon/src/runtime/composables/article-body-style.ts

@@ -0,0 +1,12 @@
+import type { MaybeElementRef } from '@vueuse/core'
+import { useElementBounding, useElementSize } from '@vueuse/core'
+import { computed, markRaw } from 'vue'
+
+export function useArticleBodyStyle(root: MaybeElementRef) {
+  const { left } = useElementBounding(root)
+  // mark document.body as raw to prevent third-party libraries from modifying it
+  const { width } = useElementSize(() => (typeof window !== 'undefined' ? markRaw(document.body) : null))
+
+  const bodyWidth = computed(() => (width.value ? '100vw' : `${width}px`))
+  return computed(() => ({ '--left-offset': `${left.value ?? 0}px`, '--body-width': bodyWidth.value }))
+}

packages/playground/pages/examples/[slug].vue

@@ -4,8 +4,8 @@ import type { Article } from 'sdk/runtime/composables/front-page'
 const route = useRoute()
 async function* GenSource() {
   const allArticles = await getAllArticles()
-  const currentArticleIndex = allArticles.findIndex(({ id }) => id === (route.params.slug as string))
-  const articles = allArticles.slice(currentArticleIndex < 0 ? 0 : currentArticleIndex)
+  const currentArticleIndex = allArticles.data.value.findIndex(({ id }) => id === (route.params.slug as string))
+  const articles = allArticles.data.value.slice(currentArticleIndex < 0 ? 0 : currentArticleIndex)
 
   for (const article of articles) {
     yield article
@@ -24,7 +24,7 @@ const searchInput = ref('')
 <template>
   <div>
     <div><NuxtLink to="/">To home</NuxtLink></div>
-    <StoripressSearch v-slot="props" v-model="searchInput" :query-by="queryBy">
+    <StoripressSearch v-slot="props" v-model="searchInput" lazy :query-by="queryBy">
       <div>
         <label>Just typing...</label>
         <input v-model="searchInput" placeholder="search" />

packages/playground/templates/article-layouts/testLayout.vue

@@ -55,6 +55,17 @@ const gptConfig = {
         >
       </li>
     </ul>
+    <div class="my-12 mx-auto max-w-full">
+      <h2 class="mb-4">Related Articles</h2>
+      <div class="mb-5 mt-[0.313rem] grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-5">
+        <ArticleCard v-for="article in recommendArticles" :key="article.id" :article="article">
+          <div class="relative px-[0.9rem] pt-[2.7rem] pb-[2.2rem] text-[#333]">
+            <h2 class="text-center leading-[1.2]">{{ article.title }}</h2>
+            <p class="mb-[0.8rem] text-center text-[0.813rem] font-light leading-8"></p>
+          </div>
+        </ArticleCard>
+      </div>
+    </div>
   </div>
 </template>