General cleanup (#44)

* Unify color scheme in homepage

* Remove/hide compare sections

* Cleanup and reorganise Features page and also move Commands page

* Docker install page cleanup and Discord app creation image / instructions update.

* fix: Feature page not shown

Fix suggested by @eartharoid

* Revert homepage scheme change

* Revert footer change

* Add notice on EACCES error

* Test tooltips

* Try change previews

* Add test data preview

* Add missing data preview tags

* Update line

docs/features/commands.md → docs/commands.md

@@ -44,7 +44,7 @@ Send a prompt (in the channel the command is used in) for the target user to cre
 If you have multiple [categories](./index.md#concept:categories) configured,
 the staff member will be asked to select the category that the ticket will be created in.
 
-This can be used as an alternative to repeatedly asking members to "please create a ticket with [`/new`](#new)".
+This can be used as an alternative to repeatedly asking members to "please create a ticket with [`/new`](#new){ data-preview }".
 
 
 ## Chat (slash) commands
@@ -152,7 +152,7 @@ Add an emoji before the channel name to declare the ticket's priority.
 
 |                           Name                           |       Description       |          Example           |
 | :------------------------------------------------------: | :---------------------: | :------------------------: |
-| :material-asterisk:{ .pink title="Required" } `priority` | The new ticket priority | [See choices](#priority_1) |
+| :material-asterisk:{ .pink title="Required" } `priority` | The new ticket priority | [See choices](#priority_1){ data-preview } |
 
 ##### Choices
 

docs/configuration/categories/index.md

@@ -168,7 +168,7 @@ Members will not be able to create tickets in this category unless they have the
 </small>
 
 When enabled, members will be prompted to enter a topic through a modal form when creating a ticket.
-This can be edited later using the [`/topic`](../../features/commands.md#topic) command or the *Edit* button on the opening message.
+This can be edited later using the [`/topic`](../../commands.md#topic) command or the *Edit* button on the opening message.
 
 Note that topic and [questions](./questions.md) are mutually exclusive and this option is ignored if questions are present.
 

docs/configuration/general.md

@@ -16,10 +16,10 @@ tags:
 When provided, tickets pending closure will be automatically closed after the specified time.
 Tickets are pending closure when:
 
-- A close request is sent (with [`/close`](../features/commands.md#close) or the close button), it is not rejected (ignored or not seen), and fewer than 5 messages are sent afterwards.
+- A close request is sent (with [`/close`](../commands.md#close) or the close button), it is not rejected (ignored or not seen), and fewer than 5 messages are sent afterwards.
 - A ticket is marked as stale after being inactive for longer than the [*Stale after*](#stale-after) time.
 
-When paired with the [*Stale after*](#stale-after) option, tickets will be automatically closed when `lastMessageAt + stalerAfter + autoCloseAfter > now`.
+When paired with the [*Stale after*](#stale-after){ data-preview } option, tickets will be automatically closed when `lastMessageAt + stalerAfter + autoCloseAfter > now`.
 
 Must be an [ms](https://github.com/vercel/ms#readme)-parsable format (`18h`, `2 days`, `1w`, etc).
 The value should be greater than 5 minutes, but 12 hours is the minimum recommended value.
@@ -102,7 +102,7 @@ The [colour](https://old.discordjs.dev/#/docs/discord.js/main/typedef/ColorResol
 When provided, tickets that are inactive for this amount of time will be marked as stale.
 This sends a message warning participants to resume the conversation.
 
-This option can be paired with the [*Auto close after*](#auto-close-after) option to automatically close tickets after a period of inactivity.
+This option can be paired with the [*Auto close after*](#auto-close-after){ data-preview } option to automatically close tickets after a period of inactivity.
 
 Must be an [ms](https://github.com/vercel/ms#readme)-parsable format (`15m`, `1h`, `1 day`, etc).
 

docs/configuration/index.md

@@ -47,8 +47,8 @@ Each section of the settings panel has a dedicated page in this documentation an
 
 Before you start configuring the bot, you may want to clean up the application command selector for your members.
 
-The bot will usually manage the overwrites on [staff-only commands](../features/commands.md) for you (so these commands are hidden from members),
-but [ticket-only commands](../features/commands.md) are not modified by the bot.
+The bot will usually manage the overwrites on [staff-only commands](../commands.md) for you (so these commands are hidden from members),
+but [ticket-only commands](../commands.md) are not modified by the bot.
 
 This means that
 

docs/configuration/tags.md

@@ -8,7 +8,7 @@
 :octicons-alert-16: Required
 </small>
 
-The name of the tag, visible to users with the [`/tag`](../features/commands.md#tag) command.
+The name of the tag, visible to users with the [`/tag`](../commands.md#tag) command.
 You can add Unicode glyphs, but not emoji names or custom emoji.
 
 ### Auto tag regular expression

docs/features/index.md → docs/features.md

@@ -12,7 +12,7 @@ tags:
 
 	[View comparisons :octicons-link-external-16:](https://blog.discordtickets.app/tag/comparison/){ target=_blank .md-button .md-button--primary
  -->
-
+<!--
 <div class="admonition question">
 <p class="admonition-title text-lg">
 Switching from another bot? See how Discord Tickets is different from other popular bots:
@@ -21,7 +21,7 @@ Switching from another bot? See how Discord Tickets is different from other popu
 </a>
 </p>
 </div>
-
+ -->
 ## Concepts
 
 [`Tickets`](#concept:tickets){ #concept:tickets }
@@ -72,16 +72,18 @@ flowchart TB
     B -.->|No| C
     B1 --> D
     C[/"🕑 Target user clicks button"/] -->|Creator interaction| D
-    B -->|No| D{"Satisfies required roles,\nlimits, etc?"}
+    B -->|No| D{"Satisfies required roles,<br/>limits, etc?"}
     D ==>|Yes|E{Category has questions?}
     D-->|No|F(["❌ End with error"])
     E-->|Yes|G[/"❓ Questions modal"/]
     E-->|No|H{Category requires topic?}
-    H-->|Yes|I[/"❓ Topic modal\n(skipped if started with DM)"/]
+    H-->|Yes|I[/"❓ Topic modal<br/>(skipped if started with DM)"/]
     H-->|No|J
     G & I--> J(["✅ Create ticket"])
 ```
-
+<br />
+<center> This page is still being worked on!
+<!--
 ## Archives
 
 ## Questions
@@ -93,3 +95,4 @@ flowchart TB
 ## Context
 
 ## Settings
+-->

docs/getting-started.md

@@ -17,7 +17,7 @@ Welcome to the Discord Tickets documentation.
 Now that you've chosen to use the best ticket bot for Discord, you need to decide how you want to use it.
 
 Please compare the three options, then click on a button at the bottom of the table to jump to the relevant section of the documentation.
-If you need help choosing, [ask for help](#useful-links).
+If you need help choosing, [ask for help](#useful-links){ data-preview }.
 
 ---
 

docs/managed.md

@@ -126,7 +126,7 @@ Depending on your location, you can pay with:
 - [x] Card (Visa, Mastercard, American Express, etc)
 - [x] Apple Pay
 - [x] Google Pay
-- [x] PayPal [(see below)](#can-i-pay-with-paypal)
+- [x] PayPal [(see below)](#can-i-pay-with-paypal){ data-preview }
 - [x] Bancontact ([EUR](#eur) only)
 - [x] iDEAL ([EUR](#eur) only)
 - [x] SEPA Direct Debit ([EUR](#eur) only)

docs/privacy.md

@@ -25,7 +25,7 @@ Encryption-at-rest protects your users' data (primarily messages which may conta
 Unencrypted copies of user avatars and message attachments may also be stored on the disk (in the `user` directory).
 
 Note that by default, the Discord Tickets Bot connects to the StatsAPI service, so [unless you disable it](./self-hosting/configuration.md#stats),
-you are automatically a service user and the [privacy policy](#service-privacy-policy) below applies.
+you are automatically a service user and the [privacy policy](#service-privacy-policy){ data-preview } below applies.
 
 ### Compliance
 
@@ -38,7 +38,7 @@ Your privacy policy should mention the collection, processing, and storage of th
 
 ## Service privacy policy
 
-**The [above privacy notice](#open-source-software-privacy-notice) also applies to the public/managed hosted bot services.**
+**The [above privacy notice](#open-source-software-privacy-notice){ data-preview } also applies to the public/managed hosted bot services.**
 
 ### Data collection and processing
 

docs/self-hosting/configuration.md

@@ -113,7 +113,7 @@ The default accepts connections from anywhere (assuming your firewall allows it)
 
 ### `HTTP_INTERNAL`
 
-If unset, defaults to the [`HTTP_EXTERNAL`](#http_external) value.
+If unset, defaults to the [`HTTP_EXTERNAL`](#http_external){ data-preview } value.
 This is the address that will be used when the bot (more specifically the integrated SvelteKit app) makes API requests to itself.
 Usually, this should be the same as the external address, but in some cases, the external address can't be reached internally.
 

docs/self-hosting/index.md

@@ -13,7 +13,7 @@ Regardless of the installation method you choose, the bot requires:
 - a forwarded (not firewalled) port
 - at least **150MB RAM**
 - at least **1GB disk** space (at least 100MB for the database if archiving)
-- a [supported database](#supported-databases) (MySQL 8 recommended)
+- a [supported database](#supported-databases){ data-preview } (MySQL 8 recommended)
 
 !!! info ""
     Although the bot itself uses around 120MB RAM, npm can use at least triple that during installation.

docs/self-hosting/installation/docker.md

@@ -11,7 +11,7 @@ description: How to install Discord Tickets with Docker
 Before you start, you need to make sure your system meets [the requirements](../index.md#requirements).
 
 Unless you know what you're doing and already have a database and reverse proxy set up,
-using the provided [`docker-compose.yml`](https://dl.discordtickets.app/bot/docker-compose.yml) file is recommended over [pure Docker](#pure-docker).
+using the provided [`docker-compose.yml`](https://dl.discordtickets.app/bot/docker-compose.yml) file is recommended over [pure Docker](#pure-docker){ data-preview }.
 
 ## Docker Compose
 
@@ -161,9 +161,29 @@ Copy the value below and set it as the `ENCRYPTION_KEY` environment variable.
 Start the containers:
 
 ```bash linenums="0"
-docker-compose up -d
+docker compose up -d
 ```
 
+!!! danger
+    In case of errors such as `EACCES: permission denied..` after running the docker container, comment out the first volume in `docker-compose.yml`.
+
+    Before:
+    ```yaml title="docker-compose.yml"
+        volumes:
+          - tickets-bot:/home/container/user
+    ```
+
+    After:
+    ```yaml title="docker-compose.yml"
+        volumes:
+    #      - tickets-bot:/home/container/user
+    ```
+
+    Then restart the container:
+    ```
+    docker compose down && docker compose up -d
+    ```
+    This prevents permission conflicts but as a downside disables persistence for /home/container/user.
 
 ### Publishing the commands
 
@@ -211,7 +231,7 @@ and set the `HTTP_TRUST_PROXY` environment variable to `#!yaml true`.
 ## Pure Docker
 
 !!! info ""
-    This is a very short overview; refer to the [Docker Compose](#docker-compose) guide for more information.
+    This is a very short overview; refer to the [Docker Compose](#docker-compose){ data-preview } guide for more information.
 
 Some required environment variables that you are unlikely to change have defaults set in the Dockerfile:
 

docs/self-hosting/installation/index.md

@@ -9,7 +9,7 @@
 
 ## Shared/containerised services
 
-| :fontawesome-solid-server:<br>BisectHosting { .bisect .text-lg } | :fontawesome-solid-crow:<br>Pterodactyl { .pterodactyl .text-lg } | :fontawesome-solid-cube:<br>PebbleHost { .pebblehost .text-lg } | :fontawesome-solid-train:<br>Railway { .railway .text-lg } |
+| :simple-bisecthosting:<br>BisectHosting { .bisect .text-lg } | :simple-pterodactyl:<br>Pterodactyl { .pterodactyl .text-lg } | :fontawesome-solid-cube:<br>PebbleHost { .pebblehost .text-lg } | :simple-railway:<br>Railway { .railway .text-lg } |
 | :--------------------------------------------------------------: | :---------------------------------------------------------------: | :-------------------------------------------------------------: | :--------------------------------------------------------: |
 |          :green_book:<br>Node.js experience recommended          |          :green_book:<br>Node.js experience recommended           |         :green_book:<br>Node.js experience recommended          |       :orange_book:<br>Docker experience recommended       |
 |    [Start](bisecthosting.md){.md-button .md-button--primary}     |   [Start](pterodactyl/index.md){.md-button .md-button--primary}   |    [Start](pebblehost.md){ .md-button .md-button--primary }     |    [Start](railway.md){.md-button .md-button--primary}     |

docs/self-hosting/reverse-proxy.md

@@ -14,7 +14,7 @@ To do this, you need:
 If you already have a domain and know how to create an HTTPS proxy, you can safely skip this page.
 If not, there are several options available:
 
-|                   |    [Traefik](#traefik)     |   [Nginx](#nginx)    | [Caddy](#caddy-2-recommended) | [PebbleHost](#pebblehost) |
+|                   |    [Traefik](#traefik){ data-preview }     |   [Nginx](#nginx){ data-preview }    | [Caddy](#caddy-2-recommended){ data-preview } | [PebbleHost](#pebblehost){ data-preview } |
 | :---------------- | :------------------------: | :------------------: | :---------------------------: | :-----------------------: |
 | Difficulty        | Most difficult { .orange } | Moderate { .orange } |        Easy { .green }        |      Easy { .green }      |
 | Bot installations |        Docker only         |         Any          |              Any              |      PebbleHost only      |

includes/discord-application.md

@@ -11,9 +11,10 @@
 	2. Give your application a name, accept the terms of service and click `Create`
 
 	![Screenshot](/img/discord-application-1.png)
-3. Add a logo, description, and links to your terms of service and privacy policy, then click `Save Changes`.
+3. In the page that appears you can add a logo, description, or links to your terms of service and privacy policy if you wish to, and then click `Save Changes`.
 
 	![Screenshot](/img/discord-application-2.png)
+
 4. Go to the `OAuth2` page and click `Reset Secret`, then `Yes, do it!`.
 	**Copy the new secret and set it as your `DISCORD_SECRET` environment variable.**
 
@@ -29,16 +30,14 @@
     your `HTTP_EXTERNAL` environment variable must be set to `https://tickets.example.com` *(without a trailing `/`)*.
 
 	![Screenshot](/img/discord-application-4.png)
-6. Create the bot user
+6. Navigate to the `Bot` page
 
-	1. Go to the `Bot` page and click `Add Bot`, then `Yes, do it!`
-	2. Click `View Token`, then **copy the token and set it as your `DISCORD_TOKEN` environment variable.**
+	1. Click `View Token`, then **copy the token and set it as your `DISCORD_TOKEN` environment variable.**
+	2. We highly recommend disabling the "Public Bot" option to prevent other people from adding your bot to their servers. Before you can do so, you will need to go to to the `Installation` page and set `Install Link` to `None`. After saving changes, return to the `Bot` page and disable the "Public Bot" option.
 
 	![Screenshot](/img/discord-application-5.png)
-7. Configure the bot
 
-	1. Optionally, disable the "public bot" option to prevent other people from adding your bot to their servers.
-	2. **Enable the `presence`, `server members` and `message content` intents.**
+	3. **Enable the `presence`, `server members` and `message content` intents.**
 
 	![Screenshot](/img/discord-application-6.png)
 

mkdocs.insiders.yml

@@ -25,14 +25,15 @@ theme:
     # - content.code.select # insiders-only
     - content.tabs.link
     - content.tooltips
+    - content.footnote.tooltips
     # - header.autohide
     # - navigation.expand
     - navigation.footer
     - navigation.indexes
     # - navigation.instant # doesn't work with home page? :(
     # - navigation.instant.prefetch # insiders-only
     # - navigation.instant.progress
-    - navigation.instant.preview # insiders-only
+    # - navigation.instant.preview # insiders-only
     - navigation.path # insiders-only
     - navigation.prune # insiders-only
     # - navigation.sections

mkdocs.yml

@@ -54,6 +54,13 @@ markdown_extensions:
   - footnotes
   - md_in_html
   - meta
+  - material.extensions.preview:
+      configurations:
+        - sources:
+            include:
+              - 'docs/**/*.md'
+            exclude:
+              - 'docs/getting-started.md'
   - pymdownx.arithmatex
   - pymdownx.betterem:
       smart_enable: all
@@ -101,9 +108,8 @@ nav:
   - Home: index.md
   - Documentation:
     - Getting started: getting-started.md
-    - Features:
-       - Features: features/index.md
-       - Commands: features/commands.md
+    - Features: features.md
+    - Commands: commands.md
     # - Public bot: public.md
     - Managed bot: managed.md
     - Self-hosting:

overrides/partials/footer-content.html

@@ -32,14 +32,12 @@ <h4 id="become-a-sponsor">
 				</div>
 			</div>
 			<div class="mdx-content__column">
-
 				<!-- Section header -->
 				<header class="md-typeset">
 					<h4 id="compared">
 						Let's compare
 					</h4>
 				</header>
-
 				<!-- Section content -->
 				<div class="mdx-connect md-typeset">
 					<div class="mdx-connect__inner">

overrides/partials/home/connect.html

@@ -57,24 +57,6 @@ <h1 id="become-a-sponsor">
 					</div>
 				</div>
 			</div>
-			<div class="mdx-content__column">
-
-				<!-- Section header -->
-				<header class="md-typeset" hidden>
-					<h1 id="compared">
-						Let's compare
-						<a href="#compared" class="headerlink" title="Permanent link">
-							¶
-						</a>
-					</h1>
-				</header>
-
-				<!-- Section content -->
-				<div class="mdx-connect md-typeset" hidden>
-					<div class="mdx-connect__inner">
-						{% include "partials/compare.html" %}
-					</div>
-				</div>
-			</div>
 		</div>
+	</div>
 </section>

overrides/partials/home/spotlight.html

@@ -96,7 +96,7 @@ <h2>Simple settings</h2>
 				</figure>
 
 				<figure class="mdx-spotlight__feature" hidden>
-					<a href="features/commands/" title="Modern features" tabIndex="-1">
+					<a href="../commands" title="Modern features" tabIndex="-1">
 						<img src="img/home/modern.webp" alt="Modern features" loading="lazy" width="500" height="327" />
 					</a>
 					<figcaption class="md-typeset">
@@ -111,7 +111,7 @@ <h2>Modern features</h2>
 							<strong>buttons</strong>, <strong>menus</strong>,
 							and modal <strong>forms</strong>.
 						</p>
-						<a href="features/commands/" aria-label="Modern features">
+						<a href="../commands" aria-label="Modern features">
 							<span class="twemoji">
 								{% include ".icons/octicons/arrow-right-24.svg" %}
 							</span>

overrides/stylesheets/extra.css

@@ -265,4 +265,4 @@ footer .mdx-connect .mdx-connect__link span {
 .md-footer-meta__inner a:focus,
 .md-footer-meta__inner a:active {
 	color: white !important;
-}
+}