Meta Tags for Course, Schedule, Department and Explore pages (#350)

* SEO

SEO is almost done, just need to fix the html page with JS disabled

* adding robots.txt

* Adding GZIP

We may want to find another way of improving performance... Gzip seems to come with its security downfalls.

* small change for redirect to https

* removing

* changes

* Adding changes

* Added keywords

I'm going to do the functions later

* hopefully this fixes the dependency issue

* previous push didnt have vue-meta lol

* not smart to code and type up essay at the same time. Compression-webpack doesnt work bc of ELIFECYCLE...

* installed the compression-webpack@6.1.1

* Added cache exprie dates and made vue-meta better looking

instead of having to see 2 meta descriptions, we only see the child description. We do however have to call metainfo in all pages...

package.json

@@ -13,5 +13,6 @@
   "devDependencies": {
     "cross-env": "^7.0.2",
     "npm-run-all": "^4.1.5"
-  }
+  },
+  "dependencies": {}
 }

src/web/nginx.conf

@@ -13,17 +13,37 @@ http {
   default_type application/octet-stream;
   keepalive_timeout  65;
 
+# Expires map
+  map $sent_http_content_type $expires {
+      default                    off;
+      text/html                  epoch;
+      text/css                   max;
+      application/javascript     max;
+      ~image/                    max;
+  }
+
+
 
   server{
     listen 80;
     listen [::]:80;
     server_name ${HOST};
-    return 301 https://${HOST};
+    return 301 https://${HOST}$request_uri;
   }
 
   server {
     listen 443 ssl http2;
     listen [::]:443 ssl http2;
+    server_tokens off;
+    expires $expires;
+
+    # ----- GZIP -----
+    gzip on;
+    gzip_static on;    
+    gzip_proxied  any;
+    gzip_vary on;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k; 
 
     ssl_certificate      /etc/nginx/cert/${HOST}.crt;
     ssl_certificate_key  /etc/nginx/cert/${HOST}.key;
@@ -47,6 +67,18 @@ http {
     # Secure Diffie-Hellman for TLS
     ssl_dhparam /etc/nginx/cert/${HOST}.pem;
 
+    ssl_session_cache shared:TLS:10m;
+    ssl_session_timeout 10m;
+    ssl_buffer_size 4k;
+
+    # Set HSTS to 365 days
+    add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload' always;
+
+    # OCSP stapling
+    ssl_stapling on;
+    ssl_stapling_verify on;
+    resolver 1.1.1.1 1.0.0.1 [2606:4700:4700::1111] [2606:4700:4700::1001]; # Cloudflare
+
 
     # simple secure admin panel, will change later
     location ~* ^/admin {
@@ -67,6 +99,5 @@ http {
       proxy_pass http://yacs_api:5000;
       client_max_body_size 3M;
     }
-
   }
 }

src/web/package.json

@@ -10,41 +10,43 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/vue-fontawesome": "^0.1.9",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/vue-fontawesome": "^0.1.10",
     "axios": "^0.19.2",
-    "bootstrap-vue": "^2.11.0",
-    "core-js": "^3.6.5",
+    "bootstrap-vue": "^2.20.1",
+    "compression-webpack-plugin": "^6.1.1",
+    "core-js": "^3.8.1",
     "dom-to-image": "^2.6.0",
-    "eslint-config-prettier": "^6.10.1",
+    "eslint-config-prettier": "^6.15.0",
     "html2canvas": "^1.0.0-rc.7",
-    "moment": "^2.24.0",
+    "moment": "^2.29.1",
     "moment-locales-webpack-plugin": "^1.2.0",
     "prettier": "2.0.5",
-    "vue": "^2.6.11",
-    "vue-cookies": "^1.7.0",
+    "vue": "^2.6.12",
+    "vue-cookies": "^1.7.4",
     "vue-html2canvas": "0.0.4",
-    "vue-router": "^3.1.6",
+    "vue-meta": "^2.4.0",
+    "vue-router": "^3.4.9",
     "vue-virtual-scroller": "^1.0.10",
-    "vuex": "^3.5.1"
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
-    "@babel/polyfill": "^7.8.7",
-    "@vue/cli-plugin-babel": "^4.3.1",
-    "@vue/cli-plugin-eslint": "^4.3.1",
-    "@vue/cli-service": "^4.3.1",
+    "@babel/polyfill": "^7.12.1",
+    "@vue/cli-plugin-babel": "^4.5.9",
+    "@vue/cli-plugin-eslint": "^4.5.9",
+    "@vue/cli-service": "^4.5.9",
     "babel-eslint": "^10.0.3",
     "babel-plugin-istanbul": "^6.0.0",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.5.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "mutationobserver-shim": "^0.3.5",
+    "mutationobserver-shim": "^0.3.7",
     "popper.js": "^1.16.0",
     "portal-vue": "^2.1.6",
-    "sass": "^1.26.3",
+    "sass": "^1.30.0",
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-bootstrap-vue": "^0.6.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   }
 }

src/web/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+# Sitemap: 

src/web/scripts/entrypoint.sh

@@ -13,7 +13,6 @@ envsubst '\$HOST' < \
   /etc/nginx/nginx.template.conf > \
   /etc/nginx/nginx.conf
 
-
 # If SSL Certificate folder isn't present, generate one
 if [ ! -f /etc/nginx/cert/$HOST.crt ] &&
 [ ! -f /etc/nginx/cert/$HOST.key ] &&

