From 6500bebd408d10a45a589fbdd8dc1e51d04f4493 Mon Sep 17 00:00:00 2001 From: John Goodliff Date: Wed, 17 Jul 2024 15:48:34 -0600 Subject: [PATCH 1/4] Replace hardcoded social image types with enum. Improve typing for social image generation config --- gatsby-config.ts | 6 ++++-- src/common/config-manager.ts | 11 ++++------- src/common/types.ts | 18 ++++++++++-------- src/components/seo/page-head.tsx | 15 +++++++++++---- src/config/social-images-generation.ts | 9 ++++++--- src/node/utils.ts | 14 ++++++++++---- 6 files changed, 45 insertions(+), 28 deletions(-) diff --git a/gatsby-config.ts b/gatsby-config.ts index d77b847..021a9e2 100644 --- a/gatsby-config.ts +++ b/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({ diff --git a/src/common/config-manager.ts b/src/common/config-manager.ts index cc2b8b3..d0c1b30 100644 --- a/src/common/config-manager.ts +++ b/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 { + const config = socialImagesGenerationConfig.types[type]; if (!config) { console.warn(`Social image generation config for '${type}' not found`); diff --git a/src/common/types.ts b/src/common/types.ts index 742242c..eb3f168 100644 --- a/src/common/types.ts +++ b/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; types: { - og: JobOptions; - twitter: JobOptions; + [SocialImageType.OpenGraph]: Partial; + [SocialImageType.Twitter]: Partial; }; } // 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; }; } diff --git a/src/components/seo/page-head.tsx b/src/components/seo/page-head.tsx index 93960be..d5a52d5 100644 --- a/src/components/seo/page-head.tsx +++ b/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({ {/* Twitter meta tags */} diff --git a/src/config/social-images-generation.ts b/src/config/social-images-generation.ts index 57556d0..6f271e5 100644 --- a/src/config/social-images-generation.ts +++ b/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, diff --git a/src/node/utils.ts b/src/node/utils.ts index 1deca7c..6fb2d1e 100644 --- a/src/node/utils.ts +++ b/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, + ), }; } From 47c4481ee128e02fbfa3ed5923a789914911f2e9 Mon Sep 17 00:00:00 2001 From: John Goodliff Date: Wed, 17 Jul 2024 15:49:10 -0600 Subject: [PATCH 2/4] Remove GitHub link from resume highlights as there is already a link in the header --- src/content/resume-highlights.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/content/resume-highlights.md b/src/content/resume-highlights.md index f7a429e..e106350 100644 --- a/src/content/resume-highlights.md +++ b/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 From d0f00bbc664c1ac1233949de4c94ce18faac756a Mon Sep 17 00:00:00 2001 From: John Goodliff Date: Thu, 18 Jul 2024 14:55:27 -0600 Subject: [PATCH 3/4] Fix theme override not working on resume page --- gatsby-config.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/gatsby-config.ts b/gatsby-config.ts index 021a9e2..e7ee085 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -55,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/], }, }, }, From f3f65b63de26b41447d6231abbfed2dd246212c4 Mon Sep 17 00:00:00 2001 From: John Goodliff Date: Thu, 18 Jul 2024 14:58:15 -0600 Subject: [PATCH 4/4] Fix issue with section widths --- src/components/layout/section.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layout/section.tsx b/src/components/layout/section.tsx index df61ca6..ed598a8 100644 --- a/src/components/layout/section.tsx +++ b/src/components/layout/section.tsx @@ -34,8 +34,8 @@ export const Section = forwardRef( ref: ForwardedRef, ) => { 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(