refactor: corrected Prettier usage

Author: thorsten

.github/workflows/codeql.yml

@@ -9,13 +9,13 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL Advanced"
+name: 'CodeQL Advanced'
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
   schedule:
     - cron: '40 14 * * 3'
 
@@ -43,10 +43,10 @@ jobs:
       fail-fast: false
       matrix:
         include:
-        - language: actions
-          build-mode: none
-        - language: javascript-typescript
-          build-mode: none
+          - language: actions
+            build-mode: none
+          - language: javascript-typescript
+            build-mode: none
         # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
         # Use `c-cpp` to analyze code written in C, C++ or both
         # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
@@ -56,45 +56,45 @@ jobs:
         # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
         # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-    # Add any setup steps before running the `github/codeql-action/init` action.
-    # This includes steps like installing compilers or runtimes (`actions/setup-node`
-    # or others). This is typically only required for manual builds.
-    # - name: Setup runtime (example)
-    #   uses: actions/setup-example@v1
+      # Add any setup steps before running the `github/codeql-action/init` action.
+      # This includes steps like installing compilers or runtimes (`actions/setup-node`
+      # or others). This is typically only required for manual builds.
+      # - name: Setup runtime (example)
+      #   uses: actions/setup-example@v1
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        build-mode: ${{ matrix.build-mode }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          build-mode: ${{ matrix.build-mode }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
 
-    # If the analyze step fails for one of the languages you are analyzing with
-    # "We were unable to automatically build your code", modify the matrix above
-    # to set the build mode to "manual" for that language. Then modify this step
-    # to build your code.
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-    - if: matrix.build-mode == 'manual'
-      shell: bash
-      run: |
-        echo 'If you are using a "manual" build mode for one or more of the' \
-          'languages you are analyzing, replace this with the commands to build' \
-          'your code, for example:'
-        echo '  make bootstrap'
-        echo '  make release'
-        exit 1
+      # If the analyze step fails for one of the languages you are analyzing with
+      # "We were unable to automatically build your code", modify the matrix above
+      # to set the build mode to "manual" for that language. Then modify this step
+      # to build your code.
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      - if: matrix.build-mode == 'manual'
+        shell: bash
+        run: |
+          echo 'If you are using a "manual" build mode for one or more of the' \
+            'languages you are analyzing, replace this with the commands to build' \
+            'your code, for example:'
+          echo '  make bootstrap'
+          echo '  make release'
+          exit 1
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
+        with:
+          category: '/language:${{matrix.language}}'

.github/workflows/playwright.yml

@@ -2,9 +2,9 @@ name: Playwright E2E Tests
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 permissions:
   contents: read

.github/workflows/vitest.yml

@@ -2,9 +2,9 @@ name: Vitest Unit Tests
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 permissions:
   contents: read

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix", "eslint"],
+  "*.{json,md,yml}": ["prettier --write"]
+}

.prettierignore

@@ -0,0 +1,18 @@
+# Build outputs
+.next/
+out/
+dist/
+coverage/
+playwright-report/
+
+# Node modules
+node_modules/
+
+# Lock files (formatting not needed)
+*.lock
+pnpm-lock.yaml
+
+# Generated files
+*.min.js
+*.min.css
+

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "arrowParens": "always"
+}

README.md

@@ -15,11 +15,13 @@ Modern Next.js website for [phpMyFAQ](https://www.phpmyfaq.de), a popular open-s
 ## Getting Started
 
 1. Install dependencies:
+
 ```bash
 pnpm install
 ```
 
 2. Start the development server:
+
 ```bash
 pnpm dev
 ```
@@ -29,12 +31,14 @@ pnpm dev
 ## Available Scripts
 
 ### Development
+
 - `pnpm dev` - Start development server
 - `pnpm build` - Build for production
 - `pnpm start` - Start production server
 - `pnpm lint` - Run ESLint
 
 ### Testing
+
 - `pnpm test` - Run unit tests with Vitest
 - `pnpm test:ui` - Run unit tests with UI
 - `pnpm test:coverage` - Run unit tests with a coverage report
@@ -43,6 +47,7 @@ pnpm dev
 - `pnpm test:e2e:headed` - Run E2E tests in headed mode
 
 ### Data Fetching
+
 - `pnpm fetch:versions` - Fetch latest version information
 - `pnpm fetch:downloads` - Fetch download metadata
 - `pnpm update:data` - Update all external data
@@ -82,26 +87,32 @@ scripts/                   # Data fetching scripts
 ## Testing
 
 ### Unit Tests
+
 This project includes comprehensive unit tests using Vitest and React Testing Library:
+
 - Component rendering and behavior
 - Utility functions and data helpers
 - News parsing and markdown processing
 
 Run unit tests:
+
 ```bash
 pnpm test              # Run all tests
 pnpm test:ui           # Interactive UI
 pnpm test:coverage     # Coverage report
 ```
 
 ### E2E Tests
+
 Playwright E2E tests ensure:
+
 - All pages load correctly (no 404 errors)
 - Navigation works properly
 - Favicon loads without errors
 - Page content displays correctly
 
 Run E2E tests:
+
 ```bash
 pnpm test:e2e          # Headless mode
 pnpm test:e2e:ui       # Interactive UI
@@ -111,6 +122,7 @@ pnpm test:e2e:headed   # Headed browser mode
 ## Development
 
 The site uses:
+
 - **Bootstrap classes** for responsive layout
 - **Custom fonts** (Lato, Cabin) loaded from `/public/fonts/`
 - **Component-based architecture** for maintainability
@@ -119,6 +131,7 @@ The site uses:
 ## Deployment
 
 Build the static site:
+
 ```bash
 pnpm build
 ```

commitlint.config.ts

@@ -44,4 +44,4 @@ const Configuration: UserConfig = {
   },
 };
 
-export default Configuration;
+export default Configuration;