Cursor rule

1---
2description: 
3globs: views/*.html, *.js
4---
5# Frontend Rules
6 
7## Browser compatibility
8 
9- Maintain compatibility with
10    - Google Chrome
11    - Microsoft Edge (Chromium based)
12    - Mozilla Firefox
13    - Apple Safari
14    - Desktop and small screen touch devices
15 
16## Assets
17- Some javascript related assets
18    - Audio player used in HTML templates
19        - assets/audioplayer.js
20    - Javascript snippets
21        - assets/utils.js
22 
23## Frameworks
24 
25### HTMX
26- **Attributes:**
27  - `hx-get`
28  - `hx-post`
29  - `hx-trigger`
30- **Patterns:**
31  - Use `hx-boost` for progressive enhancement
32  - Implement partial updates
33 
34### Alpine.js
35- **Patterns:**
36  - Use `x-data` for component state
37  - Implement reactive updates
38 
39## Libraries
40- Leaflet for interactive map
41 
42## Styling
43 
44### Tailwind CSS
45- **Required:** Yes
46- **Extensions:**
47  - `daisyUI`
48- **Patterns:**
49  - Use utility classes
50  - Implement responsive design
51  - Follow component patterns
52 
53- Custom CSS
54  - assets/custom.css
55 
56## Snippets
57 
58### Feature Detection
59```javascript
60function isFeatureSupported(feature) {
61    const features = {
62        intersectionObserver: () => 'IntersectionObserver' in window,
63        customElements: () => 'customElements' in window,
64        pointer: () => 'PointerEvent' in window,
65        touch: () => 'ontouchstart' in window
66    };
67    return features[feature] ? features[feature]() : false;
68}
69```
70 
71### Polyfill Loader
72```javascript
73async function loadPolyfills() {
74    const polyfills = [];
75 
76    if (!window.IntersectionObserver) {
77        polyfills.push(import('intersection-observer'));
78    }
79 
80    if (!window.fetch) {
81        polyfills.push(import('whatwg-fetch'));
82    }
83 
84    if (polyfills.length > 0) {
85        await Promise.all(polyfills);
86    }
87}
88```
89 
90### Cross-Browser Event Handling
91```javascript
92function addCrossBrowserEvent(element, eventName, handler, options = {}) {
93    const eventMap = {
94        click: ['click', 'touchend'],
95        mouseenter: ['mouseenter', 'touchstart'],
96        mouseleave: ['mouseleave', 'touchend']
97    };
98 
99    const events = eventMap[eventName] || [eventName];
100    const { passive = true, ...otherOptions } = options;
101 
102    events.forEach(event => {
103        element.addEventListener(event, handler, { passive, ...otherOptions });
104    });
105 
106    return () => {
107        events.forEach(event => {
108            element.removeEventListener(event, handler);
109        });
110    };
111}
112```
113 
114### Safe Animation
115```javascript
116function animate(element, properties, duration) {
117    if ('animate' in element) {
118        return element.animate(properties, duration).finished;
119    } else {
120        return new Promise(resolve => {
121            Object.assign(element.style, {
122                transition: `all ${duration}ms`,
123                ...properties
124            });
125            setTimeout(resolve, duration);
126        });
127    }
128}
129```
130 
131### Safe Fetch
132```javascript
133async function safeFetch(url, options = {}) {
134    const controller = new AbortController();
135    const timeout = options.timeout || 5000;
136 
137    const timeoutId = setTimeout(() => controller.abort(), timeout);
138 
139    try {
140        const response = await fetch(url, {
141            ...options,
142            signal: controller.signal,
143            headers: {
144                'Accept': 'application/json',
145                ...options.headers
146            }
147        });
148 
149        if (!response.ok) {
150            throw new Error(`HTTP error! status: ${response.status}`);
151        }
152 
153        return await response.json();
154    } catch (error) {
155        if (error.name === 'AbortError') {
156            throw new Error('Request timed out');
157        }
158        throw error;
159    } finally {
160        clearTimeout(timeoutId);
161    }
162}
163```
164 
165### Safe Storage
166```javascript
167const safeStorage = {
168    get(key) {
169        try {
170            const item = localStorage.getItem(key);
171            return item ? JSON.parse(item) : null;
172        } catch (e) {
173            console.warn(`Error reading ${key} from storage:`, e);
174            return null;
175        }
176    },
177    set(key, value) {
178        try {
179            localStorage.setItem(key, JSON.stringify(value));
180            return true;
181        } catch (e) {
182            console.warn(`Error writing ${key} to storage:`, e);
183            return false;
184        }
185    },
186    remove(key) {
187        try {
188            localStorage.removeItem(key);
189            return true;
190        } catch (e) {
191            console.warn(`Error removing ${key} from storage:`, e);
192            return false;
193        }
194    }
195};
196```
197 
198