Skip to main content
Documentation menu

Pages

Learn how to customize and create new pages in the MinuteShip template

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

Core Features

The MinuteShip 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 MinuteShip are organized using TanStack Router file-based routing:

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 are written in Markdown format and located in the content/pages directory:

content/pages/privacy.md

---
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:

content/changelog/v1.0.0.md

---
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:

src/routes/(pages)/faq.tsx

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:

src/routes/(pages)/pricing.tsx

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

export const Route = createFileRoute('/(pages)/pricing')({
  head: () => ({
    ...seo('/pricing', {
      title: m.pricing_title(),
      description: m.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">
        {m.pricing_title()}
      </h1>
      {/* Pricing components */}
    </div>
  );
}

Page Routes

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

src/lib/routes.ts

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

Protected Routes

MinuteShip 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:

src/routes/dashboard.tsx

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

export const Route = createFileRoute('/dashboard')({
  server: { middleware: [authRouteMiddleware] },
  component: DashboardLayout,
});

Next Steps