27 lines
1.3 KiB
Plaintext
27 lines
1.3 KiB
Plaintext
---
|
|
description:
|
|
globs: web/src/pages,web/src/components
|
|
alwaysApply: false
|
|
---
|
|
- Avoid sending JavaScript to the client. The JS send should always be optional.
|
|
- Avoid using client-side JavaScript as much as possible. And if it has to be done, make it optional.
|
|
- To avoid using JavaScript, you can use HTML and CSS features such as hidden checkboxes, deltails tag, etc.
|
|
- The admin pages can use client-side JavaScript.
|
|
- When adding clientside JS do it with HTMX.
|
|
- When adding HTMX, the layout component BaseLayout [BaseLayout.astro](mdc:web/src/layouts/BaseLayout.astro) [BaseHead.astro](mdc:web/src/components/BaseHead.astro) accepts a prop htmx to load it in that page. No need to use a cdn.
|
|
- When adding client scripts remember to use the event `astro:page-load`, `querySelectorAll<Type>` and add an explanation comment, like so:
|
|
|
|
```tsx
|
|
<script>
|
|
////////////////////////////////////////////////////////////
|
|
// Optional script for __________. //
|
|
// Desctiption goes here... //
|
|
////////////////////////////////////////////////////////////
|
|
document.addEventListener('astro:page-load', () => {
|
|
document.querySelectorAll<HTMLDivElement>('[data-my-div]').forEach((myDiv) => {
|
|
// Do something
|
|
})
|
|
})
|
|
</script>
|
|
```
|