Fix external links

IgorKowalczyk · Mar 6, 2023 · c13b6a4 · c13b6a4
1 parent d9e447c
commit c13b6a4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/app/photography/page.jsx b/app/photography/page.jsx
@@ -22,7 +22,7 @@ export default async function Photography() {
      <p className="mb-4 font-inter text-rose-500">No posts found!</p>
     ) : (
      photos.map((result, id) => (
-      <Link key={id} href={`${result.path}`} className="after:content after:shadow-highlight group relative mb-5 block w-full cursor-zoom-in rounded-lg bg-slate-100 bg-cover after:pointer-events-none after:absolute after:inset-0 after:rounded-lg dark:bg-slate-800">
+      <Link key={id} href={`${result.path}`} target="_blank" className="after:content after:shadow-highlight group relative mb-5 block w-full cursor-zoom-in rounded-lg bg-slate-100 bg-cover after:pointer-events-none after:absolute after:inset-0 after:rounded-lg dark:bg-slate-800">
        <BlurImage src={result.path} blur={result.blur} alt={result.id + "image"} />
       </Link>
      ))

diff --git a/components/elements/Footer.jsx b/components/elements/Footer.jsx
@@ -17,7 +17,10 @@ export function Footer() {
       </div>
 
       <p className="mt-3 font-inter text-gray-700 dark:text-gray-400">
-       Created with ❤️ and ☕ in Poland using <Link href="https://nextjs.org">Next.js</Link>
+       Created with ❤️ and ☕ in Poland using{" "}
+       <Link href="https://nextjs.org" target={"_blank"}>
+        Next.js
+       </Link>
       </p>
       <br />
       <p className="mb-4 font-inter text-slate-600 opacity-50 dark:text-slate-400">A programmer without coffee is like a web browser without the Internet - it seemingly works but is it useful?</p>
@@ -27,7 +30,7 @@ export function Footer() {
        <p className="mt-3 font-inter font-semibold text-gray-800 dark:text-white sm:mt-0 sm:mb-3 ">{category.title}</p>
        <div>
         {category.links.map((link, index) => (
-         <Link key={index} href={link.href} className="mt-2 block font-inter duration-100 hover:text-gray-600 hover:underline motion-reduce:transition-none dark:hover:text-gray-300">
+         <Link key={index} href={link.href} target={link.target || "_self"} className="mt-2 block font-inter duration-100 hover:text-gray-600 hover:underline motion-reduce:transition-none dark:hover:text-gray-300">
           {link.title}
          </Link>
         ))}

diff --git a/components/elements/Nav.jsx b/components/elements/Nav.jsx
@@ -11,9 +11,15 @@ const Popover = dynamic(() => import("components/elements/NavPopover"));
 
 function NavItem({ href, text, target }) {
  const path = usePathname();
- const isActive = path.split("/")[1].trim() === href.split("/")[1].trim();
+ if (!href) return null;
+ if (!path) return null;
+ let isActive = path.split("/")[1].trim() === href.split("/")[1].trim();
+ if (href.startsWith("https://") || href.startsWith("http://")) {
+  isActive = false;
+  target = "_blank";
+ }
  return (
-  <Link href={href} key={href} target={target} className={`${isActive ? "active text-gray-800 dark:text-gray-200" : "text-gray-600 dark:text-gray-400"} nav-border relative hidden rounded-lg p-1 transition-all duration-200 before:w-[calc(100%_-_1.5em)] after:w-[calc(100%_-_1.5em)] hover:bg-gray-200 hover:text-gray-800 motion-reduce:transition-none dark:hover:bg-white/10 dark:hover:text-gray-200 sm:px-3 sm:py-2 md:inline-block`}>
+  <Link href={href} key={href} target={target} className={`${isActive ? "active text-gray-800 dark:text-gray-200" : "text-gray-600 dark:text-gray-400"} nav-border relative hidden rounded-lg p-1 transition-all duration-200 before:w-[calc(100%_-_1.5em)] after:w-[calc(100%_-_1.5em)] hover:bg-black/10 hover:text-gray-800 motion-reduce:transition-none dark:hover:bg-white/10 dark:hover:text-gray-200 sm:px-3 sm:py-2 md:inline-block`}>
    {text}
   </Link>
  );

diff --git a/components/elements/NavPopover.jsx b/components/elements/NavPopover.jsx
@@ -1,21 +1,22 @@
 import Link from "next/link";
 import { Transition, Popover } from "@headlessui/react";
+import { meta } from "/config";
 import { CodeBracketIcon, RectangleStackIcon, EnvelopeOpenIcon, ChevronRightIcon, ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 
 export default function NavPopover(props) {
  return (
   <Popover {...props}>
    {({ open, close }) => (
     <>
-     <Popover.Button className={`${open ? "active bg-gray-200 text-gray-800 dark:bg-white/10 dark:text-gray-200" : ""} nav-border group relative hidden rounded-lg p-1 font-inter text-gray-600 transition-all duration-200 hover:bg-gray-200 hover:text-gray-800 motion-reduce:transition-none dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200 sm:px-3 sm:py-2 md:flex md:items-center`}>
+     <Popover.Button className={`${open ? "active bg-black/10 text-gray-800 dark:bg-white/10 dark:text-gray-200" : ""} nav-border group relative hidden rounded-lg p-1 font-inter text-gray-600 transition-all duration-200 hover:bg-black/10 hover:text-gray-800 motion-reduce:transition-none dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200 sm:px-3 sm:py-2 md:flex md:items-center`}>
       <span>More</span>
       <ChevronRightIcon className={`${open ? "rotate-90 text-gray-800 dark:text-gray-200" : ""} ml-1 h-4 w-4 text-gray-600 duration-150 ease-in-out group-hover:rotate-90 group-hover:text-gray-800 dark:group-hover:text-gray-200`} />
      </Popover.Button>
      <Transition enter="transition ease-out duration-200 motion-reduce:transition-none" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-200 motion-reduce:transition-none" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95">
       <Popover.Panel unmount={false} className="absolute left-1/2 z-10 w-screen max-w-sm -translate-x-1/2 transform px-4 pt-3 sm:px-0 ">
        <div className="overflow-hidden rounded-lg border-[1px] border-black/[10%] shadow-lg  dark:border-white/[15%]">
         <div className="relative bg-white p-3 dark:bg-[#08152b]">
-         <Link href={`/github`} key="github" onClick={() => close()} className="flex items-center rounded-lg p-3 transition duration-150 ease-in-out hover:bg-blue-50/80 dark:hover:bg-white/5">
+         <Link target="_blank" href={`https://github.com/${meta.accounts.github.username}`} key="github" onClick={() => close()} className="flex items-center rounded-lg p-3 transition duration-150 ease-in-out hover:bg-blue-50/80 dark:hover:bg-white/5">
           <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-100 text-white dark:bg-white/10 dark:text-black sm:h-12 sm:w-12">
            <CodeBracketIcon className="inline h-[24px] w-[24px] stroke-black duration-200 motion-reduce:transition-none dark:stroke-white/[70%]" />
           </div>
@@ -44,9 +45,9 @@ export default function NavPopover(props) {
          </Link>
         </div>
         <div className="border-t-[1px] border-black/10 bg-white px-5 py-4 dark:border-white/10 dark:bg-[#08152b]">
-         <Link href={`/github`} key="github_external" onClick={() => close()} target="_blank" className="group flow-root rounded-md p-3 transition duration-150 ease-in-out hover:bg-gray-100 dark:hover:bg-white/5 ">
+         <Link target="_blank" href={`https://github.com/${meta.accounts.github.username}?tab=repositories`} key="github_external" onClick={() => close()} className="group flow-root rounded-md p-3 transition duration-150 ease-in-out hover:bg-gray-100 dark:hover:bg-white/5">
           <span className="flex items-center">
-           <span className="text-sm font-medium text-gray-900 dark:text-white">Github Profile</span>
+           <span className="text-sm font-medium text-gray-900 dark:text-white">Github Repositories</span>
            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg">
             <ArrowTopRightOnSquareIcon className="h-4 w-4 opacity-50 duration-100 group-hover:opacity-90 motion-reduce:transition-none" />
            </div>

diff --git a/config.js b/config.js
@@ -20,6 +20,9 @@ export const meta = {
    invite: "https://discord.gg/uxtSMtd2xZ",
    id: "544164729354977282",
   },
+  instagram: {
+   username: "majonezexe",
+  },
  },
 };
 
@@ -55,7 +58,7 @@ export const nav = {
    title: "Photography",
   },
   {
-   href: "/discord/",
+   href: meta.accounts.discord.invite,
    title: "Discord",
    target: "_blank",
   },
@@ -74,7 +77,7 @@ export const contact = {
    ),
   },
   {
-   href: "/discord",
+   href: meta.accounts.discord.invite,
    title: "Discord",
    icon: (
     <svg className="mt-[2px] mr-2 h-4 w-4 fill-blue-900 duration-200 motion-reduce:transition-none dark:fill-white" width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -83,7 +86,7 @@ export const contact = {
    ),
   },
   {
-   href: "/twitter",
+   href: `https://twitter.com/${meta.accounts.twitter.username}`,
    title: "Twitter",
    icon: (
     <svg className="mt-[2px] mr-2 h-4 w-4 fill-blue-900 duration-200 motion-reduce:transition-none dark:fill-white" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 248 204">
@@ -99,7 +102,7 @@ export const contact = {
    ),
   },
   {
-   href: "/instagram",
+   href: `https://www.instagram.com/${meta.accounts.instagram.username}/`,
    title: "Instagram",
    icon: (
     <svg className="mt-[2px] mr-2 h-4 w-4 fill-blue-900 duration-200 motion-reduce:transition-none dark:fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
@@ -138,16 +141,19 @@ export const footer = {
    links: [
     {
      title: "Github",
-     href: "/github",
+     href: `https://github.com/${meta.accounts.github.username}`,
+     target: "_blank",
     },
     {
      title: "Instagram",
-     href: "/instagram",
+     href: `https://instagram.com/${meta.accounts.instagram.username}`,
+     target: "_blank",
     },
 
     {
      title: "Discord",
-     href: "/discord",
+     href: meta.accounts.discord.invite,
+     target: "_blank",
     },
    ],
   },