Digital Show and Tell: Creating an Activity Log for the Site

When I redesigned my website last year one feature I wanted to add was a "Now" page. A dynamic page detailing all of the things I'm currently engaged with. The problem is a "Now" page only works if you actively update it. Turns out I only liked the idea in theory and not practice! I have been woefully inconsistent with updating the page. It was time for a redesign.

I decided to replace the "Now" page with an "Activity Log". A page to track the different things I've been doing, but without the pressure of constantly keeping it up to date.

The result is the Activity Log. A page that tracks what I've enjoyed watching, reading, playing and building displayed in a simple grid of cards. Anyone visiting the site can get an idea of what I've been up to. All in an effort to inject a little fun into the site!

In this post, I'll break down how I implemented the activity log showcasing the different types of activities I'm currently engaging with - from books and movies to coding projects and recipes.

Architecture Overview

The activity log consists of three main components:

1. A main page component (ActivityLogPage)
2. The log layout component (ActivityLog)
3. Individual activity cards (ActivityCard)

Data Structure

The system uses a consistent type structure across components:

type Category = "What I'm reading..." | "What I'm building..." | "What I'm watching..." | "What I'm playing...";
 
interface ActivityItem {
  metadata: {
    title?: string;
    category?: Category;
    publishedAt?: string;
    imageUrl?: string;
    imageLink?: string;
    description?: string;
    [key: string]: any;
  };
  slug: string;
  source: string;
}

Category Filtering

One of the key features is the ability to filter content by category. This is implemented through URL parameters and handled in the page component:

export default async function ActivityLogPage({
  searchParams,
}: {
  searchParams: { category?: string };
}) {
  const activityItems = await getNowContent();
  const category = searchParams.category 
    ? searchParams.category.toLowerCase() 
    : 'all';
 
  return <ActivityLog items={activityItems} currentCategory={category} />;
}

The ActivityLog component then handles the filtering logic:

const filteredItems = normalizedCurrentCategory === 'all' 
  ? sortedItems 
  : sortedItems.filter(item => item.metadata.category === normalizedCurrentCategory);

Dynamic Category Navigation

The category navigation is generated automatically based on the available content:

const categories = Array.from(new Set(items.map(item => item.metadata.category)));
 
// In the JSX:
{categories.map((category) => (
  <Link
    key={category}
    href={`/activity?category=${encodeURIComponent(formatCategory(category))}`}
    className={`${
      `What I'm ${currentCategory}...` === category
        ? 'bg-gray-900 text-white' 
        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
    }`}
  >
    {formatCategory(category)}
  </Link>
))}

Activity Cards

Each piece of content is displayed in a ActivityCard component that handles different content types uniformly. The cards include:

• Category badges with distinct colors
• Images (if available)
• Title and description
• Publication date
• Optional external links

Here's how the category colors are implemented:

const getCategoryColor = (category?: string) => {
  const colors: Record<string, string> = {
    "What I'm reading...": "bg-blue-50 text-blue-700",
    "What I'm watching...": "bg-purple-50 text-purple-700",
    "What I'm building...": "bg-green-50 text-green-700",
    "What I'm playing...": "bg-red-50 text-red-700"
  };
  return colors[category || ""] || "bg-gray-50 text-gray-700";
};

Performance Optimizations

Several optimizations are in place:

1. Image Loading: Priority loading for the first 6 items:

<ActivityCard 
  key={`${item.slug}-${index}`} 
  item={item}
  priority={index < 6}
/>

2. Responsive Images: Using Next.js's Image component with appropriate sizing:

<Image
  src={item.metadata.imageUrl}
  alt={item.metadata.title || 'Activity item'}
  width={800}
  height={600}
  sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
  className="w-full h-64 object-contain bg-gray-50"
  priority={priority}
/>

3. Client-side Mounting: Content is properly hydrated using a mounting check:

const [isMounted, setIsMounted] = useState(false);
 
useEffect(() => {
  setIsMounted(true);
}, []);

Conclusion

This implementation provides a flexible and maintainable way to showcase different activities. The modular design makes it easy to add new categories or modify the display of content. To start I've added some activities from the past year or so for some categories I commonly engage with, but it's extensible if I want to add more in the future.

I'm excited to have this added to the site so I hope you enjoy it!