Merge pull request #157 from jerboa88/151-configure-pdf-generation-fo…

…r-resume

151 configure pdf generation for resume

gatsby-config.ts

@@ -12,13 +12,15 @@ import {
 	getTheme,
 } from './src/common/config-manager';
 import { SOCIAL_IMAGES_DIR } from './src/common/constants';
-import { ThemeType } from './src/common/types';
+import { SocialImageType, ThemeType } from './src/common/types';
 import { getAbsoluteUrl } from './src/common/utils';
 import tailwindConfig from './tailwind.config';
 
 const SITE_METADATA = getSiteMetadata();
 const DARK_THEME = getTheme(ThemeType.Dark);
-const OG_IMAGE_GENERATION_CONFIG = getSocialImageGenerationConfigForType('og');
+const OG_IMAGE_GENERATION_CONFIG = getSocialImageGenerationConfigForType(
+	SocialImageType.OpenGraph,
+);
 
 // Load environment variables from relevant .env file
 dotenv.config({
@@ -53,8 +55,9 @@ const config: GatsbyConfig = {
 			resolve: 'gatsby-plugin-purgecss',
 			options: {
 				tailwind: true,
+				// biome-ignore lint/style/useNamingConvention: Naming convention is enforced by the plugin
 				purgeCSSOptions: {
-					safelist: [/where/],
+					safelist: [/where/, /data-theme/],
 				},
 			},
 		},

src/common/config-manager.ts

@@ -12,7 +12,7 @@ import type {
 	PageMetadata,
 	Role,
 	SentenceString,
-	SocialImageTypes,
+	SocialImageType,
 	SocialImagesGenerationConfig,
 	Theme,
 	ThemesConfig,
@@ -141,12 +141,9 @@ export function getSocialImageGenerationConfigDefaults(): SocialImagesGeneration
 
 // Returns the social image generation config for a given type
 export function getSocialImageGenerationConfigForType(
-	type: SocialImageTypes,
-): JobOptions {
-	const config =
-		socialImagesGenerationConfig.types[
-			type as keyof (typeof socialImagesGenerationConfig)['types']
-		];
+	type: SocialImageType,
+): Partial<JobOptions> {
+	const config = socialImagesGenerationConfig.types[type];
 
 	if (!config) {
 		console.warn(`Social image generation config for '${type}' not found`);

src/common/types.ts

@@ -103,24 +103,26 @@ export interface PagesMetadataConfig {
 	[pagePath: AbsolutePathString]: PageMetadata;
 }
 
-// TODO: Use this type in interfaces below
-// TODO: Change this to an enum
-export type SocialImageTypes = 'og' | 'twitter';
+// Variant names for social images
+export enum SocialImageType {
+	OpenGraph = 'og',
+	Twitter = 'twitter',
+}
 
 // Raw social image metadata config
 export interface SocialImagesGenerationConfig {
-	defaults: DefaultOptions;
+	defaults: Partial<DefaultOptions>;
 	types: {
-		og: JobOptions;
-		twitter: JobOptions;
+		[SocialImageType.OpenGraph]: Partial<JobOptions>;
+		[SocialImageType.Twitter]: Partial<JobOptions>;
 	};
 }
 
 // Social image metadata added to the pageContext of pages when they are created
 export interface SocialImagesMetadataProp {
 	socialImagesMetadata: {
-		og: JobOptions;
-		twitter: JobOptions;
+		[SocialImageType.OpenGraph]: JobOptions;
+		[SocialImageType.Twitter]: JobOptions;
 	};
 }
 

src/components/layout/section.tsx

@@ -34,8 +34,8 @@ export const Section = forwardRef(
 		ref: ForwardedRef<HTMLElement>,
 	) => {
 		const classNameProps = getClassNameProps(
-			'flex z-10 flex-col justify-center w-full',
-			responsive && 'w-10/12 max-w-5xl lg:w-9/12 xl:w-8/12', // Adjust width based on screen size
+			'flex z-10 flex-col justify-center break-inside-avoid-page',
+			responsive ? 'w-10/12 lg:w-9/12 xl:w-8/12 max-w-5xl' : 'w-full', // Adjust width based on screen size
 			className,
 		);
 		const sectionHeaderClassNameProps = getClassNameProps(

src/components/seo/page-head.tsx

@@ -6,6 +6,7 @@
 import { getSiteMetadata, getTheme } from '../../common/config-manager';
 import {
 	type PageMetadata,
+	SocialImageType,
 	type SocialImagesMetadataProp,
 	ThemeType,
 } from '../../common/types';
@@ -32,9 +33,11 @@ export function PageHead({
 	socialImagesMetadata,
 }: Props) {
 	const pageUrl = getAbsoluteUrl(path);
-	const ogImageUrl = getAbsoluteUrl(socialImagesMetadata.og.imagePath);
+	const ogImageUrl = getAbsoluteUrl(
+		socialImagesMetadata[SocialImageType.OpenGraph].imagePath,
+	);
 	const twitterImageUrl = getAbsoluteUrl(
-		socialImagesMetadata.twitter.imagePath,
+		socialImagesMetadata[SocialImageType.Twitter].imagePath,
 	);
 
 	return (
@@ -54,11 +57,15 @@ export function PageHead({
 			<meta property="og:image:type" content={getMimeType(ogImageUrl)} />
 			<meta
 				property="og:image:width"
-				content={socialImagesMetadata.og.size.width.toString()}
+				content={socialImagesMetadata[
+					SocialImageType.OpenGraph
+				].size.width.toString()}
 			/>
 			<meta
 				property="og:image:height"
-				content={socialImagesMetadata.og.size.height.toString()}
+				content={socialImagesMetadata[
+					SocialImageType.OpenGraph
+				].size.height.toString()}
 			/>
 
 			{/* Twitter meta tags */}

src/config/social-images-generation.ts

@@ -3,7 +3,10 @@
 	--------------------------------------
 */
 
-import type { SocialImagesGenerationConfig } from '../common/types';
+import {
+	SocialImageType,
+	type SocialImagesGenerationConfig,
+} from '../common/types';
 
 export const socialImagesGenerationConfig: SocialImagesGenerationConfig = {
 	defaults: {
@@ -12,13 +15,13 @@ export const socialImagesGenerationConfig: SocialImagesGenerationConfig = {
 		verbose: false,
 	},
 	types: {
-		og: {
+		[SocialImageType.OpenGraph]: {
 			size: {
 				width: 2400,
 				height: 1260,
 			},
 		},
-		twitter: {
+		[SocialImageType.Twitter]: {
 			size: {
 				width: 2400,
 				height: 1200,

src/content/resume-highlights.md

@@ -1,8 +1,6 @@
 - **Goal Getter:** I am seeking to benefit your company and gain valuable skills as a software developer or software engineer.
-- **Creative Powerhouse:** I have a passion for designing, creating, and sharing new things. I have over 20 public projects on [GitHub] with a combined 60+ stars.
+- **Creative Powerhouse:** I have a passion for designing, creating, and sharing new things. I have over 20 public projects on GitHub with a combined 60+ stars.
 - **Polyglot Programmer:** I am experienced with a variety of programming languages and tools including React, TypeScript, CSS, Python, C/C++, Java, and SQL.
 - **Team Player:** I am comfortable working both independently and as part of a team. I have experience working on Agile projects and in self-organized teams.
 - **Problem Solver:** I am capable of working with tight time constraints, limited human resources, and in challenging conditions as per previous work experience.
 - **Lifelong Learner:** I am creative and excited to learn more tools and technologies in the future!
-
-[GitHub]: https://github.com/jerboa88

src/node/utils.ts

@@ -7,7 +7,7 @@ import type { Actions, Page } from 'gatsby';
 import { createImage } from 'gatsby-plugin-component-to-image';
 import { getSocialImageGenerationConfigForType } from '../common/config-manager';
 import { SOCIAL_IMAGES_DIR as SOCIAL_IMAGE_PAGES_DIR } from '../common/constants';
-import type { AbsolutePathString, SocialImageTypes } from '../common/types';
+import { type AbsolutePathString, SocialImageType } from '../common/types';
 import { assertIsDefined, removeTrailingSlash } from '../common/utils';
 import { info } from './logger';
 
@@ -59,7 +59,7 @@ export function setGatsbyNodeHelpers(
  * @returns The metadata for the generated social image
  */
 function createSocialImage(
-	type: SocialImageTypes,
+	type: SocialImageType,
 	{ path, component, context }: CreateSocialImagesOptions,
 ) {
 	const pagePath = join(SOCIAL_IMAGE_PAGES_DIR, type, path);
@@ -83,8 +83,14 @@ function createSocialImage(
  */
 function createSocialImages(options: CreateSocialImagesOptions) {
 	return {
-		og: createSocialImage('og', options),
-		twitter: createSocialImage('twitter', options),
+		[SocialImageType.OpenGraph]: createSocialImage(
+			SocialImageType.OpenGraph,
+			options,
+		),
+		[SocialImageType.Twitter]: createSocialImage(
+			SocialImageType.Twitter,
+			options,
+		),
 	};
 }