src/web/src/App.vue

@@ -44,6 +44,20 @@ export default {
       }
     },
   },
+  metaInfo() {
+    return {
+      title: "YACS",
+      titleTemplate: null,
+      meta: [
+        { vmid: 'description', content:  'YACS is a RPI course scheduler to help students plan out their semester.'},
+        { vmid: 'keywords', content: "RPI, YACS, Rensselaer Polytechnic Institute"},
+        { property: 'og:title', content: "RPI - YACS Course Scheduler"},
+        { property: 'og:site_name', content: 'YACS'},
+        { property: 'og:type', content: 'website'},
+        { name: 'robots', content: 'index'} 
+      ]
+    }
+  },
 };
 </script>
 

src/web/src/components/Footer.vue

@@ -22,20 +22,23 @@
               class="link"
               href="https://github.com/YACS-RCOS/yacs.n"
               target="_blank"
+              rel="noopener"
             >
               Contribute (GitHub)
             </a>
             <a
               class="link"
               href="https://github.com/YACS-RCOS/yacs.n/issues/new?assignees=&labels=Feature+Request&template=feature-request.md&title=Feature+Request+—+Make+YACS+Great"
               target="_blank"
+              rel="noopener"
             >
               Request a Feature
             </a>
             <a
               class="link"
               href="https://github.com/YACS-RCOS/yacs.n/issues/new?assignees=&labels=bug&template=bug_report.md&title=Bug+—+Someone+made+an+oopsie"
               target="_blank"
+              rel="noopener"
             >
               Report a Bug
             </a>
@@ -47,13 +50,15 @@
               class="link"
               href="http://opensource-template.wikidot.com/legal:terms-of-use"
               target="_blank"
+              rel="noopener"
             >
               Terms of Use
             </a>
             <a
               class="link"
               href="http://opensource-template.wikidot.com/legal:privacy-policy"
               target="_blank"
+              rel="noopener"
             >
               Cookie Policy
             </a>

src/web/src/main.js

@@ -2,22 +2,23 @@ import "@babel/polyfill";
 import "mutationobserver-shim";
 import "./plugins/bootstrap-vue";
 import "./plugins/fontawesome-vue";
+import store from "./store";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 import Vue from "vue";
 import App from "./App.vue";
 import VueRouter from "vue-router";
 import router from "./routes";
 import VueCookies from "vue-cookies";
-import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+import Meta from 'vue-meta';
 
 Vue.config.productionTip = false;
 
 Vue.use(VueRouter);
 Vue.use(VueCookies);
+Vue.use(Meta);
 
 Vue.$cookies.config("7d");
 
-import store from "./store";
-
 new Vue({
   render: (h) => h(App),
   router,

src/web/src/pages/CourseExplorer.vue

@@ -139,6 +139,20 @@ export default {
       return deptClassDict;
     },
   },
+  metaInfo() {
+    return {
+      title: "Explore",
+      titleTemplate: "%s | YACS",
+      meta: [
+        { charset: 'utf-8' },
+        { vmid: 'description', content: "Explore courses in YACS"},
+        { name: 'keywords', content: "RPI, YACS, Rensselaer Polytechnic Institute"},
+        { property: 'og:title', content: "RPI - YACS Course Scheduler"},
+        { property: 'og:site_name', content: 'YACS'},
+        { property: 'og:type', content: 'website'}
+      ]
+    }
+  },
 };
 </script>
 

src/web/src/pages/CoursePage.vue

@@ -121,5 +121,16 @@ export default {
       return credits;
     },
   },
+  metaInfo() {
+    return {
+      title: this.courseTitle,
+      titleTemplate: "%s | YACS",
+      meta: [
+        { vmid: 'description', content: this.courseObj.description},
+        { vmid: 'keywords', content: "RPI, YACS, Rensselaer Polytechnic Institute, " + this.courseName.substring(0, 4)
+          + ", " + this.courseName.substring(5, 10) + ", " + this.courseName + ", " + this.courseTitle},
+      ]
+    }
+  },
 };
 </script>

src/web/src/pages/SubjectExplorer.vue

@@ -159,7 +159,17 @@ export default {
       return [leftColumn, rightColumn];
     },
   },
-};
+  metaInfo() {
+    return {
+      title: this.subject,
+      titleTemplate: "%s | YACS",
+      meta: [
+        { vmid: 'description', content: "RPI " + this.subject},
+        { vmid: 'keywords', content: "RPI, YACS, Rensselaer Polytechnic Institute, " + this.subject},
+      ]
+    }
+  },
+}
 </script>
 
 <style scope>

src/web/src/routes.js

@@ -8,6 +8,7 @@ import CourseExplorerPage from "./pages/CourseExplorer";
 import CoursePage from "./pages/CoursePage";
 import DegreeTemplatesPage from "./pages/DegreeTemplates";
 import SubjectExplorerPage from "./pages/SubjectExplorer";
+
 var router = new VueRouter({
   routes: [
     {

src/web/vue.config.js

@@ -1,7 +1,12 @@
 const path = require("path");
 const MomentLocalesPlugin = require("moment-locales-webpack-plugin");
+const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = {
+  chainWebpack(config) {
+    config.plugins.delete('prefetch');
+    config.plugin('CompressionPlugin').use(CompressionPlugin);
+  },
   devServer: {
     disableHostCheck: true,
     proxy: {