@giancarlosgza/blog-layer 0.0.0-stage → 0.1.1

package/app/blog-pages/archive.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import type { IPostListResponse } from '#blog/shared/types/api'
+import { NuxtLink } from '#components'
+
+/** Head */
+const route = useRoute()
+const { blogPath, blogUrl } = useBlogPath()
+definePageMeta({
+  pageTitle: 'All articles'
+})
+
+// Page 1 is the blog home
+const raw = computed(() => route.params.page?.toString() || '')
+const page = computed(() => (/^\d+$/.test(raw.value) ? Number.parseInt(raw.value, 10) : Number.NaN))
+
+if (Number.isNaN(page.value) || page.value < 1)
+  throw createError({ statusCode: 404, statusMessage: 'Page not found' })
+if (page.value === 1)
+  await navigateTo(blogPath(), { redirectCode: 301 })
+
+/** Composables */
+const { brand } = useBlogBrand()
+const { data, pending, error, ready } = useCachedResource<IPostListResponse>(
+  `posts-page-${page.value}`,
+  () => $fetch<IPostListResponse>('/api/blog/posts', { query: { page: page.value } })
+)
+await ready
+
+// Pages past the last one are 404s
+if (page.value >= 2 && !data.value?.posts.length)
+  throw resourceError(data.value ? null : error.value, 'Page not found')
+
+const posts = computed(() => data.value?.posts ?? [])
+const hasNext = computed(() => data.value?.hasMore ?? false)
+
+/** Links */
+const prevPath = computed(() => blogPath(page.value <= 2 ? '/' : `/page/${page.value - 1}`))
+const nextPath = computed(() => blogPath(`/page/${page.value + 1}`))
+const pageUrl = computed(() => blogUrl(`/page/${page.value}`))
+const prevUrl = computed(() => blogUrl(page.value <= 2 ? '/' : `/page/${page.value - 1}`))
+
+/** SEO */
+const seoTitle = computed(() => `All articles — Page ${page.value}`)
+const seoDescription = computed(() => `${brand.archive.description || `More articles from ${brand.shortName}`} — page ${page.value}.`)
+
+defineOgImage('BlogPost', {
+  kind: 'Blog',
+  title: 'All articles',
+  description: computed(() => seoDescription.value)
+}, {
+  alt: computed(() => `${seoTitle.value}. ${seoDescription.value}`)
+})
+
+useHead(() => ({
+  link: [
+    { rel: 'canonical' as const, href: pageUrl.value },
+    { rel: 'prev' as const, href: prevUrl.value },
+    ...(hasNext.value ? [{ rel: 'next' as const, href: blogUrl(`/page/${page.value + 1}`) }] : [])
+  ]
+}))
+useSeoMeta({
+  title: () => seoTitle.value,
+  description: () => seoDescription.value,
+  ogTitle: () => seoTitle.value,
+  ogDescription: () => seoDescription.value,
+  ogUrl: pageUrl,
+  ogSiteName: brand.name,
+  ogType: 'website',
+  twitterTitle: () => seoTitle.value,
+  twitterDescription: () => seoDescription.value,
+  twitterCard: 'summary_large_image',
+  robots: 'index,follow'
+})
+</script>
+
+<template>
+  <div class="container my-5">
+    <!-- Header -->
+    <LayoutHubHeader
+      title="All articles"
+      title-id="archive-heading"
+      :description="`Page ${page}`"
+      :breadcrumbs="[
+        { label: 'Home', to: blogPath() },
+        { label: `Page ${page}` },
+      ]"
+    />
+
+    <!-- Grid -->
+    <section
+      class="mt-section mt-section-md"
+      aria-labelledby="archive-heading"
+    >
+      <BlogPostList
+        :posts="posts"
+        :pending="pending"
+        empty-title="No articles on this page"
+      />
+    </section>
+
+    <!-- Pagination -->
+    <nav
+      class="d-flex justify-content-between align-items-center gap-3 mt-8"
+      aria-label="Pagination"
+    >
+      <UiButton
+        :as="NuxtLink"
+        :to="prevPath"
+        rel="prev"
+        variant="tonal"
+        color="neutral"
+        text="Newer articles"
+        class="btn-cta"
+      >
+        <template #icon>
+          <UiIconMaterial icon-code="&#xe5c4;" />
+        </template>
+      </UiButton>
+      <UiButton
+        v-if="hasNext"
+        :as="NuxtLink"
+        :to="nextPath"
+        rel="next"
+        variant="tonal"
+        color="primary"
+        text="Older articles"
+        class="btn-cta"
+        icon-trailing
+      >
+        <template #icon>
+          <UiIconMaterial icon-code="&#xe5c8;" />
+        </template>
+      </UiButton>
+    </nav>
+  </div>
+</template>

