Restyle Docs Site

docs/functions.html

@@ -1,10 +1,12 @@
 <h1 id="nav-title">Functions</h1>
 
-<p class="box">
-  These functions are defined by Skript. You may also create your own functions!
-  Tutorial for doing so is planned, but right now you need to seek it elsewhere.
-</p>
-
 <div id="content">
+
+  <p class="box-title-red">Note:</p>
+  <p class="box-red" style="margin-bottom: 25px;">
+    These functions are defined by Skript. You may also create your own functions!
+    Tutorial for doing so is planned, but right now you need to seek it elsewhere.
+  </p>
+
   ${generate functions desc_full.html}
 </div>

docs/index.html

@@ -1,31 +1,26 @@
 <h1 id="nav-title">Documentation</h1>
 
-<div id="content">
-<p>
-  Skript is (surprise, surprise) a scripting plugin for Bukkit platform. It
-  is easy to use for simple tasks, but yet you can create really complex things
-  with it. The syntax of Skript is close to English, but it is still not magic.
-  While for simple tasks you might succeed with experimentation, for anything
-  more complex you will need some guidance.
-</p>
+<div id="content" class="no-left-panel" style="margin-top: 40px;">
+  <p>
+	  <b>Skript</b> is (surprise, surprise) a scripting plugin for the Bukkit platform. It is easy to use for simple tasks, but you can also create really complex things with it. The syntax of Skript is close to English, but it is still not magic. While you might succeed with experimentation for simple tasks, for anything more complex you will need some guidance.
+  </p>
 
-<p>
-  This is the Skript documentation. You will find all supported features of Skript
-  plugin here. You might also find some useful examples, in case you need more
-  than what was shipped with Skript distribution. We do not currently have
-  tutorials here, but you can find good ones using whatever search engine you prefer.
-</p>
+  <p>
+    This is Skript's documentation. You will find all supported features of the plugin here, along with some useful examples. We don't have tutorials yet, but you can find good ones using whatever search engine you prefer.
+  </p>
 
-<p class="box">
-  Found something incorrect in this documentation? Please report
-  it to the <a href="https://github.com/SkriptLang/Skript/issues">issue tracker</a>.
-</p>
-<p class="box">
-  <strong>We are looking for docs authors!</strong>
-  Currently, the only documentation is generated automatically. It would be
-  nice to have some hand-written content such as tutorials on the docs as well. For example, currently we don't have
-  a tutorial on how to use loops here; This makes it harder for newcomers to learn.
-  Check <a href="https://github.com/SkriptLang/Skript/issues/611">this issue</a> for
-  more details and if you're interested in helping out.
-</p>
+  <p class="box">
+    Found something incorrect in this documentation? Please report it to the
+    <a href="https://github.com/SkriptLang/Skript/issues">issue tracker</a>.
+  </p>
+  <p class="box">
+    <strong>We are looking for docs authors!</strong>
+    Currently, the only documentation is generated automatically. It would be
+    nice to have some hand-written content such as tutorials on the docs as
+    well. For example, currently we don't have a tutorial on how to use loops
+    here; This makes it harder for newcomers to learn. Check
+    <a href="https://github.com/SkriptLang/Skript/issues/611">this issue</a> for
+    more details and if you're interested in helping out.
+  </p>
+  <p style="font-size: 14px;">Skript • <a href="https://github.com/bensku/Skript/">SkriptLang Team</a> • Styling by <a href="https://github.com/AyhamAl-Ali">Ayham Al-Ali</a> | 2021</p>
 </div>

docs/js/main.js

@@ -0,0 +1,37 @@
+// ID Scroll
+const links = document.querySelectorAll("div.item-warpper");
+const contents = document.querySelectorAll("#content")[0];
+
+lastActive = null;
+
+contents.addEventListener('scroll', (e) => {
+  links.forEach((ha) => {
+    const rect = ha.getBoundingClientRect();
+    if (rect.top > 0 && rect.top < 150) {
+      const location = window.location.toString().split("#")[0];
+      history.replaceState(null, null, location + "#" + ha.id);
+
+      if (lastActive != null) {
+        lastActive.classList.remove("active-item");
+      }
+
+      lastActive = document.querySelectorAll(`#nav-contents a[href="#${ha.id}"]`)[0];
+      if (lastActive != null) {
+        lastActive.classList.add("active-item");
+      }
+    }
+  });
+});
+
+
+// Active Tab
+const pageLink = window.location.toString().replaceAll(/(.*)\/(.+?).html(.*)/gi, '$2');
+document.querySelectorAll(`#global-navigation a[href="${pageLink}.html"]`)[0].classList.add("active-tab");
+
+
+// No Left Panel
+const noLeftPanel = document.querySelectorAll('#content.no-left-panel')[0];
+if (noLeftPanel != null) {
+  document.querySelectorAll('#side-nav')[0].classList.add('no-left-panel');
+}
+

