From 92bb9f96a058648c507a2b310a8c41aaec7629e3 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Thu, 9 Nov 2023 21:01:01 +0100 Subject: [PATCH] feat(artboard): implement 8 new templates --- .env.example | 11 +- CONTRIBUTING.md | 86 + apps/artboard/index.html | 10 +- apps/artboard/src/components/page.tsx | 6 +- apps/artboard/src/components/picture.tsx | 10 +- apps/artboard/src/pages/artboard.tsx | 13 + apps/artboard/src/pages/builder.tsx | 33 +- apps/artboard/src/pages/preview.tsx | 12 +- apps/artboard/src/providers/index.tsx | 7 +- apps/artboard/src/styles/main.css | 2 +- apps/artboard/src/templates/azurill.tsx | 506 ++++ apps/artboard/src/templates/bronzor.tsx | 513 ++++ apps/artboard/src/templates/chikorita.tsx | 516 ++++ apps/artboard/src/templates/ditto.tsx | 546 ++++ apps/artboard/src/templates/index.tsx | 33 + apps/artboard/src/templates/kakuna.tsx | 467 ++++ apps/artboard/src/templates/onyx.tsx | 505 ++++ apps/artboard/src/templates/pikachu.tsx | 546 ++++ apps/artboard/src/templates/rhyhorn.tsx | 789 ++---- apps/artboard/tailwind.config.js | 17 +- apps/artboard/vite.config.ts | 10 +- apps/client/index.html | 3 + apps/client/public/templates/rhyhorn.jpg | Bin 351700 -> 0 bytes apps/client/public/templates/sample.jpg | Bin 0 -> 1130264 bytes .../src/pages/builder/sidebars/left/index.tsx | 4 +- .../sidebars/right/sections/template.tsx | 9 +- .../sidebars/right/sections/typography.tsx | 2 + apps/client/src/stores/resume.ts | 4 +- libs/schema/src/sample.ts | 35 +- libs/schema/src/sections/index.ts | 3 +- libs/utils/src/index.ts | 2 + libs/utils/src/namespaces/number.ts | 7 + libs/utils/src/namespaces/page.ts | 11 - libs/utils/src/namespaces/template.ts | 46 + libs/utils/src/namespaces/types.ts | 2 - package.json | 40 +- pnpm-lock.yaml | 2426 ++++++++--------- 37 files changed, 5422 insertions(+), 1810 deletions(-) create mode 100644 CONTRIBUTING.md create mode 100644 apps/artboard/src/templates/azurill.tsx create mode 100644 apps/artboard/src/templates/bronzor.tsx create mode 100644 apps/artboard/src/templates/chikorita.tsx create mode 100644 apps/artboard/src/templates/ditto.tsx create mode 100644 apps/artboard/src/templates/index.tsx create mode 100644 apps/artboard/src/templates/kakuna.tsx create mode 100644 apps/artboard/src/templates/onyx.tsx create mode 100644 apps/artboard/src/templates/pikachu.tsx delete mode 100644 apps/client/public/templates/rhyhorn.jpg create mode 100644 apps/client/public/templates/sample.jpg create mode 100644 libs/utils/src/namespaces/number.ts create mode 100644 libs/utils/src/namespaces/template.ts diff --git a/.env.example b/.env.example index 09319672..de06263b 100644 --- a/.env.example +++ b/.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 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..f3c84d86 --- /dev/null +++ b/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. diff --git a/apps/artboard/index.html b/apps/artboard/index.html index fa6451af..537e80f9 100644 --- a/apps/artboard/index.html +++ b/apps/artboard/index.html @@ -1,10 +1,15 @@ - - Artboard | Reactive Resume + + Reactive Resume - A free and open-source resume builder + + @@ -29,6 +34,7 @@
+ diff --git a/apps/artboard/src/components/page.tsx b/apps/artboard/src/components/page.tsx index f4e48f1e..a4c09f11 100644 --- a/apps/artboard/src/components/page.tsx +++ b/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) => {
)} diff --git a/apps/artboard/src/components/picture.tsx b/apps/artboard/src/components/picture.tsx index c69246b0..9b34507f 100644 --- a/apps/artboard/src/components/picture.tsx +++ b/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 = () => { Profile { 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 diff --git a/apps/artboard/src/pages/builder.tsx b/apps/artboard/src/pages/builder.tsx index 692d5c59..c8fb3ccd 100644 --- a/apps/artboard/src/pages/builder.tsx +++ b/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(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) => ( - - {template === "rhyhorn" && ( - - )} - - ))} + + {layout.map((columns, pageIndex) => ( + + +