Guidelines

.github/dependabot.yml

@@ -2,7 +2,7 @@ version: 2
 updates:
   - package-ecosystem: "npm"
     directory: "/"
-    target-branch: "master"
+    target-branch: "dev"
     schedule:
       interval: "weekly"
       open-pull-requests-limit: 20

.github/greetings.yml

@@ -4,7 +4,7 @@ on:
   issues:
     types: [opened]
   pull_request:
-    branches: [master]
+    branches: ["*"]
     types: [opened]
 
 

.github/workflows/validate.yml

@@ -3,7 +3,7 @@ name: PR Validation
 on:
   pull_request:
     types: [edited, opened, synchronize, reopened]
-    branches: ["*"]
+    branches: ["main", "dev"]
 
 jobs:
   validate-pr:

CONTRIBUTING.md

@@ -103,6 +103,14 @@ Our website uses the following libraries:
 - [vue-i18n](https://www.npmjs.com/package/vue-i18n): This is an internationalization plugin for Vue.js
 - [vue-router](https://www.npmjs.com/package/vue-router): Vue Router is the official routing library for Vue.js
 
+## Code Lint
+
+It's important to check your code for potential errors and adherence to coding standards. You can do this by running the linter with the following command:
+
+```bash
+npm run lint
+```
+
 ## Code Style
 
 Before push your contribution, ensure that your code is properly formatted. You can automatically
@@ -137,6 +145,7 @@ pull request or create an issue.
 ├── SECURITY.md: A document detailing the security practices of the project, including how to report vulnerabilities and security issues
 ├── babel.config.cjs: Configuration file for Babel, a JavaScript compiler, specifying how to transform modern JavaScript code into a backward-compatible version
 ├── default.conf: Nginx configuration file, specifying settings such as ports, routes, and other parameters
+├── eslint.config.cjs: Configuration file for ESLint
 ├── index.html: The main HTML file that serves as the entry point for the web application, containing the structure and layout of the webpage
 ├── package.json: A file that contains metadata about the project, including dependencies, scripts, and project configuration for Node.js applications
 ├── public

README.md

@@ -25,14 +25,14 @@ cd ihr-website
 Note: 
 - you can use [nvm](https://github.com/nvm-sh/nvm) to switch between node versions as per your need 
 
-Install all the npm packages. Go to root directory and type the following command to install all npm packages
+#### Install all the npm packages.
 
 ```bash
 npm install
 ```
 
 
-For compilations and hot-reloads in development
+#### For compilations and hot-reloads in development
 
 ```bash
 npm run dev
@@ -50,6 +50,12 @@ npm run build
 npm run lint
 ```
 
+#### To format files
+
+```bash
+npm run format
+```
+
 ## Deploy with Docker
 
 To deploy the project with Docker, follow these steps:
@@ -79,10 +85,11 @@ Replace `<host-port>` with the port on your host machine where you want to expos
 
 First off, thanks for taking the time to contribute! 🎉🎉
 
-When contributing to this repository, please first discuss the change you wish to make via issue with the maintainers of this repository before making a change. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
+Before you start, please follow these guidelines:
 
-1. Solve the issues which are listed
-2. Create your own issue and then send PR.
+1. **Solve Existing Issues**: If you find an existing issue that you would like to work on, please discuss it with the maintainers before starting to solve it. This ensures that everyone is on the same page regarding the approach and scope of the solution.
+2. **Create a New Issue**: If you have an idea for a new feature or have identified a bug that is not listed, please discuss it with the maintainers before creating a new issue. Providing context and details will help us understand the importance of your suggestion.
+3. **Pull Requests (PRs)**: Please note that PRs that are not assigned to contributors and are not related to an open issue will be closed automatically.
 
 Please refer to the project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow. The basic workflow:
 

eslint.config.cjs

@@ -0,0 +1,36 @@
+
+const globals = require("globals")
+const pluginVue = require("eslint-plugin-vue")
+const js = require("@eslint/js")
+
+
+module.exports = [
+  ...pluginVue.configs['flat/recommended'],
+  {
+    files: ["**/*.{vue,js,jsx,cjs,mjs}"],
+    ignores: ["**/tests/*"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        myCustomGlobal: "readonly"
+      },
+    },
+    rules: {
+       "vue/no-v-html": "off",
+       "vue/multi-word-component-names": "off",
+       "vue/require-prop-types": "off",
+       "vue/require-default-prop": "off",
+       "vue/no-template-shadow": "off",
+       "vue/require-explicit-emits": "off",
+       "vue/no-useless-template-attributes": "off",
+       "vue/return-in-emits-validator": "off",
+       "vue/no-side-effects-in-computed-properties": "off",
+       "vue/no-v-text-v-html-on-component": "off",
+      // ...js.configs.recommended.rules,
+
+    },
+  }
+]

package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "lint": "npx eslint --format stylish --fix",
     "format": "prettier --write src/",
     "test": "jest --verbose"
   },
@@ -29,12 +29,13 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.0",
+    "@eslint/js": "^9.14.0",
     "@quasar/vite-plugin": "^1.8.0",
-    "@rushstack/eslint-patch": "^1.10.4",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/eslint-config-prettier": "^10.1.0",
     "eslint": "^9.14.0",
     "eslint-plugin-vue": "^9.30.0",
+    "globals": "^15.12.0",
     "jest": "^29.7.0",
     "joi": "^17.13.3",
     "prettier": "^3.3.3",

src/App.vue

@@ -9,7 +9,7 @@ import LocalStorageBanner from './components/LocalStorageBanner.vue'
 let scrollPosition = ref(0)
 
 const showScrollTopButton = () => {
-  return scrollPosition > 0
+  return scrollPosition.value > 0
 }
 
 const scrollToTop = () => {
@@ -20,7 +20,7 @@ const scrollToTop = () => {
 }
 
 const updateScrollPosition = () => {
-  scrollPosition = window.scrollY
+  scrollPosition.value = window.scrollY
 }
 
 onMounted(() => {
@@ -33,19 +33,19 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <QLayout view="hHh LpR fff" id="app">
-    <Header></Header>
+  <QLayout id="app" view="hHh LpR fff">
+    <Header />
     <QPageContainer>
       <RouterView />
       <!-- <div id="IHR_last-element">&nbsp;</div> -->
     </QPageContainer>
-    <Footer></Footer>
+    <Footer />
     <button
       v-if="showScrollTopButton"
-      @click="scrollToTop"
       class="IHR_scroll-btn bg-primary text-white"
+      @click="scrollToTop"
     >
-      <QIcon name="fas fa-arrow-up"></QIcon>
+      <QIcon name="fas fa-arrow-up" />
     </button>
   </QLayout>
   <LocalStorageBanner :disable="true" />
@@ -111,5 +111,4 @@ onBeforeUnmount(() => {
 #IHR_last-element {
   height: 50px;
 }
-
 </style>

src/components/DateTimePicker.vue

@@ -76,11 +76,11 @@ const textColor = computed(() => {
     <QPopupProxy id="popupid" v-model="show">
       <QDate
         v-model="qTimeModel"
-        @update:model-value="propagate($event)"
         :mask="mask"
         :options="options"
         color="accent"
         minimal
+        @update:model-value="propagate($event)"
       />
     </QPopupProxy>
   </QIcon>

src/components/Feedback.vue

@@ -8,11 +8,11 @@ const showFeedbackDialog = ref(false)
 <template>
   <QBtn
     class="feedback-btn"
-    @click="showFeedbackDialog = true"
     no-caps
     unelevated
     label="Feedback"
     dense
+    @click="showFeedbackDialog = true"
   />
   <QDialog v-model="showFeedbackDialog">
     <QCard>
@@ -45,7 +45,7 @@ const showFeedbackDialog = ref(false)
         </div>
       </QCardSection>
       <QCardActions align="right">
-        <QBtn flat label="Close" v-close-popup />
+        <QBtn v-close-popup flat label="Close" />
       </QCardActions>
     </QCard>
   </QDialog>

src/components/Footer.vue

@@ -47,44 +47,44 @@ import { version } from '../../package.json'
               {{ $t('footer.reportPages.title') }}
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'global-report' })">{{
-                $t('footer.reportPages.global')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'global-report' })">
+                {{ $t('footer.reportPages.global') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'country', params: { cc: null } })">{{
-                $t('footer.reportPages.country')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'country', params: { cc: null } })">
+                {{ $t('footer.reportPages.country') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'network', params: { id: null } })">{{
-                $t('footer.reportPages.network')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'network', params: { id: null } })">
+                {{ $t('footer.reportPages.network') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'hostname', params: { id: null } })">{{
-                $t('footer.reportPages.hostName')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'hostname', params: { id: null } })">
+                {{ $t('footer.reportPages.hostName') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'tag', params: { id: null } })">{{
-                $t('footer.reportPages.tag')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'tag', params: { id: null } })">
+                {{ $t('footer.reportPages.tag') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'rank', params: { rank: null } })">{{
-                $t('footer.reportPages.rank')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'rank', params: { rank: null } })">
+                {{ $t('footer.reportPages.rank') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'rov' })">{{
-                $t('footer.reportPages.rov')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'rov' })">
+                {{ $t('footer.reportPages.rov') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'covid19' })">{{
-                $t('footer.reportPages.covid19')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'covid19' })">
+                {{ $t('footer.reportPages.covid19') }}
+              </RouterLink>
             </li>
           </ul>
           <ul>
@@ -94,19 +94,19 @@ import { version } from '../../package.json'
               </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'documentation' })">{{
-                $t('footer.about.title')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'documentation' })">
+                {{ $t('footer.about.title') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#AS-dependency' })">{{
-                $t('footer.documentation.analysisModules')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#AS-dependency' })">
+                {{ $t('footer.documentation.analysisModules') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#REST-API' })">{{
-                $t('footer.documentation.dataAccess')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#REST-API' })">
+                {{ $t('footer.documentation.dataAccess') }}
+              </RouterLink>
             </li>
           </ul>
           <ul>
@@ -116,15 +116,14 @@ import { version } from '../../package.json'
               </RouterLink>
             </li>
             <li>
-              <RouterLink
-                :to="Tr.i18nRoute({ name: 'documentation', hash: '#Acknowledgements' })"
-                >{{ $t('footer.about.acknowledgments') }}</RouterLink
-              >
+              <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#Acknowledgements' })">
+                {{ $t('footer.about.acknowledgments') }}
+              </RouterLink>
             </li>
             <li>
-              <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#Data-policy' })">{{
-                $t('footer.about.datapolicy')
-              }}</RouterLink>
+              <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#Data-policy' })">
+                {{ $t('footer.about.datapolicy') }}
+              </RouterLink>
             </li>
           </ul>
         </div>