Merge pull request #103 from akanshSirohi/json-viewer-help

Help Webpage Added With JSON Viewer
akanshSirohi · Oct 15, 2024 · c02696e · c02696e
2 parents 269e3ba + df14fe1
commit c02696e
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 231 deletions.
diff --git a/index.js b/index.js
@@ -27,7 +27,10 @@ const available_cards = {
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
-app.use("/", require("./src/help"));
+app.use("/help", require("./src/help"));
+
+// serve public directory on root
+app.use("/", express.static("public"));
 
 for (const key in available_cards) {
   if (available_cards.hasOwnProperty(key)) {

diff --git a/package.json b/package.json
@@ -13,8 +13,8 @@
   "devDependencies": {
     "nodemon": "^3.1.7"
   },
-  "engines" : { 
-    "node" : ">=16.0.0" 
+  "engines": {
+    "node": ">=16.0.0"
   },
   "dependencies": {
     "axios": "^1.7.7",

diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Github Cards API - Help</title>
+    <script src="https://pfau-software.de/json-viewer/dist/iife/index.js"></script>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            background-color: #1d1f21;
+        }
+    </style>
+</head>
+<body>
+    <script>
+        fetch('/help')
+            .then(response => response.json())
+            .then(jsonData => {
+                const jsonViewer = document.createElement("andypf-json-viewer");
+                jsonViewer.expanded = 2;
+                jsonViewer.theme = "google-dark";
+                jsonViewer.showToolbar = true;
+                jsonViewer.showSize = true;
+                jsonViewer.showCopy = true;
+                jsonViewer.expandIconType = "square";
+                jsonViewer.data = jsonData;
+                document.body.appendChild(jsonViewer);
+            }).catch(err => console.error(err));        
+    </script>
+</body>
+</html>
diff --git a/src/help.js b/src/help.js
@@ -7,13 +7,13 @@ router.get("/", (req, res) => {
   const port = process.env.PORT || 5000;
   let hostname = req.hostname;
   let baseurl;
-  if(hostname == "localhost") {
+  if (hostname == "localhost") {
     baseurl = `http://localhost:${port}`;
-  }else{
+  } else {
     baseurl = `https://${hostname}`;
   }
   const themes = {
-    "dark": {
+    dark: {
       info: "Dark theme",
       example: [
         `${baseurl}/jokes-card?theme=dark`,
@@ -25,7 +25,7 @@ router.get("/", (req, res) => {
         `${baseurl}/harry-potter-spell-card?theme=dark`,
       ],
     },
-    "dark_2": {
+    dark_2: {
       info: "Dark theme 2",
       example: [
         `${baseurl}/jokes-card?theme=dark_2`,
@@ -37,7 +37,7 @@ router.get("/", (req, res) => {
         `${baseurl}/harry-potter-spell-card?theme=dark_2`,
       ],
     },
-    "light": {
+    light: {
       info: "Light theme",
       example: [
         `${baseurl}/jokes-card?theme=light`,
@@ -49,7 +49,7 @@ router.get("/", (req, res) => {
         `${baseurl}/harry-potter-spell-card?theme=light`,
       ],
     },
-    "rgb": {
+    rgb: {
       info: "Rgb theme",
       example: [
         `${baseurl}/jokes-card?theme=rgb`,
@@ -61,7 +61,7 @@ router.get("/", (req, res) => {
         `${baseurl}/harry-potter-spell-card?theme=rgb`,
       ],
     },
-    "pattern_1": {
+    pattern_1: {
       info: "Pattern theme 1",
       example: [
         `${baseurl}/jokes-card?theme=pattern_1`,
@@ -73,7 +73,7 @@ router.get("/", (req, res) => {
         `${baseurl}/harry-potter-spell-card?theme=pattern_1`,
       ],
     },
-    "pattern_2": {
+    pattern_2: {
       info: "Pattern theme 2",
       example: [
         `${baseurl}/jokes-card?theme=pattern_2`,
@@ -85,7 +85,7 @@ router.get("/", (req, res) => {
         `${baseurl}/harry-potter-spell-card?theme=pattern_2`,
       ],
     },
-    "pattern_3": {
+    pattern_3: {
       info: "Pattern theme 3",
       example: [
         `${baseurl}/jokes-card?theme=pattern_3`,
@@ -97,7 +97,7 @@ router.get("/", (req, res) => {
         `${baseurl}/harry-potter-spell-card?theme=pattern_3`,
       ],
     },
-    "lemonade": {
+    lemonade: {
       info: "Lemonade theme",
       example: [
         `${baseurl}/jokes-card?theme=lemonade`,
@@ -109,23 +109,23 @@ router.get("/", (req, res) => {
         `${baseurl}/harry-potter-spell-card?theme=lemonade`,
       ],
     },
-    "techy": {
+    techy: {
       info: "Techy theme",
       supported_cards: ["programming-quotes-card", "motivational-quotes-card"],
       example: [
         `${baseurl}/programming-quotes-card?theme=techy`,
         `${baseurl}/motivational-quotes-card?theme=techy`,
       ],
     },
-    "neon_horizon": {
+    neon_horizon: {
       info: "Neon horizon theme",
       supported_cards: ["programming-quotes-card", "motivational-quotes-card"],
       example: [
         `${baseurl}/programming-quotes-card?theme=neon_horizon`,
         `${baseurl}/motivational-quotes-card?theme=neon_horizon`,
       ],
     },
-    "galaxy": {
+    galaxy: {
       info: "Galaxy theme",
       example: [
         `${baseurl}/jokes-card?theme=galaxy`,
@@ -135,7 +135,7 @@ router.get("/", (req, res) => {
         `${baseurl}/random-facts-card?theme=galaxy`,
       ],
     },
-    "custom": {
+    custom: {
       info: "Custom theme",
       args: {
         card_color: "Card color. Default: #ffffff  [Optional]",
@@ -156,20 +156,20 @@ router.get("/", (req, res) => {
         `${baseurl}/travel-destinations-card?theme=custom&bg_color=0000ff&font_color=ffffff`,
         `${baseurl}/random-facts-card?theme=custom&card_color=f0f&font_color=fff&bg_color=000&shadow=true&shadow_color=fff`,
         `${baseurl}/harry-potter-spell-card?theme=custom&card_color=00f&font_color=fff&bg_color=000&shadow=true&shadow_color=fff`,
-
       ],
-    }
+    },
   };
+
   const cards = {
     "jokes-card": {
       info: "Random programming jokes card",
       api: {
         args: {
-          theme: "Theme of card: All themes. Default: light  [Optional]"
+          theme: "Theme of card: All themes. Default: light  [Optional]",
         },
         example: [
           `${baseurl}/jokes-card?theme=light`,
-          `${baseurl}/jokes-card?theme=dark`
+          `${baseurl}/jokes-card?theme=dark`,
         ],
       },
     },
@@ -209,7 +209,7 @@ router.get("/", (req, res) => {
       info: "Generates random french word of the day with their english meanings.",
       api: {
         args: {
-        theme: "Theme of card. All themes. Default: light  [Optional]",
+          theme: "Theme of card. All themes. Default: light  [Optional]",
         },
         example: [`${baseurl}/french-word-of-the-day-card`],
       },
@@ -232,27 +232,24 @@ router.get("/", (req, res) => {
         example: [`${baseurl}/team-work-quote-card`],
       },
     },
-
     "got-quotes-card": {
       info: "Generate random motivational quote related to the game of thrones.",
       api: {
         args: {
-        theme: "Theme of card. All themes. Default: dark_2  [Optional]",
+          theme: "Theme of card. All themes. Default: dark_2  [Optional]",
         },
         example: [`${baseurl}/got-quotes-card`],
-        },
+      },
     },
-
     "breaking-bad-quote-card": {
       info: "Generate random motivational quote related to the breaking bad.",
       api: {
         args: {
-        theme: "Theme of card. All themes. Default: dark_2  [Optional]",
+          theme: "Theme of card. All themes. Default: dark_2  [Optional]",
         },
         example: [`${baseurl}/breaking-bad-quote-card`],
       },
     },
-
     "bhagavad-geeta-card": {
       info: "Generate a random quote from the bhagavad-geeta-card",
       api: {
@@ -262,7 +259,6 @@ router.get("/", (req, res) => {
         example: [`${baseurl}/bhagavad-geeta-card`],
       },
     },
-
     "programming-facts-card": {
       info: "Random programming facts card",
       api: {
@@ -272,32 +268,29 @@ router.get("/", (req, res) => {
         example: [`${baseurl}/programming-facts-card`],
       },
     },
-
-
     "fun-fact-card": {
-  info: "Displays a random fun fact card",
-  api: {
-    args: {
-      theme: "Theme of card. All themes. Default: light  [Optional]"
+      info: "Displays a random fun fact card",
+      api: {
+        args: {
+          theme: "Theme of card. All themes. Default: light  [Optional]",
+        },
+        example: [`${baseurl}/fun-fact-card`],
+      },
     },
-    example: [`${baseurl}/fun-fact-card`],
-  },
-},
-
-     "spanish-quote-card": {
-          info: "Random spanish quote card",
-          api: {
-            args: {
-              theme: "Theme of card. All themes. Default: dark  [Optional]"
-            },
-            example: [`${baseurl}/spanish-quote-card`],
-          },
+    "spanish-quote-card": {
+      info: "Random spanish quote card",
+      api: {
+        args: {
+          theme: "Theme of card. All themes. Default: dark  [Optional]",
         },
+        example: [`${baseurl}/spanish-quote-card`],
+      },
+    },
     "top-tweets-card": {
       info: "Random top Twitter Tweets card",
       api: {
         args: {
-          theme: "Theme of card. All themes. Default: dark_2  [Optional]"
+          theme: "Theme of card. All themes. Default: dark_2  [Optional]",
         },
         example: [`${baseurl}/top-tweets-card`],
       },
@@ -306,7 +299,7 @@ router.get("/", (req, res) => {
       info: "Random github facts",
       api: {
         args: {
-          theme: "Theme of card. All themes. Default: light  [Optional]"
+          theme: "Theme of card. All themes. Default: light  [Optional]",
         },
         example: [`${baseurl}/github-facts-card`],
       },
@@ -315,16 +308,16 @@ router.get("/", (req, res) => {
       info: "Programming security tips",
       api: {
         args: {
-          theme: "Theme of card. All themes. Default: light  [Optional]"
+          theme: "Theme of card. All themes. Default: light  [Optional]",
         },
         example: [`${baseurl}/security-tips-cards`],
-       },
+      },
     },
     "random-facts-card": {
       info: "Generates a random interesting fact",
       api: {
         args: {
-          theme: "Theme of card. All themes. Default: dark [Optional]"
+          theme: "Theme of card. All themes. Default: dark [Optional]",
         },
         example: [`${baseurl}/random-facts`],
       },
@@ -333,9 +326,9 @@ router.get("/", (req, res) => {
       info: "Generates a random spell from the Harry Potter books",
       api: {
         args: {
-          theme: "Theme of a card. All themes. Default: darrk [Optional]"
+          theme: "Theme of a card. All themes. Default: darrk [Optional]",
         },
-        example: [`${baseurl}/harry-potter-spell-card`]
+        example: [`${baseurl}/harry-potter-spell-card`],
       },
     },
     "travel-destinations-card": {
@@ -352,4 +345,4 @@ router.get("/", (req, res) => {
   res.json({ themes, cards });
 });
 
-module.exports = router;
+module.exports = router;