Skip to content

Commit

Permalink
Merge pull request #1823 from jzaehrin/feat/separate-links
Browse files Browse the repository at this point in the history 
feat: separate links option to reduce section item height
  • Loading branch information
@AmruthPillai
AmruthPillai committed May 20, 2024
2 parents 73b29f7 + fe550cc commit 0ee0b6b
Show file tree
Hide file tree
Showing 16 changed files with 553 additions and 149 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/lint-test-build.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ jobs:
- name: Setup pnpm
uses: pnpm/action-setup@v3.0.0
with:
version: 9.1.0
version: 9.1.1

- name: Setup Node.js
uses: actions/setup-node@v4.0.2
with:
cache: "pnpm"
node-version: 20.12.2
node-version: 20.13.1

- name: Install Dependencies
run: pnpm install --frozen-lockfile
Expand Down
57 changes: 44 additions & 13 deletions apps/artboard/src/templates/azurill.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,16 +117,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"
Expand All @@ -135,10 +136,40 @@ 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) => {
if (!separateLinks && isUrl(url.href)) {
return (
<Link
url={url}
label={name}
icon={
<i className="ph ph-bold ph-globe text-primary" />
}
iconOnRight={true}
className={className}
/>
);
} else {
return (
<div className={className}>
{name}
</div>
);
}
};

type SectionProps<T> = {
section: SectionWithItem<T> | CustomSectionGroup;
children?: (item: T) => React.ReactNode;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -255,7 +286,7 @@ 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>
Expand All @@ -272,7 +303,7 @@ 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>
Expand All @@ -291,7 +322,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>
)}
Expand All @@ -303,11 +334,11 @@ const Certifications = () => {
const section = useArtboardStore((state) => state.resume.sections.certifications);

return (
<Section<Certification> section={section} urlKey="url" summaryKey="summary">
<Section<Certification> section={section} urlKey="url" summaryKey="summary">
{(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>
)}
Expand Down Expand Up @@ -347,7 +378,7 @@ 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>
Expand All @@ -363,7 +394,7 @@ 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>
Expand Down Expand Up @@ -396,7 +427,7 @@ 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>
Expand All @@ -414,7 +445,7 @@ 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>
)}
Expand All @@ -435,7 +466,7 @@ 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>
Expand Down
58 changes: 45 additions & 13 deletions apps/artboard/src/templates/bronzor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Experience,
Interest,
Language,
Metadata,
Profile,
Project,
Publication,
Expand Down Expand Up @@ -108,16 +109,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"
Expand All @@ -126,10 +128,40 @@ 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) => {
if (!separateLinks && isUrl(url.href)) {
return (
<Link
url={url}
label={name}
icon={
<i className="ph ph-bold ph-globe text-primary" />
}
iconOnRight={true}
className={className}
/>
);
} else {
return (
<div className={className}>
{name}
</div>
);
}
};

type SectionProps<T> = {
section: SectionWithItem<T> | CustomSectionGroup;
children?: (item: T) => React.ReactNode;
Expand Down Expand Up @@ -173,7 +205,7 @@ 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) && (
Expand Down Expand Up @@ -233,7 +265,7 @@ 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>

Expand All @@ -255,10 +287,10 @@ 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>
</div>

<div className="shrink-0 text-right">
<div className="font-bold">{item.date}</div>
Expand All @@ -279,7 +311,7 @@ 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">
Expand All @@ -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">
Expand Down Expand Up @@ -345,7 +377,7 @@ 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>

Expand All @@ -366,7 +398,7 @@ 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>

Expand Down Expand Up @@ -403,7 +435,7 @@ 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>

Expand All @@ -423,7 +455,7 @@ 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>
)}
Expand All @@ -444,7 +476,7 @@ 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>

Expand Down
Loading

0 comments on commit 0ee0b6b

Please sign in to comment.