Skip to content

Commit ce34993

Browse files
WilcoSpWilcoSp
committed
added a div which reservers the space for toc
added cache keys to the markdown & releases endpoints
1 parent 2c057b9 commit ce34993

4 files changed

Lines changed: 88 additions & 59 deletions

File tree

‎app/pages/package-changes/[...path].vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,13 @@ watch(
6868
const { data: changelog, pending } = usePackageChangelog(packageName, version)
6969
7070
const repoProviderIcon = useProviderIcon(() => changelog.value?.provider)
71-
const header = useTemplateRef('header')
71+
const tptoc = useTemplateRef('tptoc')
7272
</script>
7373
<template>
7474
<main class="flex-1 flex flex-col">
7575
<header class="border-b border-border bg-bg sticky top-14 z-20">
7676
<div class="container pt-4 pb-3">
77-
<div class="flex items-center gap-2 mb-3 flex-wrap min-w-0" ref="header">
77+
<div class="flex items-center gap-3 mb-3 flex-wrap min-w-0">
7878
<h1
7979
class="font-mono text-lg sm:text-xl font-semibold text-fg hover:text-fg-muted transition-colors truncate"
8080
>
@@ -100,6 +100,10 @@ const header = useTemplateRef('header')
100100
>
101101
{{ changelog.provider }}
102102
</LinkBase>
103+
104+
<div v-if="changelog?.type == 'md'" ref="tptoc" class="w-14 h-8">
105+
<!-- prevents layout shift while loading -->
106+
</div>
103107
</div>
104108
</div>
105109
</header>
@@ -109,7 +113,7 @@ const header = useTemplateRef('header')
109113
<LazyChangelogMarkdown
110114
v-else-if="changelog.type == 'md'"
111115
:info="changelog"
112-
:tpTarget="header"
116+
:tpTarget="tptoc"
113117
/>
114118
<p v-else-if="!pending" class="mt-5">{{ $t('changelog.no_logs') }}</p>
115119
</section>

‎server/api/changelog/info/[...pkg].get.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default defineCachedEventHandler(
3636
swr: true,
3737
getKey: event => {
3838
const pkg = getRouterParam(event, 'pkg') ?? ''
39-
return `changelogInfo:pr1:${pkg.replace(/\/+$/, '').trim()}`
39+
return `changelogInfo:v1:${pkg.replace(/\/+$/, '').trim()}`
4040
},
4141
},
4242
)

‎server/api/changelog/md/[provider]/[owner]/[repo]/[...path].get.ts‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,52 @@ import {
44
ERROR_THROW_INCOMPLETE_PARAM,
55
} from '~~/shared/utils/constants'
66

