Add new Tools page with mint-oapi-codegen (#38)

Co-authored-by: Claude <noreply@anthropic.com>

Author: gdotdesign

source/Components/Footer.mint

@@ -165,6 +165,11 @@ async component Footer {
                 "Packages"
               </a>
 
+              <a href="/tools">
+                TablerIcons.TOOLS
+                "Tools"
+              </a>
+
               <a href="/from/">
                 TablerIcons.TRANSFORM
                 "From … ?"

source/Components/Header.mint

@@ -77,6 +77,12 @@ component Header {
           label: "Packages",
           disabled: false,
           target: ""),
+        MenuItem.Link(
+          icon: TablerIcons.TOOLS,
+          href: "/tools",
+          label: "Tools",
+          disabled: false,
+          target: ""),
         MenuItem.Divider,
         MenuItem.Group(
           icon: TablerIcons.BOOK,

source/Data/Tools.mint

@@ -0,0 +1,10 @@
+module Data {
+  const TOOLS =
+    [
+      {
+        description: "A code generation utility that converts OpenAPI 3.0 specifications into idiomatic Mint language client code.",
+        name: "mint-oapi-codegen",
+        url: "https://github.com/saviorand/mint-oapi-codegen"
+      }
+    ]
+}

source/Pages/Packages.mint

@@ -58,7 +58,7 @@ component Pages.Packages {
         "Here are some curated packages for your next project!"
 
         if isMobile {
-          <></>
+          <span>" "</span>
         } else {
           <br/>
         }

source/Pages/Tools.mint

@@ -0,0 +1,84 @@
+component Pages.Tools {
+  connect Application exposing { isMobile }
+
+  // The tools to display.
+  property tools : Array(Tool)
+
+  // Styles for the grid.
+  style grid {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    align-content: start;
+    grid-gap: 2em;
+    display: grid;
+
+    if isMobile {
+      margin-top: 20px;
+      grid-gap: 15px;
+    }
+  }
+
+  // Styles for the root element.
+  style card {
+    border: 1px solid var(--border-color);
+    background: var(--background-color);
+    text-decoration: none;
+    border-radius: 5px;
+    color: inherit;
+    min-width: 0;
+
+    &:hover {
+      outline: 2px solid var(--color-mintgreen);
+      outline-offset: 2px;
+    }
+  }
+
+  // Style for the description.
+  style description {
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--text-secondary-color);
+
+    padding: 10px;
+    padding-top: 5px;
+  }
+
+  // Styles for the title of the card.
+  style title {
+    font-weight: bold;
+    font-size: 18px;
+
+    padding: 10px;
+    padding-bottom: 0;
+  }
+
+  // Renders the component.
+  fun render : Html {
+    <div>
+      <PageHero title="Tools">
+        "Here are some curated tools for working with Mint!"
+
+        if isMobile {
+          <span>" "</span>
+        } else {
+          <br/>
+        }
+
+        "To add your tool here reach out on "
+
+        ContentInstrumenter.instrument(
+          <a href="https://discord.gg/NXFUJs2">"Discord"</a>)
+
+        "."
+      </PageHero>
+
+      <div::grid>
+        for tool of tools {
+          <a::card href={tool.url} target="_blank" key={tool.name}>
+            <div::title>tool.name</div>
+            <div::description>tool.description</div>
+          </a>
+        }
+      </div>
+    </div>
+  }
+}

source/Routes.mint

@@ -33,6 +33,12 @@ routes {
     Packages.load(path)
   }
 
+  // Tools
+  // ---------------------------------------------------------------------------
+  /tools {
+    Application.setPage(Page.Page("Tools", <Pages.Tools tools={Data.TOOLS}/>))
+  }
+
   // API documentation.
   // ---------------------------------------------------------------------------
   /api*path (path : String) await {

source/Types.mint

@@ -212,6 +212,13 @@ type Package {
   url : String
 }
 
+// Data structure for a tool.
+type Tool {
+  description : String,
+  name : String,
+  url : String
+}
+
 // Type for an item for a language comparison.
 type FromItem {
   String(String)