Migrate from Vue2 to Vue3 (#42)

* Removed unused files and code

* Remove unused dependencies

Removed unused dependencies, everything still works so far.

* Ran npm audit fix (non-breaking changes only)

* Axios update

* Migrate from vue-cli to vite

* Migrate to Vue3 - works but styling broken

* Navbar styling fixed and S3 test build added

* sideView styling fixed

* Popup styling fixed

* Map reset button fixed

* Map styling fixed

* Vite and autoprefixer dependencies update

Everything still works

* osmtogejson and xml version upgrade, plus popup warning fix

xmldom is a dependency of osmtogeojson that hasn't been updated yet, the xmldom version had to be updated in the package-lock to get around this, but there are unmerged PRs that should fix this eventually: tyrasd/osmtogeojson#138

* Clean cache in test workflow

* Fix CJS deprecation warning, fix minor popup styling

It's no longer recommended to use require: https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

* update SCSS variables

* Format and remove unused function

* Update README

* Several minor fixes

- Override xmldom to fix vulnerability
- Update README
- Minor formatting
- fix SVG warning in Chrome browser

* Remove vue-cli references

.env.development

@@ -0,0 +1 @@
+VITE_FONT_PATH=/fonts/

.env.production

@@ -0,0 +1 @@
+VITE_FONT_PATH=/sustainability_map/fonts/

.env.staging

@@ -0,0 +1 @@
+VITE_FONT_PATH=/fonts/

.eslintrc.js

@@ -10,11 +10,9 @@
 
 module.exports = {
   root: true,
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
   env: {
-    browser: true
+    browser: true,
+    es2022: true
   },
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
@@ -28,6 +26,7 @@ module.exports = {
   // add your custom rules here
   rules: {
     // allow async-await
+    'vue/multi-word-component-names': 'off',
     'no-multi-spaces': 'off',
     'generator-star-spacing': 'off',
     camelcase: [0, { properties: 'never' }],

.github/workflows/test-build-s3.yml

@@ -0,0 +1,40 @@
+name: S3 Test Build
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build-deploy-s3:
+    name: Build / Deploy to S3 Test Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set-up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: AWS Creds
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-west-2
+      - name: Clean npm cache
+        run: npm cache clean --force
+      - name: Remove node_modules and package-lock.json
+        run: |
+          rm -rf node_modules
+          rm package-lock.json
+      - name: npm install
+        run: |
+          npm install
+      - name: npm build frontend
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+        run: |
+          npm run build-stage
+      - name: deploy frontend to s3
+        run: |
+          aws s3 sync ./dist s3://sustainability-map

.prettierrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  // Specify the line length to match ESLint's max-len rule.
+  printWidth: 120,
+
+  // Use single quotes for strings.
+  singleQuote: true,
+
+  // Use a trailing comma in arrays and objects.
+  trailingComma: 'none',
+
+  // Use parentheses around arrow function parameters only when necessary.
+  arrowParens: 'avoid',
+
+  // Indent with 2 spaces to match ESLint's indent rule.
+  tabWidth: 2,
+
+  semi: false
+}

README.md

@@ -7,11 +7,7 @@ An interactive map showing the sustainability features available at Oregon State
 - Clone the repo
 - Use nvm to get node version 18 (`nvm install 18 && nvm use 18`)
 - `npm install`
-- `npm run serve` to test-run the website
-
-## Notes about the build process:
-
-The source code (under `src`) gets automatically bundled by vue-cli (which uses webpack) into compact static assets under `public`, additional static assets dependent on outside sources (e.g. OSU building geometry from Open Street Maps) get created before the vue-cli webpack build via scripts under the `util` directory.
+- `npm run dev` to test-run the website
 
 ## Helpful References for Development
 
@@ -27,6 +23,7 @@ The source code (under `src`) gets automatically bundled by vue-cli (which uses
 - [Leaflet GeoJSON Features](https://leafletjs.com/examples/geojson/)
 - [Leaflet Quickstart Guide](https://leafletjs.com/examples/quick-start/)
 - [Official Leaflet Docs](https://leafletjs.com/reference-1.6.0.html)
-- [Vue2Leaflet GitHub Page](https://github.com/vue-leaflet/Vue2Leaflet)
+- [Vue-Leaflet GitHub Page](https://github.com/vue-leaflet/vue-leaflet)
 - [Vue2Leaflet Docs](https://vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api)
+  - Vue2Leaflet is not compatible with Vue 3, so we switched to Vue-Leaflet, which mimics Vue2Leaflet as much as possible and does not have a separate Docs page
 - [Vuex Store Docs](https://vuex.vuejs.org/)

index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
+      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
+      crossorigin="anonymous"
+    />
+    <title>OSU Sustainability Map</title>
+    <style>
+      h1.incompatible {
+        color: rgba(255, 255, 255, 0.85);
+        font-family: 'StratumNo2';
+        font-size: 90px;
+        padding: 30px;
+        padding-top: 10px;
+        background-color: #8b2728;
+        width: 100%;
+        height: 120px;
+      }
+      h3.incompatible {
+        color: #fff;
+        padding: 20px;
+      }
+      h4.incompatible {
+        color: #fff;
+        font-weight: bold;
+      }
+      div.incompatible {
+        text-align: center;
+      }
+      li.incompatible {
+        color: #fff;
+        list-style: none;
+      }
+      li.incompatible a {
+        font-size: 24px;
+        color: rgba(255, 255, 255, 0.7);
+        text-decoration: underline;
+      }
+
+      /*reset's default styling*/
+      html,
+      body,
+      #app {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>