add hints to tutorials

Author: Efnilite

Diff for: src/assets/tutorials/commands.md

@@ -148,9 +148,10 @@ command /test:
        
 ```
 
-{% hint style="danger" %}
+<div class="hint alert">
+<h3>Alert</h3>
 If two commands have the same name but different prefixes, only one will be registered.
-{% endhint %}
+</div>
 
 ### Aliases
 
@@ -165,7 +166,8 @@ command /teleport <number> <number> <number>:
         teleport player to location(arg-1, arg-2, arg-3)
 ```
 
-{% hint style="danger" %}
+<div class="hint alert">
+<h3>Alert</h3>
 Aliases will not overwrite commands registered by other plugins. Say another plugin registers `/spawn`, and you have the following command:
 
 ```applescript
@@ -176,7 +178,7 @@ command /tp-to-spawn:
 ```
 
 If you run `/spawn`, that other plugin's command will run. You'll need to register a new command with that name and have it run your first command.
-{% endhint %}
+</div>
 
 ### Executable by
 
@@ -223,9 +225,10 @@ There are also a number of expressions you can use to interact with the cooldown
 
 If you've enabled `keep command last usage dates` in your `config.sk` file, you can get the last time the player used the command with `last usage date`.
 
-{% hint style="info" %}
+<div class="hint info">
+<h3>Info</h3>
 You can see the full syntax for these expressions [here](https://docs.skriptlang.org/expressions.html#ExprCmdCooldownInfo).
-{% endhint %}
+</div>
 
 ```applescript
 # The same vote command but with an improved cooldown message.

Diff for: src/assets/tutorials/conditionals.md

@@ -35,9 +35,12 @@ Generic conditions are used when a dedicated condition does not exist or you hav
 if player's balance < 20
 ```
 
-{% hint style="info" %}
-You can see all of the various generic condition syntaxes [here, under the Comparison condition](https://docs.skriptlang.org/conditions.html#CondCompare).
-{% endhint %}
+<div class="hint info">
+<h3>Info</h3>
+<span>
+You can see all of the various generic condition syntaxes by clicking <a href="https://docs.skriptlang.org/docs#CondCompare">here, to view the comparison condition</a>.
+</span>
+</div>
 
 ## If Statements
 
@@ -159,9 +162,10 @@ send "hello" if distance between player and {spawn} <= 10
 
 Notice how there is no indentation differences, colons, and how the effect comes first and then the condition.
 
-{% hint style="warning" %}
+<div class="hint info">
+<h3>Info</h3>
 Keep note that there is no `else if` or `else` options with this method.
-{% endhint %}
+</div>
 
 ## If Any and If All
 
@@ -181,9 +185,10 @@ else:
     send "You didn't meet all the conditions! to player
 ```
 
-{% hint style="info" %}
+<div class="hint info">
+<h3>Info</h3>
 Notice the `else` statement! These multi-conditions can include `else if` and `else` statements inside of them!
-{% endhint %}
+</div>
 
 This works well because we can check multiple conditions without losing code quality. But what if we only need a single condition to be met out of many? For example, what if we want **both** admins and builders to have build permission? In that case, we can use `if any` like this:
 

Diff for: src/assets/tutorials/functions.md

@@ -29,7 +29,8 @@ Now, whenever someone joins, Skript sees `test()` and runs our function, broadca
 
 Function can be called from anywhere, and at (nearly) any time. You can use them across files! The only restriction is using them in `on load` events. Be careful there. You can also restrict a function to work only in 1 file by using `local`, which we'll get to later.
 
-{% hint style="info" %}
+<div class="hint info">
+<h3>Info</h3>
 This might seem a little, well, useless. Why come up with this whole function thing when you can just write the code when you want it? Why couldn't we just write the following?
 
 ```applescript
@@ -40,7 +41,7 @@ on join:
 And you'd be right. These two scripts behave exactly the same. In general, you can always just take the code from a function, plop it right into the place you're calling it from with some minor changes, and have it work the same.&#x20;
 
 The main benefits come from when you're using the same code in multiple different locations. Functions allow you to only write that code once.
-{% endhint %}
+</div>
 
 ## Function Definitions
 
@@ -91,11 +92,12 @@ function giveTenApples2(player: player, number-list: numbers):
     # imagine code here
 ```
 
-{% hint style="warning" %}
-Note that I used `()` around the number list. This is so that Skript doesn't get confused and think that `10, 20, 30` are all different parameters.&#x20;
+<div class="hint warning">
+<h3>Warning</h3>
+Note that I used `()` around the number list. This is so that Skript doesn't get confused and think that `10, 20, 30` are all different parameters.
 
 If you're ever experiencing errors or weird bugs with your parameters, try making sure they're surrounded with `()`, it can solve a lot of issues.
-{% endhint %}
+</div>
 
 But we skipped over something earlier. We can give parameters **default values**, too.
 
@@ -139,9 +141,10 @@ Secondly, notice how the function definition has changed. We now have this `retu
 
 Finally, notice the new syntax at the end of the function: `return {_item}`. This is how we tell the function what value it should return. In this case, it's `{_item}`. Return will also stop execution of the function there, like `stop` does.&#x20;
 
-{% hint style="warning" %}
+<div class="hint warning">
+<h3>Warning</h3>
 Note that you cannot use `wait` in a function that returns a value. It has to return it instantly, without delay.
-{% endhint %}
+</div>
 
 ### Local Functions
 
@@ -153,7 +156,8 @@ This is where **local** functions come into play. By putting `local` in front of
 [local] function functionName(...)...
 ```
 
-{% hint style="warning" %}
+<div class="hint warning">
+<h3>Warning</h3>
 If there's a global function of the same name, your local function will **always** be prioritized over the global version. If that's a bit confusing, here's an example:
 
 ```applescript
@@ -179,7 +183,7 @@ on quit:
 When a player joins, the `join` event in `script-1.sk` runs. This calls the **local** function `test()`, which broadcasts `"local!"`.&#x20;
 
 When a player quits, the `quit` event in `script-2.sk` runs. This can't see the local version of `test()`, so it calls the **global** `test()`, which broadcasts `"global!"`.
-{% endhint %}
+</div>
 
 ## Full Definition
 
@@ -282,6 +286,7 @@ To wrap up, functions are very useful tools to have in your belt. They're powerf
 
 I hope now you've got a grasp on how functions work, at least enough to go and experiment on your own. All the tutorials in the world can't teach you what good old trial and error can.
 
-{% hint style="danger" %}
-If you didn't like anything about this tutorial, or found it hard to understand, message me on Discord at Sovde#0001, or tag me in the SkUnity discord.
-{% endhint %}
+<div class="hint alert">
+<h3>Alert</h3>
+If you didn't like anything about this tutorial, or found it hard to understand, message me on Discord at @sovdeeth, or tag me in the SkUnity discord.
+</div>

Diff for: src/assets/tutorials/getting-started.md

@@ -5,4 +5,9 @@ date: 2/2/2024
 url: https://github.com/SkriptLang/docs/blob/master/src/assets/tutorials/getting-started.md
 ---
 
-# Getting Started
+# Getting Started
+
+We're happy to see you're interested in learning Skript. 
+On the left, you'll find the list of all official tutorials currently available.
+
+Have fun!

Diff for: src/assets/tutorials/loops.md

@@ -40,16 +40,17 @@ loop all players:
     send "hey!" to loop-value
 ```
 
-{% hint style="info" %}
+<div class="hint info">
+<h3>Info</h3>
 If you're looping a specific expression, like `all players`, you can use `loop-type` as another version:
 
 ```
 loop all players:
     send "hey!" to loop-player
 ```
-{% endhint %}
+</div>
 
-#### Looping Over Lists
+**Looping Over Lists**
 
 Loops go hand in hand with lists, as every loop needs a list of something to loop over. The `%number% times` expression actually creates a list of numbers, so `set {_x::*} to 3 times` is equivalent to `set {_x::*} to 1, 2, and 3`. Use this knowledge wisely.&#x20;
 
@@ -74,7 +75,8 @@ Really, just one special feature, which is `loop-index`. This lets you access th
 
 While loops are the for loop's more temperamental cousin. They keep looping as long as a condition is true, which makes them great for repeating things over time, doing a specific action a dynamic number of times, or crashing your server.
 
-{% hint style="danger" %}
+<div class="hint alert">
+<h3>Alert</h3>
 Since while loops will not stop until the condition fails, they can run infinitely, potentially crashing your server. Make sure your while loop **will always exit** **or add a wait to it.** Adding a wait stops the while loop until the delay is done, allowing your server to actually run.
 
 ```applescript
@@ -91,11 +93,12 @@ while true is true:
     send "hi"
     wait 1 tick
 ```
-{% endhint %}
+</div>
 
 While loops are most often used to do periodic work while a condition is true, say, to do something every 5 ticks while a player is online. However, you do need to be careful that you can stop a while loop at will, since **reloading a script will not stop a running while loop**.
 
-{% hint style="warning" %}
+<div class="hint warning">
+<h3>Warning</h3>
 While loops will not stop when you reload the script that they are in. They will doggedly run until their condition is no longer true. This is a good reason to either use a periodical event (when appropriate) or to add a special case to abort a loop.
 
 ```applescript
@@ -112,7 +115,7 @@ command abort-loop:
     trigger:
         set {abort-while-loop} to true
 ```
-{% endhint %}
+</div>
 
 ### Do While
 
@@ -174,7 +177,7 @@ loop integers between 1 and arg 1:
     broadcast loop-number * loop-number
 ```
 
-`exit loop` is for, well, exiting loops. This is useful for preventing runaway while loops, as we've seen earlier, or just exiting once you find what you need.
+`exit loop` is for exiting loops. This is useful for preventing runaway while loops, as we've seen earlier, or just exiting once you find what you need.
 
 ```applescript
 # searching for {_needle} in {_haystack::*}:
@@ -187,9 +190,10 @@ broadcast "Found needle at %{_index}%!"
 
 ## When to Use Loops
 
-{% hint style="info" %}
+<div class="hint info">
+<h3>Info</h3>
 This is a more of the in-the-weeds performance comparison, so if you're just here to learn about loops, you can skip this.
-{% endhint %}
+</div>
 
 Often, people will compare the performance of these two patterns:
 
@@ -206,50 +210,42 @@ on join:
 
 Before you keep reading, try to think about what the actual difference here is!
 
-I'll wait.
-
-Don't worry, I'll still be here.
-
-Alright.
-
-So, behind the scenes, there's a thing called a Scheduler. This is in charge of scheduling when things run on your server. When we make an `every x` periodical event, Skript tells the scheduler to run this thing every x time. This is pretty simple and straightforward, which means it's very easy for Skript to come back later and tell the scheduler to stop running it. The scheduler just gives Skript a number to call if it wants the task ended.
+Behind the scenes, there's a thing called a Scheduler. This is in charge of scheduling when things run on your server. When we make an `every x` periodical event, Skript tells the scheduler to run this thing every x time. This is pretty simple and straightforward, which means it's very easy for Skript to come back later and tell the scheduler to stop running it. The scheduler just gives Skript a number to call if it wants the task ended.
 
 The downside here is that it runs the `do something` for every player, all at once. If you have a lot of players, or a lot of work to do per player, this can sometimes result in small lag spikes every time the code runs.
 
 While loops, meanwhile, are a bit more complicated. Skript has to run the code within the loop to determine what the next behavior is, so when it hits the `wait 10 ticks`, it tells the scheduler "hey, can you restart this code in 10 ticks?" and the scheduler does just that. The downside, though, is that Skript doesn't really have control over the code anymore. Since every single iteration of the loop creates a new scheduled task, Skript doesn't know what number to call to stop the loop. This means that the while loop itself is the only thing that can stop it, which it does by failing the condition and not running the code inside itself, therefore not running the `wait`. **All this to say, `/sk reload` will not stop while loops.**
 
 However, it also comes with some benefits. Since players don't usually all join at the exact same time, the while loops running for each individual player are going to trigger at slightly different times. This helps solve our problem with `every x`, where we were getting lag spikes.
 
-<figure><img src="../../.gitbook/assets/image (2).png" alt=""><figcaption></figcaption></figure>
-
-{% hint style="info" %}
+<div class="hint info">
+<h3>Info</h3>
 Note that we didn't change the amount of work that we were doing, we just spread that work out over multiple ticks.
-{% endhint %}
+</div>
 
 This means the `on join, while online` pattern is good for spreading work out, but comes with the downsides of a) not stopping with a reload, and b) potentially starting multiple loops for one player if you're not careful.&#x20;
 
 It also means that for short waits, like 1 to 5 ticks, the benefits of spreading work out will be very small, and a periodical event will be your better bet. While loops also can't address sustained lag, only lag spikes.
 
-{% hint style="info" %}
-TL/DR:
-
-**every x, loop all players:**
+<div class="hint info">
+<h3>Summary</h3>
 
-* simple to set up
-* safe
-* reload-friendly
-* can cause lag spikes if the work done is too much to do in one tick
+**Every x, loop all players:**
 
-**on join, while online:**
+* Simple to set up,
+* Safe,
+* Reload-friendly,
+* Can cause lag spikes if the work done is too much to do in one tick.
 
-* can spread work over multiple ticks if the delay is long enough ( >5 ticks)
-* not reload-friendly
-* needs extra work to make safe (prevent multiple loops from running at once for one player)
+**On join, while online:**
 
-**conclusion:**
+* Can spread work over multiple ticks if the delay is long enough ( >5 ticks),
+* Not reload-friendly,
+* Needs extra work to make safe (prevent multiple loops from running at once for one player).
 
-prefer using `every x, loop all players` when you are working with fast timings or smaller amounts of work.&#x20;
+**Conclusion:**
 
-prefer `on join, while online` when you are working with slower timings or larger amounts of work (updating scoreboards is a good example, you only need to do this at most once a second.)
-{% endhint %}
+* Prefer using `every x, loop all players` when you are working with fast timings or smaller amounts of work.
+* Prefer `on join, while online` when you are working with slower timings or larger amounts of work (updating scoreboards is a good example, you only need to do this at most once a second.)
+</div>
 

Diff for: src/style.css

@@ -148,4 +148,20 @@ ul {
 
 .-r-90 {
     @apply transform -rotate-90;
+}
+
+.hint {
+    @apply flex flex-col gap-4 p-4 rounded-md;
+}
+
+.info {
+    @apply bg-[#38b6e2] dark:bg-[#10799e];
+}
+
+.warning {
+    @apply bg-[#e4b03f] dark:bg-[#b98004];
+}
+
+.alert {
+    @apply bg-[#f96b6b] dark:bg-[#9e1010];
 }