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

Author: treboryx

assets/css/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

nuxt.config.js

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

package.json

@@ -9,34 +9,39 @@
     "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",
-    "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",
+    "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"
   },
   "devDependencies": {
-    "@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"
+    "@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"
   },
   "optionalDependencies": {
     "iltorb": "~2.4.5",

pages/index.vue

@@ -1,24 +1,38 @@
 <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() {
-    // DSLAM LOADING
+    const check = cache.get("index");
+    if (check) return check;
     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/stats.vue

@@ -1,115 +1,173 @@
 <template>
-  <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
+
+  <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
     </h1>
-    <div class="grid max-w-md grid-cols-1 gap-4 mx-auto md:grid-cols-2">
+
+    <div class="mx-auto grid max-w-md grid-cols-1 gap-4 md:grid-cols-2">
+
       <div
-        class="flex flex-col items-center justify-center p-2 border border-red-500 rounded-md bg-red-500/25"
+        class="flex flex-col items-center justify-center rounded-md border border-red-500 bg-red-500/25 p-2"
       >
-        <h1 class="py-2 font-bold text-center text-red-500 uppercase">
-          Vodafone
+
+        <h1 class="py-2 text-center font-bold uppercase text-red-500">
+           Vodafone
         </h1>
+
         <img
-          class="w-6 my-2"
+          class="my-2 w-6"
           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 p-2 border border-blue-500 rounded-md bg-blue-500/25"
+        class="flex flex-col items-center justify-center rounded-md border border-blue-500 bg-blue-500/25 p-2"
       >
-        <h1 class="py-2 font-bold text-center text-blue-500 uppercase">
-          COSMOTE
+
+        <h1 class="py-2 text-center font-bold uppercase text-blue-500">
+           COSMOTE
         </h1>
+
         <img
-          class="w-6 my-2"
+          class="my-2 w-6"
           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 p-2 border border-blue-600 rounded-md bg-blue-600/30"
+        class="flex flex-col items-center justify-center rounded-md border border-blue-600 bg-blue-600/30 p-2"
       >
-        <h1 class="py-2 font-bold text-center text-blue-600 uppercase">
-          WIND
+
+        <h1 class="py-2 text-center font-bold uppercase text-blue-600">
+           WIND
         </h1>
+
         <img
-          class="w-6 my-2"
+          class="my-2 w-6"
           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 p-2 border border-orange-500 rounded-md bg-orange-500/25"
+        class="flex flex-col items-center justify-center rounded-md border border-orange-500 bg-orange-500/25 p-2"
       >
-        <h1 class="py-2 font-bold text-center text-orange-500 uppercase">
-          RURAL CONNECT
+
+        <h1 class="py-2 text-center font-bold uppercase text-orange-500">
+           RURAL CONNECT
         </h1>
+
         <img
-          class="w-6 my-2"
+          class="my-2 w-6"
           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 p-2 border border-gray-500 rounded-md bg-gray-500/25"
+        class="flex flex-col items-center justify-center rounded-md border border-gray-500 bg-gray-500/25 p-2"
       >
-        <h1 class="py-2 font-bold text-center text-gray-500 uppercase">
-          UNKNOWN
+
+        <h1 class="py-2 text-center font-bold uppercase text-gray-500">
+           UNKNOWN
         </h1>
-        <img class="w-6 my-2" src="@/static/img/g-marker.png" alt="Unknown" />
+
+        <img class="my-2 w-6" 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 p-2 border rounded-md bg-sky-500/25 border-sky-500"
+        class="flex flex-col items-center justify-center rounded-md border border-sky-500 bg-sky-500/25 p-2"
       >
-        <h1 class="py-2 font-bold text-center uppercase text-sky-500">
-          CENTERS
+
+        <h1 class="py-2 text-center font-bold uppercase text-sky-500">
+           CENTERS
         </h1>
+
         <img
-          class="w-6 my-2"
+          class="my-2 w-6"
           src="@/static/img/ote-marker-center-minified.png"
           alt="A.K Centers"
         />
+
         <span class="font-semibold">{{ data.centers }}</span>
+
       </div>
-      <div class="flex justify-between col-span-full">
+
+      <div class="col-span-full flex justify-between">
+
         <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" });
 
-    this.data = {
+    const payload = {
       vf: data.filter(c => c.isp === "Vodafone").length.toLocaleString(),
       ote: data.filter(c => c.isp === "OTE").length.toLocaleString(),
       rurcon: data
@@ -122,8 +180,11 @@ 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>
+

tailwind.config.js

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