feat: refactor article channel retrieval and improve type inference in multiple components

Author: gitcoder89431

.github/workflows/lint.yml

@@ -0,0 +1,28 @@
+name: Lint
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint
+        env:
+          NEXT_TELEMETRY_DISABLED: '1'

src/app/atlas/AtlasClient.tsx

@@ -19,7 +19,7 @@ export default function AtlasClient({ articles }: { articles: Article[] }) {
   const loadMoreRef = useRef<HTMLDivElement>(null)
 
   const getArticleChannel = (article: Article): string | null => {
-    const fm: any = article.frontmatter
+    const fm = article.frontmatter
     const explicitChannel = fm.channel
     if (explicitChannel && typeof explicitChannel === 'string') return explicitChannel
     const tags = article.frontmatter.tags || []
@@ -211,4 +211,3 @@ export default function AtlasClient({ articles }: { articles: Article[] }) {
     </div>
   )
 }
-

src/app/explore/ExploreClient.tsx

@@ -2,7 +2,6 @@
 
 import { useMemo, useState, useEffect } from 'react'
 import Link from 'next/link'
-import { cn } from '@/lib/utils'
 import {
   Table,
   TableBody,
@@ -29,7 +28,7 @@ export default function ExploreClient({ articles }: { articles: Article[] }) {
 
   // Helper function to determine article's primary channel
   const getArticleChannel = (article: Article): string | null => {
-    const fm: any = article.frontmatter
+    const fm = article.frontmatter
     const explicitChannel = fm.channel
     if (explicitChannel && typeof explicitChannel === 'string') return explicitChannel
 
@@ -204,4 +203,3 @@ export default function ExploreClient({ articles }: { articles: Article[] }) {
     </div>
   )
 }
-

src/app/page.tsx

@@ -1,6 +1,5 @@
 import { AppSidebar } from '@/components/app-sidebar'
 import { BackgroundBeams } from '@/components/ui/background-beams'
-import { Button } from '@/components/ui/button'
 import { Footer } from '@/components/ui/footer'
 import { cn } from '@/lib/utils'
 import Link from 'next/link'

src/components/app-sidebar.tsx

@@ -3,7 +3,6 @@
 import React from "react"
 import { cn } from "@/lib/utils"
 import { Sidebar, SidebarBody } from "@/components/ui/sidebar"
-import Image from "next/image"
 import Link from "next/link"
 import {
   Home,
@@ -66,4 +65,4 @@ export function AppSidebar() {
       </SidebarBody>
     </Sidebar>
   )
-}
+}

src/components/channel-badge.tsx

@@ -1,6 +1,5 @@
 import { cn } from "@/lib/utils";
 import {
-  Circle,
   Atom,
   Brain,
   Calculator,

src/components/channels-sidebar.tsx

@@ -1,13 +1,10 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { useState } from "react";
 import { Checkbox } from "@/components/ui/checkbox";
 import type { Article } from "@/lib/markdown";
 import {
-  Circle,
   Atom,
-  Brain,
   Calculator,
   Dna,
   Scale,
@@ -48,12 +45,11 @@ export function ChannelsSidebar({
   articles = [],
   className
 }: ChannelsSidebarProps) {
-  const [hoveredChannel, setHoveredChannel] = useState<string | null>(null);
 
   // Helper function to determine article's primary channel (same logic as Atlas page)
   const getArticleChannel = (article: Article): string | null => {
     // First check if explicit channel is defined in frontmatter
-    const explicitChannel = (article.frontmatter as any).channel;
+    const explicitChannel = article.frontmatter.channel;
     if (explicitChannel && typeof explicitChannel === 'string') {
       return explicitChannel;
     }
@@ -165,13 +161,10 @@ export function ChannelsSidebar({
       <nav className="p-2 space-y-1">
         {channels.map((channel) => {
           const isSelected = selectedChannels.includes(channel.id);
-          const isHovered = hoveredChannel === channel.id;
 
           return (
             <label
               key={channel.id}
-              onMouseEnter={() => setHoveredChannel(channel.id)}
-              onMouseLeave={() => setHoveredChannel(null)}
               className={cn(
                 "w-full flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer",
                 "transition-all duration-200 group relative",

src/components/recent-updates.tsx

@@ -86,7 +86,7 @@ export function RecentUpdates({ className }: RecentUpdatesProps) {
           const persona = personaMap[mainAuthor];
 
           // Determine correct route based on channel/content type
-          const getArticleRoute = (slug: string, channel: string) => {
+          const getArticleRoute = (slug: string) => {
             // For now, assume dialogue if multiple authors, monologue if single
             const isDialogue = update.author.includes('&');
             return isDialogue ? `/atlas/dialogue/${slug}` : `/atlas/monologue/${slug}`;
@@ -95,7 +95,7 @@ export function RecentUpdates({ className }: RecentUpdatesProps) {
           return (
             <div key={index}>
               <div
-                onClick={() => router.push(getArticleRoute(update.slug, update.channel))}
+                onClick={() => router.push(getArticleRoute(update.slug))}
                 className={cn(
                   "group p-3 rounded-md transition-all duration-200",
                   "hover:bg-white dark:hover:bg-neutral-700",
@@ -161,4 +161,4 @@ export function RecentUpdates({ className }: RecentUpdatesProps) {
       <div className="h-8" />
     </div>
   );
-}
+}

src/components/ui/infinite-moving-cards.tsx

@@ -81,7 +81,7 @@ export const InfiniteMovingCards = ({
           >
             <blockquote>
               <span className="relative z-20 text-sm leading-[1.6] text-neutral-800 dark:text-gray-100 font-normal">
-                "{item.quote}"
+                &ldquo;{item.quote}&rdquo;
               </span>
               <div className="relative z-20 mt-6 flex flex-row items-center">
                 <span className="flex flex-col gap-1">

src/components/ui/pixelated-canvas.tsx

@@ -1,6 +1,8 @@
 "use client";
 import React from "react";
 
+type CleanupImage = HTMLImageElement & { _cleanup?: () => void };
+
 type PixelatedCanvasProps = {
   src: string;
   width?: number;
@@ -114,7 +116,7 @@ export const PixelatedCanvas: React.FC<PixelatedCanvasProps> = ({
     const canvas = canvasRef.current;
     if (!canvas) return;
 
-    const img = new Image();
+    const img: CleanupImage = new Image();
     img.crossOrigin = "anonymous";
     img.src = src;
 
@@ -242,7 +244,10 @@ export const PixelatedCanvas: React.FC<PixelatedCanvasProps> = ({
             return [parseInt(m[1], 10), parseInt(m[2], 10), parseInt(m[3], 10)];
           return null;
         };
-        tintRGB = parse(tintColor) as any;
+        const parsedTint = parse(tintColor);
+        if (parsedTint) {
+          tintRGB = parsedTint;
+        }
       }
 
       for (let y = 0; y < offscreen.height; y += cellSize) {
@@ -498,7 +503,7 @@ export const PixelatedCanvas: React.FC<PixelatedCanvasProps> = ({
         canvasEl.removeEventListener("pointerleave", onPointerLeave);
         if (rafRef.current) cancelAnimationFrame(rafRef.current);
       };
-      (img as any)._cleanup = cleanup;
+      img._cleanup = cleanup;
     };
 
     img.onerror = () => {
@@ -515,13 +520,13 @@ export const PixelatedCanvas: React.FC<PixelatedCanvasProps> = ({
       return () => {
         isCancelled = true;
         window.removeEventListener("resize", onResize);
-        if ((img as any)._cleanup) (img as any)._cleanup();
+        if (img._cleanup) img._cleanup();
       };
     }
 
     return () => {
       isCancelled = true;
-      if ((img as any)._cleanup) (img as any)._cleanup();
+      if (img._cleanup) img._cleanup();
     };
   }, [
     src,