From 8dcd6c09f3b6caed88188c1d1c3a2324bfd99dff Mon Sep 17 00:00:00 2001 From: Nicholai Date: Fri, 2 Jan 2026 02:27:41 -0700 Subject: [PATCH] refactor: overhaul project documentation and UI components - Delete hidden fuse file - Rewrite README with new branding, stack, and deployment instructions - Update Marquee and SectionHeading Astro components - Adjust contact page for new layout and content structure --- .claude/.fuse_hidden006d699c000001eb | 10 - README.md | 440 +++++++++++++++++++++---- src/components/ui/Marquee.astro | 1 + src/components/ui/SectionHeading.astro | 1 + src/pages/contact.astro | 1 + 5 files changed, 382 insertions(+), 71 deletions(-) delete mode 100644 .claude/.fuse_hidden006d699c000001eb diff --git a/.claude/.fuse_hidden006d699c000001eb b/.claude/.fuse_hidden006d699c000001eb deleted file mode 100644 index a67abf1..0000000 --- a/.claude/.fuse_hidden006d699c000001eb +++ /dev/null @@ -1,10 +0,0 @@ -{ - "permissions": { - "allow": [ - "Bash(ffmpeg:*)", - "Bash(ls:*)" - ], - "deny": [], - "ask": [] - } -} diff --git a/README.md b/README.md index 01ff35c..dac1dca 100644 --- a/README.md +++ b/README.md @@ -1,109 +1,427 @@ -# Astro Template +# Summit Painting & Handyman Services -Minimal Astro development environment with React, Tailwind CSS, and Cloudflare Pages deployment. +> **Craftsmanship For Your Home** -## Stack +The official website for Summit Painting & Handyman Services in Colorado Springs. Built with modern web technologies for performance, maintainability, and scalability. -- **Astro 5** - Static site framework +## Technology Stack + +- **Astro 5** - Static site generator with React islands - **React 19** - Interactive components -- **Tailwind CSS 4** - Styling -- **MDX** - Markdown with JSX -- **TypeScript** - Type safety -- **Cloudflare Pages** - Deployment -- **pnpm** - Package manager +- **TypeScript** - Type-safe development +- **Tailwind CSS 4** - Utility-first styling +- **MDX** - Markdown with embedded JSX +- **Cloudflare Pages** - Edge-deployed hosting +- **pnpm** - Fast, space-efficient package manager ## Quick Start +### Prerequisites + +- Node.js 18+ and pnpm installed +- Git for version control + +### Installation + ```bash +# Clone the repository +git clone +cd summit-painting-handyman + # Install dependencies pnpm install -# Start dev server +# Copy environment template and configure +cp .env.example .env.local +# Edit .env.local with your configuration +``` + +### Development + +```bash +# Start development server (http://localhost:3000) pnpm dev -# Build +# Build for production pnpm build -# Deploy +# Preview production build locally +pnpm preview +``` + +### Deployment + +```bash +# Deploy to Cloudflare Pages pnpm deploy ``` +## Environment Variables + +Create a `.env.local` file based on `.env.example`: + +```bash +# Site Configuration +PUBLIC_SITE_URL=https://summitpaintingcolorado.com +PUBLIC_SITE_NAME=Summit Painting & Handyman + +# Optional: Analytics, Contact Form, etc. +# Configure as needed for your services +``` + ## Project Structure ``` -src/ -├── assets/ # Images (processed by Astro) -├── components/ # React/Astro components -├── content/ # MDX content collections -│ ├── blog/ # Blog posts -│ ├── sections/ # Homepage sections -│ └── pages/ # Page content -├── layouts/ # Page layouts -├── pages/ # Routes -├── styles/ # Global CSS -└── utils/ # Utility scripts - -public/ -└── media/ # Static assets - -dev/ -├── design.json # Design system docs -└── continuity.md # Development log +summit-painting-handyman/ +├── src/ +│ ├── assets/ # Images and media processed by Astro +│ ├── components/ +│ │ ├── home/ # Homepage section components +│ │ │ ├── Hero.astro +│ │ │ ├── ServiceList.astro +│ │ │ ├── ServiceArea.astro +│ │ │ ├── WhyUs.astro +│ │ │ └── ExpertiseMosaic.astro +│ │ ├── site/ # Site-wide components +│ │ │ ├── Navigation.astro +│ │ │ ├── Footer.astro +│ │ │ └── GridOverlay.astro +│ │ └── ui/ # Reusable UI components +│ │ ├── Button.astro +│ │ ├── Container.astro +│ │ ├── Marquee.astro +│ │ └── SectionHeading.astro +│ ├── content/ # Content collections with schema validation +│ │ ├── blog/ # Blog posts (MDX) +│ │ ├── sections/ # Homepage sections +│ │ │ ├── hero.mdx +│ │ │ ├── experience.mdx +│ │ │ ├── skills.mdx +│ │ │ └── featured-project.mdx +│ │ └── pages/ # Page-specific content +│ │ └── contact.mdx +│ ├── layouts/ # Page layout templates +│ │ ├── BaseLayout.astro +│ │ └── BlogPost.astro +│ ├── pages/ # File-based routes +│ │ ├── index.astro +│ │ ├── contact.astro +│ │ ├── blog/ +│ │ │ ├── index.astro +│ │ │ └── [...slug].astro +│ │ ├── 404.astro +│ │ ├── privacy.astro +│ │ └── terms.astro +│ ├── styles/ # Global CSS +│ ├── utils/ # Utility scripts and helpers +│ ├── consts.ts # Site constants and configuration +│ └── content.config.ts # Content collection schema definitions +├── public/ +│ ├── fonts/ # Web fonts +│ └── media/ # Static assets served as-is +├── dev/ +│ ├── design.json # Complete design system documentation +│ └── continuity.md # Development change log +├── astro.config.mjs # Astro configuration +├── wrangler.jsonc # Cloudflare Pages configuration +├── tsconfig.json # TypeScript configuration +├── tailwind.config.js # Tailwind CSS configuration +└── package.json # Dependencies and scripts ``` -## Content Collections +## Architecture Overview -### Blog Posts (`src/content/blog/`) +### Content-Driven Design + +This site uses Astro's content collections for managing structured content: + +- **Collections** defined in `src/content.config.ts` with TypeScript schema validation +- **Markdown & MDX** for rich, maintainable content +- **Type-safe** frontmatter with automatic validation + +### Homepage Sections + +The homepage is composed of modular Astro components that pull from MDX content: + +1. **Hero** (`Hero.astro`) - Main banner with call-to-action +2. **Service List** (`ServiceList.astro`) - Primary services overview +3. **Service Areas** (`ServiceArea.astro`) - Geographic coverage +4. **Why Us** (`WhyUs.astro`) - Value proposition +5. **Expertise Mosaic** (`ExpertiseMosaic.astro`) - Visual showcase of work + +### Blog System + +- **Blog Index** (`src/pages/blog/index.astro`): + - Fetches all posts with `getCollection('blog')` + - Sorts by publication date (newest first) + - Supports featured post highlighting + - Implements category/tag filtering + +- **Individual Posts** (`src/pages/blog/[...slug].astro`): + - Automatic routing from MDX filenames + - Previous/next post navigation + - Related posts (same category/tags, max 3) + - Reading time calculation (200 wpm) + - Table of contents generation + +### Routing + +- **Static routes** in `src/pages/` → URLs +- **Blog routes** generated dynamically from `src/content/blog/` +- **Layouts** wrap pages with common structure +- **404 page** at `src/pages/404.astro` + +## Design System + +### Brand Colors + +```css +--color-forest: #3A4D39 /* Primary brand color */ +--color-sage: #739072 /* Secondary accent */ +--color-cream: #ECE3CE /* Background/neutrals */ +``` + +### Typography + +- **Headings**: Playfair Display (serif) + - Bold, elegant, premium feel + - Used for hero titles and section headings + +- **Body**: Plus Jakarta Sans (sans-serif) + - Modern, legible, friendly + - Used for copy, navigation, UI + +### Design Tokens + +Complete design system reference available in `dev/design.json`: +- Color palette +- Typography scales +- Spacing system +- Component patterns +- Interactive states + +## Image Handling + +### Processed Images (`src/assets/`) + +Images placed here are automatically optimized by Astro: + +```astro +// Use relative paths +import heroImage from '../../assets/hero.jpg' +Hero image +``` + +Benefits: +- Automatic AVIF conversion +- Responsive image generation +- Optimization at build time + +### Static Media (`public/media/`) + +For videos, large files, or assets not needing optimization: + +```astro + +