I think using tailwindcss-radix-colors would simplify the project significantly and make the color setup easier to understand. I will warn you, although there is this library react-pdf-tailwind that allows the use of tailwind in react-pdf, I was not able to use it because the arbitrary colors don't seem to work with rgb/rgba/hsv functions and the tailwindcss-radix-colors classes don't seem to work in react-pdf either.

i Deploy project to vercel and the error is Warning: Bun is used as a package manager at build time only, not at runtime with Functions

We need a secure way of accessing private information to include in the résumé. For example, if the owner wants to be able to generate a special URL that will generate the same résumé that features additional contact information not accessible to the public (email, phone number, address, etc). The owner could send this private link to an employer of use it to generate a PDF for themselves.

The new Route Handlers support an edge runtime.

I briefly tried to work on this, but there seem to be issues with @vercel/og with Route Handlers. It may not be possible until there's a fix.

vercel/next.js#46097

I want my PDF to be light so it's printable (I would suggest this be the default, and that the config for PDF and web be separate). I can't seem to change the theme universally though.

In the readme, it's stated:

accentColor: string. The name of an accent palette from Radix UI Colors. If using a standard color, the contrasting text color will be white, and if using a bright color, the contrasting text color will be black.

However, when changing the accent color to one of the "bright" colors e.g. "sky", the background does not become light. When the neutral color is changed to grey the mode does change to light background, but the lack of contrast makes some of the text invisible, and most of it nearly unreadable.

In the chart you show each accent color could be dark or light but above it's stated accent color determines light/dark mode.

I have added a private field of email in this format:

-----
label: xxx
-----

[email protected]

but it wont show up. i have added private key in the env

The use of the Prose component to render HTML generated from markdown makes creating an integration for CMS content messy. For example, Prismic uses the formatted text field which is rendered through a react component so I had to edit the Prose component to check the type. This problem duplicates itself in the PDF rendering as well, requiring a similar PdfProse. Perhaps it would have been helpful to make the function that converts the property to content be configurable. For links, you can't store icons in a CMS, so it would have been better to use a iconName as is stated falsely in the readme but instead, the fa* icons are on the icon property. I regret this project is not more backward-compatible but there are some great improvements so I feel it's worth the effort.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @heroicons/react to v2.1.5
• Update dependency bun-types to v1.1.20
• Update dependency prettier to v3.3.3
• Update dependency tailwindcss to v3.4.5
• Update nextjs monorepo to v14.2.5 (eslint-config-next, next)
• Update dependency webpack to v5.93.0
• Update dependency eslint to v9
• Update oven-sh/setup-bun action to v2
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Hi, I noticed that there isn't a manifest.json reference to Next JS app Head: "link rel="manifest" href="/manifest.json". Is that on purpose? Happy to quickly suggest the update as part of the DefaultTags.

Also, I absolutely love this project @colinhemphill! Thank you for sharing. The PDF generator API works like magic!

Just forked and deployed on Vercel, not even set up the optional $PRIVATE_KEY environment variable.

Vercel Functions log told me this:

