Skip to content

Commit 6ded4d8

Browse files
cmpaddencmpadden
committed
article redirects
1 parent e64470b commit 6ded4d8

File tree

1 file changed

+71
-74
lines changed

1 file changed

+71
-74
lines changed

‎pages/articles/[...slug].vue‎

Lines changed: 71 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,93 @@
11
<script setup lang="ts">
2-
// <ContentDoc /> could have been used directly, but we want to populate the `title`
3-
// and `date` values which has to take place outside of the `ContentDoc` component.
42
const route = useRoute();
53
64
const { data } = await useAsyncData("page-data", () =>
7-
queryContent(route.path).findOne(),
5+
queryContent(route.path).findOne(),
86
);
7+
8+
const REDIRECTS = {
9+
}
10+
11+
// Redirect missing articles to `/`, or defined redirects to their intended location
12+
if (data.value === null || route.path in REDIRECTS) {
13+
const target = REDIRECTS[route.path] || '/';
14+
console.log(target)
15+
await navigateTo({
16+
path: target,
17+
})
18+
}
919
</script>
1020

1121
<template>
12-
<div class="container mx-auto" v-if="data">
13-
<article class="mb-10 bg-gray-200 p-10 shadow-lg">
14-
<div class="space-y-6">
15-
<div class="flex space-x-2">
16-
<!-- categories -->
17-
<div>
18-
<div class="text-xs uppercase text-gray-400">Category</div>
19-
<!-- columns when small, inline when md or larger -->
20-
<div
21-
class="flex flex-col space-y-2 md:flex md:flex-row md:space-x-2 md:space-y-0"
22-
>
23-
<NuxtLink
24-
class="w-min rounded-md bg-background px-2 text-sm font-bold text-white hover:cursor-pointer hover:bg-orange-500"
25-
v-for="(category, ix) in data.categories"
26-
:key="ix"
27-
:to="`/articles?category=${category}`"
28-
>
29-
{{ category }}
30-
</NuxtLink>
31-
</div>
32-
</div>
22+
<div class="container mx-auto" v-if="data">
23+
<article class="mb-10 bg-gray-200 p-10 shadow-lg">
24+
<div class="space-y-6">
25+
<div class="flex space-x-2">
26+
<!-- categories -->
27+
<div>
28+
<div class="text-xs uppercase text-gray-400">Category</div>
29+
<!-- columns when small, inline when md or larger -->
30+
<div class="flex flex-col space-y-2 md:flex md:flex-row md:space-x-2 md:space-y-0">
31+
<NuxtLink
32+
class="w-min rounded-md bg-background px-2 text-sm font-bold text-white hover:cursor-pointer hover:bg-orange-500"
33+
v-for="(category, ix) in data.categories" :key="ix"
34+
:to="`/articles?category=${category}`">
35+
{{ category }}
36+
</NuxtLink>
37+
</div>
38+
</div>
3339

34-
<!-- delimiter -->
35-
<div class="border-r border-gray-400"></div>
40+
<!-- delimiter -->
41+
<div class="border-r border-gray-400"></div>
3642

37-
<!-- tags -->
38-
<div>
39-
<div class="text-xs uppercase text-gray-400">Tags</div>
40-
<!-- columns when small, inline when md or larger -->
41-
<div
42-
class="flex flex-col space-y-2 md:flex md:flex-row md:space-x-2 md:space-y-0"
43-
>
44-
<NuxtLink
45-
class="w-min rounded-md bg-background px-2 text-sm font-bold text-white hover:cursor-pointer hover:bg-orange-500"
46-
v-for="(tag, ix) in data.tags"
47-
:key="ix"
48-
:to="`/articles?tag=${tag}`"
49-
>
50-
{{ tag }}
51-
</NuxtLink>
52-
</div>
53-
</div>
54-
</div>
43+
<!-- tags -->
44+
<div>
45+
<div class="text-xs uppercase text-gray-400">Tags</div>
46+
<!-- columns when small, inline when md or larger -->
47+
<div class="flex flex-col space-y-2 md:flex md:flex-row md:space-x-2 md:space-y-0">
48+
<NuxtLink
49+
class="w-min rounded-md bg-background px-2 text-sm font-bold text-white hover:cursor-pointer hover:bg-orange-500"
50+
v-for="(tag, ix) in data.tags" :key="ix" :to="`/articles?tag=${tag}`">
51+
{{ tag }}
52+
</NuxtLink>
53+
</div>
54+
</div>
55+
</div>
5556

56-
<!-- title -->
57-
<div class="flex">
58-
<!-- https://content.nuxt.com/components/content-slot -->
59-
<template v-if="data.cover_image">
60-
<img
61-
class="mr-4 h-16 border-2 border-black"
62-
:src="data.cover_image"
63-
/>
64-
</template>
57+
<!-- title -->
58+
<div class="flex">
59+
<!-- https://content.nuxt.com/components/content-slot -->
60+
<template v-if="data.cover_image">
61+
<img class="mr-4 h-16 border-2 border-black" :src="data.cover_image" />
62+
</template>
6563

66-
<h1 class="text-xl font-bold text-gray-700 md:text-3xl">
67-
{{ data.title }}
68-
</h1>
69-
</div>
70-
<!-- <div class="text-sm text-gray-600">Published {{ data.date }}</div> -->
71-
</div>
72-
<!-- <div class="my-4 border-b border-gray-400" /> -->
73-
<!--
64+
<h1 class="text-xl font-bold text-gray-700 md:text-3xl">
65+
{{ data.title }}
66+
</h1>
67+
</div>
68+
<!-- <div class="text-sm text-gray-600">Published {{ data.date }}</div> -->
69+
</div>
70+
<!-- <div class="my-4 border-b border-gray-400" /> -->
71+
<!--
7472
- Remove maximum width of prose content: https://github.com/tailwindlabs/tailwindcss-typography#overriding-max-width
7573
- Use prose-pre:bg-white to work with @nuxt/content syntax highlighting, otherwise background-color defaults to `.prose:where(pre)`
7674
-->
77-
<article
78-
class="prose max-w-none prose-a:font-bold prose-a:no-underline hover:prose-a:text-orange-500 prose-pre:bg-white prose-pre:text-black"
79-
>
80-
<ContentRenderer>
81-
<ContentRendererMarkdown :value="data" />
82-
</ContentRenderer>
83-
</article>
84-
</article>
85-
</div>
75+
<article
76+
class="prose max-w-none prose-a:font-bold prose-a:no-underline hover:prose-a:text-orange-500 prose-pre:bg-white prose-pre:text-black">
77+
<ContentRenderer>
78+
<ContentRendererMarkdown :value="data" />
79+
</ContentRenderer>
80+
</article>
81+
</article>
82+
</div>
8683
</template>
8784

8885
<style>
8986
/*
90-
For some reason min-height is set to 1rem in ProsePre.vue of @nuxt/content, override
91-
this for more suitable code block line height
92-
https://github.com/nuxt/content/blob/056da889a28c2f8cfe622a2848a652324b4c32c8/src/runtime/components/Prose/ProsePre.vue#L43 */
87+
* For some reason min-height is set to 1rem in ProsePre.vue of @nuxt/content, override this for more suitable code block line height
88+
* https://github.com/nuxt/content/blob/056da889a28c2f8cfe622a2848a652324b4c32c8/src/runtime/components/Prose/ProsePre.vue#L43
89+
*/
9390
pre code .line {
94-
min-height: 0.25rem !important;
91+
min-height: 0.25rem !important;
9592
}
9693
</style>

0 commit comments

Comments
 (0)