docs: Enhance web communication and localization

.github/workflows/crowdin-sync.yml

@@ -1,34 +1,46 @@
 name: Crowdin Action
-
 on:
   schedule:
-    - cron: '0 0 * * 0'  # This runs the action every Sunday at midnight UTC
+    - cron: '0 0 * *0'  # This runs the action every Sunday at midnight UTC
   workflow_dispatch:
-  release:
-    types:
-      - published
 
 jobs:
   synchronize-with-crowdin:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
           token: ${{ secrets.REPO_TOKEN }}
-
-      - name: Crowdin action
+      
+      - name: Crowdin action for macOS app
         uses: crowdin/github-action@v2
         with:
+          config: 'crowdin.yml'
           upload_sources: true
           upload_translations: true
           download_translations: true
-          localization_branch_name: crowdin-localization
+          localization_branch_name: crowdin-localization-macos
           create_pull_request: true
-          pull_request_title: "chore: sync localizations with Crowdin"
-          commit_message: "chore: sync localizations with Crowdin"
+          pull_request_title: "chore: sync macOS app localizations with Crowdin"
+          commit_message: "chore: sync macOS app localizations with Crowdin"
         env:
           GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
           CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
           CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+
+      - name: Crowdin action for website
+        uses: crowdin/github-action@v2
+        with:
+          config: 'crowdin-website.yml'
+          upload_sources: true
+          upload_translations: true
+          download_translations: true
+          localization_branch_name: crowdin-localization-website
+          create_pull_request: true
+          pull_request_title: "chore: sync website localizations with Crowdin"
+          commit_message: "chore: sync website localizations with Crowdin"
+        env:
+          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_SITE_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

README.md

@@ -1,94 +1,142 @@
-<p align="center">
+<div align="center">
 <img height="256" src="https://github.com/ejbills/DockDoor/raw/main/DockDoor/Assets.xcassets/AppIcon.appiconset/[email protected]">
-</p>
+<h1>DockDoor</h1>
+<h2><i>A new way of interacting with the Dock.</i></h2>
+</div>
 
-<h1 align="center">DockDoor</h1>
+<p align="center">
+  <img width="100%" height="auto" src="./resources/dockPeek1920.png">
+</p>
 
