feat: add discord link to hacktoberfest blog (#214)

Author: sudhashrestha

animata/hero/hero-section.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import Image from "next/image";
 
 import { Button as UIButton } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -24,10 +23,10 @@ function Button({ children }: { children: React.ReactNode }) {
 function ImageWithWave() {
   return (
     <div className="title-logo relative inline-block self-center md:self-start">
-      <Image
+      <img
         width={100}
         height={100}
-        src={animataImage}
+        src={animataImage.src}
         className="-top-6 h-10 w-10 translate-y-5 animate-fadeIn fade-in-0 md:-top-10 md:h-16 md:w-16 md:translate-y-0"
         alt="Hero image"
       />

animata/widget/video-chat.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Image, { StaticImageData } from "next/image";
+import { StaticImageData } from "next/image";
 import { motion } from "framer-motion";
 import {
   Circle,
@@ -58,8 +58,8 @@ function ImageSlot({ minimize, imageSource, imageAlternate }: ImageSlotProps) {
       transition={{ duration: 0.5 }}
       className={cn(minimize ? "h-48 w-full" : "h-56 w-56")}
     >
-      <Image
-        src={imageSource}
+      <img
+        src={imageSource.src}
         alt={imageAlternate}
         className={cn("h-full w-full object-cover", minimize ? "rounded-xl" : "rounded-3xl")}
       />
@@ -74,8 +74,8 @@ function YourImageSlot({ minimize, imageSource, imageAlternate }: ImageSlotProps
       transition={{ duration: 0.5 }}
       className={cn(minimize ? "absolute bottom-2 right-0 h-20 w-20" : "h-56 w-56")}
     >
-      <Image
-        src={imageSource}
+      <img
+        src={imageSource.src}
         alt={imageAlternate}
         className={cn("h-full w-full object-cover", minimize ? "rounded-xl" : "rounded-3xl")}
       />

app/blog/[[...slug]]/page.tsx

@@ -77,20 +77,6 @@ export async function generateStaticParams(): Promise<BlogPageProps["params"][]>
 }
 
 export default async function BlogPage({ params }: BlogPageProps) {
-  const slug = params.slug?.join("/") || "";
-
-  // // Check if the slug is empty (i.e., the user is at /blog/)
-  // if (slug === "") {
-  //   // Redirect to the first blog post
-  //   const firstBlogPost = blogSidebarNav[0]?.items[0]?.href; // Get the first blog post href
-  //   if (firstBlogPost) {
-  //     // Use the Next.js redirect method
-  //     redirect(firstBlogPost);
-  //   }
-  // }
-
-  const isIndexPage = slug === "";
-
   const blog = await getBlogFromParams({ params });
 
   if (!blog) {
@@ -105,11 +91,7 @@ export default async function BlogPage({ params }: BlogPageProps) {
         <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
           <div className="overflow-hidden text-ellipsis whitespace-nowrap">Blog</div>
           <ChevronRightIcon className="h-4 w-4" />
-          {isIndexPage ? (
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap">Welcome</div>
-          ) : (
-            <NavMenu baseRoute="blog" sideBarNavItems={blogSidebarNav} value={blog.slugAsParams} />
-          )}
+          <NavMenu baseRoute="blog" sideBarNavItems={blogSidebarNav} value={blog.slugAsParams} />
         </div>
         <div className="space-y-2">
           <h1 className={cn("scroll-m-20 text-4xl font-bold tracking-tight")}>{blog.title}</h1>

components/mdx-components.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { ComponentProps, HTMLAttributes } from "react";
-import Image from "next/image";
 import Link from "next/link";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import { NpmCommands, TouchCommands } from "types/unist";
@@ -126,7 +125,7 @@ const components = {
       {...props}
     />
   ),
-  Image,
+  Image: ({ alt, ...props }: ComponentProps<"img">) => <img alt={alt} {...props} />,
   Modal,
   Callout,
   ComponentPreview,

components/site-footer.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
@@ -25,7 +24,7 @@ export function SiteFooter() {
           </div>
           <p className="text-muted-foreground">by</p>
           <div className="flex gap-1">
-            <Image src="/codse.webp" width={24} height={24} alt="codse" />
+            <img src="/codse.webp" width={24} height={24} alt="codse" />
             <span>codse</span>
           </div>
           <p className="text-muted-foreground"> from</p>

config/blog.ts

@@ -7,20 +7,30 @@ interface BlogPost extends SidebarNavItem {
 }
 
 const sortAlphabetically = (a: BlogPost, b: BlogPost) => {
+  // Ensure the index page is always first
+  if (a.href === "/blog") {
+    return -1;
+  }
+  if (b.href === "/blog") {
+    return 1;
+  }
+
+  // Sort by sortId if available
   if (a.sortId && b.sortId) {
     return a.sortId.localeCompare(b.sortId);
   } else if (a.sortId) {
     return -1;
   } else if (b.sortId) {
     return 1;
   } else {
+    // Sort by date if sortId is not available
     return new Date(a.date).getTime() - new Date(b.date).getTime();
   }
 };
 
 const createLinks = (category: string): BlogPost[] => {
   return allBlogs
-    .filter((doc) => doc.published && doc.slug !== "/blog")
+    .filter((doc) => doc.published)
     .map((doc) => ({
       // Make sure the index page is the first item
       title: doc.title,

content/blog/hacktoberfest-2024.mdx

@@ -34,6 +34,10 @@ You can track the progress and pick tasks by visiting our [GitHub Project Board]
 - Link the issue number in your pull request description (e.g., "Fixes #issue-number").
 - Add relevant labels (e.g., `hacktoberfest`, `enhancement`, `bug-fix`).
 
+### Join Our Community
+
+Join our [Discord community](https://discord.gg/YfvqMf5MTE) to connect with other contributors and get support.
+
 ---
 
 ### Contribution Rewards

content/blog/index.mdx

@@ -1,6 +1,6 @@
 ---
-title: Animata Blog
-date: 2024-09-20
+title: Welcome
+date: 2024-09-17
 description: Welcome to the Animata Blog! 🎉
 ---
 

next.config.mjs

@@ -5,6 +5,9 @@ const nextConfig = {
   output: "export", // Enable static exports
   reactStrictMode: true,
   swcMinify: true,
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default withContentlayer(nextConfig);