{"id":29902746,"url":"https://github.com/srdjan/kelpapp","last_synced_at":"2025-08-01T16:12:48.231Z","repository":{"id":303518372,"uuid":"1012157461","full_name":"srdjan/kelpapp","owner":"srdjan","description":"Modern SSR Web App styled with KelpUI ","archived":false,"fork":false,"pushed_at":"2025-07-01T22:58:13.000Z","size":38,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-27T04:36:39.603Z","etag":null,"topics":["css","example","html","template","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/srdjan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-01T22:58:12.000Z","updated_at":"2025-07-01T22:59:30.000Z","dependencies_parsed_at":"2025-07-08T04:49:33.400Z","dependency_job_id":"fc816f0c-7fca-4a16-86e5-9b751f165178","html_url":"https://github.com/srdjan/kelpapp","commit_stats":null,"previous_names":["srdjan/kelpapp"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/srdjan/kelpapp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srdjan%2Fkelpapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srdjan%2Fkelpapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srdjan%2Fkelpapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srdjan%2Fkelpapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srdjan","download_url":"https://codeload.github.com/srdjan/kelpapp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srdjan%2Fkelpapp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268257462,"owners_count":24221059,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","example","html","template","web"],"created_at":"2025-08-01T16:12:44.955Z","updated_at":"2025-08-01T16:12:48.216Z","avatar_url":"https://github.com/srdjan.png","language":"TypeScript","readme":"# Kelp UI Landing Page - Modern SSR Web App\n\nA beautiful, high-performance landing page for the Kelp UI library built with **Deno**, **HTMX**, and **functional TypeScript**. This project showcases modern web development practices with server-side rendering, progressive enhancement, and a sophisticated design system.\n\n![Kelp UI Landing Page](https://img.shields.io/badge/Deno-2.0-00599C?style=for-the-badge\u0026logo=deno)\n![TypeScript](https://img.shields.io/badge/TypeScript-Functional-3178C6?style=for-the-badge\u0026logo=typescript)\n![HTMX](https://img.shields.io/badge/HTMX-Progressive-336791?style=for-the-badge)\n\n## ✨ Key Features\n\n### 🏗️ **Modern Architecture**\n- **Server-Side Rendering (SSR)** with Deno for optimal performance\n- **Functional TypeScript** - Zero classes, pure functions, algebraic data types\n- **Type-safe routing** with pattern matching and validation\n- **Result types** for explicit error handling without exceptions\n\n### 🎨 **Beautiful Design System**\n- **Blue-to-Orange gradient** color palette with 50+ design tokens\n- **Inter + Space Grotesk** typography with responsive scaling\n- **8pt grid system** for consistent spacing\n- **Micro-interactions** and hover effects throughout\n- **Mobile-first responsive design** with container queries\n\n### ⚡ **Performance \u0026 UX**\n- **Progressive enhancement** with HTMX for dynamic interactions\n- **Real-time form validation** without page refreshes\n- **Optimized static asset serving** with proper caching headers\n- **Security-first** approach with comprehensive headers\n- **Newsletter subscription** with server-side validation\n\n### 🛠️ **Developer Experience**\n- **Hot reload** development server\n- **Comprehensive testing** with Deno's built-in test runner\n- **Type checking** and linting with strict TypeScript\n- **Functional programming patterns** following CLAUDE.md guidelines\n\n## 📁 Project Structure\n\n```\n├── src/\n│   ├── lib/\n│   │   ├── types.ts          # Core type definitions\n│   │   ├── router.ts         # Functional router implementation\n│   │   └── validation.ts     # Pure validation functions\n│   ├── server/\n│   │   ├── handlers.ts       # Route handlers\n│   │   ├── static.ts         # Static file serving\n│   │   └── data.ts           # Application data\n│   ├── templates/\n│   │   ├── layout.ts         # HTML layout templates\n│   │   └── components.ts     # Reusable components\n│   └── main.ts               # Server entry point\n├── public/\n│   └── styles.css            # CSS design system\n├── deno.json                 # Deno configuration\n└── README.md\n```\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- **[Deno](https://deno.land/) v1.40+** - Modern JavaScript/TypeScript runtime\n- **Git** - For cloning the repository\n\n### Installation \u0026 Setup\n\n```bash\n# Clone the repository\ngit clone \u003crepository-url\u003e\ncd kelpapp\n\n# Start development server with hot reload\ndeno task dev\n\n# Open in your browser\nopen http://localhost:8000\n```\n\n### 🔧 Available Commands\n\n| Command | Description |\n|---------|-------------|\n| `deno task dev` | Start development server with hot reload |\n| `deno task start` | Start production server |\n| `deno task test` | Run all tests with coverage |\n| `deno task typecheck` | Type check all TypeScript files |\n| `deno task fmt` | Format code with Deno formatter |\n| `deno task lint` | Lint code with Deno linter |\n\n### 🧪 Testing\n\n```bash\n# Run all tests\ndeno task test\n\n# Run specific test file\ndeno test src/lib/validation_test.ts --allow-all\n\n# Run tests with coverage\ndeno test --coverage=coverage/ src/\n```\n\n## 🌐 API Reference\n\n### 📄 **Pages**\n| Endpoint | Method | Description |\n|----------|--------|-------------|\n| `/` | GET | Beautiful landing page with hero, features, testimonials |\n| `/index.html` | GET | Compatibility redirect to homepage |\n\n### 🔌 **API Endpoints**\n| Endpoint | Method | Description | Response |\n|----------|--------|-------------|----------|\n| `/api/newsletter` | POST | Newsletter subscription with validation | HTML fragment |\n| `/api/newsletter/stats` | GET | Current subscription statistics | JSON |\n| `/api/health` | GET | Server health check | JSON |\n\n### 📁 **Static Assets**\n| Endpoint | Description | Cache |\n|----------|-------------|-------|\n| `/styles.css` | Complete design system CSS | 1 year |\n| `/favicon.ico` | Site favicon | 1 year |\n\n### 📋 **Example API Usage**\n\n```bash\n# Subscribe to newsletter\ncurl -X POST http://localhost:8000/api/newsletter \\\n  -H \"Content-Type: application/x-www-form-urlencoded\" \\\n  -d \"email=user@example.com\"\n\n# Get subscription stats\ncurl http://localhost:8000/api/newsletter/stats\n\n# Health check\ncurl http://localhost:8000/api/health\n```\n\n## 🏗️ Architecture\n\nThis application follows **functional TypeScript** principles:\n\n### Core Principles\n\n1. **Zero Classes** - Everything built with pure functions\n2. **Type-Driven Design** - Comprehensive type safety\n3. **Immutable Data** - All data structures are readonly\n4. **Result Types** - Explicit error handling with `Result\u003cT, E\u003e`\n5. **Pure Functions** - Side effects pushed to boundaries\n\n### Key Patterns\n\n```typescript\n// Result type for error handling\ntype Result\u003cT, E = Error\u003e =\n  | { readonly success: true; readonly data: T }\n  | { readonly success: false; readonly error: E };\n\n// Functional route creation\nconst createRoute = (pattern: string, handler: RouteHandler): RouteConfig =\u003e ({\n  pattern: new RegExp(`^${pattern.replace(/:\\w+/g, \"([^/]+)\")}$`),\n  handler,\n});\n\n// Pure validation functions\nconst validateEmail = (email: string): ValidationResult\u003cstring\u003e =\u003e {\n  // Implementation\n};\n```\n\n## 🎨 Design System\n\n### **Color Palette**\n```css\n/* Primary (Blue) */\n--color-primary-500: #0ea5e9;  /* Main blue */\n--color-primary-600: #0284c7;  /* Button blue */\n\n/* Accent (Orange) */\n--color-accent-500: #f97316;   /* Main orange */\n--color-accent-600: #ea580c;   /* Strong orange */\n\n/* Gradients */\n--gradient-primary: linear-gradient(135deg, #0284c7 0%, #ea580c 100%);\n--gradient-hero: linear-gradient(135deg, #0ea5e9 0%, #f97316 50%, #0369a1 100%);\n```\n\n### **Typography Scale**\n- **Display Font**: Space Grotesk (headings, brand)\n- **Body Font**: Inter (content, UI)\n- **Scale**: 12px → 72px with responsive clamp()\n\n### **Spacing System**\n- **8pt Grid**: `--space-1` (4px) → `--space-32` (128px)\n- **Consistent rhythm** across all components\n\n### **Component Features**\n- **Micro-interactions**: Smooth hover effects and transitions\n- **Accessibility**: ARIA labels, semantic HTML, keyboard navigation\n- **Responsive**: Mobile-first with container queries\n- **Performance**: Optimized animations with `transform` and `opacity`\n\n## 🔧 HTMX Integration\n\nHTMX provides progressive enhancement for dynamic interactions:\n\n```html\n\u003c!-- Newsletter form with HTMX --\u003e\n\u003cform \n  hx-post=\"/api/newsletter\" \n  hx-target=\"#newsletter-response\"\n  hx-swap=\"innerHTML\"\n  hx-indicator=\"#newsletter-loading\"\n\u003e\n  \u003c!-- Form content --\u003e\n\u003c/form\u003e\n```\n\n## 🚀 Deployment\n\n### **Environment Variables**\n```bash\nPORT=8000          # Server port (default: 8000)\nDENO_ENV=production # Environment mode\n```\n\n### **Production Deployment**\n\n#### **Direct Deployment**\n```bash\n# Production server\ndeno task start\n\n# Custom port\nPORT=3000 deno task start\n\n# Background process\nnohup deno task start \u003e server.log 2\u003e\u00261 \u0026\n```\n\n#### **Docker Deployment**\n```dockerfile\nFROM denoland/deno:1.44.4\n\nWORKDIR /app\nCOPY . .\n\n# Cache dependencies\nRUN deno cache src/main.ts\n\nEXPOSE 8000\n\nUSER deno\n\nCMD [\"deno\", \"task\", \"start\"]\n```\n\n```bash\n# Build and run\ndocker build -t kelp-landing .\ndocker run -p 8000:8000 kelp-landing\n```\n\n#### **Cloud Platforms**\n- **Deno Deploy**: Direct deployment with `deployctl`\n- **Railway**: Connect GitHub repo for auto-deploys\n- **Fly.io**: Use provided Dockerfile\n- **DigitalOcean App Platform**: Node.js buildpack with Deno\n\n### **Performance Metrics**\n\n| Metric | Value | Description |\n|--------|-------|-------------|\n| **First Contentful Paint** | \u003c1.2s | Server-side rendering |\n| **Largest Contentful Paint** | \u003c2.5s | Optimized images \u0026 fonts |\n| **Cumulative Layout Shift** | \u003c0.1 | Stable layout design |\n| **Bundle Size** | ~45KB | Minimal CSS, no JS framework |\n| **Lighthouse Score** | 95+ | Performance, Accessibility, SEO |\n\n### **Security Features**\n\n#### **HTTP Security Headers**\n```http\nX-Content-Type-Options: nosniff\nX-Frame-Options: DENY\nX-XSS-Protection: 1; mode=block\nReferrer-Policy: strict-origin-when-cross-origin\nContent-Security-Policy: default-src 'self'\n```\n\n#### **Input Validation**\n- **Type-safe validation** with Result types\n- **Email format validation** with regex\n- **XSS prevention** through HTML escaping\n- **CSRF protection** ready for implementation\n\n## 📚 Learning Resources\n\n### **Functional TypeScript Patterns**\n- **Result Types**: Explicit error handling without exceptions\n- **Pure Functions**: Predictable, testable code\n- **Algebraic Data Types**: Type-safe domain modeling\n- **Pattern Matching**: Exhaustive conditional logic\n\n### **Modern Web Development**\n- **Server-Side Rendering**: SEO-friendly, fast initial loads\n- **Progressive Enhancement**: Works without JavaScript\n- **Semantic HTML**: Accessibility-first markup\n- **CSS Custom Properties**: Maintainable design systems\n\n### **Resources**\n- [Deno Documentation](https://docs.deno.com/)\n- [HTMX Guide](https://htmx.org/docs/)\n- [Functional TypeScript](https://github.com/gcanti/fp-ts)\n- [Kelp UI Library](https://kelpui.com/)\n\n## 🤝 Contributing\n\nWe welcome contributions! Please follow these guidelines:\n\n1. **Fork the repository** and create a feature branch\n2. **Follow functional TypeScript patterns** (no classes)\n3. **Add tests** for new functionality\n4. **Update documentation** as needed\n5. **Run quality checks**: `deno task test \u0026\u0026 deno task typecheck \u0026\u0026 deno task lint`\n6. **Submit a pull request** with a clear description\n\n### **Development Workflow**\n```bash\n# Setup development environment\ngit clone \u003cyour-fork\u003e\ncd kelpapp\n\n# Create feature branch\ngit checkout -b feature/amazing-feature\n\n# Make changes and test\ndeno task dev\ndeno task test\n\n# Quality assurance\ndeno task typecheck\ndeno task fmt\ndeno task lint\n\n# Commit and push\ngit add .\ngit commit -m \"Add amazing feature\"\ngit push origin feature/amazing-feature\n```\n\n## 📄 License\n\n**MIT License** - Feel free to use this project for learning, commercial projects, or as a starting point for your own landing pages.\n\n---\n\n**Built with ❤️ by the community**\n\n🚀 **Tech Stack**: Deno + HTMX + Functional TypeScript + Modern CSS  \n🎨 **Design**: Blue-to-Orange gradient system with micro-interactions  \n⚡ **Performance**: SSR + Progressive Enhancement + Zero JS frameworks  \n🔒 **Security**: Comprehensive headers + Type-safe validation","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrdjan%2Fkelpapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrdjan%2Fkelpapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrdjan%2Fkelpapp/lists"}