finish sidebar

Frotty · Frotty · commit e5e65ad7870a · 2024-01-28T23:47:41.000+01:00
diff --git a/_doc/start.md b/_doc/start.md
@@ -6,11 +6,115 @@ icon:
   type: fa
   name: fa-paper-plane
 color: green
-sections:
-  - /start/prerequisites
-  - /start/install_vscode
-  - /start/install_wurst
 ---
 
 WurstScript is a programming language and modding toolkit working in unison to create awesome Warcraft 3 maps.
 In this guide we will show you how to install WurstScript and set up your first project.
+
+## Prerequisites
+
+WurstScript and its related tools require Java 11+ to run. Editor support is provided via a VSCode extension.
+
+### Download JRE
+
+[_&nbsp;_{: .fa .fa-download} Download Java from Adoptium](https://adoptium.net/?variant=openjdk11){: .btn .btn-orange}
+
+Download the Java Runtime appropriate for your system and follow the installation procedure.
+
+Once finished, continue to the next step.
+
+### Verify Java Installation
+
+Many tasks rely on a environment variable called **JAVA_HOME** which might not have been set by the installer.
+To verify your installation, open a command prompt and enter `java -version`.
+
+A valid installation will return something like this:
+
+```powershell
+> java -version
+openjdk version "11.0.17" 2022-10-18
+OpenJDK Runtime Environment Temurin-11.0.17+8 (build 11.0.17+8)
+OpenJDK 64-Bit Server VM Temurin-11.0.17+8 (build 11.0.17+8, mixed mode)
+```
+
+The major version should be `11` or higher. If it is lower, you must update your Java installation.
+
+If you get an error or get a lower versions displayed, even though you installed a newer one, your **JAVA_HOME** is either missing or configured wrong.
+
+Refer to this [_&nbsp;_{: .fa .fa-external-link-square} Windows tutorial](https://confluence.atlassian.com/doc/setting-the-java_home-variable-in-windows-8895.html) in order to setup your **JAVA_HOME** correctly.
+
+Once you have setup Java correctly, continue by installing VSCode.
+
+## Install Wurstscript
+
+Now we will setup a Wurst compiler environment and create a project using the the WurstSetup, also known as `grill`.
+
+[_&nbsp;_{: .fa .fa-download} Download WurstSetup](https://grill.wurstlang.org/hudson/job/WurstSetup/lastSuccessfulBuild/artifact/downloads/WurstSetup.jar){: .btn .btn-green}
+
+The Wurstsetup can be used either from the commandline or as a graphical application.
+
+## Commandline
+
+Usage by invoking `grill` via the commandline is recommended and provides a similar user experience to tools such as `npm`, `maven`. etc. To use the setup from the commandline you need to complete the initial installation once.
+After that you can invoke `grill` from your commandline.
+
+### Initial installation
+
+For the first time you have to run the .jar file directly, because the executable hasn't been installed yet.
+
+`java -jar WurstSetup.jar install wurstscript`
+
+Now you need to add the `~/.wurst` folder to your PATH environment variable, so you can use it from the commandline.
+Refer to this [tutorial](https://www.java.com/en/download/help/path.xml). On Windows 10, the result should look like this:
+
+![](https://i.imgur.com/8bFJJVT.jpg){: .img-responsive}
+
+The `grill` command should now be recognized by your terminal of choice.
+
+![](https://i.imgur.com/FNSBYgD.jpg){: .img-responsive}
+
+If not, a restart might be required.
+
+### Updating the Compiler
+
+Use the special `wurstscript` keyword to install or update wurst on your system for the current user.
+
+`grill install wurstscript`
+
+### Create a Wurst Project
+
+Use `generate` to create new projects. The project will be generated in a folder inside your current location with the name provided.
+
+`grill generate my-wurst-project`
+
+### Open in VSCode
+
+After you finished installation and project setup, you can open the project's root folder in VSCode.
+
+`code my-wurst-project`
+
+{: .answer}
+
+_&nbsp;_{: .fa .fa-exclamation-circle} Make sure you are opening the project's root folder (contains wurst.build file) using `File -> Open Folder`
+
+Once the project is opened, you can click the `Hello.wurst` file on the left to activate the Wurst plugin. The code should compile and the setup should be done. Using VSCode's command console (`F1`) you can execute wurst commands such as running or building your map.
+
+If you are new to WurstScript but not new to programming, you probably want to continue with the [_&nbsp;_{: .fa .fa-external-link-square} Beginner's Guide](tutorials/wurstbeginner.html)
+
+### Installing and Updating a project
+
+Run the `install` command to update your project's dependencies, or to initially setup a fresly cloned project to work on your machine.
+
+`grill install`
+
+### Adding dependencies
+
+To add a new dependency, run the `install` command with a second parameter that points to a git repo.
+
+`grill install https://github.com/Frotty/wurst-astar-jps`
+
+## Graphical User Interface
+
+By running the `WurstSetup.jar` without any arguments or simply by double-clicking, you can alternatively use the deprecated, graphical user interface.
+
+![](/assets/images/setup/WurstSetup.png){: .img-responsive}
diff --git a/_doc/start/install_wurst.md b/_doc/start/install_wurst.md
@@ -6,74 +6,3 @@ sections:
   - Update and import Projects
 ---
 
-Now we will setup a Wurst compiler environment and create a project using the the WurstSetup, also known as `grill`.
-
-[_&nbsp;_{: .fa .fa-download} Download WurstSetup](https://grill.wurstlang.org/hudson/job/WurstSetup/lastSuccessfulBuild/artifact/downloads/WurstSetup.jar){: .btn .btn-green}
-
-The Wurstsetup can be used either from the commandline or as a graphical application.
-
-## Commandline
-
-Usage by invoking `grill` via the commandline is recommended and provides a similar user experience to tools such as `npm`, `maven`. etc. To use the setup from the commandline you need to complete the initial installation once.
-After that you can invoke `grill` from your commandline.
-
-### Initial installation
-
-For the first time you have to run the .jar file directly, because the executable hasn't been installed yet.
-
-`java -jar WurstSetup.jar install wurstscript`
-
-Now you need to add the `~/.wurst` folder to your PATH environment variable, so you can use it from the commandline.
-Refer to this [tutorial](https://www.java.com/en/download/help/path.xml). On Windows 10, the result should look like this:
-
-![](https://i.imgur.com/8bFJJVT.jpg){: .img-responsive}
-
-The `grill` command should now be recognized by your terminal of choice.
-
-![](https://i.imgur.com/FNSBYgD.jpg){: .img-responsive}
-
-If not, a restart might be required.
-
-### Updating the Compiler
-
-Use the special `wurstscript` keyword to install or update wurst on your system for the current user.
-
-`grill install wurstscript`
-
-### Create a Wurst Project
-
-Use `generate` to create new projects. The project will be generated in a folder inside your current location with the name provided.
-
-`grill generate my-wurst-project`
-
-### Open in VSCode
-
-After you finished installation and project setup, you can open the project's root folder in VSCode.
-
-`code my-wurst-project`
-
-{: .answer}
-
-_&nbsp;_{: .fa .fa-exclamation-circle} Make sure you are opening the project's root folder (contains wurst.build file) using `File -> Open Folder`
-
-Once the project is opened, you can click the `Hello.wurst` file on the left to activate the Wurst plugin. The code should compile and the setup should be done. Using VSCode's command console (`F1`) you can execute wurst commands such as running or building your map.
-
-If you are new to WurstScript but not new to programming, you probably want to continue with the [_&nbsp;_{: .fa .fa-external-link-square} Beginner's Guide](tutorials/wurstbeginner.html)
-
-### Installing and Updating a project
-
-Run the `install` command to update your project's dependencies, or to initially setup a fresly cloned project to work on your machine.
-
-`grill install`
-
-### Adding dependencies
-
-To add a new dependency, run the `install` command with a second parameter that points to a git repo.
-
-`grill install https://github.com/Frotty/wurst-astar-jps`
-
-## Graphical User Interface
-
-By running the `WurstSetup.jar` without any arguments or simply by double-clicking, you can alternatively use the deprecated, graphical user interface.
-
-![](/assets/images/setup/WurstSetup.png){: .img-responsive}
diff --git a/_doc/start/prerequisites.md b/_doc/start/prerequisites.md
@@ -5,34 +5,3 @@ sections:
   - VSCode
 ---
 
-WurstScript and its related tools require Java 11+ to run. Editor support is provided via a VSCode extension.
-
-### Download JRE
-
-[_&nbsp;_{: .fa .fa-download} Download Java from Adoptium](https://adoptium.net/?variant=openjdk11){: .btn .btn-orange}
-
-Download the Java Runtime appropriate for your system and follow the installation procedure.
-
-Once finished, continue to the next step.
-
-### Verify Java Installation
-
-Many tasks rely on a environment variable called **JAVA_HOME** which might not have been set by the installer.
-To verify your installation, open a command prompt and enter `java -version`.
-
-A valid installation will return something like this:
-
-```powershell
-> java -version
-openjdk version "11.0.17" 2022-10-18
-OpenJDK Runtime Environment Temurin-11.0.17+8 (build 11.0.17+8)
-OpenJDK 64-Bit Server VM Temurin-11.0.17+8 (build 11.0.17+8, mixed mode)
-```
-
-The major version should be `11` or higher. If it is lower, you must update your Java installation.
-
-If you get an error or get a lower versions displayed, even though you installed a newer one, your **JAVA_HOME** is either missing or configured wrong.
-
-Refer to this [_&nbsp;_{: .fa .fa-external-link-square} Windows tutorial](https://confluence.atlassian.com/doc/setting-the-java_home-variable-in-windows-8895.html) in order to setup your **JAVA_HOME** correctly.
-
-Once you have setup Java correctly, continue by installing VSCode.
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -4,7 +4,7 @@
         <div id="doc-menu" data-spy="affix">
           <div class="doc-menu-scroll">
             <ul class="nav doc-menu hidden-xs">
-              <li class="nav-heading"><a class="scrollto" href="#">{{ page.title }}</a></li>
+              <li class="nav-heading"><a class="scrollto" href="{{page.url}}">{{ page.title }}</a></li>
             </ul>
           </div>
         </div>
diff --git a/_layouts/doc.html b/_layouts/doc.html
@@ -38,7 +38,7 @@
     {% include meta_properties.html %} {% include google_analytics.html %} {% seo %}
 </head>
 
-<body class="body-{{ page.color }}">
+<body class="body-{{ page.color }} doc-body">
 
     <div class="page-wrapper">
 
@@ -88,6 +88,10 @@ <h1 class="doc-title">
                         <!-- CONTENT -->
                         <div class="doc-content">
                             <div class="content-inner">
+                                <span class="github-propose">
+                                    <svg viewBox="0 0 24 24" class="wt-icon wt-icon_size_m sub-title__editing-icon"><path d="m20.9 12.2a8.94 8.94 0 0 1 -6.4 8.6.39176.39176 0 0 1 -.4-.4v-3a1.58066 1.58066 0 0 0 -.5-1.2 3.7342 3.7342 0 0 0 3.9-3.4 4.24447 4.24447 0 0 0 -.9-3.5 2.8554 2.8554 0 0 0 -.2-2.4 7.23943 7.23943 0 0 0 -2.4.9 8.21667 8.21667 0 0 0 -4.4 0 4.61924 4.61924 0 0 0 -2.3-.9h-.1a2.74943 2.74943 0 0 0 -.2 2.4 4.07472 4.07472 0 0 0 -.9 3.5 3.81064 3.81064 0 0 0 3.9 3.4 1.08192 1.08192 0 0 0 -.4.6 2.63862 2.63862 0 0 0 -.1.7 1.94273 1.94273 0 0 1 -2.2-.5c-.5-.8-.9-1.2-1.4-1.3s-.6.2-.6.2a1.00419 1.00419 0 0 0 .5.6 1.69523 1.69523 0 0 1 .8 1 1.82656 1.82656 0 0 0 1.2 1.2 3.9156 3.9156 0 0 0 1.9 0v1.7a.29725.29725 0 0 1 -.4.3 8.82071 8.82071 0 0 1 -6.3-8.5 8.95014 8.95014 0 0 1 17.9 0z"></path></svg>
+                                    <a href="https://github.com/wurstscript/wurstscript.github.io/edit/master/_doc{{ page.url | replace: ".html", ".md" }}" target="_blank">Edit page</a>
+                                </span>
 
                                 {{ content | markdownify }} {% for id in page.sections %} {% assign section = site.doc | where: "id", id | first %}
 
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -42,9 +42,28 @@ color: var(--text-color-dark);
 font-size: 16px;
 }
 
-html, body {
-    height: 100%;
-    overflow: hidden;
+
+.content-inner {
+    padding-bottom: 200px;
+}
+
+.github-propose {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    padding: 6px;
+    border: 1px solid #d7d7d7;
+    border-radius: 4px;
+    width: 120px;
+    margin-bottom: 12px;
+
+    svg {
+        width: 24px;
+        height: 24px;
+        background-color: white;
+        border-radius: 100%;
+    }
 }
 
 .nav-heading {
diff --git a/_sass/doc.scss b/_sass/doc.scss
@@ -1,3 +1,9 @@
+
+.doc-body {
+  height: 100%;
+  overflow: hidden;
+}
+
 /* ======= Doc Styling ======= */
 .doc-wrapper {
   display: flex;
@@ -738,6 +744,14 @@ code {
 
 /* Extra small devices (phones, less than 768px) */
 @media (max-width: 767px) {
+  .doc-sidebar {
+    display: none;
+  }
+
+  .doc-container {
+    width: 100%;
+    padding: 10px;
+  }
   .doc-content {
     margin-left: 0;
   }
diff --git a/_sass/landing.scss b/_sass/landing.scss
@@ -136,7 +136,7 @@
       background-image: url("../images/empty.png"); /* for IE8 */
     }
 
-    transition: 0.4s ease;
+    transition: 0.2s ease;
 
     &:hover {
       transform: translateY(-1px);
diff --git a/_sass/theme-default.scss b/_sass/theme-default.scss
@@ -52,6 +52,22 @@
 }
 
 @media (prefers-color-scheme: dark) {
+  /* For the scrollbar track (background) */
+  ::-webkit-scrollbar {
+      background-color: #2e2e2e; /* Dark grey background */
+  }
+
+  /* For the scrollbar handle */
+  ::-webkit-scrollbar-thumb {
+      background-color: #555; /* Darker grey scrollbar handle */
+      border-radius: 6px; /* Rounded corners on the scrollbar handle */
+      border: 3px solid #2e2e2e; /* Creates a small border with the same color as the track */
+  }
+
+  /* For the scrollbar handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+      background-color: #888; /* Lighter grey on hover */
+  }
   /*
    * Dark Colors
    * -------------------------------------------
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -99,7 +99,7 @@ $(document).ready(function () {
 
       navContainer.appendChild(navItem);
       h2List = undefined;
-      offsetMap[index] = { nav: navItem, offset: heading.getBoundingClientRect().top };
+      offsetMap[index] = { nav: navItem, offset: heading.getBoundingClientRect().top + scrollContainer.scrollTop };
     } else if (heading.tagName == "H3") {
       if (!h2List) {
         h2List = document.createElement("ul");
@@ -109,7 +109,7 @@ $(document).ready(function () {
       const navItem = document.createElement("li");
       navItem.innerHTML = `<a class="scrollto" href="#${heading.textContent}">${heading.textContent}</a>`;
       h2List.appendChild(navItem);
-      offsetMap[index] = { nav: navItem, offset: heading.getBoundingClientRect().top };
+      offsetMap[index] = { nav: navItem, offset: heading.getBoundingClientRect().top + scrollContainer.scrollTop };
     }
   });
 
@@ -129,14 +129,26 @@ $(document).ready(function () {
     });
   });
 
+  var selected;
+
 
   scrollContainer.addEventListener("scroll", function () {
-    var selected = offsetMap[0].nav;
-    for (const section of offsetMap) {
-      if (section.offset < scrollContainer.scrollTop) {
-        selected = section.nav;
+    selected?.classList.remove("active");
+    selected = offsetMap[0].nav;
+    console.log("top: " + scrollContainer.scrollTop);
+    for (var i = 1; i < offsetMap.length; i++) {
+      const section = offsetMap[i];
+      if (section.offset < scrollContainer.scrollTop + 220) {
+        const section2 = offsetMap[i + 1];
+        if (!section2) {
+          selected = section.nav;
+          break;
+        }
+        if (!(section2.offset < scrollContainer.scrollTop + 220)) {
+          selected = section.nav;
+          break;
+        }
       }
-      section.nav.classList.remove("active");
     }
 
     if (selected) {

Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,7 @@`
`136`	`136`	`background-image: url("../images/empty.png"); /* for IE8 */`
`137`	`137`	`}`
`138`	`138`
`139`		`- transition: 0.4s ease;`
	`139`	`+ transition: 0.2s ease;`
`140`	`140`
`141`	`141`	`&:hover {`
`142`	`142`	`transform: translateY(-1px);`