From bd01586e8e93bf8276cb512d43304aee49c3bfda Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Thu, 28 Dec 2023 10:56:51 +0500 Subject: [PATCH] Handle SSR for static pages --- src/lib/guide.ts | 13 ++++++++-- src/lib/link-group.ts | 13 +++++++++- src/lib/question-group.ts | 6 +++++ src/lib/video.ts | 13 ++++++++-- src/pages/[roadmapId]/[...topicId].astro | 3 +++ src/pages/g/[linkGroupId]/[linkId].astro | 27 ++++----------------- src/pages/guides/[guideId].astro | 21 +++++----------- src/pages/questions/[questionGroupId].astro | 27 +++++++-------------- src/pages/videos/[videoId].astro | 21 +++++----------- 9 files changed, 69 insertions(+), 75 deletions(-) diff --git a/src/lib/guide.ts b/src/lib/guide.ts index a23033382..e0c0d102d 100644 --- a/src/lib/guide.ts +++ b/src/lib/guide.ts @@ -48,7 +48,7 @@ export async function getAllGuides(): Promise { '/src/data/guides/*.md', { eager: true, - } + }, ); const guideFiles = Object.values(guides); @@ -60,6 +60,15 @@ export async function getAllGuides(): Promise { return enrichedGuides.sort( (a, b) => new Date(b.frontmatter.date).valueOf() - - new Date(a.frontmatter.date).valueOf() + new Date(a.frontmatter.date).valueOf(), ); } + +export async function getGuideById(id: string): Promise { + const guide = await import(`/src/data/guides/${id}.md`); + + return { + ...guide, + id: guidePathToId(guide.file), + }; +} diff --git a/src/lib/link-group.ts b/src/lib/link-group.ts index 960d8d1ea..ff31b4ce0 100644 --- a/src/lib/link-group.ts +++ b/src/lib/link-group.ts @@ -29,7 +29,7 @@ export async function getAllLinkGroups(): Promise { '/src/data/link-groups/*.md', { eager: true, - } + }, ); return Object.values(linkGroups).map((linkGroupFile) => ({ @@ -37,3 +37,14 @@ export async function getAllLinkGroups(): Promise { id: linkGroupPathToId(linkGroupFile.file), })); } + +export async function getLinkGroupById( + groupId: string, +): Promise { + const linkGroup = await import(`/src/data/link-groups/${groupId}.md`); + + return { + ...linkGroup, + id: linkGroupPathToId(linkGroup.file), + }; +} diff --git a/src/lib/question-group.ts b/src/lib/question-group.ts index 114bccc78..a73cc42d1 100644 --- a/src/lib/question-group.ts +++ b/src/lib/question-group.ts @@ -117,6 +117,12 @@ export async function getAllQuestionGroups(): Promise { .sort((a, b) => a.frontmatter.order - b.frontmatter.order); } +export async function getQuestionGroupById(id: string) { + const questionGroups = await getAllQuestionGroups(); + + return questionGroups.find((group) => group.id === id); +} + export async function getQuestionGroupsByIds( ids: string[], ): Promise<{ id: string; title: string; description: string }[]> { diff --git a/src/lib/video.ts b/src/lib/video.ts index 22206bc8a..5bbb05e18 100644 --- a/src/lib/video.ts +++ b/src/lib/video.ts @@ -47,7 +47,7 @@ export async function getAllVideos(): Promise { '/src/data/videos/*.md', { eager: true, - } + }, ); const videoFiles = Object.values(videos); @@ -59,6 +59,15 @@ export async function getAllVideos(): Promise { return enrichedVideos.sort( (a, b) => new Date(b.frontmatter.date).valueOf() - - new Date(a.frontmatter.date).valueOf() + new Date(a.frontmatter.date).valueOf(), ); } + +export async function getVideoById(id: string): Promise { + const video = await import(`/src/data/videos/${id}.md`); + + return { + ...video, + id: videoPathToId(video.file), + }; +} diff --git a/src/pages/[roadmapId]/[...topicId].astro b/src/pages/[roadmapId]/[...topicId].astro index b471a63d9..398a0b3ec 100644 --- a/src/pages/[roadmapId]/[...topicId].astro +++ b/src/pages/[roadmapId]/[...topicId].astro @@ -12,6 +12,9 @@ const topicSlug = `/${roadmapId}/${topicId}`; const topicPathMapping = await getRoadmapTopicFiles(); const topicDetails = topicPathMapping[topicSlug]; +if (!topicDetails) { + return Astro.redirect('/404'); +} const { file } = topicDetails; diff --git a/src/pages/g/[linkGroupId]/[linkId].astro b/src/pages/g/[linkGroupId]/[linkId].astro index a63e52f4a..30dc02082 100644 --- a/src/pages/g/[linkGroupId]/[linkId].astro +++ b/src/pages/g/[linkGroupId]/[linkId].astro @@ -1,30 +1,13 @@ --- import BaseLayout from '../../../layouts/BaseLayout.astro'; import SkeletonLayout from '../../../layouts/SkeletonLayout.astro'; -import { getAllLinkGroups } from '../../../lib/link-group'; - -export async function getStaticPaths() { - const linkGroups = await getAllLinkGroups(); - - return linkGroups.flatMap((linkGroup) => { - const linkGroupLinks = linkGroup.frontmatter; - - return Object.keys(linkGroupLinks).map((slug) => { - return { - params: { - linkGroupId: linkGroup.id, - linkId: slug, - }, - props: { - linkGroup, - }, - }; - }); - }); -} +import { getLinkGroupById } from '../../../lib/link-group'; const { linkId } = Astro.params; -const { linkGroup } = Astro.props; +const linkGroup = await getLinkGroupById(linkId!).catch(() => null); +if (!linkGroup) { + return Astro.redirect('/404'); +} const fullUrl = linkGroup.frontmatter[linkId!]; --- diff --git a/src/pages/guides/[guideId].astro b/src/pages/guides/[guideId].astro index ea86a6bc0..44ee16d4a 100644 --- a/src/pages/guides/[guideId].astro +++ b/src/pages/guides/[guideId].astro @@ -2,23 +2,14 @@ import GuideHeader from '../../components/GuideHeader.astro'; import MarkdownFile from '../../components/MarkdownFile.astro'; import BaseLayout from '../../layouts/BaseLayout.astro'; -import { getAllGuides,GuideFileType } from '../../lib/guide'; +import { getGuideById } from '../../lib/guide'; -export interface Props { - guide: GuideFileType; -} - -export async function getStaticPaths() { - const guides = await getAllGuides(); - - return guides.map((guide) => ({ - params: { guideId: guide.id }, - props: { guide }, - })); +const { guideId } = Astro.params; +const guide = await getGuideById(guideId).catch(() => null); +if (!guide) { + return Astro.redirect('/404'); } -const { guideId } = Astro.params; -const { guide } = Astro.props; const { frontmatter: guideData } = guide; --- @@ -30,7 +21,7 @@ const { frontmatter: guideData } = guide; > -
+
diff --git a/src/pages/questions/[questionGroupId].astro b/src/pages/questions/[questionGroupId].astro index 6091fceb8..4ebdaef45 100644 --- a/src/pages/questions/[questionGroupId].astro +++ b/src/pages/questions/[questionGroupId].astro @@ -8,24 +8,15 @@ import { QuestionsList } from '../../components/Questions/QuestionsList'; import { getAllQuestionGroups, - type QuestionGroupType, + getQuestionGroupById, } from '../../lib/question-group'; -export interface Props { - questionGroup: QuestionGroupType; +const { questionGroupId } = Astro.params; +const questionGroup = await getQuestionGroupById(questionGroupId); +if (!questionGroup) { + return Astro.redirect('/404'); } -export async function getStaticPaths() { - const questionGroups = await getAllQuestionGroups(); - return questionGroups.map((questionGroup) => { - return { - params: { questionGroupId: questionGroup.id }, - props: { questionGroup }, - }; - }); -} - -const { questionGroup } = Astro.props; const { frontmatter } = questionGroup; --- @@ -38,24 +29,24 @@ const { frontmatter } = questionGroup; >
-
+
← - Back to all Questions + Back to all Questions

{frontmatter.title}

-
diff --git a/src/pages/videos/[videoId].astro b/src/pages/videos/[videoId].astro index 801712252..3133d733c 100644 --- a/src/pages/videos/[videoId].astro +++ b/src/pages/videos/[videoId].astro @@ -1,23 +1,14 @@ --- import VideoHeader from '../../components/VideoHeader.astro'; import BaseLayout from '../../layouts/BaseLayout.astro'; -import { getAllVideos,VideoFileType } from '../../lib/video'; +import { getVideoById } from '../../lib/video'; -export interface Props { - video: VideoFileType; -} - -export async function getStaticPaths() { - const videos = await getAllVideos(); +const { videoId } = Astro.params; - return videos.map((video) => ({ - params: { videoId: video.id }, - props: { video }, - })); +const video = await getVideoById(videoId).catch(() => null); +if (!video) { + return Astro.redirect('/404'); } - -const { videoId } = Astro.params; -const { video } = Astro.props; ---