@giancarlosgza/blog-layer 0.0.0-stage → 0.1.0

package/app/blog-pages/series.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { ISeriesPageResponse } from '#blog/shared/types/api'
+import { NuxtLink } from '#components'
+
+/** Head */
+const route = useRoute()
+const { blogPath, blogUrl } = useBlogPath()
+definePageMeta({
+  pageTitle: 'Series'
+})
+
+/** Constants */
+const slug = computed(() => route.params.slug?.toString() || '')
+
+/** Composables */
+const { brand } = useBlogBrand()
+
+/** Fetch */
+const { data, error, ready } = useCachedResource<ISeriesPageResponse>(
+  `blog-series-${slug.value}`,
+  () => $fetch<ISeriesPageResponse>(`/api/blog/series/${encodeURIComponent(slug.value)}`)
+)
+await ready
+
+if (!data.value)
+  throw resourceError(error.value, 'Series not found')
+
+/** Computed */
+const posts = computed(() => data.value?.posts ?? [])
+const seriesName = computed(() => data.value?.series.name || 'Series')
+const partsLabel = computed(() => `${posts.value.length} ${posts.value.length === 1 ? 'part' : 'parts'}`)
+
+/** SEO */
+const seoTitle = computed(() => `${seriesName.value} series`)
+const seoDescription = computed(() =>
+  data.value?.series.description || `Read the ${seriesName.value} series on the ${brand.shortName}, ${partsLabel.value} in order.`
+
+)
+const canonicalUrl = computed(() => blogUrl(`/series/${encodeURIComponent(slug.value)}`))
+defineOgImage('BlogPost', {
+  kind: 'Series',
+  title: computed(() => seriesName.value),
+  description: computed(() => seoDescription.value)
+}, {
+  alt: computed(() => `${seoTitle.value}. ${seoDescription.value}`)
+})
+
+useHead(() => ({
+  link: [{ rel: 'canonical', href: canonicalUrl.value }]
+}))
+useSeoMeta({
+  title: () => seoTitle.value,
+  description: () => seoDescription.value,
+  ogTitle: () => seoTitle.value,
+  ogDescription: () => seoDescription.value,
+  ogUrl: canonicalUrl,
+  ogSiteName: brand.name,
+  ogType: 'website',
+  twitterTitle: () => seoTitle.value,
+  twitterDescription: () => seoDescription.value,
+  twitterCard: 'summary_large_image',
+  robots: () => (posts.value.length ? 'index,follow' : 'noindex,follow')
+})
+</script>
+
+<template>
+  <div class="container my-5">
+    <!-- Header -->
+    <LayoutHubHeader
+      :title="seriesName"
+      title-id="series-heading"
+      :description="data?.series.description"
+      :breadcrumbs="[
+        { label: 'Home', to: blogPath() },
+        { label: 'Series' },
+        { label: seriesName },
+      ]"
+    >
+      <p class="caption font-code text-uppercase text-muted mt-4 mb-0">
+        Series · {{ partsLabel }}
+      </p>
+    </LayoutHubHeader>
+
+    <!-- Parts -->
+    <section
+      class="mt-section mt-section-md"
+      aria-labelledby="series-heading"
+    >
+      <div
+        v-if="posts.length"
+        class="blog-post-grid d-grid grid-repeat-cols-1 grid-repeat-cols-md-2 grid-repeat-cols-xl-3 gap-inline-8 gap-block-10"
+      >
+        <BlogPostCard
+          v-for="(post, index) in posts"
+          :key="post.id"
+          :post="post"
+          :badge="`Part ${index + 1}`"
+          :show-series="false"
+        />
+      </div>
+
+      <UiEmpty
+        v-else
+        title="No parts published yet"
+        subtitle="Check back soon for the first part of this series."
+        custom-class="my-5 my-md-8"
+      >
+        <template #action>
+          <UiButtonGroup class="justify-content-center">
+            <UiButton
+              :as="NuxtLink"
+              :to="blogPath()"
+              variant="tonal"
+              color="primary"
+              text="Back to home"
+              class="btn-cta"
+            >
+              <template #icon>
+                <UiIconMaterial icon-code="&#xe5c4;" />
+              </template>
+            </UiButton>
+          </UiButtonGroup>
+        </template>
+      </UiEmpty>
+    </section>
+  </div>
+</template>

