* added lucide-react dependencies to provide a base icon library

* Add icon to links instead of underlined content

Author: toggm

package.json

@@ -47,6 +47,7 @@
     "jsonwebtoken": "^9.0.2",
     "ky": "^1.8.1",
     "lodash-es": "^4.17.21",
+    "lucide-react": "^0.511.0",
     "next": "15.3.2",
     "nodemailer": "^7.0.3",
     "pagedjs": "^0.4.3",

src/app/cv/[id]/(lib)/components/highlight.tsx

@@ -1,9 +1,10 @@
 import { PayloadLexicalReactRenderer } from '@/lib/lexical-render/src/payloadLexicalReactRenderer'
 import { IconHighlight } from '@/app/cv/[id]/(lib)/icon/highlight'
+import { ReactNode } from 'react'
 
 type Props = {
-  title: string | undefined | null
-  subtitle: string | undefined | null
+  title: string | undefined | null | ReactNode
+  subtitle: string | undefined | null | ReactNode
   description: any
   borderLeftColor?: string
 }

src/app/cv/[id]/(lib)/components/link.tsx

@@ -0,0 +1,24 @@
+import { ExternalLink } from 'lucide-react'
+
+type OptionalLinkProps = {
+  name: string
+  url: string | undefined | null
+}
+
+export const OptionalLink: React.FC<OptionalLinkProps> = ({ name, url }) => {
+  return url ? <LinkWithIcon url={url} name={name} /> : <>{name}</>
+}
+
+type LinkWithIconProps = {
+  name: string
+  url: string
+}
+
+export const LinkWithIcon: React.FC<LinkWithIconProps> = ({ name, url }) => {
+  return (
+    <a href={url} className={'flex'} target="_blank">
+      {name}
+      <ExternalLink className={'pl-0.5'} size={16} />
+    </a>
+  )
+}

src/app/cv/[id]/default_page.scss

@@ -42,11 +42,11 @@ body {
 
 a {
   &:link {
-    @apply underline;
+    @apply no-underline;
     color: black;
   }
   &:hover {
-    @apply no-underline;
+    @apply underline;
   }
   &:focus {
   }

src/app/cv/[id]/default_page.tsx

@@ -9,6 +9,7 @@ import { CvPageProps } from './page'
 import { filterEmptyLexicalNodes, formatDate, fromToYear, hasLexicalNodes } from './utilities'
 import * as process from 'node:process'
 import './default_page.scss'
+import { LinkWithIcon, OptionalLink } from './(lib)/components/link'
 
 const DefaultPage: React.FC<CvPageProps> = async ({
   cv,
@@ -103,9 +104,7 @@ const DefaultPage: React.FC<CvPageProps> = async ({
                 <h3>{I18nCollection.fieldLabel.links[locale]}</h3>
                 {cv.links?.map((link) => (
                   <div key={link.id}>
-                    <a href={link.url} target="_blank">
-                      {capitalize(link.platform)}
-                    </a>
+                    <LinkWithIcon name={capitalize(link.platform)} url={link.url} />
                   </div>
                 ))}
               </div>
@@ -134,12 +133,7 @@ const DefaultPage: React.FC<CvPageProps> = async ({
                       <tr>
                         <td className={'no-page-break'}>
                           <p className={'font-normal'}>
-                            {item.link && (
-                              <a href={item.link} target="_blank">
-                                {item.institution}
-                              </a>
-                            )}
-                            {!item.link && item.institution}
+                            <OptionalLink url={item.link} name={item.institution} />
                           </p>
                           <p className={'small'}>
                             {fromToYear(locale, item.fromYear, item.toYear)}
@@ -164,12 +158,7 @@ const DefaultPage: React.FC<CvPageProps> = async ({
                       <tr>
                         <td className={'no-page-break'}>
                           <p className={'font-normal'}>
-                            {item.link && (
-                              <a href={item.link} target="_blank">
-                                {item.name}
-                              </a>
-                            )}
-                            {!item.link && item.name}
+                            <OptionalLink url={item.link} name={item.name} />
                           </p>
                           <p className={'small'}>{fromToYear(locale, item.toYear, item.toYear)}</p>
                           <div className={'space-y-1'}>
@@ -192,12 +181,7 @@ const DefaultPage: React.FC<CvPageProps> = async ({
                       <tr>
                         <td className={'no-page-break'}>
                           <p className={'font-normal'}>
-                            {item.link && (
-                              <a href={item.link} target="_blank">
-                                {item.name}
-                              </a>
-                            )}
-                            {!item.link && item.name}
+                            <OptionalLink url={item.link} name={item.name} />
                           </p>
                           <p className={'small'}>{fromToYear(locale, item.toYear, item.toYear)}</p>
                           <div className={'space-y-1'}>
@@ -356,12 +340,10 @@ const DefaultPage: React.FC<CvPageProps> = async ({
                         <tr>
                           <td className={'no-page-break'}>
                             <p className={'mb-0.5 font-normal'}>
-                              {(item.project as Project).link && (
-                                <a href={(item.project as Project).link || ''} target="_blank">
-                                  {(item.project as Project).name}
-                                </a>
-                              )}
-                              {!(item.project as Project).link && (item.project as Project).name}
+                              <OptionalLink
+                                url={(item.project as Project).link}
+                                name={(item.project as Project).name || ''}
+                              />
                             </p>
                             <p className={'small mb-0.5'}>{(item.company as Company).name}</p>
                             <p className={'small mb-0.5'}>

yarn.lock

@@ -5308,6 +5308,7 @@ __metadata:
     jsonwebtoken: "npm:^9.0.2"
     ky: "npm:^1.8.1"
     lodash-es: "npm:^4.17.21"
+    lucide-react: "npm:^0.511.0"
     next: "npm:15.3.2"
     nodemailer: "npm:^7.0.3"
     pagedjs: "npm:^0.4.3"
@@ -8392,6 +8393,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.511.0":
+  version: 0.511.0
+  resolution: "lucide-react@npm:0.511.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/d712f4215a2e2563e145a6946f0e2be2cf6a081ac52d832e521996ba1c1fda91881445a4e78affa0bde520b3ad9f25ff83b8097f9baf2e192ce8f732d78e1402
+  languageName: node
+  linkType: hard
+
 "make-fetch-happen@npm:^14.0.3":
   version: 14.0.3
   resolution: "make-fetch-happen@npm:14.0.3"