wip: posts handling -d

.github/workflows/deploy.yml

@@ -163,20 +163,26 @@ jobs:
  - name: Run Type Check
  run: npm run types:ci
 
- - name: ESLint Check
- uses: actions/cache@v4
- id: eslint-cache
+ - name: Restore ESLint cache
+ uses: actions/cache/restore@v4
+ id: eslint-cache-restore
  with:
  path: ~/.eslintcache
- key: ${{ runner.os }}-eslint-${{ hashFiles('**/.eslintrc.*') }}-${{ hashFiles('**/package.json') }}
+ key: ${{ runner.os }}-eslint-${{ github.ref }}
  restore-keys: |
  ${{ runner.os }}-eslint-
 
  - name: Run ESLint
- run: |
- npm run lint:dev
+ run: npm run lint:dev
  continue-on-error: false
 
+ - name: Save ESLint cache
+ uses: actions/cache/save@v4
+ if: always()
+ with:
+ path: ~/.eslintcache
+ key: ${{ runner.os }}-eslint-${{ github.ref }}-${{ github.sha }}
+
  - name: Debug Git Config
  run: |
  git config --list

@fiction/cards/CardTextPost.vue

@@ -47,9 +47,6 @@ function onInput(v: string) {
  const userConfig = getNewUserConfig(v)
  card.value?.syncCard({ caller: 'updatePost', cardConfig: { cardId: card.value?.cardId, userConfig } })
  }