docs/template.html

@@ -3,8 +3,20 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1.0">
+
+  <meta name="description" content="Skript is a Bukkit plugin which allows server admins to customize their server easily, but without the hassle of programming a plugin or asking/paying someone to program a plugin for them. - SkriptLang/Skript">
+
+  <link rel="icon" type="image/png" href="./assets/icon.png">
+
   <title>Skript Documentation - ${skript.version}</title>
   <link href="css/styles.css" rel="stylesheet">
+
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
+
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+
 </head>
 <body>
   ${include navbar.html}
@@ -13,6 +25,9 @@
       ${generate ${pagename} desc_nav.html}
     </div>
   </nav>
+
   ${content}
+
+  <script src="./js/main.js"></script>
 </body>
 </html>

docs/templates/desc_full.html

@@ -1,51 +1,47 @@
-<div class="item-title" id="${element.id}">
-  ${element.name}
-  <a href="#${element.id}">&#128279;</a>
-</div>
-<div class="item-content">
-  <table>
-
-    <tr class="item-details">
-      <td class="item-table-label">Patterns:</td>
-      <td class="noleftpad">
-        <ul>
-          ${generate element.patterns pattern_element.html}
-        </ul>
-      </td>
-    </tr>
-
-    <tr class="item-details">
-      <td class="item-table-label">Since:</td>
-      <td>${element.since}</td>
-    </tr>
-
-    ${if events}
-    <tr class="item-details">
-      <td class="item-table-label">Usable in events:</td>
-      <td>${element.events}</td>
-    </tr> 
-    ${end}
-
-    ${if required-plugins}
-    <tr class="item-details">
-      <td class="item-table-label">Requirements:</td>
-      <td>${element.required-plugins}</td>
-    </tr> 
-    ${end}
-
-  </table>
-
-  <div class="item-description">
-    ${element.desc}
+<div class="item-warpper" id="${element.id}">
+  <div class="item-title">
+    <h1 style="display: inline-block">${element.name}</h1> <a href="#${element.id}">&#128279;</a>
   </div>
+  <div class="item-content">
+    <table>
+      <tr class="item-details">
+        <td class="item-table-label">Patterns:</td>
+        <td class="noleftpad">
+          <ul>
+            ${generate element.patterns pattern_element.html}
+          </ul>
+        </td>
+      </tr>
+
+      <tr class="item-details">
+        <td class="item-table-label">Since:</td>
+        <td>${element.since}</td>
+      </tr>
+
+      ${if events}
+      <tr class="item-details">
+        <td class="item-table-label">Usable in events:</td>
+        <td>${element.events}</td>
+      </tr>
+
+      ${end} ${if required-plugins}
+      <tr class="item-details">
+        <td class="item-table-label">Requirements:</td>
+        <td>${element.required-plugins}</td>
+      </tr>
+      ${end}
+    </table>
+
+    <div class="item-description">
+      ${element.desc}
+    </div>
 
-  <div class="item-examples">
-
-    Examples:
+    <div class="item-examples">
+      <p>Examples:</p>
 
-    <div class="skript-code-block">
-      ${element.examples}
+      <div class="skript-code-block">
+        ${element.examples}
+      </div>
     </div>
-
   </div>
 </div>

docs/templates/navbar.html

@@ -1,10 +1,13 @@
-<nav id="global-navigation">
-  <a href="index.html">Home</a>
-  <a href="events.html">Events</a>
-  <a href="conditions.html">Conditions</a>
-  <a href="effects.html">Effects</a>
-  <a href="expressions.html">Expressions</a>
-  <a href="classes.html">Types</a>
-  <a href="text.html">Text</a>
-  <a href="functions.html">Functions</a>
-</nav>
+<ul id="global-navigation">
+  <li><a href="index.html">Home</a></li>
+  <li><a href="events.html">Events</a></li>
+  <li><a href="conditions.html">Conditions</a></li>
+  <li><a href="effects.html">Effects</a></li>
+  <li><a href="expressions.html">Expressions</a></li>
+  <li><a href="classes.html">Types</a></li>
+  <li><a href="text.html">Text</a></li>
+  <li><a href="functions.html">Functions</a></li>
+  <li><a href="tutorials.html">Tutorials</a></li>
+  <li><a href="https://github.com/SkriptLang/Skript/" target="_blank" style="font-weight: bold;">GitHub</a></li>
+  <li style="font-weight: bold; color: #ff9800; float: right;">v${skript.version}</li>
+</ul>