Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

151 configure pdf generation for resume #157

Merged
merged 4 commits into from
Jul 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions gatsby-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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/],
},
},
},
Expand Down
11 changes: 4 additions & 7 deletions src/common/config-manager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import type {
PageMetadata,
Role,
SentenceString,
SocialImageTypes,
SocialImageType,
SocialImagesGenerationConfig,
Theme,
ThemesConfig,
Expand Down Expand Up @@ -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`);
Expand Down
18 changes: 10 additions & 8 deletions src/common/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/layout/section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
15 changes: 11 additions & 4 deletions src/components/seo/page-head.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { getSiteMetadata, getTheme } from '../../common/config-manager';
import {
type PageMetadata,
SocialImageType,
type SocialImagesMetadataProp,
ThemeType,
} from '../../common/types';
Expand All @@ -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 (
Expand All @@ -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 */}
Expand Down
9 changes: 6 additions & 3 deletions src/config/social-images-generation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
--------------------------------------
*/

import type { SocialImagesGenerationConfig } from '../common/types';
import {
SocialImageType,
type SocialImagesGenerationConfig,
} from '../common/types';

export const socialImagesGenerationConfig: SocialImagesGenerationConfig = {
defaults: {
Expand All @@ -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,
Expand Down
4 changes: 1 addition & 3 deletions src/content/resume-highlights.md
Original file line number Diff line number Diff line change
@@ -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
14 changes: 10 additions & 4 deletions src/node/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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);
Expand All @@ -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,
),
};
}

Expand Down