Add UX improvements

astro.config.mjs

@@ -2,7 +2,10 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import mermaid from 'astro-mermaid';
-import starlightThemeRapide from 'starlight-theme-rapide'
+import starlightThemeRapide from 'starlight-theme-rapide';
+import starlightImageZoom from 'starlight-image-zoom';
+import starlightScrollToTop from 'starlight-scroll-to-top';
+
 
 // https://astro.build/config
 export default defineConfig({
@@ -50,7 +53,8 @@ export default defineConfig({
 					autogenerate: { directory: 'deprecated' },					
 				},
 			],
-			plugins: [starlightThemeRapide()],
+			description: 'Documentation for the Sunrise osu! server project, including setup guides and configuration options.',
+			plugins: [starlightThemeRapide(), starlightImageZoom(), starlightScrollToTop()],
 			customCss: [
 				'./src/styles/custom.css'
 			],

package.json

@@ -16,6 +16,8 @@
     "astro-mermaid": "^1.3.1",
     "mermaid": "^11.12.2",
     "sharp": "^0.34.2",
+    "starlight-image-zoom": "^0.13.2",
+    "starlight-scroll-to-top": "^0.4.0",
     "starlight-theme-rapide": "^0.5.2"
   }
 }

src/content/docs/deprecated/enchanced-configuration.mdx

@@ -8,6 +8,9 @@ sidebar:
       variant: caution
 ---
 
+import { Steps } from '@astrojs/starlight/components';
+import { Aside } from '@astrojs/starlight/components';
+
 This section will cover enhanced configuration of the server, which were previously not possible with the admin panel.
 
 ## Update your own privileges (Using direct database change)
