feat: implement dynamic article detail pages with SEO metadata and add a NewsTicker component.

Author: Llewellyn500

app/posts/[title]/page.tsx

@@ -223,12 +223,12 @@ export default async function ArticleDetails({
 
     const jsonLd = {
       "@context": "https://schema.org",
-      "@type": "BlogPosting",
+      "@type": "Article",
       headline: processedArticle.title,
       description: processedArticle.description,
       image: processedArticle.img ? [processedArticle.img] : [],
       datePublished: processedArticle.date.toISOString(),
-      dateModified: processedArticle.date.toISOString(), // Assuming modified is same as published if not tracked
+      dateModified: processedArticle.date.toISOString(),
       author: {
         "@type": "Person",
         name: processedArticle.authorName,
@@ -239,7 +239,7 @@ export default async function ArticleDetails({
         name: "L.A.P Docs",
         logo: {
           "@type": "ImageObject",
-          url: "https://lap-docs.netlify.app/logos/LAP-Logo-Color.png", // Verify this path
+          url: "https://lap-docs.netlify.app/logos/LAP-Logo-Color.png",
         },
       },
       mainEntityOfPage: {

components/NewsTicker/NewsTicker.tsx

@@ -1,23 +1,17 @@
 "use client";
 
 import gsap from "gsap";
-import { useEffect, useRef, useState } from "react";
-import { collection, onSnapshot } from "firebase/firestore";
-import { db } from "@/lib/firebase";
+import { useEffect, useRef } from "react";
 
 export default function NewsTicker() {
   const tickerRef = useRef<HTMLDivElement | null>(null);
-  const [news, setNews] = useState<string[]>([]);
 
-  useEffect(() => {
-    // Fetch real-time updates from Firestore
-    const unsubscribe = onSnapshot(collection(db, "news"), (snapshot) => {
-      const newsData = snapshot.docs.map((doc) => doc.data().title);
-      setNews(newsData);
-    });
-
-    return () => unsubscribe();
-  }, []);
+  // Static mission statements
+  const news = [
+    "Welcome to LAP Docs, our mission is to provide you with the best possible tutorials that is easy to understand and follow. I hope you enjoy your stay with us and our tutorials actually help you learn something new.",
+    "Our Motto: Simplicity in Tech",
+    "Our Goal: Simplifying tech for everyone",
+  ];
 
   useEffect(() => {
     const ticker = tickerRef.current;
@@ -27,7 +21,7 @@ export default function NewsTicker() {
 
       gsap.to(ticker, {
         x: `-${tickerWidth}px`,
-        duration: 75,
+        duration: 75, // Faster duration for shorter text
         ease: "linear",
         repeat: -1,
         onRepeat: () => {
@@ -41,14 +35,14 @@ export default function NewsTicker() {
     <div className="flex bg-[#8a2be2] text-white py-5 max-w-[95rem] w-full mx-auto relative overflow-hidden">
       <div className="bg-[#8a2be2] z-10 px-6">
         <span className="flex gap-2 bg-[#8a2be2] font-semibold uppercase whitespace-nowrap">
-          <p>UPDATES:</p>
+          <p>MISSION:</p>
           <p className="block sm:hidden">+++</p>
         </span>
       </div>
       {/* News ticker container */}
       <div className="relative flex overflow-hidden w-full">
         <div ref={tickerRef} className="flex gap-4 whitespace-nowrap">
-          {[...news, ...news].map((newsItem, index) => (
+          {[...news, ...news, ...news, ...news].map((newsItem, index) => (
             <div key={index} className="text-white text-lg font-normal">
               <p>{newsItem} +++</p>
             </div>

next.config.js

@@ -6,19 +6,25 @@ const nextConfig = {
   },
   images: {
     remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "lap-docs.netlify.app",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "raw.githubusercontent.com",
-        port: "",
-        pathname: "/**",
-      },
-    ],
+  {
+    protocol: "https",
+    hostname: "lap-docs.netlify.app",
+    port: "",
+    pathname: "/**",
+  },
+  {
+    protocol: "https",
+    hostname: "raw.githubusercontent.com",
+    port: "",
+    pathname: "/**",
+  },
+  {
+    protocol: "https",
+    hostname: "firebasestorage.googleapis.com",
+    port: "",
+    pathname: "/**",
+  },
+],
   },
 };