diff --git a/apps/website/FOLDER_STRUCTURE.md b/apps/website/FOLDER_STRUCTURE.md
index 2997bd19..68ecdff5 100644
--- a/apps/website/FOLDER_STRUCTURE.md
+++ b/apps/website/FOLDER_STRUCTURE.md
@@ -5,6 +5,7 @@ This document describes the folder structure for the `apps/website` project, spe
## Overview
The codebase follows a clear separation of concerns with three main categories:
+
- **Components**: Presentational UI components (dummy components)
- **Features**: Business logic and functional components
- **Utils**: Utility functions, constants, and shared types
@@ -87,10 +88,12 @@ src/lib/
## Naming Conventions
### Files and Folders
+
- **Kebab-case**: All file and folder names use kebab-case (e.g., `blog-list-item.svelte`, `feedback-form.svelte`)
- **Single-file folders**: If a folder contains only one file, it should be flattened to a single file (e.g., `Footer/Footer.svelte` → `components/footer.svelte`)
### Components
+
- Component files use `.svelte` extension
- Component names match their file names in kebab-case
- Example: `blog-list-item.svelte` exports a component that can be imported as `BlogListItem`
@@ -102,18 +105,21 @@ src/lib/
**Purpose**: Presentational components with minimal or no business logic. These are "dummy" components that receive props and render UI.
**Characteristics**:
+
- No API calls or complex state management
- Primarily focused on rendering and styling
- May have simple local state for UI interactions (e.g., open/close modals)
- Reusable across different pages/features
**Examples**:
+
- `footer.svelte` - Site footer component
- `navigation.svelte` - Site navigation bar
- `hero.svelte` - Hero section component
- `modal.svelte` - Generic modal wrapper
**Import Pattern**:
+
```svelte
// ✅ CORRECT - Use named imports from the index
import { Footer, Navigation, Hero } from '$lib/components';
@@ -129,17 +135,20 @@ import { Footer, Navigation, Hero } from '$lib/components';
**Purpose**: Components and modules that contain business logic, API calls, form handling, state management, or domain-specific functionality.
**Characteristics**:
+
- Contains business logic and data handling
- May include API calls, form submissions, or data transformations
- Often includes stores, utilities, or helper functions specific to the feature
- Organized by feature domain (e.g., `contact/`, `tools/`)
**Examples**:
+
- `features/contact/feedback-form.svelte` - Form with submission logic
- `features/tools/progress/store.ts` - State management for progress tool
- `features/tools/tic-tac-toe/board.ts` - Game logic
**Import Pattern**:
+
```svelte
import FeedbackForm from '$lib/features/contact/feedback-form.svelte';
import { htmlBody, openModal } from '$lib/features/tools/progress/store';
@@ -150,12 +159,14 @@ import { htmlBody, openModal } from '$lib/features/tools/progress/store';
**Purpose**: Shared utility functions, constants, types, and helper modules used across the application.
**Characteristics**:
+
- Pure functions or utility modules
- No component-specific logic
- Reusable across different features/components
- May include TypeScript types and interfaces
**Examples**:
+
- `utils/format-date.ts` - Date formatting utility
- `utils/is-form-valid.ts` - Form validation helper
- `utils/submit-form.ts` - Generic form submission utility
@@ -163,6 +174,7 @@ import { htmlBody, openModal } from '$lib/features/tools/progress/store';
- `utils/constants/tools.ts` - Application constants
**Import Pattern**:
+
```typescript
import { formatDate } from '$lib/utils/format-date';
import { isFormValid } from '$lib/utils/is-form-valid';
@@ -219,7 +231,7 @@ src/lib/
@@ -307,6 +319,7 @@ Routes now import from `$lib/features/tools/*/` instead of `./components/`.
## Assets
Static assets like images, SVGs, and other media files remain in their respective locations:
+
- `emojis/` - Emoji SVG files
- `public/` - Public static assets (images, fonts, etc.)
@@ -323,6 +336,7 @@ export { default as Navigation } from './navigation.svelte';
```
This allows for clean, consistent imports:
+
```svelte
import { Footer, Navigation, Hero } from '$lib/components';
```
@@ -332,6 +346,7 @@ import { Footer, Navigation, Hero } from '$lib/components';
## Summary
This structure provides:
+
- ✅ Clear separation between UI and business logic
- ✅ Consistent naming conventions (kebab-case)
- ✅ Flattened structure (no unnecessary single-file folders)
@@ -341,4 +356,3 @@ This structure provides:
- ✅ Scalable for future growth
For questions or suggestions about this structure, please refer to the project maintainers.
-
diff --git a/apps/website/jsconfig.json b/apps/website/jsconfig.json
index fe45e13f..f1da068b 100644
--- a/apps/website/jsconfig.json
+++ b/apps/website/jsconfig.json
@@ -1,17 +1,17 @@
{
- "extends": "./.svelte-kit/tsconfig.json",
- "compilerOptions": {
- "allowJs": true,
- "checkJs": true,
- "esModuleInterop": true,
- "forceConsistentCasingInFileNames": true,
- "resolveJsonModule": true,
- "skipLibCheck": true,
- "sourceMap": true,
- "strict": true
- }
- // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
- //
- // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
- // from the referenced tsconfig.json - TypeScript does not merge them in
+ "extends": "./.svelte-kit/tsconfig.json",
+ "compilerOptions": {
+ "allowJs": true,
+ "checkJs": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "sourceMap": true,
+ "strict": true
+ }
+ // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+ //
+ // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+ // from the referenced tsconfig.json - TypeScript does not merge them in
}
diff --git a/apps/website/src/app.d.ts b/apps/website/src/app.d.ts
index f59b884c..899c7e8f 100644
--- a/apps/website/src/app.d.ts
+++ b/apps/website/src/app.d.ts
@@ -1,12 +1,12 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
- namespace App {
- // interface Error {}
- // interface Locals {}
- // interface PageData {}
- // interface Platform {}
- }
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface Platform {}
+ }
}
export {};
diff --git a/apps/website/src/app.html b/apps/website/src/app.html
index 5171f400..20a536e0 100644
--- a/apps/website/src/app.html
+++ b/apps/website/src/app.html
@@ -1,20 +1,19 @@
+
+
+
+
-
-
-
-
-
-
-
-
+
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
+
-
+
-
-
-
- %sveltekit.head%
-
+ Cal('ui', {
+ theme: 'light',
+ styles: { branding: { brandColor: '#1D4EE2' } },
+ hideEventTypeDetails: false,
+ layout: 'month_view'
+ });
+
+ %sveltekit.head%
+
-
-