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,35 @@
 <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>
+    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>
 
-<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 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 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>
 
-<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>
 </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>