feat: resume complete

GUIDE_AND_TRACKER.md

@@ -12,10 +12,8 @@
 
 #### Tasks
 
-- scale resume on small devices
 - Something wrong with React rendering on
   https://vighnesh153.dev/projects/tsx-playground
-- upload private content from phone to firebase
 - Blog: Why i moved away from react and next js
 - Users page
 - User profile page

tools-nodejs/vighnesh153-astro/website/package.json

@@ -6,7 +6,8 @@
   "license": "MIT",
   "scripts": {
     "dev": "astro dev --host",
-    "prebuild": "astro check",
+    "build:generate-resume-pdf": "npx playwright test -c playwright-pdf-generation.config.ts ./scripts/resume-pdf.spec.ts",
+    "prebuild": "astro check && npm run build:generate-resume-pdf",
     "build": "astro build",
     "lint": "astro check",
     "prefmt": "cp deno-bk.json deno.json",

tools-nodejs/vighnesh153-astro/website/playwright-pdf-generation.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./scripts",
+  forbidOnly: !!process.env.CI,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:4321",
+    trace: "on-first-retry",
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:4321",
+    reuseExistingServer: !process.env.CI,
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});

tools-nodejs/vighnesh153-astro/website/scripts/resume-pdf.spec.ts

@@ -0,0 +1,20 @@
+import { test } from "@playwright/test";
+
+test("Generate PDF of Resume", async ({ page, browser }) => {
+  await page.goto("/resume");
+
+  await page.pdf({
+    path: `./public/${await page.title()}.pdf`,
+    displayHeaderFooter: false,
+    landscape: false,
+    printBackground: true,
+    format: "A4",
+    tagged: true,
+    margin: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+  });
+});

tools-nodejs/vighnesh153-astro/website/src/components/resume/ResumeContainer.tsx

@@ -1,4 +1,4 @@
-import { createSignal, type JSX, onMount } from "solid-js";
+import { type JSX } from "solid-js";
 
 import { internalLinks, myPersonalizedEmail } from "@/utils";
 import { ResumeLink } from "./ResumeLink";
@@ -9,40 +9,13 @@ import { ResumeInterestsAndHobbies } from "./ResumeInterestsAndHobbies";
 import { ResumeProjectsSection } from "./ResumeProjectsSection";
 import { ResumeExperiencesSection } from "./ResumeExperiencesSection";
 
