This commit is contained in:
Jai A
2020-06-09 21:57:52 -07:00
parent 33ee4c36b4
commit 88005c6603
4 changed files with 108 additions and 31 deletions

View File

@@ -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;
}

File diff suppressed because one or more lines are too long

View File

@@ -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);
}

View File

@@ -48,12 +48,12 @@
</div>
<div class="mod-bar">
<a class="mod-bar-active" onclick="toggleSection(this)" id="description-bar">Description</a>
<a onclick="toggleSection(this)" id="files-bar">Files</a>
<a onclick="toggleSection(this)" id="api-bar">API</a>
<a href="https://github.com/Geometrically/fabricate">Source</a>
<a href="https://github.com/Geometrically/fabricate/wiki">Wiki</a>
<a href="https://github.com/Geometrically/fabricate/issues">Issues</a>
<a class="mod-bar-active mod-bar-href" onclick="toggleSection(this)" id="description-bar">Description</a>
<a class="mod-bar-href" onclick="toggleSection(this)" id="files-bar">Files</a>
<a class="mod-bar-href" onclick="toggleSection(this)" id="api-bar">API</a>
<a class="mod-bar-href" href="https://github.com/Geometrically/fabricate">Source</a>
<a class="mod-bar-href" href="https://github.com/Geometrically/fabricate/wiki">Wiki</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>
<p>This project has an API accessible from maven. You can add it to your project using the artifact below.</p>
<pre>
<code>
<div class="api-code-ref">
<h2>Maven</h2>
<p>This project has an API accessible from maven. You can add it to your project using the artifact below.</p>
<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>
<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>
<pre>
<code>
var client = new FabricateClient();
var mod = await client.requestMod(123);
&lt;dependency&gt;
&lt;groupId&gt;anime.sucks&lt;/groupId&gt;
&lt;artifactId&gt;balls&lt;/artifactId&gt;
&lt;version&gt;1.0&lt;/version&gt;
&lt;/dependency&gt;
</pre>
</div>
</div>
Console.WriteLine(mod);
</code>
</pre>
<div class="api-code-ref">
<h2>Website API</h2>
<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>