feat(artboard): implement 8 new templates

.env.example

@@ -8,10 +8,14 @@ PORT=3000
 __DEV__CLIENT_PORT=5173 # Only used in development
 __DEV__CLIENT_URL=http://localhost:5173 # Only used in development
 
+# Artboard Port & URL (for development)
+__DEV__ARTBOARD_PORT=6173 # Only used in development
+__DEV__ARTBOARD_URL=http://localhost:6173 # Only used in development
+
 # URLs
-PUBLIC_URL=http://localhost:3000 # This must reference a publicly accessible domain or IP address, not a docker container ID
-STORAGE_URL=http://localhost:9000 # This must reference a publicly accessible domain or IP address, not a docker container ID
-CHROME_URL=ws://localhost:8080
+# These URLs must reference a publicly accessible domain or IP address, not a docker container ID (depending on your compose setup)
+PUBLIC_URL=http://localhost:3000
+STORAGE_URL=http://localhost:9000
 
 # Database (Prisma/PostgreSQL)
 # This can be swapped out to use any other database, like MySQL
@@ -33,6 +37,7 @@ REFRESH_TOKEN_SECRET=refresh_token_secret
 # generated with `openssl rand -hex 32`
 CHROME_PORT=8080
 CHROME_TOKEN=chrome_token
+CHROME_URL=ws://localhost:8080
 
 # Mail Server (for e-mails)
 # For testing, you can use https://ethereal.email/create

CONTRIBUTING.md

@@ -0,0 +1,86 @@
+# Contributing to Reactive Resume
+
+## Getting the project set up locally
+
+There are a number of Docker Compose examples that are suitable for a wide variety of deployment strategies depending on your use-case. All of the examples can be found in the `tools/compose` folder.
+
+To run the development environment of the application locally on your computer, please follow these steps:
+
+#### Requirements
+
+- Docker (with Docker Compose)
+- Node.js 18 or higher (with pnpm)
+
+### 1. Fork and Clone the Repository
+
+```sh
+git clone https://github.com/{your-github-username}/Reactive-Resume.git
+cd Reactive-Resume
+```
+
+### 2. Install dependencies
+
+```sh
+pnpm install
+```
+
+### 3. Copy .env.example to .env
+
+```sh
+cp .env.example .env
+```
+
+Please have a brief look over the environment variables and change them if necessary, for example, change the ports if you have a conflicting service running on your machine already.
+
+### 4. Fire up all the required services through Docker Compose
+
+```sh
+docker compose -f tools/compose/development.yml --env-file .env -p reactive-resume up -d
+```
+
+It should take just under half a minute for all the services to be booted up correctly. You can check the status of all services by running `docker compose -p reactive-resume ps`
+
+### 5. Run the development server
+
+```sh
+pnpm dev
+```
+
+If everything went well, the frontend should be running on `http://localhost:5173` and the backend api should be accessible through `http://localhost:3000`. There is a proxy present to also route all requests to `http://localhost:5173/api` directly to the API. If you need to change the `PORT` environment variable for the server, please make sure to update the `apps/client/proxy.conf.json` file as well with the new endpoint.
+
+You can also visit `http://localhost:3000/api/health`, the health check endpoint of the server to check if the server is running correctly, and it is able to connect to all it's dependent services. The output of the health check endpoint should look like this:
+
+```json
+{
+  "status": "ok",
+  "info": {
+    "database": { "status": "up" },
+    "storage": { "status": "up" },
+    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" },
+    "redis": { "status": "up" }
+  },
+  "error": {},
+  "details": {
+    "database": { "status": "up" },
+    "storage": { "status": "up" },
+    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" },
+    "redis": { "status": "up" }
+  }
+}
+```
+
+---
+
+## Pushing changes to the app
+
+Firstly, ensure that there is a GitHub Issue created for the feature or bugfix you are working on. If it does not exist, create an issue and assign it to yourself.
+
+Once you are happy with the changes you've made locally, commit it to your repository. Note that the project makes use of Conventional Commits, so commit messages would have to be in a specific format for it to be accepted. For example, a commit message to fix the translation on the homepage could look like:
+
+```
+git commit -m "fix(homepage): fix typo on homepage in the faq section"
+```
+
+It helps to be as decriptive as possible in commit messages so that users can be aware of the changes made by you.
+
+Finally, create a pull request to merge the changes on your forked repository to the original repository hosted on AmruthPillai/Reactive-Resume. I can take a look at the changes you've made when I have the time and have it merged onto the app.

apps/artboard/index.html

@@ -1,10 +1,15 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <title>Artboard | Reactive Resume</title>
     <base href="/" />
 
+    <!-- SEO -->
+    <title>Reactive Resume - A free and open-source resume builder</title>
+    <meta
+      name="description"
+      content="A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume."
+    />
+
     <!-- Meta -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -29,6 +34,7 @@
   <body>
     <div id="root"></div>
 
+    <!-- Scripts -->
     <script type="module" src="/src/main.tsx"></script>
 
     <!-- Phosphor Icons -->

apps/artboard/src/components/page.tsx

@@ -24,8 +24,8 @@ export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
       style={{
         fontFamily,
         padding: page.margin,
-        width: `${pageSizeMap[page.format].width * MM_TO_PX * window.devicePixelRatio}px`,
-        minHeight: `${pageSizeMap[page.format].height * MM_TO_PX * window.devicePixelRatio}px`,
+        width: `${pageSizeMap[page.format].width * MM_TO_PX}px`,
+        minHeight: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
       }}
     >
       {mode === "builder" && page.options.pageNumbers && (
@@ -40,7 +40,7 @@ export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
         <div
           className="absolute inset-x-0 border-b border-dashed"
           style={{
-            top: `${pageSizeMap[page.format].height * MM_TO_PX * window.devicePixelRatio}px`,
+            top: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
           }}
         />
       )}

apps/artboard/src/components/picture.tsx

@@ -1,8 +1,12 @@
-import { isUrl } from "@reactive-resume/utils";
+import { cn, isUrl } from "@reactive-resume/utils";
 
 import { useArtboardStore } from "../store/artboard";
 
