fix links in PDF

This commit is contained in:
Amruth Pillai
2022-12-02 13:55:56 +01:00
parent 686dba90c9
commit 1914ebb9ae
4 changed files with 18 additions and 10 deletions

View File

@ -10,7 +10,7 @@ import { useAppSelector } from '@/store/hooks';
import { SectionProps } from '@/templates/sectionMap'; import { SectionProps } from '@/templates/sectionMap';
import DataDisplay from '@/templates/shared/DataDisplay'; import DataDisplay from '@/templates/shared/DataDisplay';
import { formatDateString } from '@/utils/date'; import { formatDateString } from '@/utils/date';
import { addHttp, parseListItemPath } from '@/utils/template'; import { parseListItemPath } from '@/utils/template';
import Heading from './Heading'; import Heading from './Heading';
@ -90,7 +90,7 @@ const Section: React.FC<SectionProps> = ({
{summary && <Markdown>{summary}</Markdown>} {summary && <Markdown>{summary}</Markdown>}
{url && ( {url && (
<DataDisplay icon={<Link />} link={addHttp(url)}> <DataDisplay icon={<Link />} link={url}>
{url} {url}
</DataDisplay> </DataDisplay>
)} )}

View File

@ -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 { ListItem, Section as SectionType } from '@reactive-resume/schema';
import get from 'lodash/get'; import get from 'lodash/get';
import isArray from 'lodash/isArray'; import isArray from 'lodash/isArray';
@ -8,8 +8,9 @@ import { useMemo } from 'react';
import Markdown from '@/components/shared/Markdown'; import Markdown from '@/components/shared/Markdown';
import { useAppSelector } from '@/store/hooks'; import { useAppSelector } from '@/store/hooks';
import { SectionProps } from '@/templates/sectionMap'; import { SectionProps } from '@/templates/sectionMap';
import DataDisplay from '@/templates/shared/DataDisplay';
import { formatDateString } from '@/utils/date'; import { formatDateString } from '@/utils/date';
import { addHttp, parseListItemPath } from '@/utils/template'; import { parseListItemPath } from '@/utils/template';
import BadgeDisplay from './BadgeDisplay'; import BadgeDisplay from './BadgeDisplay';
import Heading from './Heading'; import Heading from './Heading';
@ -87,9 +88,9 @@ const Section: React.FC<SectionProps> = ({
{url && ( {url && (
<div className="inline-flex justify-center"> <div className="inline-flex justify-center">
<a href={addHttp(url)} target="_blank" rel="noreferrer"> <DataDisplay link={url} icon={<Link />}>
{url} {url}
</a> </DataDisplay>
</div> </div>
)} )}

View File

@ -10,7 +10,7 @@ import { useAppSelector } from '@/store/hooks';
import { SectionProps } from '@/templates/sectionMap'; import { SectionProps } from '@/templates/sectionMap';
import DataDisplay from '@/templates/shared/DataDisplay'; import DataDisplay from '@/templates/shared/DataDisplay';
import { formatDateString } from '@/utils/date'; import { formatDateString } from '@/utils/date';
import { addHttp, parseListItemPath } from '@/utils/template'; import { parseListItemPath } from '@/utils/template';
import Heading from './Heading'; import Heading from './Heading';
@ -90,7 +90,7 @@ const Section: React.FC<SectionProps> = ({
{summary && <Markdown>{summary}</Markdown>} {summary && <Markdown>{summary}</Markdown>}
{url && ( {url && (
<DataDisplay icon={<Link />} link={addHttp(url)} className="text-xs"> <DataDisplay icon={<Link />} link={url} className="text-xs">
{url} {url}
</DataDisplay> </DataDisplay>
)} )}

View File

@ -1,6 +1,8 @@
import clsx from 'clsx'; import clsx from 'clsx';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { addHttp } from '@/utils/template';
type Props = { type Props = {
icon?: JSX.Element; icon?: JSX.Element;
link?: string; link?: string;
@ -11,11 +13,16 @@ type Props = {
const DataDisplay: React.FC<React.PropsWithChildren<Props>> = ({ icon, link, className, textClassName, children }) => { const DataDisplay: React.FC<React.PropsWithChildren<Props>> = ({ icon, link, className, textClassName, children }) => {
if (isEmpty(children)) return null; if (isEmpty(children)) return null;
if (!isEmpty(link)) { if (link && !isEmpty(link)) {
return ( return (
<div className={clsx('inline-flex items-center gap-1', className)}> <div className={clsx('inline-flex items-center gap-1', className)}>
{icon} {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} {children}
</a> </a>
</div> </div>