@@ -16,6 +19,7 @@ Before we can access the admin panel, we need to update our own privileges. This
 
 For the sake of simplicity, we will use the [DBeaver](https://dbeaver.io/) database management tool, but you can use any other tool that supports MySQL databases.
 
+<Steps>
 1. Open DBeaver.
 2. Connect to your database following the instructions below
    :::note
@@ -29,22 +33,23 @@ For the sake of simplicity, we will use the [DBeaver](https://dbeaver.io/) datab
 
 3. Open the `Database/sunrise/user` table.
 4. Find your user in the list, and double-click on it's `Privilege` value.
-5. Update it using the following table:
+5. Update it to the new value depending on the privileges you want to have. For example, to have admin privileges, set it to `8`.
+   <Aside title="Privilege Levels and how to calculate them">
+   To calculate the privilege level, you should sum the values of the privileges you want to grant.
 
-:::note Privilege Levels and how to calculate them
-To calculate the privilege level, you should sum the values of the privileges you want to grant.
+   Current privileges are:
 
-Current privileges are:
+   - `0` - User
+   - `1` - Supporter
+   - `2` - Bat (Beatmap Approval Team)
+   - `8` - Administrator
+   - `16` - Developer
+   - `512` - Super User (Can use server maintenance commands)
 
-- `0` - User
-- `1` - Supporter
-- `2` - Bat (Beatmap Approval Team)
-- `8` - Administrator
-- `16` - Developer
-- `512` - Super User (Can use server maintenance commands)
+   For example, if you want to grant Bat and Administrator privileges, you would sum `2` (Bat) and `8` (Administrator), resulting in `10`.
 
-For example, if you want to grant Bat and Administrator privileges, you would sum `2` (Bat) and `8` (Administrator), resulting in `10`.
-:::
+   </Aside>
 
 6. Click on the `Apply cell changes` button (or press `Ctrl + S`).
-7. Changes will be applied during a minute or so, and you will be able to access the admin panel.
+7. Changes will be applied during a minute or so, and you will be able to access the admin panel.
+</Steps>

src/content/docs/getting-started/configuration.mdx

@@ -4,6 +4,8 @@ sidebar:
    order: 3
 ---
 
+import { Steps } from '@astrojs/starlight/components';
+
 This section will cover basic configuration of the server.
 
 ## General Configuration
@@ -28,13 +30,15 @@ Open the `Sunset/app/i18n.config.json` file and update the following values:
 
 ##### Change server's logo
 
+<Steps>
 1. Use any favicon generator, use [any search engine](https://www.google.com/search?q=create+favicon+for+website) to find one.
-- For simplicity, we will use [realfavicongenerator.net]( https://realfavicongenerator.net/) in this guide.
+    - For simplicity, we will use [realfavicongenerator.net]( https://realfavicongenerator.net/) in this guide.
 2. Upload your logo image (PNG, JPG, SVG, etc.) and click the "Generate" button.
 3. Click `Next` at the bottom of the page.
 4. Select `Next.js` and download app and public files.
-![Favicon Generator](../../../assets/img/favicon-gen.png)
+  ![Favicon Generator](../../../assets/img/favicon-gen.png)
 5. Replace files in the `Sunset/app` and `Sunset/public` directories with the downloaded files following the website instructions.
+</Steps>
 
 ##### Change server's assets
 
@@ -44,12 +48,14 @@ For example, to change the front page mascot image, you can replace `Sunset/publ
 
 ##### Change the website's colors
 
+<Steps>
 1. Use any Tailwind v3 ShadCN UI theme generator, use [any search engine](https://www.google.com/search?q=tailwind+css+v3+shadcn+cn+ui+theme+generator) to find one.
-- For simplicity, we will use [tweakcn.com](https://tweakcn.com/) in this guide.
+    - For simplicity, we will use [tweakcn.com](https://tweakcn.com/) in this guide.
 2. Select or manually customize the theme you want.
 3. Click on the `Code` tab and select `Tailwind v3` and `hsl` options.
 4. Press the `Copy` button to copy the code.
 5. Open the `Sunset/app/style.css` file and replace the content with the copied code.
+</Steps>
 
 #### Sunrise (osu! server) changes
 
@@ -335,11 +341,18 @@ BANCHO_CLIENT_SECRET=your_client_secret
 
 You can get the credentials by registering your application on the [osu! API](https://osu.ppy.sh/home/account/edit).
 
-![1](../../../assets/img/bancho-1.png)
+<Steps>
+1. Go to the [osu! API](https://osu.ppy.sh/home/account/edit) page and find the `OAuth` section.
+  ![1](../../../assets/img/bancho-1.png)
+
+2. Click on the `New OAuth Application` button or press `Edit` if you already have an application created.
+  ![2](../../../assets/img/bancho-2.png)
+    -  If you are creating a new application, fill the `Application Name` and `Application Callback URLs` fields with any value, as they are not used by the server.
 
-![2](../../../assets/img/bancho-2.png)
+3. Copy the `Client ID` and `Client Secret` values.
+  ![3](../../../assets/img/bancho-3.png)
+</Steps>
 
-![3](../../../assets/img/bancho-3.png)
 
 After that, don't forget to restart the stack.
 

src/content/docs/getting-started/faq.mdx

@@ -4,6 +4,8 @@ sidebar:
    order: 4
 ---
 
+import { Steps } from '@astrojs/starlight/components';
+
 This section will cover some of the most common questions about Sunrise, its features, and some troubleshooting tips.
 
 ## How do I set up the server?
@@ -148,19 +150,21 @@ This will update all components to the latest version.
 
 To update the server, you can follow these steps for all components you wish to update:
 
+<Steps>
 1. Stop the server if it's running.
 2. Pull the latest changes from the GitHub repository.
 
-```bash
-git fetch
-git pull
-```
+   ```bash
+   git fetch
+   git pull
+   ```
 
 3. Rebuild the component using the docker compose command:
 
-```bash
-docker compose -f docker-compose.yml up -d --build --force-recreate
-```
+   ```bash
+   docker compose -f docker-compose.yml up -d --build --force-recreate
+   ```
+</Steps>
 
 This should update all components to the latest version.
 

src/content/docs/upgrading/migration-to-solar-system-from-manual-install.mdx

@@ -4,6 +4,8 @@ sidebar:
    order: 2
 ---
 
+import { Steps } from '@astrojs/starlight/components';
+
 ![Migration to Solar System from Manual Install](../../../assets/img/prefer_solar_system.png)
 
 ## Introduction
@@ -25,28 +27,31 @@ Make sure to create a backup of the Sunrise using `!backupdatabase` command in-g
 We are not responsible for any data loss or corruption that may occur during the migration. Please make sure to create backups of all databases before proceeding with the migration.
 :::
 
+<Steps>
+
 1. **Stop the Server**: Ensure that Sunrise/Observatory/Sunshine containers are not running before making any changes. (Leave databases containers running.)
 
 2. **Clone the Solar System repository**: Clone the [Solar System](https://github.com/SunriseCommunity/Solar-System) repository with submodules.
 
-```console
-git clone --recursive https://github.com/SunriseCommunity/Solar-System.git
-cd Solar-System
-```
+   ```console
+   git clone --recursive https://github.com/SunriseCommunity/Solar-System.git
+   cd Solar-System
+   ```
 
 3. **Copy the configuration files**: Copy the configuration files from your manual installation to the Solar System repository.
 
-```console
-cp .env.example .env
-cp Sunrise.Config.Production.json.example Sunrise.Config.Production.json
-```
+   ```console
+   cp .env.example .env
+   cp Sunrise.Config.Production.json.example Sunrise.Config.Production.json
+   ```
 
 4. **Fill the configuration files**: Fill the configuration files with your previous configuration values. 
 
-For example, if you were using `appsettings.Production.json` file, you can copy the values from it to the `Sunrise.Config.Production.json` file.
-
-For the `.env` file, each value has a prefix of the component it belongs to. For example, `SUNRISE_` prefix is for Sunrise, `OBSERVATORY_` prefix is for Observatory, `SUNSHINE_` prefix is for Sunshine.
+   For example, if you were using `appsettings.Production.json` file, you can copy the values from it to the `Sunrise.Config.Production.json` file.
+   
+   For the `.env` file, each value has a prefix of the component it belongs to. For example, `SUNRISE_` prefix is for Sunrise, `OBSERVATORY_` prefix is for Observatory, `SUNSHINE_` prefix is for Sunshine.
 
+</Steps>
 
 ### Migrating data from sunrise database
 

src/content/docs/upgrading/upgrade-to-dot-env-variables.mdx

@@ -4,6 +4,8 @@ sidebar:
    order: 2
 ---
 
+import { Steps } from '@astrojs/starlight/components';
+
 ## Introduction
 
 Starting from January 6 2026, Sunrise has transitioned to using `.env` files for configuration management.
@@ -24,50 +26,54 @@ This is not a requirement, but it is highly recommended to back up your existing
 To do so, run `!backupdatabase` Bancho command in-game to back up your database. After it's done, continue with this guide.
 :::
 
+<Steps>
+
 1. **Stop the Server**: Ensure that your Sunrise server is not running before making any changes.
 
-If you are running the server using Docker Compose:
+   If you are running the server using Docker Compose:
 
-```bash
-docker compose -f docker-compose.yml down
-```
+   ```bash
+   docker compose -f docker-compose.yml down
+   ```
 
-Or manually stop the server if you are running it directly.
+   Or manually stop the server if you are running it directly.
 
 2. **Create a `.env` File**: In the root directory of your Sunrise server, there should be a file named `.env.example`. Create a copy of this file and rename it to `.env`.
 
-On Linux or macOS, you can use the following command:
+   On Linux or macOS, you can use the following command:
 
-```bash
-cp .env.example .env
-```
+   ```bash
+   cp .env.example .env
+   ```
 
-On Windows, you can use:
+   On Windows, you can use:
 
-```powershell
-copy .env.example .env
-```
+   ```powershell
+   copy .env.example .env
+   ```
 
 3. **Migrate Configuration Values**: Open your existing `appsettings.*.json` files and copy the relevant configuration values to the corresponding variables in the `.env` file.
 
-Here is an example mapping of the values from `appsettings.json` to `.env` variables:
+   Here is an example mapping of the values from `appsettings.json` to `.env` variables:
 
-![](../../../assets/img/values-mapping-for-env.png)
-:::warning
-Please notice that `Hangfire.ConnectionString` is _deprecated_ and doesn't need to be migrated to `.env` file any more. Use the same connection string as `Database.ConnectionString` instead.
-:::
+   ![](../../../assets/img/values-mapping-for-env.png)
+   :::warning
+   Please notice that `Hangfire.ConnectionString` is _deprecated_ and doesn't need to be migrated to `.env` file any more. Use the same connection string as `Database.ConnectionString` instead.
+   :::
 
 4. **Save Changes**: After migrating all the necessary values, save the `.env` file.
 
 5. **Restart the Server**: Start your Sunrise server again to apply the changes.
 
-If you are using Docker Compose:
+   If you are using Docker Compose:
 
-```bash
-docker compose -f docker-compose.yml up -d --build --remove-orphans
-```
+   ```bash
+   docker compose -f docker-compose.yml up -d --build --remove-orphans
+   ```
+
+   Or start the server manually if you are running it directly.
 
-Or start the server manually if you are running it directly.
+</Steps>
 
 ## Common problems