From 1914ebb9ae19f675950a270ac6ba97b030151c04 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Fri, 2 Dec 2022 13:55:56 +0100
Subject: [PATCH] fix links in PDF

---
 client/templates/Gengar/widgets/Section.tsx |  4 ++--
 client/templates/Kakuna/widgets/Section.tsx |  9 +++++----
 client/templates/Onyx/widgets/Section.tsx   |  4 ++--
 client/templates/shared/DataDisplay.tsx     | 11 +++++++++--
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/client/templates/Gengar/widgets/Section.tsx b/client/templates/Gengar/widgets/Section.tsx
index 252d8805..356be8e2 100644
--- a/client/templates/Gengar/widgets/Section.tsx
+++ b/client/templates/Gengar/widgets/Section.tsx
@@ -10,7 +10,7 @@ import { useAppSelector } from '@/store/hooks';
 import { SectionProps } from '@/templates/sectionMap';
 import DataDisplay from '@/templates/shared/DataDisplay';
 import { formatDateString } from '@/utils/date';
-import { addHttp, parseListItemPath } from '@/utils/template';
+import { parseListItemPath } from '@/utils/template';
 
 import Heading from './Heading';
 
@@ -90,7 +90,7 @@ const Section: React.FC<SectionProps> = ({
               {summary && <Markdown>{summary}</Markdown>}
 
               {url && (
-                <DataDisplay icon={<Link />} link={addHttp(url)}>
+                <DataDisplay icon={<Link />} link={url}>
                   {url}
                 </DataDisplay>
               )}
diff --git a/client/templates/Kakuna/widgets/Section.tsx b/client/templates/Kakuna/widgets/Section.tsx
index 1a227c79..e94bfc34 100644
--- a/client/templates/Kakuna/widgets/Section.tsx
+++ b/client/templates/Kakuna/widgets/Section.tsx
@@ -1,4 +1,4 @@
-import { Email, Phone } from '@mui/icons-material';
+import { Email, Link, Phone } from '@mui/icons-material';
 import { ListItem, Section as SectionType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
@@ -8,8 +8,9 @@ import { useMemo } from 'react';
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
 import { SectionProps } from '@/templates/sectionMap';
+import DataDisplay from '@/templates/shared/DataDisplay';
 import { formatDateString } from '@/utils/date';
-import { addHttp, parseListItemPath } from '@/utils/template';
+import { parseListItemPath } from '@/utils/template';
 
 import BadgeDisplay from './BadgeDisplay';
 import Heading from './Heading';
@@ -87,9 +88,9 @@ const Section: React.FC<SectionProps> = ({
 
               {url && (
                 <div className="inline-flex justify-center">
-                  <a href={addHttp(url)} target="_blank" rel="noreferrer">
+                  <DataDisplay link={url} icon={<Link />}>
                     {url}
-                  </a>
+                  </DataDisplay>
                 </div>
               )}
 
diff --git a/client/templates/Onyx/widgets/Section.tsx b/client/templates/Onyx/widgets/Section.tsx
index ce85d953..45ff3c66 100644
--- a/client/templates/Onyx/widgets/Section.tsx
+++ b/client/templates/Onyx/widgets/Section.tsx
@@ -10,7 +10,7 @@ import { useAppSelector } from '@/store/hooks';
 import { SectionProps } from '@/templates/sectionMap';
 import DataDisplay from '@/templates/shared/DataDisplay';
 import { formatDateString } from '@/utils/date';
-import { addHttp, parseListItemPath } from '@/utils/template';
+import { parseListItemPath } from '@/utils/template';
 
 import Heading from './Heading';
 
@@ -90,7 +90,7 @@ const Section: React.FC<SectionProps> = ({
               {summary && <Markdown>{summary}</Markdown>}
 
               {url && (
-                <DataDisplay icon={<Link />} link={addHttp(url)} className="text-xs">
+                <DataDisplay icon={<Link />} link={url} className="text-xs">
                   {url}
                 </DataDisplay>
               )}
diff --git a/client/templates/shared/DataDisplay.tsx b/client/templates/shared/DataDisplay.tsx
index 421a9db2..b3720a9d 100644
--- a/client/templates/shared/DataDisplay.tsx
+++ b/client/templates/shared/DataDisplay.tsx
@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import isEmpty from 'lodash/isEmpty';
 
+import { addHttp } from '@/utils/template';
+
 type Props = {
   icon?: JSX.Element;
   link?: string;
@@ -11,11 +13,16 @@ type Props = {
 const DataDisplay: React.FC<React.PropsWithChildren<Props>> = ({ icon, link, className, textClassName, children }) => {
   if (isEmpty(children)) return null;
 
-  if (!isEmpty(link)) {
+  if (link && !isEmpty(link)) {
     return (
       <div className={clsx('inline-flex items-center gap-1', className)}>
         {icon}
-        <a href={link} target="_blank" rel="noreferrer" className="{textClassName}">
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href={addHttp(link)}
+          className={clsx('underline underline-offset-2', textClassName)}
+        >
           {children}
         </a>
       </div>