Format tags and applied max width to main

apps/blueprints/src/pages/_app.tsx

@@ -26,6 +26,10 @@ const globalStyles = css`
     min-height: 100%;
     font-family: titillium web, sans-serif;
   }
+  main {
+    max-width: 1400px;
+    margin: 0 auto;
+  }
 `;
 
 if (typeof window !== "undefined") {

apps/blueprints/src/pages/blueprint/[blueprintId].tsx

@@ -15,7 +15,7 @@ import {
   BlueprintPage,
   BlueprintStringData,
 } from "@factorio-sites/types";
-import { timeLogger } from "@factorio-sites/common-utils";
+import { TAGS_BY_KEY, timeLogger } from "@factorio-sites/common-utils";
 import {
   chakraResponsive,
   ChildTreeBlueprintBookEnriched,
@@ -199,7 +199,11 @@ export const Index: NextPage<IndexProps> = ({
                 </tr>
                 <tr>
                   <td>Tags</td>
-                  <td>{blueprint_page.tags.join(", ")}</td>
+                  <td>
+                    {blueprint_page.tags
+                      .map((tag) => `${TAGS_BY_KEY[tag].category}: ${TAGS_BY_KEY[tag].label}`)
+                      .join(", ")}
+                  </td>
                 </tr>
                 <tr>
                   <td>Last updated</td>

apps/blueprints/src/pages/index.tsx

@@ -48,7 +48,6 @@ export const Index: NextPage<IndexProps> = ({
   }, [router.query.q]);
 
   if (!data) return null;
-  console.log(JSON.stringify(router.query, null, 2));
 
   const entityOptions = Object.keys(data.entities).filter(
     (key) => !key.startsWith("factorio-logo") && !key.startsWith("crash-site")