7-
export default defineCachedEventHandler(async event => {
8-
const provider = getRouterParam(event, 'provider')
9-
const repo = getRouterParam(event, 'repo')
10-
const owner = getRouterParam(event, 'owner')
11-
const path = getRouterParam(event, 'path')
12-
13-
if (!repo || !provider || !owner || !path) {
14-
throw createError({
15-
status: 404,
16-
statusMessage: ERROR_THROW_INCOMPLETE_PARAM,
17-
})
18-
}
7+
export default defineCachedEventHandler(
8+
async event => {
9+
const provider = getRouterParam(event, 'provider')
10+
const repo = getRouterParam(event, 'repo')
11+
const owner = getRouterParam(event, 'owner')
12+
const path = getRouterParam(event, 'path')
13+
14+
if (!repo || !provider || !owner || !path) {
15+
throw createError({
16+
status: 404,
17+
statusMessage: ERROR_THROW_INCOMPLETE_PARAM,
18+
})
19+
}
1920

20-
try {
21-
console.log({ provider })
21+
try {
22+
console.log({ provider })
2223

23-
switch (provider as ProviderId) {
24-
case 'github':
25-
return await getGithubMarkDown(owner, repo, path)
24+
switch (provider as ProviderId) {
25+
case 'github':
26+
return await getGithubMarkDown(owner, repo, path)
2627

27-
default:
28-
throw createError({
29-
status: 404,
30-
statusMessage: ERROR_CHANGELOG_NOT_FOUND,
31-
})
28+
default:
29+
throw createError({
30+
status: 404,
31+
statusMessage: ERROR_CHANGELOG_NOT_FOUND,
32+
})
33+
}
34+
} catch (error) {
35+
handleApiError(error, {
36+
statusCode: 502,
37+
message: ERROR_CHANGELOG_FILE_FAILED,
38+
})
3239
}
33-
} catch (error) {
34-
handleApiError(error, {
35-
statusCode: 502,
36-
message: ERROR_CHANGELOG_FILE_FAILED,
37-
})
38-
}
39-
})
40+
},
41+
{
42+
maxAge: CACHE_MAX_AGE_ONE_HOUR * 2, // 2 hours
43+
swr: true,
44+
getKey: event => {
45+
const provider = getRouterParam(event, 'provider') ?? ''
46+
const repo = getRouterParam(event, 'repo') ?? ''
47+
const owner = getRouterParam(event, 'owner') ?? ''
48+
const path = getRouterParam(event, 'path') ?? ''
49+
return `changelogMarkdown:v1:${provider}:${owner}:${repo}:${path.replaceAll('/', ':')}`
50+
},
51+
},
52+
)
4053

4154
async function getGithubMarkDown(owner: string, repo: string, path: string) {
4255
const data = await $fetch(`https://ungh.cc/repos/${owner}/${repo}/files/HEAD/${path}`)

‎server/api/changelog/releases/[provider]/[owner]/[repo].get.ts‎

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,48 @@ import { GithubReleaseCollectionSchama } from '~~/shared/schemas/changelog/relea
88
import { parse } from 'valibot'
99
import { changelogRenderer } from '~~/server/utils/changelog/markdown'
1010

11-
export default defineCachedEventHandler(async event => {
12-
const provider = getRouterParam(event, 'provider')
13-
const repo = getRouterParam(event, 'repo')
14-
const owner = getRouterParam(event, 'owner')
11+
export default defineCachedEventHandler(
12+
async event => {
13+
const provider = getRouterParam(event, 'provider')
14+
const repo = getRouterParam(event, 'repo')
15+
const owner = getRouterParam(event, 'owner')
1516

16-
if (!repo || !provider || !owner) {
17-
throw createError({
18-
status: 404,
19-
statusMessage: ERROR_THROW_INCOMPLETE_PARAM,
20-
})
21-
}
17+
if (!repo || !provider || !owner) {
18+
throw createError({
19+
status: 404,
20+
statusMessage: ERROR_THROW_INCOMPLETE_PARAM,
21+
})
22+
}
2223

23-
try {
24-
switch (provider as ProviderId) {
25-
case 'github':
26-
return await getReleasesFromGithub(owner, repo)
24+
try {
25+
switch (provider as ProviderId) {
26+
case 'github':
27+
return await getReleasesFromGithub(owner, repo)
2728

28-
default:
29-
throw createError({
30-
status: 404,
31-
statusMessage: ERROR_CHANGELOG_NOT_FOUND,
32-
})
29+
default:
30+
throw createError({
31+
status: 404,
32+
statusMessage: ERROR_CHANGELOG_NOT_FOUND,
33+
})
34+
}
35+
} catch (error) {
36+
handleApiError(error, {
37+
statusCode: 502,
38+
message: ERROR_CHANGELOG_RELEASES_FAILED,
39+
})
3340
}
34-
} catch (error) {
35-
handleApiError(error, {
36-
statusCode: 502,
37-
message: ERROR_CHANGELOG_RELEASES_FAILED,
38-
})
39-
}
40-
})
41+
},
42+
{
43+
maxAge: CACHE_MAX_AGE_ONE_HOUR * 2, // 2 hours
44+
swr: true,
45+
getKey: event => {
46+
const provider = getRouterParam(event, 'provider')
47+
const repo = getRouterParam(event, 'repo')
48+
const owner = getRouterParam(event, 'owner')
49+
return `changelogRelease:v1:${provider}:${owner}:${repo}`
50+
},
51+
},
52+
)
4153

4254
async function getReleasesFromGithub(owner: string, repo: string) {
4355
const data = await $fetch(`https://ungh.cc/repos/${owner}/${repo}/releases`, {

0 commit comments

Comments
 (0)