add UniservsalLink component #44

ukorvl · Aug 3, 2023 · 7ceaa68 · 7ceaa68
1 parent 75443e4
commit 7ceaa68
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 23 deletions.
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import UniservsalLink from '@/components/UniservsalLink/UniservsalLink';
 
 /**
  * @returns React component.
@@ -9,7 +9,7 @@ export default function NotFound() {
       <h2>Not Found</h2>
       <p>Could not find requested resource</p>
       <p>
-        View <Link href="/blog">all posts</Link>
+        View <UniservsalLink href="/blog">all posts</UniservsalLink>
       </p>
     </div>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import Link from 'next/link';
 import AppearInViewport from '@/components/AppearInViewport/AppearInViewport';
 import MainPageVideoPlayer from '@/components/MainPageVideoPlayer/MainPageVideoPlayer';
+import UniservsalLink from '@/components/UniservsalLink/UniservsalLink';
 
 const containerCn = clsx('relative', 'z-10', 'flex', 'flex-col', 'items-center', 'grow');
 const titleCn = clsx('font-light', 'text-8xl');
@@ -33,12 +33,12 @@ export default function Home() {
           className={exploreCn}
           variants={exploreLinkVariants}
         >
-          <Link
+          <UniservsalLink
             href="/about"
             className={exploreLinkCn}
           >
             EXPLORE
-          </Link>
+          </UniservsalLink>
         </AppearInViewport>
       </div>
       <MainPageVideoPlayer />

diff --git a/components/Footer/Location.tsx b/components/Footer/Location.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import Link from 'next/link';
 import {memo} from 'react';
+import UniservsalLink from '../UniservsalLink/UniservsalLink';
 
 const {NEXT_PUBLIC_LOCATION_ADDRESS_TEXT, NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK} = process.env;
 
@@ -14,13 +14,13 @@ const linkCn = clsx('animated-link');
 function Location() {
   return (
     <div className={containerCn}>
-      <Link
+      <UniservsalLink
         href={NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK ?? ''}
         target="_blank"
         className={linkCn}
       >
         <address className={addressCn}>{NEXT_PUBLIC_LOCATION_ADDRESS_TEXT}</address>
-      </Link>
+      </UniservsalLink>
     </div>
   );
 }

diff --git a/components/Footer/Mail.tsx b/components/Footer/Mail.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import {memo} from 'react';
+import UniservsalLink from '../UniservsalLink/UniservsalLink';
 
 const {NEXT_PUBLIC_CONTACT_EMAIL} = process.env;
 
@@ -12,12 +13,12 @@ const anchorCn = clsx('animated-link');
 function Mail() {
   return (
     <div className={containerCn}>
-      <a
+      <UniservsalLink
         className={anchorCn}
         href={`mailto:${NEXT_PUBLIC_CONTACT_EMAIL}`}
       >
         {NEXT_PUBLIC_CONTACT_EMAIL}
-      </a>
+      </UniservsalLink>
     </div>
   );
 }

diff --git a/components/Menu/SocialLinksList.tsx b/components/Menu/SocialLinksList.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link';
 import {memo} from 'react';
 import clsx from 'clsx';
+import UniservsalLink from '../UniservsalLink/UniservsalLink';
 
 const {NEXT_PUBLIC_FACEBOOK_ADDRESS, NEXT_PUBLIC_INSTAGRAM_ADDRESS, NEXT_PUBLIC_TELEGRAM_ADDRESS} =
   process.env;
@@ -30,14 +30,14 @@ function SocialLinksList() {
   return (
     <div className={containerCn}>
       {linksConfig.map(({title, href}) => (
-        <Link
+        <UniservsalLink
           key={title}
           href={href ?? ''}
           target="_blank"
           className={linkCn}
         >
           {title.toUpperCase()}
-        </Link>
+        </UniservsalLink>
       ))}
     </div>
   );

diff --git a/components/SocialIcons/SocialIcons.tsx b/components/SocialIcons/SocialIcons.tsx
@@ -2,12 +2,12 @@
 
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import clsx from 'clsx';
-import Link from 'next/link';
 import {twMerge} from 'tailwind-merge';
 import {memo} from 'react';
 import {m} from 'framer-motion';
 import iconsConfig from './iconsConfig';
 import AppearInViewport from '../AppearInViewport/AppearInViewport';
+import UniservsalLink from '../UniservsalLink/UniservsalLink';
 
 const iconsCn = clsx(
   'flex',
@@ -54,15 +54,15 @@ function SocialIcons() {
           key={href}
           variants={variants}
         >
-          <Link
+          <UniservsalLink
             href={href}
             target={target}
           >
             <FontAwesomeIcon
               className={twMerge(iconCn, className)}
               {...rest}
             />
-          </Link>
+          </UniservsalLink>
         </m.div>
       ))}
     </AppearInViewport>

diff --git a/components/TopMenu/TopMenu.tsx b/components/TopMenu/TopMenu.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import Link from 'next/link';
 import clsx from 'clsx';
 import {m} from 'framer-motion';
 import {menuItemsConfig, socialLinksConfig} from './topMenuCongif';
 import Menu from '../Menu/Menu';
+import UniservsalLink from '../UniservsalLink/UniservsalLink';
 
 const variants = {
   open: {
@@ -37,24 +37,24 @@ export default function TopMenu() {
           className={itemsListCn}
         >
           <Menu.Item className={homeMenuItem}>
-            <Link
+            <UniservsalLink
               href="/"
               className={linkCn}
             >
               SALSAVIVA
-            </Link>
+            </UniservsalLink>
           </Menu.Item>
           {menuItemsConfig.map(({href, text, bgImgPath}, idx) => (
             <Menu.Item
               key={idx}
               bgImgPath={bgImgPath}
             >
-              <Link
+              <UniservsalLink
                 href={href}
                 className={linkCn}
               >
                 {text}
-              </Link>
+              </UniservsalLink>
             </Menu.Item>
           ))}
         </m.ul>
@@ -67,13 +67,13 @@ export default function TopMenu() {
               key={idx}
               className={socialLinkMenuItem}
             >
-              <Link
+              <UniservsalLink
                 href={href}
                 className={linkCn}
                 target="_blank"
               >
                 {text.toUpperCase()}
-              </Link>
+              </UniservsalLink>
             </Menu.Item>
           ))}
         </m.ul>

diff --git a/components/UniservsalLink/UniservsalLink.tsx b/components/UniservsalLink/UniservsalLink.tsx
@@ -0,0 +1,51 @@
+import Link, {LinkProps} from 'next/link';
+import {AnchorHTMLAttributes, forwardRef} from 'react';
+
+/**
+ * Props.
+ */
+type UniservsalLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> &
+  LinkProps;
+
+const externalLinkOpenings = ['https://', 'http://', 'mailto:', 'tel:'];
+
+/**
+ * @param href Href.
+ * @returns True if link is external.
+ */
+function isLinkExternal(href: string) {
+  return externalLinkOpenings.some(opening => href.startsWith(opening));
+}
+
+/**
+ * @returns React component.
+ */
+const UniservsalLink = forwardRef<HTMLAnchorElement, UniservsalLinkProps>(function UniservsalLink(
+  {children, href, ...props},
+  ref,
+) {
+  if (typeof href === 'object' || !isLinkExternal(href)) {
+    return (
+      <Link
+        href={href}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <a
+      href={href}
+      rel="noopener noreferrer"
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+});
+
+export default UniservsalLink;