package/app/blog-pages/author.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { IAuthor } from '#blog/shared/models/author'
+import type { IAuthorPageResponse } from '#blog/shared/types/api'
+
+/** Head */
+const route = useRoute()
+const { blogPath, blogUrl } = useBlogPath()
+definePageMeta({
+  pageTitle: 'Author'
+})
+
+/** Constants */
+const slug = computed(() => route.params.slug?.toString() || '')
+
+/** Composables */
+const { brand } = useBlogBrand()
+
+/** Fetch */
+const { data, posts, pending, hasMore, loadMore, error, ready } = usePaginatedPosts<IAuthorPageResponse>(
+  `posts-author-${slug.value}`,
+  `/api/blog/authors/${encodeURIComponent(slug.value)}`
+)
+await ready
+
+if (!data.value)
+  throw resourceError(error.value, 'Author not found')
+
+const author = computed<IAuthor>(() => data.value?.author ?? { name: '' })
+
+/** SEO */
+const authorName = computed(() => author.value?.name || 'Author')
+const seoDescription = computed(() => author.value?.description || `Articles by ${authorName.value} on ${brand.shortName}.`)
+const canonicalUrl = computed(() => blogUrl(`/authors/${slug.value}`))
+
+defineOgImage('BlogPost', {
+  kind: 'Author',
+  title: computed(() => authorName.value),
+  description: computed(() => seoDescription.value)
+}, {
+  alt: computed(() => `${authorName.value}. ${seoDescription.value}`)
+})
+
+useHead(() => ({
+  link: [{ rel: 'canonical', href: canonicalUrl.value }]
+}))
+useSeoMeta({
+  title: () => authorName.value,
+  description: () => seoDescription.value,
+  ogTitle: () => authorName.value,
+  ogDescription: () => seoDescription.value,
+  ogUrl: canonicalUrl,
+  ogSiteName: brand.name,
+  ogType: 'profile',
+  twitterTitle: () => authorName.value,
+  twitterDescription: () => seoDescription.value,
+  twitterCard: 'summary_large_image',
+  robots: 'index,follow'
+})
+</script>
+
+<template>
+  <div class="container my-5">
+    <!-- Header -->
+    <LayoutHubHeader
+      :title="authorName"
+      title-id="author-heading"
+      :description="author.description"
+      :breadcrumbs="[
+        { label: 'Home', to: blogPath() },
+        { label: authorName },
+      ]"
+    >
+      <!-- Author -->
+      <div
+        v-if="author.photoURL || author.profileLink"
+        class="d-flex align-items-center gap-3 mt-4"
+      >
+        <UiAvatar
+          v-if="author.photoURL"
+          :src="author.photoURL"
+          :alt="`${authorName} photo`"
+          size="sm"
+          mask-shape="cookie-12"
+          mask-stretch
+          class="flex-shrink-0"
+        />
+        <NuxtLink
+          v-if="author.profileLink"
+          :to="author.profileLink"
+          target="_blank"
+          rel="noopener noreferrer"
+          :title="`${authorName} profile`"
+          class="subtitle-1"
+        >
+          {{ author.username || authorName }}
+        </NuxtLink>
+      </div>
+    </LayoutHubHeader>
+
+    <!-- Grid -->
+    <section
+      class="mt-section mt-section-md"
+      aria-labelledby="author-heading"
+    >
+      <BlogPostList
+        :posts="posts"
+        :pending="pending"
+        paginated
+        :has-more="hasMore"
+        :empty-title="`No articles by ${authorName} yet`"
+        @load-more="loadMore"
+      />
+    </section>
+  </div>
+</template>

