Merge pull request #1 from kyleaupton/develop

feat: add ability to define multiple PDF variants

Author: kyleaupton

.eslintrc.cjs

@@ -27,6 +27,7 @@ module.exports = {
     project: './tsconfig.json',
   },
   rules: {
+    'import/extensions': 0,
     '@typescript-eslint/explicit-function-return-type': 0,
     '@typescript-eslint/strict-boolean-expressions': 0,
     '@typescript-eslint/ban-ts-comment': 0,

.github/workflows/build.yml

@@ -22,11 +22,8 @@ jobs:
         env:
           NODE_ENV: development
 
-      - name: Build PDF
-        run: yarn build
-
-      - name: Upload PDF
-        run: yarn upload
+      - name: Build + Upload PDFs
+        run: npm run build --deploy
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

README.md

@@ -1,20 +1,16 @@
-# Professional Resume of Kyle Upton
+# Resume of Kyle Upton
 
 [![Build Status](https://github.com/kyleaupton/resume/actions/workflows/build.yml/badge.svg)](https://github.com/kyleaupton/resume/actions/workflows/build.yml)
 
 ## Introduction
 
-Welcome to the repository that hosts the source code for my professional resume. This project, built using React, compiles into a PDF file for easy distribution and printing. The PDF generation is handled by a package known as [`react-pdf/renderer`](https://www.npmjs.com/package/@react-pdf/renderer).
-
-## User Interface
-
-Despite being a React-based project, it's important to note that not all HTML and CSS can be directly translated into a PDF. The `react-pdf/renderer` package necessitates that all template code adheres to the [`React primitives`](https://github.com/lelandrichardson/react-primitives) specification.
+This is the repository that hosts the source code for my resume. This project, built using React, renders to a PDF file for easy distribution and printing. The PDF generation is done by [`react-pdf/renderer`](https://www.npmjs.com/package/@react-pdf/renderer).
 
 ## Continuous Deployment
 
-The project is set up with a continuous deployment pipeline. Upon every commit to the `main` branch, a GitHub action is triggered. This action builds the PDF and subsequently uploads it to a publicly accessible AWS S3 bucket, from where it can be downloaded.
+The project is set up with a continuous deployment pipeline. Upon every commit to the `main` branch, a GitHub action is triggered. This action builds the PDF and uploads it to a publicly accessible AWS S3 bucket, from where it can be downloaded.
 
-## Development Server Configuration
+## Development Server
 
 To set up the development server, execute the following commands:
 
@@ -23,3 +19,17 @@ yarn install
 
 yarn dev
 ```
+
+## Deploy PDFs
+
+```bash
+yarn build --deploy
+```
+
+## Build PDFs
+
+Sometimes it is helpful to build the PDFs and not deploy them. You can do that with the following:
+
+```bash
+yarn build
+```

package.json

@@ -5,8 +5,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite --open",
-    "build": "npx tsx src/build.ts",
-    "upload": "node scripts/upload.mjs"
+    "checkTypes": "tsc --noEmit",
+    "build": "tsx scripts/build.ts",
+    "deploy": "tsx scripts/build.ts --deploy"
   },
   "dependencies": {
     "@react-pdf/renderer": "^3.1.13",
@@ -35,7 +36,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "tsx": "^4.1.3",
-    "typescript": "*",
+    "typescript": "^5.6.2",
     "vite": "^4.4.5"
   }
 }

public/attempt-2-min.png

@@ -0,0 +1,70 @@
+import fs from 'node:fs/promises';
+import { createReadStream } from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+import { renderToFile } from '@react-pdf/renderer';
+import { S3Client, PutObjectCommand, HeadObjectCommand } from '@aws-sdk/client-s3'
+import 'dotenv/config'
+
+const BUCKET = 'upton-public-assets';
+const PREFIX = 'resumes';
+
+// Env validation
+const requiredEnv = ['AWS_ACCESS_KEY_ID', 'AWS_SECRET_ACCESS_KEY']
+for (const item of requiredEnv) {
+  if (!process.env[item]) {
+    throw Error(`Missing env item ${item}`)
+  }
+}
+
+// Create S3 client
+const client = new S3Client({
+  region: 'us-east-1',
+})
+
+//
+// Helpers
+//
+const key = (pdfName: string) => {
+  return `${PREFIX}/${pdfName}`;
+}
+
+//
+// Main
+//
+const __project = path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), '..');
+const __pdfs = path.join(__project, 'src', 'variants');
+const __dist = path.join(__project, 'dist');
+
+// Ensure dist directory exists
+await fs.mkdir(__dist, { recursive: true });
+
+// Get list of PDFs to render
+const pdfs = await fs.readdir(__pdfs);
+
+for (const pdf of pdfs) {
+  const name = `${pdf}.pdf`
+  console.log('Processing', name);
+
+  const __out = path.join(__project, 'dist', name);
+  const PDF = (await import(path.join(__pdfs, pdf))).default;
+  await renderToFile(PDF(), __out);
+
+  console.log('Rendered', __out);
+
+  if (process.argv.includes('--deploy')) {
+    console.log('Uploading', name);
+    await client.send(
+      new PutObjectCommand({
+        Bucket: BUCKET,
+        Key: key(name),
+        ContentDisposition: 'inline',
+        ContentType: 'application/pdf',
+        Body: createReadStream(__out)
+      })
+    );
+  }
+
+  console.log('Done', name);
+  console.log('-'.repeat(80));
+}