Merge pull request #2419 from AmruthPillai/l10n

New Translations from Crowdin

.env.example

@@ -30,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
@@ -44,11 +46,7 @@ STORAGE_BUCKET=default
 STORAGE_ACCESS_KEY=minioadmin
 STORAGE_SECRET_KEY=minioadmin
 STORAGE_USE_SSL=false
-
-# Sentry (for error reporting, Optional)
-# SENTRY_AUTH_TOKEN=
-# SERVER_SENTRY_DSN=
-# VITE_CLIENT_SENTRY_DSN=
+STORAGE_SKIP_BUCKET_CHECK=false
 
 # Nx Cloud (Optional)
 # NX_CLOUD_ACCESS_TOKEN=
@@ -57,10 +55,9 @@ STORAGE_USE_SSL=false
 # CROWDIN_PROJECT_ID=
 # CROWDIN_PERSONAL_TOKEN=
 
-# Flags (Optional)
-# DISABLE_EMAIL_AUTH=true
-# VITE_DISABLE_SIGNUPS=false
-# SKIP_STORAGE_BUCKET_CHECK=false
+# Feature Flags (Optional)
+# DISABLE_SIGNUPS=false
+# DISABLE_EMAIL_AUTH=false
 
 # GitHub (OAuth, Optional)
 # GITHUB_CLIENT_ID=
@@ -71,3 +68,14 @@ STORAGE_USE_SSL=false
 # 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

@@ -9,6 +9,7 @@
       "plugins": ["simple-import-sort", "unused-imports"],
       "rules": {
         // eslint
+        "no-console": "error",
         "no-return-await": "off",
 
         // simple-import-sort
@@ -41,6 +42,14 @@
               }
             ]
           }
+        ],
+
+        // prettier
+        "prettier/prettier": [
+          "warn",
+          {
+            "endOfLine": "auto"
+          }
         ]
       }
     },
@@ -69,6 +78,7 @@
         "@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"],
@@ -76,7 +86,8 @@
         // unicorn
         "unicorn/no-null": "off",
         "unicorn/prevent-abbreviations": "off",
-        "unicorn/prefer-string-replace-all": "off"
+        "unicorn/prefer-string-replace-all": "off",
+        "unicorn/prefer-structured-clone": "off"
       }
     },
     {

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -76,7 +76,10 @@ body:
         - Bronzor
         - Chikorita
         - Ditto
+        - Gengar
+        - Glalie
         - Kakuna
+        - Leafish
         - Nosepass
         - Onyx
         - Pikachu

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

@@ -19,36 +19,30 @@ jobs:
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.2.2
         with:
           fetch-depth: 2
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3.0.0
-        with:
-          version: 9.1.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.1.0
         with:
           cache: "pnpm"
-          node-version: 20.12.2
+          node-version: 22
 
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Lint
-        run: pnpm lint
+        run: pnpm run lint
 
       - name: Format
-        run: pnpm format:check
+        run: pnpm run format
 
       - name: Test
-        run: pnpm test
+        run: pnpm run test
 
       - name: Build
-        run: pnpm build
-        env:
-          NODE_ENV: production
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+        run: pnpm run build

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

@@ -21,7 +21,6 @@ jobs:
       version: ${{ steps.version.outputs.version }}
 
     strategy:
-      max-parallel: 1
       matrix:
         platform:
           - linux/amd64
@@ -53,10 +52,6 @@ jobs:
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3.3.0
-        with:
-          driver: cloud
-          version: "lab:latest"
-          endpoint: "amruthpillai/default"
 
       - name: Extract Docker Metadata
         id: meta
@@ -82,7 +77,6 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           outputs: type=image,name=${{ env.IMAGE }},push-by-digest=true,name-canonical=true,push=true
           build-args: |
-            SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}
             NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 
       - name: Export Digest
@@ -131,10 +125,6 @@ jobs:
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3.3.0
-        with:
-          driver: cloud
-          version: "lab:latest"
-          endpoint: "amruthpillai/default"
 
       - name: Extract Docker Metadata
         id: meta
@@ -161,3 +151,17 @@ jobs:
           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

@@ -40,6 +40,7 @@ Thumbs.db
 # Generated Files
 .nx
 .swc
+.turbo
 fly.toml
 stats.html
 
@@ -49,4 +50,4 @@ stats.html
 
 # Lingui Compiled Messages
 apps/client/src/locales/_build/
-apps/client/src/locales/*/messages.mjs
+apps/client/src/locales/*/messages.*js

.ncurc.json