package/app/blog-pages/home.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type { IChipOption } from '@colorffy/ui'
+
+/** Head */
+const { blogPath, blogUrl } = useBlogPath()
+definePageMeta({
+  pageTitle: 'Blog'
+})
+
+/** Composables */
+const { brand, blogName, blogDescription } = useBlogBrand()
+const {
+  tags,
+  pending,
+  selectedTag,
+  hasMore,
+  featuredPost,
+  secondaryFeaturedPosts,
+  gridPosts,
+  loadMore,
+  error: feedError,
+  ready
+} = usePostFeed()
+await ready
+
+if (import.meta.server && feedError.value)
+  throw createError({ statusCode: 503, statusMessage: 'Temporarily unavailable' })
+
+/** Constants */
+const pageTitle = brand.home.title
+const ogTitle = `${brand.name} | ${pageTitle}`
+
+const ogDescription = brand.home.ogDescription || brand.description
+
+/** Computed */
+const seoTitle = blogName
+const seoDescription = blogDescription
+const tagOptions = computed((): IChipOption[] =>
+  (tags.value ?? []).map(tag => ({ id: tag.name, text: tag.name }))
+)
+const articlesHeading = computed(() => (selectedTag.value ? `Tagged ${selectedTag.value}` : 'Latest articles'))
+
+/** Methods */
+function onTagFilter(value: string | string[] | null): void {
+  const tag = Array.isArray(value) ? value[0] : value
+  selectedTag.value = tag || null
+}
+
+/** SEO */
+defineOgImage('BlogPost', {
+  kind: 'Blog',
+  title: brand.name,
+  description: ogDescription
+}, {
+  alt: [brand.name, ogDescription].filter(Boolean).join('. ')
+})
+
+useHead(() => ({
+  link: [{ rel: 'canonical', href: blogUrl() }]
+}))
+useSeoMeta({
+  title: pageTitle,
+  description: () => seoDescription.value,
+  ogTitle,
+  ogDescription: () => seoDescription.value,
+  ogUrl: blogUrl(),
+  ogSiteName: brand.name,
+  ogType: 'website',
+  twitterTitle: ogTitle,
+  twitterDescription: () => seoDescription.value,
+  twitterCard: 'summary_large_image',
+  robots: () => (selectedTag.value ? 'noindex, follow' : 'index, follow')
+})
+</script>
+
+<template>
+  <div class="container my-5">
+    <!-- Header -->
+    <header class="section-hero text-center">
+      <p
+        v-if="brand.home.eyebrow"
+        class="fs-xs fw-500 text-uppercase text-muted mb-3"
+      >
+        {{ brand.home.eyebrow }}
+      </p>
+      <h1 class="display-1 mb-0">
+        {{ seoTitle }}
+        <span v-if="brand.home.headingAccent">
+          {{ brand.home.headingAccent }}
+        </span>
+      </h1>
+      <p class="section-hero-lead subtitle-1 lh-md text-muted mt-4 mb-0">
+        {{ seoDescription }}
+      </p>
+    </header>
+
+    <!-- Featured -->
+    <section
+      v-if="featuredPost"
+      class="d-grid gap-5 mt-section mt-section-xl"
+      :aria-label="secondaryFeaturedPosts.length ? 'Featured articles' : 'Featured article'"
+    >
+      <BlogPostCard
+        :post="featuredPost"
+        featured
+      />
+      <div
+        v-if="secondaryFeaturedPosts.length"
+        class="blog-post-grid d-grid grid-repeat-cols-1 grid-repeat-cols-md-2 gap-inline-8 gap-block-10"
+      >
+        <BlogPostCard
+          v-for="post in secondaryFeaturedPosts"
+          :key="post.id"
+          :post="post"
+          badge="Featured"
+          badge-icon="&#xf525;"
+        />
+      </div>
+    </section>
+
+    <!-- Articles -->
+    <section
+      class="mt-section mt-section-xl"
+      aria-labelledby="home-articles-heading"
+    >
+      <div class="d-grid gap-3 mb-4">
+        <UiHeaderContent
+          id="home-articles-heading"
+          as="h2"
+          size="lg"
+          class="mb-0"
+          :title="articlesHeading"
+        />
+        <UiChipGroup
+          v-if="tagOptions.length"
+          variant="outline"
+          color="secondary"
+          :options="tagOptions"
+          :model-value="selectedTag"
+          aria-label="Filter articles by tag"
+          custom-class="post-filter-chips"
+          @update:model-value="onTagFilter"
+        />
+      </div>
+
+      <BlogPostList
+        :posts="gridPosts"
+        :pending="pending"
+        :has-more="hasMore"
+        :next-href="selectedTag ? undefined : blogPath('/page/2')"
+        paginated
+        heading-tag="h3"
+        :empty-title="selectedTag ? `No articles tagged “${selectedTag}” yet` : 'No articles published yet'"
+        :empty-subtitle="selectedTag ? 'Try another tag or browse every article.' : 'Check back soon for new articles.'"
+        @load-more="loadMore"
+      >
+        <template
+          v-if="selectedTag"
+          #empty-action
+        >
+          <UiButtonGroup class="justify-content-center">
+            <UiButton
+              variant="tonal"
+              color="primary"
+              text="Show all articles"
+              class="btn-cta"
+              @click="selectedTag = null"
+            >
+              <template #icon>
+                <UiIconMaterial icon-code="&#xe5c4;" />
+              </template>
+            </UiButton>
+          </UiButtonGroup>
+        </template>
+      </BlogPostList>
+    </section>
+  </div>
+</template>

