API Page

static/css/mod.css

@@ -93,10 +93,9 @@
 .mod-bar {
     display: flex;
     flex-direction: row;
-    border-bottom: 1px solid darkgrey;
 }
 
-.mod-bar a {
+.mod-bar-href {
     margin: 5px 10px 0 0;
     padding: 5px 10px;
     color: gray;
@@ -115,7 +114,7 @@
 }
 
 .mod-hide {
-    display: none;
+    display: none !important;
 }
 
 .mod-show {
@@ -254,7 +253,7 @@
 }
 
 .mod-description {
-    margin-top: 10px;
+    margin-top: 0px;
     width: 100%;
     background-color: white;
     border-radius: 0 5px 5px 5px;
@@ -273,7 +272,7 @@
 }
 
 .files-search {
-    margin-top: 10px;
+    margin-top: 0px;
     margin-bottom: 25px;
     display: flex;
     flex-direction: row;
@@ -295,7 +294,7 @@
 }
 
 .api {
-    margin-top: 10px;
+    margin-top: 0px;
     width: 100%;
     background-color: white;
     border-radius: 0 5px 5px 5px;
@@ -307,3 +306,14 @@
 .api-container {
     padding: 10px;
 }
+
+.api-code-block {
+    margin-top: 4px !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    border-radius: 0 5px 5px 5px;
+}
+
+.extra-top {
+    margin-top: 5px !important;
+}

static/js/mod.js

@@ -1,3 +1,5 @@
+//TODO Reduce repeated code
+
 let currentlySelected = document.getElementById("description-bar");
 let currentlySelectedDiv = document.getElementById("description");
 
@@ -15,4 +17,40 @@ function toggleSection(element) {
     currentlySelectedDiv.classList.add("mod-show");
 }
 
-hljs.initHighlightingOnLoad();
+let currentlyBuildSelected = document.getElementById("gradle-code-bar");
+let currentlyBuildSelectedDiv = document.getElementById("gradle-code");
+
+function toggleBuildSection(element) {
+    currentlyBuildSelected.classList.remove("mod-bar-active");
+    currentlyBuildSelected = element;
+    currentlyBuildSelected.classList.add("mod-bar-active");
+
+    currentlyBuildSelectedDiv.classList.remove("mod-show");
+    currentlyBuildSelectedDiv.classList.add("mod-hide");
+
+    currentlyBuildSelectedDiv = document.getElementById(element.id.replace("-bar", ""));
+
+    currentlyBuildSelectedDiv.classList.remove("mod-hide");
+    currentlyBuildSelectedDiv.classList.add("mod-show");
+}
+
+let currentlyApiSelected = document.getElementById("curl-code-bar");
+let currentlyApiSelectedDiv = document.getElementById("curl-code");
+
+function toggleApiSection(element) {
+    currentlyApiSelected.classList.remove("mod-bar-active");
+    currentlyApiSelected = element;
+    currentlyApiSelected.classList.add("mod-bar-active");
+
+    currentlyApiSelectedDiv.classList.remove("mod-show");
+    currentlyApiSelectedDiv.classList.add("mod-hide");
+
+    currentlyApiSelectedDiv = document.getElementById(element.id.replace("-bar", ""));
+
+    currentlyApiSelectedDiv.classList.remove("mod-hide");
+    currentlyApiSelectedDiv.classList.add("mod-show");
+}
+
+for (let block of document.getElementsByClassName("api-code-block")) {
+    hljs.highlightBlock(block);
+}

templates/mod-page.hbs

@@ -48,12 +48,12 @@
         </div>
 
         <div class="mod-bar">
-            <a class="mod-bar-active" onclick="toggleSection(this)" id="description-bar">Description</a>
+            <a class="mod-bar-active mod-bar-href" onclick="toggleSection(this)" id="description-bar">Description</a>
-            <a onclick="toggleSection(this)" id="files-bar">Files</a>
+            <a class="mod-bar-href" onclick="toggleSection(this)" id="files-bar">Files</a>
-            <a onclick="toggleSection(this)" id="api-bar">API</a>
+            <a class="mod-bar-href" onclick="toggleSection(this)" id="api-bar">API</a>
-            <a href="https://github.com/Geometrically/fabricate">Source</a>
+            <a class="mod-bar-href" href="https://github.com/Geometrically/fabricate">Source</a>
-            <a href="https://github.com/Geometrically/fabricate/wiki">Wiki</a>
+            <a class="mod-bar-href" href="https://github.com/Geometrically/fabricate/wiki">Wiki</a>
-            <a href="https://github.com/Geometrically/fabricate/issues">Issues</a>
+            <a class="mod-bar-href" href="https://github.com/Geometrically/fabricate/issues">Issues</a>
         </div>
 
         <div class="mod-description mod-show" id="description">
@@ -78,30 +78,59 @@
 
         <div class="api mod-hide" id="api">
             <div class="api-container">
-                <h2>Maven</h2>
+                <div class="api-code-ref">
-                <p>This project has an API accessible from maven. You can add it to your project using the artifact below.</p>
+                    <h2>Maven</h2>
-                <pre>
+                    <p>This project has an API accessible from maven. You can add it to your project using the artifact below.</p>
-                    <code>
+
+                    <div class="api-code-blocks">
+                        <div class="code-block-navigation">
+                            <a class="mod-bar-href mod-bar-active" onclick="toggleBuildSection(this)" id="gradle-code-bar">Gradle</a>
+                            <a class="mod-bar-href" onclick="toggleBuildSection(this)" id="maven-code-bar">Maven</a>
+                        </div>
+
+                        <pre class="api-code-block gradle mod-show" id="gradle-code">
+
 repositories {
-    jcenter()
+    maven {
+       url "https://cdn.sitename.com/maven"
+    }
 }
 
 dependencies {
-    modApi "me.sargunvohra.mcmods:autoconfig1u:ABC"
+    modApi "anime.sucks:balls:1.0"
 }
-                    </code>
+                        </pre>
-                </pre>
+                        <pre class="api-code-block mod-hide" id="maven-code">
 
-                <h2>Website API</h2>
+&lt;dependency&gt;
-                <p>All projects and project files can be pulled using our REST API. You can pull this project's information using the code snippets below.</p>
+    &lt;groupId&gt;anime.sucks&lt;/groupId&gt;
-                <pre>
+    &lt;artifactId&gt;balls&lt;/artifactId&gt;
-                    <code>
+    &lt;version&gt;1.0&lt;/version&gt;
-var client = new FabricateClient();
+&lt;/dependency&gt;
-var mod = await client.requestMod(123);
+                        </pre>
+                    </div>
+                </div>
 
-Console.WriteLine(mod);
+                <div class="api-code-ref">
-                    </code>
+                    <h2>Website API</h2>
-                </pre>
+                    <p>All projects and project files can be pulled using our REST API. You can pull this project's information using the code snippets below.</p>
+                    <div class="api-code-blocks">
+                        <div class="code-block-navigation">
+                            <a class="mod-bar-href mod-bar-active" onclick="toggleApiSection(this)" id="curl-code-bar">cURL</a>
+                            <a class="mod-bar-href" onclick="toggleApiSection(this)" id="js-code-bar">JS</a>
+                        </div>
+
+                        <pre class="api-code-block extra-top mod-show shell" id="curl-code">
+
+$ curl -XGET -H "Content-type: application/json" 'http://api.sitename.com/mod/testmod'
+                        </pre>
+                        <pre class="api-code-block extra-top mod-hide javascript" id="js-code">
+
+let httpClient = TooLazyToMakeWorkingCode();
+httpClient.request('http://api.sitename.com/mod/testmod');
+                        </pre>
+                    </div>
+                </div>
             </div>
         </div>
     </div>