@@ -1,7 +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": ["eslint", "vite-plugin-chunk-split", "@reactive-resume/*"]
+  "reject": [
+    "nx",
+    "eslint",
+    "@nx/*",
+    "@swc/*",
+    "@swc-node/*",
+    "@reactive-resume/*",
+    "eslint-plugin-unused-imports"
+  ]
 }

.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,15 +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"],
-  "vitest.disableWorkspaceWarning": true
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

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

@@ -9,7 +9,7 @@ To run the development environment of the application locally on your computer,
 #### 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
 

Dockerfile

@@ -1,21 +1,18 @@
-ARG SENTRY_AUTH_TOKEN
 ARG NX_CLOUD_ACCESS_TOKEN
 
 # --- Base Image ---
 FROM node:lts-bullseye-slim AS base
-ARG SENTRY_AUTH_TOKEN
 ARG NX_CLOUD_ACCESS_TOKEN
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 
-RUN corepack enable pnpm && corepack prepare pnpm@9.0.6 --activate
+RUN corepack enable
 
 WORKDIR /app
 
 # --- Build Image ---
 FROM base AS build
-ARG SENTRY_AUTH_TOKEN
 ARG NX_CLOUD_ACCESS_TOKEN
 
 COPY .npmrc package.json pnpm-lock.yaml ./
@@ -24,7 +21,6 @@ RUN pnpm install --frozen-lockfile
 
 COPY . .
 
-ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
 ENV NX_CLOUD_ACCESS_TOKEN=$NX_CLOUD_ACCESS_TOKEN
 
 RUN pnpm run build

README.md

@@ -1,4 +1,15 @@
-![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>
+
+### [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)
@@ -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.
@@ -24,17 +37,21 @@ Start creating your standout resume with Reactive Resume today!
 
 ## Templates
 
-| Azurill                                                      | Bronzor                                                     | Chikorita                                                   |
-| ------------------------------------------------------------ | ----------------------------------------------------------- | ----------------------------------------------------------- |
-| <img src="https://i.imgur.com/jKgo04C.jpeg" width="200px" /> | <img src="https://i.imgur.com/DFNQZP2.jpg" width="200px" /> | <img src="https://i.imgur.com/Dwv8Y7f.jpg" width="200px" /> |
+| Azurill                                                                 | Bronzor                                                                 | Chikorita                                                                 |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| <img src="./apps/client/public/templates/jpg/azurill.jpg" width="200px" /> | <img src="./apps/client/public/templates/jpg/bronzor.jpg" width="200px" /> | <img src="./apps/client/public/templates/jpg/chikorita.jpg" width="200px" /> |
 
-| Ditto                                                       | Kakuna                                                      | Nosepass                                                    |
-| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
-| <img src="https://i.imgur.com/6c5lASL.jpg" width="200px" /> | <img src="https://i.imgur.com/268ML3t.jpg" width="200px" /> | <img src="https://i.imgur.com/npRLsPS.jpg" width="200px" /> |
+| Ditto                                                                | Gengar                                                                 | Glalie                                                                 |
+| -------------------------------------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| <img src="./apps/client/public/templates/jpg/ditto.jpg" width="200px" /> | <img src="./apps/client/public/templates/jpg/gengar.jpg" width="200px" /> | <img src="./apps/client/public/templates/jpg/glalie.jpg" width="200px" /> |
 
-| Onyx                                                        | Pikachu                                                     | Rhyhorn                                                     |
-| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
-| <img src="https://i.imgur.com/cxplXOW.jpg" width="200px" /> | <img src="https://i.imgur.com/Y9f7qsh.jpg" width="200px" /> | <img src="https://i.imgur.com/h4kQxy2.jpg" width="200px" /> |
+| Kakuna                                                                 | Leafish                                                                 | Nosepass                                                                 |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| <img src="./apps/client/public/templates/jpg/kakuna.jpg" width="200px" /> | <img src="./apps/client/public/templates/jpg/leafish.jpg" width="200px" /> | <img src="./apps/client/public/templates/jpg/nosepass.jpg" width="200px" /> |
+
+| Onyx                                                                | Pikachu                                                                 | Rhyhorn                                                                 |
+| ------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| <img src="./apps/client/public/templates/jpg/onyx.jpg" width="200px" /> | <img src="./apps/client/public/templates/jpg/pikachu.jpg" width="200px" /> | <img src="./apps/client/public/templates/jpg/rhyhorn.jpg" width="200px" /> |
 
 ## Features
 
@@ -48,7 +65,7 @@ Start creating your standout resume with Reactive Resume today!
 - **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
@@ -72,7 +89,6 @@ Start creating your standout resume with Reactive Resume today!
 - 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)
 
@@ -94,7 +110,7 @@ _By the community, for the community._
 A passion project by [Amruth Pillai](https://www.amruthpillai.com/)
 
 <p>
-  <a href="https://www.digitalocean.com/?utm_medium=opensource&utm_source=Reactive-Resume">
+  <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>

apps/artboard/.eslintrc.json

@@ -12,6 +12,9 @@
         }
       },
       "rules": {
+        // eslint
+        "@typescript-eslint/no-require-imports": "off",
+
         // react
         "react/no-unescaped-entities": "off",
         "react/jsx-sort-props": [

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/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,7 +20,7 @@ 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,
         width: `${pageSizeMap[page.format].width * 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,6 +1,6 @@
 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";
 

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(() => {
@@ -39,7 +41,7 @@ export const ArtboardPage = () => {
       `${metadata.typography.lineHeight}`,
     );
 
-    document.documentElement.style.setProperty("--color-text", metadata.theme.text);
+    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]);
@@ -55,5 +57,18 @@ export const ArtboardPage = () => {
     }
   }, [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);
@@ -44,6 +52,8 @@ export const BuilderLayout = () => {
       minScale={0.4}
       initialScale={0.8}
       limitToBounds={false}
+      wheel={{ wheelDisabled: wheelPanning }}
+      panning={{ wheelPanning: wheelPanning }}
     >
       <TransformComponent
         wrapperClass="!w-screen !h-screen"

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,35 +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) {
-      setResume(JSON.parse(resumeData));
-      return;
-    }
-
-    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 = {

apps/artboard/src/styles/main.css

@@ -8,6 +8,10 @@
   @apply border-current;
 }
 
+body {
+  overflow: hidden;
+}
+
 #root {
   @apply antialiased;
 }
@@ -21,5 +25,5 @@
 }
 
 .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 prose-a:break-all;
+  @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>
@@ -93,9 +98,9 @@ const Summary = () => {
         <div className="absolute left-[-4.5px] top-[8px] hidden size-[8px] rounded-full bg-primary group-[.main]:block" />
 
         <div
-          dangerouslySetInnerHTML={{ __html: section.content }}
-          className="wysiwyg"
+          dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
           style={{ columns: section.columns }}
+          className="wysiwyg"
         />
       </main>
     </section>
@@ -117,16 +122,17 @@ 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"
@@ -135,10 +141,32 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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 === 0) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -196,7 +224,10 @@ const Section = <T,>({
                 <div>{children?.(item as T)}</div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -205,7 +236,7 @@ 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 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>
@@ -510,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
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg col-span-4"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
+        className="wysiwyg col-span-4"
       />
     </section>
   );
@@ -108,16 +113,17 @@ 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"
@@ -126,10 +132,32 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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 === 0) 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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <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>
@@ -233,7 +251,12 @@ const Experience = () => {
       {(item) => (
         <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>
 
@@ -255,7 +278,12 @@ const Education = () => {
       {(item) => (
         <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>
@@ -279,7 +307,11 @@ const Awards = () => {
         <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">
@@ -300,7 +332,7 @@ const Certifications = () => {
         <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">
@@ -345,7 +377,12 @@ const Publications = () => {
       {(item) => (
         <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>
 
@@ -366,7 +403,12 @@ const Volunteer = () => {
       {(item) => (
         <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>
 
@@ -403,7 +445,12 @@ const Projects = () => {
       {(item) => (
         <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>
       )}
@@ -444,7 +496,12 @@ const Custom = ({ id }: { id: string }) => {
       {(item) => (
         <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>
 

apps/artboard/src/templates/chikorita.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);
@@ -65,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>
@@ -84,9 +89,9 @@ const Summary = () => {
       <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
 
       <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -111,16 +116,18 @@ 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"
@@ -129,10 +136,33 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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;
@@ -152,7 +182,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || section.items.length === 0) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -174,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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg group-[.sidebar]:prose-invert"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -202,7 +235,12 @@ const Experience = () => {
       {(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.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -224,7 +262,12 @@ const Education = () => {
       {(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.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -241,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>
@@ -280,7 +310,11 @@ const Awards = () => {
         <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">
@@ -301,10 +335,7 @@ const Certifications = () => {
         <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,7 +377,12 @@ const Publications = () => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -367,7 +403,12 @@ const Volunteer = () => {
       {(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.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -404,7 +445,12 @@ const Projects = () => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -424,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,7 +496,12 @@ const Custom = ({ id }: { id: string }) => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -512,8 +568,13 @@ export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="grid h-full grid-cols-3">
-      <div className="main p-custom group col-span-2 space-y-4">
+    <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 />}
 
         {main.map((section) => (
@@ -521,7 +582,12 @@ export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
         ))}
       </div>
 
-      <div className="sidebar p-custom group h-full space-y-4 bg-primary text-background">
+      <div
+        className={cn(
+          "sidebar p-custom group h-full space-y-4 bg-primary text-background",
+          sidebar.length === 0 && "hidden",
+        )}
+      >
         {sidebar.map((section) => (
           <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
         ))}

apps/artboard/src/templates/ditto.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);
@@ -38,7 +37,7 @@ const Header = () => {
           <p>{basics.headline}</p>
         </div>
 
-        <div className="text-text col-span-2 col-start-2 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 && (
               <>
@@ -82,7 +81,13 @@ const Header = () => {
               <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 size-1 rounded-full last:hidden" />
               </Fragment>
@@ -104,9 +109,9 @@ const Summary = () => {
       <h4 className="mb-2 text-base font-bold">{section.name}</h4>
 
       <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -128,16 +133,17 @@ 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"
@@ -146,10 +152,32 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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 === 0) 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-4 border-primary group-[.sidebar]:hidden" />
                 </div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <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>
@@ -260,7 +278,12 @@ const Experience = () => {
       {(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.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -282,7 +305,12 @@ const Education = () => {
       {(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.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -306,7 +334,11 @@ const Awards = () => {
         <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">
@@ -327,7 +359,7 @@ const Certifications = () => {
         <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">
@@ -372,7 +404,12 @@ const Publications = () => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -393,7 +430,12 @@ const Volunteer = () => {
       {(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.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -430,7 +472,12 @@ const Projects = () => {
       {(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.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>
       )}
@@ -471,7 +523,12 @@ const Custom = ({ id }: { id: string }) => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -553,7 +610,12 @@ export const Ditto = ({ columns, isFirstPage = false }: TemplateProps) => {
           ))}
         </div>
 
-        <div className="main p-custom 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

@@ -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, hexToRgb, isEmptyString, isUrl } from "@reactive-resume/utils";
+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 { TemplateProps } from "../types/template";
+import type { TemplateProps } from "../types/template";
 
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
@@ -65,7 +64,13 @@ const Header = () => {
           <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>
           </Fragment>
         ))}
@@ -76,17 +81,20 @@ const Header = () => {
 
 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 (
-    <section id={section.id}>
-      <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
-        style={{ columns: section.columns }}
-      />
-    </section>
+    <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>
   );
 };
 
@@ -106,16 +114,20 @@ 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-[.sidebar]:text-background" />}
+      {!iconOnRight &&
+        (icon ?? (
+          <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-background" />
+        ))}
       <a
         href={url.href}
         target="_blank"
@@ -124,10 +136,35 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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;
@@ -147,7 +184,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || section.items.length === 0) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -169,11 +206,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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -191,30 +231,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>
@@ -229,7 +256,12 @@ const Experience = () => {
       {(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.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -251,7 +283,12 @@ const Education = () => {
       {(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.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,7 +312,11 @@ const Awards = () => {
         <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">
@@ -296,7 +337,7 @@ const Certifications = () => {
         <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">
@@ -341,7 +382,12 @@ const Publications = () => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -362,7 +408,12 @@ const Volunteer = () => {
       {(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.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -399,7 +450,12 @@ const Projects = () => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -419,7 +475,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>
       )}
@@ -440,7 +501,12 @@ const Custom = ({ id }: { id: string }) => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -465,6 +531,11 @@ const mapSectionToComponent = (section: SectionKey) => {
     case "education": {
       return <Education />;
     }
+    
+    case "summary": {
+      return <Summary />;
+    }
+
     case "awards": {
       return <Awards />;
     }
@@ -525,16 +596,7 @@ export const Gengar = ({ columns, isFirstPage = false }: TemplateProps) => {
         </div>
       </div>
 
-      <div className="main group col-span-2">
-        {isFirstPage && (
-          <div
-            className="p-custom space-y-4"
-            style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
-          >
-            <Summary />
-          </div>
-        )}
-
+      <div className={cn("main group", sidebar.length > 0 ? "col-span-2" : "col-span-3")}>
         <div className="p-custom space-y-4">
           {main.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>

apps/artboard/src/templates/glalie.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Profile,
@@ -15,15 +13,23 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, hexToRgb, isEmptyString, isUrl, linearTransform } from "@reactive-resume/utils";
+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 { TemplateProps } from "../types/template";
+import type { TemplateProps } from "../types/template";
 
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
@@ -65,7 +71,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 +96,9 @@ const Summary = () => {
       <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
 
       <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -114,16 +126,18 @@ 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-[.sidebar]:text-primary" />}
+      {!iconOnRight &&
+        (icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-primary" />)}
       <a
         href={url.href}
         target="_blank"
@@ -132,10 +146,33 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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;
@@ -155,7 +192,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || section.items.length === 0) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -179,11 +216,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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -207,7 +247,12 @@ const Experience = () => {
       {(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.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -229,7 +274,12 @@ const Education = () => {
       {(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.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -246,30 +296,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>
@@ -285,7 +322,11 @@ const Awards = () => {
         <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">
@@ -306,7 +347,7 @@ const Certifications = () => {
         <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">
@@ -351,7 +392,12 @@ const Publications = () => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -372,7 +418,12 @@ const Volunteer = () => {
       {(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.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -409,7 +460,12 @@ const Projects = () => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -429,7 +485,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>
       )}
@@ -450,7 +511,12 @@ const Custom = ({ id }: { id: string }) => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -521,7 +587,7 @@ export const Glalie = ({ columns, isFirstPage = false }: TemplateProps) => {
   return (
     <div className="grid min-h-[inherit] grid-cols-3">
       <div
-        className="sidebar p-custom group space-y-4"
+        className={cn("sidebar p-custom group space-y-4", sidebar.length === 0 && "hidden")}
         style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
       >
         {isFirstPage && <Header />}
@@ -531,7 +597,12 @@ export const Glalie = ({ columns, isFirstPage = false }: TemplateProps) => {
         ))}
       </div>
 
-      <div className="main p-custom 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/index.tsx

@@ -1,4 +1,4 @@
-import { Template } from "@reactive-resume/utils";
+import type { Template } from "@reactive-resume/utils";
 
 import { Azurill } from "./azurill";
 import { Bronzor } from "./bronzor";

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
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -134,16 +132,17 @@ 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"
@@ -152,10 +151,32 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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 === 0) 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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <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>

apps/artboard/src/templates/leafish.tsx

@@ -1,10 +1,8 @@
-import {
+import type {
   Award,
   Certification,
   CustomSection,
   CustomSectionGroup,
-  Education,
-  Experience,
   Interest,
   Language,
   Project,
@@ -14,22 +12,22 @@ import {
   SectionWithItem,
   Skill,
   URL,
-  Volunteer,
 } from "@reactive-resume/schema";
-import { cn, hexToRgb, isEmptyString, isUrl } from "@reactive-resume/utils";
+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 { TemplateProps } from "../types/template";
+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);
-  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
 
   return (
     <div>
@@ -44,9 +42,9 @@ const Header = () => {
           </div>
 
           <div
-            dangerouslySetInnerHTML={{ __html: section.content }}
-            className="wysiwyg"
+            dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
             style={{ columns: section.columns }}
+            className="wysiwyg"
           />
         </div>
 
@@ -81,7 +79,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>
@@ -96,15 +100,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>
               ))}
@@ -131,16 +127,17 @@ 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"
@@ -149,10 +146,32 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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;
@@ -172,7 +191,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || section.items.length === 0) return null;
+  if (!section.visible || section.items.filter((item) => item.visible).length === 0) return null;
 
   return (
     <section id={section.id} className="grid">
@@ -197,7 +216,10 @@ const Section = <T,>({
                 <div>{children?.(item as T)}</div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -206,7 +228,7 @@ const Section = <T,>({
                   <p className="text-sm">{keywords.join(", ")}</p>
                 )}
 
-                {url !== undefined && <Link url={url} />}
+                {url !== undefined && section.separateLinks && <Link url={url} />}
               </div>
             );
           })}
@@ -222,7 +244,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>
@@ -239,7 +266,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>
@@ -258,7 +290,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>
       )}
@@ -274,7 +306,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>
       )}
@@ -314,7 +346,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>
@@ -330,7 +367,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>
@@ -363,7 +405,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>
@@ -380,7 +427,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>
       )}
@@ -401,7 +453,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>
@@ -463,13 +520,13 @@ export const Leafish = ({ columns, isFirstPage = false }: TemplateProps) => {
       {isFirstPage && <Header />}
 
       <div className="p-custom grid grid-cols-2 items-start space-x-6">
-        <div className="grid gap-y-4">
+        <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="grid gap-y-4">
+        <div className={cn("grid gap-y-4", sidebar.length === 0 && "hidden")}>
           {sidebar.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
           ))}

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);
@@ -70,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>
@@ -98,9 +105,9 @@ const Summary = () => {
         </div>
 
         <div
-          dangerouslySetInnerHTML={{ __html: section.content }}
-          className="wysiwyg"
+          dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
           style={{ columns: section.columns }}
+          className="wysiwyg"
         />
       </div>
     </section>
@@ -110,16 +117,17 @@ 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"
@@ -128,10 +136,32 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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 +180,7 @@ const Section = <T,>({
   summaryKey,
   keywordsKey,
 }: SectionProps<T>) => {
-  if (!section.visible || section.items.length === 0) 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")}>
@@ -184,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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                      <div
+                        dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                        className="wysiwyg"
+                      />
                     )}
 
                     {keywords !== undefined && keywords.length > 0 && (
@@ -219,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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                      <div
+                        dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                        className="wysiwyg"
+                      />
                     )}
 
                     {keywords !== undefined && keywords.length > 0 && (
@@ -240,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>
@@ -277,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>
@@ -293,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>
@@ -311,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>
@@ -326,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>
@@ -365,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>
       )}
@@ -380,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>
@@ -417,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>
       )}
@@ -432,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>
       )}
@@ -453,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>
@@ -519,7 +577,7 @@ export const Nosepass = ({ columns, isFirstPage = false }: TemplateProps) => {
   return (
     <div className="p-custom space-y-6">
       <div className="flex items-center justify-between">
-        <img alt="Europass Logo" className="h-[42px]" src="https://i.imgur.com/eRK005p.png" />
+        <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
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -137,16 +133,17 @@ 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"
@@ -155,10 +152,32 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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 === 0) 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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitize(summary) }}
+                    className="wysiwyg"
+                  />
                 )}
 
                 {level !== undefined && level > 0 && <Rating level={level} />}
@@ -228,7 +250,12 @@ const Experience = () => {
       {(item) => (
         <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>
 
@@ -250,7 +277,12 @@ const Education = () => {
       {(item) => (
         <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>
@@ -274,7 +306,11 @@ const Awards = () => {
         <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">
@@ -295,7 +331,7 @@ const Certifications = () => {
         <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">
@@ -340,7 +376,12 @@ const Publications = () => {
       {(item) => (
         <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>
 
@@ -361,7 +402,12 @@ const Volunteer = () => {
       {(item) => (
         <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>
 
@@ -398,7 +444,12 @@ const Projects = () => {
       {(item) => (
         <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>
       )}
@@ -439,7 +495,12 @@ const Custom = ({ id }: { id: string }) => {
       {(item) => (
         <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>
 

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);
@@ -84,7 +83,13 @@ const Header = () => {
             <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="size-1 rounded-full bg-background last:hidden" />
             </Fragment>
@@ -105,9 +110,9 @@ const Summary = () => {
       <h4 className="mb-2 border-b border-primary text-base font-bold">{section.name}</h4>
 
       <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -137,16 +142,20 @@ 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"
@@ -155,10 +164,35 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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 === 0) 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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <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>
@@ -260,7 +284,12 @@ const Experience = () => {
       {(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.company}</div>
+            <LinkedEntity
+              name={item.company}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -282,7 +311,12 @@ const Education = () => {
       {(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.institution}</div>
+            <LinkedEntity
+              name={item.institution}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.area}</div>
             <div>{item.score}</div>
           </div>
@@ -306,7 +340,11 @@ const Awards = () => {
         <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">
@@ -327,7 +365,7 @@ const Certifications = () => {
         <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">
@@ -372,7 +410,12 @@ const Publications = () => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.publisher}</div>
           </div>
 
@@ -393,7 +436,12 @@ const Volunteer = () => {
       {(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.organization}</div>
+            <LinkedEntity
+              name={item.organization}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.position}</div>
           </div>
 
@@ -430,7 +478,12 @@ const Projects = () => {
       {(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.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>
       )}
@@ -471,7 +529,12 @@ const Custom = ({ id }: { id: string }) => {
       {(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.name}
+              url={item.url}
+              separateLinks={section.separateLinks}
+              className="font-bold"
+            />
             <div>{item.description}</div>
           </div>
 
@@ -547,7 +610,7 @@ export const Pikachu = ({ 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")}>
         {isFirstPage && <Header />}
 
         {main.map((section) => (

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
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitize(section.content) }}
         style={{ columns: section.columns }}
+        className="wysiwyg"
       />
     </section>
   );
@@ -109,16 +114,17 @@ 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"
@@ -127,10 +133,32 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {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 === 0) 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 dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <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>
@@ -232,7 +250,12 @@ const Experience = () => {
       {(item) => (
         <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>
 
@@ -254,7 +277,12 @@ const Education = () => {
       {(item) => (
         <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>
@@ -278,7 +306,11 @@ const Awards = () => {
         <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">
@@ -299,7 +331,7 @@ const Certifications = () => {
         <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">
@@ -344,7 +376,12 @@ const Publications = () => {
       {(item) => (
         <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>
 
@@ -365,7 +402,12 @@ const Volunteer = () => {
       {(item) => (
         <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>
 
@@ -402,7 +444,12 @@ const Projects = () => {
       {(item) => (
         <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>
       )}
@@ -443,7 +495,12 @@ const Custom = ({ id }: { id: string }) => {
       {(item) => (
         <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>
 

apps/artboard/src/types/template.ts

@@ -1,4 +1,4 @@
-import { SectionKey } from "@reactive-resume/schema";
+import type { SectionKey } from "@reactive-resume/schema";
 
 export type TemplateProps = {
   columns: SectionKey[][];

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)",
       },
@@ -23,6 +23,28 @@ module.exports = {
         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

@@ -3,7 +3,6 @@
 import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig, searchForWorkspaceRoot } from "vite";
-import { chunkSplitPlugin } from "vite-plugin-chunk-split";
 
 export default defineConfig({
   base: "/artboard/",
@@ -21,13 +20,7 @@ export default defineConfig({
     fs: { allow: [searchForWorkspaceRoot(process.cwd())] },
   },
 
-  plugins: [
-    react(),
-    nxViteTsPaths(),
-    chunkSplitPlugin({
-      strategy: "unbundle",
-    }),
-  ],
+  plugins: [react(), nxViteTsPaths()],
 
   resolve: {
     alias: {

apps/client/.eslintrc.json

@@ -3,19 +3,26 @@
   "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": [
@@ -35,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/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

@@ -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/glalie.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/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

@@ -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/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,
@@ -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/locale-combobox.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { CaretDown, Check } from "@phosphor-icons/react";
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import {
   Button,
   Command,
@@ -61,7 +61,7 @@ export const LocaleCombobox = ({ value, onValueChange }: Props) => {
                     onValueChange(result.original.locale);
                   }}
                 >
-                  <Check
+                  <CheckIcon
                     className={cn(
                       "mr-2 size-4 opacity-0",
                       value === original.locale && "opacity-100",
@@ -104,7 +104,7 @@ export const LocaleComboboxPopover = ({ value, onValueChange }: Props) => {
           <span className="line-clamp-1 text-left font-normal">
             {selected?.name} <span className="ml-1 text-xs opacity-50">({selected?.locale})</span>
           </span>
-          <CaretDown
+          <CaretDownIcon
             className={cn(
               "ml-2 size-4 shrink-0 rotate-0 opacity-50 transition-transform",
               open && "rotate-180",

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

@@ -1,5 +1,6 @@
+import { t } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { Translate } from "@phosphor-icons/react";
+import { TranslateIcon } from "@phosphor-icons/react";
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui";
 import { useState } from "react";
 
@@ -13,8 +14,8 @@ export const LocaleSwitch = () => {
   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">

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>

apps/client/src/components/user-options.tsx

@@ -7,7 +7,7 @@ import {
   DropdownMenuTrigger,
   KeyboardShortcut,
 } from "@reactive-resume/ui";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import { useLogout } from "../services/auth";
 
@@ -26,7 +26,7 @@ export const UserOptions = ({ children }: Props) => {
       <DropdownMenuContent side="top" align="start" className="w-48">
         <DropdownMenuItem
           onClick={() => {
-            navigate("/dashboard/settings");
+            void navigate("/dashboard/settings");
           }}
         >
           {t`Settings`}

apps/client/src/constants/llm.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_MODEL = "gpt-3.5-turbo";
+export const DEFAULT_MAX_TOKENS = 1024;
+export const DEFAULT_AZURE_API_VERSION = "2024-10-21";

apps/client/src/constants/parallax-tilt.ts

@@ -1,4 +1,4 @@
-import { ReactParallaxTiltProps } from "react-parallax-tilt";
+import type { ReactParallaxTiltProps } from "react-parallax-tilt";
 
 export const defaultTiltProps: ReactParallaxTiltProps = {
   scale: 1.05,

apps/client/src/constants/query-keys.ts

@@ -1,4 +1,4 @@
-import { QueryKey } from "@tanstack/react-query";
+import type { QueryKey } from "@tanstack/react-query";
 
 export const USER_KEY: QueryKey = ["user"];
 export const AUTH_PROVIDERS_KEY: QueryKey = ["auth", "providers"];

apps/client/src/hooks/use-toast.ts

@@ -1,5 +1,5 @@
 import { createId } from "@paralleldrive/cuid2";
-import { ToastActionElement, ToastProps } from "@reactive-resume/ui";
+import type { ToastActionElement, ToastProps } from "@reactive-resume/ui";
 import { useEffect, useState } from "react";
 
 const TOAST_LIMIT = 1;
@@ -13,7 +13,7 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement;
 };
 
-const actionTypes = {
+export const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",

apps/client/src/libs/axios.ts

@@ -1,8 +1,9 @@
 import { t } from "@lingui/macro";
-import { deepSearchAndParseDates, ErrorMessage } from "@reactive-resume/utils";
+import type { ErrorMessage } from "@reactive-resume/utils";
+import { deepSearchAndParseDates } from "@reactive-resume/utils";
 import _axios from "axios";
 import createAuthRefreshInterceptor from "axios-auth-refresh";
-import { redirect } from "react-router-dom";
+import { redirect } from "react-router";
 
 import { refreshToken } from "@/client/services/auth";
 

apps/client/src/libs/dayjs.ts

@@ -13,6 +13,7 @@ export const dayjsLocales: Record<string, () => Promise<ILocale>> = {
   "af-ZA": () => import("dayjs/locale/af"),
   "am-ET": () => import("dayjs/locale/am"),
   "ar-SA": () => import("dayjs/locale/ar-sa"),
+  "az-AZ": () => import("dayjs/locale/az"),
   "bg-BG": () => import("dayjs/locale/bg"),
   "bn-BD": () => import("dayjs/locale/bn"),
   "ca-ES": () => import("dayjs/locale/ca"),
@@ -35,17 +36,21 @@ export const dayjsLocales: Record<string, () => Promise<ILocale>> = {
   "kn-IN": () => import("dayjs/locale/kn"),
   "ko-KR": () => import("dayjs/locale/ko"),
   "lt-LT": () => import("dayjs/locale/lt"),
+  "lv-LV": () => import("dayjs/locale/lv"),
   "ml-IN": () => import("dayjs/locale/ml"),
   "mr-IN": () => import("dayjs/locale/mr"),
+  "ms-MY": () => import("dayjs/locale/ms-my"),
   "ne-NP": () => import("dayjs/locale/ne"),
   "nl-NL": () => import("dayjs/locale/nl"),
-  "no-NO": () => import("dayjs/locale/en"),
+  "no-NO": () => import("dayjs/locale/nb"),
   "or-IN": () => import("dayjs/locale/en"),
   "pl-PL": () => import("dayjs/locale/pl"),
   "pt-BR": () => import("dayjs/locale/pt-br"),
   "pt-PT": () => import("dayjs/locale/pt"),
   "ro-RO": () => import("dayjs/locale/ro"),
   "ru-RU": () => import("dayjs/locale/ru"),
+  "sk-SK": () => import("dayjs/locale/sk"),
+  "sq-AL": () => import("dayjs/locale/sq"),
   "sr-SP": () => import("dayjs/locale/sr"),
   "sv-SE": () => import("dayjs/locale/sv"),
   "ta-IN": () => import("dayjs/locale/ta"),
@@ -53,6 +58,7 @@ export const dayjsLocales: Record<string, () => Promise<ILocale>> = {
   "th-TH": () => import("dayjs/locale/th"),
   "tr-TR": () => import("dayjs/locale/tr"),
   "uk-UA": () => import("dayjs/locale/uk"),
+  "uz-UZ": () => import("dayjs/locale/uz"),
   "vi-VN": () => import("dayjs/locale/vi"),
   "zh-CN": () => import("dayjs/locale/zh-cn"),
   "zh-TW": () => import("dayjs/locale/zh-tw"),

apps/client/src/libs/lingui.ts

@@ -17,7 +17,8 @@ export async function dynamicActivate(locale: string) {
     if (dayjsLocales[locale]) {
       dayjs.locale(await dayjsLocales[locale]());
     }
-  } catch (error) {
-    console.error(error);
+  } catch {
+    // eslint-disable-next-line lingui/no-unlocalized-strings
+    throw new Error(`Failed to load messages for locale: ${locale}`);
   }
 }