feat: Enhance articles component with topic filtering and improve UI

- Refactored Articles component to include topic links and filtering by topic.
- Updated article display to include topic paths and improved author references.
- Changed button elements to links for better navigation and accessibility.
- Enhanced SEO with new utility functions for building topic paths.
- Added new API route for IndexNow integration to improve indexing.
- Created a new page for displaying articles by topic.
- Introduced content library for managing articles and authors.
- Updated footer and header components for consistency and improved branding.
- Added SVG for team title for better visual representation.
- Updated package dependencies for better performance and security.

Author: Llewellyn500

app/api/indexnow/route.ts

@@ -0,0 +1,84 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  INDEXNOW_KEY,
+  SITE_HOST,
+  SITE_URL,
+  absoluteUrl,
+} from "@/lib/seo";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+function normalizeUrl(value: unknown) {
+  if (typeof value !== "string" || !value.trim()) {
+    return null;
+  }
+
+  try {
+    const url = new URL(value, SITE_URL);
+    return url.host === SITE_HOST ? url.toString() : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const secret = process.env.INDEXNOW_SECRET;
+  if (secret && request.headers.get("x-indexnow-secret") !== secret) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let body: Record<string, unknown>;
+  try {
+    body = (await request.json()) as Record<string, unknown>;
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+  }
+
+  const rawUrlList = Array.isArray(body.urlList)
+    ? body.urlList
+    : body.url
+      ? [body.url]
+      : [];
+  const urlList = rawUrlList
+    .map((value) => normalizeUrl(value))
+    .filter((value): value is string => Boolean(value))
+    .slice(0, 10000);
+
+  if (urlList.length === 0) {
+    return NextResponse.json(
+      { error: "Provide at least one same-host URL." },
+      { status: 400 },
+    );
+  }
+
+  const response = await fetch("https://api.indexnow.org/indexnow", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json; charset=utf-8",
+    },
+    body: JSON.stringify({
+      host: SITE_HOST,
+      key: INDEXNOW_KEY,
+      keyLocation: absoluteUrl(`/${INDEXNOW_KEY}.txt`),
+      urlList,
+    }),
+  });
+
+  if (!response.ok) {
+    const message = await response.text();
+    return NextResponse.json(
+      {
+        error: "IndexNow submission failed",
+        status: response.status,
+        message,
+      },
+      { status: 502 },
+    );
+  }
+
+  return NextResponse.json({
+    ok: true,
+    submitted: urlList.length,
+  });
+}

app/layout.tsx

@@ -48,17 +48,6 @@ export const metadata: Metadata = {
     template: `%s | ${SITE_NAME}`,
   },
   description: SITE_DESCRIPTION,
-  keywords: [
-    SITE_NAME,
-    "L.A.P Docs",
-    "LAP Docs",
-    "Technology",
-    "Tutorials",
-    "Guides",
-    "Tech Simplified",
-    "Programming",
-    "Web Development",
-  ],
   authors: [{ name: "L.A.P Team", url: `${SITE_URL}/team` }],
   creator: "L.A.P Team",
   publisher: SITE_NAME,

app/not-found.tsx

