Spotlight Portfolio Guide

This skill provides guidance for working with the Spotlight template from Tailwind Plus - a personal portfolio/blog site built with Next.js 14, TypeScript, and Tailwind CSS v4.

Development Commands

When working with this codebase, use these commands:

Environment Setup

The site requires a `.env.local` file in the root directory:

```

NEXT_PUBLIC_SITE_URL=https://example.com

```

This is required for RSS feed generation.

Project Architecture Overview

Core Architecture Patterns

Content Management System

The blog system is powered by `src/lib/posts.ts` which:

Styling System

MDX Configuration

Located in `next.config.mjs`:

Working with Blog Posts

Creating a New Blog Post

1. Create a new directory: `src/app/blog/[slug]/`

2. Add a `page.mdx` file with this structure:

```typescript

export const article = {

title: 'Your Post Title',

description: 'A brief description of your post',

author: 'Your Name',

date: 'YYYY-MM-DD'

}

Your Post Title

Your content here in MDX format...

```

3. Place any images in: `public/images/blog/[slug]/`

4. Reference images using: `/images/blog/[slug]/image.png`

Post Metadata Requirements

Each post must export an `article` object containing:

MDX Capabilities

Posts support full MDX features:

RSS Feed Generation

The RSS feed is automatically generated at `/feed.xml` by:

1. `src/app/feed.xml/route.ts` - Main feed generation logic

2. Uses the `feed` library to create RSS XML

3. Uses `cheerio` for HTML parsing and content extraction

4. Dynamically discovers all posts using the posts library

5. Fetches rendered HTML for each post to extract full content

**Important**: Requires `NEXT_PUBLIC_SITE_URL` environment variable to be set.

Key Files Reference

Component Architecture Guidelines

When working with or creating components:

Common Tasks

Adding Dark Mode Support to Components

Use the `next-themes` hook:

```typescript

import { useTheme } from 'next-themes'

const { theme, setTheme } = useTheme()

```

Apply dark mode variants using Tailwind's `dark:` prefix:

```tsx

<div className="bg-white dark:bg-gray-900">

```

Modifying Site Metadata

Edit `src/app/layout.tsx`:

Customizing MDX Components

Edit `mdx-components.tsx` to override default MDX elements:

```typescript

export function useMDXComponents(components: MDXComponents): MDXComponents {

return {

h1: ({ children }) => <h1 className="custom-class">{children}</h1>,

...components,

}

}

```

Adding New Routes

Follow Next.js App Router conventions:

Deployment Considerations

Troubleshooting

**RSS feed not generating**: Verify `NEXT_PUBLIC_SITE_URL` is set in environment

**MDX not rendering**: Check `next.config.mjs` has MDX plugin configured

**Dark mode not working**: Ensure `ThemeProvider` is in root layout and components use dark mode variants

**Images not loading**: Verify images are in `public/` and paths start with `/`