-[![GitHub release (latest by date)](https://img.shields.io/github/v/release/ejbills/DockDoor)](https://github.com/ejbills/DockDoor/releases/latest/download/DockDoor.dmg)
-![GitHub All Releases](https://img.shields.io/github/downloads/ejbills/DockDoor/total?label=Total%20Downloads)
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/ejbills/DockDoor?style=flat-square)](https://github.com/ejbills/DockDoor/releases/latest/download/DockDoor.dmg)
+![GitHub All Releases](https://img.shields.io/github/downloads/ejbills/DockDoor/total?label=Total%20Downloads&style=flat-square)
 [![GitHub stars](https://img.shields.io/github/stars/ejbills/DockDoor)](https://github.com/ejbills/DockDoor/stargazers)
 [![GitHub forks](https://img.shields.io/github/forks/ejbills/DockDoor)](https://github.com/ejbills/DockDoor/network/members)
-[![GitHub issues](https://img.shields.io/github/issues/ejbills/DockDoor)](https://github.com/ejbills/DockDoor/issues)
-[![GitHub license](https://img.shields.io/github/license/ejbills/DockDoor)](https://github.com/ejbills/DockDoor/blob/main/LICENSE)
-[![Contributors](https://img.shields.io/github/contributors/ejbills/DockDoor)](https://github.com/ejbills/DockDoor/graphs/contributors)
+[![GitHub issues](https://img.shields.io/github/issues/ejbills/DockDoor?style=flat-square)](https://github.com/ejbills/DockDoor/issues)
+[![GitHub license](https://img.shields.io/github/license/ejbills/DockDoor?style=flat-square)](https://github.com/ejbills/DockDoor/blob/main/LICENSE)
+[![Contributors](https://img.shields.io/github/contributors/ejbills/DockDoor?style=flat-square)](https://github.com/ejbills/DockDoor/graphs/contributors)
 [![Crowdin](https://badges.crowdin.net/dockdoor/localized.svg)](https://crowdin.com/project/dockdoor)
+[![Website](https://img.shields.io/badge/Website-015FBA?style=flat-square)](https://dockdoor.net)
+
+**DockDoor** is a macOS application that adds a much-needed feature to your Mac: Dock previews.
+Developed with Swift and SwiftUI, it offers seamless integration with macOS. DockDoor is designed for ease of use and intuitive interactions.
+As an open-source project, it welcomes contributions from developers to enhance the application’s functionality, performance and user experience.
+
+Minimum macOS version:
+- 1.1.5 and older: **macOS 14 Sonoma**
+- 1.1.6 and newer: **macOS 13 Ventura**
+
+If you appreciate this application, please consider **donating** to the developer. Any amount is appreciated! [![Buy Me a Coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-ffdd00?style=flat&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/keplercafe)
 
-Want to support development? [![Buy Me a Coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-ffdd00?style=flat&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/keplercafe)
+If you encounter a bug or have a feature request, please **open an issue** on this repository. The developers will do their best to address the bug or fulfill your request!
 
-[Help translate the app here](https://crowdin.com/project/dockdoor/invite?h=895e3c085646d3c07fa36a97044668e02149115).
+> [!NOTE]
+> You can help translating this application in your own language. This is a crucial step in making DockDoor accessible to everyone, regardless of their knowledge level in English. [![Help translate the app here](https://img.shields.io/badge/Help%20translate%20here!-blue?style=flat-square)](#translating)
 
-DockDoor is a macOS application developed with Swift and SwiftUI that allows users to manage and interact with application windows on their desktop. It emphasizes ease of use and seamless integration with the macOS environment. This project is open-source, inviting contributions from developers to enhance its functionality and user experience.
+## Install
 
-## Installation
+### Manual installation
 
-[Download the latest release here](https://github.com/ejbills/DockDoor/releases/latest/download/DockDoor.dmg).
+[Download the latest release here](https://github.com/ejbills/DockDoor/releases/latest/download/DockDoor.dmg). Mount the downloaded file (`DockDoor.dmg`) and drag DockDoor to the `Applications` folder.
 
-#### Using Homebrew
+> [!NOTE]
+> DockDoor is still actively being developed. To ensure you benefit from all the latest features, please keep your copy of the application up to date by enabling automatic updates in the app.
 
-You can also install DockDoor through [Homebrew](https://brew.sh/)! Just type the following command into the Terminal:
-```bash
+### Using Homebrew
+
+You can also install DockDoor using [Homebrew](https://brew.sh/)! Just type or paste the following command into a Terminal:
+```sh
 brew install --cask dockdoor
 ```
 
 ## Usage
 
-- **How do I use the window switcher functionality?**
-  - By default, use Option + Tab to open the window switcher, continue pressing Tab to cycle forward through windows, Shift + Tab to go backward. Releasing the Control key will select and switch to the highlighted window.
-  - To set a custom keybind:
-    - Navigate to the settings menu and find the window switcher section
-    - Select one of the modifier keys presented on the screen (e.g., Command, Option, Control, Shift)
-    - Click the `Record Keybind` button
-    - Press a single key on your keyboard to combine with the chosen modifier
-    - The new keybind is now set and ready to use!
-
-      ![Set keybind](./resources/setKeybind.gif)
-- **How do I use the dock peeking functionality?**
-  - Simply hover over any application with active windows in the dock.
-- **What are the traffic light buttons that appear in the preview window?**
-  - 🟣 Quit the window's app. You can hold the Option (⌥) key while clicking to **force** quit.
-  - 🔴 Close the window
-  - 🟡 Minimize the window
-  - 🟢 Enter the window to full screen
-
-### FAQ
-
-- I disabled the menu bar icon and now I can't access settings
-  - When DockDoor initially opens, the menu icon will be visible for 10 seconds, until it disappears. This way, you can access the settings even with the icon disabled. Just relaunch the app and click it before it disappears.
-- I click on the purple quit button in the preview and the app doesn't close
-  - You can hold the Option (⌥) key while clicking to force quit.
-
-## Installation (for contributors)
+### Dock Peek feature
+Hover over any application’s icon in the Dock to see its open windows.
+Each traffic light button you see serves an intuitive function.
+> [!TIP]
+> Hold **`Option`** (⌥) while clicking the **`Quit`** button to **force quit** the window’s application.
+<p align="center">
+  <img width="400" height="auto" src="./resources/dockPeekCommented.png">
+</p>
 
-### Prerequisites
+### Windows-like `Alt` + `Tab` window switcher
+With the default settings, hold down `Command` (⌘) and press `Tab` (⇥) repeatedly until the desired window is highlighted. To go back, press `Shift` (⇧) in addition to `Tab`.
+Release both keys to switch to the selected window.
 
-- macOS 14.0 or later.
-- Xcode installed on your machine.
+#### Customization
+You can customize the default keybind by disabling the option `Use default macOS keybind ⌘ + ⇥`.
+- Select one of the initialization keys (`Control`, `Option` or `Command`)
+- Click on `Start Recording Keybind`
+- Press a single key on your keyboard
+- Custom keybind is set!
+![Set keybind](./resources/setKeybind.gif)
 
-### Setting Up the Project
 
-1. Fork the repository.
-2. Clone your forked repository to your local machine.
-3. Open the project in Xcode.
-4. Build and run the project.
+## Frequently Asked Questions
 
-## How to Contribute
+### How to access DockDoor settings?
+If you disabled `Show Menu Bar Icon` in `General`, search for `DockDoor` using the built-in Spotlight or another searching app. Open DockDoor and the settings should open automatically.
 
-Contributions to DockDoor are welcome! Here’s how you can get started:
+If this option is enabled, click on the *door* icon in the menu bar and select `Open Settings` in the contextual menu.
+
+### The application I want to quit does not respond.
+You can either wait for the application to become responsive again, or force quit it. To do this, hold **`Option`** (⌥) while clicking the `Quit` button.
+
+## Contributing
 
-### Prerequisites
+You can either contribute to DockDoor’s code, or help translating the application or the website.
 
-- Basic knowledge of Swift and SwiftUI.
+### DockDoor’s code
 
-### Contribution Guide
+#### Prerequisites
 
-1. **Branching:**
+- **macOS 13.0** or later.
+- **Xcode** installed on your machine.
+- Basic knowledge of **Swift** and **SwiftUI**.
+
+#### Setting Up the Project
+
+1. **Fork** the repository.
+2. **Clone** your forked repository to your local machine using `git`.
+3. **Open** the project in Xcode.
+4. **Build** and **run** the project.
+
+#### How to Contribute
+
+Contributions to DockDoor are welcome! Here’s how you can get started:
+
+1. **Branching**
     - Base all new features off of `main`.
     - Create a new branch for each feature or bug fix: `git checkout -b feature/your-feature-name`.
-2. **Coding Standards:**
+2. **Coding Standards**
     - Follow Swift coding conventions and style guidelines.
     - Aim for clear, concise, and expressive code.
-3. **Documentation:**
+3. **Documentation**
     - Document your code using comments to explain complex logic or functionality.
-4. **Testing:**
+4. **Testing**
     - Write unit tests for new features or changes.
     - Ensure existing tests pass before submitting a pull request.
+5. **Open a pull request**
+    - Perform a self-review of your code.
+
+### Translating
+
+Open the following link to contribute by translating DockDoor. You will need to create a Crowdin account, but you can link it to your GitHub account.
+
+https://crowdin.com/project/dockdoor
+
+### Translating the website (https://dockdoor.net)
+
+To enhance web communication, we invite you to help translate the project’s website, https://dockdoor.net, with the following link: https://crowdin.com/project/dockdoornet.
+
+**But before you begin translating**, please consider the following points:
+- The strings contain **basic HTML tags**. It is recommended to have **some familiarity with HTML**. You can find many tutorials online, and HTML is particularly easy to learn.
+- As a consequence, please **respect the markup** indicated in the source language. For a word surrounded by `<strong>` tags, add `<strong>` (and `</strong>` to close it) around the equivalent word in your language.
+- A few strings contain special codes such as `&#8984;` or `&RightArrowBar;`. If you hover over them on Crowdin in the source language, you can see what character it represents. **The semicolon here is crucial. Do not omit it.**
+- Other strings contain `&nbsp;` between words. **These are no-break spaces. They are not substitutable with regular spaces.** Use them as much as needed in the source language.
+> [!TIP]
+> Click on the tags to paste them directly into your translation. The same process also works for special codes.
+
+- There are a few `<span>` tags (e.g., `<span class='yellow-highlight'>` `</span>`). Copy them **exactly** as they appear in the source language.
+- **Escape your quotation marks** using `\` before them! If you don’t, the translations might fail to render.

crowdin-website.yml

@@ -0,0 +1,12 @@
+# Crowdin configuration file for DockDoor website project
+
+project_id_env: CROWDIN_SITE_PROJECT_ID
+api_token_env: CROWDIN_PERSONAL_TOKEN
+base_path: "."
+base_url: "https://api.crowdin.com"
+
+preserve_hierarchy: true
+
+files:
+  - source: '/locales/en/translation.json'
+    translation: '/locales/%two_letters_code%/translation.json'

dark-mode.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const toggleDarkModeButton = document.getElementById('toggleDarkMode');
+    const darkModeIcon = document.getElementById('darkModeIcon');
+    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const savedTheme = localStorage.getItem('theme');
+
+    // If user already has saved setting
+    if (savedTheme) {
+        document.body.classList.toggle('dark-mode', savedTheme === 'dark');
+        darkModeIcon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
+    } else if (prefersDarkMode) {
+        // Else, use system setting
+        document.body.classList.add('dark-mode');
+        darkModeIcon.textContent = '☀️';
+    } else {
+        darkModeIcon.textContent = '🌙';
+    }
+
+    toggleDarkModeButton.addEventListener('click', function () {
+        document.body.classList.toggle('dark-mode');
+        const theme = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
+        localStorage.setItem('theme', theme);
+
+        // Change icon according to current theme
+        darkModeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
+    });
+});