Pace Calculator

A React TypeScript pace calculator application that can be built into a single, self-contained HTML file.

Features

• StyleSheet.create: Uses inline styles instead of separate CSS files (similar to React Native approach)
• Single File Build: Compiles everything (including all dependencies) into one minified HTML file
• Modern React: Built with TypeScript, React 18, and Vite

Development

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173/

Building

Standard Build

npm run build

Single File Build (For NBR Squarespace)

npm run build:embed

This creates a single dist-embed/embed.html file that contains:

• All React/TypeScript code (minified)
• All dependencies inlined
• All styles embedded
• No external dependencies required

The resulting HTML file is completely self-contained and can be:

• Deployed anywhere
• Opened directly in browsers
• Embedded in other applications
• Shared as a single file

Note that is has some funky margins to account for the NBR Squarespace styling.

Elevation Data

Elevation profiles are extracted from GPX files using the script in ../gpx/:

python extract_elevations.py <input_gpx> 150 --outdir output

Copy the resulting JSON into src/assets/ and register it in src/assets/elevationData.ts and src/elevation.ts.

Project Structure

src/
├── App.tsx          # Main component with inline styles
├── main.tsx         # Entry point with global styles
└── vite-env.d.ts    # Vite type definitions

dist/
└── index.html       # Single file build output (143KB)

Build Configuration

The single file build is powered by:

• vite-plugin-singlefile: Inlines all assets and dependencies
• Custom Vite config: Optimized for single file output
• Inline StyleSheet: No external CSS dependencies

Styling Approach

Instead of traditional CSS files, this project uses a StyleSheet.create() pattern:

const StyleSheet = {
  create: (styles: Record<string, React.CSSProperties>) => styles
}

const styles = StyleSheet.create({
  container: {
    padding: '20px',
    backgroundColor: '#f5f5f5'
  }
})

// Usage
<div style={styles.container}>Content</div>

This approach:

• Eliminates CSS file dependencies
• Provides TypeScript autocompletion
• Makes the single file build possible
• Keeps styles colocated with components