-const monthFormatter = new Intl.DateTimeFormat("en-GB", {
-  month: "short",
-});
-const ordinalSuffixes = new Map([
-  ["one", "st"],
-  ["two", "nd"],
-  ["few", "rd"],
-  ["other", "th"],
-]);
-const ordinalFormatter = new Intl.PluralRules("en-US", { type: "ordinal" });
-
-export function ResumeContainer(): JSX.Element {
-  const [date, setDate] = createSignal(new Date());
-
-  const formattedDate = () => {
-    const day = date().getDate();
-    const ordinal = ordinalSuffixes.get(ordinalFormatter.select(day));
-    const month = monthFormatter.format(date());
-    const year = date().getFullYear();
-
-    return `${day}${ordinal} ${month} ${year}`;
-  };
-
-  onMount(() => {
-    setDate(new Date());
-    document.title = `Vighnesh_Raut_CV_${formattedDate().replace(/ /g, "_")}`;
-  });
-
+export function ResumeContainer(props: { snapshotDate: string }): JSX.Element {
   return (
     <div class="w-full h-full bg-[#f5e5e5] text-secondary flex flex-col">
       {/* Header */}
       <p class="pt-5 ml-auto pr-14 w-fit text-xs font-extralight">
         <span class="text-[#333333]">
-          Snapshot Taken on {formattedDate()}
+          Snapshot Taken on {props.snapshotDate}
         </span>
       </p>
       <h1 class="mt-2 text-center text-5xl">

tools-nodejs/vighnesh153-astro/website/src/pages/resume.astro

@@ -9,37 +9,99 @@ import ContentLayout from "@/layouts/ContentLayout.astro";
 
 import { ResumeContainer } from "@/components/resume/ResumeContainer";
 import { Button } from "@/components/buttons/Button.tsx";
+
+const monthFormatter = new Intl.DateTimeFormat("en-GB", {
+  month: "short",
+});
+const ordinalSuffixes = new Map([
+  ["one", "st"],
+  ["two", "nd"],
+  ["few", "rd"],
+  ["other", "th"],
+]);
+const ordinalFormatter = new Intl.PluralRules("en-US", { type: "ordinal" });
+
+const date = new Date();
+const day = date.getDate();
+const ordinal = ordinalSuffixes.get(ordinalFormatter.select(day));
+const month = monthFormatter.format(date);
+const year = date.getFullYear();
+
+const formattedDate = `${day}${ordinal} ${month} ${year}`;
+const pageTitle = `Vighnesh_Raut_CV_${formattedDate.replace(/ /g, "_")}`;
 ---
 
-<ContentLayout title="Vighnesh's Resume">
+<ContentLayout title={pageTitle}>
   <div class="mt-32">
     <div class="w-full flex items-center flex-col gap-6">
       <div class="">
         <Button variant="primary" id="btn-download-resume">Download</Button>
       </div>
       <div id="resume-container">
-        <ResumeContainer client:load />
+        <div id="resume-holder">
+          <ResumeContainer client:load snapshotDate={formattedDate} />
+        </div>
       </div>
     </div>
   </div>
 </ContentLayout>
 
 <style>
-  #resume-container {
+  :root {
+    /* A4 size */
+    --a4w: 794px;
+    --a4h: 1123px;
+
+    --scale: 0.35;
+    --scale-sm: 0.5;
+    --scale-md: 0.75;
+    --scale-lg: 1;
+  }
+
+  #resume-holder {
     /* A4 size */
-    width: 794px;
-    height: 1123px;
+    width: var(--a4w);
+    height: var(--a4h);
 
     font-family: "Noto Serif Lao Variable", serif;
   }
 
+  @media not print {
+    #resume-container {
+      position: relative;
+
+      @apply w-[calc(var(--a4w)*var(--scale))];
+      @apply h-[calc(var(--a4h)*var(--scale))];
+
+      @apply sm:w-[calc(var(--a4w)*var(--scale-sm))];
+      @apply sm:h-[calc(var(--a4h)*var(--scale-sm))];
+
+      @apply md:w-[calc(var(--a4w)*var(--scale-md))];
+      @apply md:h-[calc(var(--a4h)*var(--scale-md))];
+
+      @apply lg:w-[calc(var(--a4w)*var(--scale-lg))];
+      @apply lg:h-[calc(var(--a4h)*var(--scale-lg))];
+    }
+
+    #resume-holder {
+      position: absolute;
+
+      transform-origin: top left;
+
+      @apply scale-[var(--scale)];
+      @apply sm:scale-[var(--scale-sm)];
+      @apply md:scale-[var(--scale-md)];
+      @apply lg:scale-[var(--scale-lg)];
+    }
+  }
+
   @media print {
     body {
       visibility: hidden;
       position: relative;
     }
 
-    #resume-container {
+    #resume-holder {
       visibility: visible;
       position: absolute;
       top: 0;
@@ -59,6 +121,14 @@ import { Button } from "@/components/buttons/Button.tsx";
       // Once download as pdf feature is implemented, update this code to download pdf directly
       // instead of opening the print dialog and expecting the user to download
       // https://github.com/whatwg/html/issues/7946
-      print();
+      // print();
+
+      const link = document.createElement("a");
+      const fileName = `${document.title}.pdf`;
+      link.href = `/${fileName}`;
+      link.download = fileName;
+      link.target = "_blank";
+
+      link.click();
     });
 </script>