Welcome to web-projects
Relevant source files
The following files were used as context for generating this wiki page:
Welcome to the technical documentation for web-projects, a monorepo containing a collection of personal web applications, libraries, and experimental playgrounds. This repository serves as a centralized environment for developing diverse tools ranging from personal blogs and gaming data services to specialized CSS color utilities and UI animation libraries.
The project leverages a modern TypeScript-first stack, utilizing high-performance tools like Bun for package management and Turborepo for build orchestration. The architecture is designed to share configurations and components across various internal packages while maintaining strict code quality standards through Biome and automated testing suites.
Sources: README.md:1-5, CLAUDE.md:32-48, AGENTS.md:32-48
Repository Architecture
The project is structured as a monorepo managed by Turborepo and Bun Workspaces. This allows for efficient task execution, caching, and dependency management between internal packages.
Workspace Structure
The repository is divided into three primary directories:
| Directory | Description |
|---|---|
apps/ | End-user applications like blogs and search services. |
packages/ | Reusable libraries, CLI tools, and shared configurations. |
playgrounds/ | Environments for local testing and visual verification. |
Sources: CLAUDE.md:32-52, AGENTS.md:32-52, package.json:44-48
Dependency Flow
The following diagram illustrates how different workspaces interact and depend on shared packages.
The diagram shows that shared libraries like @siluat/ui-craft and @siluat/color-contrast are consumed by higher-level applications and CLI tools within the workspace.
Sources: CLAUDE.md:65-68, AGENTS.md:65-68, apps/dotori-note/package.json:17-18, packages/color-contrast/CLAUDE.md:15-18
Core Projects and Modules
Web Applications
- dotori-note: A personal blog built with Astro, React, and TailwindCSS. It uses MDX for content management and includes specialized GTM (Google Tag Manager) configurations.
- noumenon-front: A search service for Final Fantasy XIV data, currently in early development.
Sources: README.md:9-13, apps/dotori-note/README.md:30-40
Libraries and Utilities
- @siluat/ui-craft: A React-based animation library using Framer Motion and Flubber for complex path morphing.
- @siluat/color-contrast: A zero-dependency library for WCAG color contrast computation, supporting various color spaces including OkLCH and LAB.
- noumenon-gleaner: A Rust-based CLI tool used for data extraction and TypeScript schema generation.
Sources: README.md:17-27, packages/ui-craft/package.json:30-34, packages/color-contrast/CLAUDE.md:1-5
Technology Stack and Standards
The project follows a strict set of technical standards to ensure consistency across the monorepo.
Development Environment
- Package Manager: Bun (v1.3.4+) or Node.js (v22.5.0+).
- Build Orchestration: Turborepo for running
dev,build, andtesttasks. - Code Quality: Biome for linting and formatting; TypeScript for static typing.
- Git Hooks: Lefthook is used for pre-commit checks.
Sources: CLAUDE.md:5-24, package.json:34-42
Testing Strategy
Testing is distributed based on the component type:
- UI Components: Tested using Vitest and React Testing Library.
- E2E: Playwright is utilized for user-facing applications (e.g.,
dotori-note). - Rust Logic: Standard Cargo test framework.
- Documentation: Doctests are implemented in
@siluat/color-contrastto ensure MDX examples remain accurate.
Sources: CLAUDE.md:71-77, AGENTS.md:71-77, packages/color-contrast/src/doctest.test.ts:1-12
Common Commands
# Start development servers
turbo dev
# Build all projects
turbo run build
# Run formatting and linting
biome check . --write
# Generate a new package from template
turbo gen package
Sources: CLAUDE.md:11-20, README.md:38-40
Conclusion
The web-projects repository is a highly structured monorepo that prioritizes performance and code quality. By combining modern frontend frameworks like Astro and React 19 with robust system languages like Rust, it provides a versatile foundation for both consumer-facing web applications and low-level utility libraries. The use of Turborepo and Bun ensures that the development workflow remains fast and scalable as new projects are added to the collection.
Sources: README.md:1-7, CLAUDE.md:32-62