Skip to content

Commit c3251cf

Browse files
KumzyKumzy
authored
Merge pull request #17 from litestar-org/update-packages
chore: update packages and fix ogImage for 5 to 6 migration
2 parents 479f741 + 7593a9d commit c3251cf

18 files changed

Lines changed: 5715 additions & 4640 deletions

app/components/OgImage/OgImageBlog.vue renamed to app/components/OgImage/OgImageBlog.takumi.vue

File renamed without changes.

app/components/OgImage/OgImageMain.vue renamed to app/components/OgImage/OgImageMain.takumi.vue

File renamed without changes.

app/components/OgImage/OgImagePage.vue renamed to app/components/OgImage/OgImagePage.takumi.vue

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
<script setup lang="ts">
2-
defineProps<{
2+
const props = defineProps<{
33
title: string
44
description: string
55
}>()
6+
7+
// takumi (the v6 OG renderer) rejects Tailwind's `line-clamp` utility because it
8+
// compiles to `display: -webkit-box`; clamp the description length here instead.
9+
const clampedDescription = computed(() =>
10+
props.description.length > 120
11+
? `${props.description.slice(0, 119).trimEnd()}…`
12+
: props.description,
13+
)
614
</script>
715

816
<template>
@@ -18,8 +26,8 @@ defineProps<{
1826
<h1 class="text-5xl font-semibold mb-0 flex gap-1 text-white mt-20">
1927
<span>{{ title }}</span>
2028
</h1>
21-
<p class="text-3xl text-gray-400 line-clamp-2">
22-
{{ description }}
29+
<p class="text-3xl text-gray-400">
30+
{{ clampedDescription }}
2331
</p>
2432
</div>
2533
</div>

app/components/OgImage/OgImagePlugin.vue renamed to app/components/OgImage/OgImagePlugin.takumi.vue

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function pluginImage(icon: string = '') {
1010
// return `https://raw.githubusercontent.com/litestar-org/plugin-registry/main/icons/${icon}`
1111
}
1212
13-
withDefaults(
13+
const props = withDefaults(
1414
defineProps<{
1515
plugin: Plugin
1616
title: string
@@ -21,6 +21,14 @@ withDefaults(
2121
type: 'Third-Party',
2222
},
2323
)
24+
25+
// takumi (the v6 OG renderer) rejects Tailwind's `line-clamp` utility because it
26+
// compiles to `display: -webkit-box`; clamp the description length here instead.
27+
const clampedDescription = computed(() =>
28+
props.description.length > 120
29+
? `${props.description.slice(0, 119).trimEnd()}…`
30+
: props.description,
31+
)
2432
</script>
2533

2634
<template>
@@ -43,8 +51,8 @@ withDefaults(
4351
<h1 class="text-5xl font-semibold mb-0 flex gap-1 text-white">
4452
<span>{{ title }}</span>
4553
</h1>
46-
<p class="text-3xl text-gray-400 line-clamp-2">
47-
{{ description }}
54+
<p class="text-3xl text-gray-400">
55+
{{ clampedDescription }}
4856
</p>
4957
</div>
5058
<div

‎app/composables/useBlogImages.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,28 @@ export const useBlogImages = () => {
1212
}
1313

1414
// Otherwise, use the auto-generated OG image
15-
return getOgImageUrl(article.path)
15+
return getOgImageUrl(article)
1616
}
1717

1818
/**
19-
* Get the generated OG image URL for a blog post path
19+
* Get the generated OG image URL for a blog post.
20+
*
21+
* v6 encodes the render options into the static file path, so this must use
22+
* the same component + props that blog/[slug].vue passes to defineOgImage()
23+
* ('Blog' with minimal { title, category }). getOgImagePath() is auto-imported
24+
* by nuxt-og-image and joins the app baseURL for us.
2025
*/
21-
const getOgImageUrl = (path: string): string => {
22-
const config = useRuntimeConfig()
23-
const siteConfig = useSiteConfig()
26+
const getOgImageUrl = (article: BlogArticle): string => {
27+
const { path } = getOgImagePath(article.path, {
28+
component: 'Blog',
29+
props: { blog: { title: article.title, category: article.category } },
30+
})
2431

25-
// Get the base URL from site config or construct it
26-
const baseUrl = siteConfig.url || 'http://localhost:3000'
27-
28-
// Get the app base URL (e.g., '/litestar.dev-v2/')
29-
const appBase = config.app.baseURL || '/'
30-
31-
// Construct the full URL
32-
// Remove trailing slash from baseUrl and leading slash from appBase if needed
33-
const cleanBaseUrl = baseUrl.replace(/\/$/, '')
34-
const cleanAppBase = appBase === '/' ? '' : appBase.replace(/\/$/, '')
35-
36-
return `${cleanBaseUrl}${cleanAppBase}/__og-image__/static${path}/og.png`
32+
// Returns the baseURL-prefixed path. These are rendered with @nuxt/image's
33+
// `none` provider (see blog/index.vue) so the URL is used as-is rather than
34+
// run through IPX — the OG image is generated during prerender, so IPX has
35+
// no source file to optimize when the listing page is built first.
36+
return path
3737
}
3838

3939
/**
@@ -51,7 +51,7 @@ export const useBlogImages = () => {
5151
}
5252

5353
// Use generated OG image as primary choice
54-
return getOgImageUrl(article.path)
54+
return getOgImageUrl(article)
5555
}
5656

5757
/**

‎app/pages/about.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ useSeoMeta({
2727
ogTitle: title,
2828
})
2929
30-
defineOgImageComponent('Page', {
30+
defineOgImage('Page', {
3131
title: title,
3232
description,
3333
})

‎app/pages/blog/[slug].vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,13 @@ useSeoMeta({
3939
})
4040
4141
if (article.value.image) {
42-
defineOgImage({ url: article.value.image })
42+
useSeoMeta({ ogImage: article.value.image })
4343
} else {
44-
defineOgImageComponent('Blog', {
45-
blog: article.value,
44+
// Minimal props: the Blog template only renders title + category. Keeping
45+
// the options small keeps the generated URL under v6's 200-char path limit
46+
// so it stays deterministic and matches the thumbnail built in useBlogImages.
47+
defineOgImage('Blog', {
48+
blog: { title: article.value.title, category: article.value.category },
4649
})
4750
}
4851

‎app/pages/blog/index.vue‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ useSeoMeta({
1818
ogTitle: page.title,
1919
})
2020
21-
defineOgImageComponent('Page', {
21+
defineOgImage('Page', {
2222
title: page.title,
2323
description: page.description,
2424
})
@@ -51,12 +51,6 @@ await fetchList()
5151
:to="article.path"
5252
:title="article.title"
5353
:description="article.description"
54-
:image="{
55-
src: article.image,
56-
width: index === 0 ? 672 : 437,
57-
height: index === 0 ? 378 : 246,
58-
alt: `${article.title} image`,
59-
}"
6054
:date="formatDateByLocale('en', article.date)"
6155
:authors="
6256
article.authors.map((author) => ({
@@ -72,7 +66,31 @@ await fetchList()
7266
:variant="index === 0 ? 'outline' : 'subtle'"
7367
:orientation="index === 0 ? 'horizontal' : 'vertical'"
7468
:class="[index === 0 && 'col-span-full']"
75-
/>
69+
>
70+
<template #header="{ ui }">
71+
<!--
72+
Generated OG images are produced during prerender, so IPX has no
73+
source file to optimize when this listing builds first — reference
74+
them directly. Real frontmatter images keep <NuxtImg> optimization.
75+
-->
76+
<NuxtImg
77+
v-if="!article.image?.includes('/_og/')"
78+
:src="article.image"
79+
:alt="`${article.title} image`"
80+
:width="index === 0 ? 672 : 437"
81+
:height="index === 0 ? 378 : 246"
82+
:class="ui.image()"
83+
/>
84+
<img
85+
v-else
86+
:src="article.image"
87+
:alt="`${article.title} image`"
88+
:width="index === 0 ? 672 : 437"
89+
:height="index === 0 ? 378 : 246"
90+
:class="ui.image()"
91+
>
92+
</template>
93+
</UBlogPost>
7694
</UBlogPosts>
7795
</UContainer>
7896
</UPageBody>

‎app/pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ useSeoMeta({
6666
ogTitle: title,
6767
})
6868
69-
defineOgImageComponent('OgImageMain', {})
69+
defineOgImage('OgImageMain', {})
7070
</script>
7171

7272
<template>

‎app/pages/plugins/[slug].vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ useSeoMeta({
179179
ogTitle: computed(() => `${title.value} · Litestar Plugins`),
180180
})
181181
182-
defineOgImageComponent('OgImagePlugin', {
182+
defineOgImage('OgImagePlugin', {
183183
plugin: plugin.value,
184184
headline: 'Litestar Plugin',
185185
title: title.value,

0 commit comments

Comments
 (0)