@@ -18,7 +18,9 @@ export default function NotFound() {
         <PageTitle
           className="sr-only"
           imgSrc="/images/titles/NotFound.svg"
-          imgAlt="The words 'Not Found' in bold uppercase lettering"
+          imageWidth={754}
+          imageHeight={96}
+          decorative
         >
          404 - Page Not Found
         </PageTitle>

app/page.tsx

@@ -8,7 +8,7 @@ import Subheading from "@/components/Subheading";
 import Sidebar from "@/components/Sidebar";
 import { Suspense } from "react";
 import type { Metadata } from "next";
-import { db } from "@/lib/firebase";
+import { getAllAuthors, getPublishedArticles } from "@/lib/content";
 import {
   DEFAULT_OG_IMAGE_PATH,
   DEFAULT_TWITTER_IMAGE_PATH,
@@ -17,14 +17,6 @@ import {
   SITE_NAME,
   SITE_URL,
 } from "@/lib/seo";
-import {
-  collection,
-  getDocs,
-  query,
-  orderBy,
-  limit,
-  Timestamp,
-} from "firebase/firestore";
 
 export const metadata: Metadata = {
   title: SITE_NAME,
@@ -62,14 +54,17 @@ type Article = {
   slug: string;
   description: string;
   authorName: string;
-  date: string | Timestamp;
+  date: string;
   read: string;
   label: string;
   img: string;
   imgAlt: string;
+  topicPath: string;
   publish: boolean;
 };
 
+export const dynamic = "force-dynamic";
+
 type AuthorType = {
   id: string;
   slug: string;
@@ -82,64 +77,37 @@ type AuthorType = {
 
 async function getData() {
   try {
-    // Fetch latest articles
-    const articlesQuery = query(
-      collection(db, "articles"),
-      orderBy("date", "desc"),
-      limit(7),
-    );
-    const articlesSnapshot = await getDocs(articlesQuery);
-
-    // Fetch authors for mapping names
-    const authorsSnapshot = await getDocs(collection(db, "authors"));
-    const authorsMap = new Map(
-      authorsSnapshot.docs.map((d) => [d.id, d.data().name]),
-    );
-
-    const articles: Article[] = articlesSnapshot.docs
-      .map((doc) => {
-        const data = doc.data();
-        return {
-          id: doc.id,
-          title: data.title || "",
-          slug: data.slug || "",
-          description: data.description || "",
-          authorName:
-            data.authorName ||
-            authorsMap.get(data.authorUID) ||
-            "Unknown Author",
-          // Ensure date is a string. If it's a Timestamp, convert. If string, keep. Else current date.
-          date:
-            data.date instanceof Timestamp
-              ? data.date.toDate().toISOString()
-              : typeof data.date === "string"
-                ? data.date
-                : new Date().toISOString(),
-          read: data.read || "",
-          label: data.label || "",
-          img: data.img || "",
-          imgAlt: data.imgAlt || "",
-          publish: data.publish || false,
-        } as Article;
-      })
-      .filter((a) => a.publish === true);
-
-    // Fetch all authors for the authors section - explicitly pick fields
-    const allAuthors = authorsSnapshot.docs.map((doc) => {
-      const data = doc.data();
-      return {
-        id: doc.id,
-        slug: data.slug || "",
-        name: data.name || "",
-        avatar: data.avatar || "",
-        imgAlt: data.imgAlt || "",
-        job: data.job || "",
-        city: data.city || "",
-      };
-    });
+    const [latestArticles, allAuthors] = await Promise.all([
+      getPublishedArticles(7),
+      getAllAuthors(),
+    ]);
+
+    const articles: Article[] = latestArticles.map((article) => ({
+      id: article.id,
+      title: article.title,
+      slug: article.slug,
+      description: article.description,
+      authorName: article.authorName,
+      date: article.date.toISOString(),
+      read: article.read,
+      label: article.label,
+      img: article.img,
+      imgAlt: article.imgAlt,
+      topicPath: article.topicPath,
+      publish: article.publish,
+    }));
 
     // Shuffle authors
     const shuffledAuthors = [...allAuthors]
+      .map((author) => ({
+        id: author.docId,
+        slug: author.slug,
+        name: author.name,
+        avatar: author.avatar,
+        imgAlt: author.imgAlt,
+        job: author.job,
+        city: author.city,
+      }))
       .sort(() => 0.5 - Math.random())
       .slice(0, 4);
 
@@ -158,7 +126,10 @@ export default async function Home() {
       <PageTitle
         className="sr-only"
         imgSrc="/images/titles/lap-docs.svg"
-        imgAlt="The words 'L.A.P - Docs' in bold uppercase lettering"
+        imageWidth={1520}
+        imageHeight={216}
+        priority
+        decorative
       >
         L.A.P - Docs
       </PageTitle>
@@ -180,4 +151,3 @@ export default async function Home() {
   );
 }
 
-export const revalidate = 60;