refactor: apply Astro, Preact, and general best practices to src

- Refactored all components in src/components to:
  - Use arrow function components and prop destructuring
  - Add JSDoc for all exported components
  - Improve accessibility (aria-labels, roles, etc.)
  - Use correct key usage in lists
  - Add comments for non-obvious logic
  - Use modern event handler patterns and memoization where appropriate
- Refactored src/pages/index.astro:
  - Removed <html>, <head>, and <body> (should be in layout)
  - Used semantic <main> for main content
  - Kept only necessary imports and markup
- Refactored src/styles/index.css:
  - Removed duplicate rules
  - Ensured only global resets/utilities are present
  - Added comments for clarity
  - Ensured no component-specific styles are present
  - Used consistent formatting

Brings the codebase in line with modern Astro and Preact best practices, improves maintainability, accessibility, and code clarity.
This commit is contained in:
Frank Schwenk
2025-06-06 16:28:57 +02:00
parent 7cb79f5ee3
commit 209df5d9f2
10 changed files with 281 additions and 221 deletions

View File

@@ -3,23 +3,7 @@ import "../styles/index.css";
import App from "../components/App.jsx";
---
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="BSC Score">
<meta name="description" content="BSC Score - Pool Scoring App für den Billard Sport Club">
<meta name="theme-color" content="#000000">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="icon-192.png" />
<title>Pool Scoring</title>
</head>
<body>
<div class="screen-container">
<App client:only="preact" />
</div>
</body>
</html>
<!-- Main entry point for the Pool Scoring App -->
<main class="screen-container">
<App client:only="preact" />
</main>