andrewwallacespeckle
083531e5c9
* Initial work * fallback image * Update api name * Add read time * Filter out newly updated stories * Update webflow.ts * Add NuxtImg * Update webflow.ts * Update Card.vue * Rename to Webflow Items * Helm changes * Rename webflow to blog * useAsyncData * Throw error if no API
32 lines
851 B
Vue
32 lines
851 B
Vue
<template>
|
|
<section v-if="!error">
|
|
<h2 class="text-heading-sm text-foreground-2 mb-4">Blog</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
<DashboardBlogCard
|
|
v-for="webflowItem in webflowItems"
|
|
:key="webflowItem.id"
|
|
:webflow-item="webflowItem"
|
|
/>
|
|
</div>
|
|
</section>
|
|
<section v-else />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { WebflowItem } from '~/lib/dashboard/helpers/types'
|
|
|
|
const logger = useLogger()
|
|
|
|
const { data: webflowData, error } = await useAsyncData<{
|
|
items: WebflowItem[]
|
|
}>('webflow-items', () =>
|
|
$fetch('/api/webflow', {
|
|
onResponseError({ response }) {
|
|
logger.error('API Response Error:', response.status, response.statusText)
|
|
}
|
|
})
|
|
)
|
|
|
|
const webflowItems = computed(() => webflowData.value?.items || [])
|
|
</script>
|