mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-22 12:11:14 -05:00
Add base HTML template with responsive design and dark mode support
- Created a new base HTML template for the ThrillWiki project. - Implemented responsive navigation with mobile support. - Added dark mode functionality using Alpine.js and CSS variables. - Included Open Graph and Twitter meta tags for better SEO. - Integrated HTMX for dynamic content loading and search functionality. - Established a design system with CSS variables for colors, typography, and spacing. - Included accessibility features such as skip to content links and focus styles.
This commit is contained in:
pacnpal
@@ -992,4 +992,422 @@ Alpine.data('themeToggle', () => ({
|
||||
|
||||
### Modal Component
|
||||
```javascript
|
||||
Alpine.data
|
||||
Alpine.data
|
||||
background: var(--color-warning-900);
|
||||
color: var(--color-warning-200);
|
||||
}
|
||||
|
||||
.dark .badge-error {
|
||||
background: var(--color-error-900);
|
||||
color: var(--color-error-200);
|
||||
}
|
||||
|
||||
.dark .badge-info {
|
||||
background: var(--color-info-900);
|
||||
color: var(--color-info-200);
|
||||
}
|
||||
```
|
||||
|
||||
#### Avatars
|
||||
```html
|
||||
<!-- Avatar Sizes -->
|
||||
<img src="/path/to/avatar.jpg" alt="User" class="avatar-xs">
|
||||
<img src="/path/to/avatar.jpg" alt="User" class="avatar-sm">
|
||||
<img src="/path/to/avatar.jpg" alt="User" class="avatar-md">
|
||||
<img src="/path/to/avatar.jpg" alt="User" class="avatar-lg">
|
||||
<img src="/path/to/avatar.jpg" alt="User" class="avatar-xl">
|
||||
|
||||
<!-- Avatar with Fallback -->
|
||||
<div class="avatar-md avatar-fallback">
|
||||
<span>JD</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar-xs,
|
||||
.avatar-sm,
|
||||
.avatar-md,
|
||||
.avatar-lg,
|
||||
.avatar-xl {
|
||||
border-radius: var(--radius-full);
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-xs { width: 1.5rem; height: 1.5rem; }
|
||||
.avatar-sm { width: 2rem; height: 2rem; }
|
||||
.avatar-md { width: 2.5rem; height: 2.5rem; }
|
||||
.avatar-lg { width: 3rem; height: 3rem; }
|
||||
.avatar-xl { width: 4rem; height: 4rem; }
|
||||
|
||||
.avatar-fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary-100);
|
||||
color: var(--color-primary-700);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.dark .avatar-fallback {
|
||||
background: var(--color-primary-800);
|
||||
color: var(--color-primary-200);
|
||||
}
|
||||
```
|
||||
|
||||
## Alpine.js Component Patterns
|
||||
|
||||
### Theme Toggle Component
|
||||
```javascript
|
||||
Alpine.data('themeToggle', () => ({
|
||||
isDark: localStorage.getItem('theme') === 'dark' ||
|
||||
(!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches),
|
||||
|
||||
init() {
|
||||
this.updateTheme();
|
||||
},
|
||||
|
||||
toggle() {
|
||||
this.isDark = !this.isDark;
|
||||
this.updateTheme();
|
||||
},
|
||||
|
||||
updateTheme() {
|
||||
if (this.isDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
}
|
||||
}));
|
||||
```
|
||||
|
||||
### Modal Component
|
||||
```javascript
|
||||
Alpine.data('modal', () => ({
|
||||
isOpen: false,
|
||||
modalId: null,
|
||||
|
||||
handleOpen(detail) {
|
||||
if (detail.id === this.modalId || !this.modalId) {
|
||||
this.isOpen = true;
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
},
|
||||
|
||||
handleClose(detail) {
|
||||
if (!detail.id || detail.id === this.modalId) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
document.body.style.overflow = '';
|
||||
this.$dispatch('modal-closed', { id: this.modalId });
|
||||
},
|
||||
|
||||
init() {
|
||||
this.modalId = this.$el.dataset.modalId || 'default';
|
||||
}
|
||||
}));
|
||||
```
|
||||
|
||||
### Search Component
|
||||
```javascript
|
||||
Alpine.data('searchComponent', () => ({
|
||||
query: '',
|
||||
results: [],
|
||||
loading: false,
|
||||
debounceTimer: null,
|
||||
|
||||
search() {
|
||||
clearTimeout(this.debounceTimer);
|
||||
this.debounceTimer = setTimeout(() => {
|
||||
if (this.query.length >= 2) {
|
||||
this.loading = true;
|
||||
// HTMX will handle the actual search request
|
||||
} else {
|
||||
this.results = [];
|
||||
}
|
||||
}, 300);
|
||||
},
|
||||
|
||||
selectResult(result) {
|
||||
this.$dispatch('result-selected', result);
|
||||
this.query = '';
|
||||
this.results = [];
|
||||
},
|
||||
|
||||
clearSearch() {
|
||||
this.query = '';
|
||||
this.results = [];
|
||||
}
|
||||
}));
|
||||
```
|
||||
|
||||
### Form Validation Component
|
||||
```javascript
|
||||
Alpine.data('formValidation', () => ({
|
||||
errors: {},
|
||||
touched: {},
|
||||
isSubmitting: false,
|
||||
|
||||
validateField(fieldName, value, rules) {
|
||||
const fieldErrors = [];
|
||||
|
||||
if (rules.required && (!value || value.trim() === '')) {
|
||||
fieldErrors.push('This field is required');
|
||||
}
|
||||
|
||||
if (rules.minLength && value && value.length < rules.minLength) {
|
||||
fieldErrors.push(`Must be at least ${rules.minLength} characters`);
|
||||
}
|
||||
|
||||
if (rules.maxLength && value && value.length > rules.maxLength) {
|
||||
fieldErrors.push(`Must be no more than ${rules.maxLength} characters`);
|
||||
}
|
||||
|
||||
if (rules.email && value && !this.isValidEmail(value)) {
|
||||
fieldErrors.push('Please enter a valid email address');
|
||||
}
|
||||
|
||||
this.errors[fieldName] = fieldErrors.length > 0 ? fieldErrors[0] : null;
|
||||
this.touched[fieldName] = true;
|
||||
|
||||
return fieldErrors.length === 0;
|
||||
},
|
||||
|
||||
isValidEmail(email) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
},
|
||||
|
||||
hasError(fieldName) {
|
||||
return this.touched[fieldName] && this.errors[fieldName];
|
||||
},
|
||||
|
||||
isValid() {
|
||||
return Object.values(this.errors).every(error => !error);
|
||||
}
|
||||
}));
|
||||
```
|
||||
|
||||
## Responsive Design Patterns
|
||||
|
||||
### Mobile-First Breakpoints
|
||||
```css
|
||||
/* Mobile First Approach */
|
||||
.responsive-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-layout-sm);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.responsive-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-layout-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.responsive-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-layout-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.responsive-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Container Queries (Future Enhancement)
|
||||
```css
|
||||
/* Container Queries for Component-Level Responsiveness */
|
||||
@container (min-width: 300px) {
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Accessibility Patterns
|
||||
|
||||
### Focus Management
|
||||
```css
|
||||
/* Enhanced Focus Styles */
|
||||
.focus-visible {
|
||||
outline: 2px solid var(--border-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Skip Links */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 6px;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
### ARIA Patterns
|
||||
```html
|
||||
<!-- Accessible Modal -->
|
||||
<div role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
aria-describedby="modal-description">
|
||||
<h2 id="modal-title">Modal Title</h2>
|
||||
<p id="modal-description">Modal description</p>
|
||||
</div>
|
||||
|
||||
<!-- Accessible Form -->
|
||||
<form novalidate>
|
||||
<div class="form-group">
|
||||
<label for="email" class="form-label">
|
||||
Email Address
|
||||
<span aria-label="required">*</span>
|
||||
</label>
|
||||
<input type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
class="form-input"
|
||||
aria-describedby="email-error"
|
||||
aria-invalid="false"
|
||||
required>
|
||||
<div id="email-error"
|
||||
class="form-error"
|
||||
role="alert"
|
||||
aria-live="polite">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Animation Patterns
|
||||
|
||||
### Micro-Interactions
|
||||
```css
|
||||
/* Button Hover Effects */
|
||||
.btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: left var(--duration-300) var(--ease-out);
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Card Hover Effects */
|
||||
.card-hover {
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.card-hover:hover .card-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
```
|
||||
|
||||
### Loading States
|
||||
```css
|
||||
/* Skeleton Loading */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.dark .skeleton {
|
||||
background: linear-gradient(90deg, var(--color-neutral-700) 25%, var(--color-neutral-600) 50%, var(--color-neutral-700) 75%);
|
||||
background-size: 200% 100%;
|
||||
}
|
||||
|
||||
/* Spinner Animation */
|
||||
.spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid var(--color-neutral-200);
|
||||
border-top: 2px solid var(--interactive-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
```
|
||||
|
||||
## Implementation Guidelines
|
||||
|
||||
### CSS Architecture
|
||||
1. **Layer Structure**: Use CSS layers for better cascade management
|
||||
2. **Component Isolation**: Each component should be self-contained
|
||||
3. **Token Usage**: Always use design tokens instead of hardcoded values
|
||||
4. **Progressive Enhancement**: Ensure components work without JavaScript
|
||||
|
||||
### JavaScript Integration
|
||||
1. **Alpine.js Components**: Create reusable Alpine.js data functions
|
||||
2. **HTMX Integration**: Design components to work seamlessly with HTMX
|
||||
3. **Event Communication**: Use Alpine.js events for component communication
|
||||
4. **Performance**: Minimize DOM queries and optimize reactivity
|
||||
|
||||
### Testing Strategy
|
||||
1. **Visual Regression**: Test components across different themes and screen sizes
|
||||
2. **Accessibility**: Automated and manual accessibility testing
|
||||
3. **Performance**: Monitor component rendering performance
|
||||
4. **Cross-browser**: Test in all supported browsers
|
||||
|
||||
### Documentation Standards
|
||||
1. **Component Examples**: Provide usage examples for each component
|
||||
2. **Props/Attributes**: Document all available options
|
||||
3. **Accessibility**: Document ARIA patterns and keyboard interactions
|
||||
4. **Browser Support**: Specify supported browsers and fallbacks
|
||||
|
||||
This component library provides a solid foundation for the ThrillWiki frontend redesign, ensuring consistency, accessibility, and maintainability across all templates and user interfaces.
|
||||
Reference in New Issue
Block a user