repomaa/cv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix pdf building

Browse Source
This commit is contained in:
Joakim Repomaa
2026-02-19 13:13:52 +02:00
parent 209770e8aa
commit 50af9cae3e
14 changed files with 493 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.css
View File

@@ -3,6 +3,7 @@
/* Iosevka font - self-hosted via npm */
@import '@fontsource/iosevka/400.css';
@import '@fontsource/iosevka/700.css';
@import '@fontsource-variable/roboto-condensed';
html {
color-scheme: light dark;
@@ -17,7 +18,7 @@ body {
@theme {
/* Font families */
--font-mono: 'Iosevka', ui-monospace, monospace;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-sans: 'Roboto Condensed Variable', ui-sans-serif, sans-serif;
/* Web layout - 5 colors using light-dark() for dark mode */
--color-bg: light-dark(#fafafa, #0c0c0e);

4
src/lib/components/PDFTags.svelte
View File

@@ -7,9 +7,9 @@
</script>
{#if tags.length > 0}
<div class="text-xs text-pdf-muted">
<div class="text-xs text-pdf-muted flex flex-wrap gap-0.5">
{#each tags as tag}
<span class="first:before:content-[''] before:content-['_•_']">{tag}</span>
<span class="first:before:content-[''] before:content-['_•_'] whitespace-nowrap">{tag}</span>
{/each}
</div>
{/if}

2
src/routes/+layout.svelte → src/routes/(web)/+layout.svelte
View File

@@ -1,6 +1,6 @@
<script>
let { children } = $props();
import '../app.css';
import '../../app.css';
</script>
<div

0
src/routes/+page.server.ts → src/routes/(web)/+page.server.ts
View File

2
src/routes/+page.svelte → src/routes/(web)/+page.svelte
View File

@@ -54,7 +54,7 @@
Built with SvelteKit + Sveltia CMS
</p>
<p class="mt-2">
<a href="/admin/index.html" class="text-accent hover:text-accent/80 transition-colors">
<a href="/admin" class="text-accent hover:text-accent/80 transition-colors">
Edit Content →
</a>
</p>

2
src/routes/+layout.server.ts Normal file
View File

@@ -0,0 +1,2 @@
export const prerender = true;
export const trailingSlash = 'always';

1
src/routes/admin/+page.server.ts
View File

@@ -1 +0,0 @@
export const ssr = false;

196
src/routes/admin/+page.svelte
View File

@@ -1,102 +1,106 @@
<script lang="ts">
import CMS from '@sveltia/cms';
import { onMount } from 'svelte';
CMS.init({
config: {
load_config_file: false,
media_folder: 'src/lib/media',
backend: {
name: 'gitea',
app_id: 'a046b53c-787a-4b76-bd3a-633221a38954',
repo: 'repomaa/cv',
onMount(async () => {
const CMS = await import('@sveltia/cms');
CMS.init({
config: {
load_config_file: false,
media_folder: 'src/lib/media',
backend: {
name: 'gitea',
app_id: 'a046b53c-787a-4b76-bd3a-633221a38954',
repo: 'repomaa/cv',
},
collections: [
{
name: 'profile',
label: 'Profile',
format: 'json',
files: [
{
name: 'profile',
label: 'Profile',
file: 'src/lib/content/profile.json',
fields: [
{ name: 'name', label: 'Name', widget: 'string' },
{ name: 'title', label: 'Title', widget: 'string' },
{ name: 'email', label: 'Email', widget: 'string' },
{ name: 'phone', label: 'Phone', widget: 'string', required: false },
{ name: 'location', label: 'Location', widget: 'string' },
{ name: 'website', label: 'Website', widget: 'string', required: false },
{ name: 'github', label: 'GitHub', widget: 'string' },
{ name: 'summary', label: 'Summary', widget: 'text' },
],
},
],
},
{
name: 'experience',
label: 'Experience',
format: 'json',
folder: 'src/lib/content/experience',
fields: [
{ name: 'company', label: 'Company', widget: 'string' },
{ name: 'position', label: 'Position', widget: 'string' },
{ name: 'location', label: 'Location', widget: 'string', required: false },
{ name: 'startDate', label: 'Start Date', widget: 'datetime', time_format: false },
{
name: 'endDate',
label: 'End Date',
widget: 'datetime',
time_format: false,
required: false,
},
{ name: 'description', label: 'Description', widget: 'markdown' },
{
name: 'technologies',
label: 'Technologies',
widget: 'list',
field: { label: 'Technology', widget: 'string' },
},
],
},
{
name: 'education',
label: 'Education',
format: 'json',
folder: 'src/lib/content/education',
fields: [
{ name: 'institution', label: 'Institution', widget: 'string' },
{ name: 'degree', label: 'Degree', widget: 'string' },
{ name: 'field', label: 'Field', widget: 'string', required: false },
{ name: 'location', label: 'Location', widget: 'string', required: false },
{ name: 'startDate', label: 'Start Date', widget: 'datetime', time_format: false },
{
name: 'endDate',
label: 'End Date',
widget: 'datetime',
time_format: false,
required: false,
},
{ name: 'description', label: 'Description', widget: 'markdown', required: false },
],
},
{
name: 'skills',
label: 'Skills',
format: 'json',
folder: 'src/lib/content/skills',
fields: [
{ name: 'category', label: 'Category', widget: 'string' },
{
name: 'items',
label: 'Skills',
widget: 'list',
field: { label: 'Skill', widget: 'string' },
},
],
},
],
},
collections: [
{
name: 'profile',
label: 'Profile',
format: 'json',
files: [
{
name: 'profile',
label: 'Profile',
file: 'src/lib/content/profile.json',
fields: [
{ name: 'name', label: 'Name', widget: 'string' },
{ name: 'title', label: 'Title', widget: 'string' },
{ name: 'email', label: 'Email', widget: 'string' },
{ name: 'phone', label: 'Phone', widget: 'string', required: false },
{ name: 'location', label: 'Location', widget: 'string' },
{ name: 'website', label: 'Website', widget: 'string', required: false },
{ name: 'github', label: 'GitHub', widget: 'string' },
{ name: 'summary', label: 'Summary', widget: 'text' },
],
},
],
},
{
name: 'experience',
label: 'Experience',
format: 'json',
folder: 'src/lib/content/experience',
fields: [
{ name: 'company', label: 'Company', widget: 'string' },
{ name: 'position', label: 'Position', widget: 'string' },
{ name: 'location', label: 'Location', widget: 'string', required: false },
{ name: 'startDate', label: 'Start Date', widget: 'datetime', time_format: false },
{
name: 'endDate',
label: 'End Date',
widget: 'datetime',
time_format: false,
required: false,
},
{ name: 'description', label: 'Description', widget: 'markdown' },
{
name: 'technologies',
label: 'Technologies',
widget: 'list',
field: { label: 'Technology', widget: 'string' },
},
],
},
{
name: 'education',
label: 'Education',
format: 'json',
folder: 'src/lib/content/education',
fields: [
{ name: 'institution', label: 'Institution', widget: 'string' },
{ name: 'degree', label: 'Degree', widget: 'string' },
{ name: 'field', label: 'Field', widget: 'string', required: false },
{ name: 'location', label: 'Location', widget: 'string', required: false },
{ name: 'startDate', label: 'Start Date', widget: 'datetime', time_format: false },
{
name: 'endDate',
label: 'End Date',
widget: 'datetime',
time_format: false,
required: false,
},
{ name: 'description', label: 'Description', widget: 'markdown', required: false },
],
},
{
name: 'skills',
label: 'Skills',
format: 'json',
folder: 'src/lib/content/skills',
fields: [
{ name: 'category', label: 'Category', widget: 'string' },
{
name: 'items',
label: 'Skills',
widget: 'list',
field: { label: 'Skill', widget: 'string' },
},
],
},
],
},
});
});
</script>

102
src/routes/joakim-repomaa-cv.pdf/+server.ts
View File

@@ -1,9 +1,14 @@
import type { RequestHandler } from './$types.js';
import type { LaunchOptions } from 'puppeteer';
import puppeteer from 'puppeteer';
import * as cheerio from 'cheerio';
import path from 'path';
import { opendir, writeFile, mkdtemp, copyFile } from 'fs/promises';
import { tmpdir } from 'os';
// This is a dynamic endpoint - not prerenderable
export const prerender = false;
export const prerender = true;
const cwd = process.cwd();
// PDF generation configuration
const PDF_CONFIG = {
@@ -23,13 +28,6 @@ const getLaunchOptions = (): LaunchOptions => {
const chromePath = process.env.PUPPETEER_EXECUTABLE_PATH;
const options: LaunchOptions = {
headless: true,
args: [
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-dev-shm-usage',
'--disable-accelerated-2d-canvas',
'--disable-gpu',
],
};
if (chromePath) {
options.executablePath = chromePath;
@@ -37,43 +35,71 @@ const getLaunchOptions = (): LaunchOptions => {
return options;
};
export const GET: RequestHandler = async ({ url }: { url: URL }) => {
// Check if Chrome/Puppeteer is available
const chromePath = process.env.PUPPETEER_EXECUTABLE_PATH;
const isCI = process.env.CI || process.env.CONTINUOUS_INTEGRATION;
if (!chromePath && !isCI) {
// Return 503 if Chrome is not available
return new Response(
JSON.stringify({
error: 'PDF generation not available',
message:
'Chrome/Chromium is not configured. Set PUPPETEER_EXECUTABLE_PATH environment variable.',
}),
{
status: 503,
headers: { 'Content-Type': 'application/json' },
}
);
}
export const GET: RequestHandler = async ({ url, fetch }) => {
const tmpDir = await mkdtemp(path.join(tmpdir(), 'cv-pdf-genration-'));
const tmpFile = (url: string) => {
const filename = path.basename(url);
const tempFile = path.join(tmpDir, filename);
return tempFile;
};
try {
// Get the base URL for the current request
const baseUrl = `${url.protocol}//${url.host}`;
const pdfUrl = `${baseUrl}/print/`;
// Launch browser
const browser = await puppeteer.launch(getLaunchOptions());
const page = await browser.newPage();
const printResponse = await fetch('/print/');
const html = await printResponse.text();
const $ = cheerio.load(html);
const fileDownloads: Record<string, string> = {};
$('script[src], link[rel="stylesheet"], img[src]').each((i, el) => {
if (el.tagName === 'link') {
const href = $(el).attr('href');
if (href) {
const tempFile = (fileDownloads[href] ||= tmpFile(href));
$(el).attr('href', `file://${tempFile}`);
}
} else {
const src = $(el).attr('src');
if (src) {
const tempFile = (fileDownloads[src] ||= tmpFile(src));
$(el).attr('src', `file://${tempFile}`);
}
}
});
$('style[src]').each((i, el) => {
const src = $(el).attr('src');
if (src) {
const tempFile = (fileDownloads[src] ||= tmpFile(src));
$(el).attr('src', `file://${tempFile}`);
}
});
$('style:not([src])').each((i, el) => {
const content = $(el).text();
$(el).text(
content.replaceAll(/(?<=url\(".+?)(?=")/g, (match) => {
const url = match[0];
const tempFile = (fileDownloads[url] ||= tmpFile(url));
return `file://${tempFile}`;
})
);
});
const dir = await opendir('.svelte-kit/output/client/_app/immutable/assets');
for await (const file of dir) {
await copyFile(path.join(file.parentPath, file.name), tmpFile(file.name));
}
const htmlFile = path.join(tmpDir, 'index.html');
await writeFile(htmlFile, $.root().html() ?? '');
// Navigate to the PDF page with increased timeout
// waitUntil: 'networkidle2' waits for 2 network connections to be idle
// This is more lenient than 'networkidle0' which waits for 0 connections
await page.goto(pdfUrl, {
waitUntil: 'networkidle2',
timeout: 120000, // Increased from 30s to 120s to handle slow GitHub API calls
});
await page.goto(`file://${htmlFile}`, { waitUntil: 'networkidle2' });
// Wait for fonts to load
await page.evaluateHandle('document.fonts.ready');
@@ -84,7 +110,7 @@ export const GET: RequestHandler = async ({ url }: { url: URL }) => {
await browser.close();
// Create Blob from buffer for Response
const pdfBlob = new Blob([pdfBuffer as unknown as ArrayBuffer], { type: 'application/pdf' });
const pdfBlob = new Blob([Buffer.from(pdfBuffer).buffer], { type: 'application/pdf' });
// Return PDF with appropriate headers
return new Response(pdfBlob, {

6
src/routes/print/+layout.svelte Normal file
View File

@@ -0,0 +1,6 @@
<script>
let { children } = $props();
import '../../app.css';
</script>
{@render children()}