fix 404 links

Author: needim

app/(join)/join/page.tsx

@@ -16,11 +16,11 @@ export default async function Join() {
             <ArticleItem
               key={item!.slug}
               slug={item!.slug}
-              collection={item?.collection!}
+              collection={item?.collectionSlug!}
               date={new Date(item!.entry.createdAt)}
             >
               <Link
-                href={`/${item!.collectionSlug}/${item!.slug}/`}
+                href={`/${item!.collectionSlug}/${item!.slug}`}
                 className="relative flex flex-col pl-18 transition-transform hover:translate-x-2"
               >
                 <div className="flex text-lg font-semibold text-zinc-50">

components/join/mdx.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import clsx from 'clsx';
-import { useEffect, useRef, useState } from 'react';
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
 
-import { FormattedDate } from './formatted-date';
 import Image from "next/image";
+import Link from "next/link";
+import { FormattedDate } from "./formatted-date";
 
 export const img = function Img(props: React.ComponentProps<typeof Image>) {
   return (
@@ -22,14 +23,14 @@ export const img = function Img(props: React.ComponentProps<typeof Image>) {
 function ContentWrapper({
   className,
   ...props
-}: React.ComponentPropsWithoutRef<'div'>) {
+}: React.ComponentPropsWithoutRef<"div">) {
   return (
     <div className="mx-auto max-w-7xl px-6 lg:flex lg:px-8">
       <div className="lg:ml-96 lg:flex lg:w-full lg:justify-end lg:pl-32">
         <div
           className={clsx(
-            'mx-auto max-w-lg lg:mx-0 lg:w-0 lg:max-w-xl lg:flex-auto',
-            className,
+            "mx-auto max-w-lg lg:mx-0 lg:w-0 lg:max-w-xl lg:flex-auto",
+            className
           )}
           {...props}
         />
@@ -50,22 +51,22 @@ function ArticleHeader({
   return (
     <header className="relative mb-10 xl:mb-0">
       <div className="pointer-events-none absolute left-[max(-0.5rem,calc(50%-18.625rem))] top-0 z-50 flex h-4 items-center justify-end gap-x-2 lg:left-0 lg:right-[calc(max(2rem,50%-38rem)+40rem)] lg:min-w-[32rem] xl:h-8">
-        <a href={`/${collection}/${slug}/`} className="inline-flex">
+        <Link href={`/${collection}/${slug}`} className="inline-flex">
           <FormattedDate
             date={date}
             className="hidden xl:pointer-events-auto xl:block xl:text-xs/4 xl:font-medium xl:text-white/50"
           />
-        </a>
+        </Link>
         <div className="h-[0.0625rem] w-3.5 bg-gray-400 lg:-mr-3.5 xl:mr-0 xl:bg-gray-300" />
       </div>
       <ContentWrapper>
         <div className="flex">
-          <a href={`/${collection}/${slug}/`} className="inline-flex">
+          <Link href={`/${collection}/${slug}`} className="inline-flex">
             <FormattedDate
               date={date}
               className="text-xs/4 font-medium text-gray-500 dark:text-white/50 xl:hidden"
             />
-          </a>
+          </Link>
         </div>
       </ContentWrapper>
     </header>
@@ -83,7 +84,7 @@ export const ArticleItem = function Article({
   date: string | Date;
   children: React.ReactNode;
 }) {
-  const heightRef = useRef<React.ElementRef<'div'>>(null);
+  const heightRef = useRef<React.ElementRef<"div">>(null);
   const [heightAdjustment, setHeightAdjustment] = useState(0);
 
   useEffect(() => {
@@ -124,7 +125,7 @@ export const ArticleItem = function Article({
 export const code = function Code({
   highlightedCode,
   ...props
-}: React.ComponentPropsWithoutRef<'code'> & { highlightedCode?: string }) {
+}: React.ComponentPropsWithoutRef<"code"> & { highlightedCode?: string }) {
   if (highlightedCode) {
     return (
       <code {...props} dangerouslySetInnerHTML={{ __html: highlightedCode }} />