Merge pull request #200 from fttx-gr/revert-199-master

Revert "feat: cache slow pages that aren't updated frequently anyway"

Author: treboryx

assets/css/main.css

@@ -108,14 +108,11 @@ export default {
   /*
    ** Global CSS
    */
-   css: [
-    "@/assets/css/main.css",
-  ],
+  css: [],
 
   loading: {
     color: "#109E92"
   },
-  
 
   /*
    ** Plugins to load before mounting the App
@@ -136,8 +133,8 @@ export default {
    ** Nuxt.js dev-modules
    */
   buildModules: [
-    "@nuxt/postcss8",
     // Doc: https://github.com/nuxt-community/eslint-module
+    "@nuxtjs/tailwindcss",
     "@nuxtjs/pwa"
   ],
 
@@ -196,15 +193,7 @@ export default {
    ** Build configuration
    ** See https://nuxtjs.org/api/configuration-build/
    */
-  build: {
-    transpile: [/^vue2-google-maps($|\/)/],
-    postcss: {
-      plugins: {
-        tailwindcss: {},
-        autoprefixer: {}
-      }
-    }
-  },
+  build: { transpile: [/^vue2-google-maps($|\/)/] },
   env: {
     VUE_APP_GOOGLE_MAPS_API_KEY:
       process.env.NODE_ENV === "development"

nuxt.config.js

@@ -9,39 +9,34 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
-    "@nuxtjs/axios": "5.13.6",
-    "@nuxtjs/sitemap": "2.4.0",
-    "@supabase/supabase-js": "1.35.4",
-    "animated-number-vue": "1.0.0",
-    "cookie-parser": "1.4.6",
-    "discord.js": "12.5.3",
-    "dotenv": "16.0.1",
-    "express": "4.18.1",
-    "express-rate-limit": "6.4.0",
-    "helmet": "5.1.0",
-    "hpp": "0.2.3",
-    "lru-cache": "7.14.0",
-    "marker-clusterer-plus": "2.1.4",
-    "morgan": "1.10.0",
-    "node-geocoder": "4.1.0",
-    "nuxt": "2.15.8",
-    "shrink-ray-current": "4.1.3",
-    "vue-browser-geolocation": "1.8.0",
-    "vue-toastification": "1.7.14",
-    "vue2-google-maps": "0.10.7",
-    "xss-clean": "0.1.1"
+    "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/sitemap": "^2.4.0",
+    "@supabase/supabase-js": "^1.35.4",
+    "animated-number-vue": "^1.0.0",
+    "cookie-parser": "^1.4.6",
+    "discord.js": "^12.5.3",
+    "dotenv": "^16.0.1",
+    "express": "^4.18.1",
+    "express-rate-limit": "^6.4.0",
+    "helmet": "^5.1.0",
+    "hpp": "^0.2.3",
+    "marker-clusterer-plus": "^2.1.4",
+    "morgan": "^1.10.0",
+    "node-geocoder": "^4.1.0",
+    "nuxt": "^2.15.8",
+    "shrink-ray-current": "^4.1.3",
+    "vue-browser-geolocation": "^1.8.0",
+    "vue-toastification": "^1.7.14",
+    "vue2-google-maps": "^0.10.7",
+    "xss-clean": "^0.1.1"
   },
   "devDependencies": {
-    "@nuxtjs/dotenv": "1.4.1",
-    "@nuxt/postcss8": "^1.1.3",
-    "autoprefixer": "^10.4.5",
-    "@nuxtjs/pwa": "3.3.5",
-    "prettier": "^2.6.2",
-    "prettier-plugin-tailwindcss": "^0.1.10",
-    "tailwindcss": "^3.0.24",
-    "postcss": "8.4.14",
-    "sass": "1.53.0",
-    "sass-loader": "13.0.2"
+    "@nuxtjs/dotenv": "^1.4.1",
+    "@nuxtjs/pwa": "^3.3.5",
+    "@nuxtjs/tailwindcss": "^5.1.3",
+    "postcss": "^8.4.14",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2"
   },
   "optionalDependencies": {
     "iltorb": "~2.4.5",

package.json

@@ -1,38 +1,24 @@
 <template>
-
   <Map :cabinets="cabinets" :dslam="dslam" />
-
 </template>
 
 <script>
 import { supabase } from "../utils/supabase-client";
-import LRU from "lru-cache";
-
-const options = {
-  max: 500,
-  ttl: 1000 * 60 * 60 * 2
-};
-
-const cache = new LRU(options);
-
 export default {
   async asyncData() {
-    const check = cache.get("index");
-    if (check) return check;
+    // DSLAM LOADING
     const { data: dslam } = await supabase.from("centers").select("*");
 
+    // Cabinets
     const { data: cabinets } = await supabase
       .from("cabinets")
       .select("*")
       .neq("type", "DSLAM");
 
-    cache.set("index", { dslam, cabinets });
-
     return {
       dslam,
       cabinets
     };
   }
 };
 </script>
-

pages/index.vue

@@ -1,173 +1,115 @@
 <template>
-
-  <div v-if="data.vf" class="mx-8 mt-4 max-w-4xl md:mx-auto">
-
-    <h1 class="my-4 text-center text-4xl font-semibold">
-       Stats of the FTTx.gr Database
+  <div v-if="data.vf" class="max-w-4xl mx-8 mt-4 md:mx-auto">
+    <h1 class="my-4 text-4xl font-semibold text-center">
+      Stats of the FTTx.gr Database
     </h1>
-
-    <div class="mx-auto grid max-w-md grid-cols-1 gap-4 md:grid-cols-2">
-
+    <div class="grid max-w-md grid-cols-1 gap-4 mx-auto md:grid-cols-2">
       <div
-        class="flex flex-col items-center justify-center rounded-md border border-red-500 bg-red-500/25 p-2"
+        class="flex flex-col items-center justify-center p-2 border border-red-500 rounded-md bg-red-500/25"
       >
-
-        <h1 class="py-2 text-center font-bold uppercase text-red-500">
-           Vodafone
+        <h1 class="py-2 font-bold text-center text-red-500 uppercase">
+          Vodafone
         </h1>
-
         <img
-          class="my-2 w-6"
+          class="w-6 my-2"
           src="@/static/img/vf-marker-minified.png"
           alt="Vodafone Cabinets"
         />
-
         <span class="font-semibold">{{ data.vf }}</span>
-
       </div>
-
       <div
-        class="flex flex-col items-center justify-center rounded-md border border-blue-500 bg-blue-500/25 p-2"
+        class="flex flex-col items-center justify-center p-2 border border-blue-500 rounded-md bg-blue-500/25"
       >
-
-        <h1 class="py-2 text-center font-bold uppercase text-blue-500">
-           COSMOTE
+        <h1 class="py-2 font-bold text-center text-blue-500 uppercase">
+          COSMOTE
         </h1>
-
         <img
-          class="my-2 w-6"
+          class="w-6 my-2"
           src="@/static/img/ote-marker-minified.png"
           alt="COSMOTE Cabinets"
         />
-
         <span class="font-semibold">{{ data.ote }}</span>
-
       </div>
-
       <div
-        class="flex flex-col items-center justify-center rounded-md border border-blue-600 bg-blue-600/30 p-2"
+        class="flex flex-col items-center justify-center p-2 border border-blue-600 rounded-md bg-blue-600/30"
       >
-
-        <h1 class="py-2 text-center font-bold uppercase text-blue-600">
-           WIND
+        <h1 class="py-2 font-bold text-center text-blue-600 uppercase">
+          WIND
         </h1>
-
         <img
-          class="my-2 w-6"
+          class="w-6 my-2"
           src="@/static/img/wind-marker-minified.png"
           alt="WIND Cabinets"
         />
-
         <span class="font-semibold">{{ data.wind }}</span>
-
       </div>
-
       <div
-        class="flex flex-col items-center justify-center rounded-md border border-orange-500 bg-orange-500/25 p-2"
+        class="flex flex-col items-center justify-center p-2 border border-orange-500 rounded-md bg-orange-500/25"
       >
-
-        <h1 class="py-2 text-center font-bold uppercase text-orange-500">
-           RURAL CONNECT
+        <h1 class="py-2 font-bold text-center text-orange-500 uppercase">
+          RURAL CONNECT
         </h1>
-
         <img
-          class="my-2 w-6"
+          class="w-6 my-2"
           src="@/static/img/rurcon-marker-minified.png"
           alt="Rural Connect Cabinets"
         />
-
         <span class="font-semibold">{{ data.rurcon }}</span>
-
       </div>
-
       <div
-        class="flex flex-col items-center justify-center rounded-md border border-gray-500 bg-gray-500/25 p-2"
+        class="flex flex-col items-center justify-center p-2 border border-gray-500 rounded-md bg-gray-500/25"
       >
-
-        <h1 class="py-2 text-center font-bold uppercase text-gray-500">
-           UNKNOWN
+        <h1 class="py-2 font-bold text-center text-gray-500 uppercase">
+          UNKNOWN
         </h1>
-
-        <img class="my-2 w-6" src="@/static/img/g-marker.png" alt="Unknown" />
-
+        <img class="w-6 my-2" src="@/static/img/g-marker.png" alt="Unknown" />
         <span class="font-semibold">{{ data.unknown }}</span>
-
       </div>
-
       <div
-        class="flex flex-col items-center justify-center rounded-md border border-sky-500 bg-sky-500/25 p-2"
+        class="flex flex-col items-center justify-center p-2 border rounded-md bg-sky-500/25 border-sky-500"
       >
-
-        <h1 class="py-2 text-center font-bold uppercase text-sky-500">
-           CENTERS
+        <h1 class="py-2 font-bold text-center uppercase text-sky-500">
+          CENTERS
         </h1>
-
         <img
-          class="my-2 w-6"
+          class="w-6 my-2"
           src="@/static/img/ote-marker-center-minified.png"
           alt="A.K Centers"
         />
-
         <span class="font-semibold">{{ data.centers }}</span>
-
       </div>
-
-      <div class="col-span-full flex justify-between">
-
+      <div class="flex justify-between col-span-full">
         <div>
-           ADSL:
-          <span class="font-semibold">{{ data.adsl }}</span>
-
+          ADSL: <span class="font-semibold">{{ data.adsl }}</span>
         </div>
-
         <div>
-           VDSL:
-          <span class="font-semibold">{{ data.vdsl }}</span>
-
+          VDSL: <span class="font-semibold">{{ data.vdsl }}</span>
         </div>
-
         <div>
-           FTTH:
-          <span class="font-semibold">{{ data.ftth }}</span>
-
+          FTTH: <span class="font-semibold">{{ data.ftth }}</span>
         </div>
-
       </div>
-
     </div>
-
   </div>
-
 </template>
 
 <script>
 import { supabase } from "@/utils/supabase-client";
-import LRU from "lru-cache";
-
-const options = {
-  max: 500,
-  ttl: 1000 * 60 * 60 * 2
-};
-
-const cache = new LRU(options);
 export default {
   data() {
     return {
       data: null
     };
   },
   async fetch() {
-    const check = cache.get("stats");
-    if (check) return (this.data = check);
-
     const { data } = await supabase
       .from("cabinets")
       .select("*", { count: "exact" });
     const { count: centers } = await supabase
       .from("centers")
       .select("*", { count: "exact" });
 
-    const payload = {
+    this.data = {
       vf: data.filter(c => c.isp === "Vodafone").length.toLocaleString(),
       ote: data.filter(c => c.isp === "OTE").length.toLocaleString(),
       rurcon: data
@@ -180,11 +122,8 @@ export default {
       adsl: data.filter(c => c.type === "ADSL").length.toLocaleString(),
       ftth: data.filter(c => c.type === "FTTH").length.toLocaleString()
     };
-    cache.set("stats", payload);
-    this.data = payload;
   }
 };
 </script>
 
 <style></style>
-

pages/stats.vue

@@ -1,14 +1,9 @@
 const colors = require("tailwindcss/colors");
 
 module.exports = {
-  content: [
-    "./components/**/*.{js,vue,ts}",
-    "./layouts/**/*.vue",
-    "./pages/**/*.vue",
-    "./plugins/**/*.{js,ts}",
-    "./nuxt.config.{js,ts}",
-    "./content/**/*.md"
-  ],
+  mode: "jit",
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
       colors: {