docs: Update skeleton loader implementation from hyperscript to JavaScript

MIGRATION SUMMARY:
- Moved skeleton loader logic from hyperscript to JavaScript (main.js)
- Changed from htmx:oobAfterSwap to htmx:afterSettle event
- Changed OOB swap from innerHTML to outerHTML for proper element replacement
- Added languageSwitching flag for state tracking
- Added 100ms delay after afterSettle for final render completion

DOCUMENTATION UPDATES:
- 2-MODERN-WEB-TECHNIQUES.md: Updated skeleton loader section with
This commit is contained in:
juanatsap
2025-11-18 19:32:28 +00:00
parent 65eb91b00b
commit 1f6f8e417e
13 changed files with 539 additions and 150 deletions
+31 -31
View File
@@ -9,25 +9,25 @@
### For Developers
**Getting Started**
- [Architecture Overview](ARCHITECTURE.md) - System design and Go backend architecture
- [Modern Web Techniques](MODERN-WEB-TECHNIQUES.md) - Frontend architecture (HTMX, Hyperscript, CSS) ⭐
- [API Reference](API.md) - Complete API documentation with endpoints and responses
- [1. Architecture Overview](1-ARCHITECTURE.md) - System design and Go backend architecture
- [2. Modern Web Techniques](2-MODERN-WEB-TECHNIQUES.md) - Frontend architecture (HTMX, Hyperscript, CSS) ⭐
- [3. API Reference](3-API.md) - Complete API documentation with endpoints and responses
**Technical Implementation**
- [Hyperscript Rules](HYPERSCRIPT-RULES.md) - Hyperscript conventions and best practices
- [Zoom Implementation](ZOOM_IMPLEMENTATION.md) - Custom zoom feature technical details
- [4. Hyperscript Rules](4-HYPERSCRIPT-RULES.md) - Hyperscript conventions and best practices
- [5. Zoom Implementation](5-ZOOM-IMPLEMENTATION.md) - Custom zoom feature technical details
**Deployment & Operations**
- [Deployment Guide](DEPLOYMENT.md) - Production deployment instructions
- [Security Policies](SECURITY.md) - Security guidelines and vulnerability reporting
- [8. Deployment Guide](8-DEPLOYMENT.md) - Production deployment instructions
- [9. Security Policies](9-SECURITY.md) - Security guidelines and vulnerability reporting
---
### For Users & Customizers
- [User Guide](USER_GUIDE.md) - End-user documentation for CV features
- [Customization Guide](CUSTOMIZATION.md) - How to customize your CV content and styling
- [Privacy Policy](PRIVACY.md) - Data handling and privacy information
- [6. User Guide](6-USER-GUIDE.md) - End-user documentation for CV features
- [7. Customization Guide](7-CUSTOMIZATION.md) - How to customize your CV content and styling
- [10. Privacy Policy](10-PRIVACY.md) - Data handling and privacy information
---
@@ -35,23 +35,23 @@
### Core Technical Documentation
| Document | Purpose | Audience |
|----------|---------|----------|
| [ARCHITECTURE.md](ARCHITECTURE.md) | Go backend architecture, package structure, design patterns | Backend developers |
| [MODERN-WEB-TECHNIQUES.md](MODERN-WEB-TECHNIQUES.md) | HTMX/Hyperscript frontend architecture, component patterns, ADRs | Frontend developers |
| [API.md](API.md) | Complete API reference with all endpoints | API consumers, integrators |
| [ZOOM_IMPLEMENTATION.md](ZOOM_IMPLEMENTATION.md) | Zoom feature implementation details | Feature developers |
| [HYPERSCRIPT-RULES.md](HYPERSCRIPT-RULES.md) | Hyperscript coding conventions | Frontend developers |
| # | Document | Purpose | Audience |
|---|----------|---------|----------|
| 1 | [ARCHITECTURE.md](1-ARCHITECTURE.md) | Go backend architecture, package structure, design patterns | Backend developers |
| 2 | [MODERN-WEB-TECHNIQUES.md](2-MODERN-WEB-TECHNIQUES.md) | HTMX/Hyperscript frontend architecture, component patterns, ADRs | Frontend developers |
| 3 | [API.md](3-API.md) | Complete API reference with all endpoints | API consumers, integrators |
| 4 | [HYPERSCRIPT-RULES.md](4-HYPERSCRIPT-RULES.md) | Hyperscript coding conventions | Frontend developers |
| 5 | [ZOOM_IMPLEMENTATION.md](5-ZOOM-IMPLEMENTATION.md) | Zoom feature implementation details | Feature developers |
### User & Operations Documentation
| Document | Purpose | Audience |
|----------|---------|----------|
| [USER_GUIDE.md](USER_GUIDE.md) | End-user feature documentation | CV users |
| [CUSTOMIZATION.md](CUSTOMIZATION.md) | Content and style customization | CV customizers |
| [DEPLOYMENT.md](DEPLOYMENT.md) | Deployment instructions and operations | DevOps, site operators |
| [SECURITY.md](SECURITY.md) | Security policies and reporting | Security teams |
| [PRIVACY.md](PRIVACY.md) | Privacy policy and data handling | Legal, compliance |
| # | Document | Purpose | Audience |
|---|----------|---------|----------|
| 6 | [USER_GUIDE.md](6-USER-GUIDE.md) | End-user feature documentation | CV users |
| 7 | [CUSTOMIZATION.md](7-CUSTOMIZATION.md) | Content and style customization | CV customizers |
| 8 | [DEPLOYMENT.md](8-DEPLOYMENT.md) | Deployment instructions and operations | DevOps, site operators |
| 9 | [SECURITY.md](9-SECURITY.md) | Security policies and reporting | Security teams |
| 10 | [PRIVACY.md](10-PRIVACY.md) | Privacy policy and data handling | Legal, compliance |
---
@@ -85,25 +85,25 @@
### "I want to..."
**...understand the system architecture**
→ Start with [ARCHITECTURE.md](ARCHITECTURE.md) (backend) and [MODERN-WEB-TECHNIQUES.md](MODERN-WEB-TECHNIQUES.md) (frontend)
→ Start with [1-ARCHITECTURE.md](1-ARCHITECTURE.md) (backend) and [2-MODERN-WEB-TECHNIQUES.md](2-MODERN-WEB-TECHNIQUES.md) (frontend)
**...add a new feature**
→ Read [MODERN-WEB-TECHNIQUES.md](MODERN-WEB-TECHNIQUES.md) for frontend patterns, [API.md](API.md) for backend APIs
→ Read [2-MODERN-WEB-TECHNIQUES.md](2-MODERN-WEB-TECHNIQUES.md) for frontend patterns, [3-API.md](3-API.md) for backend APIs
**...customize my CV content**
→ Follow [CUSTOMIZATION.md](CUSTOMIZATION.md) for content and styling changes
→ Follow [7-CUSTOMIZATION.md](7-CUSTOMIZATION.md) for content and styling changes
**...deploy to production**
→ Use [DEPLOYMENT.md](DEPLOYMENT.md) for step-by-step deployment instructions
→ Use [8-DEPLOYMENT.md](8-DEPLOYMENT.md) for step-by-step deployment instructions
**...understand HTMX patterns**
→ Check [MODERN-WEB-TECHNIQUES.md](MODERN-WEB-TECHNIQUES.md) Section 6 (HTMX Patterns)
→ Check [2-MODERN-WEB-TECHNIQUES.md](2-MODERN-WEB-TECHNIQUES.md) Section 6 (HTMX Patterns)
**...write Hyperscript code**
→ Follow conventions in [HYPERSCRIPT-RULES.md](HYPERSCRIPT-RULES.md)
→ Follow conventions in [4-HYPERSCRIPT-RULES.md](4-HYPERSCRIPT-RULES.md)
**...report a security issue**
→ See [SECURITY.md](SECURITY.md) for responsible disclosure process
→ See [9-SECURITY.md](9-SECURITY.md) for responsible disclosure process
---