feat: separate links option to reduce section item height

AmruthPillai · Mar 24, 2024 · bf04467 · bf04467
1 parent b23efa7
commit bf04467
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 25 deletions.
diff --git a/apps/artboard/src/pages/artboard.tsx b/apps/artboard/src/pages/artboard.tsx
@@ -52,6 +52,7 @@ export const ArtboardPage = () => {
     document.querySelectorAll(`[data-page]`).forEach((el) => {
       el.classList.toggle("hide-icons", metadata.typography.hideIcons);
       el.classList.toggle("underline-links", metadata.typography.underlineLinks);
+      el.classList.toggle("seperate-links", metadata.typography.separateLinks);
     });
   }, [metadata]);
 

diff --git a/apps/artboard/src/templates/azurill.tsx b/apps/artboard/src/templates/azurill.tsx
@@ -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"
@@ -135,10 +136,41 @@ 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;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, className}: LinkedEntityProps) => {
+  const separateLinks = useArtboardStore((state) => state.resume.metadata.typography.separateLinks);
+
+  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;
@@ -160,6 +192,8 @@ const Section = <T,>({
 }: SectionProps<T>) => {
   if (!section.visible || !section.items.length) return null;
 
+  const separateLinks = useArtboardStore((state) => state.resume.metadata.typography.separateLinks);
+
   return (
     <section id={section.id} className="grid">
       <div className="mb-2 hidden font-bold text-primary group-[.main]:block">
@@ -205,7 +239,7 @@ const Section = <T,>({
                   <p className="text-sm">{keywords.join(", ")}</p>
                 )}
 
-                {url !== undefined && <Link url={url} />}
+                {url !== undefined && separateLinks && <Link url={url} />}
 
                 <div className="absolute left-[-4.5px] top-px hidden size-[8px] rounded-full bg-primary group-[.main]:block" />
               </div>
@@ -255,7 +289,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} className="font-bold"/>
           <div>{item.position}</div>
           <div>{item.location}</div>
           <div className="font-bold">{item.date}</div>
@@ -272,7 +306,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} className="font-bold"/>
           <div>{item.area}</div>
           <div>{item.score}</div>
           <div>{item.studyType}</div>
@@ -291,7 +325,7 @@ const Awards = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.title}</div>
-          <div>{item.awarder}</div>
+          <LinkedEntity name={item.awarder} url={item.url}/>
           <div className="font-bold">{item.date}</div>
         </div>
       )}
@@ -307,7 +341,7 @@ const Certifications = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.name}</div>
-          <div>{item.issuer}</div>
+          <LinkedEntity name={item.issuer} url={item.url}/>
           <div className="font-bold">{item.date}</div>
         </div>
       )}
@@ -347,7 +381,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} className="font-bold"/>
           <div>{item.publisher}</div>
           <div className="font-bold">{item.date}</div>
         </div>
@@ -363,7 +397,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} className="font-bold"/>
           <div>{item.position}</div>
           <div>{item.location}</div>
           <div className="font-bold">{item.date}</div>
@@ -396,7 +430,7 @@ const Projects = () => {
       {(item) => (
         <div>
           <div>
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity name={item.name} url={item.url} className="font-bold"/>
             <div>{item.description}</div>
 
             <div className="font-bold">{item.date}</div>
@@ -414,7 +448,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} className="font-bold"/>
           <div>{item.description}</div>
         </div>
       )}
@@ -435,7 +469,7 @@ const Custom = ({ id }: { id: string }) => {
       {(item) => (
         <div>
           <div>
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity name={item.name} url={item.url} className="font-bold"/>
             <div>{item.description}</div>
 
             <div className="font-bold">{item.date}</div>

diff --git a/apps/artboard/src/templates/bronzor.tsx b/apps/artboard/src/templates/bronzor.tsx
@@ -7,6 +7,7 @@ import {
   Experience,
   Interest,
   Language,
+  Metadata,
   Profile,
   Project,
   Publication,
@@ -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"
@@ -126,10 +128,41 @@ 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;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, className}: LinkedEntityProps) => {
+  const separateLinks = useArtboardStore((state) => state.resume.metadata.typography.separateLinks);
+
+  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;
@@ -151,6 +184,8 @@ const Section = <T,>({
 }: SectionProps<T>) => {
   if (!section.visible || !section.items.length) return null;
 
+  const separateLinks = useArtboardStore((state) => state.resume.metadata.typography.separateLinks);
+
   return (
     <section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
       <div>
@@ -173,7 +208,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 && separateLinks && <Link url={url} />}
                 </div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
@@ -233,7 +268,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} className="font-bold"/>
             <div>{item.position}</div>
           </div>
 
@@ -255,10 +290,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} 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>
@@ -279,7 +314,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}/>
           </div>
 
           <div className="shrink-0 text-right">
@@ -300,7 +335,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} className="font-bold"/>
           </div>
 
           <div className="shrink-0 text-right">
@@ -345,7 +380,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} className="font-bold"/>
             <div>{item.publisher}</div>
           </div>
 
@@ -366,7 +401,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} className="font-bold"/>
             <div>{item.position}</div>
           </div>
 
@@ -403,7 +438,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} className="font-bold"/>
             <div>{item.description}</div>
           </div>
 
@@ -423,7 +458,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} className="font-bold"/>
           <div>{item.description}</div>
         </div>
       )}
@@ -444,7 +479,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} className="font-bold"/>
             <div>{item.description}</div>
           </div>
 

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/typography.tsx b/apps/client/src/pages/builder/sidebars/right/sections/typography.tsx
@@ -189,6 +189,17 @@ export const TypographySection = () => {
             />
             <Label htmlFor="metadata.typography.underlineLinks">{t`Underline Links`}</Label>
           </div>
+
+          <div className="flex items-center gap-x-4 py-2">
+            <Switch
+              id="metadata.typography.separateLinks"
+              checked={typography.separateLinks}
+              onCheckedChange={(checked) => {
+                setValue("metadata.typography.separateLinks", checked);
+              }}
+            />
+            <Label htmlFor="metadata.typography.separateLinks">{t`Separate Links`}</Label>
+          </div>
         </div>
       </main>
     </section>

diff --git a/libs/schema/src/metadata/index.ts b/libs/schema/src/metadata/index.ts
@@ -38,6 +38,7 @@ export const metadataSchema = z.object({
     lineHeight: z.number().default(1.5),
     hideIcons: z.boolean().default(false),
     underlineLinks: z.boolean().default(true),
+    separateLinks: z.boolean().default(true),
   }),
   notes: z.string().default(""),
 });
@@ -76,6 +77,7 @@ export const defaultMetadata: Metadata = {
     lineHeight: 1.5,
     hideIcons: false,
     underlineLinks: true,
+    separateLinks: true,
   },
   notes: "",
 };
diff --git a/libs/schema/src/sample.ts b/libs/schema/src/sample.ts
@@ -321,6 +321,7 @@ export const sampleResume: ResumeData = {
       lineHeight: 1.75,
       hideIcons: false,
       underlineLinks: true,
+      separateLinks: true,
     },
     notes: "",
   },