improve: add blog links to mobile footer/header nav

Signed-off-by: james-a-morris <[email protected]>

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>

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() {

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";

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>
+  );
+}

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} />;

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 = {