Configure client-side redirects in Gatsby Node

jerboa88 · Jul 1, 2024 · f84a3e7 · f84a3e7
1 parent 55d97eb
commit f84a3e7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/gatsby-node.ts b/gatsby-node.ts
@@ -8,6 +8,8 @@ import {
 } from './src/common/config-manager';
 import {
 	PAGE_TEMPLATES_DIR,
+	PROJECTS_DIR,
+	PROJECTS_DIR_SHORT,
 	SOCIAL_IMAGES_DIR as SOCIAL_IMAGE_PAGES_DIR,
 	SOCIAL_IMAGE_TEMPLATES_DIR,
 } from './src/common/constants';
@@ -42,6 +44,7 @@ const OTHER_OG_IMAGE_TEMPLATE = resolve(
 
 let gatsbyCreatePage: Actions['createPage'] | undefined = undefined;
 let gatsbyDeletePage: Actions['deletePage'] | undefined = undefined;
+let gatsbyCreateRedirect: Actions['createRedirect'] | undefined = undefined;
 let gatsbyReporter: Reporter | undefined = undefined;
 
 // Types
@@ -191,13 +194,25 @@ function createPage({
 	});
 }
 
+// Create a client-side redirect
+function createRedirect(fromPath: string, toPath: string) {
+	assert(gatsbyCreateRedirect !== undefined);
+
+	gatsbyCreateRedirect({
+		fromPath: fromPath,
+		toPath: toPath,
+		isPermanent: true,
+	});
+}
+
 // Save Gatsby Node API Helpers for later use
 export const onPluginInit: GatsbyNode['onPluginInit'] = ({
 	reporter,
-	actions: { createPage, deletePage },
+	actions: { createPage, deletePage, createRedirect },
 }) => {
 	gatsbyCreatePage = createPage;
 	gatsbyDeletePage = deletePage;
+	gatsbyCreateRedirect = createRedirect;
 	gatsbyReporter = reporter;
 };
 
@@ -244,18 +259,28 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql }) => {
 		const projectInfo = mapResponse(
 			parseResponse(responseData as PinnedReposResponse),
 		);
+		const path: AbsolutePathString = join(
+			PROJECTS_DIR,
+			projectInfo.slug,
+		) as AbsolutePathString;
+		const shortPath: AbsolutePathString = join(
+			PROJECTS_DIR_SHORT,
+			projectInfo.slug,
+		) as AbsolutePathString;
 
 		// TODO: Renable this when project pages are implemented
 		// Create project pages
 		// createPage({
-		// 	path: join(PROJECTS_DIR, projectInfo.slug) as Path,
+		// 	path: path,
 		// 	component: PROJECT_PAGE_TEMPLATE,
 		// 	socialImageComponent: PROJECT_OG_IMAGE_TEMPLATE,
 		// 	context: {
 		// 		repo: projectInfo,
 		// 	},
 		// });
 
+		createRedirect(shortPath, path);
+
 		return projectInfo;
 	});
 
@@ -268,4 +293,9 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql }) => {
 			pinnedRepos: pinnedRepos,
 		},
 	});
+
+	createRedirect('/about', '/#about');
+	createRedirect('/projects', '/#projects');
+	createRedirect('/experience', '/#experience');
+	createRedirect('/contact', '/#contact');
 };
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -3,6 +3,8 @@
 	--------------------------------------------------
 */
 
+import type { AbsolutePathString, WorkingPathString } from './types';
+
 // Constants
 
 const FADE_TRANSITION_VARIANTS = {
@@ -17,11 +19,12 @@ const FADE_TRANSITION_VARIANTS = {
 } as const;
 
 // Directories
-export const PAGE_TEMPLATES_DIR = './src/templates/page' as const;
-export const SOCIAL_IMAGE_TEMPLATES_DIR =
-	'./src/templates/social-image' as const;
-export const PROJECTS_DIR = '/projects' as const;
-export const SOCIAL_IMAGES_DIR = '/__generatedSocialImages' as const;
+export const PAGE_TEMPLATES_DIR: WorkingPathString = './src/templates/page';
+export const SOCIAL_IMAGE_TEMPLATES_DIR: WorkingPathString =
+	'./src/templates/social-image';
+export const PROJECTS_DIR: AbsolutePathString = '/projects';
+export const PROJECTS_DIR_SHORT: AbsolutePathString = '/p';
+export const SOCIAL_IMAGES_DIR: AbsolutePathString = '/__generatedSocialImages';
 
 // ID used to group together elements for the title animation
 export const TITLE_LAYOUT_ID = 'title-layout' as const;

diff --git a/src/common/gatsby-types.d.ts b/src/common/gatsby-types.d.ts
@@ -30066,6 +30066,11 @@ type PrivacyPolicyPageQueryVariables = Exact<{ [key: string]: never; }>;
 
 type PrivacyPolicyPageQuery = { readonly file: { readonly childMarkdownRemark: { readonly html: string | null } | null } | null };
 
+type ResumePageQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+type ResumePageQuery = { readonly file: { readonly childMarkdownRemark: { readonly html: string | null } | null } | null };
+
 type PinnedReposQueryVariables = Exact<{ [key: string]: never; }>;