Error: Unknown font format
    at Module.$d636bc798e7178db$export$185802fd694ee1f5 (file:///var/task/node_modules/fontkit/dist/module.mjs:41:11)
    at FontSource._callee2$ (file:///var/task/node_modules/@react-pdf/font/lib/index.js:106:33)
    at tryCatch (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
    at Generator.<anonymous> (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
    at Generator.next (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
    at asyncGeneratorStep (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ Error: Unknown font format
    at Module.$d636bc798e7178db$export$185802fd694ee1f5 (file:///var/task/node_modules/fontkit/dist/module.mjs:41:11)
    at FontSource._callee2$ (file:///var/task/node_modules/@react-pdf/font/lib/index.js:106:33)
    at tryCatch (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
    at Generator.<anonymous> (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
    at Generator.next (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
    at asyncGeneratorStep (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error: Unknown font format
    at Module.$d636bc798e7178db$export$185802fd694ee1f5 (file:///var/task/node_modules/fontkit/dist/module.mjs:41:11)
    at FontSource._callee2$ (file:///var/task/node_modules/@react-pdf/font/lib/index.js:106:33)
    at tryCatch (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
    at Generator.<anonymous> (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
    at Generator.next (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
    at asyncGeneratorStep (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error: Runtime exited with error: exit status 1
Runtime.ExitError

How do we solve this problem?

⚠️ it's a common practice for employers and recruiters to convert PDF to doc. When they do this, the resumes from this project will have text that is mangled (it will also distort text copied from within the PDF).

This is an issue with react-pdf and it looks like there's a workaround here that requires modifying the font files. As reported there, I couldn't get them to work with the SourceSansPro so I'd recommend changing the font you're using. I tried a couple that made "Contact information" overflow the sidebar but Lato seems to work nicely.

Could be related to this issue

I ended up building this into a fork. PR forthcoming!

The new Route Handlers support a Node.js runtime with streaming, so in theory we can move the PDF generator from /pages/api/pdf.ts to /app/api/pdf/route.ts. I haven't tested how straightforward this will be.

Hi, first of all congratulations for this awesome project! I have just deployed it and it has been pretty easy. I have thought about some improvements that could be made to the general workflow and to avoid extra boilerplate:

1. The CMS part seems to be redundant and could be removed as it only adds boilerplate and overhead to the configuration and the code. To solve this I have thought about just having a Json Resume Schema in a folder that the user fills and extract all the information from there (even though its not as intuitive as a headless CMS), or create markdown templates as you say in #4 from that json data. Another option would be using the Linkedin API, because all the information I have added to the CMS is already in my linkedin. Unfortunately it seems that they dont give easy access to experience, interests and skills info about a profile, only basic profile data like email, name and so on.
2. I have used Prismic and it was quite easy to use even though its my first time using a headless CMS. However, it would be easier if you add just some pictures of the contenful and prismic dashboards to map better the info you request with the CMS interface. For example, it took me like 10 minutes (maybe I am just stupid) to realize that the schema you mention in the CMS setup is a type in the prismic dashboard, and the text type is a Key Text element in the type creation.
3. There is some information that could be added, for example languages, volunteer, publications, etc (just based on the JSON Resume Schema) . Anyway I suppose you already know it ;)
4. More information for devs about how the project is structured, how to modify x section, etc would be a + since for example my knowledge of NextJS, CSS, and so on is still in the Familiar level ;P

What do you think? I reached your repo because I was looking for some templates and ideas to create my own web, here you have some links with beautiful designs and ideas that might help you:

• https://github.com/samuelkraft/samuelkraft-next
• https://github.com/zachweinberg/personal-site
• https://github.com/wirtzdan/website
• https://github.com/grikomsn/griko.id
• https://github.com/timolins/timo-sh
• https://github.com/ShinteiMai/graphql-next-resume

Again, thank you for your time to create this! I think it has the potential to be very popular in the NextJS ecosystem! If you need help just tell me ;)

react-pdf hyphenates words for wrapping purposes by default. I'm removing this as demonstrated here in the docs.

Hello,

It seems there is an issue running the project.

npm install don't have any issue, but using npm run dev or npm build the app crashed with this message :

> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- error Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
file:///home/vince/development/resume-next/node_modules/@effect-ts/otel/_mjs/Processor/Simple/index.mjs:7
import { ConsoleSpanExporter, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
         ^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ConsoleSpanExporter' not found. The requested module '@opentelemetry/sdk-trace-base' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@opentelemetry/sdk-trace-base';
const { ConsoleSpanExporter, SimpleSpanProcessor } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:435:15)
    at async loadConfig (/home/vince/development/resume-next/node_modules/next/dist/server/config.js:507:36)
    at async NextServer.prepare (/home/vince/development/resume-next/node_modules/next/dist/server/next.js:160:24)
    at async Server.<anonymous> (/home/vince/development/resume-next/node_modules/next/dist/server/lib/render-server.js:124:17) {
  type: 'SyntaxError'
}

I've tried to upgrade dependency, but this doesn't resolve this issue.

Node version is : 18.2.0
Npm version is : 8.9.0

Have you got any idea to bypass this issue ?

Thank you in advance

Although I didn't change the lambda function for generating the pdf, editing the pdf template to remove the page break caused Vercel deploy to fail because the lambda exceeded limit size. I can't understand why this would have happened because the bulk of the function is from the chrome-aws-lambda dependency and it is pinned in the repo. My only guess is that the limit changed. There's a known issue with chrome-aws-lambda being too big. Downgrading all the way to 2.1.1 got my deploy under the limit. However, this version doesn't work with the code and clicking the PDF button results in a 500 error on the request with response body Internal Server Error.

Irrespective of which prefers-color-scheme value is set, the site contains some text that is very low contrast (though the low-contrast text varies based on light/dark) when the Night Eye Chrome extension is active. For this reason, I'm going to switch to using underline for emphasis.

The default CMS integration for the project should use Markdown files that are stored in the repo. This option would be the simplest for a developer to set up since it wouldn't require any external service setup or webhooks. The generator repo should include templates, which would allow the project to work with zero configuration.

Will flesh out this request soon, but as a placeholder I'll mention that I'm currently looking at various optimizations to reduce the bundle sizes. One major factor is that we are currently importing the entirety of Fontawesome. Folks looking to host their own resumé and optimize for themselves should use the library.add() feature to only include icons they need, but I'm looking to see if there's some way to improve this more broadly.