Merge pull request #26 from PinoutLTD/dev

merge upstream v2.0.0

Author: nakata5321

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "18.17.x"
+          node-version: "20.x"
 
       - name: Get yarn cache
         id: yarn-cache
@@ -30,6 +30,8 @@ jobs:
             ${{ runner.os }}-website-
       - run: yarn install --frozen-lockfile
       - run: yarn build
+        env:
+          VITE_CONFIG_ENV: ${{ vars.VITE_CONFIG_ENV }}
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

.gitignore

@@ -14,6 +14,7 @@ dist-ssr
 coverage
 *.local
 
+/src/config/local/
 /cypress/videos/
 /cypress/screenshots/
 
@@ -27,4 +28,4 @@ coverage
 *.sln
 *.sw?
 
-commit.txt
+commit.txt

README.md

@@ -1,73 +1,269 @@
-# Create open sensors networks without centralization problems
+# sensors.social
 
-Decentralized Open Sensors Map. Don't forget to your IFPS ID into `src/agents.json` in case you set up your own [Sensors Connectivity module](https://github.com/airalab/sensors-connectivity/tree/master).
+---
 
-## Setup your own Map
+## 📌 Overview
 
-To deploy your own instance of the map using GitHub Pages, start by forking the [repository](https://github.com/airalab/sensors.robonomics.network) and clone it. To enable GitHub Actions, go to the repository page, click on the `Actions` tab, and set up a workflow if you haven't done so already.
-To successfully deploy the map, you will need to modify certain files:
+**sensors.social** is a decentralized application that visualizes data from sensors sending their measurements to the blockchain (Polkadot network, Robonomics parachain). The platform supports two modes of operation:
 
-### Option 1: you don't have Domain
+- **Peer-to-peer connectivity** for direct access to sensor data.
+- **Federative concept** for accumulating sensor data and displaying measurement history.
 
-1. In `.github/workflows/main.yaml` remove `cname: sensors.robonomics.network`.
-2.  Add the following code right below `runs-on: ubuntu-latest` in `.github/workflows/main.yaml`: 
+For more details on connectivity and how to deploy your own map interface (or even a connectivity server), visit [Robonomics Academy](https://robonomics.academy/en/learn/sensors-connectivity-course/overview/).
+
+---
+
+## 🚀 Deployment
+
+This section is intended for contributors working on the existing map and developers setting up their own map interface. For comprehensive instructions on configuring your own user interface, refer to the next sections.
+
+### 1️⃣ Fork & Clone the Repository
+
+If you plan to contribute or customize the project extensively, consider forking it first. Then clone the repository:
+
+```sh
+  git clone <map repository>
 ```
-permissions: 
-    contents: write
+
+If you plan to contribute or customize the project extensively, consider forking it first.
+
+### 2️⃣ Install Dependencies
+
+Ensure **Node.js** and **Yarn** are installed:
+
+```sh
+ node -v  # Should be >= 16
+ yarn -v  # Should be installed
 ```
-3. In `vite.config.js` add `base: "/<repository name>/",` to the `defineConfig` object just above the `plugins` section , replacing `<repository_name>` with the name of your fork (default will be `sensors.robonomics.network`)
 
-### Option 2: you have Domanin
+Then install the required dependencies:
 
-1. In `.github/workflows/main.yaml` change `cname: sensors.robonomics.network` to your `CNAME`.
-2.  Add the following code right below `runs-on: ubuntu-latest` in `.github/workflows/main.yaml`: 
+```sh
+ yarn install
 ```
-permissions: 
-    contents: write
+
+### 3️⃣ Start the Server Locally for Development
+
+```sh
+ yarn dev
 ```
 
-### Manage Github Pages
+---
 
-After making modifications to the files, you can deploy your instance of the map by following these steps:
 
-1. Commit and push the changes to your forked repository. 
-2. Wait until the actions have successfully completed.
-3. Go to the `Pages` section of your repository `Settings`.
-4. Enable GitHub Pages by selecting `Deploy from a branch` as the source
-5. Choose the `gh-pages` branch and the `root` folder.
-6. Save the settings, and GitHub Pages will deploy your instance of the map. 
-7. Access it using the provided GitHub Pages URL. 
+## 🔧 Setup Your Own Map (For Experienced Users)
 
-> If you dont see the GitHub Pages URL try to reload the page.
+### 1️⃣ Deploy Your Own Instance of the Map
 
-## Project setup
+Refer to the "🚀 Deployment" section.
 
-```
-yarn install
-```
+### 2️⃣ Enable GitHub Actions
 
-### Compiles and hot-reloads for development
+To activate GitHub Actions in your repository:
 
-```
-yarn dev
+- Navigate to the **Actions** tab in your GitHub repository.
+- If prompted, enable workflows by clicking **Enable GitHub Actions**.
+- Ensure that workflows are correctly set up in `.github/workflows/`.
+
+### 3️⃣ Configure Deployment
+
+#### Option 1: Deploy Without a Custom Domain
+
+- Open `.github/workflows/main.yaml` and remove the line:
+  ```yaml
+  cname: sensors.social
+  ```
+- Add the following permissions block right below `runs-on: ubuntu-latest`:
+  ```yaml
+  permissions:
+    contents: write
+  ```
+- In `vite.config.js`, add the following line to the `defineConfig` object, just above the `plugins` section:
+  ```javascript
+  base: "/<repository_name>/",
+  ```
+  Replace `<repository_name>` with the name of your fork.
+
+#### Option 2: Deploy With a Custom Domain
+
+- Open `.github/workflows/main.yaml` and replace:
+  ```yaml
+  cname: sensors.social
+  ```
+  with your custom domain:
+  ```yaml
+  cname: your-custom-domain.com
+  ```
+- Add the following permissions block right below `runs-on: ubuntu-latest`:
+  ```yaml
+  permissions:
+    contents: write
+  ```
+
+### 4️⃣ Finalizing Deployment
+
+After modifying the necessary files, deploy your instance of the map by following these steps:
+
+1. Commit and push the changes to your forked repository:
+   ```sh
+   git add .
+   git commit -m "Configured deployment settings"
+   git push origin main
+   ```
+2. Wait until the GitHub Actions workflow successfully completes.
+3. Navigate to the **Pages** section in your repository **Settings**.
+4. Enable GitHub Pages by selecting **Deploy from a branch** as the source.
+5. Choose the `gh-pages` branch and the root folder.
+6. Save the settings—GitHub Pages will deploy your instance of the map.
+
+You can now access your deployed map using the provided GitHub Pages URL.
+
+
+---
+
+
+## 💬 Localization & Translations
+
+You can add a new language to the map by modifying the translation files located in `src/translate/`.  
+
+### 📝 Adding a New Language  
+
+1️⃣ **Create a new translation file** in `src/translate/`, e.g., `es.js`.  
+
+2️⃣ **Update `index.js`** in the same folder:  
+   - Import your newly created translation file:  
+
+   ```js
+   import es from "./es";
+   
+   export default { en, ru, es };
+   ```
+
+  - Add the new language to the language list:
+
+  ```js
+    export const languages = [
+      { code: "en", title: "English" },
+      { code: "ru", title: "Русский" },
+      { code: "es", title: "Español" },
+    ];
+  ```
+  
+  ### 📏 Translating Measurements  
+
+  Measurement values are located in `src/measurements/`.  
+  To support multiple languages, update the relevant files in this folder.  
+
+  #### Files to Update  
+
+| Measurement Type        | File Name |
+|-------------------------|-----------|
+| Carbon Monoxide        | `co.js` |
+| Background Radiation   | `gs.js` |
+| Humidity              | `humidity.js` |
+| Ammonia (NH₃)         | `nh3.js` |
+| Nitrogen Dioxide (NO₂) | `no2.js` |
+| Noise Levels          | `noise.js`, `noiseavg.js`, `noisemax.js` |
+| PM10 Particulate Matter | `pm10.js` |
+| PM2.5 Particulate Matter | `pm25.js` |
+| Pressure              | `pressure.js` |
+| Temperature           | `temperature.js` |
+
+#### Example Translation Update (`humidity.js`)  
+
+To add support for **Spanish (es)**, update the `name`, `nameshort`, and `zones` properties:  
+
+```js
+
+     name: {  
+       en: "Humidity",  
+       ru: "Влажность",  
+       es: "Humedad"  
+     },  
+     nameshort: {  
+       en: "Humidity",  
+       ru: "Влажность",  
+       es: "Humedad"  
+     },  
+
+     zones: [  
+       {  
+         value: 30,  
+         color: "#ff4d00",  
+         label: {  
+           en: "Very dry",  
+           ru: "Очень сухо",  
+           es: "Muy seco"  
+         }  
+       }  
+     ]  
+  ```
+
+  ---
+
+
+## How to Fork the Repository with Custom Configuration Files
+
+1️⃣ Copy the `src/config/template` directory to your own:
+
+```sh
+cp -r src/config/template src/config/my-project
 ```
 
-### Compiles and minifies for production
+2️⃣ In the `src/config/my-project/config.json` file, all parameters are optional. You can configure the following settings:
 
+```json
+{
+  "LIBP2P": "Configuration for initializing the LIBP2P library",
+  "REMOTE_PROVIDER": "Server with Rozman",
+  "WIND_PROVIDER": "Server with wind data",
+  "MAP": {
+    "zoom": "Zoom level",
+    "position": {
+      "lat": "Latitude",
+      "lng": "Longitude"
+    }
+  },
+  "SHOW_MESSAGES": "Boolean value (true/false) indicating whether to display user messages on the map",
+  "DEFAUL_TYPE_PROVIDER": "Default data provider type (remote or realtime)",
+  "TITLE": "Project title",
+  "SERIES_MAX_VISIBLE": "Maximum number of data points on the chart before grouping is applied"
+}
 ```
-yarn build
+**Example**: [config.json](https://github.com/airalab/sensors.social/blob/master/src/config/main/config.json)
+
+3️⃣ In the `src/config/my-project/agents.json` file, specify a list of libp2p identifiers from which data can be received via pubsub in realtime mode.
+
+**Example**: [agents.json](https://github.com/airalab/sensors.social/blob/master/src/config/main/agents.json)
+
+4️⃣ In the `src/config/main/sensors.js` file, you can set an icon and a website link for a specific sensor:
+
+```json
+{
+  "HASH ID_SENSOR": {
+    "icon": "Path to the icon file",
+    "link": "URL of the website"
+  }
+}
 ```
 
-### Lints and fixes files
+**Example**: [sensors.json](https://github.com/airalab/sensors.social/blob/master/src/config/main/sensors.js)
+
+5️⃣ To ensure that your configuration is loaded in the final build, set the following environment variable:
 
 ```
-yarn lint
+VITE_CONFIG_ENV=my-project
 ```
 
-### Customize configuration
+You can configure this in your GitHub project settings under the Environments section.
+
+<img src="https://github.com/user-attachments/assets/97368424-ac08-4b62-9beb-3c36a61a1b47" width="500">
+
+---
+
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+## ❓ Support
 
-## Recommended IDE Setup
+For questions or suggestions, create an **issue** in the repository.
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+---

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sensors.robonomics.network",
-  "version": "0.5.0",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "dev": "vite --host",
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@chainsafe/libp2p-noise": "^13.0.1",
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@kyvg/vue3-notification": "^2.9.1",
     "@libp2p/bootstrap": "^9.0.6",
@@ -48,12 +48,14 @@
     "vue3-clipboard": "^1.0.0"
   },
   "devDependencies": {
+    "@release-it/conventional-changelog": "^10.0.1",
     "@rushstack/eslint-patch": "^1.1.4",
     "@vitejs/plugin-vue": "^3.0.3",
     "@vue/eslint-config-prettier": "^7.0.0",
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
     "prettier": "^2.7.1",
+    "release-it": "^19.0.1",
     "vite": "^3.2.7"
   }
 }