mirror of
https://github.com/Drop-OSS/drop-docs.git
synced 2026-01-30 20:55:17 +01:00
initial commit
This commit is contained in:
33
docs/about.md
Normal file
33
docs/about.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# About Drop
|
||||
|
||||
Drop is an open-source, self-hosted game distribution platform. It's designed offer all the same features of a platform like Steam.
|
||||
|
||||
Don't know what any of that means? Keep reading.
|
||||
|
||||
## Open source
|
||||
Open source means you are free to view and re-use the source code of Drop (in accordance with it's license).
|
||||
|
||||
Drop is also open-contribution, and we encourage technical users to contribute back to the Drop source code, especially if there are features they want that are missing or are planned for later.
|
||||
|
||||
If you want to start contributing, check out our GitHub: [Drop OSS organization](https://github.com/Drop-OSS).
|
||||
|
||||
We also recommend join our Discord: [Drop-OSS invite](https://discord.gg/NHx46XKJWA). However, there is a lot of drama around open-source projects using Discord, so we also encourage using GitHub issues or discussions to ask for support or talk about new features.
|
||||
|
||||
## Self hosted
|
||||
Self hosted means there **is no central server.** Unlike many of the services which dominate the Internet today, Drop isn't a website you go to, it's software you download and run yourself. That means every person that uses Drop **has their own, independent copy**, which has it's own **own, independent URL or way to access it.**
|
||||
|
||||
Or, if you're lucky, one of your friends or family has already set up an instance, and provided you with a URL, in which case you can just head over to [Getting started with Drop](/guides/client).
|
||||
|
||||
## Game distribution
|
||||
A game distribution service is one that... distributes games. Think of Steam, GOG or Epic Games. You can view, buy and download games from these sites. That's what Drop is.
|
||||
|
||||
Instead however, instead of a massive centralized website, each admin runs their own copy, and adds *their own games* to their own copy of Drop. Also, there's no payment processing, nothing has a price.
|
||||
|
||||
## Platform
|
||||
Drop does a lot more than just game distribution. As of `v0.2.0-beta`, a lot hasn't been implemented. But, in future, Drop will be able to handle things such as:
|
||||
|
||||
- Dedicated servers
|
||||
- Matchmaking & P2P games
|
||||
- Achievements & items
|
||||
- Cloud saves
|
||||
- Modding
|
||||
79
docs/advanced/building.md
Normal file
79
docs/advanced/building.md
Normal file
@@ -0,0 +1,79 @@
|
||||
# Building Drop server for other platforms
|
||||
|
||||
Unfortunately, we don't have the time or resources to build and debug our software for platforms other than x86-64 or arm64. However, we offer this guide as a way to get it running, at your own risk.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
To compile:
|
||||
|
||||
- Rust (stable)
|
||||
- Node.js v20
|
||||
- `yarn` (v1/legacy) package manager
|
||||
- `git` VCS
|
||||
- Docker
|
||||
|
||||
To run:
|
||||
|
||||
- Docker
|
||||
|
||||
## Building `droplet`
|
||||
|
||||
`droplet` is a high-performance utility package for the Drop server. It's a `napi.rs` module, meaning it's written in Rust and then compiled to an NPM module.
|
||||
|
||||
Get started by cloning the `droplet` source code, and then enter the directory:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/Drop-OSS/droplet.git
|
||||
```
|
||||
|
||||
Install the dependencies with `yarn`:
|
||||
|
||||
```shell
|
||||
yarn
|
||||
```
|
||||
|
||||
And then compile the package with the build script:
|
||||
|
||||
```shell
|
||||
yarn build
|
||||
```
|
||||
|
||||
Because we're building this locally, setup the yarn link so we can use this package while building the server:
|
||||
|
||||
```shell
|
||||
yarn link
|
||||
```
|
||||
|
||||
## Building `drop`
|
||||
|
||||
`drop` is the self hosted server. It's a Nuxt 3 project, but depends on the `droplet` package so isn't easily transportable.
|
||||
|
||||
Get started by cloning the `drop` source code, and then enter the directory:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/Drop-OSS/drop.git
|
||||
```
|
||||
|
||||
Then, link your build `droplet` package:
|
||||
|
||||
```shell
|
||||
yarn link "@drop/droplet"
|
||||
```
|
||||
|
||||
Then, install dependencies:
|
||||
|
||||
```shell
|
||||
yarn
|
||||
```
|
||||
|
||||
Then, build the application:
|
||||
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
To package it into a Docker container, remove the build commands in the provided `Dockerfile`'s build-system (`yarn install` and `yarn build`), and then build the Docker image:
|
||||
|
||||
```shell
|
||||
docker build . -t drop
|
||||
```
|
||||
16
docs/guides/client-troubleshooting.md
Normal file
16
docs/guides/client-troubleshooting.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# Troubleshooting
|
||||
|
||||
## I'm on Linux, with Nvidia proprietary drivers, and Drop won't launch
|
||||
|
||||
Add `WEBKIT_DISABLE_DMABUF_RENDERER=1` to the Drop .desktop file:
|
||||
|
||||
1. Open `/usr/share/applications/Drop\ Desktop\ Client.desktop` with your preferred editor
|
||||
2. Add `env WEBKIT_DISABLE_DMABUF_RENDERER=1` before `drop-app` on the `Exec=drop-app` line
|
||||
|
||||
## "Server's and client's time is out of sync..." or HTTP 0
|
||||
|
||||
The server and client must be within 30 seconds of each other for security reasons. Drop uses short-lived tokens to authenticate securely, and they are valid for those 30 seconds. If you are the server administrator, please ensure both your server and client have the correct time. If you are a user, please double check your own system before asking your admin.
|
||||
|
||||
## Default Apps / Deep Links not registering
|
||||
On Windows, it appears that Deep Links are not updating between Drop releases. To resolve this issue, navigate to your Default Apps in
|
||||
Settings and press "Reset Default Apps". This will, however, result in resetting all of your default apps.
|
||||
4
docs/guides/client.md
Normal file
4
docs/guides/client.md
Normal file
@@ -0,0 +1,4 @@
|
||||
# Getting started with Drop
|
||||
Drop clients are available for download from the [our website](https://droposs.org/download). Download the correct version for your platform, and open it up.
|
||||
|
||||
The client will walk you through the setup and sign-in process to get started. You'll need a Drop instance you can connect to, and an account on the server. If you don't have one, you can follow the [Quickstart guide](/guides/quickstart) to setup your own.
|
||||
9
docs/guides/create-admin-account.md
Normal file
9
docs/guides/create-admin-account.md
Normal file
@@ -0,0 +1,9 @@
|
||||
# Create your admin account
|
||||
A freshly set up Drop instance will have an 'admin invitation' created. This allows you to create your admin account without having to copy credentials from the command line, or similar.
|
||||
|
||||
To use the invitation, go to:
|
||||
```
|
||||
{Drop instance URL}/register?id=admin
|
||||
```
|
||||
|
||||
Once used, the invitation will be deleted. If you are unsure how to access your Drop instance, read through [Exposing your instance](/guides/exposing)
|
||||
20
docs/guides/exposing.md
Normal file
20
docs/guides/exposing.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# Exposing your instance
|
||||
Exposing your instance allows it to be accessible from other computers than the one you're hosting it on.
|
||||
|
||||
## LAN
|
||||
The `compose.yaml` provided in the [Quickstart guide](/guides/quickstart.md) already exposes the Drop instance on port 3000. If you're on the same LAN as your Drop instance, you can find it's IP and then use:
|
||||
```
|
||||
http://[instance IP]:3000
|
||||
```
|
||||
|
||||
as the connection URL when setting up your Drop client.
|
||||
|
||||
## Reverse Proxy
|
||||
If you are unsure how to set up a reverse proxy, or even what one is, this guide isn't for you. There are far better guides out there, so follow them to set up your reverse proxy.
|
||||
|
||||
As of `v0.2.0-beta` there is no special configuration required to run Drop behind a reverse proxy.
|
||||
|
||||
## VPN
|
||||
If you are unsure how to setup a VPN for remote access, please find and follow a far better guide than this one.
|
||||
|
||||
Accessing Drop over a VPN works very similarly to [accessing via LAN](#lan), so follow those steps.
|
||||
72
docs/guides/quickstart.md
Normal file
72
docs/guides/quickstart.md
Normal file
@@ -0,0 +1,72 @@
|
||||
# Quickstart
|
||||
|
||||
This guide quickly runs through how to get set up with Drop in about five minutes, depending on your experience.
|
||||
|
||||
## Setting up the instance
|
||||
|
||||
The easiest way to get Drop running is using our pre-built Docker container.
|
||||
|
||||
```yaml compose.yaml
|
||||
services:
|
||||
postgres:
|
||||
image: postgres:14-alpine
|
||||
ports:
|
||||
- 5432:5432
|
||||
healthcheck:
|
||||
test: pg_isready -d drop -U drop
|
||||
interval: 30s
|
||||
timeout: 60s
|
||||
retries: 5
|
||||
start_period: 10s
|
||||
volumes:
|
||||
- ./db:/var/lib/postgresql/data
|
||||
environment:
|
||||
- POSTGRES_PASSWORD=drop
|
||||
- POSTGRES_USER=drop
|
||||
- POSTGRES_DB=drop
|
||||
drop:
|
||||
image: decduck/drop-oss:v0.2.0-beta
|
||||
depends_on:
|
||||
postgres:
|
||||
condition: service_healthy
|
||||
ports:
|
||||
- 3000:3000
|
||||
volumes:
|
||||
- ./library:/library
|
||||
- ./certs:/certs
|
||||
- ./objects:/objects
|
||||
environment:
|
||||
- DATABASE_URL=postgres://drop:drop@postgres:5432/drop
|
||||
- FS_BACKEND_PATH=/objects
|
||||
- CLIENT_CERTIFICATES=/certs
|
||||
- LIBRARY=/library
|
||||
- GIANT_BOMB_API_KEY=REPLACE_WITH_YOUR_KEY
|
||||
```
|
||||
|
||||
**The main things in this `compose.yaml` is the volumes attached to the `drop` service:**
|
||||
|
||||
1. `./library` is where you will put your games to be imported into Drop. See '[Structuring your library](/docs/library.md#structuring-your-library)' once you're set up.
|
||||
2. `./certs` is where Drop will store cryptographic certificates relating to the function of Drop end clients and the connections between them. In order to make sure the traffic isn't being snooped on, keep this directory safe.
|
||||
3. `./objects` is where Drop will store uploaded & downloaded files (from metadata providers)
|
||||
|
||||
**In addition, configure your chosen metadata provider:**
|
||||
|
||||
- [GiantBomb](/metadata/giantbomb.md) (only one supported as of v0.2.0-beta)
|
||||
|
||||
:::tip
|
||||
If you want to, you can generate a more secure PostgreSQL username & password.
|
||||
:::
|
||||
|
||||
:::warning
|
||||
For security reasons, the Drop server and client's times need to be within 30 seconds of each other, otherwise authorization will fail.
|
||||
:::
|
||||
|
||||
Once your instance is running, [create your admin account](/guides/create-admin-account.md).
|
||||
|
||||
## Setting up a client
|
||||
|
||||
To set up a client, your Drop instance will have to be accessible from it. See [Exposing your instance](/guides/exposing.md) for information on how to do that.
|
||||
|
||||
First, download the latest client for your platform from [the GitHub releases page](https://github.com/Drop-OSS/drop-app/releases). Then, install it for your platform. If we don't have a binary available for your platform, please create an issue on [the Drop app repository](https://github.com/Drop-OSS/drop-app) and we'll investigate it.
|
||||
|
||||
Once installed, open the Drop app for the first time. There is an automated wizard that'll walk you through the steps of signing into your Drop instance.
|
||||
1
docs/guides/server-troubleshooting.md
Normal file
1
docs/guides/server-troubleshooting.md
Normal file
@@ -0,0 +1 @@
|
||||
# Troubleshooting
|
||||
24
docs/index.md
Normal file
24
docs/index.md
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
# https://vitepress.dev/reference/default-theme-home-page
|
||||
layout: home
|
||||
|
||||
hero:
|
||||
name: "Drop OSS"
|
||||
tagline: Drop is an open-source, self-hosted game distribution platform. Like Steam!
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Quick start
|
||||
link: /guides/quickstart
|
||||
- theme: alt
|
||||
text: About ->
|
||||
link: /about/
|
||||
|
||||
features:
|
||||
- title: Open-source
|
||||
details: Drop is open source software! We're under the AGPL-3.0 license.
|
||||
- title: Self-hosted
|
||||
details: Drop is designed to be self hosted! These docs, and Docker make that possible.
|
||||
- title: Cross-platform
|
||||
details: Drop has first class support for both Linux & Windows!
|
||||
---
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Tutorial Intro
|
||||
|
||||
Let's discover **Docusaurus in less than 5 minutes**.
|
||||
|
||||
## Getting Started
|
||||
|
||||
Get started by **creating a new site**.
|
||||
|
||||
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
|
||||
|
||||
### What you'll need
|
||||
|
||||
- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
|
||||
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
|
||||
|
||||
## Generate a new site
|
||||
|
||||
Generate a new Docusaurus site using the **classic template**.
|
||||
|
||||
The classic template will automatically be added to your project after you run the command:
|
||||
|
||||
```bash
|
||||
npm init docusaurus@latest my-website classic
|
||||
```
|
||||
|
||||
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
|
||||
|
||||
The command also installs all necessary dependencies you need to run Docusaurus.
|
||||
|
||||
## Start your site
|
||||
|
||||
Run the development server:
|
||||
|
||||
```bash
|
||||
cd my-website
|
||||
npm run start
|
||||
```
|
||||
|
||||
The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
|
||||
|
||||
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
|
||||
|
||||
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
|
||||
42
docs/library.md
Normal file
42
docs/library.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# Library
|
||||
|
||||
## Structuring your library
|
||||
Drop uses a very particular structure to organise your games library. Generally, to get started, you need to create two folders for a game:
|
||||
|
||||
1. `{LIBRARY}/My Game Name` - The game folder. This contains **only** folders, as described as below.
|
||||
2. `{LIBRARY}/My Game Name/my-version-name` - The version folder. This folder contains all the files for the game.
|
||||
|
||||
Once in the UI, you'll be prompted to "import" each folder separately:
|
||||
|
||||
- Importing the **game folder** will link the folder to a game in the metadata database, and pulls the data (images, descriptions, that sort of thing) from one of your configured metadata providers. **This only happens once for each game you have.**
|
||||
- Importing **version folder** will read the entirety of the game files and generate checksums and metadata that clients need to download the games with. **This happens for each new version you add.**
|
||||
|
||||
::: warning
|
||||
Importing the version may take very long, depending on the size of the game and the speed of the drive. CPU is rarely the bottleneck.
|
||||
:::
|
||||
|
||||
### Game vs. Version
|
||||
A "game" in Drop is associated with all the metadata, and doesn't have to changed if the game updates.
|
||||
|
||||
A "version" in Drop is associated with the files, and a new one will have to be created every time the game updates.
|
||||
|
||||
## Importing more versions
|
||||
So your game has gotten an update and you've got new files. All you need to do is create a new version folder inside the game folder, and move all the files you have into that folder. Then, import it within the Drop admin UI.
|
||||
|
||||
If you have files that you're supposed to **paste over the previous version**, Drop supports that! Read [Version delta & ordering](#version-deltas--ordering) to find out more.
|
||||
|
||||
## Version deltas & ordering
|
||||
|
||||
Version deltas are a way to avoid storing copies of files on the server. Delta are, very simply, pasted over the top of previous versions (but much more efficiently, to avoid excess downloading).
|
||||
|
||||
To create a delta version, simply select the toggle in the admin UI. Once created, you can drag around the priority of your versions in the admin view of a game. Higher priority versions will have their files used over lower priority. For example, consider three versions:
|
||||
|
||||
1. **v1**
|
||||
1. Game.exe
|
||||
2. Data.bin
|
||||
2. **v2** (delta)
|
||||
1. Game.exe
|
||||
3. **v3** (delta)
|
||||
1. Data.bin
|
||||
|
||||
If the user decides to download **v3**, Drop will download the 'Data.bin' from **v3**, and the 'Game.exe' from **v2**. It won't download any files from **v1**, because they have all been overwritten by higher priority versions.
|
||||
9
docs/metadata/giantbomb.md
Normal file
9
docs/metadata/giantbomb.md
Normal file
@@ -0,0 +1,9 @@
|
||||
# GiantBomb
|
||||
|
||||
GiantBomb is a community-driven open game database. It is accessible at [https://www.giantbomb.com/](https://www.giantbomb.com/).
|
||||
|
||||
## Creating an account
|
||||
To get an API key, you must sign up for an account. Head over to [GiantBomb's Login or Signup](https://www.giantbomb.com/login-signup/) page to create your account, and follow the prompts.
|
||||
|
||||
## Getting an API key
|
||||
Head over to the [GiantBomb API page](https://www.giantbomb.com/api/) and copy your API key from the box at the top of the page. Then, set this in your environment variables with a key of `GIANT_BOMB_API_KEY`
|
||||
8
docs/metadata/igdb.md
Normal file
8
docs/metadata/igdb.md
Normal file
@@ -0,0 +1,8 @@
|
||||
# IGDB
|
||||
|
||||
IGDB is a game database run by Twitch. It is free to use, but requires a Twitch account.
|
||||
|
||||
## Getting an API key
|
||||
|
||||
1. Follow the instructions at [https://api-docs.igdb.com/#getting-started](https://api-docs.igdb.com/#getting-started)
|
||||
2. Assign the `IGDB_CLIENT_ID` and `IGDB_CLIENT_SECRET` environment variables.
|
||||
3
docs/metadata/pcgamingwiki.md
Normal file
3
docs/metadata/pcgamingwiki.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# PCGamingWiki
|
||||
|
||||
PCGamingWiki is a community run game database. There no additional setup required to use PCGamingWiki.
|
||||
5
docs/public/drop.svg
Normal file
5
docs/public/drop.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
|
||||
stroke="#60a5fa" stroke-width="2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 440 B |
BIN
docs/public/logo_with_background.png
Normal file
BIN
docs/public/logo_with_background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
53
docs/roadmap.md
Normal file
53
docs/roadmap.md
Normal file
@@ -0,0 +1,53 @@
|
||||
# Roadmap
|
||||
|
||||
While we're moving towards a major release, here's a few features that you can look forward to over the
|
||||
next few minor ones:
|
||||
|
||||
## Short-term
|
||||
### Better authentication
|
||||
Support for more authentication methods, such as discord, google, oauth, etc.
|
||||
|
||||
Accounts shouldn't be locked down to just Drop. We'd like to not only support username / password login,
|
||||
but OAuth, 2FA, U2F, magic links, and as many other authentication methods as we can.
|
||||
|
||||
Along with that, setting up user / group permissions are also planned, to give admins a more fine-grained
|
||||
control over who has access to what.
|
||||
|
||||
### Connecting to multiple servers (client-side only)
|
||||
Let users connect to and manage games from more than one server
|
||||
|
||||
This one is especially something that we've had requested from indie devs, but being able to access
|
||||
multiple Drop servers could lead to a much larger ecosystem where it's realistic for an indie dev
|
||||
to self-host their own games without Steam's 30%
|
||||
|
||||
## Mid-term
|
||||
### Launch tooling
|
||||
Open support for customising the toolchain with which your games are run with
|
||||
|
||||
While [UMU](https://github.com/Open-Wine-Components/umu-launcher) is great, people often have specific
|
||||
configurations that we can't really account for out of the box. To remedy this, we'd like to open Drop
|
||||
up to essentially fully customised launch sequences for any game, such as setting launch args from the
|
||||
client, configuring, deleting, and backing up prefixes, or setting ENV values.
|
||||
|
||||
We also recognise the value in being able to completely customise the way that your games are run,
|
||||
whether it be by passing them through a remote-play app, an emulator, or anything else of the sort.
|
||||
|
||||
### Cloud save management
|
||||
Support for cloud saves, making it easier to manage saves across different devices and operating systems.
|
||||
|
||||
We're looking at using the [ludusavi manifest](https://github.com/mtkennerly/ludusavi-manifest) to figure
|
||||
out relevant folders and files to be backed up to ideally any remote location.
|
||||
|
||||
## Long-term
|
||||
### Social features
|
||||
Support for social features, such as friends, groups, and other social interactions like current game status.
|
||||
|
||||
People don't always play games with themselves, and so we'd like to add a variety of chat features, friends
|
||||
updates, and other various features that can also be found in Steam's "Friends" and "Community" tabs.
|
||||
|
||||
### Multiplayer support
|
||||
Support for multiplayer server management, such as discovering servers, joining servers, and leaving servers.
|
||||
|
||||
Intended as a drop-in replacement for the SteamWorks API, we'd like to provide support for multiplayer support
|
||||
through the drop server, referencing the [Goldberg Emulator](https://gitlab.com/Mr_Goldberg/goldberg_emulator),
|
||||
as it has the most complete collection of headers that we can find.
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"label": "Tutorial - Basics",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Congratulations!
|
||||
|
||||
You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
|
||||
|
||||
Docusaurus has **much more to offer**!
|
||||
|
||||
Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
|
||||
|
||||
Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
|
||||
|
||||
## What's next?
|
||||
|
||||
- Read the [official documentation](https://docusaurus.io/)
|
||||
- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
|
||||
- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
|
||||
- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
|
||||
- Add a [search bar](https://docusaurus.io/docs/search)
|
||||
- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
|
||||
- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Create a Blog Post
|
||||
|
||||
Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
|
||||
|
||||
## Create your first Post
|
||||
|
||||
Create a file at `blog/2021-02-28-greetings.md`:
|
||||
|
||||
```md title="blog/2021-02-28-greetings.md"
|
||||
---
|
||||
slug: greetings
|
||||
title: Greetings!
|
||||
authors:
|
||||
- name: Joel Marcey
|
||||
title: Co-creator of Docusaurus 1
|
||||
url: https://github.com/JoelMarcey
|
||||
image_url: https://github.com/JoelMarcey.png
|
||||
- name: Sébastien Lorber
|
||||
title: Docusaurus maintainer
|
||||
url: https://sebastienlorber.com
|
||||
image_url: https://github.com/slorber.png
|
||||
tags: [greetings]
|
||||
---
|
||||
|
||||
Congratulations, you have made your first post!
|
||||
|
||||
Feel free to play around and edit this post as much as you like.
|
||||
```
|
||||
|
||||
A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Create a Document
|
||||
|
||||
Documents are **groups of pages** connected through:
|
||||
|
||||
- a **sidebar**
|
||||
- **previous/next navigation**
|
||||
- **versioning**
|
||||
|
||||
## Create your first Doc
|
||||
|
||||
Create a Markdown file at `docs/hello.md`:
|
||||
|
||||
```md title="docs/hello.md"
|
||||
# Hello
|
||||
|
||||
This is my **first Docusaurus document**!
|
||||
```
|
||||
|
||||
A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
|
||||
|
||||
## Configure the Sidebar
|
||||
|
||||
Docusaurus automatically **creates a sidebar** from the `docs` folder.
|
||||
|
||||
Add metadata to customize the sidebar label and position:
|
||||
|
||||
```md title="docs/hello.md" {1-4}
|
||||
---
|
||||
sidebar_label: 'Hi!'
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Hello
|
||||
|
||||
This is my **first Docusaurus document**!
|
||||
```
|
||||
|
||||
It is also possible to create your sidebar explicitly in `sidebars.js`:
|
||||
|
||||
```js title="sidebars.js"
|
||||
export default {
|
||||
tutorialSidebar: [
|
||||
'intro',
|
||||
// highlight-next-line
|
||||
'hello',
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Tutorial',
|
||||
items: ['tutorial-basics/create-a-document'],
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Create a Page
|
||||
|
||||
Add **Markdown or React** files to `src/pages` to create a **standalone page**:
|
||||
|
||||
- `src/pages/index.js` → `localhost:3000/`
|
||||
- `src/pages/foo.md` → `localhost:3000/foo`
|
||||
- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
|
||||
|
||||
## Create your first React Page
|
||||
|
||||
Create a file at `src/pages/my-react-page.js`:
|
||||
|
||||
```jsx title="src/pages/my-react-page.js"
|
||||
import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
|
||||
export default function MyReactPage() {
|
||||
return (
|
||||
<Layout>
|
||||
<h1>My React page</h1>
|
||||
<p>This is a React page</p>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
|
||||
|
||||
## Create your first Markdown Page
|
||||
|
||||
Create a file at `src/pages/my-markdown-page.md`:
|
||||
|
||||
```mdx title="src/pages/my-markdown-page.md"
|
||||
# My Markdown page
|
||||
|
||||
This is a Markdown page
|
||||
```
|
||||
|
||||
A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Deploy your site
|
||||
|
||||
Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
|
||||
|
||||
It builds your site as simple **static HTML, JavaScript and CSS files**.
|
||||
|
||||
## Build your site
|
||||
|
||||
Build your site **for production**:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
The static files are generated in the `build` folder.
|
||||
|
||||
## Deploy your site
|
||||
|
||||
Test your production build locally:
|
||||
|
||||
```bash
|
||||
npm run serve
|
||||
```
|
||||
|
||||
The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
|
||||
|
||||
You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
|
||||
@@ -1,152 +0,0 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Markdown Features
|
||||
|
||||
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
|
||||
|
||||
## Front Matter
|
||||
|
||||
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
|
||||
|
||||
```text title="my-doc.md"
|
||||
// highlight-start
|
||||
---
|
||||
id: my-doc-id
|
||||
title: My document title
|
||||
description: My document description
|
||||
slug: /my-custom-url
|
||||
---
|
||||
// highlight-end
|
||||
|
||||
## Markdown heading
|
||||
|
||||
Markdown text with [links](./hello.md)
|
||||
```
|
||||
|
||||
## Links
|
||||
|
||||
Regular Markdown links are supported, using url paths or relative file paths.
|
||||
|
||||
```md
|
||||
Let's see how to [Create a page](/create-a-page).
|
||||
```
|
||||
|
||||
```md
|
||||
Let's see how to [Create a page](./create-a-page.md).
|
||||
```
|
||||
|
||||
**Result:** Let's see how to [Create a page](./create-a-page.md).
|
||||
|
||||
## Images
|
||||
|
||||
Regular Markdown images are supported.
|
||||
|
||||
You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
|
||||
|
||||
```md
|
||||

|
||||
```
|
||||
|
||||

|
||||
|
||||
You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
|
||||
|
||||
```md
|
||||

|
||||
```
|
||||
|
||||
## Code Blocks
|
||||
|
||||
Markdown code blocks are supported with Syntax highlighting.
|
||||
|
||||
````md
|
||||
```jsx title="src/components/HelloDocusaurus.js"
|
||||
function HelloDocusaurus() {
|
||||
return <h1>Hello, Docusaurus!</h1>;
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
```jsx title="src/components/HelloDocusaurus.js"
|
||||
function HelloDocusaurus() {
|
||||
return <h1>Hello, Docusaurus!</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
## Admonitions
|
||||
|
||||
Docusaurus has a special syntax to create admonitions and callouts:
|
||||
|
||||
```md
|
||||
:::tip My tip
|
||||
|
||||
Use this awesome feature option
|
||||
|
||||
:::
|
||||
|
||||
:::danger Take care
|
||||
|
||||
This action is dangerous
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
:::tip My tip
|
||||
|
||||
Use this awesome feature option
|
||||
|
||||
:::
|
||||
|
||||
:::danger Take care
|
||||
|
||||
This action is dangerous
|
||||
|
||||
:::
|
||||
|
||||
## MDX and React Components
|
||||
|
||||
[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
|
||||
|
||||
```jsx
|
||||
export const Highlight = ({children, color}) => (
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
borderRadius: '20px',
|
||||
color: '#fff',
|
||||
padding: '10px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => {
|
||||
alert(`You clicked the color ${color} with label ${children}`)
|
||||
}}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
||||
|
||||
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|
||||
```
|
||||
|
||||
export const Highlight = ({children, color}) => (
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
borderRadius: '20px',
|
||||
color: '#fff',
|
||||
padding: '10px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => {
|
||||
alert(`You clicked the color ${color} with label ${children}`);
|
||||
}}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
||||
|
||||
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"label": "Tutorial - Extras",
|
||||
"position": 3,
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
@@ -1,55 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Manage Docs Versions
|
||||
|
||||
Docusaurus can manage multiple versions of your docs.
|
||||
|
||||
## Create a docs version
|
||||
|
||||
Release a version 1.0 of your project:
|
||||
|
||||
```bash
|
||||
npm run docusaurus docs:version 1.0
|
||||
```
|
||||
|
||||
The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
|
||||
|
||||
Your docs now have 2 versions:
|
||||
|
||||
- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
|
||||
- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
|
||||
|
||||
## Add a Version Dropdown
|
||||
|
||||
To navigate seamlessly across versions, add a version dropdown.
|
||||
|
||||
Modify the `docusaurus.config.js` file:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
export default {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'docsVersionDropdown',
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The docs version dropdown appears in your navbar:
|
||||
|
||||

|
||||
|
||||
## Update an existing version
|
||||
|
||||
It is possible to edit versioned docs in their respective folder:
|
||||
|
||||
- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
|
||||
- `docs/hello.md` updates `http://localhost:3000/docs/next/hello`
|
||||
@@ -1,88 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Translate your site
|
||||
|
||||
Let's translate `docs/intro.md` to French.
|
||||
|
||||
## Configure i18n
|
||||
|
||||
Modify `docusaurus.config.js` to add support for the `fr` locale:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
export default {
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'fr'],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Translate a doc
|
||||
|
||||
Copy the `docs/intro.md` file to the `i18n/fr` folder:
|
||||
|
||||
```bash
|
||||
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
|
||||
|
||||
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
|
||||
```
|
||||
|
||||
Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
|
||||
|
||||
## Start your localized site
|
||||
|
||||
Start your site on the French locale:
|
||||
|
||||
```bash
|
||||
npm run start -- --locale fr
|
||||
```
|
||||
|
||||
Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.
|
||||
|
||||
:::caution
|
||||
|
||||
In development, you can only use one locale at a time.
|
||||
|
||||
:::
|
||||
|
||||
## Add a Locale Dropdown
|
||||
|
||||
To navigate seamlessly across languages, add a locale dropdown.
|
||||
|
||||
Modify the `docusaurus.config.js` file:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
export default {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'localeDropdown',
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The locale dropdown now appears in your navbar:
|
||||
|
||||

|
||||
|
||||
## Build your localized site
|
||||
|
||||
Build your site for a specific locale:
|
||||
|
||||
```bash
|
||||
npm run build -- --locale fr
|
||||
```
|
||||
|
||||
Or build your site to include all the locales at once:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
@@ -1,64 +1,56 @@
|
||||
import {themes as prismThemes} from 'prism-react-renderer';
|
||||
import type {Config} from '@docusaurus/types';
|
||||
import type * as Preset from '@docusaurus/preset-classic';
|
||||
import { themes as prismThemes } from "prism-react-renderer";
|
||||
import type { Config } from "@docusaurus/types";
|
||||
import type * as Preset from "@docusaurus/preset-classic";
|
||||
|
||||
// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
|
||||
|
||||
const config: Config = {
|
||||
title: 'My Site',
|
||||
tagline: 'Dinosaurs are cool',
|
||||
favicon: 'img/favicon.ico',
|
||||
title: "Drop",
|
||||
tagline: "An open Steam.",
|
||||
favicon: "/drop.svg",
|
||||
|
||||
// Set the production url of your site here
|
||||
url: 'https://your-docusaurus-site.example.com',
|
||||
url: "https://wiki.droposs.org",
|
||||
// Set the /<baseUrl>/ pathname under which your site is served
|
||||
// For GitHub pages deployment, it is often '/<projectName>/'
|
||||
baseUrl: '/',
|
||||
baseUrl: "/",
|
||||
|
||||
// GitHub pages deployment config.
|
||||
// If you aren't using GitHub pages, you don't need these.
|
||||
organizationName: 'facebook', // Usually your GitHub org/user name.
|
||||
projectName: 'docusaurus', // Usually your repo name.
|
||||
organizationName: "Drop-OSS", // Usually your GitHub org/user name.
|
||||
projectName: "drop-docs", // Usually your repo name.
|
||||
|
||||
onBrokenLinks: 'throw',
|
||||
onBrokenMarkdownLinks: 'warn',
|
||||
onBrokenLinks: "throw",
|
||||
onBrokenMarkdownLinks: "warn",
|
||||
|
||||
// Even if you don't use internationalization, you can use this field to set
|
||||
// useful metadata like html lang. For example, if your site is Chinese, you
|
||||
// may want to replace "en" with "zh-Hans".
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en'],
|
||||
defaultLocale: "en",
|
||||
locales: ["en"],
|
||||
},
|
||||
|
||||
presets: [
|
||||
[
|
||||
'classic',
|
||||
"classic",
|
||||
{
|
||||
docs: {
|
||||
sidebarPath: './sidebars.ts',
|
||||
// Please change this to your repo.
|
||||
// Remove this to remove the "edit this page" links.
|
||||
editUrl:
|
||||
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
|
||||
sidebarPath: "./sidebars.ts",
|
||||
},
|
||||
blog: {
|
||||
showReadingTime: true,
|
||||
feedOptions: {
|
||||
type: ['rss', 'atom'],
|
||||
type: ["rss", "atom"],
|
||||
xslt: true,
|
||||
},
|
||||
// Please change this to your repo.
|
||||
// Remove this to remove the "edit this page" links.
|
||||
editUrl:
|
||||
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
|
||||
// Useful options to enforce blogging best practices
|
||||
onInlineTags: 'warn',
|
||||
onInlineAuthors: 'warn',
|
||||
onUntruncatedBlogPosts: 'warn',
|
||||
onInlineTags: "warn",
|
||||
onInlineAuthors: "warn",
|
||||
onUntruncatedBlogPosts: "warn",
|
||||
},
|
||||
theme: {
|
||||
customCss: './src/css/custom.css',
|
||||
customCss: "./src/css/custom.css",
|
||||
},
|
||||
} satisfies Preset.Options,
|
||||
],
|
||||
@@ -66,72 +58,72 @@ const config: Config = {
|
||||
|
||||
themeConfig: {
|
||||
// Replace with your project's social card
|
||||
image: 'img/docusaurus-social-card.jpg',
|
||||
image: "img/docusaurus-social-card.jpg",
|
||||
navbar: {
|
||||
title: 'My Site',
|
||||
title: "Drop",
|
||||
logo: {
|
||||
alt: 'My Site Logo',
|
||||
src: 'img/logo.svg',
|
||||
alt: "Drop icon",
|
||||
src: "drop.svg",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'docSidebar',
|
||||
sidebarId: 'tutorialSidebar',
|
||||
position: 'left',
|
||||
label: 'Tutorial',
|
||||
type: "docSidebar",
|
||||
sidebarId: "defaultSidebar",
|
||||
position: "left",
|
||||
label: "Documentation",
|
||||
},
|
||||
{to: '/blog', label: 'Blog', position: 'left'},
|
||||
{ to: "/blog", label: "Blog", position: "left" },
|
||||
{
|
||||
href: 'https://github.com/facebook/docusaurus',
|
||||
label: 'GitHub',
|
||||
position: 'right',
|
||||
href: "https://github.com/Drop-OSS",
|
||||
label: "GitHub",
|
||||
position: "right",
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
style: 'dark',
|
||||
style: "dark",
|
||||
links: [
|
||||
{
|
||||
title: 'Docs',
|
||||
title: "Docs",
|
||||
items: [
|
||||
{
|
||||
label: 'Tutorial',
|
||||
to: '/docs/intro',
|
||||
label: "Tutorial",
|
||||
to: "/docs/intro",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Community',
|
||||
title: "Community",
|
||||
items: [
|
||||
{
|
||||
label: 'Stack Overflow',
|
||||
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
|
||||
label: "Stack Overflow",
|
||||
href: "https://stackoverflow.com/questions/tagged/docusaurus",
|
||||
},
|
||||
{
|
||||
label: 'Discord',
|
||||
href: 'https://discordapp.com/invite/docusaurus',
|
||||
label: "Discord",
|
||||
href: "https://discordapp.com/invite/docusaurus",
|
||||
},
|
||||
{
|
||||
label: 'X',
|
||||
href: 'https://x.com/docusaurus',
|
||||
label: "X",
|
||||
href: "https://x.com/docusaurus",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'More',
|
||||
title: "More",
|
||||
items: [
|
||||
{
|
||||
label: 'Blog',
|
||||
to: '/blog',
|
||||
label: "Blog",
|
||||
to: "/blog",
|
||||
},
|
||||
{
|
||||
label: 'GitHub',
|
||||
href: 'https://github.com/facebook/docusaurus',
|
||||
label: "GitHub",
|
||||
href: "https://github.com/facebook/docusaurus",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
|
||||
copyright: `Licensed under GPL-3.0-or-later. Built by the Drop OSS project.`,
|
||||
},
|
||||
prism: {
|
||||
theme: prismThemes.github,
|
||||
|
||||
35
sidebars.ts
35
sidebars.ts
@@ -1,4 +1,4 @@
|
||||
import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
|
||||
import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
|
||||
|
||||
// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
|
||||
|
||||
@@ -14,7 +14,38 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
|
||||
*/
|
||||
const sidebars: SidebarsConfig = {
|
||||
// By default, Docusaurus generates a sidebar from the docs folder structure
|
||||
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
|
||||
defaultSidebar: [
|
||||
{
|
||||
type: "category",
|
||||
label: "Admin Guides",
|
||||
items: [
|
||||
"guides/quickstart",
|
||||
"guides/exposing",
|
||||
"guides/create-admin-account",
|
||||
"guides/server-troubleshooting",
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "User Guides",
|
||||
items: ["guides/client", "guides/client-troubleshooting"],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Metadata",
|
||||
items: ["metadata/giantbomb", "metadata/igdb", "metadata/pcgamingwiki"],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Advanced",
|
||||
items: ["advanced/building"],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Documentation",
|
||||
items: ["library"],
|
||||
},
|
||||
],
|
||||
|
||||
// But you can create a sidebar manually
|
||||
/*
|
||||
|
||||
@@ -6,25 +6,27 @@
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #2e8555;
|
||||
--ifm-color-primary-dark: #29784c;
|
||||
--ifm-color-primary-darker: #277148;
|
||||
--ifm-color-primary-darkest: #205d3b;
|
||||
--ifm-color-primary-light: #33925d;
|
||||
--ifm-color-primary-lighter: #359962;
|
||||
--ifm-color-primary-lightest: #3cad6e;
|
||||
--ifm-color-primary: oklch(54.6% 0.245 262.881);
|
||||
--ifm-color-primary-dark: oklch(48.8% 0.243 264.376);
|
||||
--ifm-color-primary-darker: oklch(42.4% 0.199 265.638);
|
||||
--ifm-color-primary-darkest: oklch(37.9% 0.146 265.522);
|
||||
--ifm-color-primary-light: oklch(62.3% 0.214 259.815);
|
||||
--ifm-color-primary-lighter: oklch(80.9% 0.105 251.813);
|
||||
--ifm-color-primary-lightest: oklch(88.2% 0.059 254.128);
|
||||
--ifm-code-font-size: 95%;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||
|
||||
[data-theme='dark'] {
|
||||
--ifm-color-primary: #25c2a0;
|
||||
--ifm-color-primary-dark: #21af90;
|
||||
--ifm-color-primary-darker: #1fa588;
|
||||
--ifm-color-primary-darkest: #1a8870;
|
||||
--ifm-color-primary-light: #29d5b0;
|
||||
--ifm-color-primary-lighter: #32d8b4;
|
||||
--ifm-color-primary-lightest: #4fddbf;
|
||||
--ifm-color-primary: oklch(62.3% 0.214 259.815);
|
||||
--ifm-color-primary-dark: oklch(54.6% 0.245 262.881);
|
||||
--ifm-color-primary-darker: oklch(48.8% 0.243 264.376);
|
||||
--ifm-color-primary-darkest: oklch(42.4% 0.199 265.638);
|
||||
--ifm-color-primary-light: oklch(80.9% 0.105 251.813);
|
||||
--ifm-color-primary-lighter: oklch(90.1% 0.058 230.902);
|
||||
--ifm-color-primary-lightest: oklch(93.2% 0.032 255.585);
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,27 +1,28 @@
|
||||
import type {ReactNode} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import Layout from '@theme/Layout';
|
||||
import HomepageFeatures from '@site/src/components/HomepageFeatures';
|
||||
import Heading from '@theme/Heading';
|
||||
import type { ReactNode } from "react";
|
||||
import clsx from "clsx";
|
||||
import Link from "@docusaurus/Link";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import Layout from "@theme/Layout";
|
||||
import HomepageFeatures from "@site/src/components/HomepageFeatures";
|
||||
import Heading from "@theme/Heading";
|
||||
|
||||
import styles from './index.module.css';
|
||||
import styles from "./index.module.css";
|
||||
|
||||
function HomepageHeader() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
return (
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||||
<header className={clsx("hero", styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<Heading as="h1" className="hero__title">
|
||||
{siteConfig.title}
|
||||
Drop OSS
|
||||
</Heading>
|
||||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className="button button--secondary button--lg"
|
||||
to="/docs/intro">
|
||||
Docusaurus Tutorial - 5min ⏱️
|
||||
to="/docs/guides/quickstart"
|
||||
>
|
||||
Get started →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,11 +31,12 @@ function HomepageHeader() {
|
||||
}
|
||||
|
||||
export default function Home(): ReactNode {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title={`Hello from ${siteConfig.title}`}
|
||||
description="Description will go into a meta tag in <head />">
|
||||
title={`Drop OSS - An open Steam`}
|
||||
description=" Drop is an open-source, self-hosted game distribution platform, creating a Steam-like experience for DRM-free games. "
|
||||
>
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
<HomepageFeatures />
|
||||
|
||||
5
static/drop.svg
Normal file
5
static/drop.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
|
||||
stroke="#60a5fa" stroke-width="2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 440 B |
Reference in New Issue
Block a user