bump version to 4.0.3

build(deps-dev): bump vite from 5.0.2 to 5.0.5

.dockerignore

@@ -1,4 +1,22 @@
-.cache/
-node_modules/
-functions/
-public/
+!README.md
+.dockerignore
+.DS_Store
+.editorconfig
+.eslint*
+.git
+.github
+.gitignore
+.husky
+.nx
+.prettier*
+.vscode
+*.env*
+*.md
+compose*.yml
+dist
+Dockerfile
+node_modules
+Thumbs.db
+tmp
+tools/compose/*
+tools/scripts/*

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.env.example

@@ -1,8 +1,78 @@
-FIREBASE_APIKEY=""
-FIREBASE_APPID=""
-FIREBASE_AUTHDOMAIN=""
-FIREBASE_DATABASEURL=""
-FIREBASE_MEASUREMENTID=""
-FIREBASE_MESSAGINGSENDERID=""
-FIREBASE_PROJECTID=""
-FIREBASE_STORAGEBUCKET=""
+# Environment
+NODE_ENV=development
+
+# Ports
+PORT=3000
+
+# Client Port & URL (for development)
+__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
+# 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/default # default is the bucket name specified in the STORAGE_BUCKET variable
+
+# Database (Prisma/PostgreSQL)
+# This can be swapped out to use any other database, like MySQL
+# Note: This is used only in the compose.yml file
+POSTGRES_PORT=5432
+POSTGRES_DB=postgres
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=postgres
+
+# Database (Prisma/PostgreSQL)
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgres?schema=public
+
+# Authentication Secrets
+# generated with `openssl rand -base64 64`
+ACCESS_TOKEN_SECRET=access_token_secret
+REFRESH_TOKEN_SECRET=refresh_token_secret
+
+# Chrome Browser (for printing)
+# 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
+MAIL_FROM=noreply@localhost
+# SMTP_URL=smtp://username:password@smtp.ethereal.email:587
+
+# Storage
+STORAGE_ENDPOINT=localhost
+STORAGE_PORT=9000
+STORAGE_REGION=us-east-1
+STORAGE_BUCKET=default
+STORAGE_ACCESS_KEY=minioadmin
+STORAGE_SECRET_KEY=minioadmin
+STORAGE_USE_SSL=false
+
+# Redis (for cache & server session management)
+REDIS_URL=redis://default:password@localhost:6379
+
+# Sentry (for error reporting, Optional)
+# VITE_SENTRY_DSN=
+
+# Crowdin (Optional)
+CROWDIN_PROJECT_ID=
+CROWDIN_PERSONAL_TOKEN=
+
+# Email (Optional)
+# DISABLE_EMAIL_AUTH=true
+# VITE_DISABLE_SIGNUPS=false
+
+# GitHub (OAuth, Optional)
+# GITHUB_CLIENT_ID=
+# GITHUB_CLIENT_SECRET=
+# GITHUB_CALLBACK_URL=http://localhost:5173/api/auth/github/callback
+
+# Google (OAuth, Optional)
+# GOOGLE_CLIENT_ID=
+# GOOGLE_CLIENT_SECRET=
+# GOOGLE_CALLBACK_URL=http://localhost:5173/api/auth/google/callback

.eslintignore

@@ -1,4 +1 @@
-.cache
-package.json
-package-lock.json
-public
+node_modules

.eslintrc

@@ -1,36 +0,0 @@
-{
-  "globals": {
-    "atob": true,
-    "Blob": true,
-    "fetch": true,
-    "window": true,
-    "document": true,
-    "FileReader": true,
-    "localStorage": true
-  },
-  "extends": [
-    "airbnb",
-    "plugin:jest/recommended",
-    "plugin:jest/style",
-    "prettier"
-  ],
-  "plugins": ["jest", "prettier", "sort-imports-es6-autofix"],
-  "rules": {
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "jsx-a11y/label-has-associated-control": 0,
-    "react/jsx-one-expression-per-line": 0,
-    "react/jsx-props-no-spreading": 0,
-    "prettier/prettier": ["error"],
-    "react/no-array-index-key": 0,
-    "jsx-a11y/anchor-is-valid": 0,
-    "react/button-has-type": 0,
-    "no-unused-expressions": 0,
-    "no-restricted-syntax": 0,
-    "no-param-reassign": 0,
-    "consistent-return": 0,
-    "no-nested-ternary": 0,
-    "react/prop-types": 0,
-    "no-plusplus": 0
-  }
-}

.eslintrc.json

@@ -0,0 +1,62 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "extends": ["plugin:prettier/recommended"],
+      "plugins": ["simple-import-sort", "unused-imports"],
+      "rules": {
+        // simple-import-sort
+        "simple-import-sort/imports": "error",
+        "simple-import-sort/exports": "error",
+
+        // unused-imports
+        "unused-imports/no-unused-imports": "error",
+        "unused-imports/no-unused-vars": [
+          "warn",
+          {
+            "vars": "all",
+            "varsIgnorePattern": "^_",
+            "args": "after-used",
+            "argsIgnorePattern": "^_"
+          }
+        ],
+
+        // nx
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "allowCircularSelfDependency": true,
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {
+        // typescript-eslint
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {
+        // eslint
+        "no-console": "warn",
+        "no-unused-vars": "off"
+      }
+    }
+  ]
+}

.firebaserc

@@ -1,14 +0,0 @@
-{
-  "projects": {
-    "default": "rx-resume"
-  },
-  "targets": {
-    "rx-resume": {
-      "hosting": {
-        "rxresume": [
-          "public"
-        ]
-      }
-    }
-  }
-}

.github/FUNDING.yml

@@ -1,3 +1,2 @@
-# These are supported funding model platforms
-
-custom: ['buymeacoffee.com/AmruthPillai']
+github: AmruthPillai
+open_collective: reactive-resume

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,95 @@
+name: 🐞 Bug Report
+
+description: Create a bug report to help improve Reactive Resume
+
+title: "[Bug] <title>"
+labels: [bug, v4, needs triage]
+assignees: "AmruthPillai"
+
+body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: Yes, I have searched the existing issues and none of them match my problem.
+          required: true
+
+  - type: dropdown
+    id: variant
+    attributes:
+      label: Product Variant
+      description: What variant of Reactive Resume are you using?
+      options:
+        - Cloud (http://rxresu.me)
+        - Self-Hosted
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Current Behavior
+      description: A concise description of what you're experiencing.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A concise description of what you expected to happen.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: Detailed steps to reproduce the behavior, so that it can be easily diagnosed.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: false
+
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+    validations:
+      required: false
+
+  - type: dropdown
+    id: template
+    attributes:
+      label: What template are you using?
+      description: Leave blank if the issue applies to all templates, or is not template-specific.
+      multiple: false
+      options:
+        - Azurill
+        - Bronzor
+        - Chikorita
+        - Ditto
+        - Kakuna
+        - Nosepass
+        - Onyx
+        - Pikachu
+        - Rhyhorn
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Anything that will give us more context about the issue you are encountering!
+
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,23 @@
+name: ✨ Feature Request
+
+description: Suggest an feature or idea that you would like to see in Reactive Resume
+
+title: "[Feature] <title>"
+labels: [enhancement, v4, needs triage]
+assignees: "AmruthPillai"
+
+body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this feature?
+      description: Please search to see if an issue already exists for the feature you requested.
+      options:
+        - label: Yes, I have searched the existing issues and it doesn't exist.
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Feature Description
+      description: A concise description of what feature you would like to see in Reactive Resume.
+    validations:
+      required: true

.github/workflows/codeql-analysis.yml

@@ -1,34 +0,0 @@
-name: CodeQL Analysis
-
-on:
-  push:
-    branches: [ develop ]
-  pull_request:
-    branches: [ develop ]
-  schedule:
-    - cron: '37 16 * * 0'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.github/workflows/lint-test-build.yml

@@ -0,0 +1,45 @@
+name: Lint, Test and Build
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  actions: read
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NX_BRANCH: ${{ github.event.number || github.ref_name }}
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+
+jobs:
+  main:
+    name: Nx Cloud - Main Job
+    uses: nrwl/ci/.github/workflows/nx-cloud-main.yml@v0.14.0
+    with:
+      main-branch-name: main
+      number-of-agents: 3
+      init-commands: |
+        pnpm exec prisma generate
+        pnpm exec nx-cloud start-ci-run --stop-agents-after="build" --agent-count=3
+      parallel-commands: |
+        pnpm exec nx-cloud record -- pnpm exec nx format:check
+      parallel-commands-on-agents: |
+        pnpm exec nx affected --target=lint --parallel=3
+        pnpm exec nx affected --target=test --parallel=3 --ci --code-coverage
+        pnpm exec nx affected --target=build --parallel=3
+
+  agents:
+    name: Nx Cloud - Agents
+    uses: nrwl/ci/.github/workflows/nx-cloud-agents.yml@v0.14.0
+    with:
+      number-of-agents: 3

.github/workflows/publish-docker-image.yml

@@ -0,0 +1,149 @@
+name: Publish Docker Image
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "*"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  IMAGE: amruthpillai/reactive-resume
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    outputs:
+      version: ${{ steps.version.outputs.version }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        platform:
+          - linux/amd64
+          - linux/arm64
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.1.1
+
+      - name: Extract version from package.json
+        id: version
+        run: echo "version=$(jq -r '.version' package.json)" >> "$GITHUB_OUTPUT"
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3.0.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3.0.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3.0.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+
+      - name: Login to GitHub Container Registery
+        uses: docker/login-action@v3.0.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ github.token }}
+
+      - name: Extract Docker Metadata
+        id: meta
+        uses: docker/metadata-action@v5.0.0
+        with:
+          tags: type=semver,pattern={{version}},prefix=v,value=${{ steps.version.outputs.version }}
+          images: |
+            ${{ env.IMAGE }}
+            ghcr.io/${{ env.IMAGE }}
+
+      - name: Build and Push by Digest
+        uses: docker/build-push-action@v5.0.0
+        id: build
+        with:
+          context: .
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          platforms: ${{ matrix.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          outputs: type=image,name=${{ env.IMAGE }},push-by-digest=true,name-canonical=true,push=true
+          build-args: |
+            NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+
+      - name: Export Digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload Digest
+        uses: actions/upload-artifact@v3
+        with:
+          name: digests
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+
+    needs:
+      - build
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.1.1
+
+      - name: Download Digest
+        uses: actions/download-artifact@v3.0.0
+        with:
+          name: digests
+          path: /tmp/digests
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3.0.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3.0.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+
+      - name: Login to GitHub Container Registery
+        uses: docker/login-action@v3.0.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ github.token }}
+
+      - name: Extract Docker Metadata
+        id: meta
+        uses: docker/metadata-action@v5.0.0
+        with:
+          tags: type=semver,pattern={{version}},prefix=v,value=${{ needs.build.outputs.version }}
+          images: |
+            ${{ env.IMAGE }}
+            ghcr.io/${{ env.IMAGE }}
+
+      - name: Create Docker Manifest List and Push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect Image
+        run: |
+          docker buildx imagetools inspect ${{ env.IMAGE }}:${{ steps.meta.outputs.version }}
+
+      - name: Update Repository Description
+        uses: peter-evans/dockerhub-description@v3
+        with:
+          repository: ${{ github.repository }}
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}

.github/workflows/run-tests.yml

@@ -1,27 +0,0 @@
-name: Run Unit Tests
-
-on:
-  push:
-    branches: [ develop ]
-  pull_request:
-    branches: [ develop ]
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [14.x]
-
-    steps:
-    - uses: actions/checkout@v2
-
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - run: npm ci
-    - run: npm test

.github/workflows/sync-crowdin-translations.yml

@@ -0,0 +1,30 @@
+name: Sync Crowdin Translations
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: 0 0 * * * # everyday at midnight (UTC)
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.1.1
+
+      - name: Sync Translations
+        uses: crowdin/github-action@v1.15.2
+        with:
+          upload_sources: true
+          upload_translations: true
+          download_translations: true
+          create_pull_request: true
+          localization_branch_name: "l10n"
+          pull_request_base_branch_name: "main"
+          pull_request_title: "New Translations from Crowdin"
+          pull_request_body: "You've got new translations to be merged into the app from contributors on Crowdin.\n\n_This pull request was automatically created by the [Crowdin Action](https://github.com/marketplace/actions/crowdin-action)._"
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.gitignore

@@ -1,76 +1,52 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# Compiled Output
+dist
+tmp
+/out-tsc
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
+# Project Dependencies
+node_modules
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
+# IDEs and Editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
 
-# Coverage directory used by tools like istanbul
-coverage
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
 
-# nyc test coverage
-.nyc_output
-
-# Coverage directory used by Jest
-test-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# dotenv environment variable files
-.env
-
-# gatsby files
-.cache/
-public
-
-# Firebase Files
-.firebase
-
-# Mac files
-.DS_Store
-
-# Yarn
+# Miscellaneous
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
 yarn-error.log
-.pnp/
-.pnp.js
+testem.log
+/typings
 
-# Yarn Integrity file
-.yarn-integrity
+# System Files
+.DS_Store
+Thumbs.db
+
+# Generated Files
+.nx
+.swc
+fly.toml
+stats.html
+libs/prisma
+
+# Environment Variables
+*.env*
+!.env.example
+
+# Lingui Compiled Messages
+apps/client/src/locales/_build/
+apps/client/src/locales/*/messages.mjs

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged

.idea/.gitignore

@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/Reactive-Resume.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/codeStyles/Project.xml

@@ -1,58 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <HTMLCodeStyleSettings>
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-      <option name="HTML_ENFORCE_QUOTES" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

.idea/inspectionProfiles/Project_Default.xml

@@ -1,7 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/Reactive-Resume.iml" filepath="$PROJECT_DIR$/.idea/Reactive-Resume.iml" />
-    </modules>
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

.npmrc

@@ -0,0 +1,3 @@
+auto-install-peers=true
+enable-pre-post-scripts=true
+strict-peer-dependencies=false

.nvmrc

@@ -1 +0,0 @@
-16

.prettierignore

@@ -1,4 +1,5 @@
-.cache
-package.json
-package-lock.json
-public
+/dist
+/coverage
+/.nx/cache
+stats.html
+pnpm-lock.yaml

.prettierrc

@@ -1,5 +1,3 @@
 {
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "all"
+  "printWidth": 100
 }

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "firsttris.vscode-jest-runner"
+  ]
+}

.vscode/settings.json

@@ -1,11 +1,14 @@
 {
-  "files.associations": {
-    "*.js": "javascriptreact"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "yaml.schemas": {
+    "https://json.schemastore.org/github-workflow.json": ".github/workflows/*.yml",
+    "https://raw.githubusercontent.com/compose-spec/compose-spec/master/schema/compose-spec.json": [
+      "tools/compose/*"
+    ]
   },
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true
-  },
-  "i18n-ally.localesPaths": ["src/i18n/locales"],
-  "i18n-ally.keystyle": "nested",
-  "css.validate": false
+  "i18n-ally.localesPaths": ["apps/client/src/locales"]
 }

CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+### What’s changed from v3 to v4?
+
+**The entire app has been rebuilt and reimagined from the ground up.**
+
+The **user interface** has been greatly streamlined to prioritise your content and resume. The design of templates has also undergone a major overhaul. Previously, we utilised TailwindCSS for creating templates, but now you can rely on CSS (styled-components) to build any design you prefer. With this change, I hope to offer a **much wider variety of templates** compared to the previous version.
+
+When it comes to features, there are many to mention, but some highlights include the **ability to use your own OpenAI API key** (stored on your browser) and leverage GPTs to enhance your resume writing skills. With this, you can improve your writing, correct spelling and grammar, and even adjust the tone of the text to be more confident or casual.
+
+When you make your resume publicly available, you are provided with a link that you can share with potential recruiters and employers. This change allows you to **track the number of views or downloads your resume has received**, so you can stay informed about when someone has checked out your resume.
+
+When it comes to **security**, you now have the option to protect your account with **two-factor authentication**. This means that whenever you log in to Reactive Resume, you will also need to enter a one-time code generated on your phone. This additional step ensures that only you have access to your account.
+
+From a **design** perspective, the motivation behind this is to ensure that Reactive Resume is taken more seriously and not perceived as just another subpar side-project, which is often associated with free software. My goal is to demonstrate that this is not the case, and that **free and open source software can be just as good**, if not better, than paid alternatives.
+
+From a **self-hosting perspective**, it has never been simpler. Instead of running two separate services on your Docker (one for the client and one for the server) and struggling to establish communication between them, now you only need to pull a single image. Additionally, there are a few dependent services available on Docker (such as Postgres, Redis, Minio etc.) that you can also pull and have them all working together seamlessly.
+
+I'm excited for you to try out the app, as I've spent months building it to perfection. If you enjoy the experience of building your resume using the app, please consider supporting by [becoming a GitHub Sponsor](https://github.com/sponsors/AmruthPillai).

CONTRIBUTING.md

@@ -0,0 +1,87 @@
+# 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 prisma:migrate:dev
+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.

DEPLOYMENT.md

@@ -1,65 +0,0 @@
-# Deployment
-
-This is a guide on how to build the source from scratch, along with setting up Firebase and related cloud functions to be able to export PDFs just like the original deployment of [rxresu.me](http://rxresu.me/).
-
-### Requirements
-
-- A Firebase project
-- Works on both Linux, macOS and Windows
-- Requires Node.js & NPM installed on the machine
-
-### Setting up Firebase
-
-1. Create a new Firebase project by visiting [Firebase Console](https://console.firebase.google.com/) and clicking on `Add Project`
-
-![Screenshot 2021-03-13 at 10 19 10 AM](https://user-images.githubusercontent.com/1134738/111019495-97a73800-83e5-11eb-9eb1-6da100d839ba.png)
-
-2. Disable Google Analytics, or keep it enabled as per your requirements. Most people wouldn't need it.
-
-![Screenshot 2021-03-13 at 10 19 23 AM](https://user-images.githubusercontent.com/1134738/111019521-bc9bab00-83e5-11eb-9365-e521577e7a90.png)
-
-3. Wait until Project is created, then click on Continue
-
-![Screenshot 2021-03-13 at 10 21 30 AM](https://user-images.githubusercontent.com/1134738/111019543-e5bc3b80-83e5-11eb-923f-fc4fb2c6d84f.png)
-
-4. Navigate to Realtime Database, and click on `Create Database`
-
-![Screenshot 2021-03-13 at 10 28 57 AM](https://user-images.githubusercontent.com/1134738/111019691-f02b0500-83e6-11eb-9112-c3123273d035.png)
-
-5. Select any location that's nearby to you, and most importantly, create the database in `Test Mode` and click on Enable
-
-![Screenshot 2021-03-13 at 10 30 01 AM](https://user-images.githubusercontent.com/1134738/111019724-16e93b80-83e7-11eb-9713-06a7adf0c5d4.png)
-
-6. Go back to Project Overview and click on `Web` and skip through every other step by clicking `Next`.
-
-![Screenshot 2021-03-13 at 10 27 34 AM](https://user-images.githubusercontent.com/1134738/111019839-b4446f80-83e7-11eb-9fe2-183b06f6f829.png)
-
-7. Copy configuration variables of your project, or keep this page open as you will need it later
-
-![ezgif com-gif-maker](https://user-images.githubusercontent.com/1134738/111019829-9d9e1880-83e7-11eb-8ccc-573db1039b10.gif)
-
-### Cloning the Repository
-
-1. Run this command on your machine's terminal or Command Prompt
-
-```
-git clone git@github.com:AmruthPillai/Reactive-Resume.git
-```
-
-<img width="550" alt="Screenshot 2021-03-13 at 10 38 16 AM" src="https://user-images.githubusercontent.com/1134738/111019919-3df43d00-83e8-11eb-8d6b-d9fe0cc74a3a.png">
-
-2. Copy the file `.env.example` to `.env` and start editing the file
-
-```
-cp .env.example .env
-```
-
-<img width="317" alt="Screenshot 2021-03-13 at 10 50 21 AM" src="https://user-images.githubusercontent.com/1134738/111020166-ed7ddf00-83e9-11eb-9cbb-a8732243bbd5.png">
-
-3. Copy configuration variables from last step to the .env file, it's fine to have `FIREBASE_MEASUREMENTID` empty if you had Google Analytics disabled.
-
-<img width="696" alt="Screenshot 2021-03-13 at 10 51 53 AM" src="https://user-images.githubusercontent.com/1134738/111020217-3c2b7900-83ea-11eb-801d-d8719cf23608.png">
-
-4. Run `npm install` on the terminal/command prompt
-
-5. After that's done, run `npm run build` and allow some time for the process to build

Dockerfile

@@ -1,38 +1,41 @@
-FROM node:alpine as builder
+# --- Base Image ---
+FROM node:lts-bullseye-slim AS base
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+ARG NX_CLOUD_ACCESS_TOKEN
+
+RUN corepack enable
+
 WORKDIR /app
 
-RUN apk add --update --no-cache \
-    g++ \
-    yasm \
-    bash \
-    make \
-    automake \
-    autoconf \
-    libtool \
-    zlib-dev \
-    libpng-dev
+# --- Build Image ---
+FROM base AS build
 
-RUN apk add --update --no-cache \
-    --repository http://dl-3.alpinelinux.org/alpine/edge/community \
-    --repository http://dl-3.alpinelinux.org/alpine/edge/main \
-    vips-dev
+ENV NX_CLOUD_ACCESS_TOKEN=$NX_CLOUD_ACCESS_TOKEN
 
-COPY package*.json ./
-RUN npm ci
+COPY .npmrc package.json pnpm-lock.yaml ./
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 
-ARG FIREBASE_APIKEY
-ARG FIREBASE_APPID
-ARG FIREBASE_AUTHDOMAIN
-ARG FIREBASE_DATABASEURL
-ARG FIREBASE_MEASUREMENTID
-ARG FIREBASE_MESSAGINGSENDERID
-ARG FIREBASE_PROJECTID
-ARG FIREBASE_STORAGEBUCKET
+COPY . .
 
-COPY . ./
-RUN npm run build
+RUN pnpm run build
 
-FROM nginx:alpine
-RUN rm -rf /usr/share/nginx/html
-COPY --from=builder /app/public/ /usr/share/nginx/html
-COPY server.conf /etc/nginx/conf.d/default.conf
+# --- Release Image ---
+FROM base AS release
+
+RUN apt update && apt install -y dumb-init --no-install-recommends
+
+COPY --chown=node:node --from=build /app/.npmrc /app/package.json /app/pnpm-lock.yaml ./
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+
+COPY --chown=node:node --from=build /app/dist ./dist
+COPY --chown=node:node --from=build /app/tools/prisma ./tools/prisma
+RUN pnpm run prisma:generate
+
+ENV TZ=UTC
+ENV NODE_ENV=production
+
+EXPOSE 3000
+
+CMD [ "dumb-init", "pnpm", "run", "start" ]

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Amruth Pillai
+Copyright (c) 2023 Amruth Pillai
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -1,138 +1,95 @@
-<img src="https://raw.githubusercontent.com/AmruthPillai/Reactive-Resume/develop/static/images/logo.png" width="256px" />
-
-## A free and open source resume builder.
+![Reactive Resume](https://i.imgur.com/FFc4nyZ.jpg)
 
+![App Version](https://img.shields.io/github/package-json/version/AmruthPillai/Reactive-Resume?label=version)
+[![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume)](https://hub.docker.com/repository/docker/amruthpillai/reactive-resume)
+[![GitHub Sponsors](https://img.shields.io/github/sponsors/AmruthPillai)](https://github.com/sponsors/AmruthPillai)
 [![Crowdin](https://badges.crowdin.net/reactive-resume/localized.svg)](https://crowdin.com/project/reactive-resume)
-[![GitHub](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume)](https://github.com/AmruthPillai/Reactive-Resume/blob/develop/LICENSE)
+[![Discord](https://img.shields.io/discord/1173518977851473940?label=discord&link=https%3A%2F%2Fdiscord.gg%2FhzwkZbyvUW)](https://discord.gg/hzwkZbyvUW)
 
-### [Go to App](https://rxresu.me/)
+# Reactive Resume
 
-### What is this app all about?
+A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.
 
-Reactive Resume is a free and open source resume builder that’s built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3. With this app, you can create multiple resumes, share them with recruiters through a unique link and print as PDF, all for free, no advertisements, without losing the integrity and privacy of your data.
+### [Go to App](https://rxresu.me/) | [Docs](https://docs.rxresu.me/)
 
-You have complete control over what goes into your resume, how it looks, what colors, what templates, even the layout in which sections placed. Want a dark mode resume? It’s as easy as editing 3 values and you’re done. You don’t need to wait to see your changes either. Everything you type, everything you change, appears immediately on your resume and gets updated in real time.
+## Description
 
-### Features
+Reactive Resume is a free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume. With zero user tracking or advertising, your privacy is a top priority. The platform is extremely user-friendly and can be self-hosted in less than 30 seconds if you wish to own your data completely.
 
-- Manage multiple resumes with one account
-- Sync your data across devices
-- Sign in with Google, or sign in anonymously just to test the app
-- Send your resume to others with a unique sharable link
-- Choose from 6 vibrant templates and more coming soon
-- Structure sections and change layouts the way you want to
-- Rename sections according to your language/industry
-- Mix and match colors to any degree, even a dark mode resume?
-- Pick from a variety of crisp and clear fonts
-- Easy to translate to your own language
-- Import your existing [JSON Resume](https://jsonresume.org/) in one click
-- No advertisements, no data sharing, no marketing emails
-- **Everything is free, and there’s no catch!**
+It's available in multiple languages and comes packed with features such as real-time editing, dozens of templates, drag-and-drop customisation, and integration with OpenAI for enhancing your writing.
 
-### Screenshots
+You can share a personalised link of your resume to potential employers, track its views or downloads, and customise your page layout by dragging-and-dropping sections. The platform also supports various font options and provides dozens of templates to choose from. And yes, there's even a dark mode for a more comfortable viewing experience.
 
-<img src="https://raw.githubusercontent.com/AmruthPillai/Reactive-Resume/develop/static/images/screenshots/screen-1.png" width="400px" />
-&nbsp;
-<img src="https://raw.githubusercontent.com/AmruthPillai/Reactive-Resume/develop/static/images/screenshots/screen-3.png" width="400px" />
-&nbsp;
-<img src="https://raw.githubusercontent.com/AmruthPillai/Reactive-Resume/develop/static/images/screenshots/screen-5.png" width="400px" />
+Start creating your standout resume with Reactive Resume today!
 
-### Translation
+## Templates
 
-To translate the app, just fork the repository, go to `src/i18n/locales` and duplicate the `en.json` file to a new file `your-lang-code.json` and translate all of the strings inside. It's a simple process that would take just a few minutes, and by contributing, your name could also be added down below as a contributor.
+| Azurill                                                      | Bronzor                                                     | Chikorita                                                   |
+| ------------------------------------------------------------ | ----------------------------------------------------------- | ----------------------------------------------------------- |
+| <img src="https://i.imgur.com/jKgo04C.jpeg" width="200px" /> | <img src="https://i.imgur.com/DFNQZP2.jpg" width="200px" /> | <img src="https://i.imgur.com/Dwv8Y7f.jpg" width="200px" /> |
 
-For those of you familiar with the Crowdin Platform, you could do that too and just head to http://crowdin.com/project/reactive-resume/ to translate the app over there. They have a great interface that helps you navigate through various strings and manage translations.
+| Ditto                                                       | Kakuna                                                      | Nosepass                                                    |
+| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
+| <img src="https://i.imgur.com/6c5lASL.jpg" width="200px" /> | <img src="https://i.imgur.com/268ML3t.jpg" width="200px" /> | <img src="https://i.imgur.com/npRLsPS.jpg" width="200px" /> |
 
-##### Languages Currently Supported
+| Onyx                                                        | Pikachu                                                     | Rhyhorn                                                     |
+| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
+| <img src="https://i.imgur.com/cxplXOW.jpg" width="200px" /> | <img src="https://i.imgur.com/Y9f7qsh.jpg" width="200px" /> | <img src="https://i.imgur.com/h4kQxy2.jpg" width="200px" /> |
 
-- Arabic (عربى)
-- Bengali (বাংলা)
-- Czech (čeština)
-- Chinese Simplified (简体中文)
-- Danish (Dansk)
-- Dutch (Nederlands)
-- English (US)
-- Finnish (Suomalainen)
-- French (Français)
-- German (Deutsch)
-- Greek (Ελληνικά)
-- Hebrew (עִברִית)
-- Hindi (हिंदी)
-- Indonesian (Bahasa Indonesia)
-- Italian (Italiano)
-- Japanese (日本人)
-- Kannada (ಕನ್ನಡ)
-- Lithuanian (Lietuvių)
-- Norwegian (Norsk)
-- Persian (Farsi)
-- Polish (Polskie)
-- Portuguese (Brazilian)
-- Portuguese (Portugal)
-- Romanian (Română)
-- Russian (русский)
-- Slovak (Slovenčina)
-- Spanish (Español)
-- Swedish (Svenska)
-- Turkish (Türkçe)
-- Ukrainian (Українська)
+## Features
 
-Thank you to all the amazing people who have contributed to Reactive Resume by translating it into their native language.
+- **Free, forever** and open-source
+- No telemetry, user tracking or advertising
+- You can self-host the application in less then 30 seconds
+- **Available in multiple languages** ([help add/improve your language here](https://translate.rxresu.me/))
+- Use your email address (or a throw-away address, no problem) to create an account
+- You can also sign in with your GitHub or Google account, and even set up two-factor authentication for extra security
+- Create as many resumes as you like under a single account, optimising each resume for every job application based on it’s description for a higher ATS score
+- **Bring your own OpenAI API key** and unlock features such as improving your writing, fixing spelling and grammar or changing the tone of your text in one-click
+- Translate your resume into any language using ChatGPT and import it back for easier editing
+- Create single page resumes or a resume that spans multiple pages easily
+- Customize the colours and layouts to add a personal touch to your resume.
+- Customise your page layout as you like just by dragging-and-dropping sections
+- Create custom sections that are specific to your industry if the existing ones don't fit
+- Jot down personal notes specific to your resume that's only visible to you
+- Lock a resume to prevent making any further edits (useful for master templates)
+- **Dozens of templates** to choose from, ranging from professional to modern
+- Design your resume using the standardised EuroPass design template
+- Supports printing resumes in A4 or Letter page formats
+- Design your resume with any font that's available on [Google Fonts](https://fonts.google.com/)
+- **Share a personalised link of your resume** to companies or recruiters for them to get the latest updates
+- You can track the number of views or downloads your public resume has received
+- Built with state-of-the-art (at the moment) and dependable technologies that's battle tested and peer reviewed by the open-source community on GitHub
+- **MIT License**, so do what you like with the code as long as you credit the original author
+- And yes, there’s a dark mode too 🌓
 
-### Building from Source
+## Built With
 
-Want to run your own instance of Reactive Resume? You are very much free to do so. The requirements to build from source are:
+- React (Vite), for the frontend
+- NestJS, for the backend
+- Postgres (primary database)
+- Prisma ORM, which frees you to switch to any other relational database with a few minor changes in the code
+- Redis (for caching, session storage and resume statistics)
+- Minio (for object storage: to store avatars, resume PDFs and previews)
+- Browserless (for headless chrome, to print PDFs and generate previews)
+- SMTP Server (to send password recovery emails)
+- Sentry (for error tracing and performance monitoring)
+- GitHub/Google OAuth (for quickly authenticating users)
+- LinguiJS and Crowdin (for translation management and localization)
 
-- NodeJS/NPM
-- A Firebase Project
+## Star History
 
-1. First, clone this project repository
+<a href="https://star-history.com/#AmruthPillai/Reactive-Resume&Date">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=AmruthPillai/Reactive-Resume&type=Date&theme=dark" />
+    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=AmruthPillai/Reactive-Resume&type=Date" />
+    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=AmruthPillai/Reactive-Resume&type=Date" />
+  </picture>
+</a>
 
-```
-git clone https://github.com/AmruthPillai/Reactive-Resume.git
-cd Reactive-Resume
-```
+## License
 
-2. Run npm install to install dependencies for the project
+Reactive Resume is packaged and distributed using the [MIT License](/LICENSE.md) which allows for commercial use, distribution, modification and private use provided that all copies of the software contain the same license and copyright.
 
-```
-npm install
-```
-
-3. Create a `.env` file and fill it with your Firebase credentials
-
-You can get these by setting up a firebase web app [here](https://console.firebase.google.com/u/0/).
-
-Also note that you'll need to set up a Realtime Database, _not_ a Firestore Database, to get the correct value for `FIREBASE_DATABASEURL`. Be sure to set it to test mode so you can read/write data. Just remember to either revert these or remove the database after your testing is completed.
-
-```
-FIREBASE_APIKEY=""
-FIREBASE_APPID=""
-FIREBASE_AUTHDOMAIN=""
-FIREBASE_DATABASEURL=""
-FIREBASE_MEASUREMENTID=""
-FIREBASE_MESSAGINGSENDERID=""
-FIREBASE_PROJECTID=""
-FIREBASE_STORAGEBUCKET=""
-```
-
-4. Run `npm run start` to run the development server or `npm run build` to build the production app.
-
-And that's it! 🎉
-
-### Donation
-
-I try to do what I can, but if you found the app helpful, or you're in a better position than the others who depend on this project for their first job, please consider donating as little as \$5 to help keep the project alive :)
-
-#### https://www.buymeacoffee.com/AmruthPillai
-
-![Please buy me a coffee](https://i.imgur.com/x7g6kvF.png)
-
-### Appreciation
-
-Thank you to everyone who made this project possible, including the many users who voiced their opinions, created issues and PRs to the original Reactive Resume project, and helped me along the way to make this a reality.
-
----
-
-![The Great Gatsby](https://camo.githubusercontent.com/a615c7e1ef9a850f5427cdc153186763305bb853/68747470733a2f2f692e696d6775722e636f6d2f4472386a3569762e676966)
-
-###### Made with Love by [Amruth Pillai](https://amruthpillai.com/)
+_By the community, for the community._  
+A passion project by [Amruth Pillai](https://www.amruthpillai.com/)

SECURITY.md

@@ -4,9 +4,11 @@
 
 | Version | Supported          |
 | ------- | ------------------ |
-| 2.0.0   | :white_check_mark: |
-| 1.0.0   | :x:                |
+| 4.x.x   | :white_check_mark: |
+| 3.x.x   | :x:                |
+| 2.x.x   | :x:                |
+| 1.x.x   | :x:                |
 
 ## Reporting a Vulnerability
 
-Use the [GitHub Issues](https://github.com/AmruthPillai/Reactive-Resume/issues) tab to report a vulnerability
+Please raise an issue on GitHub to report any security vulnerabilities in the app. If the vulnerability is potentially lethal, send me an email about it on hello@amruthpillai.com.

__mocks__/@reach/router.js

@@ -1,17 +0,0 @@
-import { delay } from '../../src/utils/index';
-
-const ReachRouter = jest.requireActual('@reach/router');
-
-const defaultDelayInMilliseconds = 100;
-
-// eslint-disable-next-line no-unused-vars
-const navigate = async (to, options) => {
-  await delay(defaultDelayInMilliseconds);
-
-  return Promise.resolve();
-};
-
-module.exports = {
-  ...ReachRouter,
-  navigate: jest.fn(navigate),
-};

__mocks__/__tests__/gatsby-plugin-firebase/auth.signInAnonymously.test.js

@@ -1,35 +0,0 @@
-import FirebaseStub, { AuthConstants } from '../../gatsby-plugin-firebase';
-
-test('sets current user to anonymous user 1', async () => {
-  await FirebaseStub.auth().signInAnonymously();
-
-  const { currentUser } = FirebaseStub.auth();
-  expect(currentUser).toBeTruthy();
-  expect(currentUser.uid).toEqual(AuthConstants.anonymousUser1.uid);
-});
-
-test('calls onAuthStateChanged observer with anonymous user 1', async () => {
-  let user = null;
-  let error = null;
-  FirebaseStub.auth().onAuthStateChanged(
-    (_user) => {
-      user = _user;
-    },
-    (_error) => {
-      error = _error;
-    },
-  );
-
-  await FirebaseStub.auth().signInAnonymously();
-
-  expect(user).toBeTruthy();
-  expect(user.uid).toEqual(AuthConstants.anonymousUser1.uid);
-  expect(error).toBeNull();
-});
-
-test('returns anonymous user 1', async () => {
-  const user = await FirebaseStub.auth().signInAnonymously();
-
-  expect(user).toBeTruthy();
-  expect(user.uid).toEqual(AuthConstants.anonymousUser1.uid);
-});

__mocks__/__tests__/gatsby-plugin-firebase/auth.signInWithPopup.test.js

@@ -1,54 +0,0 @@
-import FirebaseStub, { AuthConstants } from '../../gatsby-plugin-firebase';
-
-describe('with Google auth provider', () => {
-  test('sets current user to Google user 3', async () => {
-    await FirebaseStub.auth().signInWithPopup(
-      new FirebaseStub.auth.GoogleAuthProvider(),
-    );
-
-    const { currentUser } = FirebaseStub.auth();
-    expect(currentUser).toBeTruthy();
-    expect(currentUser.uid).toEqual(AuthConstants.googleUser3.uid);
-  });
-
-  test('sets current user provider data', async () => {
-    const provider = new FirebaseStub.auth.GoogleAuthProvider();
-    await FirebaseStub.auth().signInWithPopup(provider);
-
-    const { currentUser } = FirebaseStub.auth();
-    expect(currentUser).toBeTruthy();
-    expect(currentUser.providerData).toBeTruthy();
-    expect(currentUser.providerData).toHaveLength(1);
-    expect(currentUser.providerData[0].providerId).toEqual(provider.providerId);
-  });
-
-  test('calls onAuthStateChanged observer with Google user 3', async () => {
-    let user = null;
-    let error = null;
-    FirebaseStub.auth().onAuthStateChanged(
-      (_user) => {
-        user = _user;
-      },
-      (_error) => {
-        error = _error;
-      },
-    );
-
-    await FirebaseStub.auth().signInWithPopup(
-      new FirebaseStub.auth.GoogleAuthProvider(),
-    );
-
-    expect(user).toBeTruthy();
-    expect(user.uid).toEqual(AuthConstants.googleUser3.uid);
-    expect(error).toBeNull();
-  });
-
-  test('returns Google user 3', async () => {
-    const user = await FirebaseStub.auth().signInWithPopup(
-      new FirebaseStub.auth.GoogleAuthProvider(),
-    );
-
-    expect(user).toBeTruthy();
-    expect(user.uid).toEqual(AuthConstants.googleUser3.uid);
-  });
-});

__mocks__/__tests__/gatsby-plugin-firebase/auth.signOut.test.js

@@ -1,29 +0,0 @@
-import FirebaseStub from '../../gatsby-plugin-firebase';
-
-test('sets current user to null', async () => {
-  await FirebaseStub.auth().signInAnonymously();
-
-  await FirebaseStub.auth().signOut();
-
-  const { currentUser } = FirebaseStub.auth();
-  expect(currentUser).toBeNull();
-});
-
-test('calls onAuthStateChanged observer with null', async () => {
-  let user = null;
-  let error = null;
-  FirebaseStub.auth().onAuthStateChanged(
-    (_user) => {
-      user = _user;
-    },
-    (_error) => {
-      error = _error;
-    },
-  );
-  await FirebaseStub.auth().signInAnonymously();
-
-  await FirebaseStub.auth().signOut();
-
-  expect(user).toBeNull();
-  expect(error).toBeNull();
-});

__mocks__/__tests__/gatsby-plugin-firebase/auth.test.js

@@ -1,35 +0,0 @@
-import FirebaseStub from '../../gatsby-plugin-firebase';
-
-test('reuses existing Auth instance', () => {
-  const auth1 = FirebaseStub.auth();
-  const auth2 = FirebaseStub.auth();
-
-  expect(auth1.uuid).toBeTruthy();
-  expect(auth2.uuid).toBeTruthy();
-  expect(auth1.uuid).toEqual(auth2.uuid);
-});
-
-test('onAuthStateChanged unsubscribe removes observer', () => {
-  const observer = () => {};
-  const unsubscribe = FirebaseStub.auth().onAuthStateChanged(observer);
-  expect(unsubscribe).toBeTruthy();
-  expect(
-    FirebaseStub.auth().onAuthStateChangedObservers.indexOf(observer),
-  ).toBeGreaterThanOrEqual(0);
-
-  unsubscribe();
-
-  expect(
-    FirebaseStub.auth().onAuthStateChangedObservers.indexOf(observer),
-  ).not.toBeGreaterThanOrEqual(0);
-});
-
-test('current user delete calls signOut', async () => {
-  const mockSignOut = jest.spyOn(FirebaseStub.auth(), 'signOut');
-  await FirebaseStub.auth().signInAnonymously();
-  const { currentUser } = FirebaseStub.auth();
-
-  await currentUser.delete();
-
-  expect(mockSignOut).toHaveBeenCalledTimes(1);
-});

__mocks__/__tests__/gatsby-plugin-firebase/database.ref.filtering.test.js

@@ -1,53 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import FirebaseStub, { DatabaseConstants } from '../../gatsby-plugin-firebase';
-
-test('can filter resumes by user', async () => {
-  FirebaseStub.database().initializeData();
-
-  let snapshotValue = null;
-
-  FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .orderByChild('user')
-    .equalTo(DatabaseConstants.user1.uid)
-    .on('value', (snapshot) => {
-      snapshotValue = snapshot.val();
-    });
-
-  await waitFor(() =>
-    snapshotValue ? Promise.resolve(true) : Promise.reject(),
-  );
-
-  expect(snapshotValue).not.toBeNull();
-  expect(Object.keys(snapshotValue)).toHaveLength(2);
-  Object.values(snapshotValue).forEach((resume) =>
-    expect(resume.user).toEqual(DatabaseConstants.user1.uid),
-  );
-});
-
-test('previously set query parameters are not kept when retrieving reference again', () => {
-  FirebaseStub.database().initializeData();
-
-  let reference = null;
-
-  reference = FirebaseStub.database().ref(DatabaseConstants.resumesPath);
-  expect(reference).toBeTruthy();
-  const { uuid } = reference;
-  expect(reference.orderByChildPath).toHaveLength(0);
-  expect(reference.equalToValue).toHaveLength(0);
-
-  reference = FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .orderByChild('user')
-    .equalTo('testuser1');
-  expect(reference).toBeTruthy();
-  expect(reference.uuid).toBe(uuid);
-  expect(reference.orderByChildPath).toBe('user');
-  expect(reference.equalToValue).toBe('testuser1');
-
-  reference = FirebaseStub.database().ref(DatabaseConstants.resumesPath);
-  expect(reference).toBeTruthy();
-  expect(reference.uuid).toBe(uuid);
-  expect(reference.orderByChildPath).toHaveLength(0);
-  expect(reference.equalToValue).toHaveLength(0);
-});

__mocks__/__tests__/gatsby-plugin-firebase/database.ref.off.test.js

@@ -1,51 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import FirebaseStub, { DatabaseConstants } from '../../gatsby-plugin-firebase';
-
-test('removes event callbacks', async () => {
-  FirebaseStub.database().initializeData();
-
-  const userUid = DatabaseConstants.user1.uid;
-
-  let valueCallbackSnapshotValue = null;
-  const valueCallback = jest.fn((snapshot) => {
-    valueCallbackSnapshotValue = snapshot.val();
-  });
-  FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .orderByChild('user')
-    .equalTo(userUid)
-    .on('value', valueCallback);
-  await waitFor(() => valueCallback.mock.calls[0][0]);
-  valueCallback.mockClear();
-  valueCallbackSnapshotValue = null;
-
-  let childRemovedCallbackSnapshotValue = null;
-  const childRemovedCallback = jest.fn((snapshot) => {
-    childRemovedCallbackSnapshotValue = snapshot.val();
-  });
-  FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .orderByChild('user')
-    .equalTo(userUid)
-    .on('child_removed', childRemovedCallback);
-
-  const removedResume = (
-    await FirebaseStub.database()
-      .ref(
-        `${DatabaseConstants.resumesPath}/${DatabaseConstants.demoStateResume1Id}`,
-      )
-      .once('value')
-  ).val();
-  expect(removedResume).toBeTruthy();
-
-  FirebaseStub.database().ref(DatabaseConstants.resumesPath).off();
-
-  await FirebaseStub.database()
-    .ref(`${DatabaseConstants.resumesPath}/${removedResume.id}`)
-    .remove();
-
-  expect(childRemovedCallback.mock.calls).toHaveLength(0);
-  expect(childRemovedCallbackSnapshotValue).toBeNull();
-  expect(valueCallback.mock.calls).toHaveLength(0);
-  expect(valueCallbackSnapshotValue).toBeNull();
-});

__mocks__/__tests__/gatsby-plugin-firebase/database.ref.on.valueEventType.test.js

@@ -1,45 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import FirebaseStub, { DatabaseConstants } from '../../gatsby-plugin-firebase';
-
-test('triggers event with true if on the connected reference path', async () => {
-  FirebaseStub.database().initializeData();
-
-  let snapshotValue = null;
-
-  FirebaseStub.database()
-    .ref(DatabaseConstants.connectedPath)
-    .on('value', (snapshot) => {
-      snapshotValue = snapshot.val();
-    });
-
-  await waitFor(() =>
-    snapshotValue ? Promise.resolve(true) : Promise.reject(),
-  );
-
-  expect(snapshotValue).not.toBeNull();
-  expect(snapshotValue).toBe(true);
-});
-
-test('triggers event with resumes if on the resumes reference path', async () => {
-  FirebaseStub.database().initializeData();
-
-  const resumesDataSnapshot = await FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .once('value');
-  const resumes = resumesDataSnapshot.val();
-
-  let snapshotValue = null;
-
-  FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .on('value', (snapshot) => {
-      snapshotValue = snapshot.val();
-    });
-
-  await waitFor(() =>
-    snapshotValue ? Promise.resolve(true) : Promise.reject(),
-  );
-
-  expect(snapshotValue).not.toBeNull();
-  expect(snapshotValue).toEqual(resumes);
-});

__mocks__/__tests__/gatsby-plugin-firebase/database.ref.once.test.js

@@ -1,59 +0,0 @@
-import FirebaseStub, { DatabaseConstants } from '../../gatsby-plugin-firebase';
-
-test('retrieves resume if it exists', async () => {
-  FirebaseStub.database().initializeData();
-
-  const resumeId = DatabaseConstants.demoStateResume1Id;
-
-  const resume = (
-    await FirebaseStub.database()
-      .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
-      .once('value')
-  ).val();
-
-  expect(resume).toBeTruthy();
-  expect(resume.id).toEqual(resumeId);
-});
-
-test('retrieves null if resume does not exist', async () => {
-  FirebaseStub.database().initializeData();
-
-  const resumeId = 'invalidResumeId';
-
-  const resume = (
-    await FirebaseStub.database()
-      .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
-      .once('value')
-  ).val();
-
-  expect(resume).toBeNull();
-});
-
-test('retrieves user if it exists', async () => {
-  FirebaseStub.database().initializeData();
-
-  const expectedUser = DatabaseConstants.user1;
-
-  const user = (
-    await FirebaseStub.database()
-      .ref(`${DatabaseConstants.usersPath}/${expectedUser.uid}`)
-      .once('value')
-  ).val();
-
-  expect(user).toBeTruthy();
-  expect(user).toEqual(expectedUser);
-});
-
-test('retrieves null if user does not exist', async () => {
-  FirebaseStub.database().initializeData();
-
-  const userId = 'invalidUserId';
-
-  const user = (
-    await FirebaseStub.database()
-      .ref(`${DatabaseConstants.usersPath}/${userId}`)
-      .once('value')
-  ).val();
-
-  expect(user).toBeNull();
-});

__mocks__/__tests__/gatsby-plugin-firebase/database.ref.remove.test.js

@@ -1,77 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import FirebaseStub, { DatabaseConstants } from '../../gatsby-plugin-firebase';
-
-test('deletes data', async () => {
-  FirebaseStub.database().initializeData();
-
-  const resumeId = DatabaseConstants.demoStateResume1Id;
-  const removedResume = (
-    await FirebaseStub.database()
-      .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
-      .once('value')
-  ).val();
-  expect(removedResume).toBeTruthy();
-
-  await FirebaseStub.database()
-    .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
-    .remove();
-
-  const actualResume = (
-    await FirebaseStub.database()
-      .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
-      .once('value')
-  ).val();
-  expect(actualResume).toBeNull();
-});
-
-test('triggers events', async () => {
-  FirebaseStub.database().initializeData();
-
-  const userUid = DatabaseConstants.user1.uid;
-
-  let valueCallbackSnapshotValue = null;
-  const valueCallback = jest.fn((snapshot) => {
-    valueCallbackSnapshotValue = snapshot.val();
-  });
-  FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .orderByChild('user')
-    .equalTo(userUid)
-    .on('value', valueCallback);
-  await waitFor(() => valueCallback.mock.calls[0][0]);
-  valueCallback.mockClear();
-  valueCallbackSnapshotValue = null;
-
-  let childRemovedCallbackSnapshotValue = null;
-  const childRemovedCallback = jest.fn((snapshot) => {
-    childRemovedCallbackSnapshotValue = snapshot.val();
-  });
-  FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .orderByChild('user')
-    .equalTo(userUid)
-    .on('child_removed', childRemovedCallback);
-
-  const removedResume = (
-    await FirebaseStub.database()
-      .ref(
-        `${DatabaseConstants.resumesPath}/${DatabaseConstants.demoStateResume1Id}`,
-      )
-      .once('value')
-  ).val();
-  expect(removedResume).toBeTruthy();
-  expect(removedResume.user).toEqual(userUid);
-  await FirebaseStub.database()
-    .ref(`${DatabaseConstants.resumesPath}/${removedResume.id}`)
-    .remove();
-
-  await waitFor(() => childRemovedCallback.mock.calls[0][0]);
-  expect(childRemovedCallback.mock.calls).toHaveLength(1);
-  expect(childRemovedCallbackSnapshotValue).toBeTruthy();
-  expect(childRemovedCallbackSnapshotValue).toEqual(removedResume);
-
-  await waitFor(() => valueCallback.mock.calls[0][0]);
-  expect(valueCallback.mock.calls).toHaveLength(1);
-  expect(valueCallbackSnapshotValue).toBeTruthy();
-  expect(removedResume.id in valueCallbackSnapshotValue).toBe(false);
-});

__mocks__/__tests__/gatsby-plugin-firebase/database.ref.set.test.js

@@ -1,71 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import FirebaseStub, { DatabaseConstants } from '../../gatsby-plugin-firebase';
-
-test('inserts data', async () => {
-  FirebaseStub.database().initializeData();
-
-  const existingResume = (
-    await FirebaseStub.database()
-      .ref(
-        `${DatabaseConstants.resumesPath}/${DatabaseConstants.demoStateResume1Id}`,
-      )
-      .once('value')
-  ).val();
-  expect(existingResume).toBeTruthy();
-
-  const newResume = JSON.parse(JSON.stringify(existingResume));
-  newResume.id = 'newre1';
-  newResume.name = `Test Resume ${newResume.id}`;
-  await FirebaseStub.database()
-    .ref(`${DatabaseConstants.resumesPath}/${newResume.id}`)
-    .set(newResume);
-
-  const actualResume = (
-    await FirebaseStub.database()
-      .ref(`${DatabaseConstants.resumesPath}/${newResume.id}`)
-      .once('value')
-  ).val();
-  expect(actualResume).toBeTruthy();
-  expect(actualResume).toEqual(newResume);
-});
-
-test('triggers events', async () => {
-  FirebaseStub.database().initializeData();
-
-  let snapshotValue = null;
-  const callback = jest.fn((snapshot) => {
-    snapshotValue = snapshot.val();
-  });
-  FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .orderByChild('user')
-    .equalTo(DatabaseConstants.user1.uid)
-    .on('value', callback);
-  await waitFor(() => callback.mock.calls[0][0]);
-  callback.mockClear();
-  snapshotValue = null;
-
-  const existingResume = (
-    await FirebaseStub.database()
-      .ref(
-        `${DatabaseConstants.resumesPath}/${DatabaseConstants.demoStateResume1Id}`,
-      )
-      .once('value')
-  ).val();
-  expect(existingResume).toBeTruthy();
-
-  const newResume = JSON.parse(JSON.stringify(existingResume));
-  newResume.id = 'newre1';
-  newResume.name = `Test Resume ${newResume.id}`;
-  await FirebaseStub.database()
-    .ref(`${DatabaseConstants.resumesPath}/${newResume.id}`)
-    .set(newResume);
-
-  await waitFor(() => callback.mock.calls[0][0]);
-
-  expect(callback.mock.calls).toHaveLength(1);
-  expect(snapshotValue).not.toBeNull();
-  expect(Object.keys(snapshotValue)).toHaveLength(3);
-  expect(snapshotValue[newResume.id]).toBeTruthy();
-  expect(snapshotValue[newResume.id]).toEqual(newResume);
-});

__mocks__/__tests__/gatsby-plugin-firebase/database.ref.test.js

@@ -1,26 +0,0 @@
-import FirebaseStub, { DatabaseConstants } from '../../gatsby-plugin-firebase';
-
-test('reuses existing Reference instance', () => {
-  const ref1 = FirebaseStub.database().ref(
-    `${DatabaseConstants.resumesPath}/123`,
-  );
-  const ref2 = FirebaseStub.database().ref(
-    `${DatabaseConstants.resumesPath}/123`,
-  );
-
-  expect(ref1).toBeTruthy();
-  expect(ref2).toBeTruthy();
-  expect(ref1).toEqual(ref2);
-});
-
-test('leading slash in reference path is ignored', () => {
-  const path = `${DatabaseConstants.resumesPath}/123`;
-
-  const ref1 = FirebaseStub.database().ref(path);
-  expect(ref1).toBeTruthy();
-  expect(ref1.path).toEqual(path);
-
-  const ref2 = FirebaseStub.database().ref(`/${path}`);
-  expect(ref2).toBeTruthy();
-  expect(ref2).toEqual(ref1);
-});

__mocks__/__tests__/gatsby-plugin-firebase/database.ref.update.test.js

@@ -1,86 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import FirebaseStub, { DatabaseConstants } from '../../gatsby-plugin-firebase';
-
-test('can spy on it', async () => {
-  FirebaseStub.database().initializeData();
-
-  const referencePath = `${DatabaseConstants.resumesPath}/123456`;
-  const functionSpy = jest.spyOn(
-    FirebaseStub.database().ref(referencePath),
-    'update',
-  );
-  const updateArgument = 'test value 123';
-
-  await FirebaseStub.database().ref(referencePath).update(updateArgument);
-
-  expect(functionSpy).toHaveBeenCalledTimes(1);
-  const functionCallArgument = functionSpy.mock.calls[0][0];
-  expect(functionCallArgument).toBeTruthy();
-  expect(functionCallArgument).toEqual(updateArgument);
-});
-
-test('updates data', async () => {
-  FirebaseStub.database().initializeData();
-
-  const resumeId = DatabaseConstants.demoStateResume1Id;
-  const existingResume = (
-    await FirebaseStub.database()
-      .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
-      .once('value')
-  ).val();
-  expect(existingResume).toBeTruthy();
-
-  const resumeName = 'Test Resume renamed';
-  existingResume.name = resumeName;
-  await FirebaseStub.database()
-    .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
-    .update(existingResume);
-
-  const actualResume = (
-    await FirebaseStub.database()
-      .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
-      .once('value')
-  ).val();
-  expect(actualResume).toBeTruthy();
-  expect(existingResume).toEqual(actualResume);
-  expect(actualResume.name).toEqual(resumeName);
-});
-
-test('triggers events', async () => {
-  FirebaseStub.database().initializeData();
-
-  let snapshotValue = null;
-  const callback = jest.fn((snapshot) => {
-    snapshotValue = snapshot.val();
-  });
-  FirebaseStub.database()
-    .ref(DatabaseConstants.resumesPath)
-    .orderByChild('user')
-    .equalTo(DatabaseConstants.user1.uid)
-    .on('value', callback);
-  await waitFor(() => callback.mock.calls[0][0]);
-  callback.mockClear();
-  snapshotValue = null;
-
-  const existingResume = (
-    await FirebaseStub.database()
-      .ref(
-        `${DatabaseConstants.resumesPath}/${DatabaseConstants.demoStateResume1Id}`,
-      )
-      .once('value')
-  ).val();
-  expect(existingResume).toBeTruthy();
-
-  existingResume.name = 'Test Resume renamed';
-  await FirebaseStub.database()
-    .ref(`${DatabaseConstants.resumesPath}/${existingResume.id}`)
-    .update(existingResume);
-
-  await waitFor(() => callback.mock.calls[0][0]);
-
-  expect(callback.mock.calls).toHaveLength(1);
-  expect(snapshotValue).not.toBeNull();
-  expect(Object.keys(snapshotValue)).toHaveLength(2);
-  expect(snapshotValue[existingResume.id]).toBeTruthy();
-  expect(snapshotValue[existingResume.id]).toEqual(existingResume);
-});

__mocks__/__tests__/gatsby-plugin-firebase/database.test.js

@@ -1,67 +0,0 @@
-import FirebaseStub, { DatabaseConstants } from '../../gatsby-plugin-firebase';
-
-test('reuses existing Database instance', () => {
-  const database1 = FirebaseStub.database();
-  const database2 = FirebaseStub.database();
-
-  expect(database1.uuid).toBeTruthy();
-  expect(database2.uuid).toBeTruthy();
-  expect(database1.uuid).toEqual(database2.uuid);
-});
-
-test('ServerValue.TIMESTAMP returns current time in milliseconds', () => {
-  const now = new Date().getTime();
-  const timestamp = FirebaseStub.database.ServerValue.TIMESTAMP;
-
-  expect(timestamp).toBeTruthy();
-  expect(timestamp).toBeGreaterThanOrEqual(now);
-});
-
-test('initializing data sets up resumes and users', async () => {
-  FirebaseStub.database().initializeData();
-
-  const resumesRef = FirebaseStub.database().ref(DatabaseConstants.resumesPath);
-  const resumesDataSnapshot = await resumesRef.once('value');
-  const resumes = resumesDataSnapshot.val();
-  expect(resumes).toBeTruthy();
-  expect(Object.keys(resumes)).toHaveLength(5);
-  const demoStateResume1 = resumes[DatabaseConstants.demoStateResume1Id];
-  expect(demoStateResume1).toBeTruthy();
-  expect(demoStateResume1.id).toEqual(DatabaseConstants.demoStateResume1Id);
-  expect(demoStateResume1.user).toEqual(DatabaseConstants.user1.uid);
-  const demoStateResume2 = resumes[DatabaseConstants.demoStateResume2Id];
-  expect(demoStateResume2).toBeTruthy();
-  expect(demoStateResume2.id).toEqual(DatabaseConstants.demoStateResume2Id);
-  expect(demoStateResume2.user).toEqual(DatabaseConstants.user2.uid);
-  const initialStateResume1 = resumes[DatabaseConstants.initialStateResume1Id];
-  expect(initialStateResume1).toBeTruthy();
-  expect(initialStateResume1.id).toEqual(
-    DatabaseConstants.initialStateResume1Id,
-  );
-  expect(initialStateResume1.user).toEqual(DatabaseConstants.user1.uid);
-  const demoStateResume3 = resumes[DatabaseConstants.demoStateResume3Id];
-  expect(demoStateResume3).toBeTruthy();
-  expect(demoStateResume3.id).toEqual(DatabaseConstants.demoStateResume3Id);
-  expect(demoStateResume3.user).toEqual(DatabaseConstants.user3.uid);
-  const initialStateResume2 = resumes[DatabaseConstants.initialStateResume2Id];
-  expect(initialStateResume2).toBeTruthy();
-  expect(initialStateResume2.id).toEqual(
-    DatabaseConstants.initialStateResume2Id,
-  );
-  expect(initialStateResume2.user).toEqual(DatabaseConstants.user3.uid);
-
-  const usersRef = FirebaseStub.database().ref(DatabaseConstants.usersPath);
-  const usersDataSnapshot = await usersRef.once('value');
-  const users = usersDataSnapshot.val();
-  expect(users).toBeTruthy();
-  expect(Object.keys(users)).toHaveLength(3);
-  const anonymousUser1 = users[DatabaseConstants.user1.uid];
-  expect(anonymousUser1).toBeTruthy();
-  expect(anonymousUser1).toEqual(DatabaseConstants.user1);
-  const anonymousUser2 = users[DatabaseConstants.user2.uid];
-  expect(anonymousUser2).toBeTruthy();
-  expect(anonymousUser2).toEqual(DatabaseConstants.user2);
-  const googleUser3 = users[DatabaseConstants.user3.uid];
-  expect(googleUser3).toBeTruthy();
-  expect(googleUser3).toEqual(DatabaseConstants.user3);
-});

__mocks__/__tests__/gatsby-plugin-firebase/functions.test.js

@@ -1,19 +0,0 @@
-import FirebaseStub from '../../gatsby-plugin-firebase';
-
-test('reuses existing Functions instance', () => {
-  const functions1 = FirebaseStub.functions();
-  const functions2 = FirebaseStub.functions();
-
-  expect(functions1.uuid).toBeTruthy();
-  expect(functions2.uuid).toBeTruthy();
-  expect(functions1.uuid).toEqual(functions2.uuid);
-});
-
-test('deleteUser function returns true', async () => {
-  const deleteUser = FirebaseStub.functions().httpsCallable('deleteUser');
-
-  const result = await deleteUser();
-
-  expect(result).toBeTruthy();
-  expect(result.data).toEqual(true);
-});

__mocks__/file-mock.js

@@ -1,2 +0,0 @@
-const mockFile = 'test-file-stub';
-export default mockFile;

__mocks__/gatsby-plugin-firebase.js

@@ -1,33 +0,0 @@
-import Auth from './gatsby-plugin-firebase/auth/auth';
-import AuthConstants from './gatsby-plugin-firebase/constants/auth';
-import Database from './gatsby-plugin-firebase/database/database';
-import DatabaseConstants from './gatsby-plugin-firebase/constants/database';
-import Functions from './gatsby-plugin-firebase/functions/functions';
-import FunctionsConstants from './gatsby-plugin-firebase/constants/functions';
-import GoogleAuthProvider from './gatsby-plugin-firebase/auth/googleAuthProvider';
-
-class FirebaseStub {
-  static auth() {
-    return Auth.instance;
-  }
-
-  static database() {
-    return Database.instance;
-  }
-
-  static functions() {
-    return Functions.instance;
-  }
-}
-
-FirebaseStub.auth.GoogleAuthProvider = GoogleAuthProvider;
-
-FirebaseStub.database.ServerValue = {};
-Object.defineProperty(FirebaseStub.database.ServerValue, 'TIMESTAMP', {
-  get() {
-    return new Date().getTime();
-  },
-});
-
-export default FirebaseStub;
-export { AuthConstants, DatabaseConstants, FunctionsConstants };

__mocks__/gatsby-plugin-firebase/auth/auth.js

@@ -1,125 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { v4 as uuidv4 } from 'uuid';
-
-import { delay } from '../../../src/utils/index';
-import AuthProvider from './authProvider';
-import Constants from '../constants/auth';
-import GoogleAuthProvider from './googleAuthProvider';
-import User from './user';
-
-const singleton = Symbol('');
-const singletonEnforcer = Symbol('');
-
-class Auth {
-  constructor(enforcer) {
-    if (enforcer !== singletonEnforcer) {
-      throw new Error('Cannot construct singleton');
-    }
-
-    this._uuid = uuidv4();
-    this._currentUser = null;
-    this._onAuthStateChangedObservers = [];
-  }
-
-  static get instance() {
-    if (!this[singleton]) {
-      this[singleton] = new Auth(singletonEnforcer);
-    }
-
-    return this[singleton];
-  }
-
-  get currentUser() {
-    return this._currentUser;
-  }
-
-  get uuid() {
-    return this._uuid;
-  }
-
-  get onAuthStateChangedObservers() {
-    return this._onAuthStateChangedObservers;
-  }
-
-  onAuthStateChanged(observer) {
-    this.onAuthStateChangedObservers.push(observer);
-
-    return () => {
-      this._onAuthStateChangedObservers =
-        this.onAuthStateChangedObservers.filter((obs) => obs !== observer);
-    };
-  }
-
-  async signInAnonymously() {
-    const user = Constants.anonymousUser1;
-
-    this._currentUser = new User(
-      user.displayName,
-      user.email,
-      user.providerId,
-      user.uid,
-      user.isAnonymous,
-      this.signOut.bind(this),
-    );
-
-    await delay(Constants.defaultDelayInMilliseconds);
-
-    this.onAuthStateChangedObservers.forEach((observer) =>
-      observer(this._currentUser),
-    );
-
-    return this._currentUser;
-  }
-
-  /**
-   * Authenticates with popup.
-   *
-   * @param {AuthProvider} provider The provider to authenticate.
-   */
-  async signInWithPopup(provider) {
-    if (!provider) {
-      throw new Error('provider must be provided.');
-    } else if (!(provider instanceof AuthProvider)) {
-      throw new Error('provider should be an AuthProvider.');
-    }
-
-    if (!(provider instanceof GoogleAuthProvider)) {
-      throw new Error(
-        `${provider.constructor.name} is currently not supported.`,
-      );
-    }
-
-    const user = Constants.googleUser3;
-
-    this._currentUser = new User(
-      user.displayName,
-      user.email,
-      user.providerId,
-      user.uid,
-      user.isAnonymous,
-      this.signOut.bind(this),
-    );
-
-    await delay(Constants.defaultDelayInMilliseconds);
-
-    this.onAuthStateChangedObservers.forEach((observer) =>
-      observer(this._currentUser),
-    );
-
-    return this._currentUser;
-  }
-
-  async signOut() {
-    if (this._currentUser === null) {
-      return;
-    }
-
-    this._currentUser = null;
-
-    await delay(Constants.defaultDelayInMilliseconds);
-
-    this.onAuthStateChangedObservers.forEach((observer) => observer(null));
-  }
-}
-
-export default Auth;

__mocks__/gatsby-plugin-firebase/auth/authProvider.js

@@ -1,23 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-class AuthProvider {
-  /**
-   * Creates a new auth provider.
-   *
-   * @param {string} providerId Provider ID.
-   */
-  constructor(providerId) {
-    if (!providerId) {
-      throw new Error('providerId must be provided.');
-    } else if (typeof providerId !== 'string') {
-      throw new Error('providerId should be a string.');
-    } else {
-      this._providerId = providerId;
-    }
-  }
-
-  get providerId() {
-    return this._providerId;
-  }
-}
-
-export default AuthProvider;

__mocks__/gatsby-plugin-firebase/auth/googleAuthProvider.js

@@ -1,10 +0,0 @@
-import AuthProvider from './authProvider';
-import Constants from '../constants/auth';
-
-class GoogleAuthProvider extends AuthProvider {
-  constructor() {
-    super(Constants.googleAuthProviderId);
-  }
-}
-
-export default GoogleAuthProvider;

__mocks__/gatsby-plugin-firebase/auth/user.js

@@ -1,67 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import Constants from '../constants/auth';
-// eslint-disable-next-line no-unused-vars
-import AuthProvider from './authProvider';
-import UserInfo from './userInfo';
-import { delay } from '../../../src/utils/index';
-
-class User extends UserInfo {
-  /**
-   * Creates a new user.
-   *
-   * @param {string|null} displayName Display name.
-   * @param {string|null} email Email.
-   * @param {string} providerId Auth provider ID.
-   * @param {string} uid The user's unique ID.
-   * @param {boolean} isAnonymous Is anonymous.
-   * @param {function():Promise<void>} deleteUser Delete user callback.
-   */
-  constructor(displayName, email, providerId, uid, isAnonymous, deleteUser) {
-    super(displayName, email, providerId, uid);
-
-    if (!deleteUser) {
-      throw new Error('deleteUser must be provided.');
-    } else if (typeof deleteUser !== 'function') {
-      throw new Error('deleteUser should be a function.');
-    } else {
-      this._deleteUser = deleteUser;
-    }
-
-    this._isAnonymous = isAnonymous;
-
-    this._providerData = [];
-    if (!isAnonymous) {
-      this._providerData.push(
-        new UserInfo(displayName, email, providerId, uid),
-      );
-    }
-  }
-
-  get isAnonymous() {
-    return this._isAnonymous;
-  }
-
-  get providerData() {
-    return this._providerData;
-  }
-
-  async delete() {
-    await delay(Constants.defaultDelayInMilliseconds);
-
-    await this._deleteUser();
-  }
-
-  /**
-   * Reauthenticates the user with popup.
-   *
-   * @param {AuthProvider} provider The provider to authenticate.
-   */
-  // eslint-disable-next-line no-unused-vars
-  async reauthenticateWithPopup(provider) {
-    await delay(Constants.defaultDelayInMilliseconds);
-
-    return this;
-  }
-}
-
-export default User;

__mocks__/gatsby-plugin-firebase/auth/userInfo.js

@@ -1,47 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-class UserInfo {
-  /**
-   * Creates a new user profile information.
-   *
-   * @param {string|null} displayName Display name.
-   * @param {string|null} email Email.
-   * @param {string} providerId Auth provider ID.
-   * @param {string} uid The user's unique ID.
-   */
-  constructor(displayName, email, providerId, uid) {
-    if (!uid) {
-      throw new Error('uid must be provided.');
-    } else if (typeof uid !== 'string') {
-      throw new Error('uid should be a string.');
-    } else {
-      this._uid = uid;
-    }
-
-    if (typeof providerId !== 'string') {
-      throw new Error('providerId should be a string.');
-    } else {
-      this._providerId = providerId;
-    }
-
-    this._displayName = displayName;
-    this._email = email;
-  }
-
-  get displayName() {
-    return this._displayName;
-  }
-
-  get email() {
-    return this._email;
-  }
-
-  get providerId() {
-    return this._providerId;
-  }
-
-  get uid() {
-    return this._uid;
-  }
-}
-
-export default UserInfo;

__mocks__/gatsby-plugin-firebase/constants/auth.js

@@ -1,51 +0,0 @@
-const googleAuthProviderId = 'google.com';
-
-const anonymousUser1 = {
-  displayName: 'Anonymous User 1',
-  email: 'anonymous1@noemail.com',
-  isAnonymous: true,
-  providerId: '',
-  uid: 'anonym1',
-};
-
-const anonymousUser2 = {
-  displayName: 'Anonymous User 2',
-  email: 'anonymous2@noemail.com',
-  isAnonymous: true,
-  providerId: '',
-  uid: 'anonym2',
-};
-
-const googleUser3 = {
-  displayName: 'Google User 3',
-  email: 'google3@noemail.com',
-  isAnonymous: false,
-  providerId: googleAuthProviderId,
-  uid: 'google3',
-};
-
-const defaultDelayInMilliseconds = 100;
-
-class Auth {
-  static get googleAuthProviderId() {
-    return googleAuthProviderId;
-  }
-
-  static get anonymousUser1() {
-    return anonymousUser1;
-  }
-
-  static get anonymousUser2() {
-    return anonymousUser2;
-  }
-
-  static get googleUser3() {
-    return googleUser3;
-  }
-
-  static get defaultDelayInMilliseconds() {
-    return defaultDelayInMilliseconds;
-  }
-}
-
-export default Auth;

__mocks__/gatsby-plugin-firebase/constants/database.js

@@ -1,89 +0,0 @@
-import AuthConstants from './auth';
-
-const valueEventType = 'value';
-const childRemovedEventType = 'child_removed';
-
-const resumesPath = 'resumes';
-const usersPath = 'users';
-const connectedPath = '.info/connected';
-
-const demoStateResume1Id = 'demo_1';
-const demoStateResume2Id = 'demo_2';
-const demoStateResume3Id = 'demo_3';
-const initialStateResume1Id = 'init_1';
-const initialStateResume2Id = 'init_2';
-
-const user1 = {
-  uid: AuthConstants.anonymousUser1.uid,
-  isAnonymous: AuthConstants.anonymousUser1.isAnonymous,
-};
-const user2 = {
-  uid: AuthConstants.anonymousUser2.uid,
-  isAnonymous: AuthConstants.anonymousUser2.isAnonymous,
-};
-const user3 = {
-  uid: AuthConstants.googleUser3.uid,
-  isAnonymous: AuthConstants.googleUser3.isAnonymous,
-};
-
-const defaultDelayInMilliseconds = 100;
-
-class Database {
-  static get valueEventType() {
-    return valueEventType;
-  }
-
-  static get childRemovedEventType() {
-    return childRemovedEventType;
-  }
-
-  static get resumesPath() {
-    return resumesPath;
-  }
-
-  static get usersPath() {
-    return usersPath;
-  }
-
-  static get connectedPath() {
-    return connectedPath;
-  }
-
-  static get demoStateResume1Id() {
-    return demoStateResume1Id;
-  }
-
-  static get demoStateResume2Id() {
-    return demoStateResume2Id;
-  }
-
-  static get demoStateResume3Id() {
-    return demoStateResume3Id;
-  }
-
-  static get initialStateResume1Id() {
-    return initialStateResume1Id;
-  }
-
-  static get initialStateResume2Id() {
-    return initialStateResume2Id;
-  }
-
-  static get user1() {
-    return user1;
-  }
-
-  static get user2() {
-    return user2;
-  }
-
-  static get user3() {
-    return user3;
-  }
-
-  static get defaultDelayInMilliseconds() {
-    return defaultDelayInMilliseconds;
-  }
-}
-
-export default Database;

__mocks__/gatsby-plugin-firebase/constants/functions.js

@@ -1,15 +0,0 @@
-const deleteUserFunctionName = 'deleteUser';
-
-const defaultDelayInMilliseconds = 100;
-
-class Functions {
-  static get deleteUserFunctionName() {
-    return deleteUserFunctionName;
-  }
-
-  static get defaultDelayInMilliseconds() {
-    return defaultDelayInMilliseconds;
-  }
-}
-
-export default Functions;

__mocks__/gatsby-plugin-firebase/database/dataSnapshot.js

@@ -1,24 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-class DataSnapshot {
-  constructor(getData, value = undefined) {
-    if (!getData) {
-      throw new Error('getData must be provided.');
-    } else if (typeof getData !== 'function') {
-      throw new Error('getData should be a function.');
-    }
-
-    this._getData = getData;
-
-    this._value = value;
-  }
-
-  get value() {
-    return this._value;
-  }
-
-  val() {
-    return typeof this.value !== 'undefined' ? this.value : this._getData();
-  }
-}
-
-export default DataSnapshot;

__mocks__/gatsby-plugin-firebase/database/database.js

@@ -1,170 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { v4 as uuidv4 } from 'uuid';
-import fs from 'fs';
-import path from 'path';
-
-import DatabaseConstants from '../constants/database';
-import Reference from './reference';
-
-const singleton = Symbol('');
-const singletonEnforcer = Symbol('');
-
-const readFile = (fileRelativePath) => {
-  const fileAbsolutePath = path.resolve(__dirname, fileRelativePath);
-  const fileBuffer = fs.readFileSync(fileAbsolutePath);
-  const fileData = JSON.parse(fileBuffer);
-  return fileData;
-};
-
-class Database {
-  constructor(enforcer) {
-    if (enforcer !== singletonEnforcer) {
-      throw new Error('Cannot construct singleton');
-    }
-
-    this._uuid = uuidv4();
-    this._data = {};
-    this._references = {};
-  }
-
-  static get instance() {
-    if (!this[singleton]) {
-      this[singleton] = new Database(singletonEnforcer);
-    }
-
-    return this[singleton];
-  }
-
-  get uuid() {
-    return this._uuid;
-  }
-
-  _getData(dataPath) {
-    if (!dataPath) {
-      throw new Error('dataPath must be provided.');
-    }
-
-    const dataPathElements = dataPath.split('/');
-    if (!(dataPathElements[0] in this._data)) {
-      return null;
-    }
-
-    if (dataPathElements.length === 1) {
-      return this._data[dataPathElements[0]];
-    }
-
-    if (dataPathElements.length === 2) {
-      if (!(dataPathElements[1] in this._data[dataPathElements[0]])) {
-        return null;
-      }
-
-      return this._data[dataPathElements[0]][dataPathElements[1]];
-    }
-
-    return null;
-  }
-
-  _getReference(referencePath) {
-    return referencePath in this._references
-      ? this._references[referencePath]
-      : null;
-  }
-
-  _setData(dataPath, value) {
-    if (!dataPath) {
-      throw new Error('dataPath must be provided.');
-    }
-
-    if (typeof value === 'undefined') {
-      throw new Error('value is undefined.');
-    }
-
-    const dataPathElements = dataPath.split('/');
-    if (dataPathElements.length !== 2) {
-      return;
-    }
-
-    if (!(dataPathElements[0] in this._data)) {
-      return;
-    }
-
-    if (!dataPathElements[1]) {
-      return;
-    }
-
-    if (value === null) {
-      delete this._data[dataPathElements[0]][dataPathElements[1]];
-    } else {
-      this._data[dataPathElements[0]][dataPathElements[1]] = value;
-    }
-  }
-
-  initializeData() {
-    const resumes = {};
-    const date = new Date('December 15, 2020 11:20:25');
-
-    const demoStateResume1 = readFile('../../../src/data/demoState.json');
-    demoStateResume1.updatedAt = date.valueOf();
-    date.setMonth(date.getMonth() - 2);
-    demoStateResume1.createdAt = date.valueOf();
-    demoStateResume1.user = DatabaseConstants.user1.uid;
-    resumes[DatabaseConstants.demoStateResume1Id] = demoStateResume1;
-
-    const demoStateResume2 = JSON.parse(JSON.stringify(demoStateResume1));
-    demoStateResume2.user = DatabaseConstants.user2.uid;
-    resumes[DatabaseConstants.demoStateResume2Id] = demoStateResume2;
-
-    const initialStateResume1 = readFile('../../../src/data/initialState.json');
-    initialStateResume1.updatedAt = date.valueOf();
-    initialStateResume1.createdAt = date.valueOf();
-    initialStateResume1.user = DatabaseConstants.user1.uid;
-    resumes[DatabaseConstants.initialStateResume1Id] = initialStateResume1;
-
-    const demoStateResume3 = readFile('../../../src/data/demoState.json');
-    demoStateResume3.updatedAt = date.valueOf();
-    date.setMonth(date.getMonth() - 2);
-    demoStateResume3.createdAt = date.valueOf();
-    demoStateResume3.user = DatabaseConstants.user3.uid;
-    resumes[DatabaseConstants.demoStateResume3Id] = demoStateResume3;
-
-    const initialStateResume2 = readFile('../../../src/data/initialState.json');
-    initialStateResume2.updatedAt = date.valueOf();
-    initialStateResume2.createdAt = date.valueOf();
-    initialStateResume2.user = DatabaseConstants.user3.uid;
-    resumes[DatabaseConstants.initialStateResume2Id] = initialStateResume2;
-
-    Object.keys(resumes).forEach((key) => {
-      const resume = resumes[key];
-      resume.id = key;
-      resume.name = `Test Resume ${key}`;
-    });
-
-    this._data[DatabaseConstants.resumesPath] = resumes;
-
-    const users = {};
-    users[DatabaseConstants.user1.uid] = DatabaseConstants.user1;
-    users[DatabaseConstants.user2.uid] = DatabaseConstants.user2;
-    users[DatabaseConstants.user3.uid] = DatabaseConstants.user3;
-    this._data[DatabaseConstants.usersPath] = users;
-  }
-
-  ref(referencePath) {
-    const newRef = new Reference(
-      referencePath,
-      (dataPath) => this._getData(dataPath),
-      (dataPath, value) => this._setData(dataPath, value),
-      (refPath) => this._getReference(refPath),
-    );
-
-    const existingRef = this._getReference(newRef.path);
-    if (existingRef) {
-      existingRef.initializeQueryParameters();
-      return existingRef;
-    }
-
-    this._references[newRef.path] = newRef;
-    return newRef;
-  }
-}
-
-export default Database;

__mocks__/gatsby-plugin-firebase/database/reference.js

@@ -1,215 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { v4 as uuidv4 } from 'uuid';
-
-import { delay } from '../../../src/utils/index';
-import DataSnapshot from './dataSnapshot';
-import DatabaseConstants from '../constants/database';
-
-const parsePath = (path) => {
-  if (!path) {
-    throw new Error('path must be provided.');
-  } else if (typeof path !== 'string') {
-    throw new Error('path should be a string.');
-  } else {
-    let parsedPath = path.trim();
-
-    if (parsedPath[0] === '/') {
-      parsedPath = parsedPath.substring(1);
-    }
-
-    return parsedPath;
-  }
-};
-
-class Reference {
-  constructor(path, getDatabaseData, setDatabaseData, getReference) {
-    this._path = parsePath(path);
-
-    this._uuid = uuidv4();
-
-    if (this.path === DatabaseConstants.connectedPath) {
-      this._dataSnapshot = new DataSnapshot(() => {}, true);
-    } else {
-      this._dataSnapshot = new DataSnapshot(() => this._getData());
-    }
-
-    if (!getDatabaseData) {
-      throw new Error('getDatabaseData must be provided.');
-    } else if (typeof getDatabaseData !== 'function') {
-      throw new Error('getDatabaseData should be a function.');
-    }
-
-    this._getDatabaseData = getDatabaseData;
-
-    if (!setDatabaseData) {
-      throw new Error('setDatabaseData must be provided.');
-    } else if (typeof getDatabaseData !== 'function') {
-      throw new Error('setDatabaseData should be a function.');
-    }
-
-    this._setDatabaseData = setDatabaseData;
-
-    if (!getReference) {
-      throw new Error('getReference must be provided.');
-    } else if (typeof getDatabaseData !== 'function') {
-      throw new Error('getReference should be a function.');
-    }
-
-    this._getReference = getReference;
-
-    this._eventCallbacks = {};
-
-    this.initializeQueryParameters();
-  }
-
-  get path() {
-    return this._path;
-  }
-
-  get uuid() {
-    return this._uuid;
-  }
-
-  get eventCallbacks() {
-    return this._eventCallbacks;
-  }
-
-  get orderByChildPath() {
-    return this._orderByChildPath;
-  }
-
-  get equalToValue() {
-    return this._equalToValue;
-  }
-
-  _getData() {
-    const databaseData = this._getDatabaseData(this.path);
-
-    if (!databaseData) {
-      return null;
-    }
-
-    if (this.orderByChildPath && this.equalToValue) {
-      return Object.fromEntries(
-        Object.entries(databaseData).filter(
-          ([, value]) => value[this.orderByChildPath] === this.equalToValue,
-        ),
-      );
-    }
-
-    return databaseData;
-  }
-
-  _getParent() {
-    const pathElements = this.path.split('/');
-
-    let parent = null;
-    if (pathElements.length === 2) {
-      parent = this._getReference(pathElements[0]);
-    }
-
-    return parent;
-  }
-
-  _handleDataUpdate(value) {
-    if (typeof value === 'undefined') {
-      throw new Error('value must be provided.');
-    }
-
-    const currentData = this._getData();
-    const parentReference = this._getParent();
-
-    this._setDatabaseData(this.path, value);
-
-    if (value === null) {
-      if (parentReference) {
-        parentReference.triggerEventCallback(
-          DatabaseConstants.childRemovedEventType,
-          currentData,
-        );
-      }
-    } else {
-      this.triggerEventCallback(DatabaseConstants.valueEventType);
-    }
-
-    if (parentReference) {
-      parentReference.triggerEventCallback(DatabaseConstants.valueEventType);
-    }
-  }
-
-  triggerEventCallback(eventType, snapshotValue = undefined) {
-    if (!(eventType in this.eventCallbacks)) {
-      return;
-    }
-
-    const snapshot =
-      this.path === DatabaseConstants.connectedPath
-        ? this._dataSnapshot
-        : new DataSnapshot(() => this._getData(), snapshotValue);
-
-    this.eventCallbacks[eventType](snapshot);
-  }
-
-  equalTo(value) {
-    this._equalToValue = value;
-    return this;
-  }
-
-  initializeQueryParameters() {
-    this._orderByChildPath = '';
-    this._equalToValue = '';
-  }
-
-  off() {
-    this._eventCallbacks = {};
-  }
-
-  on(eventType, callback) {
-    this.eventCallbacks[eventType] = callback;
-
-    if (eventType === DatabaseConstants.valueEventType) {
-      setTimeout(() => {
-        this.triggerEventCallback(eventType);
-      }, DatabaseConstants.defaultDelayInMilliseconds);
-    }
-
-    return callback;
-  }
-
-  async once(eventType) {
-    if (!eventType) {
-      throw new Error('eventType must be provided.');
-    } else if (typeof eventType !== 'string') {
-      throw new Error('eventType should be a string.');
-    }
-
-    await delay(DatabaseConstants.defaultDelayInMilliseconds);
-
-    return this._dataSnapshot;
-  }
-
-  orderByChild(path) {
-    this._orderByChildPath = path;
-    return this;
-  }
-
-  async update(value) {
-    await delay(DatabaseConstants.defaultDelayInMilliseconds);
-
-    this._handleDataUpdate(value);
-  }
-
-  async remove() {
-    await delay(DatabaseConstants.defaultDelayInMilliseconds);
-
-    this._handleDataUpdate(null);
-  }
-
-  async set(value) {
-    await delay(DatabaseConstants.defaultDelayInMilliseconds);
-
-    this._handleDataUpdate(value);
-  }
-}
-
-export default Reference;

__mocks__/gatsby-plugin-firebase/functions/functions.js

@@ -1,53 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { v4 as uuidv4 } from 'uuid';
-
-import FunctionsConstants from '../constants/functions';
-import HttpsCallableResult from './httpsCallableResult';
-import { delay } from '../../../src/utils/index';
-
-const singleton = Symbol('');
-const singletonEnforcer = Symbol('');
-
-const deleteUser = async () => {
-  await delay(FunctionsConstants.defaultDelayInMilliseconds);
-
-  return new HttpsCallableResult(true);
-};
-
-class Functions {
-  constructor(enforcer) {
-    if (enforcer !== singletonEnforcer) {
-      throw new Error('Cannot construct singleton');
-    }
-
-    this._uuid = uuidv4();
-
-    this._httpsCallables = {};
-    this._httpsCallables[FunctionsConstants.deleteUserFunctionName] =
-      deleteUser;
-  }
-
-  static get instance() {
-    if (!this[singleton]) {
-      this[singleton] = new Functions(singletonEnforcer);
-    }
-
-    return this[singleton];
-  }
-
-  get uuid() {
-    return this._uuid;
-  }
-
-  httpsCallable(name) {
-    if (!name) {
-      throw new Error('name must be provided.');
-    } else if (typeof name !== 'string') {
-      throw new Error('name should be a string.');
-    }
-
-    return this._httpsCallables[name];
-  }
-}
-
-export default Functions;

__mocks__/gatsby-plugin-firebase/functions/httpsCallableResult.js

@@ -1,19 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { v4 as uuidv4 } from 'uuid';
-
-class HttpsCallableResult {
-  constructor(data) {
-    this._uuid = uuidv4();
-    this._data = data;
-  }
-
-  get data() {
-    return this._data;
-  }
-
-  get uuid() {
-    return this._uuid;
-  }
-}
-
-export default HttpsCallableResult;

__mocks__/gatsby.js

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import { delay } from '../src/utils/index';
-
-const Gatsby = jest.requireActual('gatsby');
-
-const imageData = {
-  images: {
-    fallback: {
-      src: `image_src.jpg`,
-      srcSet: `image_src_set.jpg 1x`,
-    },
-  },
-  layout: `fixed`,
-  width: 1,
-  height: 2,
-};
-const childImageSharp = { gatsbyImageData: imageData };
-
-const useStaticQuery = () => ({
-  site: {
-    siteMetadata: {
-      title: 'Test title',
-      description: 'Test description',
-      author: 'Test author',
-      siteUrl: 'https://testsiteurl/',
-    },
-  },
-  file: {
-    childImageSharp,
-  },
-  onyx: {
-    childImageSharp,
-  },
-  pikachu: {
-    childImageSharp,
-  },
-  gengar: {
-    childImageSharp,
-  },
-  castform: {
-    childImageSharp,
-  },
-  glalie: {
-    childImageSharp,
-  },
-  celebi: {
-    childImageSharp,
-  },
-});
-
-const defaultDelayInMilliseconds = 100;
-
-const navigate = async () => {
-  await delay(defaultDelayInMilliseconds);
-
-  return Promise.resolve();
-};
-
-module.exports = {
-  ...Gatsby,
-  graphql: jest.fn(),
-  Link: jest.fn().mockImplementation(({ to, ...rest }) =>
-    React.createElement('a', {
-      ...rest,
-      href: to,
-    }),
-  ),
-  navigate: jest.fn(navigate),
-  useStaticQuery,
-};

apps/artboard/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "extends": ["plugin:tailwindcss/recommended"],
+      "settings": {
+        "tailwindcss": {
+          "callees": ["cn", "clsx", "cva"],
+          "config": "tailwind.config.js"
+        }
+      },
+      "rules": {
+        // react-hooks
+        "react-hooks/exhaustive-deps": "off",
+
+        // tailwindcss
+        "tailwindcss/no-custom-classname": "off"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/artboard/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en-US" translate="no">
+  <head>
+    <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="googlebot" content="notranslate" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Favicon -->
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/icon/dark.svg"
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/icon/light.svg"
+      media="(prefers-color-scheme: dark)"
+    />
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="/src/styles/main.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <!-- Scripts -->
+    <script type="module" src="/src/main.tsx"></script>
+
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+  </body>
+</html>

apps/artboard/postcss.config.js

@@ -0,0 +1,10 @@
+const { join } = require("path");
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, "tailwind.config.js"),
+    },
+    autoprefixer: {},
+  },
+};

apps/artboard/project.json

@@ -0,0 +1,64 @@
+{
+  "name": "artboard",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/artboard/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/artboard"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "artboard:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "artboard:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "artboard:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "artboard:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "artboard:build:development"
+        },
+        "production": {
+          "buildTarget": "artboard:build:production"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/artboard/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  },
+  "tags": ["frontend"]
+}

apps/artboard/public/icon/dark.svg

@@ -0,0 +1,8 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M173.611 166.311L132.877 219.804H173.524L193.973 191.813L213.183 219.804H256L215.673 165.707L215.15 165.046L207.461 155.332L195.329 140.004L195.258 139.915L193.813 138.089L193.923 138.001L176.286 112.861H134.061L173.611 166.311ZM199.89 133.554L214.959 112.861H254.619L219.874 158.8L199.89 133.554Z"
+    fill="#09090B" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M0 36.1959V174.314H39.0678V137.614H60.3938L60.4323 137.671C60.8436 137.653 61.2518 137.634 61.6569 137.614C75.0665 136.968 85.1471 135.549 96.3849 131.385C96.7596 131.246 97.1355 131.104 97.5128 130.959L97.4591 130.881C105.816 126.86 112.331 121.344 117.006 114.331C122.005 106.702 124.504 97.6915 124.504 87.2997C124.504 76.7764 122.005 67.7 117.006 60.0706C112.007 52.3097 104.904 46.3903 95.6964 42.3125C86.62 38.2347 75.7678 36.1959 63.1399 36.1959H0ZM102.156 137.725L64.8705 144.175L85.4361 174.314H127.266L102.156 137.725ZM39.0678 107.426H60.7721C68.9277 107.426 74.9786 105.65 78.9248 102.098C83.0026 98.5465 85.0415 93.6137 85.0415 87.2997C85.0415 80.8542 83.0026 75.8556 78.9248 72.304C74.9786 68.7523 68.9277 66.9765 60.7721 66.9765H39.0678V107.426Z"
+    fill="#09090B" />
+</svg>

apps/artboard/public/icon/light.svg

@@ -0,0 +1,8 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M173.611 166.311L132.877 219.804H173.524L193.973 191.813L213.183 219.804H256L215.673 165.707L215.15 165.046L207.461 155.332L195.329 140.004L195.258 139.915L193.813 138.089L193.923 138.001L176.286 112.861H134.061L173.611 166.311ZM199.89 133.554L214.959 112.861H254.619L219.874 158.8L199.89 133.554Z"
+    fill="#FAFAFA" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M0 36.1959V174.314H39.0678V137.614H60.3938L60.4323 137.671C60.8436 137.653 61.2517 137.634 61.6567 137.614C75.0665 136.968 85.1471 135.549 96.385 131.385C96.7596 131.246 97.1355 131.104 97.5128 130.959L97.4591 130.881C105.816 126.86 112.331 121.344 117.006 114.331C122.005 106.702 124.504 97.6915 124.504 87.2997C124.504 76.7764 122.005 67.7 117.006 60.0706C112.007 52.3097 104.904 46.3903 95.6964 42.3125C86.62 38.2347 75.7679 36.1959 63.1399 36.1959H0ZM102.156 137.725L64.8705 144.175L85.4361 174.314H127.266L102.156 137.725ZM39.0678 107.426H60.7721C68.9277 107.426 74.9786 105.65 78.9248 102.098C83.0026 98.5465 85.0415 93.6137 85.0415 87.2997C85.0415 80.8542 83.0026 75.8556 78.9248 72.304C74.9786 68.7523 68.9277 66.9765 60.7721 66.9765H39.0678V107.426Z"
+    fill="#FAFAFA" />
+</svg>

apps/artboard/src/components/page.tsx

@@ -0,0 +1,48 @@
+import { useTheme } from "@reactive-resume/hooks";
+import { cn, pageSizeMap } from "@reactive-resume/utils";
+
+import { useArtboardStore } from "../store/artboard";
+
+type Props = {
+  mode?: "preview" | "builder";
+  pageNumber: number;
+  children: React.ReactNode;
+};
+
+export const MM_TO_PX = 3.78;
+
+export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
+  const { isDarkMode } = useTheme();
+
+  const page = useArtboardStore((state) => state.resume.metadata.page);
+  const fontFamily = useArtboardStore((state) => state.resume.metadata.typography.font.family);
+
+  return (
+    <div
+      data-page={pageNumber}
+      className={cn("relative bg-white", mode === "builder" && "shadow-2xl")}
+      style={{
+        fontFamily,
+        width: `${pageSizeMap[page.format].width * MM_TO_PX}px`,
+        minHeight: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
+      }}
+    >
+      {mode === "builder" && page.options.pageNumbers && (
+        <div className={cn("absolute -top-7 left-0 font-bold", isDarkMode && "text-white")}>
+          Page {pageNumber}
+        </div>
+      )}
+
+      {children}
+
+      {mode === "builder" && page.options.breakLine && (
+        <div
+          className="absolute inset-x-0 border-b border-dashed"
+          style={{
+            top: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
+          }}
+        />
+      )}
+    </div>
+  );
+};

apps/artboard/src/components/picture.tsx

@@ -0,0 +1,33 @@
+import { cn, isUrl } from "@reactive-resume/utils";
+
+import { useArtboardStore } from "../store/artboard";
+
+type PictureProps = {
+  className?: string;
+};
+
+export const Picture = ({ className }: PictureProps) => {
+  const picture = useArtboardStore((state) => state.resume.basics.picture);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  if (!isUrl(picture.url) || picture.effects.hidden) return null;
+
+  return (
+    <img
+      src={picture.url}
+      alt="Profile"
+      className={cn(
+        "relative z-20 object-cover",
+        picture.effects.border && "border-primary",
+        picture.effects.grayscale && "grayscale",
+        className,
+      )}
+      style={{
+        maxWidth: `${picture.size}px`,
+        aspectRatio: `${picture.aspectRatio}`,
+        borderRadius: `${picture.borderRadius}px`,
+        borderWidth: `${picture.effects.border ? fontSize / 3 : 0}px`,
+      }}
+    />
+  );
+};

apps/artboard/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import * as ReactDOM from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
+
+import { router } from "./router";
+
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+
+root.render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

apps/artboard/src/pages/artboard.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useMemo } from "react";
+import { Outlet } from "react-router-dom";
+import webfontloader from "webfontloader";
+
+import { useArtboardStore } from "../store/artboard";
+
+export const ArtboardPage = () => {
+  const metadata = useArtboardStore((state) => state.resume.metadata);
+
+  const fontString = useMemo(() => {
+    const family = metadata.typography.font.family;
+    const variants = metadata.typography.font.variants.join(",");
+    const subset = metadata.typography.font.subset;
+
+    return `${family}:${variants}:${subset}`;
+  }, [metadata.typography.font]);
+
+  useEffect(() => {
+    webfontloader.load({
+      google: { families: [fontString] },
+      active: () => {
+        const width = window.document.body.offsetWidth;
+        const height = window.document.body.offsetHeight;
+        const message = { type: "PAGE_LOADED", payload: { width, height } };
+        window.postMessage(message, "*");
+      },
+    });
+  }, [fontString]);
+
+  // Font Size & Line Height
+  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("--margin", `${metadata.page.margin}px`);
+    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]);
+
+  // Typography Options
+  useEffect(() => {
+    if (metadata.typography.hideIcons) {
+      document.querySelector("#root")!.classList.add("hide-icons");
+    } else {
+      document.querySelector("#root")!.classList.remove("hide-icons");
+    }
+
+    if (metadata.typography.underlineLinks) {
+      document.querySelector("#root")!.classList.add("underline-links");
+    } else {
+      document.querySelector("#root")!.classList.remove("underline-links");
+    }
+  }, [metadata]);
+
+  return <Outlet />;
+};

apps/artboard/src/pages/builder.tsx

@@ -0,0 +1,74 @@
+import { SectionKey } from "@reactive-resume/schema";
+import { pageSizeMap, Template } 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 { 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 as Template);
+
+  const Template = useMemo(() => getTemplate(template), [template]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (event.data.type === "ZOOM_IN") transformRef.current?.zoomIn(0.2);
+      if (event.data.type === "ZOOM_OUT") transformRef.current?.zoomOut(0.2);
+      if (event.data.type === "CENTER_VIEW") transformRef.current?.centerView();
+      if (event.data.type === "RESET_VIEW") {
+        transformRef.current?.resetTransform(0);
+        setTimeout(() => transformRef.current?.centerView(0.8, 0), 10);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [transformRef]);
+
+  return (
+    <TransformWrapper
+      centerOnInit
+      maxScale={2}
+      minScale={0.4}
+      initialScale={0.8}
+      ref={transformRef}
+      limitToBounds={false}
+    >
+      <TransformComponent
+        wrapperClass="!w-screen !h-screen"
+        contentClass="grid items-start justify-center space-x-12 pointer-events-none"
+        contentStyle={{
+          width: `${layout.length * (pageSizeMap[format].width * MM_TO_PX + 42)}px`,
+          gridTemplateColumns: `repeat(${layout.length}, 1fr)`,
+        }}
+      >
+        <AnimatePresence>
+          {layout.map((columns, pageIndex) => (
+            <motion.div
+              layout
+              key={pageIndex}
+              initial={{ opacity: 0, x: -200, y: 0 }}
+              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

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

apps/artboard/src/providers/index.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import { Outlet } from "react-router-dom";
+
+import { useArtboardStore } from "../store/artboard";
+
+export const Providers = () => {
+  const resume = useArtboardStore((state) => state.resume);
+  const setResume = useArtboardStore((state) => state.setResume);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (event.data.type === "SET_RESUME") setResume(event.data.payload);
+      if (event.data.type === "SET_THEME") {
+        event.data.payload === "dark"
+          ? document.documentElement.classList.add("dark")
+          : document.documentElement.classList.remove("dark");
+      }
+    };
+
+    const resumeData = window.localStorage.getItem("resume");
+    if (resumeData) return setResume(JSON.parse(resumeData));
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [setResume]);
+
+  // Only for testing, in production this will be fetched from window.postMessage
+  // useEffect(() => {
+  //   setResume(sampleResume);
+  // }, [setResume]);
+
+  if (!resume) return null;
+
+  return <Outlet />;
+};

apps/artboard/src/router/index.tsx

@@ -0,0 +1,17 @@
+import { createBrowserRouter, createRoutesFromChildren, Route } from "react-router-dom";
+
+import { ArtboardPage } from "../pages/artboard";
+import { BuilderLayout } from "../pages/builder";
+import { PreviewLayout } from "../pages/preview";
+import { Providers } from "../providers";
+
+export const routes = createRoutesFromChildren(
+  <Route element={<Providers />}>
+    <Route path="artboard" element={<ArtboardPage />}>
+      <Route path="builder" element={<BuilderLayout />} />
+      <Route path="preview" element={<PreviewLayout />} />
+    </Route>
+  </Route>,
+);
+
+export const router = createBrowserRouter(routes);

apps/artboard/src/store/artboard.ts

@@ -0,0 +1,12 @@
+import { ResumeData } from "@reactive-resume/schema";
+import { create } from "zustand";
+
+export type ArtboardStore = {
+  resume: ResumeData;
+  setResume: (resume: ResumeData) => void;
+};
+
+export const useArtboardStore = create<ArtboardStore>()((set) => ({
+  resume: null as unknown as ResumeData,
+  setResume: (resume) => set({ resume }),
+}));

apps/artboard/src/styles/main.css

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  font-variant-ligatures: none;
+
+  @apply border-current;
+}
+
+#root {
+  @apply antialiased;
+}
+
+#root.hide-icons .ph {
+  @apply hidden;
+}
+
+#root.underline-links a {
+  @apply underline underline-offset-2;
+}
+
+.wysiwyg {
+  @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 prose-li:leading-normal;
+}

apps/artboard/src/templates/azurill.tsx

@@ -0,0 +1,507 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, linearTransform } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-2 pb-2 text-center">
+      <Picture />
+
+      <div>
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin text-primary" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone text-primary" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at text-primary" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        <Link url={basics.url} />
+        {basics.customFields.map((item) => (
+          <div key={item.id} className="flex items-center gap-x-1.5">
+            <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <div className="mb-2 hidden font-bold text-primary group-[.main]:block">
+        <h4>{section.name}</h4>
+      </div>
+
+      <div className="mb-2 hidden items-center gap-x-2 text-center font-bold text-primary group-[.sidebar]:flex">
+        <div className="h-1.5 w-1.5 rounded-full border border-primary" />
+        <h4>{section.name}</h4>
+        <div className="h-1.5 w-1.5 rounded-full border border-primary" />
+      </div>
+
+      <main className={cn("relative space-y-2", "border-l border-primary pl-4")}>
+        <div className="absolute left-[-4.5px] top-[8px] hidden h-[8px] w-[8px] rounded-full bg-primary group-[.main]:block" />
+
+        <div
+          className="wysiwyg"
+          style={{ columns: section.columns }}
+          dangerouslySetInnerHTML={{ __html: section.content }}
+        />
+      </main>
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="relative h-1 w-[128px] group-[.sidebar]:mx-auto">
+    <div className="absolute inset-0 h-1 w-[128px] rounded bg-primary opacity-25" />
+    <div
+      className="absolute inset-0 h-1 rounded bg-primary"
+      style={{ width: linearTransform(level, 0, 5, 0, 128) }}
+    />
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <div className="mb-2 hidden font-bold text-primary group-[.main]:block">
+        <h4>{section.name}</h4>
+      </div>
+
+      <div className="mx-auto mb-2 hidden items-center gap-x-2 text-center font-bold text-primary group-[.sidebar]:flex">
+        <div className="h-1.5 w-1.5 rounded-full border border-primary" />
+        <h4>{section.name}</h4>
+        <div className="h-1.5 w-1.5 rounded-full border border-primary" />
+      </div>
+
+      <div
+        className="grid gap-x-6 gap-y-3 group-[.sidebar]:mx-auto group-[.sidebar]:text-center"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div
+                key={item.id}
+                className={cn(
+                  "relative space-y-2",
+                  "border-primary group-[.main]:border-l group-[.main]:pl-4",
+                  className,
+                )}
+              >
+                <div>{children?.(item as T)}</div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                {url !== undefined && <Link url={url} />}
+
+                <div className="absolute left-[-4.5px] top-px hidden h-[8px] w-[8px] rounded-full bg-primary group-[.main]:block" />
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.score}</div>
+          <div>{item.studyType}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Azurill = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-3">
+      {isFirstPage && <Header />}
+
+      <div className="grid grid-cols-3 gap-x-4">
+        <div className="sidebar group space-y-4">
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="main group col-span-2 space-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/bronzor.tsx

@@ -0,0 +1,514 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex flex-col items-center space-y-2 text-center">
+      <Picture />
+
+      <div>
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin text-primary" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone text-primary" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at text-primary" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        <Link url={basics.url} />
+        {basics.customFields.map((item) => (
+          <div key={item.id} className="flex items-center gap-x-1.5">
+            <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
+      <div>
+        <h4 className="text-base font-bold">{section.name}</h4>
+      </div>
+
+      <div
+        className="wysiwyg col-span-4"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-2 w-2 rounded-full border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
+      <div>
+        <h4 className="text-base font-bold">{section.name}</h4>
+      </div>
+
+      <div
+        className="col-span-4 grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Bronzor = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-4">
+      {isFirstPage && <Header />}
+
+      <div className="space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/chikorita.tsx

@@ -0,0 +1,517 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex items-center space-x-4">
+      <Picture />
+
+      <div className="space-y-2">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn(
+          "h-2 w-2 rounded-full border border-primary group-[.sidebar]:border-background",
+          level > index && "bg-primary group-[.sidebar]:bg-background",
+        )}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="grid h-full grid-cols-3">
+      <div className="main p-custom group col-span-2 space-y-4">
+        {isFirstPage && <Header />}
+
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+
+      <div className="sidebar p-custom group h-full space-y-4 bg-primary text-background">
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/ditto.tsx

@@ -0,0 +1,550 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="p-custom relative grid grid-cols-3 space-x-4 pb-0">
+      <Picture className="mx-auto" />
+
+      <div className="relative z-10 col-span-2 text-background">
+        <div className="space-y-0.5">
+          <h2 className="text-3xl font-bold">{basics.name}</h2>
+          <p>{basics.headline}</p>
+        </div>
+
+        <div className="text-text col-span-2 col-start-2 mt-10">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+            {basics.location && (
+              <>
+                <div className="flex items-center gap-x-1.5">
+                  <i className="ph ph-bold ph-map-pin text-primary" />
+                  <div>{basics.location}</div>
+                </div>
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </>
+            )}
+
+            {basics.phone && (
+              <>
+                <div className="flex items-center gap-x-1.5">
+                  <i className="ph ph-bold ph-phone text-primary" />
+                  <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                    {basics.phone}
+                  </a>
+                </div>
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </>
+            )}
+            {basics.email && (
+              <>
+                <div className="flex items-center gap-x-1.5">
+                  <i className="ph ph-bold ph-at text-primary" />
+                  <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                    {basics.email}
+                  </a>
+                </div>
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </>
+            )}
+            {isUrl(basics.url.href) && (
+              <>
+                <Link url={basics.url} />
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </>
+            )}
+            {basics.customFields.map((item) => (
+              <Fragment key={item.id}>
+                <div className="flex items-center gap-x-1.5">
+                  <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+                  <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                </div>
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 text-base font-bold">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-2 w-4 border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 text-base font-bold">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div
+                key={item.id}
+                className={cn("relative space-y-2 pl-4 group-[.sidebar]:pl-0", className)}
+              >
+                <div className="relative -ml-4 group-[.sidebar]:ml-0">
+                  <div className="pl-4 group-[.sidebar]:pl-0">
+                    {children?.(item as T)}
+                    {url !== undefined && <Link url={url} />}
+                  </div>
+
+                  <div className="absolute inset-y-0 -left-px border-l-[4px] border-primary group-[.sidebar]:hidden" />
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                <div className="absolute inset-y-0 left-0 border-l border-primary group-[.sidebar]:hidden" />
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} className="space-y-0" keywordsKey="keywords">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Ditto = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div>
+      {isFirstPage && (
+        <div className="relative">
+          <Header />
+          <div className="absolute inset-x-0 top-0 h-[85px] w-full bg-primary" />
+        </div>
+      )}
+
+      <div className="grid grid-cols-3">
+        <div className="sidebar p-custom group space-y-4">
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="main p-custom group col-span-2 space-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/gengar.tsx

@@ -0,0 +1,533 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, hexToRgb, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="p-custom space-y-4 bg-primary text-background">
+      <Picture className="border-background" />
+
+      <div>
+        <h2 className="text-2xl font-bold">{basics.name}</h2>
+        <p>{basics.headline}</p>
+      </div>
+
+      <div className="flex flex-col items-start gap-y-2 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        {isUrl(basics.url.href) && <Link url={basics.url} />}
+        {basics.customFields.map((item) => (
+          <Fragment key={item.id}>
+            <div className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`)} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-2.5 w-5 border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-background" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b border-primary text-base font-bold">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} className="space-y-1" keywordsKey="keywords">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Gengar = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+
+  return (
+    <div className="grid min-h-[inherit] grid-cols-3">
+      <div
+        className={cn(
+          "sidebar group flex flex-col",
+          !(isFirstPage || sidebar.length > 0) && "hidden",
+        )}
+      >
+        {isFirstPage && <Header />}
+
+        <div
+          className="p-custom flex-1 space-y-4"
+          style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
+        >
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+
+      <div className="main group col-span-2">
+        {isFirstPage && (
+          <div
+            className="p-custom space-y-4"
+            style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
+          >
+            <Summary />
+          </div>
+        )}
+
+        <div className="p-custom space-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/glalie.tsx

@@ -0,0 +1,527 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, hexToRgb, isEmptyString, isUrl, linearTransform } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex flex-col items-center space-y-4 text-center">
+      <Picture />
+
+      <div className="space-y-4">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="flex flex-col items-start gap-y-1.5 rounded border border-primary px-3 py-4 text-left text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon} text-primary`)} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => {
+  const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+
+  return (
+    <div className="relative">
+      <div
+        className="h-2.5 w-full rounded-sm"
+        style={{ backgroundColor: hexToRgb(primaryColor, 0.4) }}
+      />
+      <div
+        className="absolute inset-y-0 left-0 h-2.5 w-full rounded-sm bg-primary"
+        style={{ width: `${linearTransform(level, 0, 5, 0, 100)}%` }}
+      />
+    </div>
+  );
+};
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold group-[.sidebar]:text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Glalie = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+
+  return (
+    <div className="grid min-h-[inherit] grid-cols-3">
+      <div
+        className="sidebar p-custom group space-y-4"
+        style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
+      >
+        {isFirstPage && <Header />}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+
+      <div className="main p-custom group col-span-2 space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/index.tsx

@@ -0,0 +1,45 @@
+import { Template } from "@reactive-resume/utils";
+
+import { Azurill } from "./azurill";
+import { Bronzor } from "./bronzor";
+import { Chikorita } from "./chikorita";
+import { Ditto } from "./ditto";
+import { Gengar } from "./gengar";
+import { Glalie } from "./glalie";
+import { Kakuna } from "./kakuna";
+import { Leafish } from "./leafish";
+import { Nosepass } from "./nosepass";
+import { Onyx } from "./onyx";
+import { Pikachu } from "./pikachu";
+import { Rhyhorn } from "./rhyhorn";
+
+export const getTemplate = (template: Template) => {
+  switch (template) {
+    case "azurill":
+      return Azurill;
+    case "bronzor":
+      return Bronzor;
+    case "chikorita":
+      return Chikorita;
+    case "ditto":
+      return Ditto;
+    case "gengar":
+      return Gengar;
+    case "glalie":
+      return Glalie;
+    case "kakuna":
+      return Kakuna;
+    case "leafish":
+      return Leafish;
+    case "nosepass":
+      return Nosepass;
+    case "onyx":
+      return Onyx;
+    case "pikachu":
+      return Pikachu;
+    case "rhyhorn":
+      return Rhyhorn;
+    default:
+      return Onyx;
+  }
+};

apps/artboard/src/templates/kakuna.tsx

@@ -0,0 +1,469 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const profiles = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-2 pb-2 text-center">
+      <Picture />
+
+      <div>
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin text-primary" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone text-primary" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at text-primary" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        <Link url={basics.url} />
+        {basics.customFields.map((item) => (
+          <div key={item.id} className="flex items-center gap-x-1.5">
+            <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+          </div>
+        ))}
+      </div>
+
+      {profiles.visible && profiles.items.length > 0 && (
+        <div className="flex items-center gap-x-3 gap-y-0.5">
+          {profiles.items
+            .filter((item) => item.visible)
+            .map((item) => (
+              <div key={item.id} className="flex items-center gap-x-2">
+                <Link
+                  url={item.url}
+                  label={item.username}
+                  className="text-sm"
+                  icon={
+                    <img
+                      className="ph"
+                      width={fontSize}
+                      height={fontSize}
+                      alt={item.network}
+                      src={`https://cdn.simpleicons.org/${item.icon}`}
+                    />
+                  }
+                />
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b border-primary text-center font-bold text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-3 w-5 rounded border-2 border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b border-primary text-center font-bold text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>{children?.(item as T)}</div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                {url !== undefined && <Link url={url} />}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.score}</div>
+          <div>{item.studyType}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div>{item.location}</div>
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Kakuna = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-4">
+      {isFirstPage && <Header />}
+
+      <div className="space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/leafish.tsx

@@ -0,0 +1,468 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, hexToRgb, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+  const profiles = useArtboardStore((state) => state.resume.sections.profiles);
+  const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <div>
+      <div
+        className="p-custom flex items-center space-x-8"
+        style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
+      >
+        <div className="space-y-3">
+          <div>
+            <div className="text-3xl font-bold">{basics.name}</div>
+            <div className="text-base font-medium text-primary">{basics.headline}</div>
+          </div>
+
+          <div
+            className="wysiwyg"
+            style={{ columns: section.columns }}
+            dangerouslySetInnerHTML={{ __html: section.content }}
+          />
+        </div>
+
+        <Picture />
+      </div>
+
+      <div className="p-custom space-y-3" style={{ backgroundColor: hexToRgb(primaryColor, 0.4) }}>
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+
+        {profiles.visible && profiles.items.length > 0 && (
+          <div className="flex items-center gap-x-3 gap-y-0.5">
+            {profiles.items
+              .filter((item) => item.visible)
+              .map((item) => (
+                <div key={item.id} className="flex items-center gap-x-2">
+                  <Link
+                    url={item.url}
+                    label={item.username}
+                    className="text-sm"
+                    icon={
+                      <img
+                        className="ph"
+                        width={fontSize}
+                        height={fontSize}
+                        alt={item.network}
+                        src={`https://cdn.simpleicons.org/${item.icon}`}
+                      />
+                    }
+                  />
+                </div>
+              ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-3 w-6 border-2 border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b border-primary text-left font-bold text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>{children?.(item as T)}</div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                {url !== undefined && <Link url={url} />}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.score}</div>
+          <div>{item.studyType}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div>{item.location}</div>
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Leafish = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div>
+      {isFirstPage && <Header />}
+
+      <div className="p-custom grid grid-cols-2 items-start space-x-6">
+        <div className="grid gap-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="grid gap-y-4">
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/nosepass.tsx

@@ -0,0 +1,528 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="grid grid-cols-4 gap-x-6">
+      <div className="mt-1 space-y-2 text-right">
+        <Picture className="ml-auto" />
+      </div>
+
+      <div className="col-span-3 space-y-2">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="space-y-1 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+        </div>
+
+        <div className="flex flex-wrap gap-x-3 text-sm">
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span className="text-primary">{item.name}</span>
+              <span>{item.value}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id} className="grid grid-cols-4 gap-x-6">
+      <div className="text-right">
+        <h4 className="font-medium text-primary">{section.name}</h4>
+      </div>
+
+      <div className="col-span-3">
+        <div className="relative">
+          <hr className="mt-3 border-primary pb-3" />
+          <div className="absolute bottom-3 right-0 h-3 w-3 bg-primary" />
+        </div>
+
+        <div
+          className="wysiwyg"
+          style={{ columns: section.columns }}
+          dangerouslySetInnerHTML={{ __html: section.content }}
+        />
+      </div>
+    </section>
+  );
+};
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  urlKey?: keyof T;
+  dateKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  urlKey,
+  dateKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className={cn("grid", dateKey !== undefined && "gap-y-4")}>
+      <div className="grid grid-cols-4 gap-x-6">
+        <div className="text-right">
+          <h4 className="font-medium text-primary">{section.name}</h4>
+        </div>
+
+        <div className="col-span-3">
+          <div className="relative">
+            <hr className="mt-3 border-primary" />
+            <div className="absolute bottom-0 right-0 h-3 w-3 bg-primary" />
+          </div>
+        </div>
+      </div>
+
+      {dateKey !== undefined && (
+        <div className="grid grid-cols-4 gap-x-6 gap-y-4">
+          {section.items
+            .filter((item) => item.visible)
+            .map((item) => {
+              const url = (urlKey && get(item, urlKey)) as URL | undefined;
+              const date = (dateKey && get(item, dateKey, "")) as string | undefined;
+              const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+              const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+              return (
+                <Fragment key={item.id}>
+                  <div className="text-right font-medium text-primary">{date}</div>
+
+                  <div className="col-span-3 space-y-1">
+                    {children?.(item as T)}
+
+                    {url !== undefined && <Link url={url} />}
+
+                    {summary !== undefined && !isEmptyString(summary) && (
+                      <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                    )}
+
+                    {keywords !== undefined && keywords.length > 0 && (
+                      <p className="text-sm">{keywords.join(", ")}</p>
+                    )}
+                  </div>
+                </Fragment>
+              );
+            })}
+        </div>
+      )}
+
+      {dateKey === undefined && (
+        <div className="grid grid-cols-4 gap-x-6">
+          <div
+            className="col-span-3 col-start-2 grid gap-x-6 gap-y-3"
+            style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+          >
+            {section.items
+              .filter((item) => item.visible)
+              .map((item) => {
+                const url = (urlKey && get(item, urlKey)) as URL | undefined;
+                const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+                const keywords = (keywordsKey && get(item, keywordsKey, [])) as
+                  | string[]
+                  | undefined;
+
+                return (
+                  <div key={item.id}>
+                    {children?.(item as T)}
+
+                    {url !== undefined && <Link url={url} />}
+
+                    {summary !== undefined && !isEmptyString(summary) && (
+                      <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                    )}
+
+                    {keywords !== undefined && keywords.length > 0 && (
+                      <p className="text-sm">{keywords.join(", ")}</p>
+                    )}
+                  </div>
+                );
+              })}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.studyType}</div>
+          <div>{item.score}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project>
+      section={section}
+      urlKey="url"
+      dateKey="date"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      dateKey="date"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+          <div>{item.location}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Nosepass = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const name = useArtboardStore((state) => state.resume.basics.name);
+
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-6">
+      <div className="flex items-center justify-between">
+        <img alt="Europass Logo" className="h-[42px]" src="https://i.imgur.com/eRK005p.png" />
+
+        <p className="font-medium text-primary">Curriculum Vitae</p>
+
+        <p className="font-medium text-primary">{name}</p>
+      </div>
+
+      {isFirstPage && <Header />}
+
+      <div className="space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/onyx.tsx

@@ -0,0 +1,505 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const profiles = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <div className="flex items-center justify-between space-x-4 border-b border-primary pb-5">
+      <Picture />
+
+      <div className="flex-1 space-y-2">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {profiles.visible && profiles.items.length > 0 && (
+        <div
+          className="grid gap-x-4 gap-y-1 text-right"
+          style={{ gridTemplateColumns: `repeat(${profiles.columns}, auto)` }}
+        >
+          {profiles.items
+            .filter((item) => item.visible)
+            .map((item) => (
+              <div key={item.id} className="flex items-center gap-x-2">
+                <Link
+                  url={item.url}
+                  label={item.username}
+                  className="text-sm"
+                  icon={
+                    <img
+                      className="ph"
+                      width={fontSize}
+                      height={fontSize}
+                      alt={item.network}
+                      src={`https://cdn.simpleicons.org/${item.icon}`}
+                    />
+                  }
+                />
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="font-bold text-primary">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-3 w-3 rounded border-2 border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="font-bold text-primary">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Onyx = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-4">
+      {isFirstPage && <Header />}
+
+      {main.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
+
+      {sidebar.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
+    </div>
+  );
+};

apps/artboard/src/templates/pikachu.tsx

@@ -0,0 +1,545 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const borderRadius = useArtboardStore((state) => state.resume.basics.picture.borderRadius);
+
+  return (
+    <div
+      className="summary group bg-primary px-6 pb-7 pt-6 text-background"
+      style={{ borderRadius: `calc(${borderRadius}px - 2px)` }}
+    >
+      <div className="col-span-2 space-y-2.5">
+        <div>
+          <h2 className="text-2xl font-bold">{basics.name}</h2>
+          <p>{basics.headline}</p>
+        </div>
+
+        <hr className="border-background opacity-50" />
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+          {basics.location && (
+            <>
+              <div className="flex items-center gap-x-1.5">
+                <i className="ph ph-bold ph-map-pin" />
+                <div>{basics.location}</div>
+              </div>
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </>
+          )}
+          {basics.phone && (
+            <>
+              <div className="flex items-center gap-x-1.5">
+                <i className="ph ph-bold ph-phone" />
+                <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                  {basics.phone}
+                </a>
+              </div>
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </>
+          )}
+          {basics.email && (
+            <>
+              <div className="flex items-center gap-x-1.5">
+                <i className="ph ph-bold ph-at" />
+                <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                  {basics.email}
+                </a>
+              </div>
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </>
+          )}
+          {isUrl(basics.url.href) && (
+            <>
+              <Link url={basics.url} />
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </>
+          )}
+          {basics.customFields.map((item) => (
+            <Fragment key={item.id}>
+              <div className="flex items-center gap-x-1.5">
+                <i className={cn(`ph ph-bold ph-${item.icon}`)} />
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              </div>
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b border-primary text-base font-bold">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <i
+        key={index}
+        className={cn(
+          "ph ph-diamond text-primary",
+          level > index && "ph-fill",
+          level <= index && "ph-bold",
+        )}
+      />
+      // <div
+      //   key={index}
+      //   className={cn("h-2 w-4 border border-primary", level > index && "bg-primary")}
+      // />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary group-[.summary]:text-background" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b border-primary text-base font-bold">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} className="space-y-1" keywordsKey="keywords">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Pikachu = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom grid grid-cols-3 space-x-6">
+      <div className="sidebar group space-y-4">
+        {isFirstPage && <Picture className="w-full !max-w-none" />}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+
+      <div className="main group col-span-2 space-y-4">
+        {isFirstPage && <Header />}
+
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/rhyhorn.tsx

@@ -0,0 +1,511 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex items-center space-x-4">
+      <Picture />
+
+      <div className="space-y-0.5">
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0"
+            >
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-2 w-2 rounded-full border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Rhyhorn = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-4">
+      {isFirstPage && <Header />}
+
+      {main.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
+
+      {sidebar.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
+    </div>
+  );
+};