- fixes #2401

revert: readded the .env.example file

.dockerignore

@@ -1,22 +1,62 @@
-!README.md
-.dockerignore
+# Compiled Output
+dist
+tmp
+/out-tsc
+
+# Project Dependencies
+.git
+.gitignore
+node_modules
+
+# Docker
+compose*.yml
+Dockerfile
+
+# IDEs and Editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vs/*
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# Miscellaneous
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
 .DS_Store
+Thumbs.db
 .editorconfig
 .eslint*
-.git
-.github
-.gitignore
-.husky
+
+# Generated Files
 .nx
-.prettier*
-.vscode
-*.env*
-*.md
-compose*.yml
-dist
-Dockerfile
-node_modules
-Thumbs.db
-tmp
+.swc
+fly.toml
+stats.html
 tools/compose/*
-tools/scripts/*
+tools/scripts/*
+
+# Environment Variables
+*.env*
+!.env.example
+
+# Lingui Compiled Messages
+apps/client/src/locales/_build/
+apps/client/src/locales/*/messages.mjs

.env.example

@@ -4,18 +4,10 @@ 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
+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
@@ -38,6 +30,8 @@ REFRESH_TOKEN_SECRET=refresh_token_secret
 CHROME_PORT=8080
 CHROME_TOKEN=chrome_token
 CHROME_URL=ws://localhost:8080
+# Launch puppeteer with flag to ignore https errors
+# CHROME_IGNORE_HTTPS_ERRORS=true
 
 # Mail Server (for e-mails)
 # For testing, you can use https://ethereal.email/create
@@ -51,18 +45,18 @@ STORAGE_REGION=us-east-1
 STORAGE_BUCKET=default
 STORAGE_ACCESS_KEY=minioadmin
 STORAGE_SECRET_KEY=minioadmin
+STORAGE_USE_SSL=false
+STORAGE_SKIP_BUCKET_CHECK=false
 
-# Redis (for cache & server session management)
-REDIS_URL=redis://default:password@localhost:6379
-
-# Sentry (for error reporting, Optional)
-# VITE_SENTRY_DSN=
+# Nx Cloud (Optional)
+# NX_CLOUD_ACCESS_TOKEN=
 
 # Crowdin (Optional)
-CROWDIN_PROJECT_ID=
-CROWDIN_PERSONAL_TOKEN=
+# CROWDIN_PROJECT_ID=
+# CROWDIN_PERSONAL_TOKEN=
 
-# Email (Optional)
+# Feature Flags (Optional)
+# DISABLE_SIGNUPS=false
 # DISABLE_EMAIL_AUTH=false
 
 # GitHub (OAuth, Optional)
@@ -74,3 +68,14 @@ CROWDIN_PERSONAL_TOKEN=
 # GOOGLE_CLIENT_ID=
 # GOOGLE_CLIENT_SECRET=
 # GOOGLE_CALLBACK_URL=http://localhost:5173/api/auth/google/callback
+
+# OpenID (Optional)
+# VITE_OPENID_NAME=
+# OPENID_AUTHORIZATION_URL=
+# OPENID_CALLBACK_URL=http://localhost:5173/api/auth/openid/callback
+# OPENID_CLIENT_ID=
+# OPENID_CLIENT_SECRET=
+# OPENID_ISSUER=
+# OPENID_SCOPE=openid profile email
+# OPENID_TOKEN_URL=
+# OPENID_USER_INFO_URL=

.eslintrc.json

@@ -8,6 +8,10 @@
       "extends": ["plugin:prettier/recommended"],
       "plugins": ["simple-import-sort", "unused-imports"],
       "rules": {
+        // eslint
+        "no-console": "error",
+        "no-return-await": "off",
+
         // simple-import-sort
         "simple-import-sort/imports": "error",
         "simple-import-sort/exports": "error",
@@ -38,15 +42,52 @@
               }
             ]
           }
+        ],
+
+        // prettier
+        "prettier/prettier": [
+          "warn",
+          {
+            "endOfLine": "auto"
+          }
         ]
       }
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nx/typescript"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": "latest",
+        "project": ["tsconfig.*?.json"]
+      },
+      "extends": [
+        "plugin:@nx/typescript",
+        "plugin:@typescript-eslint/strict-type-checked",
+        "plugin:@typescript-eslint/stylistic-type-checked",
+        "plugin:unicorn/recommended"
+      ],
+      "plugins": ["@typescript-eslint", "unicorn"],
       "rules": {
         // typescript-eslint
-        "@typescript-eslint/no-unused-vars": "off"
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/return-await": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/consistent-type-imports": "error",
+        "@typescript-eslint/restrict-template-expressions": "off",
+        "@typescript-eslint/no-redundant-type-constituents": "off",
+        "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+
+        // unicorn
+        "unicorn/no-null": "off",
+        "unicorn/prevent-abbreviations": "off",
+        "unicorn/prefer-string-replace-all": "off",
+        "unicorn/prefer-structured-clone": "off"
       }
     },
     {

.github/FUNDING.yml

@@ -1,3 +1,2 @@
 github: AmruthPillai
 open_collective: reactive-resume
-custom: https://paypal.me/amruthde

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -3,7 +3,7 @@ name: 🐞 Bug Report
 description: Create a bug report to help improve Reactive Resume
 
 title: "[Bug] <title>"
-labels: [Bug, Needs Triage]
+labels: [bug, v4, needs triage]
 assignees: "AmruthPillai"
 
 body:
@@ -21,7 +21,7 @@ body:
       label: Product Variant
       description: What variant of Reactive Resume are you using?
       options:
-        - Cloud (http://rxresu.me)
+        - Cloud (https://rxresu.me)
         - Self-Hosted
     validations:
       required: true
@@ -76,7 +76,10 @@ body:
         - Bronzor
         - Chikorita
         - Ditto
+        - Gengar
+        - Glalie
         - Kakuna
+        - Leafish
         - Nosepass
         - Onyx
         - Pikachu

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -3,7 +3,7 @@ name: ✨ Feature Request
 description: Suggest an feature or idea that you would like to see in Reactive Resume
 
 title: "[Feature] <title>"
-labels: [Feature, Needs Triage]
+labels: [enhancement, v4, needs triage]
 assignees: "AmruthPillai"
 
 body:

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

@@ -1,39 +1,48 @@
-name: Lint, Test and Build
-
-on:
-  push:
-  pull_request:
-
-permissions:
-  actions: read
-  contents: read
+name: Lint, Test & Build
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  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 }}
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 
 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 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
+    runs-on: ubuntu-latest
 
-  agents:
-    name: Nx Cloud - Agents
-    uses: nrwl/ci/.github/workflows/nx-cloud-agents.yml@v0.14.0
-    with:
-      number-of-agents: 3
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.2.2
+        with:
+          fetch-depth: 2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4.0.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4.1.0
+        with:
+          cache: "pnpm"
+          node-version: 22
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm run lint
+
+      - name: Format
+        run: pnpm run format
+
+      - name: Test
+        run: pnpm run test
+
+      - name: Build
+        run: pnpm run build

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

@@ -7,7 +7,7 @@ on:
       - "*"
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: "${{ github.workflow }}-${{ github.ref }}"
   cancel-in-progress: true
 
 env:
@@ -21,15 +21,14 @@ jobs:
       version: ${{ steps.version.outputs.version }}
 
     strategy:
-      fail-fast: false
       matrix:
         platform:
           - linux/amd64
-          # - linux/arm64 # Skipping linux/arm64 for now as it is extremely slow to build on GitHub Actions
+          - linux/arm64
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.4
 
       - name: Extract version from package.json
         id: version
@@ -38,38 +37,42 @@ jobs:
       - 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
+        uses: docker/login-action@v3.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_TOKEN }}
 
       - name: Login to GitHub Container Registery
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3.1.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ github.token }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3.3.0
+
       - name: Extract Docker Metadata
         id: meta
-        uses: docker/metadata-action@v5.0.0
+        uses: docker/metadata-action@v5.5.1
         with:
           tags: type=semver,pattern={{version}},prefix=v,value=${{ steps.version.outputs.version }}
           images: |
             ${{ env.IMAGE }}
             ghcr.io/${{ env.IMAGE }}
 
+      - name: Prepare a unique name for Artifacts
+        id: artifact_name
+        run: |
+          name=$(echo -n "${{ matrix.platform }}" | sed -e 's/[ \t:\/\\"<>|*?]/-/g' -e 's/--*/-/g')
+          echo "name=$name" >> "$GITHUB_OUTPUT"
+
       - name: Build and Push by Digest
-        uses: docker/build-push-action@v5.0.0
+        uses: docker/build-push-action@v5.3.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
@@ -83,9 +86,9 @@ jobs:
           touch "/tmp/digests/${digest#sha256:}"
 
       - name: Upload Digest
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4.3.3
         with:
-          name: digests
+          name: digests-${{ steps.artifact_name.outputs.name }}
           path: /tmp/digests/*
           if-no-files-found: error
           retention-days: 1
@@ -98,33 +101,34 @@ jobs:
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.4
 
       - name: Download Digest
-        uses: actions/download-artifact@v3.0.0
+        uses: actions/download-artifact@v4.1.7
         with:
-          name: digests
           path: /tmp/digests
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
+          pattern: digests-*
+          merge-multiple: true
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_TOKEN }}
 
       - name: Login to GitHub Container Registery
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3.1.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ github.token }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3.3.0
+
       - name: Extract Docker Metadata
         id: meta
-        uses: docker/metadata-action@v5.0.0
+        uses: docker/metadata-action@v5.5.1
         with:
           tags: type=semver,pattern={{version}},prefix=v,value=${{ needs.build.outputs.version }}
           images: |
@@ -142,8 +146,22 @@ jobs:
           docker buildx imagetools inspect ${{ env.IMAGE }}:${{ steps.meta.outputs.version }}
 
       - name: Update Repository Description
-        uses: peter-evans/dockerhub-description@v3
+        uses: peter-evans/dockerhub-description@v4.0.0
         with:
           repository: ${{ github.repository }}
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_TOKEN }}
+
+      - name: Deploy the latest image on rxresu.me
+        run: curl -kX POST ${{ secrets.SERVICE_WEBHOOK }}
+
+      - name: Inform about the release on Discord
+        uses: sarisia/actions-status-discord@v1.14.3
+        if: always()
+        with:
+          username: ReleaseBot
+          webhook: ${{ secrets.DISCORD_WEBHOOK }}
+          status: ${{ job.status }}
+          title: "Release `${{ steps.meta.outputs.version }}`"
+          description: "A new version of Reactive Resume just dropped! 🚀"
+          url: "https://github.com/AmruthPillai/Reactive-Resume"

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

@@ -7,6 +7,7 @@ on:
 
 jobs:
   sync:
+    if: github.repository == 'AmruthPillai/Reactive-Resume'
     runs-on: ubuntu-latest
 
     steps:

.gitignore

@@ -16,6 +16,7 @@ node_modules
 *.sublime-workspace
 
 # IDE - VSCode
+.vs/*
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
@@ -39,9 +40,9 @@ Thumbs.db
 # Generated Files
 .nx
 .swc
+.turbo
 fly.toml
 stats.html
-libs/prisma
 
 # Environment Variables
 *.env*
@@ -49,4 +50,4 @@ libs/prisma
 
 # Lingui Compiled Messages
 apps/client/src/locales/_build/
-apps/client/src/locales/*/messages.mjs
+apps/client/src/locales/*/messages.*js

.ncurc.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://raw.githubusercontent.com/raineorshine/npm-check-updates/main/src/types/RunOptions.json",
+  "upgrade": true,
+  "target": "minor",
+  "install": "always",
+  "packageManager": "pnpm",
+  "reject": [
+    "nx",
+    "eslint",
+    "@nx/*",
+    "@swc/*",
+    "@swc-node/*",
+    "@reactive-resume/*",
+    "eslint-plugin-unused-imports"
+  ]
+}

.prettierignore

@@ -2,4 +2,6 @@
 /coverage
 /.nx/cache
 stats.html
-pnpm-lock.yaml
+pnpm-lock.yaml
+compose-dev.yml
+compose.yml

.prettierrc

@@ -1,3 +1,6 @@
 {
-  "printWidth": 100
+  "printWidth": 100,
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["cn", "cva"]
 }

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,14 +1,9 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "css.validate": false,
+  "i18n-ally.localesPaths": ["apps/client/src/locales"],
   "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/*"
-    ]
-  },
-  "i18n-ally.localesPaths": ["apps/client/src/locales"]
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

CHANGELOG.md

@@ -14,6 +14,6 @@ When it comes to **security**, you now have the option to protect your account w
 
 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.
+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, 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).

CODE_OF_CONDUCT.md

@@ -0,0 +1,132 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[INSERT CONTACT METHOD].
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

CONTRIBUTING.md

@@ -2,14 +2,14 @@
 
 ## 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.
+There are a number of Docker Compose examples that are suitable for a wide variety of deployment strategies depending on your use-case. All 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)
+- Node.js 20 or higher (with pnpm)
 
 ### 1. Fork and Clone the Repository
 
@@ -43,6 +43,7 @@ It should take just under half a minute for all the services to be booted up cor
 ### 5. Run the development server
 
 ```sh
+pnpm prisma:migrate:dev
 pnpm dev
 ```
 
@@ -56,15 +57,13 @@ You can also visit `http://localhost:3000/api/health`, the health check endpoint
   "info": {
     "database": { "status": "up" },
     "storage": { "status": "up" },
-    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" },
-    "redis": { "status": "up" }
+    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" }
   },
   "error": {},
   "details": {
     "database": { "status": "up" },
     "storage": { "status": "up" },
-    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" },
-    "redis": { "status": "up" }
+    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" }
   }
 }
 ```
@@ -81,6 +80,6 @@ Once you are happy with the changes you've made locally, commit it to your repos
 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.
+It helps to be as descriptive 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.

Dockerfile

@@ -1,9 +1,11 @@
+ARG NX_CLOUD_ACCESS_TOKEN
+
 # --- Base Image ---
 FROM node:lts-bullseye-slim AS base
+ARG NX_CLOUD_ACCESS_TOKEN
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-ARG NX_CLOUD_ACCESS_TOKEN
 
 RUN corepack enable
 
@@ -11,29 +13,33 @@ WORKDIR /app
 
 # --- Build Image ---
 FROM base AS build
-
-ENV NX_CLOUD_ACCESS_TOKEN=$NX_CLOUD_ACCESS_TOKEN
+ARG NX_CLOUD_ACCESS_TOKEN
 
 COPY .npmrc package.json pnpm-lock.yaml ./
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+COPY ./tools/prisma /app/tools/prisma
+RUN pnpm install --frozen-lockfile
 
 COPY . .
 
+ENV NX_CLOUD_ACCESS_TOKEN=$NX_CLOUD_ACCESS_TOKEN
+
 RUN pnpm run build
 
 # --- Release Image ---
 FROM base AS release
+ARG NX_CLOUD_ACCESS_TOKEN
 
-RUN apt update && apt install -y dumb-init --no-install-recommends
+RUN apt update && apt install -y dumb-init --no-install-recommends && rm -rf /var/lib/apt/lists/*
 
 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
+RUN 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 PORT=3000
 ENV NODE_ENV=production
 
 EXPOSE 3000

README.md

@@ -1,6 +1,17 @@
-![Reactive Resume](https://i.imgur.com/FFc4nyZ.jpg)
+<div align="center" markdown="1">
+  <a href="https://go.warp.dev/Reactive-Resume">
+    <img alt="Warp Sponsorship" width="400" src="https://github.com/warpdotdev/brand-assets/blob/main/Github/Sponsor/Warp-Github-LG-03.png?raw=true" />
+  </a>
 
-![App Version](https://img.shields.io/github/package-json/version/AmruthPillai/Reactive-Resume/v4?label=version)
+### [Warp, built for coding with multiple AI agents.](https://go.warp.dev/Reactive-Resume)
+
+[Available for MacOS, Linux, & Windows](https://go.warp.dev/Reactive-Resume)<br>
+
+---
+
+<img alt="Reactive Resume" width="800" src="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)
@@ -12,6 +23,8 @@ A free and open-source resume builder that simplifies the process of creating, u
 
 ### [Go to App](https://rxresu.me/) | [Docs](https://docs.rxresu.me/)
 
+</div>
+
 ## Description
 
 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.
@@ -40,15 +53,15 @@ Start creating your standout resume with Reactive Resume today!
 
 - **Free, forever** and open-source
 - No telemetry, user tracking or advertising
-- You can self-host the application in less then 30 seconds
+- You can self-host the application in less than 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
+- Create as many resumes as you like under a single account, optimising each resume for every job application based on its 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.
+- 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
@@ -69,11 +82,9 @@ Start creating your standout resume with Reactive Resume today!
 - 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)
 
@@ -93,3 +104,9 @@ Reactive Resume is packaged and distributed using the [MIT License](/LICENSE.md)
 
 _By the community, for the community._  
 A passion project by [Amruth Pillai](https://www.amruthpillai.com/)
+
+<p>
+  <a href="https://m.do.co/c/ceae1fff245e">
+    <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="200px">
+  </a>
+</p>

SECURITY.md

@@ -11,4 +11,4 @@
 
 ## Reporting 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.
+Please raise an issue on GitHub to report any security vulnerabilities in the app. If the vulnerability is potentially lethal, email me about it on hello@amruthpillai.com.

apps/artboard/.eslintrc.json

@@ -12,6 +12,21 @@
         }
       },
       "rules": {
+        // eslint
+        "@typescript-eslint/no-require-imports": "off",
+
+        // react
+        "react/no-unescaped-entities": "off",
+        "react/jsx-sort-props": [
+          "error",
+          {
+            "reservedFirst": true,
+            "callbacksLast": true,
+            "shorthandFirst": true,
+            "noSortAlphabetically": true
+          }
+        ],
+
         // react-hooks
         "react-hooks/exhaustive-deps": "off",
 

apps/artboard/index.html

@@ -39,6 +39,6 @@
     <script type="module" src="/src/main.tsx"></script>
 
     <!-- Phosphor Icons -->
-    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/web"></script>
   </body>
 </html>

apps/artboard/postcss.config.js

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

apps/artboard/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="none"><rect width="256" height="256" rx="80" style="fill:#000;stroke:none;stroke-width:.396357"/><g fill="#09090b" fill-rule="evenodd" clip-rule="evenodd"><path d="m282.857 257.192-37.64 50.15 39.21.004 17.95-23.88 17.95 23.876h39.21l-75.11-100.256-39.21-.003zm23.775-31.764 13.696-18.345h39.21l-33.234 44.435zM119.537 135.21v129.485h36.626V230.29h19.993c17.99-.01 40.841-3.946 52.762-21.828 4.686-7.152 7.03-15.6 7.03-25.342 0-9.865-2.344-18.374-7.03-25.527-4.687-7.276-11.346-12.825-19.978-16.648-8.51-3.823-18.37-5.735-30.21-5.735zm90.963 95.183s-14.972 6.285-34.681 6.047l21.162 28.255h39.21zm-54.337-28.405h20.348c7.646 0 13.319-1.665 17.018-4.995 3.823-3.33 5.735-7.954 5.735-13.874 0-6.042-1.912-10.729-5.735-14.058-3.7-3.33-9.372-4.995-17.018-4.995h-20.348z" style="fill:#fafafa;fill-opacity:1;stroke-width:.9375" transform="matrix(.91667 0 0 .91667 -91.576 -74.838)"/></g></svg>

apps/artboard/public/icon/dark.svg

@@ -1,8 +1 @@
-<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>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#09090b" fill-rule="evenodd" d="m16.332 15.592-3.764 5.015h3.921l1.795-2.388 1.795 2.388H24L16.489 10.58h-3.921Zm2.377-3.177 1.37-1.834H24l-3.323 4.443zM0 3.393v12.949h3.663v-3.44h1.999c1.799-.002 4.084-.395 5.276-2.183.469-.716.703-1.56.703-2.535 0-.986-.234-1.837-.703-2.552-.469-.728-1.135-1.283-1.998-1.665-.85-.382-1.837-.574-3.02-.574Zm9.096 9.519s-1.497.628-3.468.604l2.116 2.826h3.921zm-5.433-2.84h2.034c.765 0 1.332-.167 1.702-.5.382-.333.574-.796.574-1.388 0-.604-.192-1.073-.574-1.405-.37-.333-.937-.5-1.702-.5H3.663Z" clip-rule="evenodd" style="stroke-width:.09375"/></svg>

apps/artboard/public/icon/light.svg

@@ -1,8 +1 @@
-<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>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#09090b" fill-rule="evenodd" d="m16.332 15.592-3.764 5.015h3.921l1.795-2.388 1.795 2.388H24L16.489 10.58h-3.921Zm2.377-3.177 1.37-1.834H24l-3.323 4.443zM0 3.393v12.949h3.663v-3.44h1.999c1.799-.002 4.084-.395 5.276-2.183.469-.716.703-1.56.703-2.535 0-.986-.234-1.837-.703-2.552-.469-.728-1.135-1.283-1.998-1.665-.85-.382-1.837-.574-3.02-.574Zm9.096 9.519s-1.497.628-3.468.604l2.116 2.826h3.921zm-5.433-2.84h2.034c.765 0 1.332-.167 1.702-.5.382-.333.574-.796.574-1.388 0-.604-.192-1.073-.574-1.405-.37-.333-.937-.5-1.702-.5H3.663Z" clip-rule="evenodd" style="stroke-width:.09375;fill:#fafafa;fill-opacity:1"/></svg>

apps/artboard/src/components/brand-icon.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from "react";
+
+type BrandIconProps = {
+  slug: string;
+};
+
+export const BrandIcon = forwardRef<HTMLImageElement, BrandIconProps>(({ slug }, ref) => {
+  if (slug.toLowerCase() === "linkedin") {
+    return (
+      <img
+        ref={ref}
+        alt="LinkedIn"
+        className="size-4"
+        src={`${window.location.origin}/support-logos/linkedin.svg`}
+      />
+    );
+  }
+
+  return (
+    <img ref={ref} alt={slug} className="size-4" src={`https://cdn.simpleicons.org/${slug}`} />
+  );
+});
+
+BrandIcon.displayName = "BrandIcon";

apps/artboard/src/components/page.tsx

@@ -20,10 +20,9 @@ export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
   return (
     <div
       data-page={pageNumber}
-      className={cn("relative bg-white", mode === "builder" && "shadow-2xl")}
+      className={cn("relative bg-background text-foreground", mode === "builder" && "shadow-2xl")}
       style={{
         fontFamily,
-        padding: page.margin,
         width: `${pageSizeMap[page.format].width * MM_TO_PX}px`,
         minHeight: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
       }}

apps/artboard/src/components/picture.tsx

@@ -14,8 +14,8 @@ export const Picture = ({ className }: PictureProps) => {
 
   return (
     <img
-      src={picture.url}
       alt="Profile"
+      src={picture.url}
       className={cn(
         "relative z-20 object-cover",
         picture.effects.border && "border-primary",

apps/artboard/src/constants/helmet.ts

@@ -0,0 +1,5 @@
+import { HelmetData } from "react-helmet-async";
+
+export const helmetData = new HelmetData({});
+
+export const helmetContext = helmetData.context;

apps/artboard/src/main.tsx

@@ -1,10 +1,11 @@
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "react-router";
 
 import { router } from "./router";
 
-const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = ReactDOM.createRoot(document.querySelector("#root")!);
 
 root.render(
   <StrictMode>

apps/artboard/src/pages/artboard.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useMemo } from "react";
-import { Outlet } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import { Outlet } from "react-router";
 import webfontloader from "webfontloader";
 
 import { useArtboardStore } from "../store/artboard";
 
 export const ArtboardPage = () => {
+  const name = useArtboardStore((state) => state.resume.basics.name);
   const metadata = useArtboardStore((state) => state.resume.metadata);
 
   const fontString = useMemo(() => {
@@ -32,34 +34,41 @@ export const ArtboardPage = () => {
     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}`,
-    );
+    document.documentElement.style.setProperty("--color-foreground", 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");
-    }
+    // eslint-disable-next-line unicorn/prefer-spread
+    const elements = Array.from(document.querySelectorAll(`[data-page]`));
 
-    if (metadata.typography.underlineLinks) {
-      document.querySelector("#root")!.classList.add("underline-links");
-    } else {
-      document.querySelector("#root")!.classList.remove("underline-links");
+    for (const el of elements) {
+      el.classList.toggle("hide-icons", metadata.typography.hideIcons);
+      el.classList.toggle("underline-links", metadata.typography.underlineLinks);
     }
   }, [metadata]);
 
-  return <Outlet />;
+  return (
+    <>
+      <Helmet>
+        <title>{name} | Reactive Resume</title>
+        {metadata.css.visible && (
+          <style id="custom-css" lang="css">
+            {metadata.css.value}
+          </style>
+        )}
+      </Helmet>
+
+      <Outlet />
+    </>
+  );
 };

apps/artboard/src/pages/builder.tsx

@@ -1,17 +1,22 @@
-import { SectionKey } from "@reactive-resume/schema";
-import { pageSizeMap, Template } from "@reactive-resume/utils";
+import type { SectionKey } from "@reactive-resume/schema";
+import type { Template } from "@reactive-resume/utils";
+import { pageSizeMap } 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 { useEffect, useMemo, useRef, useState } from "react";
+import type { ReactZoomPanPinchRef } from "react-zoom-pan-pinch";
+import { 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 [wheelPanning, setWheelPanning] = useState(true);
+
   const transformRef = useRef<ReactZoomPanPinchRef>(null);
-  const format = useArtboardStore((state) => state.resume.metadata.page.format);
+
   const layout = useArtboardStore((state) => state.resume.metadata.layout);
+  const format = useArtboardStore((state) => state.resume.metadata.page.format);
   const template = useArtboardStore((state) => state.resume.metadata.template as Template);
 
   const Template = useMemo(() => getTemplate(template), [template]);
@@ -27,6 +32,9 @@ export const BuilderLayout = () => {
         transformRef.current?.resetTransform(0);
         setTimeout(() => transformRef.current?.centerView(0.8, 0), 10);
       }
+      if (event.data.type === "TOGGLE_PAN_MODE") {
+        setWheelPanning(event.data.panMode);
+      }
     };
 
     window.addEventListener("message", handleMessage);
@@ -38,12 +46,14 @@ export const BuilderLayout = () => {
 
   return (
     <TransformWrapper
+      ref={transformRef}
       centerOnInit
       maxScale={2}
       minScale={0.4}
       initialScale={0.8}
-      ref={transformRef}
       limitToBounds={false}
+      wheel={{ wheelDisabled: wheelPanning }}
+      panning={{ wheelPanning: wheelPanning }}
     >
       <TransformComponent
         wrapperClass="!w-screen !h-screen"
@@ -56,8 +66,8 @@ export const BuilderLayout = () => {
         <AnimatePresence>
           {layout.map((columns, pageIndex) => (
             <motion.div
-              layout
               key={pageIndex}
+              layout
               initial={{ opacity: 0, x: -200, y: 0 }}
               animate={{ opacity: 1, x: 0, transition: { delay: pageIndex * 0.3 } }}
               exit={{ opacity: 0, x: -200 }}

apps/artboard/src/pages/preview.tsx

@@ -1,5 +1,5 @@
-import { SectionKey } from "@reactive-resume/schema";
-import { Template } from "@reactive-resume/utils";
+import type { SectionKey } from "@reactive-resume/schema";
+import type { Template } from "@reactive-resume/utils";
 import { useMemo } from "react";
 
 import { Page } from "../components/page";

apps/artboard/src/providers/index.tsx

@@ -1,6 +1,8 @@
 import { useEffect } from "react";
-import { Outlet } from "react-router-dom";
+import { HelmetProvider } from "react-helmet-async";
+import { Outlet } from "react-router";
 
+import { helmetContext } from "../constants/helmet";
 import { useArtboardStore } from "../store/artboard";
 
 export const Providers = () => {
@@ -10,31 +12,28 @@ export const Providers = () => {
   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);
+    window.addEventListener("message", handleMessage, false);
 
     return () => {
-      window.removeEventListener("message", handleMessage);
+      window.removeEventListener("message", handleMessage, false);
     };
-  }, [setResume]);
+  }, []);
 
-  // Only for testing, in production this will be fetched from window.postMessage
-  // useEffect(() => {
-  //   setResume(sampleResume);
-  // }, [setResume]);
+  useEffect(() => {
+    const resumeData = window.localStorage.getItem("resume");
 
+    if (resumeData) setResume(JSON.parse(resumeData));
+  }, [window.localStorage.getItem("resume")]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!resume) return null;
 
-  return <Outlet />;
+  return (
+    <HelmetProvider context={helmetContext}>
+      <Outlet />
+    </HelmetProvider>
+  );
 };

apps/artboard/src/router/index.tsx

@@ -1,4 +1,4 @@
-import { createBrowserRouter, createRoutesFromChildren, Route } from "react-router-dom";
+import { createBrowserRouter, createRoutesFromChildren, Route } from "react-router";
 
 import { ArtboardPage } from "../pages/artboard";
 import { BuilderLayout } from "../pages/builder";

apps/artboard/src/store/artboard.ts

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

apps/artboard/src/styles/main.css

@@ -8,18 +8,22 @@
   @apply border-current;
 }
 
+body {
+  overflow: hidden;
+}
+
 #root {
   @apply antialiased;
 }
 
-#root.hide-icons .ph {
+[data-page].hide-icons .ph {
   @apply hidden;
 }
 
-#root.underline-links a {
+[data-page].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;
+  @apply prose-foreground prose max-w-none prose-headings:mb-2 prose-headings:mt-0 prose-p:mb-2 prose-p:mt-0 prose-p:leading-normal prose-a:break-all prose-ol:mb-2 prose-ol:mt-0 prose-ul:mb-2 prose-ul:mt-0 prose-li:mb-2 prose-li:mt-0 prose-li:leading-normal prose-img:mb-2 prose-img:mt-0 prose-hr:mb-2 prose-hr:mt-0;
 }

apps/artboard/src/templates/azurill.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Profile,
@@ -15,15 +13,16 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, isEmptyString, isUrl, linearTransform } from "@reactive-resume/utils";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, linearTransform, sanitize } from "@reactive-resume/utils";
 import get from "lodash.get";
 import React, { Fragment } from "react";
 
+import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
-import { TemplateProps } from "../types/template";
+import type { TemplateProps } from "../types/template";
 
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
@@ -64,7 +63,13 @@ const Header = () => {
         {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>
+            {isUrl(item.value) ? (
+              <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                {item.name || item.value}
+              </a>
+            ) : (
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            )}
           </div>
         ))}
       </div>
@@ -84,18 +89,18 @@ const Summary = () => {
       </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" />
+        <div className="size-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 className="size-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="absolute left-[-4.5px] top-[8px] hidden size-[8px] rounded-full bg-primary group-[.main]:block" />
 
         <div
-          className="wysiwyg"
+          dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
           style={{ columns: section.columns }}
-          dangerouslySetInnerHTML={{ __html: section.content }}
+          className="wysiwyg"
         />
       </main>
     </section>
@@ -117,28 +122,51 @@ const Rating = ({ level }: RatingProps) => (
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, 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" />}
+      {!iconOnRight && (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}
+        {label ?? (url.label || url.href)}
       </a>
+      {iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</div>
+  );
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -158,7 +186,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -167,9 +195,9 @@ const Section = <T,>({
       </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" />
+        <div className="size-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 className="size-1.5 rounded-full border border-primary" />
       </div>
 
       <div
@@ -196,7 +224,10 @@ const Section = <T,>({
                 <div>{children?.(item as T)}</div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -205,9 +236,9 @@ const Section = <T,>({
                   <p className="text-sm">{keywords.join(", ")}</p>
                 )}
 
-                {url !== undefined && <Link url={url} />}
+                {url !== undefined && section.separateLinks && <Link url={url} />}
 
-                <div className="absolute left-[-4.5px] top-px hidden h-[8px] w-[8px] rounded-full bg-primary group-[.main]:block" />
+                <div className="absolute left-[-4.5px] top-px hidden size-[8px] rounded-full bg-primary group-[.main]:block" />
               </div>
             );
           })}
@@ -218,30 +249,17 @@ const Section = <T,>({
 
 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}`}
-                />
-              }
-            />
+            <Link url={item.url} label={item.username} icon={<BrandIcon slug={item.icon} />} />
           ) : (
             <p>{item.username}</p>
           )}
-          <p className="text-sm">{item.network}</p>
+          {!item.icon && <p className="text-sm">{item.network}</p>}
         </div>
       )}
     </Section>
@@ -255,7 +273,12 @@ const Experience = () => {
     <Section<Experience> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.company}</div>
+          <LinkedEntity
+            name={item.company}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.position}</div>
           <div>{item.location}</div>
           <div className="font-bold">{item.date}</div>
@@ -272,7 +295,12 @@ const Education = () => {
     <Section<Education> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.institution}</div>
+          <LinkedEntity
+            name={item.institution}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.area}</div>
           <div>{item.score}</div>
           <div>{item.studyType}</div>
@@ -291,7 +319,7 @@ const Awards = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.title}</div>
-          <div>{item.awarder}</div>
+          <LinkedEntity name={item.awarder} url={item.url} separateLinks={section.separateLinks} />
           <div className="font-bold">{item.date}</div>
         </div>
       )}
@@ -307,7 +335,7 @@ const Certifications = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.name}</div>
-          <div>{item.issuer}</div>
+          <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
           <div className="font-bold">{item.date}</div>
         </div>
       )}
@@ -347,7 +375,12 @@ const Publications = () => {
     <Section<Publication> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.publisher}</div>
           <div className="font-bold">{item.date}</div>
         </div>
@@ -363,7 +396,12 @@ const Volunteer = () => {
     <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.organization}</div>
+          <LinkedEntity
+            name={item.organization}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.position}</div>
           <div>{item.location}</div>
           <div className="font-bold">{item.date}</div>
@@ -396,7 +434,12 @@ const Projects = () => {
       {(item) => (
         <div>
           <div>
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
 
             <div className="font-bold">{item.date}</div>
@@ -414,7 +457,12 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -435,7 +483,12 @@ const Custom = ({ id }: { id: string }) => {
       {(item) => (
         <div>
           <div>
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
 
             <div className="font-bold">{item.date}</div>
@@ -449,36 +502,50 @@ const Custom = ({ id }: { id: string }) => {
 
 const mapSectionToComponent = (section: SectionKey) => {
   switch (section) {
-    case "profiles":
+    case "profiles": {
       return <Profiles />;
-    case "summary":
+    }
+    case "summary": {
       return <Summary />;
-    case "experience":
+    }
+    case "experience": {
       return <Experience />;
-    case "education":
+    }
+    case "education": {
       return <Education />;
-    case "awards":
+    }
+    case "awards": {
       return <Awards />;
-    case "certifications":
+    }
+    case "certifications": {
       return <Certifications />;
-    case "skills":
+    }
+    case "skills": {
       return <Skills />;
-    case "interests":
+    }
+    case "interests": {
       return <Interests />;
-    case "publications":
+    }
+    case "publications": {
       return <Publications />;
-    case "volunteer":
+    }
+    case "volunteer": {
       return <Volunteer />;
-    case "languages":
+    }
+    case "languages": {
       return <Languages />;
-    case "projects":
+    }
+    case "projects": {
       return <Projects />;
-    case "references":
+    }
+    case "references": {
       return <References />;
-    default:
+    }
+    default: {
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
       return null;
+    }
   }
 };
 
@@ -486,7 +553,7 @@ export const Azurill = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-3">
+    <div className="p-custom space-y-3">
       {isFirstPage && <Header />}
 
       <div className="grid grid-cols-3 gap-x-4">
@@ -496,7 +563,9 @@ export const Azurill = ({ columns, isFirstPage = false }: TemplateProps) => {
           ))}
         </div>
 
-        <div className="main group col-span-2 space-y-4">
+        <div
+          className={cn("main group space-y-4", sidebar.length > 0 ? "col-span-2" : "col-span-3")}
+        >
           {main.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
           ))}

apps/artboard/src/templates/bronzor.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Profile,
@@ -15,15 +13,16 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
 
+import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
-import { TemplateProps } from "../types/template";
+import type { TemplateProps } from "../types/template";
 
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
@@ -64,7 +63,13 @@ const Header = () => {
         {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>
+            {isUrl(item.value) ? (
+              <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                {item.name || item.value}
+              </a>
+            ) : (
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            )}
           </div>
         ))}
       </div>
@@ -84,9 +89,9 @@ const Summary = () => {
       </div>
 
       <div
-        className="wysiwyg col-span-4"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
-        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg col-span-4"
       />
     </section>
   );
@@ -99,7 +104,7 @@ const Rating = ({ level }: RatingProps) => (
     {Array.from({ length: 5 }).map((_, index) => (
       <div
         key={index}
-        className={cn("h-2 w-2 rounded-full border border-primary", level > index && "bg-primary")}
+        className={cn("size-2 rounded-full border border-primary", level > index && "bg-primary")}
       />
     ))}
   </div>
@@ -108,28 +113,51 @@ const Rating = ({ level }: RatingProps) => (
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, 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" />}
+      {!iconOnRight && (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}
+        {label ?? (url.label || url.href)}
       </a>
+      {iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</div>
+  );
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -149,7 +177,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
@@ -173,11 +201,14 @@ const Section = <T,>({
               <div key={item.id} className={cn("space-y-2", className)}>
                 <div>
                   {children?.(item as T)}
-                  {url !== undefined && <Link url={url} />}
+                  {url !== undefined && section.separateLinks && <Link url={url} />}
                 </div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -195,30 +226,17 @@ const Section = <T,>({
 
 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}`}
-                />
-              }
-            />
+            <Link url={item.url} label={item.username} icon={<BrandIcon slug={item.icon} />} />
           ) : (
             <p>{item.username}</p>
           )}
-          <p className="text-sm">{item.network}</p>
+          {!item.icon && <p className="text-sm">{item.network}</p>}
         </div>
       )}
     </Section>
@@ -231,9 +249,14 @@ const Experience = () => {
   return (
     <Section<Experience> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -253,9 +276,14 @@ const Education = () => {
   return (
     <Section<Education> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -276,10 +304,14 @@ const Awards = () => {
   return (
     <Section<Award> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
             <div className="font-bold">{item.title}</div>
-            <div>{item.awarder}</div>
+            <LinkedEntity
+              name={item.awarder}
+              url={item.url}
+              separateLinks={section.separateLinks}
+            />
           </div>
 
           <div className="shrink-0 text-right">
@@ -297,10 +329,10 @@ const Certifications = () => {
   return (
     <Section<Certification> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
             <div className="font-bold">{item.name}</div>
-            <div>{item.issuer}</div>
+            <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
           </div>
 
           <div className="shrink-0 text-right">
@@ -343,9 +375,14 @@ const Publications = () => {
   return (
     <Section<Publication> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -364,9 +401,14 @@ const Volunteer = () => {
   return (
     <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -401,9 +443,14 @@ const Projects = () => {
   return (
     <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -423,7 +470,12 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -442,9 +494,14 @@ const Custom = ({ id }: { id: string }) => {
       keywordsKey="keywords"
     >
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -460,36 +517,50 @@ const Custom = ({ id }: { id: string }) => {
 
 const mapSectionToComponent = (section: SectionKey) => {
   switch (section) {
-    case "profiles":
+    case "profiles": {
       return <Profiles />;
-    case "summary":
+    }
+    case "summary": {
       return <Summary />;
-    case "experience":
+    }
+    case "experience": {
       return <Experience />;
-    case "education":
+    }
+    case "education": {
       return <Education />;
-    case "awards":
+    }
+    case "awards": {
       return <Awards />;
-    case "certifications":
+    }
+    case "certifications": {
       return <Certifications />;
-    case "skills":
+    }
+    case "skills": {
       return <Skills />;
-    case "interests":
+    }
+    case "interests": {
       return <Interests />;
-    case "publications":
+    }
+    case "publications": {
       return <Publications />;
-    case "volunteer":
+    }
+    case "volunteer": {
       return <Volunteer />;
-    case "languages":
+    }
+    case "languages": {
       return <Languages />;
-    case "projects":
+    }
+    case "projects": {
       return <Projects />;
-    case "references":
+    }
+    case "references": {
       return <References />;
-    default:
+    }
+    default: {
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
       return null;
+    }
   }
 };
 
@@ -497,7 +568,7 @@ export const Bronzor = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-4">
+    <div className="p-custom space-y-4">
       {isFirstPage && <Header />}
 
       <div className="space-y-4">

apps/artboard/src/templates/chikorita.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Profile,
@@ -15,61 +13,66 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
 
+import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
-import { TemplateProps } from "../types/template";
+import type { TemplateProps } from "../types/template";
 
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
 
   return (
-    <div className="grid grid-cols-3">
-      <div className="col-span-2 flex items-center gap-x-4">
-        <Picture />
+    <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="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}
+        <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")} />
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
                 </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>
       </div>
     </div>
@@ -86,9 +89,9 @@ const Summary = () => {
       <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
 
       <div
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
-        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -102,7 +105,7 @@ const Rating = ({ level }: RatingProps) => (
       <div
         key={index}
         className={cn(
-          "h-2 w-2 rounded-full border border-primary group-[.sidebar]:border-background",
+          "size-2 rounded-full border border-primary group-[.sidebar]:border-background",
           level > index && "bg-primary group-[.sidebar]:bg-background",
         )}
       />
@@ -113,28 +116,53 @@ const Rating = ({ level }: RatingProps) => (
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, 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" />}
+      {!iconOnRight &&
+        (icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-white" />)}
       <a
         href={url.href}
         target="_blank"
         rel="noreferrer noopener nofollow"
         className={cn("inline-block", className)}
       >
-        {label || url.label || url.href}
+        {label ?? (url.label || url.href)}
       </a>
+      {iconOnRight &&
+        (icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-white" />)}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</div>
+  );
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -154,7 +182,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -176,11 +204,14 @@ const Section = <T,>({
               <div key={item.id} className={cn("space-y-2", className)}>
                 <div>
                   {children?.(item as T)}
-                  {url !== undefined && <Link url={url} />}
+                  {url !== undefined && section.separateLinks && <Link url={url} />}
                 </div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg group-[.sidebar]:prose-invert"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -202,9 +233,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -224,9 +260,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -243,30 +284,17 @@ const Education = () => {
 
 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}`}
-                />
-              }
-            />
+            <Link url={item.url} label={item.username} icon={<BrandIcon slug={item.icon} />} />
           ) : (
             <p>{item.username}</p>
           )}
-          <p className="text-sm">{item.network}</p>
+          {!item.icon && <p className="text-sm">{item.network}</p>}
         </div>
       )}
     </Section>
@@ -279,10 +307,14 @@ const 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="flex items-start 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>
+            <LinkedEntity
+              name={item.awarder}
+              url={item.url}
+              separateLinks={section.separateLinks}
+            />
           </div>
 
           <div className="shrink-0 text-right">
@@ -300,13 +332,10 @@ const 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="flex items-start 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">
+            <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
             <div className="font-bold">{item.date}</div>
           </div>
         </div>
@@ -346,9 +375,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -367,9 +401,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -404,9 +443,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -426,7 +470,12 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -445,9 +494,14 @@ const Custom = ({ id }: { id: string }) => {
       keywordsKey="keywords"
     >
       {(item) => (
-        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -463,69 +517,81 @@ const Custom = ({ id }: { id: string }) => {
 
 const mapSectionToComponent = (section: SectionKey) => {
   switch (section) {
-    case "profiles":
+    case "profiles": {
       return <Profiles />;
-    case "summary":
+    }
+    case "summary": {
       return <Summary />;
-    case "experience":
+    }
+    case "experience": {
       return <Experience />;
-    case "education":
+    }
+    case "education": {
       return <Education />;
-    case "awards":
+    }
+    case "awards": {
       return <Awards />;
-    case "certifications":
+    }
+    case "certifications": {
       return <Certifications />;
-    case "skills":
+    }
+    case "skills": {
       return <Skills />;
-    case "interests":
+    }
+    case "interests": {
       return <Interests />;
-    case "publications":
+    }
+    case "publications": {
       return <Publications />;
-    case "volunteer":
+    }
+    case "volunteer": {
       return <Volunteer />;
-    case "languages":
+    }
+    case "languages": {
       return <Languages />;
-    case "projects":
+    }
+    case "projects": {
       return <Projects />;
-    case "references":
+    }
+    case "references": {
       return <References />;
-    default:
+    }
+    default: {
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
       return null;
+    }
   }
 };
 
 export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
-  const margin = useArtboardStore((state) => state.resume.metadata.page.margin);
   const [main, sidebar] = columns;
 
   return (
-    <>
-      <div className="space-y-4">
+    <div className="grid min-h-[inherit] grid-cols-3">
+      <div
+        className={cn(
+          "main p-custom group space-y-4",
+          sidebar.length > 0 ? "col-span-2" : "col-span-3",
+        )}
+      >
         {isFirstPage && <Header />}
 
-        <div className="relative z-10 grid grid-cols-3 space-x-8">
-          <div className="main group col-span-2 space-y-4">
-            {main.map((section) => (
-              <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
-            ))}
-          </div>
-
-          <div className="sidebar group space-y-4 text-background">
-            {sidebar.map((section) => (
-              <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
-            ))}
-          </div>
-        </div>
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
       </div>
 
       <div
-        style={{ columnGap: margin }}
-        className="pointer-events-none absolute inset-0 grid grid-cols-3"
+        className={cn(
+          "sidebar p-custom group h-full space-y-4 bg-primary text-background",
+          sidebar.length === 0 && "hidden",
+        )}
       >
-        <div className="col-start-3 bg-primary" />
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
       </div>
-    </>
+    </div>
   );
 };

apps/artboard/src/templates/ditto.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Profile,
@@ -15,30 +13,31 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
 
+import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
-import { TemplateProps } from "../types/template";
+import type { TemplateProps } from "../types/template";
 
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
 
   return (
-    <div className="relative z-20 grid grid-cols-3 space-x-4">
-      <div className="mx-auto">
-        <Picture />
-      </div>
+    <div className="p-custom relative grid grid-cols-3 space-x-4 pb-0">
+      <Picture className="mx-auto" />
 
-      <div className="col-span-2 space-y-0.5 text-background">
-        <h2 className="min-h-[30px] text-4xl font-bold">{basics.name}</h2>
-        <p className="min-h-[24px]">{basics.headline}</p>
+      <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 !mt-10">
+        <div className="col-span-2 col-start-2 mt-10 text-foreground">
           <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
             {basics.location && (
               <>
@@ -46,7 +45,7 @@ const Header = () => {
                   <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" />
+                <div className="bg-text size-1 rounded-full last:hidden" />
               </>
             )}
 
@@ -58,7 +57,7 @@ const Header = () => {
                     {basics.phone}
                   </a>
                 </div>
-                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+                <div className="bg-text size-1 rounded-full last:hidden" />
               </>
             )}
             {basics.email && (
@@ -69,22 +68,28 @@ const Header = () => {
                     {basics.email}
                   </a>
                 </div>
-                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+                <div className="bg-text size-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" />
+                <div className="bg-text size-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>
+                  {isUrl(item.value) ? (
+                    <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                      {item.name || item.value}
+                    </a>
+                  ) : (
+                    <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                  )}
                 </div>
-                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+                <div className="bg-text size-1 rounded-full last:hidden" />
               </Fragment>
             ))}
           </div>
@@ -104,9 +109,9 @@ const Summary = () => {
       <h4 className="mb-2 text-base font-bold">{section.name}</h4>
 
       <div
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
-        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -128,28 +133,51 @@ const Rating = ({ level }: RatingProps) => (
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, 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" />}
+      {!iconOnRight && (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}
+        {label ?? (url.label || url.href)}
       </a>
+      {iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</div>
+  );
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -169,7 +197,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -195,14 +223,17 @@ const Section = <T,>({
                 <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} />}
+                    {url !== undefined && section.separateLinks && <Link url={url} />}
                   </div>
 
-                  <div className="absolute inset-y-0 -left-px border-l-[4px] border-primary group-[.sidebar]:hidden" />
+                  <div className="absolute inset-y-0 -left-px border-l-4 border-primary group-[.sidebar]:hidden" />
                 </div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -222,30 +253,17 @@ const Section = <T,>({
 
 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}`}
-                />
-              }
-            />
+            <Link url={item.url} label={item.username} icon={<BrandIcon slug={item.icon} />} />
           ) : (
             <p>{item.username}</p>
           )}
-          <p className="text-sm">{item.network}</p>
+          {!item.icon && <p className="text-sm">{item.network}</p>}
         </div>
       )}
     </Section>
@@ -258,9 +276,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -280,9 +303,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -303,10 +331,14 @@ const 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="flex items-start 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>
+            <LinkedEntity
+              name={item.awarder}
+              url={item.url}
+              separateLinks={section.separateLinks}
+            />
           </div>
 
           <div className="shrink-0 text-right">
@@ -324,10 +356,10 @@ const 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="flex items-start 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>
+            <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
           </div>
 
           <div className="shrink-0 text-right">
@@ -370,9 +402,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -391,9 +428,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -428,9 +470,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -450,7 +497,12 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -469,9 +521,14 @@ const Custom = ({ id }: { id: string }) => {
       keywordsKey="keywords"
     >
       {(item) => (
-        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -487,36 +544,50 @@ const Custom = ({ id }: { id: string }) => {
 
 const mapSectionToComponent = (section: SectionKey) => {
   switch (section) {
-    case "profiles":
+    case "profiles": {
       return <Profiles />;
-    case "summary":
+    }
+    case "summary": {
       return <Summary />;
-    case "experience":
+    }
+    case "experience": {
       return <Experience />;
-    case "education":
+    }
+    case "education": {
       return <Education />;
-    case "awards":
+    }
+    case "awards": {
       return <Awards />;
-    case "certifications":
+    }
+    case "certifications": {
       return <Certifications />;
-    case "skills":
+    }
+    case "skills": {
       return <Skills />;
-    case "interests":
+    }
+    case "interests": {
       return <Interests />;
-    case "publications":
+    }
+    case "publications": {
       return <Publications />;
-    case "volunteer":
+    }
+    case "volunteer": {
       return <Volunteer />;
-    case "languages":
+    }
+    case "languages": {
       return <Languages />;
-    case "projects":
+    }
+    case "projects": {
       return <Projects />;
-    case "references":
+    }
+    case "references": {
       return <References />;
-    default:
+    }
+    default: {
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
       return null;
+    }
   }
 };
 
@@ -524,19 +595,27 @@ export const Ditto = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-4">
-      {isFirstPage && <div className="absolute inset-x-0 top-0 z-10 h-32 bg-primary" />}
+    <div>
+      {isFirstPage && (
+        <div className="relative">
+          <Header />
+          <div className="absolute inset-x-0 top-0 h-[85px] w-full bg-primary" />
+        </div>
+      )}
 
-      {isFirstPage && <Header />}
-
-      <div className="grid grid-cols-3 space-x-4">
-        <div className="sidebar group space-y-4">
+      <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 group col-span-2 space-y-4">
+        <div
+          className={cn(
+            "main p-custom group space-y-4",
+            sidebar.length > 0 ? "col-span-2" : "col-span-3",
+          )}
+        >
           {main.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
           ))}

apps/artboard/src/templates/gengar.tsx

@@ -0,0 +1,605 @@
+import type {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+} from "@reactive-resume/schema";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, hexToRgb, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { BrandIcon } from "../components/brand-icon";
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import type { 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}`)} />
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
+            </div>
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+  const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <div className="p-custom space-y-4" style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}>
+      <section id={section.id}>
+        <div
+          dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
+          style={{ columns: section.columns }}
+          className="wysiwyg"
+        />
+      </section>
+    </div>
+  );
+};
+
+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;
+  iconOnRight?: boolean;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {!iconOnRight &&
+        (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>
+      {iconOnRight &&
+        (icon ?? (
+          <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-background" />
+        ))}
+    </div>
+  );
+};
+
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary group-[.sidebar]:text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</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.filter((item) => item.visible).length === 0) 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 && section.separateLinks && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
+                )}
+
+                {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);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link url={item.url} label={item.username} icon={<BrandIcon slug={item.icon} />} />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          {!item.icon && <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <LinkedEntity
+              name={item.awarder}
+              url={item.url}
+              separateLinks={section.separateLinks}
+            />
+          </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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
+          </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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
+          <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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={cn("main group", sidebar.length > 0 ? "col-span-2" : "col-span-3")}>
+        {isFirstPage && <Summary />}
+
+        <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,612 @@
+import type {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+} from "@reactive-resume/schema";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import {
+  cn,
+  hexToRgb,
+  isEmptyString,
+  isUrl,
+  linearTransform,
+  sanitize,
+} from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { BrandIcon } from "../components/brand-icon";
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import type { 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`)} />
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <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
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
+        style={{ columns: section.columns }}
+        className="wysiwyg"
+      />
+    </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;
+  iconOnRight?: boolean;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {!iconOnRight &&
+        (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>
+      {iconOnRight &&
+        (icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-primary" />)}
+    </div>
+  );
+};
+
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary group-[.sidebar]:text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</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.filter((item) => item.visible).length === 0) 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 && section.separateLinks && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
+                )}
+
+                {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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link url={item.url} label={item.username} icon={<BrandIcon slug={item.icon} />} />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          {!item.icon && <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <LinkedEntity
+              name={item.awarder}
+              url={item.url}
+              separateLinks={section.separateLinks}
+            />
+          </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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
+          </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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
+          <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-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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={cn("sidebar p-custom group space-y-4", sidebar.length === 0 && "hidden")}
+        style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
+      >
+        {isFirstPage && <Header />}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+
+      <div
+        className={cn(
+          "main p-custom group space-y-4",
+          sidebar.length > 0 ? "col-span-2" : "col-span-3",
+        )}
+      >
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/index.tsx

@@ -1,10 +1,13 @@
-import { Template } from "@reactive-resume/utils";
+import type { 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";
@@ -12,25 +15,44 @@ import { Rhyhorn } from "./rhyhorn";
 
 export const getTemplate = (template: Template) => {
   switch (template) {
-    case "onyx":
-      return Onyx;
-    case "kakuna":
-      return Kakuna;
-    case "rhyhorn":
-      return Rhyhorn;
-    case "azurill":
+    case "azurill": {
       return Azurill;
-    case "ditto":
-      return Ditto;
-    case "chikorita":
-      return Chikorita;
-    case "bronzor":
+    }
+    case "bronzor": {
       return Bronzor;
-    case "pikachu":
-      return Pikachu;
-    case "nosepass":
+    }
+    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;
-    default:
+    }
+    case "onyx": {
       return Onyx;
+    }
+    case "pikachu": {
+      return Pikachu;
+    }
+    case "rhyhorn": {
+      return Rhyhorn;
+    }
+    default: {
+      return Onyx;
+    }
   }
 };

apps/artboard/src/templates/kakuna.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Project,
@@ -14,20 +12,20 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
 import get from "lodash.get";
 import React, { Fragment } from "react";
 
+import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
-import { TemplateProps } from "../types/template";
+import type { 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">
@@ -61,11 +59,19 @@ const Header = () => {
             </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>
+            {isUrl(item.value) ? (
+              <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                {item.name || item.value}
+              </a>
+            ) : (
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            )}
           </div>
         ))}
       </div>
@@ -80,15 +86,7 @@ const Header = () => {
                   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}`}
-                    />
-                  }
+                  icon={<BrandIcon slug={item.icon} />}
                 />
               </div>
             ))}
@@ -110,9 +108,9 @@ const Summary = () => {
       </h4>
 
       <div
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
-        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -134,28 +132,51 @@ const Rating = ({ level }: RatingProps) => (
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, 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" />}
+      {!iconOnRight && (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}
+        {label ?? (url.label || url.href)}
       </a>
+      {iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</div>
+  );
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -175,7 +196,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -200,7 +221,10 @@ const Section = <T,>({
                 <div>{children?.(item as T)}</div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -209,7 +233,7 @@ const Section = <T,>({
                   <p className="text-sm">{keywords.join(", ")}</p>
                 )}
 
-                {url !== undefined && <Link url={url} />}
+                {url !== undefined && section.separateLinks && <Link url={url} />}
               </div>
             );
           })}
@@ -225,7 +249,12 @@ const Experience = () => {
     <Section<Experience> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.company}</div>
+          <LinkedEntity
+            name={item.company}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.position}</div>
           <div>{item.location}</div>
           <div className="font-bold">{item.date}</div>
@@ -242,7 +271,12 @@ const Education = () => {
     <Section<Education> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.institution}</div>
+          <LinkedEntity
+            name={item.institution}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.area}</div>
           <div>{item.score}</div>
           <div>{item.studyType}</div>
@@ -261,7 +295,7 @@ const Awards = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.title}</div>
-          <div>{item.awarder}</div>
+          <LinkedEntity name={item.awarder} url={item.url} separateLinks={section.separateLinks} />
           <div className="font-bold">{item.date}</div>
         </div>
       )}
@@ -277,7 +311,7 @@ const Certifications = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.name}</div>
-          <div>{item.issuer}</div>
+          <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
           <div className="font-bold">{item.date}</div>
         </div>
       )}
@@ -317,7 +351,12 @@ const Publications = () => {
     <Section<Publication> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.publisher}</div>
           <div className="font-bold">{item.date}</div>
         </div>
@@ -333,7 +372,12 @@ const Volunteer = () => {
     <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.organization}</div>
+          <LinkedEntity
+            name={item.organization}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.position}</div>
           <div>{item.location}</div>
           <div className="font-bold">{item.date}</div>
@@ -366,7 +410,12 @@ const Projects = () => {
       {(item) => (
         <div>
           <div>
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
             <div className="font-bold">{item.date}</div>
           </div>
@@ -383,7 +432,12 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -404,7 +458,12 @@ const Custom = ({ id }: { id: string }) => {
       {(item) => (
         <div>
           <div>
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
             <div>{item.location}</div>
             <div className="font-bold">{item.date}</div>
@@ -417,34 +476,47 @@ const Custom = ({ id }: { id: string }) => {
 
 const mapSectionToComponent = (section: SectionKey) => {
   switch (section) {
-    case "summary":
+    case "summary": {
       return <Summary />;
-    case "experience":
+    }
+    case "experience": {
       return <Experience />;
-    case "education":
+    }
+    case "education": {
       return <Education />;
-    case "awards":
+    }
+    case "awards": {
       return <Awards />;
-    case "certifications":
+    }
+    case "certifications": {
       return <Certifications />;
-    case "skills":
+    }
+    case "skills": {
       return <Skills />;
-    case "interests":
+    }
+    case "interests": {
       return <Interests />;
-    case "publications":
+    }
+    case "publications": {
       return <Publications />;
-    case "volunteer":
+    }
+    case "volunteer": {
       return <Volunteer />;
-    case "languages":
+    }
+    case "languages": {
       return <Languages />;
-    case "projects":
+    }
+    case "projects": {
       return <Projects />;
-    case "references":
+    }
+    case "references": {
       return <References />;
-    default:
+    }
+    default: {
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
       return null;
+    }
   }
 };
 
@@ -452,7 +524,7 @@ export const Kakuna = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-4">
+    <div className="p-custom space-y-4">
       {isFirstPage && <Header />}
 
       <div className="space-y-4">

apps/artboard/src/templates/leafish.tsx

@@ -0,0 +1,537 @@
+import type {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+} from "@reactive-resume/schema";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, hexToRgb, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { BrandIcon } from "../components/brand-icon";
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import type { 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);
+
+  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
+            dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
+            style={{ columns: section.columns }}
+            className="wysiwyg"
+          />
+        </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")} />
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <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={<BrandIcon slug={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;
+  iconOnRight?: boolean;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {!iconOnRight && (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>
+      {iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
+    </div>
+  );
+};
+
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</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.filter((item) => item.visible).length === 0) 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
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                {url !== undefined && section.separateLinks && <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>
+          <LinkedEntity
+            name={item.company}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
+          <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>
+          <LinkedEntity
+            name={item.institution}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
+          <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>
+          <LinkedEntity name={item.awarder} url={item.url} separateLinks={section.separateLinks} />
+          <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>
+          <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
+          <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>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
+          <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>
+          <LinkedEntity
+            name={item.organization}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
+          <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>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
+          <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>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
+            <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={cn("grid gap-y-4", sidebar.length === 0 && "col-span-2")}>
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className={cn("grid gap-y-4", sidebar.length === 0 && "hidden")}>
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/nosepass.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Profile,
@@ -15,15 +13,16 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
 
+import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
-import { TemplateProps } from "../types/template";
+import type { TemplateProps } from "../types/template";
 
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
@@ -31,7 +30,6 @@ const Header = () => {
   return (
     <div className="grid grid-cols-4 gap-x-6">
       <div className="mt-1 space-y-2 text-right">
-        <p className="font-medium text-primary">Personal Information</p>
         <Picture className="ml-auto" />
       </div>
 
@@ -71,8 +69,16 @@ const Header = () => {
           {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>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <>
+                  <span className="text-primary">{item.name}</span>
+                  <span>{item.value}</span>
+                </>
+              )}
             </div>
           ))}
         </div>
@@ -95,13 +101,13 @@ const Summary = () => {
       <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 className="absolute bottom-3 right-0 size-3 bg-primary" />
         </div>
 
         <div
-          className="wysiwyg"
+          dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
           style={{ columns: section.columns }}
-          dangerouslySetInnerHTML={{ __html: section.content }}
+          className="wysiwyg"
         />
       </div>
     </section>
@@ -111,28 +117,51 @@ const Summary = () => {
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, 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" />}
+      {!iconOnRight && (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}
+        {label ?? (url.label || url.href)}
       </a>
+      {iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</div>
+  );
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -151,7 +180,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className={cn("grid", dateKey !== undefined && "gap-y-4")}>
@@ -163,7 +192,7 @@ const Section = <T,>({
         <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 className="absolute bottom-0 right-0 size-3 bg-primary" />
           </div>
         </div>
       </div>
@@ -185,10 +214,13 @@ const Section = <T,>({
                   <div className="col-span-3 space-y-1">
                     {children?.(item as T)}
 
-                    {url !== undefined && <Link url={url} />}
+                    {url !== undefined && section.separateLinks && <Link url={url} />}
 
                     {summary !== undefined && !isEmptyString(summary) && (
-                      <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                      <div
+                        dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                        className="wysiwyg"
+                      />
                     )}
 
                     {keywords !== undefined && keywords.length > 0 && (
@@ -220,10 +252,13 @@ const Section = <T,>({
                   <div key={item.id}>
                     {children?.(item as T)}
 
-                    {url !== undefined && <Link url={url} />}
+                    {url !== undefined && section.separateLinks && <Link url={url} />}
 
                     {summary !== undefined && !isEmptyString(summary) && (
-                      <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                      <div
+                        dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                        className="wysiwyg"
+                      />
                     )}
 
                     {keywords !== undefined && keywords.length > 0 && (
@@ -241,30 +276,17 @@ const Section = <T,>({
 
 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}`}
-                />
-              }
-            />
+            <Link url={item.url} label={item.username} icon={<BrandIcon slug={item.icon} />} />
           ) : (
             <p>{item.username}</p>
           )}
-          <p className="text-sm">{item.network}</p>
+          {!item.icon && <p className="text-sm">{item.network}</p>}
         </div>
       )}
     </Section>
@@ -278,7 +300,12 @@ const Experience = () => {
     <Section<Experience> section={section} urlKey="url" dateKey="date" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.company}</div>
+          <LinkedEntity
+            name={item.company}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.position}</div>
           <div>{item.location}</div>
         </div>
@@ -294,7 +321,12 @@ const Education = () => {
     <Section<Education> section={section} urlKey="url" dateKey="date" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.institution}</div>
+          <LinkedEntity
+            name={item.institution}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.area}</div>
           <div>{item.studyType}</div>
           <div>{item.score}</div>
@@ -312,7 +344,7 @@ const Awards = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.title}</div>
-          <div>{item.awarder}</div>
+          <LinkedEntity name={item.awarder} url={item.url} separateLinks={section.separateLinks} />
         </div>
       )}
     </Section>
@@ -327,7 +359,7 @@ const Certifications = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.name}</div>
-          <div>{item.issuer}</div>
+          <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
         </div>
       )}
     </Section>
@@ -366,7 +398,12 @@ const Publications = () => {
     <Section<Publication> section={section} urlKey="url" dateKey="date" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.publisher}</div>
         </div>
       )}
@@ -381,7 +418,12 @@ const Volunteer = () => {
     <Section<Volunteer> section={section} urlKey="url" dateKey="date" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.organization}</div>
+          <LinkedEntity
+            name={item.organization}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.position}</div>
           <div>{item.location}</div>
         </div>
@@ -418,7 +460,12 @@ const Projects = () => {
     >
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -433,7 +480,12 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -454,7 +506,12 @@ const Custom = ({ id }: { id: string }) => {
     >
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
           <div>{item.location}</div>
         </div>
@@ -465,36 +522,50 @@ const Custom = ({ id }: { id: string }) => {
 
 const mapSectionToComponent = (section: SectionKey) => {
   switch (section) {
-    case "profiles":
+    case "profiles": {
       return <Profiles />;
-    case "summary":
+    }
+    case "summary": {
       return <Summary />;
-    case "experience":
+    }
+    case "experience": {
       return <Experience />;
-    case "education":
+    }
+    case "education": {
       return <Education />;
-    case "awards":
+    }
+    case "awards": {
       return <Awards />;
-    case "certifications":
+    }
+    case "certifications": {
       return <Certifications />;
-    case "skills":
+    }
+    case "skills": {
       return <Skills />;
-    case "interests":
+    }
+    case "interests": {
       return <Interests />;
-    case "publications":
+    }
+    case "publications": {
       return <Publications />;
-    case "volunteer":
+    }
+    case "volunteer": {
       return <Volunteer />;
-    case "languages":
+    }
+    case "languages": {
       return <Languages />;
-    case "projects":
+    }
+    case "projects": {
       return <Projects />;
-    case "references":
+    }
+    case "references": {
       return <References />;
-    default:
+    }
+    default: {
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
       return null;
+    }
   }
 };
 
@@ -504,9 +575,9 @@ export const Nosepass = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-4">
+    <div className="p-custom space-y-6">
       <div className="flex items-center justify-between">
-        <img alt="Europass Logo" className="h-[48px]" src="https://i.imgur.com/eRK005p.png" />
+        <img alt="Europass Logo" className="h-[42px]" src="/assets/europass.png" />
 
         <p className="font-medium text-primary">Curriculum Vitae</p>
 

apps/artboard/src/templates/onyx.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Project,
@@ -14,20 +12,20 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
 import get from "lodash.get";
 import React, { Fragment } from "react";
 
+import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
-import { TemplateProps } from "../types/template";
+import type { 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">
@@ -66,7 +64,13 @@ const Header = () => {
           {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>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
             </div>
           ))}
         </div>
@@ -85,15 +89,7 @@ const Header = () => {
                   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}`}
-                    />
-                  }
+                  icon={<BrandIcon slug={item.icon} />}
                 />
               </div>
             ))}
@@ -113,9 +109,9 @@ const Summary = () => {
       <h4 className="font-bold text-primary">{section.name}</h4>
 
       <div
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
-        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -128,7 +124,7 @@ const Rating = ({ level }: RatingProps) => (
     {Array.from({ length: 5 }).map((_, index) => (
       <div
         key={index}
-        className={cn("h-3 w-3 rounded border-2 border-primary", level > index && "bg-primary")}
+        className={cn("size-3 rounded border-2 border-primary", level > index && "bg-primary")}
       />
     ))}
   </div>
@@ -137,28 +133,51 @@ const Rating = ({ level }: RatingProps) => (
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, 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" />}
+      {!iconOnRight && (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}
+        {label ?? (url.label || url.href)}
       </a>
+      {iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</div>
+  );
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -178,7 +197,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -200,11 +219,14 @@ const Section = <T,>({
               <div key={item.id} className={cn("space-y-2", className)}>
                 <div>
                   {children?.(item as T)}
-                  {url !== undefined && <Link url={url} />}
+                  {url !== undefined && section.separateLinks && <Link url={url} />}
                 </div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -226,9 +248,14 @@ const Experience = () => {
   return (
     <Section<Experience> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -248,9 +275,14 @@ const Education = () => {
   return (
     <Section<Education> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -271,10 +303,14 @@ const Awards = () => {
   return (
     <Section<Award> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
             <div className="font-bold">{item.title}</div>
-            <div>{item.awarder}</div>
+            <LinkedEntity
+              name={item.awarder}
+              url={item.url}
+              separateLinks={section.separateLinks}
+            />
           </div>
 
           <div className="shrink-0 text-right">
@@ -292,10 +328,10 @@ const Certifications = () => {
   return (
     <Section<Certification> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
             <div className="font-bold">{item.name}</div>
-            <div>{item.issuer}</div>
+            <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
           </div>
 
           <div className="shrink-0 text-right">
@@ -338,9 +374,14 @@ const Publications = () => {
   return (
     <Section<Publication> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -359,9 +400,14 @@ const Volunteer = () => {
   return (
     <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -396,9 +442,14 @@ const Projects = () => {
   return (
     <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -418,7 +469,12 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -437,9 +493,14 @@ const Custom = ({ id }: { id: string }) => {
       keywordsKey="keywords"
     >
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -455,34 +516,47 @@ const Custom = ({ id }: { id: string }) => {
 
 const mapSectionToComponent = (section: SectionKey) => {
   switch (section) {
-    case "summary":
+    case "summary": {
       return <Summary />;
-    case "experience":
+    }
+    case "experience": {
       return <Experience />;
-    case "education":
+    }
+    case "education": {
       return <Education />;
-    case "awards":
+    }
+    case "awards": {
       return <Awards />;
-    case "certifications":
+    }
+    case "certifications": {
       return <Certifications />;
-    case "skills":
+    }
+    case "skills": {
       return <Skills />;
-    case "interests":
+    }
+    case "interests": {
       return <Interests />;
-    case "publications":
+    }
+    case "publications": {
       return <Publications />;
-    case "volunteer":
+    }
+    case "volunteer": {
       return <Volunteer />;
-    case "languages":
+    }
+    case "languages": {
       return <Languages />;
-    case "projects":
+    }
+    case "projects": {
       return <Projects />;
-    case "references":
+    }
+    case "references": {
       return <References />;
-    default:
+    }
+    default: {
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
       return null;
+    }
   }
 };
 
@@ -490,18 +564,16 @@ export const Onyx = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-4">
+    <div className="p-custom space-y-4">
       {isFirstPage && <Header />}
 
-      <div className="space-y-4">
-        {main.map((section) => (
-          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
-        ))}
+      {main.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
 
-        {sidebar.map((section) => (
-          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
-        ))}
-      </div>
+      {sidebar.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
     </div>
   );
 };

apps/artboard/src/templates/pikachu.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Profile,
@@ -15,15 +13,16 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
 
+import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
-import { TemplateProps } from "../types/template";
+import type { TemplateProps } from "../types/template";
 
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
@@ -49,7 +48,7 @@ const Header = () => {
                 <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" />
+              <div className="size-1 rounded-full bg-background last:hidden" />
             </>
           )}
           {basics.phone && (
@@ -60,7 +59,7 @@ const Header = () => {
                   {basics.phone}
                 </a>
               </div>
-              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+              <div className="size-1 rounded-full bg-background last:hidden" />
             </>
           )}
           {basics.email && (
@@ -71,22 +70,28 @@ const Header = () => {
                   {basics.email}
                 </a>
               </div>
-              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+              <div className="size-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" />
+              <div className="size-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>
+                {isUrl(item.value) ? (
+                  <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                    {item.name || item.value}
+                  </a>
+                ) : (
+                  <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                )}
               </div>
-              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+              <div className="size-1 rounded-full bg-background last:hidden" />
             </Fragment>
           ))}
         </div>
@@ -105,9 +110,9 @@ const Summary = () => {
       <h4 className="mb-2 border-b border-primary text-base font-bold">{section.name}</h4>
 
       <div
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
-        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -137,28 +142,57 @@ const Rating = ({ level }: RatingProps) => (
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, 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" />}
+      {!iconOnRight &&
+        (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}
+        {label ?? (url.label || url.href)}
       </a>
+      {iconOnRight &&
+        (icon ?? (
+          <i className="ph ph-bold ph-link text-primary group-[.summary]:text-background" />
+        ))}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary group-[.summary]:text-background" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</div>
+  );
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -178,7 +212,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -200,11 +234,14 @@ const Section = <T,>({
               <div key={item.id} className={cn("space-y-2", className)}>
                 <div>
                   {children?.(item as T)}
-                  {url !== undefined && <Link url={url} />}
+                  {url !== undefined && section.separateLinks && <Link url={url} />}
                 </div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -222,30 +259,17 @@ const Section = <T,>({
 
 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}`}
-                />
-              }
-            />
+            <Link url={item.url} label={item.username} icon={<BrandIcon slug={item.icon} />} />
           ) : (
             <p>{item.username}</p>
           )}
-          <p className="text-sm">{item.network}</p>
+          {!item.icon && <p className="text-sm">{item.network}</p>}
         </div>
       )}
     </Section>
@@ -258,9 +282,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -280,9 +309,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -303,10 +337,14 @@ const 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="flex items-start 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>
+            <LinkedEntity
+              name={item.awarder}
+              url={item.url}
+              separateLinks={section.separateLinks}
+            />
           </div>
 
           <div className="shrink-0 text-right group-[.sidebar]:text-left">
@@ -324,10 +362,10 @@ const 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="flex items-start 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>
+            <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
           </div>
 
           <div className="shrink-0 text-right group-[.sidebar]:text-left">
@@ -370,9 +408,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -391,9 +434,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -428,9 +476,14 @@ const 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="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -450,7 +503,12 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -469,9 +527,14 @@ const Custom = ({ id }: { id: string }) => {
       keywordsKey="keywords"
     >
       {(item) => (
-        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -487,36 +550,50 @@ const Custom = ({ id }: { id: string }) => {
 
 const mapSectionToComponent = (section: SectionKey) => {
   switch (section) {
-    case "profiles":
+    case "profiles": {
       return <Profiles />;
-    case "summary":
+    }
+    case "summary": {
       return <Summary />;
-    case "experience":
+    }
+    case "experience": {
       return <Experience />;
-    case "education":
+    }
+    case "education": {
       return <Education />;
-    case "awards":
+    }
+    case "awards": {
       return <Awards />;
-    case "certifications":
+    }
+    case "certifications": {
       return <Certifications />;
-    case "skills":
+    }
+    case "skills": {
       return <Skills />;
-    case "interests":
+    }
+    case "interests": {
       return <Interests />;
-    case "publications":
+    }
+    case "publications": {
       return <Publications />;
-    case "volunteer":
+    }
+    case "volunteer": {
       return <Volunteer />;
-    case "languages":
+    }
+    case "languages": {
       return <Languages />;
-    case "projects":
+    }
+    case "projects": {
       return <Projects />;
-    case "references":
+    }
+    case "references": {
       return <References />;
-    default:
+    }
+    default: {
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
       return null;
+    }
   }
 };
 
@@ -524,23 +601,21 @@ export const Pikachu = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-4">
-      <div className="grid grid-cols-3 space-x-6">
-        <div className="sidebar group space-y-4">
-          {isFirstPage && <Picture className="w-full !max-w-none" />}
+    <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>
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
 
-        <div className="main group col-span-2 space-y-4">
-          {isFirstPage && <Header />}
+      <div className={cn("main group space-y-4", sidebar.length > 0 ? "col-span-2" : "col-span-3")}>
+        {isFirstPage && <Header />}
 
-          {main.map((section) => (
-            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
-          ))}
-        </div>
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
       </div>
     </div>
   );

apps/artboard/src/templates/rhyhorn.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Profile,
@@ -15,15 +13,16 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import { Education, Experience, Volunteer } from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, sanitize } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
 
+import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
-import { TemplateProps } from "../types/template";
+import type { TemplateProps } from "../types/template";
 
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
@@ -66,7 +65,13 @@ const Header = () => {
               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>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
             </div>
           ))}
         </div>
@@ -85,9 +90,9 @@ const Summary = () => {
       <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
 
       <div
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
-        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -100,7 +105,7 @@ const Rating = ({ level }: RatingProps) => (
     {Array.from({ length: 5 }).map((_, index) => (
       <div
         key={index}
-        className={cn("h-2 w-2 rounded-full border border-primary", level > index && "bg-primary")}
+        className={cn("size-2 rounded-full border border-primary", level > index && "bg-primary")}
       />
     ))}
   </div>
@@ -109,28 +114,51 @@ const Rating = ({ level }: RatingProps) => (
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, 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" />}
+    <div className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0">
+      {!iconOnRight && (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}
+        {label ?? (url.label || url.href)}
       </a>
+      {iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className }: LinkedEntityProps) => {
+  return !separateLinks && isUrl(url.href) ? (
+    <Link
+      url={url}
+      label={name}
+      icon={<i className="ph ph-bold ph-globe text-primary" />}
+      iconOnRight={true}
+      className={className}
+    />
+  ) : (
+    <div className={className}>{name}</div>
+  );
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -150,7 +178,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -172,11 +200,14 @@ const Section = <T,>({
               <div key={item.id} className={cn("space-y-2", className)}>
                 <div>
                   {children?.(item as T)}
-                  {url !== undefined && <Link url={url} />}
+                  {url !== undefined && section.separateLinks && <Link url={url} />}
                 </div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -194,30 +225,17 @@ const Section = <T,>({
 
 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}`}
-                />
-              }
-            />
+            <Link url={item.url} label={item.username} icon={<BrandIcon slug={item.icon} />} />
           ) : (
             <p>{item.username}</p>
           )}
-          <p className="text-sm">{item.network}</p>
+          {!item.icon && <p className="text-sm">{item.network}</p>}
         </div>
       )}
     </Section>
@@ -230,9 +248,14 @@ const Experience = () => {
   return (
     <Section<Experience> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -252,9 +275,14 @@ const Education = () => {
   return (
     <Section<Education> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -275,10 +303,14 @@ const Awards = () => {
   return (
     <Section<Award> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
             <div className="font-bold">{item.title}</div>
-            <div>{item.awarder}</div>
+            <LinkedEntity
+              name={item.awarder}
+              url={item.url}
+              separateLinks={section.separateLinks}
+            />
           </div>
 
           <div className="shrink-0 text-right">
@@ -296,10 +328,10 @@ const Certifications = () => {
   return (
     <Section<Certification> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
             <div className="font-bold">{item.name}</div>
-            <div>{item.issuer}</div>
+            <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks} />
           </div>
 
           <div className="shrink-0 text-right">
@@ -342,9 +374,14 @@ const Publications = () => {
   return (
     <Section<Publication> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -363,9 +400,14 @@ const Volunteer = () => {
   return (
     <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -400,9 +442,14 @@ const Projects = () => {
   return (
     <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -422,7 +469,12 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity
+            name={item.name}
+            url={item.url}
+            separateLinks={section.separateLinks}
+            className="font-bold"
+          />
           <div>{item.description}</div>
         </div>
       )}
@@ -441,9 +493,14 @@ const Custom = ({ id }: { id: string }) => {
       keywordsKey="keywords"
     >
       {(item) => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity
+              name={item.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -459,36 +516,50 @@ const Custom = ({ id }: { id: string }) => {
 
 const mapSectionToComponent = (section: SectionKey) => {
   switch (section) {
-    case "profiles":
+    case "profiles": {
       return <Profiles />;
-    case "summary":
+    }
+    case "summary": {
       return <Summary />;
-    case "experience":
+    }
+    case "experience": {
       return <Experience />;
-    case "education":
+    }
+    case "education": {
       return <Education />;
-    case "awards":
+    }
+    case "awards": {
       return <Awards />;
-    case "certifications":
+    }
+    case "certifications": {
       return <Certifications />;
-    case "skills":
+    }
+    case "skills": {
       return <Skills />;
-    case "interests":
+    }
+    case "interests": {
       return <Interests />;
-    case "publications":
+    }
+    case "publications": {
       return <Publications />;
-    case "volunteer":
+    }
+    case "volunteer": {
       return <Volunteer />;
-    case "languages":
+    }
+    case "languages": {
       return <Languages />;
-    case "projects":
+    }
+    case "projects": {
       return <Projects />;
-    case "references":
+    }
+    case "references": {
       return <References />;
-    default:
+    }
+    default: {
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
       return null;
+    }
   }
 };
 
@@ -496,18 +567,16 @@ export const Rhyhorn = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-4">
+    <div className="p-custom space-y-4">
       {isFirstPage && <Header />}
 
-      <div className="space-y-4">
-        {main.map((section) => (
-          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
-        ))}
+      {main.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
 
-        {sidebar.map((section) => (
-          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
-        ))}
-      </div>
+      {sidebar.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
     </div>
   );
 };

apps/artboard/src/types/template.ts

@@ -1,11 +1,6 @@
-import { SectionKey } from "@reactive-resume/schema";
+import type { SectionKey } from "@reactive-resume/schema";
 
 export type TemplateProps = {
   columns: SectionKey[][];
   isFirstPage?: boolean;
 };
-
-export type BaseProps = {
-  children?: React.ReactNode;
-  className?: string;
-};

apps/artboard/tailwind.config.js

@@ -11,7 +11,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        text: "var(--color-text)",
+        foreground: "var(--color-foreground)",
         primary: "var(--color-primary)",
         background: "var(--color-background)",
       },
@@ -22,6 +22,29 @@ module.exports = {
         relaxed: "calc(var(--line-height) + 0.3)",
         loose: "calc(var(--line-height) + 0.5)",
       },
+      spacing: { custom: "var(--margin)" },
+      typography: () => ({
+        foreground: {
+          css: {
+            "--tw-prose-body": "var(--color-foreground)",
+            "--tw-prose-headings": "var(--color-foreground)",
+            "--tw-prose-lead": "var(--color-foreground)",
+            "--tw-prose-links": "var(--color-foreground)",
+            "--tw-prose-bold": "var(--color-foreground)",
+            "--tw-prose-counters": "var(--color-foreground)",
+            "--tw-prose-bullets": "var(--color-foreground)",
+            "--tw-prose-hr": "var(--color-foreground)",
+            "--tw-prose-quotes": "var(--color-foreground)",
+            "--tw-prose-quote-borders": "var(--color-foreground)",
+            "--tw-prose-captions": "var(--color-foreground)",
+            "--tw-prose-code": "var(--color-foreground)",
+            "--tw-prose-pre-code": "var(--color-foreground)",
+            "--tw-prose-pre-bg": "var(--color-background)",
+            "--tw-prose-th-borders": "var(--color-foreground)",
+            "--tw-prose-td-borders": "var(--color-foreground)",
+          },
+        },
+      }),
     },
   },
   plugins: [require("@tailwindcss/typography")],

apps/artboard/vite.config.ts

@@ -2,7 +2,7 @@
 
 import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
 import react from "@vitejs/plugin-react-swc";
-import { defineConfig, searchForWorkspaceRoot, splitVendorChunkPlugin } from "vite";
+import { defineConfig, searchForWorkspaceRoot } from "vite";
 
 export default defineConfig({
   base: "/artboard/",
@@ -11,15 +11,16 @@ export default defineConfig({
 
   build: {
     sourcemap: true,
+    emptyOutDir: true,
   },
 
   server: {
     host: true,
-    port: +(process.env.__DEV__ARTBOARD_PORT ?? 6173),
+    port: 6173,
     fs: { allow: [searchForWorkspaceRoot(process.cwd())] },
   },
 
-  plugins: [react(), nxViteTsPaths(), splitVendorChunkPlugin()],
+  plugins: [react(), nxViteTsPaths()],
 
   resolve: {
     alias: {

apps/client/.eslintrc.json

@@ -3,19 +3,38 @@
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx"],
       "extends": [
         "plugin:tailwindcss/recommended",
         "plugin:@tanstack/eslint-plugin-query/recommended"
       ],
+      "parserOptions": {
+        "projectService": "./apps/client/tsconfig.json"
+      },
       "settings": {
         "tailwindcss": {
           "callees": ["cn", "clsx", "cva"],
-          "config": "tailwind.config.js"
+          "config": "tailwind.config.js",
+          "whitelist": ["ph", "ph\\-.*", "si", "si\\-.*"]
         }
       },
       "plugins": ["lingui"],
       "rules": {
+        // eslint
+        "@typescript-eslint/no-require-imports": "off",
+
+        // react
+        "react/no-unescaped-entities": "off",
+        "react/jsx-sort-props": [
+          "error",
+          {
+            "reservedFirst": true,
+            "callbacksLast": true,
+            "shorthandFirst": true,
+            "noSortAlphabetically": true
+          }
+        ],
+
         // react-hooks
         "react-hooks/exhaustive-deps": "off",
 
@@ -23,8 +42,59 @@
         "lingui/no-unlocalized-strings": [
           2,
           {
-            "ignoreFunction": ["cn"],
-            "ignoreAttribute": ["alt"]
+            "ignore": [
+              // Ignore strings which are a single "word" (no spaces)
+              // and doesn't start with an uppercase letter
+              "^(?![A-Z])\\S+$",
+              // Ignore UPPERCASE literals
+              // Example: const test = "FOO"
+              "^[A-Z0-9_-]+$"
+            ],
+            "ignoreNames": [
+              // Ignore matching className (case-insensitive)
+              { "regex": { "pattern": "className", "flags": "i" } },
+              // Ignore UPPERCASE names
+              // Example: test.FOO = "ola!"
+              { "regex": { "pattern": "^[A-Z0-9_-]+$" } },
+              "id",
+              "src",
+              "srcSet",
+              "styleName",
+              "placeholder",
+              "alt",
+              "type",
+              "width",
+              "height",
+              "displayName",
+              "Authorization"
+            ],
+            "ignoreFunctions": [
+              "cn",
+              "cva",
+              "track",
+              "Error",
+              "console.*",
+              "*headers.set",
+              "*.addEventListener",
+              "*.removeEventListener",
+              "*.postMessage",
+              "*.getElementById",
+              "*.dispatch",
+              "*.commit",
+              "*.includes",
+              "*.indexOf",
+              "*.endsWith",
+              "*.startsWith",
+              "require"
+            ],
+            // Following settings require typed linting https://typescript-eslint.io/getting-started/typed-linting/
+            "useTsTypes": true,
+            "ignoreMethodsOnTypes": [
+              // Ignore specified methods on Map and Set types
+              "Map.get",
+              "Map.has",
+              "Set.has"
+            ]
           }
         ],
         "lingui/t-call-in-function": 2,

apps/client/index.html

@@ -35,10 +35,13 @@
     <!-- Styles -->
     <link rel="stylesheet" href="/src/styles/main.css" />
   </head>
-  <body class="bg-background text-foreground text-sm antialiased print:bg-white print:m-0">
+  <body class="bg-background text-sm text-foreground antialiased print:m-0 print:bg-white">
     <div id="root"></div>
 
     <!-- Scripts -->
     <script type="module" src="/src/main.tsx"></script>
+
+    <!-- Phosphor Icons -->
+    <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/web"></script>
   </body>
 </html>

apps/client/postcss.config.js

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

apps/client/public/scripts/initialize-theme.js

@@ -9,7 +9,7 @@
     } else {
       document.documentElement.classList.remove("dark");
     }
-  } catch (_) {
+  } catch {
     // pass
   }
 })();

apps/client/public/styles/prism-dark.css

@@ -0,0 +1,155 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #d4d0ab;
+}
+
+.token.punctuation {
+  color: #fefefe;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #ffa07a;
+}
+
+.token.boolean,
+.token.number {
+  color: #00e0e0;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #abe338;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #00e0e0;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+  color: #ffd700;
+}
+
+.token.keyword {
+  color: #00e0e0;
+}
+
+.token.regex,
+.token.important {
+  color: #ffd700;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+@media screen and (forced-colors: active) {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: windowText;
+    background: window;
+  }
+
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: window;
+  }
+
+  .token.important {
+    background: highlight;
+    color: window;
+    font-weight: normal;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.keyword,
+  .token.operator,
+  .token.selector {
+    font-weight: bold;
+  }
+
+  .token.attr-value,
+  .token.comment,
+  .token.doctype,
+  .token.function,
+  .token.keyword,
+  .token.operator,
+  .token.property,
+  .token.string {
+    color: highlight;
+  }
+
+  .token.attr-value,
+  .token.url {
+    font-weight: normal;
+  }
+}

apps/client/public/styles/prism-light.css

@@ -0,0 +1,167 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #393a34;
+  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  font-size: 0.9em;
+  line-height: 1.2em;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre > code[class*="language-"] {
+  font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  background: #c1def1;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  background: #c1def1;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border: 1px solid #dddddd;
+  background-color: white;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.2em;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  background: #f8f8f8;
+  border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #008000;
+  font-style: italic;
+}
+
+.token.namespace {
+  opacity: 0.7;
+}
+
+.token.string {
+  color: #a31515;
+}
+
+.token.punctuation,
+.token.operator {
+  color: #393a34; /* no highlight */
+}
+
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.inserted {
+  color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-value,
+.language-autohotkey .token.selector,
+.language-json .token.boolean,
+.language-json .token.number,
+code[class*="language-css"] {
+  color: #0000ff;
+}
+
+.token.function {
+  color: #393a34;
+}
+
+.token.deleted,
+.language-autohotkey .token.tag {
+  color: #9a050f;
+}
+
+.token.selector,
+.language-autohotkey .token.keyword {
+  color: #00009f;
+}
+
+.token.important {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.class-name,
+.language-json .token.property {
+  color: #2b91af;
+}
+
+.token.tag,
+.token.selector {
+  color: #800000;
+}
+
+.token.attr-name,
+.token.property,
+.token.regex,
+.token.entity {
+  color: #ff0000;
+}
+
+.token.directive.tag .tag {
+  background: #ffff00;
+  color: #393a34;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+  border-right-color: #a5a5a5;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+  color: #2b91af;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight.line-highlight {
+  background: rgba(193, 222, 241, 0.2);
+  background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+  background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+}

apps/client/public/support-logos/linkedin.svg

@@ -0,0 +1,8 @@
+<!-- Original Author: (Simple Icons)[https://github.com/simple-icons/simple-icons] -->
+
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>LinkedIn</title>
+  <path
+    fill="#0a66c2"
+    d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+</svg>

apps/client/public/templates/json/azurill.json

@@ -289,7 +289,7 @@
       ]
     ],
     "css": {
-      "value": ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       "visible": false
     },
     "page": {

apps/client/public/templates/json/bronzor.json

@@ -314,7 +314,7 @@
       ]
     ],
     "css": {
-      "value": ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       "visible": false
     },
     "page": {

apps/client/public/templates/json/chikorita.json

@@ -314,7 +314,7 @@
       ]
     ],
     "css": {
-      "value": ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       "visible": false
     },
     "page": {

apps/client/public/templates/json/ditto.json

@@ -315,7 +315,7 @@
       ]
     ],
     "css": {
-      "value": ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       "visible": false
     },
     "page": {

apps/client/public/templates/json/gengar.json

@@ -0,0 +1,321 @@
+{
+  "basics": {
+    "name": "John Doe",
+    "headline": "Creative and Innovative Web Developer",
+    "email": "john.doe@gmail.com",
+    "phone": "(555) 123-4567",
+    "location": "Pleasantville, CA 94588",
+    "url": {
+      "label": "",
+      "href": "https://johndoe.me/"
+    },
+    "customFields": [],
+    "picture": {
+      "url": "https://i.imgur.com/HgwyOuJ.jpg",
+      "size": 120,
+      "aspectRatio": 1,
+      "borderRadius": 0,
+      "effects": {
+        "hidden": false,
+        "border": false,
+        "grayscale": false
+      }
+    }
+  },
+  "sections": {
+    "summary": {
+      "name": "Summary",
+      "columns": 1,
+      "visible": true,
+      "id": "summary",
+      "content": "<p>Innovative Web Developer with 5 years of experience in building impactful and user-friendly websites and applications. Specializes in <strong>front-end technologies</strong> and passionate about modern web standards and cutting-edge development techniques. Proven track record of leading successful projects from concept to deployment.</p>"
+    },
+    "awards": {
+      "name": "Awards",
+      "columns": 1,
+      "visible": true,
+      "id": "awards",
+      "items": []
+    },
+    "certifications": {
+      "name": "Certifications",
+      "columns": 1,
+      "visible": true,
+      "id": "certifications",
+      "items": [
+        {
+          "id": "spdhh9rrqi1gvj0yqnbqunlo",
+          "visible": true,
+          "name": "Full-Stack Web Development",
+          "issuer": "CodeAcademy",
+          "date": "2020",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        },
+        {
+          "id": "n838rddyqv47zexn6cxauwqp",
+          "visible": true,
+          "name": "AWS Certified Developer",
+          "issuer": "Amazon Web Services",
+          "date": "2019",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "education": {
+      "name": "Education",
+      "columns": 1,
+      "visible": true,
+      "id": "education",
+      "items": [
+        {
+          "id": "yo3p200zo45c6cdqc6a2vtt3",
+          "visible": true,
+          "institution": "University of California",
+          "studyType": "Bachelor's in Computer Science",
+          "area": "Berkeley, CA",
+          "score": "",
+          "date": "August 2012 to May 2016",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "experience": {
+      "name": "Experience",
+      "columns": 1,
+      "visible": true,
+      "id": "experience",
+      "items": [
+        {
+          "id": "lhw25d7gf32wgdfpsktf6e0x",
+          "visible": true,
+          "company": "Creative Solutions Inc.",
+          "position": "Senior Web Developer",
+          "location": "San Francisco, CA",
+          "date": "January 2019 to Present",
+          "summary": "<ul><li><p>Spearheaded the redesign of the main product website, resulting in a 40% increase in user engagement.</p></li><li><p>Developed and implemented a new responsive framework, improving cross-device compatibility.</p></li><li><p>Mentored a team of four junior developers, fostering a culture of technical excellence.</p></li></ul>",
+          "url": {
+            "label": "",
+            "href": "https://creativesolutions.inc/"
+          }
+        },
+        {
+          "id": "r6543lil53ntrxmvel53gbtm",
+          "visible": true,
+          "company": "TechAdvancers",
+          "position": "Web Developer",
+          "location": "San Jose, CA",
+          "date": "June 2016 to December 2018",
+          "summary": "<ul><li><p>Collaborated in a team of 10 to develop high-quality web applications using React.js and Node.js.</p></li><li><p>Managed the integration of third-party services such as Stripe for payments and Twilio for SMS services.</p></li><li><p>Optimized application performance, achieving a 30% reduction in load times.</p></li></ul>",
+          "url": {
+            "label": "",
+            "href": "https://techadvancers.com/"
+          }
+        }
+      ]
+    },
+    "volunteer": {
+      "name": "Volunteering",
+      "columns": 1,
+      "visible": true,
+      "id": "volunteer",
+      "items": []
+    },
+    "interests": {
+      "name": "Interests",
+      "columns": 1,
+      "visible": true,
+      "id": "interests",
+      "items": []
+    },
+    "languages": {
+      "name": "Languages",
+      "columns": 1,
+      "visible": true,
+      "id": "languages",
+      "items": []
+    },
+    "profiles": {
+      "name": "Profiles",
+      "columns": 1,
+      "visible": true,
+      "id": "profiles",
+      "items": [
+        {
+          "id": "cnbk5f0aeqvhx69ebk7hktwd",
+          "visible": true,
+          "network": "LinkedIn",
+          "username": "johndoe",
+          "icon": "linkedin",
+          "url": {
+            "label": "",
+            "href": "https://linkedin.com/in/johndoe"
+          }
+        },
+        {
+          "id": "ukl0uecvzkgm27mlye0wazlb",
+          "visible": true,
+          "network": "GitHub",
+          "username": "johndoe",
+          "icon": "github",
+          "url": {
+            "label": "",
+            "href": "https://github.com/johndoe"
+          }
+        }
+      ]
+    },
+    "projects": {
+      "name": "Projects",
+      "columns": 1,
+      "visible": true,
+      "id": "projects",
+      "items": [
+        {
+          "id": "yw843emozcth8s1ubi1ubvlf",
+          "visible": true,
+          "name": "E-Commerce Platform",
+          "description": "Project Lead",
+          "date": "",
+          "summary": "<p>Led the development of a full-stack e-commerce platform, improving sales conversion by 25%.</p>",
+          "keywords": [],
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        },
+        {
+          "id": "ncxgdjjky54gh59iz2t1xi1v",
+          "visible": true,
+          "name": "Interactive Dashboard",
+          "description": "Frontend Developer",
+          "date": "",
+          "summary": "<p>Created an interactive analytics dashboard for a SaaS application, enhancing data visualization for clients.</p>",
+          "keywords": [],
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "publications": {
+      "name": "Publications",
+      "columns": 1,
+      "visible": true,
+      "id": "publications",
+      "items": []
+    },
+    "references": {
+      "name": "References",
+      "columns": 1,
+      "visible": false,
+      "id": "references",
+      "items": [
+        {
+          "id": "f2sv5z0cce6ztjl87yuk8fak",
+          "visible": true,
+          "name": "Available upon request",
+          "description": "",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "skills": {
+      "name": "Skills",
+      "columns": 1,
+      "visible": true,
+      "id": "skills",
+      "items": [
+        {
+          "id": "hn0keriukh6c0ojktl9gsgjm",
+          "visible": true,
+          "name": "Web Technologies",
+          "description": "Advanced",
+          "level": 0,
+          "keywords": ["HTML5", "JavaScript", "PHP", "Python"]
+        },
+        {
+          "id": "r8c3y47vykausqrgmzwg5pur",
+          "visible": true,
+          "name": "Web Frameworks",
+          "description": "Intermediate",
+          "level": 0,
+          "keywords": ["React.js", "Angular", "Vue.js", "Laravel", "Django"]
+        },
+        {
+          "id": "b5l75aseexqv17quvqgh73fe",
+          "visible": true,
+          "name": "Tools",
+          "description": "Intermediate",
+          "level": 0,
+          "keywords": ["Webpack", "Git", "Jenkins", "Docker", "JIRA"]
+        }
+      ]
+    },
+    "custom": {}
+  },
+  "metadata": {
+    "template": "gengar",
+    "layout": [
+      [
+        ["summary", "experience", "education", "projects", "references"],
+        [
+          "profiles",
+          "skills",
+          "certifications",
+          "interests",
+          "languages",
+          "awards",
+          "volunteer",
+          "publications"
+        ]
+      ],
+      [[], []]
+    ],
+    "css": {
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "visible": false
+    },
+    "page": {
+      "margin": 14,
+      "format": "a4",
+      "options": {
+        "breakLine": true,
+        "pageNumbers": true
+      }
+    },
+    "theme": {
+      "background": "#ffffff",
+      "text": "#000000",
+      "primary": "#0891b2"
+    },
+    "typography": {
+      "font": {
+        "family": "IBM Plex Serif",
+        "subset": "latin",
+        "variants": ["regular"],
+        "size": 13
+      },
+      "lineHeight": 1.6,
+      "hideIcons": false,
+      "underlineLinks": true
+    },
+    "notes": ""
+  }
+}

apps/client/public/templates/json/glalie.json

@@ -0,0 +1,320 @@
+{
+  "basics": {
+    "name": "John Doe",
+    "headline": "Creative and Innovative Web Developer",
+    "email": "john.doe@gmail.com",
+    "phone": "(555) 123-4567",
+    "location": "Pleasantville, CA 94588",
+    "url": {
+      "label": "",
+      "href": "https://johndoe.me/"
+    },
+    "customFields": [],
+    "picture": {
+      "url": "https://i.imgur.com/HgwyOuJ.jpg",
+      "size": 120,
+      "aspectRatio": 1,
+      "borderRadius": 0,
+      "effects": {
+        "hidden": false,
+        "border": false,
+        "grayscale": false
+      }
+    }
+  },
+  "sections": {
+    "summary": {
+      "name": "Summary",
+      "columns": 1,
+      "visible": true,
+      "id": "summary",
+      "content": "<p>Innovative Web Developer with 5 years of experience in building impactful and user-friendly websites and applications. Specializes in <strong>front-end technologies</strong> and passionate about modern web standards and cutting-edge development techniques. Proven track record of leading successful projects from concept to deployment.</p>"
+    },
+    "awards": {
+      "name": "Awards",
+      "columns": 1,
+      "visible": true,
+      "id": "awards",
+      "items": []
+    },
+    "certifications": {
+      "name": "Certifications",
+      "columns": 1,
+      "visible": true,
+      "id": "certifications",
+      "items": [
+        {
+          "id": "spdhh9rrqi1gvj0yqnbqunlo",
+          "visible": true,
+          "name": "Full-Stack Web Development",
+          "issuer": "CodeAcademy",
+          "date": "2020",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        },
+        {
+          "id": "n838rddyqv47zexn6cxauwqp",
+          "visible": true,
+          "name": "AWS Certified Developer",
+          "issuer": "Amazon Web Services",
+          "date": "2019",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "education": {
+      "name": "Education",
+      "columns": 1,
+      "visible": true,
+      "id": "education",
+      "items": [
+        {
+          "id": "yo3p200zo45c6cdqc6a2vtt3",
+          "visible": true,
+          "institution": "University of California",
+          "studyType": "Bachelor's in Computer Science",
+          "area": "Berkeley, CA",
+          "score": "",
+          "date": "August 2012 to May 2016",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "experience": {
+      "name": "Experience",
+      "columns": 1,
+      "visible": true,
+      "id": "experience",
+      "items": [
+        {
+          "id": "lhw25d7gf32wgdfpsktf6e0x",
+          "visible": true,
+          "company": "Creative Solutions Inc.",
+          "position": "Senior Web Developer",
+          "location": "San Francisco, CA",
+          "date": "January 2019 to Present",
+          "summary": "<ul><li><p>Spearheaded the redesign of the main product website, resulting in a 40% increase in user engagement.</p></li><li><p>Developed and implemented a new responsive framework, improving cross-device compatibility.</p></li><li><p>Mentored a team of four junior developers, fostering a culture of technical excellence.</p></li></ul>",
+          "url": {
+            "label": "",
+            "href": "https://creativesolutions.inc/"
+          }
+        },
+        {
+          "id": "r6543lil53ntrxmvel53gbtm",
+          "visible": true,
+          "company": "TechAdvancers",
+          "position": "Web Developer",
+          "location": "San Jose, CA",
+          "date": "June 2016 to December 2018",
+          "summary": "<ul><li><p>Collaborated in a team of 10 to develop high-quality web applications using React.js and Node.js.</p></li><li><p>Managed the integration of third-party services such as Stripe for payments and Twilio for SMS services.</p></li><li><p>Optimized application performance, achieving a 30% reduction in load times.</p></li></ul>",
+          "url": {
+            "label": "",
+            "href": "https://techadvancers.com/"
+          }
+        }
+      ]
+    },
+    "volunteer": {
+      "name": "Volunteering",
+      "columns": 1,
+      "visible": true,
+      "id": "volunteer",
+      "items": []
+    },
+    "interests": {
+      "name": "Interests",
+      "columns": 1,
+      "visible": true,
+      "id": "interests",
+      "items": []
+    },
+    "languages": {
+      "name": "Languages",
+      "columns": 1,
+      "visible": true,
+      "id": "languages",
+      "items": []
+    },
+    "profiles": {
+      "name": "Profiles",
+      "columns": 1,
+      "visible": true,
+      "id": "profiles",
+      "items": [
+        {
+          "id": "cnbk5f0aeqvhx69ebk7hktwd",
+          "visible": true,
+          "network": "LinkedIn",
+          "username": "johndoe",
+          "icon": "linkedin",
+          "url": {
+            "label": "",
+            "href": "https://linkedin.com/in/johndoe"
+          }
+        },
+        {
+          "id": "ukl0uecvzkgm27mlye0wazlb",
+          "visible": true,
+          "network": "GitHub",
+          "username": "johndoe",
+          "icon": "github",
+          "url": {
+            "label": "",
+            "href": "https://github.com/johndoe"
+          }
+        }
+      ]
+    },
+    "projects": {
+      "name": "Projects",
+      "columns": 1,
+      "visible": true,
+      "id": "projects",
+      "items": [
+        {
+          "id": "yw843emozcth8s1ubi1ubvlf",
+          "visible": true,
+          "name": "E-Commerce Platform",
+          "description": "Project Lead",
+          "date": "",
+          "summary": "<p>Led the development of a full-stack e-commerce platform, improving sales conversion by 25%.</p>",
+          "keywords": [],
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        },
+        {
+          "id": "ncxgdjjky54gh59iz2t1xi1v",
+          "visible": true,
+          "name": "Interactive Dashboard",
+          "description": "Frontend Developer",
+          "date": "",
+          "summary": "<p>Created an interactive analytics dashboard for a SaaS application, enhancing data visualization for clients.</p>",
+          "keywords": [],
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "publications": {
+      "name": "Publications",
+      "columns": 1,
+      "visible": true,
+      "id": "publications",
+      "items": []
+    },
+    "references": {
+      "name": "References",
+      "columns": 1,
+      "visible": false,
+      "id": "references",
+      "items": [
+        {
+          "id": "f2sv5z0cce6ztjl87yuk8fak",
+          "visible": true,
+          "name": "Available upon request",
+          "description": "",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "skills": {
+      "name": "Skills",
+      "columns": 1,
+      "visible": true,
+      "id": "skills",
+      "items": [
+        {
+          "id": "hn0keriukh6c0ojktl9gsgjm",
+          "visible": true,
+          "name": "Web Technologies",
+          "description": "Advanced",
+          "level": 0,
+          "keywords": ["HTML5", "JavaScript", "PHP", "Python"]
+        },
+        {
+          "id": "r8c3y47vykausqrgmzwg5pur",
+          "visible": true,
+          "name": "Web Frameworks",
+          "description": "Intermediate",
+          "level": 0,
+          "keywords": ["React.js", "Angular", "Vue.js", "Laravel", "Django"]
+        },
+        {
+          "id": "b5l75aseexqv17quvqgh73fe",
+          "visible": true,
+          "name": "Tools",
+          "description": "Intermediate",
+          "level": 0,
+          "keywords": ["Webpack", "Git", "Jenkins", "Docker", "JIRA"]
+        }
+      ]
+    },
+    "custom": {}
+  },
+  "metadata": {
+    "template": "glalie",
+    "layout": [
+      [
+        ["summary", "experience", "education", "projects", "references"],
+        [
+          "profiles",
+          "skills",
+          "certifications",
+          "interests",
+          "languages",
+          "awards",
+          "volunteer",
+          "publications"
+        ]
+      ]
+    ],
+    "css": {
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "visible": false
+    },
+    "page": {
+      "margin": 14,
+      "format": "a4",
+      "options": {
+        "breakLine": true,
+        "pageNumbers": true
+      }
+    },
+    "theme": {
+      "background": "#ffffff",
+      "text": "#000000",
+      "primary": "#0d9488"
+    },
+    "typography": {
+      "font": {
+        "family": "IBM Plex Serif",
+        "subset": "latin",
+        "variants": ["regular"],
+        "size": 13
+      },
+      "lineHeight": 1.6,
+      "hideIcons": false,
+      "underlineLinks": true
+    },
+    "notes": ""
+  }
+}

apps/client/public/templates/json/kakuna.json

@@ -287,7 +287,7 @@
       ]
     ],
     "css": {
-      "value": ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       "visible": false
     },
     "page": {

apps/client/public/templates/json/leafish.json

@@ -0,0 +1,321 @@
+{
+  "basics": {
+    "name": "John Doe",
+    "headline": "Creative and Innovative Web Developer",
+    "email": "john.doe@gmail.com",
+    "phone": "(555) 123-4567",
+    "location": "Pleasantville, CA 94588",
+    "url": {
+      "label": "",
+      "href": "https://johndoe.me/"
+    },
+    "customFields": [],
+    "picture": {
+      "url": "https://i.imgur.com/HgwyOuJ.jpg",
+      "size": 120,
+      "aspectRatio": 1,
+      "borderRadius": 0,
+      "effects": {
+        "hidden": false,
+        "border": false,
+        "grayscale": false
+      }
+    }
+  },
+  "sections": {
+    "summary": {
+      "name": "Summary",
+      "columns": 1,
+      "visible": true,
+      "id": "summary",
+      "content": "<p>Innovative Web Developer with 5 years of experience in building impactful and user-friendly websites and applications. Specializes in <strong>front-end technologies</strong> and passionate about modern web standards and cutting-edge development techniques. Proven track record of leading successful projects from concept to deployment.</p>"
+    },
+    "awards": {
+      "name": "Awards",
+      "columns": 1,
+      "visible": true,
+      "id": "awards",
+      "items": []
+    },
+    "certifications": {
+      "name": "Certifications",
+      "columns": 1,
+      "visible": true,
+      "id": "certifications",
+      "items": [
+        {
+          "id": "spdhh9rrqi1gvj0yqnbqunlo",
+          "visible": true,
+          "name": "Full-Stack Web Development",
+          "issuer": "CodeAcademy",
+          "date": "2020",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        },
+        {
+          "id": "n838rddyqv47zexn6cxauwqp",
+          "visible": true,
+          "name": "AWS Certified Developer",
+          "issuer": "Amazon Web Services",
+          "date": "2019",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "education": {
+      "name": "Education",
+      "columns": 1,
+      "visible": true,
+      "id": "education",
+      "items": [
+        {
+          "id": "yo3p200zo45c6cdqc6a2vtt3",
+          "visible": true,
+          "institution": "University of California",
+          "studyType": "Bachelor's in Computer Science",
+          "area": "Berkeley, CA",
+          "score": "",
+          "date": "August 2012 to May 2016",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "experience": {
+      "name": "Experience",
+      "columns": 1,
+      "visible": true,
+      "id": "experience",
+      "items": [
+        {
+          "id": "lhw25d7gf32wgdfpsktf6e0x",
+          "visible": true,
+          "company": "Creative Solutions Inc.",
+          "position": "Senior Web Developer",
+          "location": "San Francisco, CA",
+          "date": "January 2019 to Present",
+          "summary": "<ul><li><p>Spearheaded the redesign of the main product website, resulting in a 40% increase in user engagement.</p></li><li><p>Developed and implemented a new responsive framework, improving cross-device compatibility.</p></li><li><p>Mentored a team of four junior developers, fostering a culture of technical excellence.</p></li></ul>",
+          "url": {
+            "label": "",
+            "href": "https://creativesolutions.inc/"
+          }
+        },
+        {
+          "id": "r6543lil53ntrxmvel53gbtm",
+          "visible": true,
+          "company": "TechAdvancers",
+          "position": "Web Developer",
+          "location": "San Jose, CA",
+          "date": "June 2016 to December 2018",
+          "summary": "<ul><li><p>Collaborated in a team of 10 to develop high-quality web applications using React.js and Node.js.</p></li><li><p>Managed the integration of third-party services such as Stripe for payments and Twilio for SMS services.</p></li><li><p>Optimized application performance, achieving a 30% reduction in load times.</p></li></ul>",
+          "url": {
+            "label": "",
+            "href": "https://techadvancers.com/"
+          }
+        }
+      ]
+    },
+    "volunteer": {
+      "name": "Volunteering",
+      "columns": 1,
+      "visible": true,
+      "id": "volunteer",
+      "items": []
+    },
+    "interests": {
+      "name": "Interests",
+      "columns": 1,
+      "visible": true,
+      "id": "interests",
+      "items": []
+    },
+    "languages": {
+      "name": "Languages",
+      "columns": 1,
+      "visible": true,
+      "id": "languages",
+      "items": []
+    },
+    "profiles": {
+      "name": "Profiles",
+      "columns": 1,
+      "visible": true,
+      "id": "profiles",
+      "items": [
+        {
+          "id": "cnbk5f0aeqvhx69ebk7hktwd",
+          "visible": true,
+          "network": "LinkedIn",
+          "username": "johndoe",
+          "icon": "linkedin",
+          "url": {
+            "label": "",
+            "href": "https://linkedin.com/in/johndoe"
+          }
+        },
+        {
+          "id": "ukl0uecvzkgm27mlye0wazlb",
+          "visible": true,
+          "network": "GitHub",
+          "username": "johndoe",
+          "icon": "github",
+          "url": {
+            "label": "",
+            "href": "https://github.com/johndoe"
+          }
+        }
+      ]
+    },
+    "projects": {
+      "name": "Projects",
+      "columns": 1,
+      "visible": true,
+      "id": "projects",
+      "items": [
+        {
+          "id": "yw843emozcth8s1ubi1ubvlf",
+          "visible": true,
+          "name": "E-Commerce Platform",
+          "description": "Project Lead",
+          "date": "",
+          "summary": "<p>Led the development of a full-stack e-commerce platform, improving sales conversion by 25%.</p>",
+          "keywords": [],
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        },
+        {
+          "id": "ncxgdjjky54gh59iz2t1xi1v",
+          "visible": true,
+          "name": "Interactive Dashboard",
+          "description": "Frontend Developer",
+          "date": "",
+          "summary": "<p>Created an interactive analytics dashboard for a SaaS application, enhancing data visualization for clients.</p>",
+          "keywords": [],
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "publications": {
+      "name": "Publications",
+      "columns": 1,
+      "visible": true,
+      "id": "publications",
+      "items": []
+    },
+    "references": {
+      "name": "References",
+      "columns": 1,
+      "visible": false,
+      "id": "references",
+      "items": [
+        {
+          "id": "f2sv5z0cce6ztjl87yuk8fak",
+          "visible": true,
+          "name": "Available upon request",
+          "description": "",
+          "summary": "",
+          "url": {
+            "label": "",
+            "href": ""
+          }
+        }
+      ]
+    },
+    "skills": {
+      "name": "Skills",
+      "columns": 1,
+      "visible": true,
+      "id": "skills",
+      "items": [
+        {
+          "id": "hn0keriukh6c0ojktl9gsgjm",
+          "visible": true,
+          "name": "Web Technologies",
+          "description": "Advanced",
+          "level": 0,
+          "keywords": ["HTML5", "JavaScript", "PHP", "Python"]
+        },
+        {
+          "id": "r8c3y47vykausqrgmzwg5pur",
+          "visible": true,
+          "name": "Web Frameworks",
+          "description": "Intermediate",
+          "level": 0,
+          "keywords": ["React.js", "Angular", "Vue.js", "Laravel", "Django"]
+        },
+        {
+          "id": "b5l75aseexqv17quvqgh73fe",
+          "visible": true,
+          "name": "Tools",
+          "description": "Intermediate",
+          "level": 0,
+          "keywords": ["Webpack", "Git", "Jenkins", "Docker", "JIRA"]
+        }
+      ]
+    },
+    "custom": {}
+  },
+  "metadata": {
+    "template": "leafish",
+    "layout": [
+      [
+        ["summary", "experience", "education", "references"],
+        [
+          "profiles",
+          "skills",
+          "certifications",
+          "interests",
+          "languages",
+          "projects",
+          "awards",
+          "volunteer",
+          "publications"
+        ]
+      ]
+    ],
+    "css": {
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "visible": false
+    },
+    "page": {
+      "margin": 14,
+      "format": "a4",
+      "options": {
+        "breakLine": true,
+        "pageNumbers": true
+      }
+    },
+    "theme": {
+      "background": "#ffffff",
+      "text": "#000000",
+      "primary": "#7b4f1a"
+    },
+    "typography": {
+      "font": {
+        "family": "IBM Plex Serif",
+        "subset": "latin",
+        "variants": ["regular"],
+        "size": 13
+      },
+      "lineHeight": 1.6,
+      "hideIcons": false,
+      "underlineLinks": true
+    },
+    "notes": ""
+  }
+}

apps/client/public/templates/json/nosepass.json

@@ -306,7 +306,7 @@
       [["projects", "certifications", "skills", "languages", "references"], []]
     ],
     "css": {
-      "value": ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       "visible": false
     },
     "page": {

apps/client/public/templates/json/onyx.json

@@ -287,7 +287,7 @@
       ]
     ],
     "css": {
-      "value": ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       "visible": false
     },
     "page": {

apps/client/public/templates/json/pikachu.json

@@ -315,7 +315,7 @@
       ]
     ],
     "css": {
-      "value": ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       "visible": false
     },
     "page": {

apps/client/public/templates/json/rhyhorn.json

@@ -288,7 +288,7 @@
       ]
     ],
     "css": {
-      "value": ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
+      "value": "* {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       "visible": false
     },
     "page": {

apps/client/src/components/ai-actions.tsx

@@ -1,11 +1,11 @@
 import { t } from "@lingui/macro";
 import {
-  CaretDown,
-  ChatTeardropText,
-  CircleNotch,
-  Exam,
-  MagicWand,
-  PenNib,
+  CaretDownIcon,
+  ChatTeardropTextIcon,
+  CircleNotchIcon,
+  ExamIcon,
+  MagicWandIcon,
+  PenNibIcon,
 } from "@phosphor-icons/react";
 import {
   Badge,
@@ -54,7 +54,7 @@ export const AiActions = ({ value, onChange, className }: Props) => {
       toast({
         variant: "error",
         title: t`Oops, the server returned an error.`,
-        description: (error as Error)?.message,
+        description: (error as Error).message,
       });
     } finally {
       setLoading(false);
@@ -75,27 +75,31 @@ export const AiActions = ({ value, onChange, className }: Props) => {
           variant="primary"
           className="-rotate-90 bg-background px-2 text-[10px] leading-[10px]"
         >
-          <MagicWand size={10} className="mr-1" />
+          <MagicWandIcon size={10} className="mr-1" />
           {t`AI`}
         </Badge>
       </div>
 
       <Button size="sm" variant="outline" disabled={!!loading} onClick={() => onClick("improve")}>
-        {loading === "improve" ? <CircleNotch className="animate-spin" /> : <PenNib />}
+        {loading === "improve" ? <CircleNotchIcon className="animate-spin" /> : <PenNibIcon />}
         <span className="ml-2 text-xs">{t`Improve Writing`}</span>
       </Button>
 
       <Button size="sm" variant="outline" disabled={!!loading} onClick={() => onClick("fix")}>
-        {loading === "fix" ? <CircleNotch className="animate-spin" /> : <Exam />}
+        {loading === "fix" ? <CircleNotchIcon className="animate-spin" /> : <ExamIcon />}
         <span className="ml-2 text-xs">{t`Fix Spelling & Grammar`}</span>
       </Button>
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button size="sm" variant="outline" disabled={!!loading}>
-            {loading === "tone" ? <CircleNotch className="animate-spin" /> : <ChatTeardropText />}
+            {loading === "tone" ? (
+              <CircleNotchIcon className="animate-spin" />
+            ) : (
+              <ChatTeardropTextIcon />
+            )}
             <span className="mx-2 text-xs">{t`Change Tone`}</span>
-            <CaretDown />
+            <CaretDownIcon />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>

apps/client/src/components/brand-icon.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, useEffect } from "react";
+import { useDebounceValue } from "usehooks-ts";
+
+type BrandIconProps = {
+  slug: string;
+};
+
+export const BrandIcon = forwardRef<HTMLImageElement, BrandIconProps>(({ slug }, ref) => {
+  const [debouncedSlug, setValue] = useDebounceValue(slug, 600);
+
+  useEffect(() => {
+    setValue(slug);
+  }, [slug]);
+
+  if (!slug) return null;
+
+  if (debouncedSlug === "linkedin") {
+    return (
+      <img
+        ref={ref}
+        alt="LinkedIn"
+        className="size-5"
+        src={`${window.location.origin}/support-logos/linkedin.svg`}
+      />
+    );
+  }
+
+  return (
+    <img
+      ref={ref}
+      alt={debouncedSlug}
+      className="size-5"
+      src={`https://cdn.simpleicons.org/${debouncedSlug}`}
+    />
+  );
+});
+
+BrandIcon.displayName = "BrandIcon";

apps/client/src/components/copyright.tsx

@@ -18,7 +18,7 @@ export const Copyright = ({ className }: Props) => (
         <a
           target="_blank"
           rel="noopener noreferrer nofollow"
-          href="https://github.com/AmruthPillai/Reactive-Resume/blob/main/LICENSE"
+          href="https://github.com/AmruthPillai/Reactive-Resume/blob/main/LICENSE.md"
         >
           MIT
         </a>
@@ -27,10 +27,7 @@ export const Copyright = ({ className }: Props) => (
     <span>{t`By the community, for the community.`}</span>
     <span>
       <Trans>
-        A passion project by{" "}
-        <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.amruthpillai.com/">
-          Amruth Pillai
-        </a>
+        A passion project by <a href="https://www.amruthpillai.com/">Amruth Pillai</a>
       </Trans>
     </span>
 

apps/client/src/components/icon.tsx

@@ -12,12 +12,14 @@ export const Icon = ({ size = 32, className }: Props) => {
   let src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 
   switch (isDarkMode) {
-    case false:
+    case false: {
       src = "/icon/dark.svg";
       break;
-    case true:
+    }
+    case true: {
       src = "/icon/light.svg";
       break;
+    }
   }
 
   return (

apps/client/src/components/locale-combobox.tsx

@@ -0,0 +1,120 @@
+import { t } from "@lingui/macro";
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
+import {
+  Button,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollArea,
+} from "@reactive-resume/ui";
+import { cn } from "@reactive-resume/utils";
+import fuzzy from "fuzzy";
+import { useMemo, useState } from "react";
+
+import { useLanguages } from "../services/resume/translation";
+
+type Props = {
+  value: string;
+  onValueChange: (locale: string) => void;
+};
+
+export const LocaleCombobox = ({ value, onValueChange }: Props) => {
+  const { languages } = useLanguages();
+  const [search, setSearch] = useState("");
+
+  const options = useMemo(() => {
+    return fuzzy.filter(search, languages, {
+      extract: (lang) => `${lang.name} ${lang.locale}`,
+    });
+  }, [search, languages]);
+
+  return (
+    <Command shouldFilter={false}>
+      <CommandInput
+        value={search}
+        placeholder={t`Search for a language`}
+        onValueChange={setSearch}
+      />
+      <CommandList>
+        <CommandEmpty>{t`No results found`}</CommandEmpty>
+        <CommandGroup>
+          <ScrollArea orientation="vertical">
+            <div className="max-h-60">
+              {options.map(({ original }) => (
+                <CommandItem
+                  key={original.locale}
+                  disabled={false}
+                  value={original.locale.trim()}
+                  onSelect={(selectedValue) => {
+                    const result = options.find(
+                      ({ original }) => original.locale.trim() === selectedValue,
+                    );
+
+                    if (!result) return null;
+
+                    onValueChange(result.original.locale);
+                  }}
+                >
+                  <CheckIcon
+                    className={cn(
+                      "mr-2 size-4 opacity-0",
+                      value === original.locale && "opacity-100",
+                    )}
+                  />
+                  {original.name}{" "}
+                  <span className="ml-1 text-xs opacity-50">({original.locale})</span>
+                </CommandItem>
+              ))}
+            </div>
+          </ScrollArea>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+};
+
+export const LocaleComboboxPopover = ({ value, onValueChange }: Props) => {
+  const { languages } = useLanguages();
+  const [open, setOpen] = useState(false);
+
+  const selected = useMemo(() => {
+    return languages.find((lang) => lang.locale === value);
+  }, [value, languages]);
+
+  const onSelect = (selectedValue: string) => {
+    onValueChange(selectedValue);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          role="combobox"
+          variant="outline"
+          aria-expanded={open}
+          className="w-full justify-between hover:bg-secondary/20 active:scale-100"
+        >
+          <span className="line-clamp-1 text-left font-normal">
+            {selected?.name} <span className="ml-1 text-xs opacity-50">({selected?.locale})</span>
+          </span>
+          <CaretDownIcon
+            className={cn(
+              "ml-2 size-4 shrink-0 rotate-0 opacity-50 transition-transform",
+              open && "rotate-180",
+            )}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="p-0">
+        <LocaleCombobox value={value} onValueChange={onSelect} />
+      </PopoverContent>
+    </Popover>
+  );
+};

apps/client/src/components/locale-switch.tsx

@@ -1,77 +1,31 @@
 import { t } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { Check, Translate } from "@phosphor-icons/react";
-import {
-  Button,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  ScrollArea,
-} from "@reactive-resume/ui";
-import { cn } from "@reactive-resume/utils";
+import { TranslateIcon } from "@phosphor-icons/react";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui";
 import { useState } from "react";
 
 import { changeLanguage } from "../providers/locale";
-import { useLanguages } from "../services/resume/translation";
+import { LocaleCombobox } from "./locale-combobox";
 
 export const LocaleSwitch = () => {
   const { i18n } = useLingui();
-  const { languages } = useLanguages();
-
   const [open, setOpen] = useState(false);
 
-  const options = languages.map((language) => ({
-    label: language.name,
-    value: language.locale,
-  }));
-
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button size="icon" variant="ghost">
-          <Translate size={20} />
+        <Button size="icon" variant="ghost" aria-label={t`Change Language`}>
+          <TranslateIcon size={20} />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="end" className="p-0">
-        <Command>
-          <CommandInput placeholder={t`Search for a language`} />
-          <CommandEmpty>{t`No results found`}</CommandEmpty>
-          <CommandGroup>
-            <ScrollArea orientation="vertical">
-              <div className="max-h-60">
-                {options.map((option) => (
-                  <CommandItem
-                    key={option.value}
-                    value={option.value.toLowerCase().trim()}
-                    onSelect={async (selectedValue) => {
-                      const option = options.find(
-                        (option) => option.value.toLowerCase().trim() === selectedValue,
-                      );
-
-                      if (!option) return null;
-
-                      await changeLanguage(option.value);
-                      setOpen(false);
-                    }}
-                  >
-                    <Check
-                      className={cn(
-                        "mr-2 h-4 w-4 opacity-0",
-                        i18n.locale === option.value && "opacity-100",
-                      )}
-                    />
-                    {option.label} <span className="ml-1 text-xs opacity-50">({option.value})</span>
-                  </CommandItem>
-                ))}
-              </div>
-            </ScrollArea>
-          </CommandGroup>
-        </Command>
+        <LocaleCombobox
+          value={i18n.locale}
+          onValueChange={async (locale) => {
+            await changeLanguage(locale);
+            setOpen(false);
+          }}
+        />
       </PopoverContent>
     </Popover>
   );

apps/client/src/components/logo.tsx

@@ -12,12 +12,14 @@ export const Logo = ({ size = 32, className }: Props) => {
   let src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 
   switch (isDarkMode) {
-    case false:
+    case false: {
       src = "/logo/light.svg";
       break;
-    case true:
+    }
+    case true: {
       src = "/logo/dark.svg";
       break;
+    }
   }
 
   return (

apps/client/src/components/theme-switch.tsx

@@ -1,14 +1,17 @@
-import { CloudSun, Moon, Sun } from "@phosphor-icons/react";
+import { t } from "@lingui/macro";
+import { CloudSunIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
 import { useTheme } from "@reactive-resume/hooks";
 import { Button } from "@reactive-resume/ui";
-import { motion, Variants } from "framer-motion";
+import type { Variants } from "framer-motion";
+import { motion } from "framer-motion";
 import { useMemo } from "react";
 
 type Props = {
   size?: number;
+  className?: string;
 };
 
-export const ThemeSwitch = ({ size = 20 }: Props) => {
+export const ThemeSwitch = ({ size = 20, className }: Props) => {
   const { theme, toggleTheme } = useTheme();
 
   const variants: Variants = useMemo(() => {
@@ -20,12 +23,12 @@ export const ThemeSwitch = ({ size = 20 }: Props) => {
   }, [size]);
 
   return (
-    <Button size="icon" variant="ghost" onClick={toggleTheme}>
+    <Button size="icon" variant="ghost" className={className} onClick={toggleTheme}>
       <div className="cursor-pointer overflow-hidden" style={{ width: size, height: size }}>
         <motion.div animate={theme} variants={variants} className="flex">
-          <Sun size={size} className="shrink-0" />
-          <CloudSun size={size} className="shrink-0" />
-          <Moon size={size} className="shrink-0" />
+          <SunIcon size={size} className="shrink-0" aria-label={t`Switch to Light Mode`} />
+          <CloudSunIcon size={size} className="shrink-0" aria-label={t`Use System Theme`} />
+          <MoonIcon size={size} className="shrink-0" aria-label={t`Switch to Dark Mode`} />
         </motion.div>
       </div>
     </Button>