Center and add icons on every link

ivancea · Oct 27, 2023 · 6f1c767 · 6f1c767
1 parent a23ca02
commit 6f1c767
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 72 deletions.
diff --git a/CV/snapshot.html b/CV/snapshot.html
diff --git a/lib/generators/leftColumn/contactItemGenerator.ts b/lib/generators/leftColumn/contactItemGenerator.ts
@@ -1,25 +1,17 @@
-import { assets } from "../../assets";
+import { makeLink } from "../../links";
 import { generatorFrom } from "../../utils";
 
 export const generateContactItem = generatorFrom(async function* (contactItem: {
   type: string;
   URL: string;
 }) {
-  yield `
-    <div class="left-column__contact-item">
-      <a class="left-column__contact-item-link" href="${contactItem.URL}" target="_blank">
-      `;
-
-  if (contactItem.type === "github") {
-    yield `<img src="${await assets.githubIcon}" alt="GitHub">`;
-  } else if (contactItem.type === "twitter") {
-    yield `<img src="${await assets.twitterIcon}" alt="Twitter">`;
-  } else if (contactItem.type === "linkedin") {
-    yield `<img src="${await assets.linkedinIcon}" alt="LinkedIn">`;
-  }
+  const link = await makeLink(contactItem.URL);
 
   yield `
-        <span>${decodeURI(contactItem.URL.replace(/https?:\/\//, ""))}</span>
+    <div class="left-column__contact-item">
+      <a class="left-column__contact-item-link" href="${link.url}" target="_blank">
+        <img src="${link.icon}" alt="${link.alt}">
+        <span>${link.text}</span>
       </a>
     </div>
   `;

diff --git a/lib/generators/rightColumn/highlightsGenerator.ts b/lib/generators/rightColumn/highlightsGenerator.ts
@@ -4,6 +4,7 @@ import { Highlight } from "../../mac";
 import { generatorFrom, sortByDates } from "../../utils";
 import { generateSkills } from "../common/skillsGenerator";
 import { generateTypeLabels } from "../common/typeLabelGenerator";
+import { makeLink } from "../../links";
 
 export const generateHighlights = generatorFrom(async function* (highlights: Highlight[]) {
   if (highlights.length) {
@@ -23,10 +24,7 @@ export const generateHighlights = generatorFrom(async function* (highlights: Hig
         imageAlt = details.image.alt;
       }
 
-      let urlText = "";
-      if (details.URL) {
-        urlText = `${decodeURI(details.URL.replace(/https?:\/\//, ""))}`;
-      }
+      const link = await makeLink(details.URL);
 
       yield `
         <div class="right-column__highlight">
@@ -38,17 +36,15 @@ export const generateHighlights = generatorFrom(async function* (highlights: Hig
             </div>
           </div>
           ${
-            urlText || details.description
+            link || details.description
               ? `
             <div class="right-column__highlight-details">
               ${
-                urlText
+                link
                   ? `
-                <a class="right-column__highlight-details-url" href="${
-                  details.URL
-                }" target="_blank">
-                  <img class="right-column__highlight-details-url-icon" src="${await assets.linkIcon}" alt="Link" />
-                  ${urlText}
+                <a class="right-column__highlight-details-url" href="${link.url}" target="_blank">
+                  <img class="right-column__highlight-details-url-icon" src="${link.icon}" alt="${link.alt}" />
+                  ${link.text}
                 </a>
               `
                   : ""
@@ -69,7 +65,7 @@ export const generateHighlights = generatorFrom(async function* (highlights: Hig
           ${
             highlight.publishingDate
               ? `<div class="right-column__highlight-date">${new Date(
-                  highlight.publishingDate
+                  highlight.publishingDate,
                 ).toLocaleDateString("en-US", { month: "2-digit", year: "numeric" })}</div>`
               : ""
           }

diff --git a/lib/generators/rightColumn/jobsGenerator.ts b/lib/generators/rightColumn/jobsGenerator.ts
@@ -1,4 +1,5 @@
 import { assets } from "../../assets";
+import { makeLink } from "../../links";
 import { Job } from "../../mac";
 import { generatorFrom, sortByDates } from "../../utils";
 import { generateRoles } from "../common/rolesGenerator";
@@ -36,10 +37,12 @@ export const generateJobs = generatorFrom(async function* (jobs: Job[]) {
       `;
 
       if (organization.URL) {
+        const link = await makeLink(organization.URL);
+
         yield `
-          <a class="right-column__job-organization-url" href="${organization.URL}" target="_blank">
-            <img class="right-column__job-organization-url-icon" src="${await assets.linkIcon}" alt="Link">
-            ${decodeURI(organization.URL.replace(/https?:\/\//, ""))}
+          <a class="right-column__job-organization-url" href="${link.url}" target="_blank">
+            <img class="right-column__job-organization-url-icon" src="${link.icon}" alt="${link.alt}">
+            ${link.text}
           </a>
         `;
       }

diff --git a/lib/generators/rightColumn/projectsGenerator.ts b/lib/generators/rightColumn/projectsGenerator.ts
@@ -4,6 +4,7 @@ import { Project } from "../../mac";
 import { generatorFrom, sortByDates } from "../../utils";
 import { generateRoles } from "../common/rolesGenerator";
 import { generateTypeLabels } from "../common/typeLabelGenerator";
+import { makeLink } from "../../links";
 
 export const generateProjects = generatorFrom(async function* (projects: Project[]) {
   if (projects.length) {
@@ -23,10 +24,7 @@ export const generateProjects = generatorFrom(async function* (projects: Project
         imageAlt = details.image.alt as string;
       }
 
-      let urlText = "";
-      if (details?.URL) {
-        urlText = `${decodeURI(details.URL.replace(/https?:\/\//, ""))}`;
-      }
+      const link = await makeLink(details?.URL);
 
       yield `
         <div class="right-column__project">
@@ -38,15 +36,15 @@ export const generateProjects = generatorFrom(async function* (projects: Project
             </div>
           </div>
           ${
-            urlText || details?.description
+            link || details?.description
               ? `
             <div class="right-column__project-details">
               ${
-                urlText
+                link
                   ? `
-                <a class="right-column__project-details-url" href="${details?.URL}" target="_blank">
-                  <img class="right-column__project-details-url-icon" src="${await assets.linkIcon}" alt="Link" />
-                  ${urlText}
+                <a class="right-column__project-details-url" href="${link.url}" target="_blank">
+                  <img class="right-column__project-details-url-icon" src="${link.icon}" alt="${link.alt}" />
+                  ${link.text}
                 </a>
               `
                   : ""

diff --git a/lib/generators/rightColumn/studiesGenerator.ts b/lib/generators/rightColumn/studiesGenerator.ts
@@ -4,6 +4,7 @@ import { Study } from "../../mac";
 import { generatorFrom, sortByDates } from "../../utils";
 import { generateSkills } from "../common/skillsGenerator";
 import { generateTypeLabels } from "../common/typeLabelGenerator";
+import { makeLink } from "../../links";
 
 export const generateStudies = generatorFrom(async function* (studies: Study[]) {
   if (studies.length) {
@@ -34,10 +35,12 @@ export const generateStudies = generatorFrom(async function* (studies: Study[])
       `;
 
       if (institution?.URL) {
+        const link = await makeLink(institution.URL);
+
         yield `
-          <a class="right-column__study-institution-url" href="${institution.URL}" target="_blank">
-            <img class="right-column__study-institution-url-icon" src="${await assets.linkIcon}" alt="Link">
-            ${decodeURI(institution.URL.replace(/https?:\/\//, ""))}
+          <a class="right-column__study-institution-url" href="${link.url}" target="_blank">
+            <img class="right-column__study-institution-url-icon" src="${link.icon}" alt="${link.alt}">
+            ${link.text}
           </a>
         `;
       }
@@ -51,16 +54,16 @@ export const generateStudies = generatorFrom(async function* (studies: Study[])
                 month: "2-digit",
                 year: "numeric",
               })} ${
-        study.finishDate
-          ? " - " +
-            new Date(study.finishDate).toLocaleDateString("en-US", {
-              month: "2-digit",
-              year: "numeric",
-            })
-          : study.studyType !== "certification"
-          ? " - Present"
-          : ""
-      }
+                study.finishDate
+                  ? " - " +
+                    new Date(study.finishDate).toLocaleDateString("en-US", {
+                      month: "2-digit",
+                      year: "numeric",
+                    })
+                  : study.studyType !== "certification"
+                  ? " - Present"
+                  : ""
+              }
             </div>
             <div class="common__role-title">
               ${study.name}

diff --git a/lib/links.ts b/lib/links.ts
@@ -0,0 +1,50 @@
+import { assets } from "./assets";
+
+type LinkData = {
+  url: string;
+  text: string;
+  icon: string;
+  alt: string;
+};
+
+export async function makeLink(url: string): Promise<LinkData>;
+export async function makeLink(url?: string): Promise<LinkData | undefined>;
+export async function makeLink(url?: string): Promise<LinkData | undefined> {
+  if (!url) {
+    return undefined;
+  }
+
+  return {
+    url: url,
+    text: `${decodeURI(url.replace(/https?:\/\//, ""))}`,
+    ...(await iconForUrl(url)),
+  };
+}
+
+async function iconForUrl(url: string) {
+  if (url.includes("github.com")) {
+    return {
+      icon: await assets.githubIcon,
+      alt: "GitHub",
+    };
+  }
+
+  if (url.includes("twitter.com")) {
+    return {
+      icon: await assets.twitterIcon,
+      alt: "Twitter",
+    };
+  }
+
+  if (url.includes("linkedin.com")) {
+    return {
+      icon: await assets.linkedinIcon,
+      alt: "LinkedIn",
+    };
+  }
+
+  return {
+    icon: await assets.linkIcon,
+    alt: "Link",
+  };
+}
diff --git a/sass/right-column.scss b/sass/right-column.scss
@@ -70,14 +70,15 @@
         }
 
         .right-column__job-organization-url {
-          display: block;
+          @include linear-layout(row, 1em, $center: true);
+
           font-size: 0.8em;
           text-decoration: none;
           color: #55a;
 
           .right-column__job-organization-url-icon {
-            width: 1em;
-            height: 1em;
+            width: 1.2em;
+            height: 1.2em;
             object-fit: contain;
           }
         }
@@ -132,14 +133,15 @@
         }
 
         .right-column__study-institution-url {
-          display: block;
+          @include linear-layout(row, 1em, $center: true);
+
           font-size: 0.8em;
           text-decoration: none;
           color: #55a;
 
           .right-column__study-institution-url-icon {
-            width: 1em;
-            height: 1em;
+            width: 1.2em;
+            height: 1.2em;
             object-fit: contain;
           }
         }
@@ -195,13 +197,15 @@
         margin-bottom: 1em;
 
         .right-column__project-details-url {
+          @include linear-layout(row, 1em, $center: true);
+
           font-size: 0.8em;
           text-decoration: none;
           color: #55a;
 
           .right-column__project-details-url-icon {
-            width: 1em;
-            height: 1em;
+            width: 1.2em;
+            height: 1.2em;
             object-fit: contain;
           }
         }
@@ -262,13 +266,15 @@
         margin-bottom: 1em;
 
         .right-column__highlight-details-url {
+          @include linear-layout(row, 1em, $center: true);
+
           font-size: 0.8em;
           text-decoration: none;
           color: #55a;
 
           .right-column__highlight-details-url-icon {
-            width: 1em;
-            height: 1em;
+            width: 1.2em;
+            height: 1.2em;
             object-fit: contain;
           }
         }