From 5220badc23ecdea91fd6e4f1b57009fac6e7cc31 Mon Sep 17 00:00:00 2001
From: james-a-morris <jaamorris@cs.stonybrook.edu>
Date: Tue, 17 Sep 2024 15:17:43 -0400
Subject: [PATCH] improve: add blog links to mobile footer/header nav

Signed-off-by: james-a-morris <jaamorris@cs.stonybrook.edu>
---
 src/app/_components/footer.tsx           |  9 +++++-
 src/app/_components/header-nav/index.tsx | 11 ++++++-
 src/app/_components/icons/index.tsx      |  1 +
 src/app/_components/icons/newspaper.tsx  | 38 ++++++++++++++++++++++++
 src/app/_components/link.tsx             |  2 +-
 src/app/_constants/links.ts              |  4 +++
 6 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 src/app/_components/icons/newspaper.tsx

diff --git a/src/app/_components/footer.tsx b/src/app/_components/footer.tsx
index be38ede..020b413 100644
--- a/src/app/_components/footer.tsx
+++ b/src/app/_components/footer.tsx
@@ -12,6 +12,7 @@ import {
   DocumentIcon,
   DiscourseIcon,
   GitHubIcon,
+  NewspaperIcon,
 } from "./icons";
 import { IconBox } from "./icon-box";
 import { PRODUCT_LINKS, SOCIAL_LINKS, INFORMATION_LINKS } from "@/app/_constants";
@@ -67,6 +68,12 @@ const socials = [
 ];
 
 const information = [
+  {
+    ...INFORMATION_LINKS.blog,
+    Icon: NewspaperIcon,
+    iconClassName: "h-5 w-5",
+    iconContainerClassName: "bg-light-100/[.05]",
+  },
   {
     ...INFORMATION_LINKS.docs,
     Icon: DocumentIcon,
@@ -115,7 +122,7 @@ function FooterBox(props: {
       <div className="flex flex-col gap-5">
         {props.items.map((item) => (
           <div key={item.href} className="flex flex-row items-center gap-3">
-            {props.useExternalLinks ? (
+            {props.useExternalLinks && !item.href.startsWith("/") ? (
               <a href={item.href} target="_blank" rel="noopener noreferrer">
                 <FooterBoxItem item={item} />
               </a>
diff --git a/src/app/_components/header-nav/index.tsx b/src/app/_components/header-nav/index.tsx
index 1767aa4..44b387d 100644
--- a/src/app/_components/header-nav/index.tsx
+++ b/src/app/_components/header-nav/index.tsx
@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
 import { useState } from "react";
 
 import { twMerge } from "@/app/_lib/tw-merge";
-import { PRODUCT_LINKS, SOCIAL_LINKS } from "@/app/_constants";
+import { INFORMATION_LINKS, PRODUCT_LINKS, SOCIAL_LINKS } from "@/app/_constants";
 
 import {
   AcrossIcon,
@@ -18,6 +18,7 @@ import {
   TwitterIcon,
   MediumIcon,
   DiscourseIcon,
+  NewspaperIcon,
 } from "../icons";
 import { Button } from "../button";
 import { Text } from "../text";
@@ -80,6 +81,14 @@ const communityNavigationItems = [
     iconContainerClassName: "bg-light-100/[.05]",
     containerClassName: "group-hover:bg-light-100/[.05]",
   },
+  {
+    ...INFORMATION_LINKS.blog,
+    description: "Across Blog",
+    Icon: NewspaperIcon,
+    iconClassName: "h-4 w-4",
+    iconContainerClassName: "bg-light-100/[.05]",
+    containerClassName: "group-hover:bg-light-100/[.05]",
+  },
 ];
 
 export function HeaderNav() {
diff --git a/src/app/_components/icons/index.tsx b/src/app/_components/icons/index.tsx
index 25e4b21..2c524a5 100644
--- a/src/app/_components/icons/index.tsx
+++ b/src/app/_components/icons/index.tsx
@@ -18,6 +18,7 @@ export { DiscourseIcon } from "./discourse";
 export { GitHubIcon } from "./github";
 export { LinkIcon } from "./link";
 export { SearchIcon } from "./search";
+export { NewspaperIcon } from "./newspaper";
 
 // Gradient icons
 export { ArrowUpIcon } from "./gradient/arrow-up";
diff --git a/src/app/_components/icons/newspaper.tsx b/src/app/_components/icons/newspaper.tsx
new file mode 100644
index 0000000..17722a3
--- /dev/null
+++ b/src/app/_components/icons/newspaper.tsx
@@ -0,0 +1,38 @@
+import { SVGProps } from "react";
+
+export function NewspaperIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.33464 18.3332H16.668C17.11 18.3332 17.5339 18.1576 17.8465 17.845C18.159 17.5325 18.3346 17.1085 18.3346 16.6665V3.33317C18.3346 2.89114 18.159 2.46722 17.8465 2.15466C17.5339 1.8421 17.11 1.6665 16.668 1.6665H6.66797C6.22594 1.6665 5.80202 1.8421 5.48946 2.15466C5.1769 2.46722 5.0013 2.89114 5.0013 3.33317V16.6665C5.0013 17.1085 4.82571 17.5325 4.51315 17.845C4.20059 18.1576 3.77666 18.3332 3.33464 18.3332ZM3.33464 18.3332C2.89261 18.3332 2.46868 18.1576 2.15612 17.845C1.84356 17.5325 1.66797 17.1085 1.66797 16.6665V9.1665C1.66797 8.24984 2.41797 7.49984 3.33464 7.49984H5.0013"
+        stroke="white"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M14.9987 11.6665H8.33203"
+        stroke="white"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.4987 15H8.33203"
+        stroke="white"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8.33203 5H14.9987V8.33333H8.33203V5Z"
+        stroke="white"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/app/_components/link.tsx b/src/app/_components/link.tsx
index be3d43a..2c44251 100644
--- a/src/app/_components/link.tsx
+++ b/src/app/_components/link.tsx
@@ -17,7 +17,7 @@ type CustomLinkProps = LinkProps & {
  */
 function CustomLink({ href, preserveQueryParams, ...props }: CustomLinkProps) {
   const params = useSearchParams();
-  if (preserveQueryParams && !href.toString().includes("?")) {
+  if (preserveQueryParams && params.size > 0 && !href.toString().includes("?")) {
     href = `${href.toString()}?${params.toString()}`;
   }
   return <Link href={href} {...props} />;
diff --git a/src/app/_constants/links.ts b/src/app/_constants/links.ts
index de69815..8143ffd 100644
--- a/src/app/_constants/links.ts
+++ b/src/app/_constants/links.ts
@@ -48,6 +48,10 @@ export const INFORMATION_LINKS = {
     label: "Docs",
     href: "https://docs.across.to/v/v3-developer-docs/introduction/what-is-across",
   },
+  blog: {
+    label: "Blog",
+    href: "/blog",
+  },
 };
 
 export const INTEGRATION_LINKS = {