From 674eafe56159ebaaa08d3d6e686ccd14d46a53f0 Mon Sep 17 00:00:00 2001
From: Pratyush Tiwary <cantaloupeinc.1@gmail.com>
Date: Tue, 26 Sep 2023 15:53:36 +0530
Subject: [PATCH 1/6] Added thank you page

---
 package-lock.json                  |  58 +++++++++++
 package.json                       |   1 +
 src/components/Sidebar/index.vue   |  70 +++++--------
 src/components/Sidebar/styles.css  |   6 ++
 src/pages/ThankYou/dependencies.js | 105 +++++++++++++++++++
 src/pages/ThankYou/index.vue       |  27 +++++
 src/pages/ThankYou/style.css       |   6 ++
 src/router/routes.js               |  22 ++--
 thankYouPageGenerator.mjs          | 160 +++++++++++++++++++++++++++++
 vite.config.js                     |   5 +-
 10 files changed, 403 insertions(+), 57 deletions(-)
 create mode 100644 src/pages/ThankYou/dependencies.js
 create mode 100644 src/pages/ThankYou/index.vue
 create mode 100644 src/pages/ThankYou/style.css
 create mode 100644 thankYouPageGenerator.mjs

diff --git a/package-lock.json b/package-lock.json
index fda6665..706232f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.43",
         "pinia": "^2.1.6",
+        "registry-url": "^6.0.1",
         "sql-formatter": "^12.2.4",
         "sql-query-identifier": "^2.5.0",
         "vue": "^3.3.4",
@@ -596,6 +597,14 @@
         "date-fns": ">=2.0.0"
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/discontinuous-range": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
@@ -674,6 +683,11 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
     "node_modules/jose": {
       "version": "4.14.4",
       "resolved": "https://registry.npmjs.org/jose/-/jose-4.14.4.tgz",
@@ -725,6 +739,14 @@
         "node": ">= 16"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "license": "MIT",
@@ -880,10 +902,38 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "license": "MIT"
     },
+    "node_modules/registry-url": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-6.0.1.tgz",
+      "integrity": "sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q==",
+      "dependencies": {
+        "rc": "1.2.8"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/remedial": {
       "version": "1.0.8",
       "license": "(MIT OR Apache-2.0)",
@@ -946,6 +996,14 @@
         "node": ">= 10.13"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vite": {
       "version": "4.4.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
diff --git a/package.json b/package.json
index 6028c23..97b5ac8 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "pinia": "^2.1.6",
+    "registry-url": "^6.0.1",
     "sql-formatter": "^12.2.4",
     "sql-query-identifier": "^2.5.0",
     "vue": "^3.3.4",
diff --git a/src/components/Sidebar/index.vue b/src/components/Sidebar/index.vue
index 92338d4..0ba99f6 100644
--- a/src/components/Sidebar/index.vue
+++ b/src/components/Sidebar/index.vue
@@ -1,10 +1,10 @@
 <script setup>
 defineProps(["elements"]);
 
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
-import { sideBarList } from "./sidebarLists";
 import { DevtaLogo } from "../../assets";
+import { sideBarList } from "./sidebarLists";
 
 const route = useRoute();
 const isMobile = ref(window.innerWidth < 900);
@@ -22,9 +22,9 @@ let searchInput = ref("");
 
 const filteredList = () => {
   return sortedSideBarLists.filter((sideBarItem) => containsWordsInAnyOrder(
-      sideBarItem.name.toLowerCase()+sideBarItem.tags.toLowerCase(), 
-      searchInput.value.toLowerCase()
-    )
+    sideBarItem.name.toLowerCase() + sideBarItem.tags.toLowerCase(),
+    searchInput.value.toLowerCase()
+  )
   );
 };
 