- else {
- console.error('Cannot update post in sourceMode: global')
- }
 }
 
 const value = vue.computed(() => {

@fiction/cards/magazine/ElMagazine.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import type { FictionPosts } from '@fiction/posts'
+import type { IndexMeta } from '@fiction/core'
 
+import type { FictionPosts } from '@fiction/posts'
 import type { Card } from '@fiction/site'
 import type { UserConfig } from './index.js'
 import { unhead, useService, vue } from '@fiction/core'
@@ -19,6 +20,29 @@ const nextPost = vue.shallowRef<Post | undefined>()
 const loading = vue.ref(false)
 const routeSlug = vue.computed(() => card.site?.siteRouter.params.value.itemId as string | undefined)
 
+const indexMeta = vue.ref<IndexMeta>({
+ offset: 0,
+ limit: uc.value.posts?.limit || 10,
+ count: 0,
+ order: 'desc',
+ orderBy: 'dateAt',
+})
+
+function updateIndexMeta(newMeta: IndexMeta) {
+ indexMeta.value = newMeta
+ // Trigger re-fetching of posts with the new offset
+ loadPosts()
+}
+
+async function loadPosts() {
+ if (uc.value.posts?.format === 'local') {
+ await loadLocal()
+ }
+ else {
+ await loadGlobal()
+ }
+}
+
 function getNextPost(args: { single?: Post, posts?: Post[] }) {
  const { single, posts = [] } = args
  if (!single)
@@ -43,7 +67,9 @@ async function loadGlobal() {
  nextPost.value = getNextPost({ single: singlePost.value, posts: posts.value })
  }
  else {
- posts.value = await fictionPosts.getPostIndex({ limit: 5, orgId })
+ const r = await fictionPosts.getPostIndex({ limit: 5, orgId })
+ posts.value = r.posts
+ indexMeta.value = { ...indexMeta.value, ...r.indexMeta }
  }
 
  loading.value = false
@@ -59,24 +85,27 @@ async function loadLocal() {
  singlePost.value = new Post({ ...common, ...p })
  nextPost.value = getNextPost({ single: singlePost.value, posts: ps.map(p => new Post({ ...common, ...p })) })
  }
-}
-
-async function load() {
- if (uc.value.posts?.format === 'local') {
- await loadLocal()
- }
  else {
- await loadGlobal()
+ const { offset = 0, limit = 10 } = indexMeta.value
+ const start = offset
+ const end = offset + limit
+ posts.value = ps.slice(start, end).map((p, i) => new Post({ ...common, ...p, localSourcePath: `posts.posts.${i + start}` }))
+ indexMeta.value = {
+ ...indexMeta.value,
+ count: ps.length,
+ offset,
+ limit,
+ }
  }
 }
 
 vue.onServerPrefetch(async () => {
- await load()
+ await loadPosts()
 })
 
 vue.onMounted(async () => {
  vue.watch(() => [routeSlug.value, uc.value.posts?.format], async () => {
- await load()
+ await loadPosts()
  }, { immediate: true })
 })
 
@@ -117,7 +146,14 @@ if (routeSlug.value) {
  :post="singlePost"
  :next-post="nextPost"
  />
- <ElMagazineIndex v-else :card="card" :loading="loading" :posts="posts" />
+ <ElMagazineIndex
+ v-else
+ :card="card"
+ :loading="loading"
+ :posts="posts"
+ :index-meta="{}"
+ @update:index-meta="updateIndexMeta"
+ />
  </transition>
  </div>
 </template>

@fiction/cards/magazine/ElMagazineIndex.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import type { FictionPosts, Post, TablePostConfig } from '@fiction/posts'
+import type { IndexMeta } from '@fiction/core'
+import type { Post } from '@fiction/posts'
 import type { Card } from '@fiction/site'
 import type { UserConfig } from '.'
-import { type IndexItem, useService, vue } from '@fiction/core'
-import { postLink, taxonomyLink } from '@fiction/posts'
+import { vue } from '@fiction/core'
+import { taxonomyLink } from '@fiction/posts'
+import XButton from '@fiction/ui/buttons/XButton.vue'
 import EffectGlare from '@fiction/ui/effect/EffectGlare.vue'
 import XMedia from '@fiction/ui/media/XMedia.vue'
 import El404 from '@fiction/ui/page/El404.vue'
@@ -12,18 +14,38 @@ import CardTextPost from '../CardTextPost.vue'
 import CardLink from '../el/CardLink.vue'
 import ElAuthor from './ElAuthor.vue'
 
-const { card, posts, loading } = defineProps<{ card: Card<UserConfig>, posts: Post[], loading: boolean }>()
+const { card, posts, loading, indexMeta } = defineProps<{
+ card: Card<UserConfig>
+ posts: Post[]
+ loading: boolean
+ indexMeta: IndexMeta
+}>()
+
+const emit = defineEmits<{
+ (e: 'update:indexMeta', value: IndexMeta): void
+}>()
+
+const totalPages = vue.computed(() => Math.ceil((indexMeta.count || 0) / (indexMeta.limit || 10)))
+const currentPage = vue.computed(() => Math.floor((indexMeta.offset || 0) / (indexMeta.limit || 10)) + 1)
 
 function getItemClasses(index: number): string {
  const out = []
 
  if (index === 0)
- out.push('col-span-1 lg:col-span-2 row-span-2 rounded-lg ')
+ out.push('col-span-1 lg:col-span-2 row-span-2 rounded-lg')
  else
  out.push('col-span-1 row-span-1 aspect-[4/3]')
 
  return out.join(' ')
 }
+
+function changePage(newPage: number) {
+ if (newPage < 1 || newPage > totalPages.value)
+ return
+
+ const newOffset = (newPage - 1) * (indexMeta.limit || 10)
+ emit('update:indexMeta', { ...indexMeta, offset: newOffset })
+}
 </script>
 
 <template>
@@ -34,7 +56,7 @@ function getItemClasses(index: number): string {
  <CardLink
  v-for="(post, i) in posts"
  :key="post.slug.value"
- :card
+ :card="card"
  :href="post.href.value"
  :class="[getItemClasses(i)]"
  >
@@ -45,7 +67,7 @@ function getItemClasses(index: number): string {
  <CardButton
  v-for="(cat, ii) in post.categories.value?.slice(0, 2)"
  :key="ii"
- :card
+ :card="card"
  theme="overlay"
  rounding="full"
  size="xs"
@@ -65,7 +87,7 @@ function getItemClasses(index: number): string {
  <CardButton
  v-for="(cat, ii) in post.categories.value?.slice(0, 2)"
  :key="ii"
- :card
+ :card="card"
  :text="cat.title"
  size="xs"
  :href="taxonomyLink({ card, taxonomy: 'category', term: cat.slug })"
@@ -76,6 +98,25 @@ function getItemClasses(index: number): string {
  </CardLink>
  </div>
  <El404 v-else super-heading="Index" heading="No Posts Found" sub-heading="Nothing to show here." :actions="[{ name: 'Go to Home', href: '/' }]" />
+
+ <!-- Pagination -->
+ <div v-if="totalPages > 1" class="mt-10 flex justify-center items-center space-x-4">
+ <XButton
+ :disabled="currentPage === 1"
+ size="sm"
+ @click="changePage(currentPage - 1)"
+ >
+ Previous
+ </XButton>
+ <span>Page {{ currentPage }} of {{ totalPages }}</span>
+ <XButton
+ :disabled="currentPage === totalPages"
+ size="sm"
+ @click="changePage(currentPage + 1)"
+ >
+ Next
+ </XButton>
+ </div>
  </div>
 </template>
 

@fiction/posts/index.ts

@@ -112,6 +112,8 @@ export class FictionPosts extends FictionPlugin<FictionPostsSettings> {
 
  const r = await this.requests.ManagePostIndex.request({ _action: 'list', orgId, limit, offset })
 
- return r.data?.length ? r.data.map(p => new Post({ fictionPosts: this, sourceMode: 'global', ...p })) : []
+ const posts = r.data?.length ? r.data.map(p => new Post({ fictionPosts: this, sourceMode: 'global', ...p })) : []
+
+ return { posts, indexMeta: r.indexMeta }
  }
 }

@fiction/posts/post.ts

@@ -81,6 +81,10 @@ export class Post extends FictionObject<PostConfig> {
  }
 
  autosave() {
+ if (this.settings.sourceMode === 'local') {
+ return
+ }
+
  this.isDirty.value = true
  this.clearAutosave()