initial commit

This commit is contained in:
DecDuck
2025-05-08 12:03:17 +10:00
parent baf9a8d289
commit 8bbe7d2c42
34 changed files with 500 additions and 635 deletions

33
docs/about.md Normal file
View 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
View 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
```

View 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
View 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.

View 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
View 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
View 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.

View File

@@ -0,0 +1 @@
# Troubleshooting

24
docs/index.md Normal file
View 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!
---

View File

@@ -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
View 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.

View 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
View 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.

View 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
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

53
docs/roadmap.md Normal file
View 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.

View File

@@ -1,8 +0,0 @@
{
"label": "Tutorial - Basics",
"position": 2,
"link": {
"type": "generated-index",
"description": "5 minutes to learn the most important Docusaurus concepts."
}
}

View File

@@ -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)

View File

@@ -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).

View File

@@ -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'],
},
],
};
```

View File

@@ -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).

View File

@@ -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)**).

View File

@@ -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
![Docusaurus logo](/img/docusaurus.png)
```
![Docusaurus logo](/img/docusaurus.png)
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
![Docusaurus logo](./img/docusaurus.png)
```
## 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> !

View File

@@ -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

View File

@@ -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:
![Docs Version Dropdown](./img/docsVersionDropdown.png)
## 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`

View File

@@ -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:
![Locale Dropdown](./img/localeDropdown.png)
## 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
```

View File

@@ -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,

View File

@@ -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
/*

View File

@@ -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);
}

View File

@@ -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 &rarr;
</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
View 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