Pages

This guide covers the page system in the TanStarter template, how to customize existing pages, and how to create new pages for your specific needs.

Core Features

The TanStarter template includes several page types that you can customize:

• Customize legal pages (Cookie Policy, Privacy Policy, Terms of Service)
• Maintain changelog entries for version releases
• Create marketing and informational pages (About, Contact, Waitlist, Roadmap)
• Add completely custom pages for your specific needs

Page Structure

Pages in TanStarter are organized using TanStack Router file-based routing:

Legal Pages

Legal pages content is stored in the content/pages directory and rendered via routes in src/routes/(legals)/:

• Cookie Policy: src/routes/(legals)/cookie.tsx
• Privacy Policy: src/routes/(legals)/privacy.tsx
• Terms of Service: src/routes/(legals)/terms.tsx

Changelog Entries

Release notes are stored in the content/changelog directory and displayed on the Changelog page:

• Changelog: src/routes/(pages)/changelog.tsx — Each release has its own Markdown file with version details

Marketing Pages

Marketing pages are rendered via routes in src/routes/(pages)/:

• About: src/routes/(pages)/about.tsx
• Contact: src/routes/(pages)/contact.tsx
• Pricing: src/routes/(pages)/pricing.tsx
• Waitlist: src/routes/(pages)/waitlist.tsx
• Roadmap: src/routes/(pages)/roadmap.tsx

Customizing Existing Pages

Legal Pages

Legal pages are written in Markdown format and located in the content/pages directory:

---
title: Privacy Policy
description: Our commitment to protecting your privacy and personal data
date: "2025-03-10"
---

## Introduction

Welcome to our Privacy Policy...

To customize a legal page:

1. Open the corresponding Markdown file in content/pages
2. Update the frontmatter metadata (title, description, date)
3. Modify the content in Markdown format
4. Save the file — the page will automatically update

Changelog Entries

Changelog entries are stored as Markdown files in content/changelog:

---
title: "Initial Release"
description: "Our first official release with core features"
date: "2024-03-01"
version: "v1.0.0"
published: true
---

### Core Features

- **User Authentication**: Secure login and registration
- **Dashboard**: Intuitive dashboard for managing your projects

To add a new release, create a new Markdown file in content/changelog (e.g., v1.1.0.md).

Creating New Pages

1. Content-Based Pages

For content-heavy pages, add a new Markdown file to content/pages and create a corresponding route:

import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/(pages)/faq')({
  component: FAQPage,
});

function FAQPage() {
  return (
    <div className="max-w-4xl mx-auto space-y-8 py-12">
      <h1 className="text-3xl font-bold">FAQ</h1>
      {/* Your content here */}
    </div>
  );
}

2. Component-Based Pages

For pages requiring complex interactivity, create a new route file with custom components:

import { createFileRoute } from '@tanstack/react-router';
import { messages } from '@/messages';
import { seo } from '@/lib/seo';

export const Route = createFileRoute('/(pages)/pricing')({
  head: () => ({
    ...seo('pricing', {
      title: messages.pricing.title,
      description: messages.pricing.description,
    }),
  }),
  component: PricingPage,
});

function PricingPage() {
  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <h1 className="text-center text-3xl font-bold">
        {messages.pricing.title}
      </h1>
      {/* Pricing components */}
    </div>
  );
}

Page Routes

Route constants are defined in src/lib/routes.ts:

export const Routes = {
  Root: '/',
  Login: '/auth/login',
  Register: '/auth/register',
  Dashboard: '/dashboard',
  Settings: '/settings',
  // ...
};

Protected Routes

TanStarter uses middleware for route protection. User dashboard and settings pages are protected via authRouteMiddleware defined in src/middlewares/, while admin user management pages are protected via adminRouteMiddleware:

import { createFileRoute } from '@tanstack/react-router';
import { authRouteMiddleware } from '@/middlewares/auth-middleware';

export const Route = createFileRoute('/dashboard')({
  beforeLoad: ({ context }) => authRouteMiddleware(context),
  component: DashboardLayout,
});

Next Steps