Add external links to titles with an icon

src/components/ExternalLink.tsx

@@ -0,0 +1,20 @@
+import { Link, LinkProps } from '@mui/material'
+import { mergeSxProps } from '../utils'
+import { ExternalLinkIcon } from '../icons/ExternalLinkIcon'
+
+
+export const ExternalLink = ({ children, sx, ...rest }: LinkProps) => (
+  <Link
+    target="_blank"
+    {...rest}
+    sx={mergeSxProps(sx, {
+      color: 'unset',
+      textDecoration: 'inherit',
+      '&:any-link:hover': { color: 'inherit' },
+      '&:any-link': { color: 'inherit' },
+    })}
+  >
+    {children}
+    <ExternalLinkIcon sx={{ position: 'relative', bottom: '-0.05em', ml: '0.5em', fontSize: '80%' }} />
+  </Link>
+)

src/configs/work.json

@@ -1,6 +1,7 @@
 {
   "Vacuumlabs": {
     "title": "Software Engineer",
+    "companyLink": "https://vacuumlabs.com/about/",
     "from": "Jan 2021",
     "to": "Dec 2022",
     "description": [

src/configs/work.yaml

@@ -1,5 +1,6 @@
 Vacuumlabs:
   title: Software Engineer
+  companyLink: https://vacuumlabs.com/about/
   from: Jan 2021
   to: Dec 2022
   description:

src/icons/ExternalLinkIcon.tsx

@@ -0,0 +1,21 @@
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+
+export const ExternalLinkIcon = (props: SvgIconProps) => (
+  <SvgIcon viewBox="0 -256 1850 1850" {...props}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -256 1850 1850"
+      id="svg3025"
+    >
+      <g
+        transform="matrix(1,0,0,-1,30.372881,1426.9492)"
+        id="g3027">
+        <path
+          d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z"
+          id="path3029"
+          style={{ fill:'currentColor' }} />
+      </g>
+    </svg>
+  </SvgIcon>
+)

src/pages/LandingPage/EducationItem.tsx

@@ -1,5 +1,6 @@
 import { Accordion, AccordionDetails, AccordionSummary, Box, Card, Typography, accordionSummaryClasses } from '@mui/material'
 import { ListFromMd } from '../../components/ListFromMd'
+import { ExternalLink } from '../../components/ExternalLink'
 
 
 export type EducationDetails = {
@@ -18,7 +19,7 @@ type EducationItemProps = {
 
 export const EducationItem = ({ details }: EducationItemProps) => (
   <Card>
-    <Typography variant="h4">{details.name}</Typography>
+    <Typography variant="h4">{details.website ? <ExternalLink href={details.website}>{details.name}</ExternalLink> : details.name}</Typography>
     <Typography variant="h6">{details.subtitle}</Typography>
     <Typography variant="overline">{details.from ? `${details.from}–` : ''}{details.to}</Typography>
     <ListFromMd items={details.description} />

src/pages/LandingPage/ExperienceItem.tsx

@@ -1,5 +1,6 @@
 import { Card, Typography } from '@mui/material'
 import { ListFromMd } from '../../components/ListFromMd'
+import { ExternalLink } from '../../components/ExternalLink'
 
 
 export type WorkExperience = {
@@ -17,7 +18,13 @@ type ExperienceItemProps = {
 
 export const ExperienceItem = ({ experience }: ExperienceItemProps) => (
   <Card>
-    <Typography variant="h5" color="primary">{experience.title} &mdash; {experience.companyName}</Typography>
+    <Typography variant="h5" color="primary">
+      {experience.title} &mdash; {
+        experience.companyLink
+          ? <ExternalLink href={experience.companyLink}>{experience.companyName}</ExternalLink>
+          : experience.companyName
+      }
+    </Typography>
     <Typography variant="overline">{experience.from}&ndash;{experience.to}</Typography>
     <ListFromMd items={experience.description} />
   </Card>