docs(readme): Clarified installation steps and added architecture dia…

…gram (#21)

Closes #19

README.md

@@ -28,24 +28,22 @@ You will need a working WeeWX installation. So far, this skin has only been test
 
 ### Standard Installation
 
-1. Download the latest release:
+1. Run the following command on your WeeWX server:
 
 ```bash
-wget -O weewx-me.teo.zip https://github.com/bourquep/weewx-me.teo/releases/latest/download/weewx-me.teo.zip
+weectl extension install https://github.com/bourquep/weewx-me.teo/releases/latest/download/weewx-me.teo.zip
 ```
 
-2. Install the skin using WeeWX's extension installer:
-
-```bash
-weectl extension install weewx-me.teo.zip
-```
-
-3. Restart WeeWX:
+2. Restart WeeWX:
 
 ```bash
 sudo systemctl restart weewx
 ```
 
+> [!NOTE]
+> The command required to restart WeeWX may vary depending on your WeeWX installation. Please refer to the
+> [WeeWX documentation](https://weewx.com/docs/5.1/usersguide/running/#running-as-a-daemon) for more information.
+
 ## Configuration
 
 ### Basic Configuration
@@ -78,37 +76,13 @@ configuration in `weewx.conf`:
             googleAnalyticsId = "G-XXXXXXXXXX"
 ```
 
-## Architecture
-
-### Data Flow
-
-- The skin uses a hybrid approach combining static generation and client-side updates
-- The NextJS app is pre-compiled and served as a static site
-- Weather data is generated by the WeeWX report engine in the `data/*.json` files
-- These JSON files are fetched by the client-side app, reloaded automatically every minute
-
 ## Localization
 
 ### Supported Languages
 
 - English (default)
 - French
 
-### Adding New Languages
-
-1. [Fork](https://github.com/bourquep/weewx-me.teo/fork) this repository
-2. Create a new code translation file in `messages/xx.json`
-3. Copy the template from `en.json`
-4. Translate all strings
-5. Create a new skin translation file in `weewx/skins/me.teo/lang/xx.json`
-6. Copy the template from `en.json`
-7. Translate all strings
-8. Add the language code to:
-   - the `build-locale` language matrix in `.github/workflows/ci.yml`
-   - the `CopyGenerator.copy_once` list in `weewx/skins/me.teo/skin.conf`
-9. Add the language to the list of supported languages in `README.md`
-10. Submit a pull request and be a hero!
-
 ### Language Selection
 
 The skin respects the settings in `weewx.conf` for:
@@ -143,19 +117,76 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with
 
 ### Getting Started
 
-First, run the development server:
+First, install the dependencies:
+
+```bash
+npm install --force
+```
+
+> [!IMPORTANT]
+> The skin uses NextJS v15, which has a peer dependency on React v19 RC, which makes many packages fail to
+> install because of peer dependency mismatch. Right now, `npm install --force` must be used to work around this, but
+> hopefully React v19 will be out of RC soon and that workaround won't be needed anymore.
+
+Then, run the development server:
 
 ```bash
 npm run dev
 ```
 
 Then, open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-### Sample Data
+### Data Flow
+
+- The skin uses a hybrid approach combining static generation and client-side updates
+- The NextJS app is pre-compiled and served as a static site
+- Weather data is generated by the WeeWX report engine in the `data/*.json` files
+- These JSON files are fetched by the client-side app, reloaded automatically every minute
+- When running the development server, the skin will use sample data from the `public/sample_data` directory.
+
+### Architecture Diagram
+
+```mermaid
+architecture-beta
+  group users(cloud)[Users]
+  group skin(cloud)[weewx_me_teo]
+  group weewx(cloud)[WeeWX]
+
+  service nextjs(server)[NextJS app] in skin
+  service sample(disk)[Sample JSON data] in skin
+  service json(disk)[JSON data files] in weewx
+  service html(disk)[HTML files] in weewx
+  service cheetah(server)[Cheetah templates] in weewx
+
+  service visitor(internet)[External visitor] in users
+  service developer(internet)[Developer] in users
+
+  visitor:R -- L:html
+  html:R -- L:json
+
+  developer:R -- L:nextjs
+  nextjs:R -- L:sample
+
+  nextjs:B --> T:html
+  cheetah:T --> B:json
+```
+
+### Adding New Languages
 
-When running the development server, the skin will use sample data from the `public/sample_data` directory.
+1. [Fork](https://github.com/bourquep/weewx-me.teo/fork) this repository
+2. Create a new code translation file in `messages/xx.json`
+3. Copy the template from `en.json`
+4. Translate all strings
+5. Create a new skin translation file in `weewx/skins/me.teo/lang/xx.json`
+6. Copy the template from `en.json`
+7. Translate all strings
+8. Add the language code to:
+   - the `build-locale` language matrix in `.github/workflows/ci.yml`
+   - the `CopyGenerator.copy_once` list in `weewx/skins/me.teo/skin.conf`
+9. Add the language to the list of supported languages in `README.md`
+10. Submit a pull request and be a hero!
 
-### Learn More
+### NextJS
 
 To learn more about Next.js, take a look at the following resources:
 

prettier.config.cjs

@@ -24,5 +24,13 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'none',
   arrowParens: 'always',
-  plugins: ['prettier-plugin-organize-imports']
+  plugins: ['prettier-plugin-organize-imports'],
+  overrides: [
+    {
+      files: ['*.md', '*.markdown'],
+      options: {
+        proseWrap: 'preserve'
+      }
+    }
+  ]
 };