endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

add clickable post thumbnails to docs homepage

Browse source
This commit is contained in:
ferricles 2024-06-05 02:41:43 -04:00
parent 0a6a6aea8b
commit 11842d4fce
6 changed files with 126 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
css/docs_home.css Normal file
View file

@ -0,0 +1,27 @@
article {
background-color: #212529;
margin: 0 0 30px;
padding: 10px 10px 10px;
border-radius: 5px;
display: block;
position: relative;
box-sizing: border-box;
}
article h2 {
font-weight: bold;
}
article a {
/* display: inline-block;
width:100%;
height: 100%; */
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

53
docs/damage_calc/index.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html scroll-behavior="smooth">
<head>
<title>WynnAtlas Help</title>
<link rel="icon" href="/media/icons/new/searcher.png">
<link rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
<!-- nunito font, copying wynnbuilder, which is copying wynndata -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="/thirdparty/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="/thirdparty/autoComplete.min.css">
<link rel="stylesheet" href="/css/article.css"> <!-- This one is the important one for docs -->
<link rel="stylesheet" href="/css/docs_home.css">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/sidebar.css">
<link rel="stylesheet" href="/css/wynnstyles.css">
<script type="text/javascript" src="/thirdparty/katex.js"></script>
</head>
<body class="all" style="overflow-y: scroll">
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
<a href = "/builder/"><img src="/media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
<a href = "/crafter/"><img src = "/media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
<a href = "/items/"><img src = "/media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
<a href = "/custom/"><img src = "/media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
<a href = "/map/"><img src = "/media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
<a href = "/wynnfo/"><img src = "/media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
<a onclick = "toggleIcons()"><img src = "/media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/>
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
</div>
<main>
<div class="full-width text-center">
<!-- <img src="./help_photo.png"/> -->
</div>
<div class="section">
<h2>Lorem Ipsum</h2>
<p>Hopefully this gets replced by a guide to Wynn 2.1 damage calculation</p>
</div>
</main>
<script type="text/javascript" src="/js/icons.js"></script>
</body>
</html>

10
docs/index.html
View file

@ -19,9 +19,13 @@
<link rel="stylesheet" href="/css/article.css"> <!-- This one is the important one for docs --> <link rel="stylesheet" href="/css/article.css"> <!-- This one is the important one for docs -->
<link rel="stylesheet" href="/css/docs_home.css">
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/sidebar.css"> <link rel="stylesheet" href="/css/sidebar.css">
<link rel="stylesheet" href="/css/wynnstyles.css"> <link rel="stylesheet" href="/css/wynnstyles.css">
<script text = "text/javascript" src = "/js/docs.js"></script>
<script text = "text/javascript">document.addEventListener("DOMContentLoaded", (event) => {populate_post_previews();})</script>
</head> </head>
<body class="all" style="overflow-y: scroll"> <body class="all" style="overflow-y: scroll">
<div id="main-sidebar" class="sidebar dark-7 dark-shadow"> <div id="main-sidebar" class="sidebar dark-7 dark-shadow">
@ -30,7 +34,7 @@
<a href = "/items/"><img src = "/media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a> <a href = "/items/"><img src = "/media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
<a href = "/custom/"><img src = "/media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a> <a href = "/custom/"><img src = "/media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
<a href = "/map/"><img src = "/media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a> <a href = "/map/"><img src = "/media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
<a href = "/wynnfo/"><img src = "/media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a> <a href = "."><img src = "/media/icons/new/book.png" alt = "Docs" title = "Docs"><b>Docs</b></a>
<a onclick = "toggleIcons()"><img src = "/media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a> <a onclick = "toggleIcons()"><img src = "/media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a> <a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
@ -43,6 +47,10 @@
<h2>Welcome to the WynnBuilder Docs</h2> <h2>Welcome to the WynnBuilder Docs</h2>
<p>Documentation Homepage - sections coming soon!</p> <p>Documentation Homepage - sections coming soon!</p>
</div> </div>
<div class ="section" id = "post-list">
</div>
</main> </main>
<script type="text/javascript" src="../../js/icons.js"></script> <script type="text/javascript" src="../../js/icons.js"></script>
</body> </body>

6
docs/items_adv_help/index.html
View file

@ -22,6 +22,7 @@
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/sidebar.css"> <link rel="stylesheet" href="/css/sidebar.css">
<link rel="stylesheet" href="/css/wynnstyles.css"> <link rel="stylesheet" href="/css/wynnstyles.css">
</head> </head>
<body class="all" style="overflow-y: scroll"> <body class="all" style="overflow-y: scroll">
<div id="main-sidebar" class="sidebar dark-7 dark-shadow"> <div id="main-sidebar" class="sidebar dark-7 dark-shadow">
@ -30,7 +31,7 @@
<a href = "/items/"><img src = "/media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a> <a href = "/items/"><img src = "/media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
<a href = "/custom/"><img src = "/media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a> <a href = "/custom/"><img src = "/media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
<a href = "/map/"><img src = "/media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a> <a href = "/map/"><img src = "/media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
<a href = "/wynnfo/"><img src = "/media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a> <a href = "/wynnfo/"><img src = "/media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
<a onclick = "toggleIcons()"><img src = "/media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a> <a onclick = "toggleIcons()"><img src = "/media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a> <a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
@ -39,7 +40,6 @@
<div class="full-width text-center"> <div class="full-width text-center">
<img src="./help_photo.png"/> <img src="./help_photo.png"/>
</div> </div>
<div class="section"> <div class="section">
<h2>What the heck is &ldquo;Advanced Item Search&rdquo;?</h2> <h2>What the heck is &ldquo;Advanced Item Search&rdquo;?</h2>
<p>The WynnBuilder team has been hard at work giving you the latest and greatest tools for optimizing your most complex Wynncraft builds. Now, we're introducing <strong class="rb-text">WynnAtlas</strong>, the new, bigger, better, smarter, powerful-er item guide! Featuring an extremely flexible expression language for filtering and sorting items, WynnAtlas' advanced item search system gives build engineers the power to select items with a high degree of granularity. Picking components for your brand-new Divzer WFA build has never been easier!</p> <p>The WynnBuilder team has been hard at work giving you the latest and greatest tools for optimizing your most complex Wynncraft builds. Now, we're introducing <strong class="rb-text">WynnAtlas</strong>, the new, bigger, better, smarter, powerful-er item guide! Featuring an extremely flexible expression language for filtering and sorting items, WynnAtlas' advanced item search system gives build engineers the power to select items with a high degree of granularity. Picking components for your brand-new Divzer WFA build has never been easier!</p>
@ -221,6 +221,6 @@
docsFns.append(genDocEntry(entry[0], entry[1], null, entry[2])); docsFns.append(genDocEntry(entry[0], entry[1], null, entry[2]));
} }
</script> </script>
<script type="text/javascript" src="../../js/icons.js"></script> <script type="text/javascript" src="/js/icons.js"></script>
</body> </body>
</html> </html>

32
js/docs.js Normal file
View file

@ -0,0 +1,32 @@
/** Vanilla JS does not allow dynamically fetching files in a local directory. We have to hard code the list to loop over.
* Each entry is the name of a subfolder in /docs/.
*/
const docs_post_titles = [
"items_adv_help",
"damage_calc"
]
/** Populates the HTML element with the id 'post-list'
*
*/
function populate_post_previews() {
post_list_parent = document.getElementById('post-list');
docs_post_titles.forEach((post_title) => {
post = document.createElement('article');
title = document.createElement('h2');
title.innerHTML = post_title;
post.appendChild(title);
summary = document.createElement('p');
summary.innerHTML = 'temporary content'
post.appendChild(summary);
link = document.createElement("a");
link.setAttribute('href', `/docs/${post_title}/`);
post.appendChild(link);
post_list_parent.appendChild(post);
});
}