mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 02:03:19 +01:00
parent 75ffe0798e
commit 6a49448e0a
18 changed files with 168 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/app/layout.tsx
View File

@@ -17,12 +17,12 @@ export const viewport: Viewport = {
maximumScale: 1,
userScalable: false,
viewportFit: 'cover',
themeColor: '#0a0a0a',
};
export const metadata: Metadata = {
title: 'GridPilot - SimRacing Platform',
description: 'The dedicated home for serious sim racing leagues. Automatic results, standings, team racing, and professional race control.',
themeColor: '#0a0a0a',
appleWebApp: {
capable: true,
statusBarStyle: 'black-translucent',

2
apps/website/app/leagues/create/CreateLeagueWizard.tsx
View File

@@ -607,7 +607,7 @@ export function CreateLeagueWizard({ stepName, onStepChange }: CreateLeagueWizar
Create a new league
</Heading>
<Text size="sm" color="text-gray-500" block>
We'll also set up your first season in {steps.length} easy steps.
We&apos;ll also set up your first season in {steps.length} easy steps.
</Text>
<Text size="xs" color="text-gray-500" block mt={1}>
A league is your long-term brand. Each season is a block of races you can run again and again.

8
apps/website/app/page.tsx
View File

@@ -1,19 +1,17 @@
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { HomeTemplate, type HomeViewData } from '@/templates/HomeTemplate';
import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
import { HomeService } from '@/lib/services/home/HomeService'; // @server-safe
import { HomePageQuery } from '@/lib/page-queries/HomePageQuery';
import { notFound, redirect } from 'next/navigation';
import { routes } from '@/lib/routing/RouteConfig';
export default async function Page() {
const homeService = new HomeService();
if (await homeService.shouldRedirectToDashboard()) {
if (await HomePageQuery.shouldRedirectToDashboard()) {
redirect(routes.protected.dashboard);
}
const data = await PageDataFetcher.fetchManual(async () => {
const result = await homeService.getHomeData();
const result = await HomePageQuery.execute();
return result.isOk() ? result.unwrap() : null;
});

10
apps/website/app/races/[id]/results/page.tsx
View File

@@ -1,5 +1,5 @@
import { notFound } from 'next/navigation';
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { RaceResultsPageQuery } from '@/lib/page-queries/races/RaceResultsPageQuery';
import RaceResultsPageClient from './RaceResultsPageClient';
@@ -25,13 +25,12 @@ export default async function RaceResultsPage({ params }: RaceResultsPageProps)
if (error === 'notFound') {
notFound();
}
// For other errors, let StatefulPageWrapper handle it
// For other errors, let PageWrapper handle it
return (
<StatefulPageWrapper
<PageWrapper
data={undefined}
Template={RaceResultsPageClient as any}
error={new Error('Failed to load race results')}
retry={() => Promise.resolve()}
/>
);
}
@@ -39,10 +38,9 @@ export default async function RaceResultsPage({ params }: RaceResultsPageProps)
const viewData = result.unwrap();
return (
<StatefulPageWrapper
<PageWrapper
data={viewData}
Template={RaceResultsPageClient}
retry={() => Promise.resolve()}
/>
);
}

1
apps/website/lib/api/base/BaseApiClient.ts
View File

@@ -16,6 +16,7 @@ export interface BaseApiClientOptions {
timeout?: number;
retry?: boolean;
retryConfig?: typeof DEFAULT_RETRY_CONFIG;
allowUnauthenticated?: boolean;
}
export class BaseApiClient {

2
apps/website/lib/api/drivers/DriversApiClient.ts
View File

@@ -28,7 +28,7 @@ export class DriversApiClient extends BaseApiClient {
/** Get current driver (based on session) */
getCurrent(): Promise<GetDriverOutputDTO | null> {
return this.get<GetDriverOutputDTO | null>('/drivers/current');
return this.get<GetDriverOutputDTO | null>('/drivers/current', { allowUnauthenticated: true });
}
/** Get driver registration status for a specific race */

24
apps/website/lib/builders/view-data/HomeViewDataBuilder.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { HomeViewData } from '@/templates/HomeTemplate';
import type { HomeDataDTO } from '@/lib/types/dtos/HomeDataDTO';
/**
* HomeViewDataBuilder
*
* Transforms HomeDataDTO to HomeViewData.
*/
export class HomeViewDataBuilder {
/**
* Build HomeViewData from HomeDataDTO
*
* @param apiDto - The API DTO
* @returns HomeViewData
*/
static build(apiDto: HomeDataDTO): HomeViewData {
return {
isAlpha: apiDto.isAlpha,
upcomingRaces: apiDto.upcomingRaces,
topLeagues: apiDto.topLeagues,
teams: apiDto.teams,
};
}
}

4
apps/website/lib/config/apiBaseUrl.ts
View File

@@ -30,8 +30,10 @@ export function getWebsiteApiBaseUrl(): string {
);
}
const isDocker = process.env.DOCKER === 'true';
const fallback =
process.env.NODE_ENV === 'development'
process.env.NODE_ENV === 'development' && !isDocker
? 'http://localhost:3001'
: 'http://api:3000';

5
apps/website/lib/feature/FeatureFlagService.ts
View File

@@ -9,6 +9,8 @@
* Client: Reads from session context or provides mock implementation
*/
import { getWebsiteApiBaseUrl } from '../config/apiBaseUrl';
// Server-side implementation
export class FeatureFlagService {
private flags: Set<string>;
@@ -41,11 +43,10 @@ export class FeatureFlagService {
/**
* Factory method to create service by fetching from API
* Fetches from ${NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'}/features
* On error, returns empty flags (secure by default)
*/
static async fromAPI(): Promise<FeatureFlagService> {
const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001';
const baseUrl = getWebsiteApiBaseUrl();
const url = `${baseUrl}/features`;
try {

50
apps/website/lib/page-queries/HomePageQuery.ts Normal file
View File

@@ -0,0 +1,50 @@
import { Result } from '@/lib/contracts/Result';
import { HomeService } from '@/lib/services/home/HomeService';
import type { HomeViewData } from '@/templates/HomeTemplate';
import type { PageQuery } from '@/lib/contracts/page-queries/PageQuery';
import { HomeViewDataBuilder } from '@/lib/builders/view-data/HomeViewDataBuilder';
/**
* HomePageQuery
*
* Server-side data fetcher for the home page.
* Returns Result<HomeViewData, string>
*/
export class HomePageQuery implements PageQuery<HomeViewData, void, string> {
/**
* Execute the home page query
*
* @returns Result with HomeViewData or error
*/
async execute(): Promise<Result<HomeViewData, string>> {
try {
const service = new HomeService();
const result = await service.getHomeData();
if (result.isErr()) {
return Result.err('Error');
}
const viewData = HomeViewDataBuilder.build(result.unwrap());
return Result.ok(viewData);
} catch (error) {
console.error('HomePageQuery failed:', error);
return Result.err('Error');
}
}
/**
* Static execute for convenience
*/
static async execute(): Promise<Result<HomeViewData, string>> {
return new HomePageQuery().execute();
}
/**
* Check if user should be redirected to dashboard
*/
static async shouldRedirectToDashboard(): Promise<boolean> {
const service = new HomeService();
return service.shouldRedirectToDashboard();
}
}

19
apps/website/lib/routing/search-params/SearchParamParser.ts
View File

@@ -42,7 +42,10 @@ export interface ParsedWizardParams {
}
export class SearchParamParser {
private static getParam(params: URLSearchParams | Record<string, string | string[] | undefined>, key: string): string | null {
private static getParam(params: URLSearchParams | Record<string, string | string[] | undefined> | undefined | null, key: string): string | null {
if (!params) {
return null;
}
if (params instanceof URLSearchParams) {
return params.get(key);
}
@@ -54,7 +57,7 @@ export class SearchParamParser {
}
// Parse auth parameters
static parseAuth(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedAuthParams, string> {
static parseAuth(params: URLSearchParams | Record<string, string | string[] | undefined> | undefined | null): Result<ParsedAuthParams, string> {
const errors: string[] = [];
const returnTo = this.getParam(params, 'returnTo');
@@ -95,7 +98,7 @@ export class SearchParamParser {
}
// Parse sponsor parameters
static parseSponsor(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedSponsorParams, string> {
static parseSponsor(params: URLSearchParams | Record<string, string | string[] | undefined> | undefined | null): Result<ParsedSponsorParams, string> {
const errors: string[] = [];
const type = this.getParam(params, 'type');
@@ -117,7 +120,7 @@ export class SearchParamParser {
}
// Parse pagination parameters
static parsePagination(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedPaginationParams, string> {
static parsePagination(params: URLSearchParams | Record<string, string | string[] | undefined> | undefined | null): Result<ParsedPaginationParams, string> {
const result: ParsedPaginationParams = {};
const errors: string[] = [];
@@ -157,7 +160,7 @@ export class SearchParamParser {
}
// Parse sorting parameters
static parseSorting(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedSortingParams, string> {
static parseSorting(params: URLSearchParams | Record<string, string | string[] | undefined> | undefined | null): Result<ParsedSortingParams, string> {
const errors: string[] = [];
const order = this.getParam(params, 'order');
@@ -179,7 +182,7 @@ export class SearchParamParser {
}
// Parse filter parameters
static parseFilters(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedFilterParams, string> {
static parseFilters(params: URLSearchParams | Record<string, string | string[] | undefined> | undefined | null): Result<ParsedFilterParams, string> {
return Result.ok({
status: this.getParam(params, 'status'),
role: this.getParam(params, 'role'),
@@ -188,14 +191,14 @@ export class SearchParamParser {
}
// Parse wizard parameters
static parseWizard(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedWizardParams, string> {
static parseWizard(params: URLSearchParams | Record<string, string | string[] | undefined> | undefined | null): Result<ParsedWizardParams, string> {
return Result.ok({
step: this.getParam(params, 'step'),
});
}
// Parse all parameters at once
static parseAll(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<
static parseAll(params: URLSearchParams | Record<string, string | string[] | undefined> | undefined | null): Result<
{
auth: ParsedAuthParams;
sponsor: ParsedSponsorParams;

12
apps/website/lib/services/home/HomeService.ts
View File

@@ -14,11 +14,17 @@ import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorR
import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
// DTO types
import type { HomeViewData } from '@/templates/HomeTemplate';
import { Result } from '@/lib/contracts/Result';
import type { Service } from '@/lib/contracts/services/Service';
import type { HomeDataDTO } from '@/lib/types/dtos/HomeDataDTO';
export class HomeService {
async getHomeData(): Promise<Result<HomeViewData, Error>> {
/**
* HomeService
*
* @server-safe
*/
export class HomeService implements Service {
async getHomeData(): Promise<Result<HomeDataDTO, Error>> {
try {
// Manual wiring: construct dependencies explicitly
const baseUrl = getWebsiteApiBaseUrl();

20
apps/website/lib/types/dtos/HomeDataDTO.ts Normal file
View File

@@ -0,0 +1,20 @@
export interface HomeDataDTO {
isAlpha: boolean;
upcomingRaces: Array<{
id: string;
track: string;
car: string;
formattedDate: string;
}>;
topLeagues: Array<{
id: string;
name: string;
description: string;
}>;
teams: Array<{
id: string;
name: string;
description: string;
logoUrl?: string;
}>;
}

4
apps/website/tailwind.config.js
View File

@@ -3,6 +3,10 @@ module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./templates/**/*.{js,ts,jsx,tsx,mdx}',
'./ui/**/*.{js,ts,jsx,tsx,mdx}',
'./lib/**/*.{js,ts,jsx,tsx,mdx}',
'./hooks/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {

31
apps/website/templates/HomeTemplate.tsx
View File

@@ -1,31 +1,30 @@
'use client';
import React from 'react';
import { LandingHero } from '@/components/landing/LandingHero';
import { AlternatingSection } from '@/components/landing/AlternatingSection';
import { FeatureGrid } from '@/components/landing/FeatureGrid';
import { DiscordCTA } from '@/ui/DiscordCTA';
import { FAQ } from '@/components/landing/FAQ';
import { Footer } from '@/ui/Footer';
import { FeatureGrid } from '@/components/landing/FeatureGrid';
import { LandingHero } from '@/components/landing/LandingHero';
import { FeatureItem, ResultItem, StepItem } from '@/components/landing/LandingItems';
import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionMockup';
import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomationMockup';
import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { ModeGuard } from '@/components/shared/ModeGuard';
import { routes } from '@/lib/routing/RouteConfig';
import { getMediaUrl } from '@/lib/utilities/media';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Container } from '@/ui/Container';
import { DiscordCTA } from '@/ui/DiscordCTA';
import { Footer } from '@/ui/Footer';
import { Grid } from '@/ui/Grid';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { Link } from '@/ui/Link';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { getMediaUrl } from '@/lib/utilities/media';
import { routes } from '@/lib/routing/RouteConfig';
import { FeatureItem, ResultItem, StepItem } from '@/components/landing/LandingItems';
import { ModeGuard } from '@/components/shared/ModeGuard';
import { Text } from '@/ui/Text';
export interface HomeViewData {
isAlpha: boolean;

16
apps/website/ui/Box.tsx
View File

@@ -89,6 +89,8 @@ export interface BoxProps<T extends ElementType> {
group?: boolean;
groupHoverBorderColor?: string;
groupHoverTextColor?: string;
groupHoverScale?: boolean;
groupHoverOpacity?: number;
fontSize?: string;
transform?: string;
borderWidth?: string;
@@ -111,6 +113,8 @@ export interface BoxProps<T extends ElementType> {
webkitMaskImage?: string;
backgroundSize?: string;
backgroundPosition?: string;
backgroundColor?: string;
insetY?: Spacing | string;
}
type ResponsiveValue<T> = {
@@ -136,6 +140,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
flexDirection,
alignItems,
justifyContent,
flexWrap,
position,
top,
bottom,
@@ -183,6 +188,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
group,
groupHoverBorderColor,
groupHoverTextColor,
groupHoverScale,
groupHoverOpacity,
fontSize,
transform,
borderWidth,
@@ -204,6 +211,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
webkitMaskImage,
backgroundSize,
backgroundPosition,
backgroundColor,
insetY,
...props
}: BoxProps<T> & ComponentPropsWithoutRef<T>,
ref: ForwardedRef<HTMLElement>
@@ -321,18 +330,20 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
borderRight ? 'border-r' : '',
borderColor ? borderColor : '',
ring ? ring : '',
bg ? bg : '',
bg ? bg : (backgroundColor ? (backgroundColor.startsWith('bg-') ? backgroundColor : `bg-${backgroundColor}`) : ''),
color ? color : '',
hoverColor ? `hover:${hoverColor}` : '',
shadow ? shadow : '',
flexShrink !== undefined ? `flex-shrink-${flexShrink}` : '',
flexGrow !== undefined ? `flex-grow-${flexGrow}` : '',
flexWrap ? `flex-${flexWrap}` : '',
hoverBorderColor ? `hover:${hoverBorderColor}` : '',
hoverTextColor ? `hover:${hoverTextColor}` : '',
hoverBg ? `hover:${hoverBg}` : '',
transition ? 'transition-all' : '',
lineClamp ? `line-clamp-${lineClamp}` : '',
inset ? `inset-${inset}` : '',
insetY !== undefined && spacingMap[insetY as string | number] ? `inset-y-${spacingMap[insetY as string | number]}` : '',
bgOpacity !== undefined ? `bg-opacity-${bgOpacity * 100}` : '',
opacity !== undefined ? `opacity-${opacity * 100}` : '',
blur ? `blur-${blur}` : '',
@@ -343,6 +354,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
group ? 'group' : '',
groupHoverBorderColor ? `group-hover:border-${groupHoverBorderColor}` : '',
groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
groupHoverScale ? 'group-hover:scale-[1.02]' : '',
groupHoverOpacity !== undefined ? `group-hover:opacity-${groupHoverOpacity * 100}` : '',
getResponsiveClasses('', display),
getFlexDirectionClass(flexDirection),
getAlignItemsClass(alignItems),
@@ -390,6 +403,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
...(bottom !== undefined && !spacingMap[bottom as string | number] ? { bottom } : {}),
...(left !== undefined && !spacingMap[left as string | number] ? { left } : {}),
...(right !== undefined && !spacingMap[right as string | number] ? { right } : {}),
...(insetY !== undefined && !spacingMap[insetY as string | number] ? { top: insetY, bottom: insetY } : {}),
...(hideScrollbar ? { scrollbarWidth: 'none', msOverflowStyle: 'none', '&::-webkit-scrollbar': { display: 'none' } } : {}),
...((props as Record<string, unknown>).style as object || {})
};

4
apps/website/ui/Text.tsx
View File

@@ -1,5 +1,5 @@
import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
import { BoxProps } from './Box';
import { Box, BoxProps } from './Box';
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
@@ -194,5 +194,5 @@ export function Text<T extends ElementType = 'span'>({
...style
};
return <Tag className={classes} style={combinedStyle} {...props}>{children}</Tag>;
return <Box as={Tag} className={classes} style={combinedStyle} {...props}>{children}</Box>;
}

1
docker-compose.dev.yml
View File

@@ -76,6 +76,7 @@ services:
- NEXT_TELEMETRY_DISABLED=1
- NODE_ENV=development
- API_BASE_URL=http://api:3000
- DOCKER=true
ports:
- "3000:3000"
volumes: