Merge pull request #175 from openearth/clode-clone-infra

Clode clone infra
openearth · Jul 8, 2024 · 34574af · 34574af
2 parents 7acfb5b + 5bc027d
commit 34574af
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 85 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,31 +1,12 @@
-require('@rushstack/eslint-patch/modern-module-resolution')
-
 module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
   extends: [
-    'plugin:vue/essential',
-    '@vue/standard',
-    '@vue/eslint-config-prettier'
+    // add more generic rulesets here, such as:
+    // 'eslint:recommended',
+    // 'plugin:vue/vue3-recommended',
+    'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
   ],
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
-      ],
-      env: {
-        jest: true
-      }
-    }
-  ]
-}
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+  }
+}
diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,11 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset']
-}
+  presets: [
+    [
+      '@vue/babel-preset-jsx',
+      {
+        vModel: false,
+        compositionAPI: true,
+      },
+    ],
+  ],
+}
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "@openearth/windgl": "^0.1.2",
     "@turf/distance": "^6.3.0",
     "@turf/turf": "^6.3.0",
-    "@vue/composition-api": "^1.0.0-rc.7",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "@vue/babel-preset-jsx": "^1.4.0",
     "core-js": "^3.6.5",
     "echarts": "^5.4.3",
     "file-saver": "^2.0.5",
@@ -24,7 +25,7 @@
     "oidc-client": "^1.11.5",
     "register-service-worker": "^1.7.1",
     "tiny-cookie": "^2.3.2",
-    "vue": "^2.6.11",
+    "vue": "^2.7.2",
     "vue-echarts": "^6.6.1",
     "vue-gtag": "^1.16.1",
     "vue-router": "^3.2.0",
@@ -42,34 +43,35 @@
     }
   },
   "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
     "@mdi/font": "^5.9.55",
     "@rushstack/eslint-patch": "^1.4.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-pwa": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-pwa": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-unit-jest": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-standard": "^8.0.1",
     "@vue/runtime-dom": "^3.3.4",
     "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^9.26.0",
     "lint-staged": "^9.5.0",
     "markdown-loader": "^6.0.0",
     "sass": "^1.32.0",
     "sass-loader": "^10.0.0",
     "vue-cli-plugin-vuetify": "~2.3.1",
     "vue-html-loader": "^1.2.4",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.11",
+    "vue-template-compiler": "~2.7.14",
     "vuetify-loader": "^1.7.0"
   },
   "gitHooks": {

diff --git a/src/components/NewsLayout.vue b/src/components/NewsLayout.vue
@@ -1,16 +1,37 @@
 <template>
-  <v-card color="rgba(0, 0, 0, 0)" rounded outlined class="stories-card">
+  <v-card
+    color="rgba(0, 0, 0, 0)"
+    rounded
+    outlined
+    class="stories-card"
+  >
     <v-list color="rgba(0, 0, 0, 0)">
-      <v-list-item v-for="(feed, index) in feeds" :key="index">
+      <v-list-item
+        v-for="(feed, index) in feeds"
+        :key="index"
+      >
         <v-list-item-content>
-          <v-list-item-title v-text="feed.title" />
-          <v-list-item-subtitle class="text-subtitle-1" v-text="feed.source" />
+          <div v-text="feed.title" />
+          <v-list-item-title>{{ content }}</v-list-item-title>
+          <div
+            class="text-subtitle-1"
+            v-text="feed.source"
+          />
+          <v-list-item-subtitle>{{ content }}</v-list-item-subtitle>
         </v-list-item-content>
 
         <v-list-item-action>
-          <v-list-item-action-text v-text="feed.date" />
-          <v-btn icon :href="feed.URL" target="_blank" rel="noopener">
-            <v-icon color="grey lighten-1">mdi-exit-to-app</v-icon>
+          <div v-text="feed.date" />
+          <v-list-item-action-text>{{ content }}</v-list-item-action-text>
+          <v-btn
+            icon
+            :href="feed.URL"
+            target="_blank"
+            rel="noopener"
+          >
+            <v-icon color="grey lighten-1">
+              mdi-exit-to-app
+            </v-icon>
           </v-btn>
         </v-list-item-action>
       </v-list-item>

diff --git a/src/components/StoriesLayout.vue b/src/components/StoriesLayout.vue
@@ -1,24 +1,42 @@
 <template>
-  <v-card color="rgba(0, 0, 0, 0)" rounded outlined class="stories-card">
+  <v-card
+    color="rgba(0, 0, 0, 0)"
+    rounded
+    outlined
+    class="stories-card"
+  >
     <v-card-title>
-      <custom-icon :name="theme" iconFolder="themes" class="ma-2" />
-      <span
-        ><strong>{{ theme }}</strong></span
-      >
+      <custom-icon
+        :name="theme"
+        icon-folder="themes"
+        class="ma-2"
+      />
+      <span><strong>{{ theme }}</strong></span>
     </v-card-title>
     <v-list color="rgba(0, 0, 0, 0)">
-      <v-list-item v-for="(story, index) in stories" :key="index">
+      <v-list-item
+        v-for="(story, index) in stories"
+        :key="index"
+      >
         <v-list-item-avatar size="130">
-          <v-img :src="story.icon"></v-img>
+          <v-img :src="story.icon" />
         </v-list-item-avatar>
 
         <v-list-item-content>
-          <v-list-item-title v-text="story.title"></v-list-item-title>
+          <div v-text="story.title" />
+          <v-list-item-title>{{ content }}</v-list-item-title>
         </v-list-item-content>
 
         <v-list-item-action>
-          <v-btn icon :href="story.URL" target="_blank" rel="noopener">
-            <v-icon color="grey lighten-1">mdi-exit-to-app</v-icon>
+          <v-btn
+            icon
+            :href="story.URL"
+            target="_blank"
+            rel="noopener"
+          >
+            <v-icon color="grey lighten-1">
+              mdi-exit-to-app
+            </v-icon>
           </v-btn>
         </v-list-item-action>
       </v-list-item>
@@ -29,6 +47,9 @@
 import CustomIcon from '@/components/CustomIcon'
 
 export default {
+  components: {
+    CustomIcon
+  },
   props: {
     stories: {
       type: Array,
@@ -38,9 +59,6 @@ export default {
       type: String,
       default: null
     }
-  },
-  components: {
-    CustomIcon
   }
 }
 </script>

diff --git a/src/views/Stories.vue b/src/views/Stories.vue
@@ -1,17 +1,29 @@
 <template>
   <v-flex class="stories pl-15">
     <v-row>
-      <v-col cols="8" class="pa-4">
+      <v-col
+        cols="8"
+        class="pa-4"
+      >
         <v-container>
           <h2 class="h2">
             Stories
           </h2>
-          <div v-for="theme in stories" :key="theme.id">
-            <stories-layout :theme="theme.theme" :stories="theme.stories" />
+          <div
+            v-for="theme in stories"
+            :key="theme.id"
+          >
+            <stories-layout
+              :theme="theme.theme"
+              :stories="theme.stories"
+            />
           </div>
         </v-container>
       </v-col>
-      <v-col cols="4" class="pa-4">
+      <v-col
+        cols="4"
+        class="pa-4"
+      >
         <v-container>
           <h2 class="h2">
             News
@@ -35,7 +47,7 @@ import StoriesLayout from '@/components/StoriesLayout.vue'
 import NewsLayout from '@/components/NewsLayout.vue'
 
 export default {
-  name: 'Stories',
+  name: 'StoriesItem',
   components: {
     StoriesLayout,
     NewsLayout

diff --git a/src/views/auth/callback.vue b/src/views/auth/callback.vue
@@ -6,6 +6,7 @@
 import Oidc from 'oidc-client'
 
 export default {
+  name: 'CallbackItem',
   mounted() {
     const store = new Oidc.WebStorageStateStore({ store: window.localStorage })
 

diff --git a/src/views/auth/logout.vue b/src/views/auth/logout.vue
@@ -6,6 +6,7 @@
 import Oidc from 'oidc-client'
 
 export default {
+  name: 'LogoutItem',
   mounted() {
     new Oidc.UserManager()
       .signoutRedirectCallback()

diff --git a/src/views/auth/silent.vue b/src/views/auth/silent.vue
@@ -6,6 +6,7 @@
 import Oidc from 'oidc-client'
 
 export default {
+  name: 'SilentItem',
   mounted() {
     new Oidc.UserManager().signinSilentCallback()
   }