diff --git a/.vitepress/config.mts b/.vitepress/config.mts index 874d71b..9ce80b7 100644 --- a/.vitepress/config.mts +++ b/.vitepress/config.mts @@ -1,23 +1,38 @@ import { defineConfig } from "vitepress"; +import ptLocale from "../pt/config" // https://vitepress.dev/reference/site-config export default defineConfig({ title: "Hydra Docs", description: "Technical documentation for Hydra Launcher", + + rewrites: { + "en/:rest*": ":rest*", + }, + + locales: { + root: { + label: "English", + lang: "en-US", + dir: "ltr", + }, + pt: ptLocale + }, + themeConfig: { // https://vitepress.dev/reference/default-theme-config sidebar: [ { text: "Introduction", - items: [{ text: "What is Hydra Launcher?", link: "/" }], + items: [{ text: "What is Hydra Launcher?", link: "/index.md" }], }, { text: "Guides", items: [ - { text: "Getting started", link: "/getting-started" }, - { text: "Download sources", link: "/download-sources" }, - { text: "Custom themes", link: "/themes" }, + { text: "Getting started", link: "/getting-started.md" }, + { text: "Download sources", link: "/download-sources.md" }, + { text: "Custom themes", link: "/themes.md" }, ], }, ], diff --git a/download-sources.md b/en/download-sources.md similarity index 100% rename from download-sources.md rename to en/download-sources.md diff --git a/getting-started.md b/en/getting-started.md similarity index 100% rename from getting-started.md rename to en/getting-started.md diff --git a/index.md b/en/index.md similarity index 93% rename from index.md rename to en/index.md index 37e3844..98c2126 100644 --- a/index.md +++ b/en/index.md @@ -1,6 +1,6 @@ # What is Hydra Launcher? -![Hydra Launcher](./images/hydra.png) +![Hydra Launcher](../images/hydra.png) Hydra Launcher is an open-source gaming platform created to be the single tool that you need in order to manage your gaming library. Hydra is written in Node.js (Electron, React, Typescript) and Python. diff --git a/themes.md b/en/themes.md similarity index 88% rename from themes.md rename to en/themes.md index 0ca8e86..d3301fb 100644 --- a/themes.md +++ b/en/themes.md @@ -10,30 +10,30 @@ Hydra lets you add custom themes allowing you to make it looks the way you want. Themes are available in our [Themes Store](https://hydrathemes.shop/). You can easily install one theme by just clicking the "Install Theme" button. -![Hydra Themes Shop Screenshot](images/theme-shop.png) +![Hydra Themes Shop Screenshot](../images/theme-shop.png) ## How to create a custom theme Go to the Appearance tab in the Settings page and click on the "Create" button. -![Hydra Launcher Settings page](images/settings-page.png) +![Hydra Launcher Settings page](../images/settings-page.png) Pick a name for your theme -![Hydra create theme modal](images/create-theme-modal.png) +![Hydra create theme modal](../images/create-theme-modal.png) Click on Set theme to make this your current active theme -![Hydra Appearance tab with active theme](images/activate-theme.png) +![Hydra Appearance tab with active theme](../images/activate-theme.png) Click on the Edit button to start working on it -![Hydra Appearance tab with active theme](images/theme-edit-button.png) +![Hydra Appearance tab with active theme](../images/theme-edit-button.png) Two windows will open. One is the theme editor, where you will write the CSS for your custom theme, achievements and select a custom achievement sound. The other one is the Dev Tools for the main window, where you will be able to debug and see all the current HTML and CSS to help you write your theme -![Hydra Theme editor](images/theme-editor-empty.png) +![Hydra Theme editor](../images/theme-editor-empty.png) -And now you can make your Hydra Launcher looks however you want. +And now you can make your Hydra Launcher looks however you want. You can also add a custom achievement sound to your theme. The sound file should be placed in your theme folder and must be named `achievement` with one of the following extensions: `mp3`, `ogg`, `wav`, or `m4a`. This sound will play when achievements are unlocked. @@ -84,7 +84,7 @@ body { } ``` -![Hydra Theme editor with a custom theme code](images/theme-editor.png) +![Hydra Theme editor with a custom theme code](../images/theme-editor.png) ## How to publish your custom theme @@ -122,7 +122,7 @@ Things to note: - You must add your friend code to the folder name. Pull Requests that don't have a friend code, or that have a friend code that don't belong to you, will not be accepted. - You must not change any other files that don't belong to your theme. -![Visual Studio code with hydra-theme repository](images/hydra-theme-project.png) +![Visual Studio code with hydra-theme repository](../images/hydra-theme-project.png) ### Commit and Push your theme @@ -137,7 +137,7 @@ Things to note: 3. Click on "Open pull request" 4. Click on "Create pull request" -![Hydra Theme Fork](images/github-fork.png) +![Hydra Theme Fork](../images/github-fork.png) ### Wait for your theme to be reviewed by the mods diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index adbc36b..0e50db7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -307,51 +307,61 @@ packages: resolution: {integrity: sha512-QAg11ZIt6mcmzpNE6JZBpKfJaKkqTm1A9+y9O+frdZJEuhQxiugM05gnCWiANHj4RmbgeVJpTdmKRmH/a+0QbA==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.28.1': resolution: {integrity: sha512-dRP9PEBfolq1dmMcFqbEPSd9VlRuVWEGSmbxVEfiq2cs2jlZAl0YNxFzAQS2OrQmsLBLAATDMb3Z6MFv5vOcXg==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.28.1': resolution: {integrity: sha512-uGr8khxO+CKT4XU8ZUH1TTEUtlktK6Kgtv0+6bIFSeiSlnGJHG1tSFSjm41uQ9sAO/5ULx9mWOz70jYLyv1QkA==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.28.1': resolution: {integrity: sha512-QF54q8MYGAqMLrX2t7tNpi01nvq5RI59UBNx+3+37zoKX5KViPo/gk2QLhsuqok05sSCRluj0D00LzCwBikb0A==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-loongarch64-gnu@4.28.1': resolution: {integrity: sha512-vPul4uodvWvLhRco2w0GcyZcdyBfpfDRgNKU+p35AWEbJ/HPs1tOUrkSueVbBS0RQHAf/A+nNtDpvw95PeVKOA==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-powerpc64le-gnu@4.28.1': resolution: {integrity: sha512-pTnTdBuC2+pt1Rmm2SV7JWRqzhYpEILML4PKODqLz+C7Ou2apEV52h19CR7es+u04KlqplggmN9sqZlekg3R1A==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-gnu@4.28.1': resolution: {integrity: sha512-vWXy1Nfg7TPBSuAncfInmAI/WZDd5vOklyLJDdIRKABcZWojNDY0NJwruY2AcnCLnRJKSaBgf/GiJfauu8cQZA==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-s390x-gnu@4.28.1': resolution: {integrity: sha512-/yqC2Y53oZjb0yz8PVuGOQQNOTwxcizudunl/tFs1aLvObTclTwZ0JhXF2XcPT/zuaymemCDSuuUPXJJyqeDOg==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.28.1': resolution: {integrity: sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.28.1': resolution: {integrity: sha512-xQTDVzSGiMlSshpJCtudbWyRfLaNiVPXt1WgdWTwWz9n0U12cI2ZVtWe/Jgwyv/6wjL7b66uu61Vg0POWVfz4g==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-win32-arm64-msvc@4.28.1': resolution: {integrity: sha512-wSXmDRVupJstFP7elGMgv+2HqXelQhuNf+IS4V+nUpNVi/GUiBgDmfwD0UGN3pcAnWsgKG3I52wMOBnk1VHr/A==} diff --git a/pt/config.ts b/pt/config.ts new file mode 100644 index 0000000..58097f9 --- /dev/null +++ b/pt/config.ts @@ -0,0 +1,43 @@ +export default { + label: "Português", + lang: "pt-BR", + dir: "ltr", + link: "/pt/", + + themeConfig: { + sidebar: [ + { + text: "Introdução", + items: [ + { + text: "O que é Hydra Launcher?", + link: "/pt/index.md", + }, + ], + }, + { + text: "Guias", + items: [ + { text: "Iniciando", link: "/pt/getting-started.md" }, + { + text: "Fontes de download", link: "/pt/download-sources.md", + }, + { text: "Temas customizados", link: "/pt/themes.md" }, + ], + }, + ], + docFooter: { + prev: "Página Anterior", + next: "Próxima Página", + }, + outline: { + label: "Nesta página", + }, + lastUpdated: { + text: "Atualizado em", + }, + darkModeSwitchLabel: "Aparência", + sidebarMenuLabel: "Menu", + returnToTopLabel: "Voltar ao topo", + }, +}; diff --git a/pt/download-sources.md b/pt/download-sources.md new file mode 100644 index 0000000..498e2bc --- /dev/null +++ b/pt/download-sources.md @@ -0,0 +1,37 @@ +# Fontes de download + +::: warning :construction: TRABALHO EM PROGRESSO +Essa página é um trabalho em progresso e ainda não está completa. +::: + +Fontes de download são o componente chave no Hydra. Elas provém um jeito fácil e uma experiência Steam-like para restaurar jogos que você fez backup. + +## Como fontes de download funcionam + +Hydra por padrão não é instalado com nenhuma fonte de download, então você terá que montar uma você mesmo para poder restaurar os arquivos dos jogos dentro do launcher. + +Fontes de download podem ser adicionadas no Hydra Launcher usando uma estrutura de JSON simples que permite que você crie um mapeamento entre os arquivos e titulos dos jogos. Você pode criar e importar quantas fontes de download você quiser. + +::: warning NOTA SOBRE SINCRONIZAÇÃO DE CONTA +Fontes de download não são sincronizadas por conta por questões de privacidade. Se você desinstalar Hydra, todos as fontes de download que você importou serão removidas e você terá que importar elas novamente. +::: + +## Como criar uma fonte de download + +Uma fonte de download JSON tem a seguinte estrutura: + +```json +{ + "name": "string", + "downloads": [ + { + "title": "string", + "fileSize": "string", + "uris": ["string"], + "uploadDate": "string" + } + ] +} +``` + +### Hosters Suportados diff --git a/pt/getting-started.md b/pt/getting-started.md new file mode 100644 index 0000000..27e6974 --- /dev/null +++ b/pt/getting-started.md @@ -0,0 +1,85 @@ +# Iniciando + +## Pré-requisitos + +- [Node.js](https://nodejs.org/en) versão 20 ou mais recente. +- [Python 3.9](https://www.python.org/downloads/release/python-3913/). +- [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable). +- [Git](https://git-scm.com/downloads). + +::: warning ALERTA +Nós altamente recomendamos que tenha certeza que está usando Python 3.9. `libtorrent` é conhecido por ter alguns problemas com versões recentes de Python. +::: + +### Passo adicional para Windows + +Se você está no Windows, você deve instalar [OpenSSL 1.1](https://slproweb.com/download/Win64OpenSSL-1_1_1w.exe) por ser uma dependência do `libtorrent`. + +## Clonando o repositório + +Depois de ter todos os pré-requisitos instalados, você estará pronto para clonar Hydra: + +```bash +git clone https://github.com/hydralauncher/hydra.git +``` + +## Instalando dependências + +Uma vez com o projeto clonado, você precisa instalar as dependências de Python e Node.js para inicializar: + +```bash +cd hydra +yarn # Para instalar as dependências de Node.JS com Yarn +pip install -r requirements.txt # Para instalar as dependências de Python usando Pip +``` + +## Ambientes + +Hydra atualmente conta com servidores em dois tipos diferentes de ambientes: `staging` e `production`. + +`production` é o ambiente que utilizamos para lançamentos de versões do Hydra que são estáveis. +`staging` é o ambiente que utilizamos para testes. No caso pode ser instável para uso, mas é onde novas funcionalidades estarão. + +Você precisa escolher um desses ambientes para inicializar Hydra. + +::: tip NOTA SOBRE CONTAS +A conta dos usuários não são compartilhadas entre ambientes. Isso significa que a conta que for utilizada em `production` não será a mesma que você irá usar em `staging`. +::: + +### Configurando variáveis de ambiente + +Você precisa configurar algumas variáveis em quesito de selecionar qual ambiente se utilizará. Hydra não funcionará sem essa configuração. + +| Nome da Variável | Valor em `production` | Valor em `staging` | +| -------------------------------------- | ----------------------------------------- | ----------------------------------------- | +| `MAIN_VITE_API_URL` | https://hydra-api-us-east-1.losbroxas.org | https://api-staging.hydralauncher.gg | +| `MAIN_VITE_AUTH_URL` | https://auth.hydralauncher.gg | https://auth-staging.hydralauncher.gg | +| `MAIN_VITE_CHECKOUT_URL` | https://checkout.hydralauncher.gg | https://checkout-staging.hydralauncher.gg | +| `MAIN_VITE_EXTERNAL_RESOURCES_URL` | https://assets.hydralauncher.gg | https://assets.hydralauncher.gg | +| `RENDERER_VITE_EXTERNAL_RESOURCES_URL` | https://assets.hydralauncher.gg | https://assets.hydralauncher.gg | +| `MAIN_VITE_WS_URL` | wss://ws.hydralauncher.gg | wss://ws-staging.hydralauncher.gg | + +Escolha um dos ambientes para configurar as variáveis corretamente no arquivo `.env` na raiz do projeto. Veja o exemplo abaixo: + +``` +# Variáveis de ambiente em `production` + +MAIN_VITE_API_URL=https://hydra-api-us-east-1.losbroxas.org +MAIN_VITE_AUTH_URL=https://auth.hydralauncher.gg +MAIN_VITE_CHECKOUT_URL=https://checkout.hydralauncher.gg +MAIN_VITE_EXTERNAL_RESOURCES_URL=https://assets.hydralauncher.gg +RENDERER_VITE_EXTERNAL_RESOURCES_URL=https://assets.hydralauncher.gg +MAIN_VITE_WS_URL=wss://ws.hydralauncher.gg +``` + +### Qual ambiente eu deveria usar? + +Se você está rodando o Hydra na branch `main`, você deveria escolher `production` na maior parte das vezes. Se você está rodando o Hydra em outra branch, será melhor escolher `staging`. + +### Rodando esse projeto + +Uma vez que o projeto esteja configurado, você pode rodar o Hydra seguindo o script abaixo: + +```bash +yarn dev +``` diff --git a/pt/index.md b/pt/index.md new file mode 100644 index 0000000..1f6c3f6 --- /dev/null +++ b/pt/index.md @@ -0,0 +1,14 @@ +# O que é Hydra Launcher? + +![Hydra Launcher](../images/hydra.png) + +O Hydra Launcher é uma plataforma de jogos open-source criada para ser a única ferramenta que você precisa para gerenciar sua biblioteca de jogos. O Hydra é escrito em Node.js (Electron, React, Typescript) e Python. + +O que o Hydra pode fazer: + +- Adicionar jogos que você possui à sua biblioteca +- Ter um perfil bonito que mostra para seus amigos o que você está jogando +- Salvar o progresso dos seus jogos na nuvem com o Hydra Cloud +- Desbloquear conquistas +- Navegar por um catálogo rico com um poderoso algoritmo de sugestões +- Descobrir novos jogos que você ainda não jogou diff --git a/pt/themes.md b/pt/themes.md new file mode 100644 index 0000000..e9ec1e4 --- /dev/null +++ b/pt/themes.md @@ -0,0 +1,146 @@ +# Temas Customizados + +::: warning :construction: TRABALHO EM PROGRESSO +Essa página é um trabalho em progresso e ainda não está completa. +::: + +Hydra permite que você adicione temas customizados para que tenha a aparência que você quiser. + +## Como instalar um tema customizado + +Temas estão disponíveis em nossa [Loja de Temas](https://hydrathemes.shop/). Você pode instalar facilmente um tema apenas clicando no botão "Instalar Tema". + +![Hydra Themes Shop Screenshot](../images/theme-shop.png) + +## Como criar um tema customizado + +Vá na aba Aparência em Configurações e clique no botão "Criar". + +![Hydra Launcher Settings page](../images/settings-page.png) + +Escolha um nome para seu tema +![Hydra create theme modal](../images/create-theme-modal.png) + +Clique em "Habilitar tema" para tornar o atual tema ativo + +![Hydra Appearance tab with active theme](../images/activate-theme.png) + +Clique no botão de Editar para começar a customizar + +![Hydra Appearance tab with active theme](../images/theme-edit-button.png) + +Duas janelas irão abrir. Uma é o editor de tema, onde você irá escrever o CSS para seu tema customizado, conquistas e selecionar um som customizado para uma conquista. A outra janela é o "Dev Tools" da janela principal, onde você será capaz de debugar e ver todo o atual HTML e CSS para ajudar você a desenvolver o tema. + +![Hydra Theme editor](../images/theme-editor-empty.png) + +E agora você pode fazer seu Hydra Launcher parecer do jeito que você quiser. + +Você também pode adicionar um som customizado para uma conquista no seu tema. O arquivo do som deve ser colocado na pasta principal e deve ser nomeado como `achievement` com uma das seguintes extensões: `mp3`, `ogg`, `wav`, ou `m4a`. Esse som será tocado quando um conquista for desbloqueada. + +Por exemplo, esse é o CSS do tema para a próxima screenshot: + +```CSS +.sidebar, +.header, +.container__content, +.bottom-panel { + background: transparent; +} + +body { + color: #9e9e9e; +} + +#root { + background: url(https://preview.redd.it/l5gcq3y6ggk41.png?auto=webp&s=c886c7db543b1ff5b7e68df6bd76f1fb7ee8a6c7) + #000; + background-position: top; + background-repeat: no-repeat; +} + +.text-field-container__text-field--dark, +.text-field-container__text-field--primary, +.header__search, +.game-item, +.settings__content, +.catalogue__filters-container, +.friends-box__box, +.user-stats__box, +.recent-games__box, +.sidebar { + background-color: rgba(0, 0, 0, 0.8) !important; + backdrop-filter: blur(8px); +} + +.container__content .button--outline { + backdrop-filter: blur(8px); + background-color: rgba(0, 0, 0, 0.5); +} + +.settings-download-sources__item, +.download-group__item, +.game-item { + background-color: rgba(0, 0, 0, 0.6) !important; +} +``` + +![Hydra Theme editor with a custom theme code](../images/theme-editor.png) + +## Como publicar seu tema personalizado + +::: warning +Para esse passo, você precisará de um conhecimento básico em [Git](https://git-scm.com/) e [GitHub](https://docs.github.com/en/get-started/start-your-journey/about-github-and-git). +::: + +Para publicar seu tema você precisa abrir uma Pull Request no repositório do "Hydra Themes". + +Para isso, siga os seguintes passos: + +1. Faça um Fork do repositório hydra-themes +2. Crie uma pasta e arquivos para seu tema +3. Faça o Commit e Push para seu tema +4. Abra uma Pull Request +5. Espere seu tema ser revisado pelos moderadores + +### Faça Fork do repositório hydra-themes + +Comece entrando com sua conta do Github, vá para a [página de fork](https://github.com/hydralauncher/hydra-themes/fork) do Hydra Themes + +Faça um fork e então clone o repositório para sua máquina. + +Você pode clonar seu fork com o comando git clone: `git clone https://github.com//hydra-themes.git` + +### Crie uma pasta e arquivos para seu tema + +Agora você precisa criar seu tema dentro do projeto. Aqui você pode abrir o projeto usando "Visual Studio Code", crie uma pasta "My Awesome Theme-\" dentro da pasta "themes" e adicione uma screenshot do tema e o arquivo .css contendo todo o código que você desenvolveu dentro do launcher. + +Coisas importantes: + +- O nome do arquivo da screenshot deve ser `screenshot` e a extensão do arquivo deve ser uma das seguintes opções: `png, webp, jpg, jpeg, avif, heic, heif`. +- A extensão do arquivo css deve ser `.css`. +- Opcionalmente, você pode adicionar um arquivo de som customizado para conquistas. O nome desse arquivo de ser `achievement` e a extensão do arquivo deve ser uma das seguintes opções: `mp3`, `ogg`, `wav`, ou `m4a`. +- Você deve adicionar seu "friend code" ao nome da pasta. Pull Requests que não tenham um "friend code", ou que possuam um "friend code" que não pertencem a você, não irão ser aceitos. +- Você não deve mudar nenhum dos outros arquivos que não pertencem ao seu tema. + +![Visual Studio code with hydra-theme repository](../images/hydra-theme-project.png) + +### Faça o Commit e Push para seu tema + +1. Stage os arquivos do seu tema: `git add .` +2. Commit suas mudanças: `git commit -m 'Creating my theme'` +3. Push suas mudanças: `git push` + +### Abra uma Pull Request + +1. Vá para a página do seu fork +2. Clique em "Contribute" +3. Clique em "Open pull request" +4. Clique em "Create pull request" + +![Hydra Theme Fork](../images/github-fork.png) + +### Espere seu tema ser revisado pelos moderadores + +O time do Hydra irá revisar seu tema e checar se está de acordo com as regras de criação de tema + +Se tudo estiver de acordo, sua Pull Request será aprovada e depois disso, seu tema deve aparecer na loja em questão de minutos!