package/app/blog-pages/post.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+/** Head */
+const route = useRoute()
+const siteUrl = useSiteUrl()
+const { basePath, blogPath, blogUrl } = useBlogPath()
+definePageMeta({
+  pageTitle: 'Article'
+})
+
+/** Composables */
+const { normalizeDateValue, formatDateValue } = useDateValue()
+const { brand } = useBlogBrand()
+
+/** Constants */
+const slug = computed(() => route.params.slug?.toString() || '')
+
+useState<string | null>('activePost', () => null).value = slug.value
+
+/** Fetch */
+const { data, error, ready } = useBlogPost(slug.value)
+await ready
+
+if (!data.value)
+  throw resourceError(error.value, 'Post not found')
+
+/** Computed */
+const post = computed(() => data.value?.post ?? null)
+const author = computed(() => data.value?.author ?? null)
+const title = computed(() => post.value?.title || 'Article')
+const contents = computed(() => data.value?.contents ?? '')
+const headings = computed(() => data.value?.headings ?? [])
+const readingTime = computed(() => data.value?.readingTime)
+const authorName = computed(() =>
+  author.value?.name || (post.value ? resolveAuthorName(post.value, brand.defaultAuthor) : brand.defaultAuthor)
+)
+const publishedLabel = computed(() => formatDateValue(post.value?.createdAt))
+const tags = computed(() => post.value?.tags ?? [])
+const color = computed(() => post.value?.color || '')
+const relatedPosts = computed(() => data.value?.related ?? [])
+const olderPost = computed(() => data.value?.older ?? null)
+const newerPost = computed(() => data.value?.newer ?? null)
+const series = computed(() => data.value?.series ?? null)
+
+/** SEO */
+const authorUrl = computed(() => (author.value?.slug ? blogUrl(`/authors/${author.value.slug}`) : ''))
+const publishedTime = computed(() => {
+  const published = normalizeDateValue(post.value?.createdAt)
+  return published ? new Date(published).toISOString() : undefined
+})
+const modifiedTime = computed(() => {
+  const modified = normalizeDateValue(post.value?.updatedAt || post.value?.createdAt)
+  return modified ? new Date(modified).toISOString() : undefined
+})
+const seoSource = computed(() => ({ ...(post.value ?? { title: '' }), slug: slug.value }))
+const seoOptions = computed(() => ({ siteUrl, basePath, bodyExcerpt: data.value?.excerpt ?? '' }))
+const baseSeo = computed(() => resolvePostSeo(seoSource.value, seoOptions.value))
+const needsGeneratedImage = !post.value?.ogImageURL && !post.value?.imageURL
+const ogImages = needsGeneratedImage
+  ? defineOgImage('BlogPost', {
+      kind: 'Article',
+      title: computed(() => baseSeo.value.title),
+      description: computed(() => baseSeo.value.description),
+      author: computed(() => authorName.value),
+      date: computed(() => publishedLabel.value),
+      accentColor: computed(() => color.value)
+    }, {
+      alt: computed(() => `${baseSeo.value.title}. ${baseSeo.value.description}`)
+    })
+  : []
+const seo = computed(() => resolvePostSeo(seoSource.value, { ...seoOptions.value, generatedImage: ogImages[0] }))
+const seoTitle = computed(() => seo.value.title)
+const description = computed(() => seo.value.description || `${brand.shortName} article.`)
+const socialImage = computed(() => seo.value.image || `${siteUrl}/pwa-512x512.png`)
+const canonicalUrl = computed(() => seo.value.canonical)
+
+const jsonLd = computed(() => {
+  if (!post.value)
+    return null
+
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    'headline': seoTitle.value,
+    'description': description.value,
+    'image': socialImage.value,
+    'datePublished': publishedTime.value,
+    'dateModified': modifiedTime.value,
+    'author': {
+      '@type': 'Person',
+      'name': authorName.value,
+      ...(authorUrl.value ? { url: authorUrl.value } : {})
+    },
+    'publisher': { '@id': `${siteUrl}/#organization` },
+    'url': canonicalUrl.value,
+    'mainEntityOfPage': { '@type': 'WebPage', '@id': canonicalUrl.value },
+    ...(series.value
+      ? { isPartOf: { '@type': 'CreativeWorkSeries', 'name': series.value.name, 'url': blogUrl(`/series/${encodeURIComponent(series.value.slug)}`) } }
+      : {})
+  }
+})
+
+useHead(() => ({
+  link: [{ rel: 'canonical' as const, href: canonicalUrl.value }],
+  script: [
+    ...(jsonLd.value ? [{ type: 'application/ld+json' as const, innerHTML: JSON.stringify(jsonLd.value) }] : [])
+  ]
+}))
+useSeoMeta({
+  title: () => seoTitle.value,
+  description: () => description.value,
+  ogTitle: () => seoTitle.value,
+  ogDescription: () => description.value,
+  ogUrl: canonicalUrl,
+  ogSiteName: brand.name,
+  ogType: 'article',
+  ogImage: () => socialImage.value,
+  ogImageAlt: () => seo.value.imageAlt,
+  articlePublishedTime: () => publishedTime.value,
+  articleModifiedTime: () => modifiedTime.value,
+  articleAuthor: () => [authorUrl.value || authorName.value],
+  articleTag: () => tags.value,
+  twitterTitle: () => seoTitle.value,
+  twitterDescription: () => description.value,
+  twitterImage: () => socialImage.value,
+  twitterImageAlt: () => seo.value.imageAlt,
+  twitterCard: 'summary_large_image',
+  robots: () => seo.value.robots
+})
+</script>
+
+<template>
+  <div class="container my-5">
+    <!-- Breadcrumb -->
+    <div class="post-article-grid mb-4">
+      <UiBreadcrumb
+        :as="NuxtLink"
+        :base-url="siteUrl"
+        separator-icon="&#xe5cc;"
+        :items="[
+          { label: 'Home', to: blogPath() },
+          { label: title },
+        ]"
+      />
+    </div>
+
+    <!-- Article -->
+    <BlogPostArticle
+      v-if="post"
+      :post="post"
+      :author="author"
+      :contents="contents"
+      :headings="headings"
+      :reading-time="readingTime"
+      :related="relatedPosts"
+      :older="olderPost"
+      :newer="newerPost"
+      :series="series"
+    />
+
+    <div
+      class="gradient-blob"
+      :style="{ '--color': color }"
+      aria-hidden="true"
+    />
+  </div>
+</template>