Merge pull request #153 from jerboa88/106-implement-client-side-redir…

…ects

106 implement client side redirects

gatsby-config.ts

@@ -29,6 +29,7 @@ const config: GatsbyConfig = {
 	siteMetadata: SITE_METADATA,
 	// Enable the new JSX transform so that we can use JSX without importing React
 	jsxRuntime: 'automatic',
+	trailingSlash: 'never',
 	graphqlTypegen: {
 		typesOutputPath: 'src/common/gatsby-types.d.ts',
 	},
@@ -141,6 +142,13 @@ const config: GatsbyConfig = {
 				},
 			},
 		},
+		// We are using a fork of gatsby-plugin-meta-redirect that supports disabling trailing slashes
+		{
+			resolve: 'gatsby-plugin-meta-redirect',
+			options: {
+				disableTrailingSlash: true,
+			},
+		},
 	],
 };
 

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');
 };

package.json

@@ -53,6 +53,7 @@
 		"gatsby-plugin-component-to-image": "^1.0.1",
 		"gatsby-plugin-fontawesome": "^1.3.1",
 		"gatsby-plugin-manifest": "^5.13.1",
+		"gatsby-plugin-meta-redirect": "https://github.com/sandro768/gatsby-plugin-meta-redirect",
 		"gatsby-plugin-offline": "^6.13.2",
 		"gatsby-plugin-postcss": "^6.13.1",
 		"gatsby-plugin-purgecss": "^6.2.1",

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;

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; }>;
 
 

src/common/types.ts

@@ -39,6 +39,9 @@ export type BgColorString = `bg-${string}`;
 // Absolute path string
 export type AbsolutePathString = `/${string}`;
 
+// Working path string
+export type WorkingPathString = `./${string}`;
+
 // HTTPS URL string
 export type UrlString = `https://${string}`;
 

src/config/metadata/pages.ts

@@ -6,13 +6,13 @@
 import type { PagesMetadataConfig } from '../../common/types';
 
 export const pagesMetadataConfig: PagesMetadataConfig = {
-	'/privacy-policy/': {
+	'/privacy-policy': {
 		title: 'Privacy Policy',
 		shortTitle: 'Privacy',
 		description:
 			'This privacy notice describes how and why johng.io might collect, store, use, and/or share your information',
 	},
-	'/404/': {
+	'/404': {
 		title: '404 - Page Not Found',
 		shortTitle: '404',
 		description: "Oof, there's nothing here",

yarn.lock

@@ -8207,6 +8207,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:^7.0.0":
+  version: 7.0.1
+  resolution: "fs-extra@npm:7.0.1"
+  dependencies:
+    graceful-fs: "npm:^4.1.2"
+    jsonfile: "npm:^4.0.0"
+    universalify: "npm:^0.1.0"
+  checksum: 10/3fc6e56ba2f07c00d452163f27f21a7076b72ef7da8a50fef004336d59ef4c34deda11d10ecd73fd8fbcf20e4f575f52857293090b3c9f8741d4e0598be30fea
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^9.0.0":
   version: 9.1.0
   resolution: "fs-extra@npm:9.1.0"
@@ -8485,6 +8496,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gatsby-plugin-meta-redirect@https://github.com/sandro768/gatsby-plugin-meta-redirect":
+  version: 1.1.1
+  resolution: "gatsby-plugin-meta-redirect@https://github.com/sandro768/gatsby-plugin-meta-redirect.git#commit=295bc660524a99c697373ae063cba1d0a04e8a7e"
+  dependencies:
+    fs-extra: "npm:^7.0.0"
+  checksum: 10/174ee98162d58fc17cb93b52eb40e0140d26b412c405dc2116435a8d5aedc01eae99e21f54f1f45a3861fe7a9579f1f85ba8d37ed529a55c483908a1a92c68e4
+  languageName: node
+  linkType: hard
+
 "gatsby-plugin-offline@npm:^6.13.2":
   version: 6.13.2
   resolution: "gatsby-plugin-offline@npm:6.13.2"
@@ -10600,6 +10620,7 @@ __metadata:
     gatsby-plugin-component-to-image: "npm:^1.0.1"
     gatsby-plugin-fontawesome: "npm:^1.3.1"
     gatsby-plugin-manifest: "npm:^5.13.1"
+    gatsby-plugin-meta-redirect: "https://github.com/sandro768/gatsby-plugin-meta-redirect"
     gatsby-plugin-offline: "npm:^6.13.2"
     gatsby-plugin-postcss: "npm:^6.13.1"
     gatsby-plugin-purgecss: "npm:^6.2.1"