package/app/blog-pages/tag.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { ITagPageResponse } from '#blog/shared/types/api'
+
+/** Head */
+const route = useRoute()
+const { blogPath, blogUrl } = useBlogPath()
+definePageMeta({
+  pageTitle: 'Tag'
+})
+
+/** Constants */
+const tag = computed(() => safeDecode(route.params.tag?.toString() || ''))
+
+// Malformed escapes (e.g. a bare `%`) keep the raw value instead of a 500
+function safeDecode(value: string): string {
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return value
+  }
+}
+
+/** Composables */
+const { brand } = useBlogBrand()
+
+/** Fetch */
+const { data, posts, pending, hasMore, loadMore, error, ready } = usePaginatedPosts<ITagPageResponse>(
+  `posts-tag-${tag.value}`,
+  `/api/blog/tags/${encodeURIComponent(tag.value)}`
+)
+await ready
+
+if (!data.value)
+  throw resourceError(error.value, 'Tag not found')
+
+/** SEO */
+const tagLabel = computed(() => `#${tag.value}`)
+const seoTitle = computed(() => `Articles tagged “${tag.value}”`)
+const seoDescription = computed(() => `Browse ${brand.shortName} articles tagged ${tag.value}.`)
+const canonicalUrl = computed(() => blogUrl(`/tags/${encodeURIComponent(tag.value)}`))
+
+defineOgImage('BlogPost', {
+  kind: 'Tag',
+  title: computed(() => tagLabel.value),
+  description: computed(() => seoDescription.value)
+}, {
+  alt: computed(() => `${seoTitle.value}. ${seoDescription.value}`)
+})
+
+useHead(() => ({
+  link: [{ rel: 'canonical', href: canonicalUrl.value }]
+}))
+useSeoMeta({
+  title: () => seoTitle.value,
+  description: () => seoDescription.value,
+  ogTitle: () => seoTitle.value,
+  ogDescription: () => seoDescription.value,
+  ogUrl: canonicalUrl,
+  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="tagLabel"
+      title-id="tag-heading"
+      :description="`Articles tagged ${tag}`"
+      :breadcrumbs="[
+        { label: 'Home', to: blogPath() },
+        { label: tagLabel },
+      ]"
+    />
+
+    <!-- Grid -->
+    <section
+      class="mt-section mt-section-md"
+      aria-labelledby="tag-heading"
+    >
+      <BlogPostList
+        :posts="posts"
+        :pending="pending"
+        paginated
+        :has-more="hasMore"
+        :empty-title="`No articles tagged “${tag}” yet`"
+        @load-more="loadMore"
+      />
+    </section>
+  </div>
+</template>

package/app/components/OgImage/BlogPost.takumi.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+/** Interfaces */
+interface IProps {
+  kind?: string
+  title?: string
+  description?: string
+  author?: string
+  date?: string
+  accentColor?: string
+}
+
+/** Props */
+const props = withDefaults(defineProps<IProps>(), {
+  kind: 'Article',
+  title: '',
+  description: '',
+  author: '',
+  date: '',
+  accentColor: ''
+})
+
+/** Composables */
+const brand = useAppConfig().blog
+const siteHost = new URL(useSiteUrl()).host
+
+/** Constants */
+const HEX_COLOR_REGEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i
+
+/** Helpers */
+function isLightColor(hex: string): boolean {
+  const normalized = hex.length === 4
+    ? `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`
+    : hex
+  const red = Number.parseInt(normalized.slice(1, 3), 16) / 255
+  const green = Number.parseInt(normalized.slice(3, 5), 16) / 255
+  const blue = Number.parseInt(normalized.slice(5, 7), 16) / 255
+  const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue
+  return luminance > 0.6
+}
+
+/** Computed */
+const titleText = computed(() => props.title || brand.name)
+const descriptionText = computed(() => props.description || brand.description)
+const bandColor = computed(() => (HEX_COLOR_REGEX.test(props.accentColor) ? props.accentColor : brand.ogImage.accentColor))
+const bandIsLight = computed(() => isLightColor(bandColor.value))
+const bandTextColor = computed(() => (bandIsLight.value ? '#0b0811' : '#ffffff'))
+const bandLogoFilter = computed(() => (bandIsLight.value ? 'none' : 'invert(1)'))
+const bylineLabel = computed(() => [props.author, props.date].filter(Boolean).join(' · '))
+const titleFontSize = computed(() => {
+  const length = titleText.value.length
+  if (length <= 40)
+    return '56px'
+  if (length <= 70)
+    return '44px'
+  return '36px'
+})
+</script>
+
+<template>
+  <div
+    style="width: 100%; height: 100%; display: flex; flex-direction: row; background: #0b0811; color: #ffffff; overflow: hidden; font-family: 'DM Sans', sans-serif;"
+  >
+    <!-- Accent band -->
+    <div
+      :style="{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        width: '400px',
+        padding: '56px 40px 56px 56px',
+        boxSizing: 'border-box',
+        background: bandColor,
+        color: bandTextColor,
+      }"
+    >
+      <img
+        v-if="brand.ogImage.logo"
+        :src="brand.ogImage.logo"
+        :alt="brand.organization.name || brand.shortName"
+        :style="{ display: 'block', width: '150px', height: 'auto', filter: bandLogoFilter }"
+      >
+      <div v-else />
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        <div
+          v-if="brand.ogImage.kicker"
+          style="font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; opacity: 0.8;"
+        >
+          {{ brand.ogImage.kicker }}
+        </div>
+        <div style="font-size: 96px; font-weight: 800; line-height: 0.95; letter-spacing: -4px;">
+          {{ brand.ogImage.title }}
+        </div>
+      </div>
+      <div style="font-size: 18px; font-weight: 600; opacity: 0.85;">
+        {{ siteHost }}
+      </div>
+    </div>
+
+    <!-- Entry -->
+    <div style="display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding: 56px 64px; box-sizing: border-box;">
+      <div style="font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.55);">
+        {{ props.kind }}
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+        <div :style="{ fontSize: titleFontSize, fontWeight: '800', lineHeight: '1.05', letterSpacing: '-2px', textWrap: 'balance' }">
+          {{ titleText }}
+        </div>
+        <div style="font-size: 24px; line-height: 1.4; color: rgba(255,255,255,0.68); text-wrap: balance;">
+          {{ descriptionText }}
+        </div>
+      </div>
+      <div style="font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.55);">
+        {{ bylineLabel }}
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/blog/BlogCodeBlock.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import type { UiAlertToast } from '@colorffy/ui'
+import type { Highlighter } from 'shiki'
+import { useToast } from '@colorffy/ui'
+import { useClipboard } from '@vueuse/core'
+
+/** Interfaces */
+interface IBlogCodeBlockProps {
+  code?: string | null
+  lang?: string | null
+}
+
+/** Props */
+const props = withDefaults(defineProps<IBlogCodeBlockProps>(), {
+  code: null,
+  lang: SHIKI_DEFAULT_LANG
+})
+
+/** Composables */
+const source = ref<string>(props.code || '')
+const { copy, copied, isSupported: isClipboardSupported } = useClipboard({ source })
+const toast = ref<InstanceType<typeof UiAlertToast> | null>(null)
+const { onToastMessage } = useToast(toast)
+const colorMode = useColorMode()
+
+/** Data */
+const highlightedCode = ref<string>('')
+const isLoading = ref<boolean>(true)
+const highlighter = ref<Highlighter | null>(null)
+const isClient = ref(false)
+
+/** Computed */
+const resolvedLang = computed(() => resolveShikiLang(props.lang))
+const copyButtonAriaLabel = computed(() => `Copy ${resolvedLang.value} code to clipboard`)
+const codeBlockAriaLabel = computed(() => `${resolvedLang.value} code example${isLoading.value ? ' - Loading syntax highlighting' : ''}`)
+const containerClasses = computed(() => ({
+  'code-container': true,
+  'code-copied': copied.value,
+  'code-loading': isLoading.value
+}))
+
+/** Watch */
+watch(() => props.code, (newCode) => {
+  source.value = newCode || ''
+})
+watch([source, resolvedLang, () => colorMode.value], () => {
+  if (highlighter.value) {
+    updateHighlightedCode()
+  }
+})
+watch(copied, (val) => {
+  if (val) {
+    onToastMessage('success', 'Code copied to clipboard')
+  }
+})
+
+/** Lifecycle */
+onMounted(async () => {
+  isClient.value = true
+  await initializeHighlighter()
+})
+
+/** Methods */
+async function initializeHighlighter(): Promise<void> {
+  try {
+    const { getHighlighter } = useShikiHighlighter()
+    highlighter.value = await getHighlighter()
+
+    // Initial highlight
+    updateHighlightedCode()
+    isLoading.value = false
+  } catch (error) {
+    console.log('Failed to initialize Shiki highlighter:', error)
+    isLoading.value = false
+  }
+}
+function updateHighlightedCode(): void {
+  if (source.value && highlighter.value) {
+    const isDark = determineTheme()
+    highlightedCode.value = highlighter.value.codeToHtml(source.value, {
+      lang: resolvedLang.value,
+      theme: isDark ? SHIKI_DARK_THEME : SHIKI_LIGHT_THEME
+    })
+  }
+}
+function determineTheme(): boolean {
+  const htmlElement = document.documentElement
+
+  return colorMode.value === 'dark'
+    || htmlElement.classList.contains('dark-mode')
+    || (colorMode.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+}
+function handleCopyCode(): void {
+  if (!isClipboardSupported.value || !source.value)
+    return
+
+  copy(source.value)
+}
+</script>
+
+<template>
+  <div>
+    <!-- Code block -->
+    <div
+      :class="containerClasses"
+      role="region"
+      :aria-label="codeBlockAriaLabel"
+    >
+      <UiButton
+        variant="text"
+        icon
+        size="sm"
+        icon-variant="shape-md"
+        :title="copyButtonAriaLabel"
+        :aria-label="copyButtonAriaLabel"
+        class="position-absolute top-1 right-1 text-neutral"
+        :disabled="(!isClient) || !isClipboardSupported || !source"
+        @click="handleCopyCode"
+      >
+        <template #icon>
+          <UiIconMaterial
+            :icon-code="copied ? '&#xe179;' : '&#xe14f;'"
+            :aria-label="copied ? 'Copied' : 'Copy'"
+          />
+        </template>
+      </UiButton>
+
+      <!-- Raw source until Shiki loads -->
+      <pre
+        v-if="isLoading"
+        class="code-loading-placeholder"
+        aria-live="polite"
+      ><code>{{ source }}</code></pre>
+      <div
+        v-else
+        :aria-label="`Highlighted ${resolvedLang} code`"
+        v-html="highlightedCode"
+      />
+    </div>
+
+    <!-- Toast -->
+    <UiAlertToast ref="toast" />
+  </div>
+</template>