Add Getting started tutorial and link it between pages

README.md

@@ -21,7 +21,8 @@ You can find more about the docs templates in [docs/templates](docs/templates/RE
 Currently, the docs files is generated using Skript plugin.
 
 1. You will need to create a directory named `docs/templates` in `plugins/Skript/`, and copy everything from [docs/templates folder](docs/templates) into that directory.
-2. Execute the command `/sk gen-docs`.
-3. The `docs/` directory will be created _(if not created already)_ in `plugins/Skript` containing the website's files.
-4. Open `index.html` and browse the documentation.
-5. _(Optionally)_ Add this system property `-Dskript.forceregisterhooks` in your server startup script (before the -jar property) to force generating hooks docs.
+2. Launch the server (the [Paper](https://papermc.io/), which is a fork of Spigot, is recommended).
+3. Execute the command `skript gen-docs` (formerly `/sk gen-docs`)
+4. The `docs/` directory will be created _(if not created already)_ in `plugins/Skript` containing the website's files.
+5. Open `index.html` and browse the documentation.
+6. _(Optionally)_ Add this system property `-Dskript.forceregisterhooks` in your server startup script (before the -jar property) to force generating hooks docs.

docs/templates/getting-started.html

@@ -0,0 +1,88 @@
+<h1 id="nav-title">Get started</h1>
+
+<div id="content-no-docs" class="no-left-panel">
+  <div style="padding-top: 32px;"></div> <!-- Space -->
+  <p>
+    To run a custom <code>.sk</code> script from <code>plugins/Skript/scripts</code> you should add Skript plugin to the <a
+    href="https://papermc.io/">Paper</a> server.
+  </p>
+  <h2 class="title">Requirements</h2>
+  <p class="subtitle">
+    Skript requires Spigot to work. You heard it right, CraftBukkit does not work. <a
+      href="https://papermc.io/">Paper</a>, which is a fork of Spigot, is recommended; it is required for some parts of
+    Skript to be available.
+  </p>
+  <p class="subtitle">
+    Skript supports only the latest patch versions of Minecraft. For example, this means that if 1.16.5 is supported,
+    then 1.16.4 is not. Testing with all old patch versions is not feasible for us.
+  </p>
+  <p class="subtitle">
+    Minecraft 1.12 and earlier are not, and will not be supported. New Minecraft versions will be supported as soon as
+    possible.
+  </p>
+  <h2 class="title">Downloading Skript</h2>
+  <p class="subtitle">
+    You can find the downloads for each version with their release notes in the <a
+      href="https://github.com/SkriptLang/Skript/releases">releases page</a> (scroll down to the Assets section and
+    download the <code>.jar</code> file).
+  </p>
+  <p class="subtitle">
+    Two major feature updates are expected each year in January and July, with monthly patches occurring in between. For
+    full details, please review our <a
+      href="https://github.com/SkriptLang/Skript/blob/master/CLOCKWORK_RELEASE_MODEL.md">release model</a>.
+  </p>
+  <h2 class="title">Adding plugin</h2>
+  <p class="subtitle">
+    Follow these simple steps to add Skript plugin to the Paper server:
+  </p>
+  <!-- Sorry, for the !important inline styling, but the subtitle class already overrides the padding and I am not going to do the css clean-up now. -->
+  <ol class="subtitle" style="padding-left: 52px !important;">
+    <li>
+      Ensure the file you have downloaded ends in <code>.jar</code>. Some plugins also distribute as <code>.zip</code>
+      files, in which case you will need to extract the file and locate the <code>.jar</code> for your platform.
+    </li>
+    <li>
+      Once you have the plugin downloaded locally, locate the <code>plugins</code> folder from the root directory of
+      your Paper server.
+    </li>
+    <li>
+      Drag and drop the plugin file (<code>.jar</code>) into the <code>plugins</code> folder.
+    </li>
+    <li>
+      Restart your server. The plugin should load.
+    </li>
+  </ol>
+
+  <p class="subtitle">
+    For more information see <a href="https://docs.papermc.io/paper/adding-plugins">the Paper tutorial</a>.
+  </p>
+
+  <h2 class="title">Adding the frist script</h2>
+  <p class="subtitle">
+    Once you have restarted server, you should see the folder <code>scripts</code> inside of <code>plugins/Skript</code>
+    folder.
+  </p>
+  <p class="subtitle">
+    Just create <code>a-new-file.sk</code> file with a following content:
+  </p>
+  <pre class="box skript-code-block left-margin">
+      on click: 
+      &nbsp;&nbsp;message "Hello player!" to player</pre>
+  <p class="subtitle">
+    For more examples see the <code>examples</code> folder.
+  </p>
+
+  <div id="info" class="grid-container padding">
+    <div class="grid-item">
+      <p class="box-title">Previous step</p>
+      <p class="box placeholder"><a class="link" href="index.html">Introduction</a></p>
+    </div>
+    <div class="grid-item">
+    </div>
+    <div class="grid-item">
+      <p class="box-title">Next step</p>
+      <p class="box placeholder"><a class="link" href="text.html">Text and formatting</a></p>
+    </div>
+  </div>
+  <div style="padding-top: 32px;"></div> <!-- Space -->
+</div>

docs/templates/index.html

@@ -59,6 +59,16 @@ <h1 id="nav-title">Documentation</h1>
     if you're interested in helping out. </p>
 
 
+<div id="info" class="grid-container padding">
+    <div class="grid-item">
+    </div>
+    <div class="grid-item">
+    </div>
+    <div class="grid-item">
+        <p class="box-title">Next step</p>
+        <p class="box placeholder"><a class="link" href="getting-started.html">Getting started</a></p>
+    </div>
+</div>
 <div style="padding-top: 64px;"></div> <!-- Space -->
 <p style="font-size: 14px; text-align: center;" class="placeholder"><a href="https://github.com/SkriptLang/skript-docs">Documentation Repo</a> •
     Site developed by <a href="https://github.com/AyhamAl-Ali">Ayham Al-Ali</a> • Site Version <b>${site-version}</b> • Generated on <b>${skript.build.date}</b></p>

docs/templates/templates/navbar.html

@@ -20,6 +20,7 @@
   <div class="menu-tab">
     <li><a class="menu-tab-item" href="tutorials.html">Tutorials <i class="fas fa-caret-down"></i></a></li>
     <div class="menu-subtabs">
+      <a href="getting-started.html">Getting started</a>
       <a href="text.html">Text</a>
     </div>
   </div>

docs/templates/text.html

@@ -332,6 +332,18 @@ <h2 class="title">Text and Variables</h2>
   </p>
   <p style="padding-bottom: 20px">
     Guide written by <a href="https://github.com/bensku">bensku</a>.
-    </p>
+  </p>
+  <div id="info" class="grid-container padding">
+    <div class="grid-item">
+      <p class="box-title">Previous step</p>
+      <p class="box placeholder"><a class="link" href="getting-started.html">Getting started</a></p>
+    </div>
+    <div class="grid-item">
+    </div>
+    <div class="grid-item">
+      <p class="box-title">Next step</p>
+      <p class="box placeholder"><a class="link" href="events.html">Explore Events docs</a></p>
+    </div>
+  </div>
   <div style="padding-top: 32px;"></div> <!-- Space -->
 </div>

docs/templates/tutorials.html

@@ -1,5 +1,14 @@
 <h1 id="nav-title">Tutorials</h1>
 <div id="content-no-docs" class="no-left-panel" style="margin-top: 40px">
+<div id="info" class="grid-container padding">
+  <div class="grid-item">
+  </div>
+  <div class="grid-item">
+  </div>
+  <div class="grid-item">
+      <p class="box placeholder"><a class="link" href="getting-started.html">Getting started</a></p>
+  </div>
+</div>
   <p class="box-title-red">Note:</p>
   <div class="box-red" style="height: max-content">
     <strong>Skript Tutorials are coming soon.</strong>