-export const Picture = () => {
+type PictureProps = {
+  className?: string;
+};
+
+export const Picture = ({ className }: PictureProps) => {
   const picture = useArtboardStore((state) => state.resume.basics.picture);
 
   if (!isUrl(picture.url) || picture.effects.hidden) return null;
@@ -11,7 +15,7 @@ export const Picture = () => {
     <img
       src={picture.url}
       alt="Profile"
-      className="object-cover"
+      className={cn("relative z-20 object-cover", className)}
       style={{
         maxWidth: `${picture.size}px`,
         aspectRatio: `${picture.aspectRatio}`,

apps/artboard/src/pages/artboard.tsx

@@ -30,6 +30,19 @@ export const ArtboardPage = () => {
   useEffect(() => {
     document.documentElement.style.setProperty("font-size", `${metadata.typography.font.size}px`);
     document.documentElement.style.setProperty("line-height", `${metadata.typography.lineHeight}`);
+
+    document.documentElement.style.setProperty("--font-size", `${metadata.typography.font.size}px`);
+    document.documentElement.style.setProperty(
+      "--line-height",
+      `${metadata.typography.lineHeight}`,
+    );
+
+    document.documentElement.style.setProperty("--color-text", `${metadata.theme.text}`);
+    document.documentElement.style.setProperty("--color-primary", `${metadata.theme.primary}`);
+    document.documentElement.style.setProperty(
+      "--color-background",
+      `${metadata.theme.background}`,
+    );
   }, [metadata]);
 
   // Underline Links

apps/artboard/src/pages/builder.tsx

@@ -1,17 +1,20 @@
 import { SectionKey } from "@reactive-resume/schema";
-import { pageSizeMap } from "@reactive-resume/utils";
-import { useEffect, useRef } from "react";
+import { pageSizeMap, TemplateKey } from "@reactive-resume/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useMemo, useRef } from "react";
 import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 
 import { MM_TO_PX, Page } from "../components/page";
 import { useArtboardStore } from "../store/artboard";
-import { Rhyhorn } from "../templates/rhyhorn";
+import { getTemplate } from "../templates";
 
 export const BuilderLayout = () => {
   const transformRef = useRef<ReactZoomPanPinchRef>(null);
   const format = useArtboardStore((state) => state.resume.metadata.page.format);
   const layout = useArtboardStore((state) => state.resume.metadata.layout);
-  const template = useArtboardStore((state) => state.resume.metadata.template);
+  const template = useArtboardStore((state) => state.resume.metadata.template as TemplateKey);
+
+  const Template = useMemo(() => getTemplate(template), [template]);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -50,13 +53,21 @@ export const BuilderLayout = () => {
           gridTemplateColumns: `repeat(${layout.length}, 1fr)`,
         }}
       >
-        {layout.map((columns, pageIndex) => (
-          <Page key={pageIndex} mode="builder" pageNumber={pageIndex + 1}>
-            {template === "rhyhorn" && (
-              <Rhyhorn isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
-            )}
-          </Page>
-        ))}
+        <AnimatePresence>
+          {layout.map((columns, pageIndex) => (
+            <motion.div
+              layout
+              key={pageIndex}
+              initial={{ opacity: 0, x: -200 }}
+              animate={{ opacity: 1, x: 0, transition: { delay: pageIndex * 0.3 } }}
+              exit={{ opacity: 0, x: -200 }}
+            >
+              <Page mode="builder" pageNumber={pageIndex + 1}>
+                <Template isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
+              </Page>
+            </motion.div>
+          ))}
+        </AnimatePresence>
       </TransformComponent>
     </TransformWrapper>
   );

apps/artboard/src/pages/preview.tsx

@@ -1,20 +1,22 @@
 import { SectionKey } from "@reactive-resume/schema";
+import { TemplateKey } from "@reactive-resume/utils";
+import { useMemo } from "react";
 
 import { Page } from "../components/page";
 import { useArtboardStore } from "../store/artboard";
-import { Rhyhorn } from "../templates/rhyhorn";
+import { getTemplate } from "../templates";
 
 export const PreviewLayout = () => {
   const layout = useArtboardStore((state) => state.resume.metadata.layout);
-  const template = useArtboardStore((state) => state.resume.metadata.template);
+  const template = useArtboardStore((state) => state.resume.metadata.template as TemplateKey);
+
+  const Template = useMemo(() => getTemplate(template), [template]);
 
   return (
     <>
       {layout.map((columns, pageIndex) => (
         <Page key={pageIndex} mode="preview" pageNumber={pageIndex + 1}>
-          {template === "rhyhorn" && (
-            <Rhyhorn isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
-          )}
+          <Template isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
         </Page>
       ))}
     </>

apps/artboard/src/providers/index.tsx

@@ -1,3 +1,4 @@
+import { sampleResume } from "@reactive-resume/schema";
 import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 
@@ -30,9 +31,9 @@ export const Providers = () => {
   }, [setResume]);
 
   // Only for testing, in production this will be fetched from window.postMessage
-  // useEffect(() => {
-  //   setResume(sampleResume);
-  // }, [setResume]);
+  useEffect(() => {
+    setResume(sampleResume);
+  }, [setResume]);
 
   if (!resume) return null;
 

apps/artboard/src/styles/main.css

@@ -15,5 +15,5 @@
 }
 
 .wysiwyg {
-  @apply prose max-w-none text-current prose-headings:my-1.5 prose-p:my-1.5 prose-ul:my-1.5 prose-li:my-1.5 prose-ol:my-1.5 prose-img:my-1.5 prose-hr:my-1.5;
+  @apply prose max-w-none text-current prose-headings:mt-0 prose-headings:mb-2 prose-p:mt-0 prose-p:mb-2 prose-ul:mt-0 prose-ul:mb-2 prose-li:mt-0 prose-li:mb-2 prose-ol:mt-0 prose-ol:mb-2 prose-img:mt-0 prose-img:mb-2 prose-hr:mt-0 prose-hr:mb-2 prose-p:leading-normal;
 }