@@ -61,12 +61,8 @@ watch(route, () => {
 </script>
 <template>
   <!-- <div class="col-sm-3"> -->
-  <div
-    id="large-devices"
-    style="width: 280px"
-    v-if="!isMobile"
-    class="d-flex flex-column justify-content-between flex-shrink-0 p-3 bg-dark p-0 m-0 vh-100 w-full"
-  >
+  <div id="large-devices" style="width: 280px" v-if="!isMobile"
+    class="d-flex flex-column justify-content-between flex-shrink-0 p-3 bg-dark p-0 m-0 vh-100 w-full">
     <!-- header -->
     <div>
       <router-link to="/" class="d-flex align-items-center text-decoration-none">
@@ -81,22 +77,14 @@ watch(route, () => {
 
     <!-- body -->
     <div class="overflow-auto flex-grow-1">
-      <input
-        type="text"
-        id="desktopSearchBar"
-        v-model="searchInput"
-        placeholder="Search..."
-        class="form-control mono-font my-2"
-        data-bs-theme="dark"
-      />
+      <input type="text" id="desktopSearchBar" v-model="searchInput" placeholder="Search..."
+        class="form-control mono-font my-2" data-bs-theme="dark" />
       <ul class="nav nav-pills flex-column gap-1">
         <div v-for="(item, index) in filteredList()" :key="index">
           <li class="nav-item">
-            <router-link
-              :to="item.route"
+            <router-link :to="item.route"
               :class="currentPath === item.route ? 'text-white nav-link active' : 'text-white nav-link '"
-              aria-current="page"
-            >
+              aria-current="page">
               <i :class="item.iconClass"></i> {{ item.name }}
             </router-link>
           </li>
@@ -108,42 +96,30 @@ watch(route, () => {
     <div class="text-white">
       <hr />
       <small> Developer tools that are supposed to help you 🚀 </small>
+      <hr />
+      <router-link to="thank-you" class="text-white text-decoration-none"><small>Checkout thank you page to see the
+          packages used! 🎁</small></router-link>
     </div>
   </div>
   <div id="small-devices" v-if="isMobile" class="d-flex flex-column">
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <div class="container d-flex">
-        <router-link class="navbar-brand d-flex align-items-center" to="/"><img class="img" :src="DevtaLogo" /><strong>Devta</strong></router-link>
-        <button
-          class="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarNav"
-          aria-controls="navbarNav"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-          @click="isCollapsed = !isCollapsed"
-        >
+        <router-link class="navbar-brand d-flex align-items-center" to="/"><img class="img"
+            :src="DevtaLogo" /><strong>Devta</strong></router-link>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"
+          @click="isCollapsed = !isCollapsed">
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse justify-content-end" :class="{ show: !isCollapsed }" id="navbarNav">
-          <input
-            type="text"
-            id="mobileSearchBar"
-            v-model="searchInput"
-            placeholder="Search..."
-            class="form-control mono-font my-2"
-            data-bs-theme="dark"
-          />
+          <input type="text" id="mobileSearchBar" v-model="searchInput" placeholder="Search..."
+            class="form-control mono-font my-2" data-bs-theme="dark" />
           <ul class="navbar-nav">
             <div v-for="(item, index) in filteredList()" :key="index">
               <li class="nav-item">
-                <router-link
-                  :to="item.route"
-                  @click="isCollapsed = !isCollapsed"
+                <router-link :to="item.route" @click="isCollapsed = !isCollapsed"
                   :class="currentPath === item.route ? 'nav-link text-white active' : 'nav-link text-white'"
-                  aria-current="page"
-                >
+                  aria-current="page">
                   <i :class="item.iconClass"></i> {{ item.name }}
                 </router-link>
               </li>
diff --git a/src/components/Sidebar/styles.css b/src/components/Sidebar/styles.css
index 1e5d832..3f43c1c 100644
--- a/src/components/Sidebar/styles.css
+++ b/src/components/Sidebar/styles.css
@@ -29,6 +29,7 @@ body {
 html {
   height: -webkit-fill-available;
 }
+
 .img {
   height: 35px;
   width: 35px;
@@ -115,3 +116,8 @@ hr {
   background-color: rgb(108, 117, 125);
   border-radius: 5px;
 }
+
+#large-devices {
+  position: sticky;
+  top: 0;
+}
\ No newline at end of file
diff --git a/src/pages/ThankYou/dependencies.js b/src/pages/ThankYou/dependencies.js
new file mode 100644
index 0000000..05e1810
--- /dev/null
+++ b/src/pages/ThankYou/dependencies.js
@@ -0,0 +1,105 @@
+const dependencies = [
+    {
+        "name": "vue",
+        "link": "https://www.npmjs.com/package/vue",
+        "description": "The progressive JavaScript framework for building modern web UI.",
+        "homepage": "https://github.com/vuejs/core/tree/main/packages/vue#readme"
+    },
+    {
+        "name": "vue-router",
+        "link": "https://www.npmjs.com/package/vue-router",
+        "description": "> - This is the repository for Vue Router 4 (for Vue 3) > - For Vue Router 3 (for Vue 2) see [vuejs/vue-router](https://github.com/vuejs/vue-router).",
+        "homepage": "https://github.com/vuejs/router#readme"
+    },
+    {
+        "name": "@vuepic/vue-datepicker",
+        "link": "https://www.npmjs.com/package/@vuepic/vue-datepicker",
+        "description": "Datepicker component for Vue 3",
+        "homepage": "https://vue3datepicker.com"
+    },
+    {
+        "name": "crypto-js",
+        "link": "https://www.npmjs.com/package/crypto-js",
+        "description": "JavaScript library of crypto standards.",
+        "homepage": "http://github.com/brix/crypto-js"
+    },
+    {
+        "name": "bootstrap-icons",
+        "link": "https://www.npmjs.com/package/bootstrap-icons",
+        "description": "Official open source SVG icon library for Bootstrap",
+        "homepage": "https://icons.getbootstrap.com/"
+    },
+    {
+        "name": "highlight.js",
+        "link": "https://www.npmjs.com/package/highlight.js",
+        "description": "Syntax highlighting with language autodetection.",
+        "homepage": "https://highlightjs.org/"
+    },
+    {
+        "name": "marked",
+        "link": "https://www.npmjs.com/package/marked",
+        "description": "A markdown parser built for speed",
+        "homepage": "https://marked.js.org"
+    },
+    {
+        "name": "sql-formatter",
+        "link": "https://www.npmjs.com/package/sql-formatter",
+        "description": "Format whitespace in a SQL query to make it more readable",
+        "homepage": "https://github.com/sql-formatter-org/sql-formatter#readme"
+    },
+    {
+        "name": "sql-query-identifier",
+        "link": "https://www.npmjs.com/package/sql-query-identifier",
+        "description": "A SQL query identifier",
+        "homepage": "https://github.com/sqlectron/sql-query-identifier#readme"
+    },
+    {
+        "name": "json-to-pretty-yaml",
+        "link": "https://www.npmjs.com/package/json-to-pretty-yaml",
+        "description": "A node module to convert JSON to YAML",
+        "homepage": "https://github.com/alexcrist/json-to-pretty-yaml#readme"
+    },
+    {
+        "name": "js2xmlparser",
+        "link": "https://www.npmjs.com/package/js2xmlparser",
+        "description": "Parses JavaScript objects into XML",
+        "homepage": "https://github.com/michaelkourlas/node-js2xmlparser#readme"
+    },
+    {
+        "name": "jose",
+        "link": "https://www.npmjs.com/package/jose",
+        "description": "'JSON Web Almost Everything' - JWA, JWS, JWE, JWT, JWK, JWKS for Node.js, Browser, Cloudflare Workers, Deno, Bun, and other Web-interoperable runtimes",
+        "homepage": "https://github.com/panva/jose"
+    },
+    {
+        "name": "moment-timezone",
+        "link": "https://www.npmjs.com/package/moment-timezone",
+        "description": "Parse and display moments in any timezone.",
+        "homepage": "http://momentjs.com/timezone/"
+    },
+    {
+        "name": "moment",
+        "link": "https://www.npmjs.com/package/moment",
+        "description": "Parse, validate, manipulate, and display dates",
+        "homepage": "https://momentjs.com"
+    },
+    {
+        "name": "pinia",
+        "link": "https://www.npmjs.com/package/pinia",
+        "description": "Intuitive, type safe and flexible Store for Vue",
+        "homepage": "https://github.com/vuejs/pinia#readme"
+    },
+    {
+        "name": "bootstrap",
+        "link": "https://www.npmjs.com/package/bootstrap",
+        "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
+        "homepage": "https://getbootstrap.com/"
+    },
+    {
+        "name": "@highlightjs/vue-plugin",
+        "link": "https://www.npmjs.com/package/@highlightjs/vue-plugin",
+        "description": "Highlight.js Vue Plugin"
+    }
+]; 
+
+ export default dependencies;
\ No newline at end of file
diff --git a/src/pages/ThankYou/index.vue b/src/pages/ThankYou/index.vue
new file mode 100644
index 0000000..663f341
--- /dev/null
+++ b/src/pages/ThankYou/index.vue
@@ -0,0 +1,27 @@
+<script setup>
+import dependencies from "./dependencies";
+</script>
+
+<template>
+    <div class="d-flex align-items-center flex-column w-100 mt-5 text-center">
+        <h3>Thanks to these awesome packages!</h3>
+        <p>The following packages are used in the project to help deliver awesome tools to you!</p>
+        <div class="packages">
+            <div class="package card text-start" v-for="item in dependencies">
+                <div class="card-body d-flex flex-column">
+                    <h5 class="card-title">{{ item.name }}</h5>
+                    <p class="card-text flex-grow-1">{{ item.description }}</p>
+                    <div class="btn-group" role="group">
+                        <a :href="item.link" class="btn btn-primary" target="_blank"><i class="bi bi-box-arrow-up-right"
+                                style="margin-right: 5px;"></i>Checkout on NPM</a>
+                        <a :href="item.homepage" class="btn btn-primary" target="_blank"
+                            v-if="item.homepage !== undefined"><i class="bi bi-box-arrow-up-right"
+                                style="margin-right: 5px;"></i>Homepage</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style src="./style.css"></style>
\ No newline at end of file
diff --git a/src/pages/ThankYou/style.css b/src/pages/ThankYou/style.css
new file mode 100644
index 0000000..3176cec
--- /dev/null
+++ b/src/pages/ThankYou/style.css
@@ -0,0 +1,6 @@
+.packages {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    width: 100%;
+    gap: 10px;
+}
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index 0d39ae7..f1f7b09 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,18 +1,19 @@
 import { createRouter, createWebHistory } from "vue-router";
-import HashGenerator from "../pages/HashGenerator/index.vue";
+import APITester from "../pages/APITester/index.vue";
 import Base64Text from "../pages/Base64Text/index.vue";
 import DateToUnix from "../pages/DateToUnix/index.vue";
-import UnixToDate from "../pages/UnixToDate/index.vue";
-import JsonFormatter from "../pages/JsonFormatter/index.vue";
-import MarkdownPreview from "../pages/MarkdownPreview/index.vue";
-import TimeZoneConverter from "../pages/TimeZoneConverter/index.vue";
+import HashGenerator from "../pages/HashGenerator/index.vue";
+import Index from "../pages/Index/index.vue";
 import JSONToYAML from "../pages/JSONConverter/index.vue";
 import JWTDebugger from "../pages/JWTDebugger/index.vue";
-import SQLFormatter from "../pages/SQLFormatter/index.vue";
+import JsonFormatter from "../pages/JsonFormatter/index.vue";
+import MarkdownPreview from "../pages/MarkdownPreview/index.vue";
 import PSQLFormatter from "../pages/PSQLParser/index.vue";
-import Index from "../pages/Index/index.vue";
+import SQLFormatter from "../pages/SQLFormatter/index.vue";
+import ThankYou from "../pages/ThankYou/index.vue";
+import TimeZoneConverter from "../pages/TimeZoneConverter/index.vue";
 import URLParser from "../pages/URLParser/index.vue";
-import APITester from "../pages/APITester/index.vue";
+import UnixToDate from "../pages/UnixToDate/index.vue";
 
 const routes = [
   {
@@ -93,6 +94,11 @@ const routes = [
     component: APITester,
     name: "API Tester",
   },
+  {
+    path: "/thank-you",
+    component: ThankYou,
+    name: "Thank You",
+  },
 ];
 
 const router = createRouter({
diff --git a/thankYouPageGenerator.mjs b/thankYouPageGenerator.mjs
new file mode 100644
index 0000000..924785e
--- /dev/null
+++ b/thankYouPageGenerator.mjs
@@ -0,0 +1,160 @@
+import fs from "fs";
+import path from "path";
+import registryURL from "registry-url";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const src = path.join(__dirname, "src"),
+  pages = path.join(src, "pages"),
+  components = path.join(src, "components"),
+  stores = path.join(src, "stores"),
+  router = path.join(src, "router"),
+  utils = path.join(components, "utils"),
+  packageJson = path.join(__dirname, "package.json"),
+  thankYouPageDir = path.join(pages, "ThankYou"),
+  npmRegistryURL = registryURL();
+
+const NPMPackageLink = `https://www.npmjs.com/package/`;
+
+let modules = [];
+
+/*
+    Single module looks like this
+    module = {
+        "name": string,
+        "link": string,
+        "description": string,
+        "homepage": string
+    }
+
+    link here is the npm link to the package
+*/
+
+async function getPackageDetails(name) {
+  try {
+    const data = await (await fetch(npmRegistryURL + name)).json();
+
+    return {
+      success: {
+        description: data.description,
+        homepage: data.homepage,
+      },
+      error: false,
+    };
+  } catch (e) {
+    return {
+      success: false,
+      error: e,
+    };
+  }
+}
+
+function extractModules(content) {
+  const lines = content.split(/\n/g);
+
+  let modules = [];
+
+  let j = 0;
+
+  while (lines[j]) {
+    if (lines[j].match("from") || lines[j].startsWith("import")) {
+      lines[j] = lines[j]
+        .split(/\s/)
+        .at(-2)
+        .replace(/\"|\'|;/g, "");
+      if (!lines[j].match(/^\.[\/\\\.]*/g)) {
+        modules.push(lines[j]);
+      }
+    }
+    j++;
+  }
+  modules = new Set(modules);
+  modules = Array.from(modules);
+  return modules;
+}
+
+function getDirModules(dir) {
+  const files = fs.readdirSync(dir);
+  let tempModules = [];
+
+  for (let i = 0; i < files.length; i++) {
+    if (files[i].match(/\./)) {
+      const content = fs.readFileSync(path.join(dir, files[i]), "utf-8");
+      tempModules = new Set([...tempModules, ...extractModules(content)]);
+
+      tempModules = Array.from(tempModules);
+    }
+  }
+  return tempModules;
+}
+
+function getSrcModules(src) {
+  const moduleFolders = fs.readdirSync(src);
+  let tempModules = [];
+  for (let i = 0; i < moduleFolders.length; i++) {
+    tempModules = new Set([
+      ...tempModules,
+      ...getDirModules(path.join(src, moduleFolders[i])),
+    ]);
+
+    tempModules = Array.from(tempModules);
+  }
+  return tempModules;
+}
+
+async function generateDependenciesList() {
+  console.log(`Generating list of dependencies for thank you page... 👷‍♂️`);
+  modules = new Set(
+    [
+      ...getSrcModules(pages),
+      ...getSrcModules(components),
+      ...getDirModules(router),
+      ...getDirModules(stores),
+      ...getDirModules(utils),
+      ...getDirModules(src),
+    ].map((e) => (e.startsWith("@") ? e : e.split(/[\/\\]/)[0]))
+  );
+
+  modules = Array.from(modules);
+
+  // there are a lot of garbage generated
+  // let's clean that now by checking
+  // if the module found exists in the package.json file
+  const packageJsonContent = JSON.parse(fs.readFileSync(packageJson, "utf-8"));
+
+  const realDependencies = Object.keys(packageJsonContent.dependencies);
+
+  modules = modules.filter((e) => realDependencies.includes(e));
+
+  for (let i = 0; i < modules.length; i++) {
+    let details = await getPackageDetails(modules[i]);
+    let final = {
+      name: modules[i],
+      link: NPMPackageLink + modules[i],
+      description: details.success?.description || undefined,
+      homepage: details.success?.homepage || undefined,
+    };
+    modules[i] = final;
+  }
+
+  const dependenciesFile = `const dependencies = ${JSON.stringify(
+    modules,
+    null,
+    4
+  )}; \n\n export default dependencies;`;
+
+  fs.writeFileSync(
+    path.join(thankYouPageDir, "dependencies.js"),
+    dependenciesFile,
+    "utf-8"
+  );
+
+  console.log(`List of dependencies successfully generated ✨`);
+}
+
+export default () => ({
+  name: "dependencies-list-generator",
+  async configResolved() {
+    await generateDependenciesList();
+  },
+});
diff --git a/vite.config.js b/vite.config.js
index 6e01292..d0ee8b3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,10 +1,11 @@
-import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
+import { defineConfig } from "vite";
+import thankYouPageGenerator from "./thankYouPageGenerator.mjs";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), thankYouPageGenerator()],
   resolve: {
     alias: {
       vue: "vue/dist/vue.esm-bundler.js",

From a1252a49d56c0d7e5a27b34606a391d8778ec847 Mon Sep 17 00:00:00 2001
From: Pratyush Tiwary <cantaloupeinc.1@gmail.com>
Date: Tue, 26 Sep 2023 16:21:41 +0530
Subject: [PATCH 2/6] Fixed a grammatical mistake

---
 src/pages/ThankYou/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ThankYou/index.vue b/src/pages/ThankYou/index.vue
index 663f341..700d2ef 100644
--- a/src/pages/ThankYou/index.vue
+++ b/src/pages/ThankYou/index.vue
@@ -5,7 +5,7 @@ import dependencies from "./dependencies";
 <template>
     <div class="d-flex align-items-center flex-column w-100 mt-5 text-center">
         <h3>Thanks to these awesome packages!</h3>
-        <p>The following packages are used in the project to help deliver awesome tools to you!</p>
+        <p>The following packages are used in this project to help deliver awesome tools to you!</p>
         <div class="packages">
             <div class="package card text-start" v-for="item in dependencies">
                 <div class="card-body d-flex flex-column">

From c824ced742d4b09a1f1f7e03a6da5602b9fb5249 Mon Sep 17 00:00:00 2001
From: Pratyush Tiwary <cantaloupeinc.1@gmail.com>
Date: Tue, 26 Sep 2023 16:27:36 +0530
Subject: [PATCH 3/6] Added page header to thank you page

---
 src/components/Pageheader/index.vue |  4 ++--
 src/pages/ThankYou/index.vue        | 32 ++++++++++++++++-------------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/Pageheader/index.vue b/src/components/Pageheader/index.vue
index 15c3488..8db5eb0 100644
--- a/src/components/Pageheader/index.vue
+++ b/src/components/Pageheader/index.vue
@@ -1,14 +1,14 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import TopBarButtons from '../TopBarButtons/TopBarButtons.vue';
-
+defineProps(['hideHeading'])
 const route = useRoute()
 </script>
 
 <template>
     <div class="top_header ">
         <div class="heading w-auto">
-            <strong>
+            <strong v-if="!$props.hideHeading">
                 {{ route.name }}
             </strong>
         </div>
diff --git a/src/pages/ThankYou/index.vue b/src/pages/ThankYou/index.vue
index 700d2ef..f466068 100644
--- a/src/pages/ThankYou/index.vue
+++ b/src/pages/ThankYou/index.vue
@@ -1,22 +1,26 @@
 <script setup>
+import PageHeader from "../../components/Pageheader/index.vue";
 import dependencies from "./dependencies";
 </script>
 
 <template>
-    <div class="d-flex align-items-center flex-column w-100 mt-5 text-center">
-        <h3>Thanks to these awesome packages!</h3>
-        <p>The following packages are used in this project to help deliver awesome tools to you!</p>
-        <div class="packages">
-            <div class="package card text-start" v-for="item in dependencies">
-                <div class="card-body d-flex flex-column">
-                    <h5 class="card-title">{{ item.name }}</h5>
-                    <p class="card-text flex-grow-1">{{ item.description }}</p>
-                    <div class="btn-group" role="group">
-                        <a :href="item.link" class="btn btn-primary" target="_blank"><i class="bi bi-box-arrow-up-right"
-                                style="margin-right: 5px;"></i>Checkout on NPM</a>
-                        <a :href="item.homepage" class="btn btn-primary" target="_blank"
-                            v-if="item.homepage !== undefined"><i class="bi bi-box-arrow-up-right"
-                                style="margin-right: 5px;"></i>Homepage</a>
+    <div class="w-100 mt-3">
+        <PageHeader :hideHeading="true" />
+        <div class="d-flex align-items-center flex-column w-100 mt-5 text-center">
+            <h3>Thanks to these awesome packages!</h3>
+            <p>The following packages are used in this project to help deliver awesome tools to you!</p>
+            <div class="packages">
+                <div class="package card text-start" v-for="item in dependencies">
+                    <div class="card-body d-flex flex-column">
+                        <h5 class="card-title">{{ item.name }}</h5>
+                        <p class="card-text flex-grow-1">{{ item.description }}</p>
+                        <div class="btn-group" role="group">
+                            <a :href="item.link" class="btn btn-primary" target="_blank"><i class="bi bi-box-arrow-up-right"
+                                    style="margin-right: 5px;"></i>Checkout on NPM</a>
+                            <a :href="item.homepage" class="btn btn-primary" target="_blank"
+                                v-if="item.homepage !== undefined"><i class="bi bi-box-arrow-up-right"
+                                    style="margin-right: 5px;"></i>Homepage</a>
+                        </div>
                     </div>
                 </div>
             </div>

From dca1f067209ebb5d1c3cd5ec9f519bc567f7116d Mon Sep 17 00:00:00 2001
From: Pratyush Tiwary <36852896+pratyushtiwary@users.noreply.github.com>
Date: Tue, 26 Sep 2023 16:36:21 +0530
Subject: [PATCH 4/6] Update routes.js

---
 src/router/routes.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/router/routes.js b/src/router/routes.js
index 909a9c7..64108ea 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -14,7 +14,6 @@ import ThankYou from "../pages/ThankYou/index.vue";
 import TimeZoneConverter from "../pages/TimeZoneConverter/index.vue";
 import URLParser from "../pages/URLParser/index.vue";
 import UnixToDate from "../pages/UnixToDate/index.vue";
-import APITester from "../pages/APITester/index.vue";
 import ImagetoBase64 from "../pages/ImageToBase64/index.vue";
 
 const routes = [

From 3bf09cf64983426b3d4c5ca75e25459cecb61a6f Mon Sep 17 00:00:00 2001
From: Pratyush Tiwary <cantaloupeinc.1@gmail.com>
Date: Tue, 26 Sep 2023 16:39:18 +0530
Subject: [PATCH 5/6] Renamed file

---
 thankYouPageGenerator.mjs => dependenciesListGenerator.mjs | 0
 vite.config.js                                             | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename thankYouPageGenerator.mjs => dependenciesListGenerator.mjs (100%)

diff --git a/thankYouPageGenerator.mjs b/dependenciesListGenerator.mjs
similarity index 100%
rename from thankYouPageGenerator.mjs
rename to dependenciesListGenerator.mjs
diff --git a/vite.config.js b/vite.config.js
index d0ee8b3..cdb6f5a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,11 +1,11 @@
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import { defineConfig } from "vite";
-import thankYouPageGenerator from "./thankYouPageGenerator.mjs";
+import dependenciesListGenerator from "./dependenciesListGenerator.mjs";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), thankYouPageGenerator()],
+  plugins: [vue(), dependenciesListGenerator()],
   resolve: {
     alias: {
       vue: "vue/dist/vue.esm-bundler.js",

From f8ba69094e4ca20602575e2dd40a255b73f7159a Mon Sep 17 00:00:00 2001
From: Pratyush Tiwary <cantaloupeinc.1@gmail.com>
Date: Tue, 26 Sep 2023 21:17:21 +0530
Subject: [PATCH 6/6] Dependencies list is now generated only at build time

---
 dependenciesListGenerator.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/dependenciesListGenerator.mjs b/dependenciesListGenerator.mjs
index 924785e..7f553c3 100644
--- a/dependenciesListGenerator.mjs
+++ b/dependenciesListGenerator.mjs
@@ -154,6 +154,7 @@ async function generateDependenciesList() {
 
 export default () => ({
   name: "dependencies-list-generator",
+  apply: "build",
   async configResolved() {
     await generateDependenciesList();
   },