Hackathon24 (#100)

.gitignore

@@ -19,6 +19,7 @@
 *.rar
 *.tar
 *.zip
+*.tgz
 
 # Logs and databases #
 ######################

.tool-versions

@@ -0,0 +1 @@
+nodejs 16.13.0

README.md

@@ -116,9 +116,7 @@ export function BadMagicClient() {
     ],
   };
 
-  return (
-    <BadMagic workspaces={[superheroWorkspace]} />
-  );
+  return <BadMagic basename="/dev/api" workspaces={[superheroWorkspace]} />;
 }
 ```
 
@@ -150,6 +148,7 @@ Usage:
 ```jsx
 <BadMagic
   applyAxiosInterceptors={applyAxiosInterceptors}
+  basename="/dev/api"
   workspaces={workspaces}
 />
 ```
@@ -174,7 +173,7 @@ export function AuthForm({
       <TextInput name="password" />
       <Button onClick={() => {
         // axios request to login user, fetch access token, and store access token in state or local storage
-        // then in the `applyAxiosInterceptors`, the `getAccessToken()` function can fetch the token from state or 
+        // then in the `applyAxiosInterceptors`, the `getAccessToken()` function can fetch the token from state or
         // local storage
       }}>
     </div>
@@ -246,7 +245,7 @@ Example:
 export function HistoryMetadata({
   metadata,
 }: {
-  metadata: Record<string, any>;
+  metadata: Record<string, any>,
 }) {
   if (!metadata?.accessToken) {
     return null;
@@ -267,6 +266,7 @@ Usage:
 <BadMagic
   HistoryMetadata={HistoryMetadata}
   applyAxiosInterceptors={applyAxiosInterceptors}
+  basename="/dev/api"
   workspaces={workspaces}
 />
 ```
@@ -280,7 +280,7 @@ Usage:
   - Alternatively, you can import BadMagic's stylesheet for default styling:
     ```html
     <link
-      href="https://unpkg.com/badmagic@^0.0.16/dist/css/markdown.min.css"
+      href="https://unpkg.com/badmagic@^0.0.40/dist/css/markdown.min.css"
       rel="stylesheet"
     />
     ```
@@ -311,6 +311,7 @@ const superheroes = {
 ```
 
 ## Route Deprecation
+
 - Each route can specify its deprecation status by adding a `deprecated` key to the object.
 - `deprecated` accepts a boolean and will by default is set to `false`
 
@@ -324,13 +325,14 @@ const superheroes = {
     {
       name: "Fetch Superhero",
       path: "/v1/superheroes/:superhero_id",
-      deprecated: true
+      deprecated: true,
     },
   ],
 };
 ```
 
 ## Input Field Tooltip
+
 - Each input type can have a tooltip hover to describe what the input field is expecting if the name is ambiguous.
 - The existence of a `description` attribute will generate the on-hover icon and it will pull the text from the `description` as well
 
@@ -346,7 +348,7 @@ const superheroes = {
         path: "/v1/superheroes/:superhero_id",
         method: "PATCH",
         body: [
-          { 
+          {
             name: "first_name",
             required: true,
             description: "The first name of the hero you want to update to"

example-api/main.js

@@ -0,0 +1,83 @@
+import express, { Router } from "express";
+import bodyParser from "body-parser";
+import cors from "cors";
+import chalk from "chalk";
+
+const app = express();
+
+app.use(
+  cors({
+    origin: "http://localhost:3000",
+  })
+);
+app.use(bodyParser.json());
+app.use(logMiddleware);
+
+const v1 = Router();
+v1.get("/:species(dogs|cats)/breeds/list/all", handleRoute);
+v1.get("/:species(dogs|cats)/breeds/:breed/images", handleRoute);
+v1.post("/:species(dogs|cats)/breeds", handleRoute);
+
+const v2 = Router();
+v2.get("/:species(dogs|cats)/breeds/list/all", handleRoute);
+
+app.use("/v1", v1);
+app.use("/v2", v2);
+
+/**
+ * @param {express.Request} req
+ * @param {express.Response} res
+ * @param {express.NextFunction} next
+ */
+function logMiddleware(req, res, next) {
+  console.log(
+    `${chalk.bgCyan(`[${localDate(new Date(), true)}]`)} ${chalk.yellow(
+      req.method
+    )} ${chalk.magenta(req.url)}`
+  );
+  next();
+}
+
+/**
+ * @param {express.Request} req
+ * @param {express.Response} res
+ * @returns {void}
+ */
+function handleRoute(req, res) {
+  const now = new Date();
+
+  res.json({
+    method: req.method,
+    path: req.route.path,
+    params: req.params,
+    query: req.query,
+    url: req.originalUrl,
+    body: req.body,
+    timestamp_iso: now.toISOString(),
+    timestamp_local: localDate(now),
+  });
+}
+
+/**
+ * @param {Date} date
+ * @param {boolean} [timeOnly = false]
+ * @returns {string}
+ */
+function localDate(date, timeOnly = false) {
+  return date.toLocaleString(["en-US"], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true,
+    ...(timeOnly
+      ? null
+      : {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+          timeZoneName: "short",
+        }),
+  });
+}
+
+app.listen(3333);

example-api/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "example-api",
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "node main.js"
+  },
+  "author": "Matt Miller <[email protected]>",
+  "license": "UNLICENSED",
+  "private": true,
+  "dependencies": {
+    "body-parser": "^1.20.2",
+    "chalk": "^5.3.0",
+    "cors": "^2.8.5",
+    "express": "^4.19.2"
+  },
+  "devDependencies": {
+    "@types/body-parser": "^1.19.5",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21"
+  }
+}