chore(docs): refactor pages (#1144)

* chore(docs): refactor pages

* fix: links

* fix: broken link

* refactor: post install steps using partials

README.md

@@ -29,12 +29,12 @@
 
 ## Content
 
-- [Official Documentation](https://immich.app/docs/overview/introduction)
+- [Official Documentation](https://immich.app/docs)
 - [Demo](#demo)
 - [Features](#features)
 - [Introduction](https://immich.app/docs/overview/introduction)
-- [Installation](https://immich.app/docs/installation/requirements)
-- [Contribution Guidelines](https://immich.app/docs/contribution-guidelines)
+- [Installation](https://immich.app/docs/install/requirements)
+- [Contribution Guidelines](https://immich.app/docs/overview/support-the-project)
 - [Support The Project](#support-the-project)
 - [Known Issues](#known-issues)
 
@@ -98,4 +98,4 @@ If you feel like this is the right cause and the app is something you are seeing
 
 Symptoms: the container logs `illegal instruction core dump` and restarts
 
-Solution: https://immich.app/docs/installation/requirements#hardware
+Solution: https://immich.app/docs/install/requirements#hardware

README_zh_CN.md

@@ -38,8 +38,8 @@
 - [示例](#示例)
 - [功能特性](#功能特性)
 - [介绍](https://immich.app/docs/overview/introduction)
-- [安装](https://immich.app/docs/installation/requirements)
-- [贡献指南](https://immich.app/docs/contribution-guidelines)
+- [安装](https://immich.app/docs/install/requirements)
+- [贡献指南](https://immich.app/docs/overview/support-the-project)
 - [支持本项目](#support-the-project)
 - [已知问题](#known-issues)
 

docs/docs/FAQ.md

@@ -14,7 +14,7 @@ sidebar_position: 6
 
 ### How can I sync an existing directory with Immich's server?
 
-Immich doesn't have the mechanism to sync an existing directory with the server. There is however, a helper CLI tool to help you bulk upload the existing photos and videos to the server. You can find the guide to use the CLI tool [here](/docs/usage/bulk-upload.md).
+Immich doesn't have the mechanism to sync an existing directory with the server. There is however, a helper CLI tool to help you bulk upload the existing photos and videos to the server. You can find the guide to use the CLI tool [here](/docs/features/bulk-upload.md).
 
 ### Why doesn't Immich watch an existing photo gallery directory?
 
@@ -22,4 +22,4 @@ The initial approach of Immich is to become a backup tool, primarily for mobile
 
 ### How can I reset the admin password?
 
-The admin password can be reset by running the [reset-admin-password](/docs/usage/server-commands) command on the immich-server.
+The admin password can be reset by running the [reset-admin-password](/docs/features/server-commands.md) command on the immich-server.

docs/docs/developer/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Developer",
+  "position": 4
+}

docs/docs/developer/architecture.md

@@ -0,0 +1,39 @@
+---
+sidebar_position: 1
+---
+
+# Architecture
+
+## High Level Diagram
+
+![Immich Architecture](./img/app-architecture.png)
+
+## Technology
+
+Immich is a full-stack [TypeScript](https://www.typescriptlang.org/) application, with a [Flutter](https://flutter.dev/) mobile app.
+
+### Mobile
+
+- [Flutter](https://flutter.dev/)
+- [Riverpod](https://riverpod.dev/) for state management.
+
+### Web
+
+- [SvelteKit](https://kit.svelte.dev/)
+- [tailwindcss](https://tailwindcss.com/)
+
+### Server
+
+- [Node.js](https://nodejs.org/)
+- [Nest.js](https://nestjs.com/)
+- [TypeORM](https://typeorm.io/) for database management.
+- [Jest](https://jestjs.io/) for testing.
+
+### Database
+
+- [PostgreSQL](https://www.postgresql.org/)
+- [Redis](https://redis.io/) for job queuing.
+
+### Web Server
+
+- [NGINX](https://www.nginx.com/) for internal communication between containers and load balancing when scaling.

docs/docs/developer/open-api.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 5
+---
+
+# Open API
+
+Immich uses the [Open API](https://swagger.io/specification/) standard to generate API documentation. To view the published docs see [here](/docs/api).

docs/docs/contribution-guidelines.md → docs/docs/developer/setup.md

@@ -1,10 +1,10 @@
 ---
-sidebar_position: 5
+sidebar_position: 2
 ---
 
-# Contribution guidelines
+# Setup
 
-## Environment setup
+## Environment
 
 ### Server and web app
 
@@ -88,6 +88,7 @@ OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generato
 ```bash
 npm run api:generate # Run from the `server` directory
 ```
+
 You can find the generated client SDK in the `web/src/api` for Typescript SDK and `mobile/openapi` for Dart SDK.
 
 ## Database migrations
@@ -95,9 +96,11 @@ You can find the generated client SDK in the `web/src/api` for Typescript SDK an
 After making any changes in the `server/libs/database/src/entities`, a database migration need to run in order to register the changes in the database. Follow the steps below to create a new migration.
 
 1. Attached to the server container shell.
-2. Run 
+2. Run
+
 ```bash
 npm run typeorm -- migration:generate ./libs/database/src/<migration-name> -d libs/database/src/config/database.config.ts
 ```
+
 3. Check if the migration file makes sense.
 4. Move the migration file to folder `server/libs/database/src/migrations` in your code editor.

docs/docs/features/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Features",
+  "position": 3
+}

docs/docs/usage/automatic-backup.md → docs/docs/features/automatic-backup.md

@@ -2,19 +2,22 @@
 sidebar_position: 2
 ---
 
-
 # Automatic Backup
 
 A guide on how the foreground and background automatic backup works.
 
 <img src={require('./img/background-foreground-backup.png').default} width="50%" title="Foreground&Background Backup" />
 
-On iOS, there is only one option for automatic backup 
-  * [**Foreground backup**](#foreground-backup)
+On iOS, there is only one option for automatic backup
+
+- [Automatic Backup](#automatic-backup)
+  - [Foreground backup](#foreground-backup)
+
+On Android, there are two options for automatic backup
 
-On Android, there are two options for automatic backup 
-  * [**Foreground backup**](#foreground-backup) 
-  * [**Background backup**](#background-backup)
+- [Automatic Backup](#automatic-backup)
+  - [Foreground backup](#foreground-backup)
+  - [Background backup](#background-backup)
 
 ## Foreground backup
 
@@ -22,14 +25,16 @@ If foreground backup is enabled: whenever the app is opened or resumed, it will
 
 ## Background backup
 
-Background backup is only available on Android thanks to the contribution effort of [@zoodyy](https://github.com/zoodyy). 
+Background backup is only available on Android thanks to the contribution effort of [@zoodyy](https://github.com/zoodyy).
 
 If background backup is enabled. The app will periodically check if there are any new photos or videos in the selected album(s) to be uploaded to the cloud. If there are, it will upload them to the cloud in the background.
 
 A native Android notification shows up when the background upload is in progress. You can further customize the notification by going to the app's settings.
 
-:::note 
-* The app must be in the background for the backup worker to start running.
-* It is a well-known problem that some Android models are very strict with battery optimization settings, which can cause a problem with the background worker. Please visit [Don't kill my app](https://dontkillmyapp.com/) for a guide on disabling this setting on your phone. 
-* If you reopen the app and the first page you see is the backup page, the counts will not reflect the background uploaded result. You have to navigate out of the page and come back to see the updated counts.
+:::info Note
+
+- The app must be in the background for the backup worker to start running.
+- It is a well-known problem that some Android models are very strict with battery optimization settings, which can cause a problem with the background worker. Please visit [Don't kill my app](https://dontkillmyapp.com/) for a guide on disabling this setting on your phone.
+- If you reopen the app and the first page you see is the backup page, the counts will not reflect the background uploaded result. You have to navigate out of the page and come back to see the updated counts.
+
 :::

docs/docs/features/mobile-app.mdx

@@ -0,0 +1,37 @@
+---
+sidebar_position: 1
+---
+
+import MobileAppDownload from '../partials/_mobile-app-download.md';
+import MobileAppLogin from '../partials/_mobile-app-login.md';
+import MobileAppBackup from '../partials/_mobile-app-login.md';
+
+# Mobile App
+
+:::tip
+To upload from other devices, try using the [Bulk Upload CLI](/docs/features/bulk-upload.md).
+:::
+
+## Download
+
+<MobileAppDownload />
+
+:::info Beta Program
+The beta release channel allows users to test upcoming changes before they are officially released. To join the channel use the links below.
+
+- Android: Invitation link from [web](https://play.google.com/store/apps/details?id=app.alextran.immich) or from [mobile](https://play.google.com/store/apps/details?id=app.alextran.immich)
+- iOS: [TestFlight invitation link](https://testflight.apple.com/join/1vYsAa8P)
+
+:::
+
+## Login
+
+<MobileAppLogin />
+
+## Backup
+
+<MobileAppBackup />
+
+:::info
+You can enable automatic backup on supported devices. For more information see [Automatic Backup](/docs/features/automatic-backup.md).
+:::

docs/docs/usage/oauth.md → docs/docs/features/oauth.md

@@ -1,10 +1,10 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # OAuth Authentication
 
-This page contains details about using OAuth 2 in Immich.
+This page contains details about using OAuth in Immich.
 
 ## Overview
 

docs/docs/usage/server-commands.md → docs/docs/features/server-commands.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 7
 ---
 
 # Server Commands

docs/docs/features/storage-template.mdx

@@ -0,0 +1,9 @@
+---
+sidebar_position: 5
+---
+
+import StorageTemplate from '../partials/_storage-template.md';
+
+# Storage Template
+
+<StorageTemplate />

docs/docs/features/user-management.mdx

@@ -0,0 +1,22 @@
+---
+sidebar_position: 4
+---
+
+import RegisterAdminUser from '../partials/_register-admin.md';
+import UserCreate from '../partials/_user-create.md';
+
+# User Management
+
+Immich supports multiple users, each with their own library.
+
+## Register the Admin User
+
+<RegisterAdminUser />
+
+## Create a New User
+
+<UserCreate />
+
+## Delete a User
+
+If you need to remove a user from Immich, head to "Administration", where users can be scheduled for deletion. The user account will immediately become disabled and their library and all associated data will be removed after 7 days.

docs/docs/install/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Install",
+  "position": 2
+}

docs/docs/installation/recommended-installation.md → docs/docs/install/docker-compose.md

@@ -2,14 +2,15 @@
 sidebar_position: 3
 ---
 
+# Docker Compose [Recommended]
 
-# Recommended installation
-
-This is the recommended installation method for production use.
+Docker Compose is the recommended method to run Immich in production. Below are the steps to deploy Immich with Docker Compose.
 
 ### Step 1 - Download the required files
 
-From a directory of your choice (e.g. `./immich-app`) run the following commands
+Download [`docker-compose.yml`][compose-file] [`.env.example`][env-file].
+
+From a directory of your choice (e.g. `./immich-app`) run the following commands:
 
 ```bash title="Get docker-compose.yml file"
 wget https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml
@@ -99,9 +100,9 @@ PUBLIC_LOGIN_PAGE_MESSAGE="My Family Photos and Videos Backup Server"
 
 </details>
 
-* Populate custom database information if necessary.
-* Populate `UPLOAD_LOCATION` with your preferred location for storing backup assets.
-* Populate a secret value for `JWT_SECRET`. You can use the command below to generate a secure key:
+- Populate custom database information if necessary.
+- Populate `UPLOAD_LOCATION` with your preferred location for storing backup assets.
+- Populate a secret value for `JWT_SECRET`. You can use the command below to generate a secure key:
 
 ```bash title="Command to generate secure JWT_SECRET key"
 openssl rand -base64 128
@@ -114,5 +115,16 @@ docker-compose up -d # or `docker compose up -d` based on your docker-compose ve
 ```
 
 :::tip
-For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
+For more information on how to use the application, please refer to the [Post Installation](/docs/install/post-install.md) guide.
 :::
+
+### Step 4 - Upgrading
+
+When a new version of Immich is (released)[], the application can be upgraded with the following commands, run in the directory with the `docker-compose.yml` file:
+
+```bash title="Upgrade Immich"
+docker-compose pull && docker-compose up -d # Or `docker compose`
+```
+
+[compose-file]: https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml
+[env-file]: https://raw.githubusercontent.com/immich-app/immich/main/docker/.env.example

docs/docs/installation/portainer-installation.md → docs/docs/install/portainer.md

@@ -50,5 +50,5 @@ openssl rand -base64 128
 
 
 :::tip
-For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
+For more information on how to use the application, please refer to the [Post Installation](/docs/install/post-install.md) guide.
 :::

docs/docs/install/post-install.mdx

@@ -0,0 +1,38 @@
+---
+sidebar_position: 100
+---
+
+import RegisterAdminUser from '../partials/_register-admin.md';
+import UserCreate from '../partials/_user-create.md';
+import StorageTemplate from '../partials/_storage-template.md';
+import MobileAppDownload from '../partials/_mobile-app-download.md';
+import MobileAppLogin from '../partials/_mobile-app-login.md';
+import MobileAppBackup from '../partials/_mobile-app-backup.md';
+
+# Post Install Steps
+
+A list of common steps to take after installing Immich include:
+
+## Step 1 - Register the Admin User
+
+<RegisterAdminUser />
+
+## Step 2 - Create a New User (optional)
+
+<UserCreate />
+
+## Step 3 - Update the Storage Template
+
+<StorageTemplate />
+
+## Step 4 - Download the Mobile App
+
+<MobileAppDownload />
+
+## Step 5 - Login to the Mobile App
+
+<MobileAppLogin />
+
+## Step 6 - Backup Your Library
+
+<MobileAppBackup />

docs/docs/installation/requirements.md → docs/docs/install/requirements.md

@@ -12,7 +12,7 @@ Hardware and software requirements for Immich
 - [Docker Compose](https://docs.docker.com/compose/install/)
 
 :::info Podman
-You can also use Podman to run the application. However, additional configuration might be required on your end.
+You can also use Podman to run the application. However, additional configuration might be required.
 :::
 
 ## Hardware
@@ -45,12 +45,3 @@ https://github.com/bertmelis/immich-machine-learning-no-avx
 
 Otherwise, you can safely remove the `immich-machine-learning` service if you do not intend to use Immich's object detection features. Simply remove or comment out the declaration of the service in your compose file.
 :::
-
-## Installation methods
-
-There are a couple installation methods that you can use to install the application. You can choose the one that suits you the best.
-
-1. [One-step installation (Evaluation only)](/docs/installation/one-step-installation)
-2. **[Docker Compose with manual configuration (Recommended)](/docs/installation/recommended-installation)**
-3. [Portainer](/docs/installation/portainer-installation)
-4. [Unraid (Community contribution)](/docs/installation/unraid-installation)

docs/docs/installation/one-step-installation.md → docs/docs/install/script.md

@@ -2,10 +2,10 @@
 sidebar_position: 2
 ---
 
-# One-step installation
+# Install Script [Experimental]
 
 :::caution
-This method is for evaluation purposes only. It is not recommended for production use. For production usage, please refer to the recommended installation method [here](/docs/installation/recommended-installation).
+This method is experimental and not currently recommended for production use. For production, please refer to installing with [Docker Compose](/docs/install/docker-compose.md).
 :::
 
 In the shell, from a directory of your choice, run the following command:
@@ -25,5 +25,5 @@ The web application will be available at `http://<machine-ip-address>:2283`, and
 The directory which is used to store the library files is `./immich-data` relative to the current directory.
 
 :::tip
-For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
+For common next steps, see [Post Install Steps](/docs/install/post-install.md).
 :::

docs/docs/installation/unraid-installation.md → docs/docs/install/unraid.md

@@ -105,7 +105,7 @@ alt="Go to Docker Tab and visit the address listed next to immich-proxy"
 </details>
 
 :::tip
-For more information on how to use the application once installed, please refer to the [Post Installation](/docs/usage/post-installation) guide.
+For more information on how to use the application once installed, please refer to the [Post Install](/docs/install/post-install.md) guide.
 :::
 
 ## Updating Steps

docs/docs/installation/_category_.json

@@ -1,8 +0,0 @@
-{
-  "label": "Installation",
-  "position": 2,
-  "link": {
-    "type": "generated-index",
-    "description": "Installation methods of Immich"
-  }
-}

docs/docs/mobile-app-beta-program.md

@@ -1,12 +0,0 @@
----
-sidebar_position: 4
----
-
-
-# Mobile app Beta program
-
-Join the beta release channel to test the latest update of the app
-
-You can opt-in to join app beta release channel by following the links below:
-* Android: Invitation link from [web](https://play.google.com/store/apps/details?id=app.alextran.immich) or from [mobile](https://play.google.com/store/apps/details?id=app.alextran.immich)
-* iOS: [TestFlight invitation link](https://testflight.apple.com/join/1vYsAa8P)

docs/docs/overview/_category_.json

@@ -1,8 +1,4 @@
 {
-  "label": "Getting Started",
-  "position": 1,
-  "link": {
-    "type": "generated-index",
-    "description": "Getting to know Immich"
-  }
+  "label": "Overview",
+  "position": 1
 }

docs/docs/overview/help.md

@@ -0,0 +1,16 @@
+---
+sidebar_position: 4
+---
+
+# Help Me!
+
+Running into an issue or have a question? Try the following:
+
+1. Check the [FAQs](/docs/FAQ.md).
+2. Read through the [Release Notes][github-releases].
+3. Search through existing [Github Issues][github-issues].
+4. Open a help ticket on [Discord][discord-link].
+
+[github-issues]: https://github.com/immich-app/immich/releases
+[github-releases]: https://github.com/immich-app/immich/releases
+[discord-link]: https://discord.com/invite/D8JsnBEuKb

docs/docs/overview/introduction.mdx

@@ -4,13 +4,11 @@ sidebar_position: 1
 
 # Introduction
 
-Hello, I am glad you are here.
-
-<p style={{textAlign: 'center'}}>
+<img src={require('./img/feature-panel.png').default} alt='Immich' />
 
-![Introduction Image](https://user-images.githubusercontent.com/27055614/182044984-2ee6d1ed-c4a7-4331-8a4b-64fcde77fe1f.png)
+## Welcome!
 
-</p>
+Hello, I am glad you are here.
 
 My name is Alex. I am an Electrical Engineer by schooling, then turned into a Software Engineer by trade and the pure love of problem solving.
 
@@ -22,4 +20,4 @@ Another motivation that pushed me to deliver my execution of the **_App-Which-Mu
 
 I'm proud to share this creation with you, which values privacy, memories, and the joy of looking back at those moments in an easy-to-use and friendly interface.
 
-If you like the application or it helps you in some way, please consider [supporting](./support-the-project.md) to the project. It will help me to continue to develop and maintain the application.
+If you like the application or it helps you in some way, please consider [supporting](./support-the-project.md) the project. It will help me to continue to develop and maintain the application.

docs/docs/overview/logo-meaning.md → docs/docs/overview/logo.md

@@ -2,11 +2,11 @@
 sidebar_position: 2
 ---
 
-# Logo meaning
+# Logo
 
 Why the colorful flower, you ask?
 
-I really like the Japanese culture, especially the books, history, and food. The current logo is a spin-off of [the Oda clan's symbol](https://en.wikipedia.org/wiki/Oda_clan). 
+I really like the Japanese culture, especially the books, history, and food. The current logo is a spin-off of [the Oda clan's symbol](https://en.wikipedia.org/wiki/Oda_clan).
 
 ![Oda_emblem](https://user-images.githubusercontent.com/27055614/182044504-a5ed33a8-5640-42de-b359-18fdbee9fb90.svg)
 

docs/docs/overview/support-the-project.md

@@ -2,19 +2,26 @@
 sidebar_position: 3
 ---
 
-# Support the project
+# Support The Project
 
-I've committed to this project, and I will not stop. I will keep updating the docs, adding new features, and fixing bugs. But I can't do it alone, so I need your help to give me additional motivation to keep going.
+I am committed to this project, and I will not stop. I will keep updating the docs, adding new features, and fixing bugs. But I can't do it alone, so I need your help to give me additional motivation to keep going.
 
 As our hosts in the [selfhosted.show - In the episode 'The-organization-which-must-not-be-named is a Hostile Actor'](https://selfhosted.show/79?t=1418) said, this is a massive undertaking that the team and I are doing. I would love to someday be able to do this full-time, and I am asking for your help to make that happen.
 
-If you feel like this is the right cause and the app is something you see yourself using for a long time, please consider supporting the project with the options below.
+If you feel like this is the right cause and the app is something you see yourself using for a long time, please consider supporting the project with one of the options below.
 
 ## Donation
 
-* Monthly donation via [GitHub Sponsors](https://github.com/sponsors/alextran1502)
-* One-time donation via [Github Sponsors](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502)
+- Monthly donation via [GitHub Sponsors](https://github.com/sponsors/alextran1502)
+- One-time donation via [Github Sponsors](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502)
 
-## Contribution
+## Contributing
 
-If you are a programmer/developer and the app's [technology stack](./technology-stack.md) is something you are familiar with, please consider contributing to the project. The team and I are always looking for new contributors. You can refer to the [contribution guildelines](/docs/contribution-guidelines) to start leaving your mark on the project. 
+There are lots of non-monetary ways to contribute to Immich as well.
+
+1. Testing - Using Immich and reporting bugs is a great way to help support the project. Found a bug? [Open an issue on Github][github-issue].
+1. Translations - The Immich mobile app has been translated into [17 languages][github-langs] so far! To contribute with translations, email me at alex.tran1502@gmail.com or send me a message on discord.
+1. Development - If you are a programmer or developer, take a look at Immich's [technology stack](/docs/developer/architecture.md) and consider fixing bugs or building new features. The team and I are always looking for new contributors. For information about how to contribute as a developer, see the [Developer](/docs/developer/architecture.md) section.
+
+[github-issue]: https://github.com/immich-app/immich/issues/new/choose
+[github-langs]: https://github.com/immich-app/immich/tree/main/mobile/assets/i18n

docs/docs/overview/technology-stack.md

@@ -1,23 +0,0 @@
----
-sidebar_position: 4
----
-
-# Technology stack
-
-The app is built with the following technologies:
-
-## Frontend
-* [Flutter](https://flutter.dev/) for the mobile app
-  * [Riverpod](https://riverpod.dev/) as state management.
-* [SvelteKit](https://kit.svelte.dev/) for the Web.
-
-## Backend
-* [Nest.js](https://nestjs.com/) for the server.
-  * [TypeORM](https://typeorm.io/) for database management.
-* [PostgreSQL](https://www.postgresql.org/) for the database.
-* [Redis](https://redis.io/) for communication between the core server and the microservices.
-* [NGINX](https://www.nginx.com/) for internal communication between containers and load balancing when scaling.
-
-## High level architecture
-
-![Immich Architecture](./img/app-architecture.png)

docs/docs/partials/_mobile-app-backup.md

@@ -0,0 +1,9 @@
+Navigate to the backup screen by clicking on the cloud icon in the top right corner of the screen.
+
+<img src={require('./img/backup-header.png').default} width='50%' title='Backup button' />
+
+You can select which album(s) you want to back up to the Immich server from the backup screen.
+
+<img src={require('./img/album-selection.png').default} width='50%' title='Backup button' />
+
+Scroll down to the bottom and press "**Start Backup**" to start the backup process.

docs/docs/partials/_mobile-app-download.md

@@ -0,0 +1,6 @@
+The mobile app can be downloaded from the following places:
+
+- [Google Play Store](https://play.google.com/store/apps/details?id=app.alextran.immich)
+- [Apple App Store](https://apps.apple.com/us/app/immich/id1613945652)
+- [F-Droid](https://f-droid.org/packages/app.alextran.immich)
+- [Github Releases (apk)](https://github.com/immich-app/immich/releases)

docs/docs/partials/_mobile-app-login.md

@@ -0,0 +1,3 @@
+Login to the mobile app with the server endpoint URL at `http://<machine-ip-address>:2283/api`
+
+<img src={require('./img/sign-in-phone.jpeg').default} width='50%' title='Mobile App Sign In' />

docs/docs/partials/_register-admin.md

@@ -0,0 +1,7 @@
+The first user to register will be the admin user. The admin user will be able to add other users to the application.
+
+To register for the admin user, access the web application at `http://<machine-ip-address>:2283` and click on the **Getting Started** button.
+
+<img src={require('./img/admin-registration-form.png').default} width="500" title="Admin Registration" />
+
+Follow the prompts to register as the admin user and log in to the application.

docs/docs/partials/_storage-template.md

@@ -0,0 +1,11 @@
+Immich allows the admin user to set the pattern of how the files are uploaded to the Immich would look like. Both in the directory and the filename level.
+
+The admin user can set the template by using the template builder in the `Administration -> Settings -> Storage Template`. Immich provides a set of variables that you can use in constructing the template, along with additional custom text.
+
+```bash title="Default template"
+Year/Year-Month-Day/Filename.Extension
+```
+
+<img src={require('./img/storage-template.png').default} width="100%" title="Storage Template Setting" />
+
+Immich also provides a mechanism to migrate between template so that if the template you set now doesn't work in the future, you can always migrate all the existing files to the new template. The mechanism is run as a job in the Job page.

docs/docs/partials/_user-create.md

@@ -0,0 +1,3 @@
+If you have friends or family members who want to use the application as well, you can create addition accounts. The default password is `password`, and the user can change their password after logging in to the application for the first time.
+
+<img src={require('./img/create-new-user.png').default} title='Admin Registration' />

docs/docs/usage/_category_.json

@@ -1,8 +0,0 @@
-{
-  "label": "Usage",
-  "position": 3,
-  "link": {
-    "type": "generated-index",
-    "description": "Quick start on how to use the app on mobile and the web"
-  }
-}

docs/docs/usage/post-installation.md

@@ -1,72 +0,0 @@
----
-sidebar_position: 1
----
-
-# Post Installation
-
-This page contains information about what to do after you have installed the application.
-
-## Step 1 - Download the mobile app
-
-The mobile app can be downloaded from
-
-- [Google Play Store](https://play.google.com/store/apps/details?id=app.alextran.immich)
-- [Apple App Store](https://apps.apple.com/us/app/immich/id1613945652)
-- [F-Droid](https://f-droid.org/packages/app.alextran.immich)
-
-## Step 2 - Register the admin user
-
-The first user to register will be the admin user. The admin user will be able to add other users to the application.
-
-To register for the admin user, access the web application at `http://<machine-ip-address>:2283` and click on the **Getting Started** button.
-
-<img src={require('./img/admin-registration-form.png').default} width="500" title="Admin Registration" />
-
-Follow the prompts to register as the admin user and log in to the application.
-
-## Step 3 - Create a new user (optional)
-
-If you have a family member who wants to use the application, you can create a new account. The default password is `password`, and the user can change their password after logging in to the application for the first time.
-
-<img src={require('./img/create-new-user.png').default} title="Admin Registration" />
-
-
-## Step 4 - Set storage template (optional)
-
-Immich allows the admin user to set the pattern of how the files are uploaded to the Immich would look like. Both in the directory and the filename level.
-
-The admin user can set the template by using the template builder in the `Administration -> Settings -> Storage Template`. Immich provides a set of variables that you can use in construting the template, along with additional custom text. 
-
-```bash title="Default template"
-Year/Year-Month-Day/Filename.Extension
-```
-
-<img src={require('./img/storage-template.png').default} width="100%" title="Storage Template Setting" />
-
-Immich also provides a mechanism to migrate between template so that if the template you set now doesn't work in the future, you can always migrate all the existing files to the new template. The mechanism is run as a job in the Job page.
-
-## Step 5 - Access the mobile app
-
-Login to the mobile app with the server endpoint URL at `http://<machine-ip-address>:2283/api`
-
-<img src={require('./img/sign-in-phone.jpeg').default} width="50%" title="Mobile App Sign In" />
-
-## Step 6 - Back up your photos and videos
-
-Navigate to the backup screen by clicking on the cloud icon in the top right corner of the screen.
-
-<img src={require('./img/backup-header.png').default} width="50%" title="Backup button" />
-
-You can select which album(s) you want to back up to the Immich server from the backup screen.
-
-<img src={require('./img/album-selection.png').default} width="50%" title="Backup button" />
-
-Scroll down to the bottom and press "**Start Backup**" to start the backup process. 
-
-You can also enable auto foreground or background backup (only on Android). For more information about the app mechanism, please visit the next pages.
-
-
-:::tip Application Mechanism
-#### [Foreground and background backup](/docs/usage/automatic-backup)
-#### [Bulk upload (using the CLI)](/docs/usage/bulk-upload)
-:::

docs/docs/usage/update.md

@@ -1,11 +0,0 @@
----
-sidebar_position: 4
----
-
-# Update the application
-
-If you are using Docker Compose, update the application use the following commands in the directory where the `docker-compose.yml` file is located:
-
-```bash title="Update Immich"
-docker-compose pull && docker-compose up -d # Or `docker compose`
-```

docs/docusaurus.config.js

@@ -1,57 +1,56 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "Immich",
-  tagline:
-    "High performance self-hosted photo and video backup solution directly from your mobile phone",
-  url: "https://documentation.immich.app",
-  baseUrl: "/",
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.png",
+  title: 'Immich',
+  tagline: 'High performance self-hosted photo and video backup solution directly from your mobile phone',
+  url: 'https://documentation.immich.app',
+  baseUrl: '/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'img/favicon.png',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: "immich-app", // Usually your GitHub org/user name.
-  projectName: "immich", // Usually your repo name.
-  deploymentBranch: "main",
+  organizationName: 'immich-app', // Usually your GitHub org/user name.
+  projectName: 'immich', // Usually your repo name.
+  deploymentBranch: 'main',
   // Even if you don't use internalization, 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: [
     [
-      "docusaurus-preset-openapi",
+      'docusaurus-preset-openapi',
       /** @type {import('docusaurus-preset-openapi').Options} */
       ({
         docs: {
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
 
-          sidebarPath: require.resolve("./sidebars.js"),
+          sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
+          editUrl: 'https://github.com/immich-app/immich/tree/main/docs/',
         },
         api: {
-          path: "../server/immich-openapi-specs.json",
-          routeBasePath: "/docs/api"
+          path: '../server/immich-openapi-specs.json',
+          routeBasePath: '/docs/api',
         },
         // blog: {
         //   showReadingTime: true,
         //   editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
         // },
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: require.resolve('./src/css/custom.css'),
         },
       }),
     ],
@@ -61,10 +60,10 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       announcementBar: {
-        id: "site_announcement_immich",
+        id: 'site_announcement_immich',
         content: `⚠️ The project is under <strong>very active</strong> development. Expect bugs and changes. Do not use it as <strong>the only way</strong> to store your photos and videos!`,
-        backgroundColor: "#593f00",
-        textColor: "#ffefc9",
+        backgroundColor: '#593f00',
+        textColor: '#ffefc9',
         isCloseable: false,
       },
       docs: {
@@ -74,64 +73,68 @@ const config = {
       },
       navbar: {
         logo: {
-          alt: "Immich University Logo",
-          src: "img/color-logo.png",
-          srcDark: "img/logo.png",
+          alt: 'Immich University Logo',
+          src: 'img/color-logo.png',
+          srcDark: 'img/logo.png',
         },
         items: [
           {
-            to: "/docs/overview/introduction",
-            position: "right",
-            label: "Documentation",
+            to: '/docs/overview/introduction',
+            position: 'right',
+            label: 'Docs',
           },
           {
-            to: "/docs/api",
-            position: "right",
-            label: "API"
+            to: '/docs/api',
+            position: 'right',
+            label: 'API',
           },
-          { to: "/blog", label: "Blog", position: "right" },
           {
-            href: "https://github.com/immich-app/immich",
-            label: "GitHub",
-            position: "right",
+            to: '/blog',
+            position: 'right',
+            label: 'Blog',
+          },
+          {
+            href: 'https://github.com/immich-app/immich',
+            label: 'GitHub',
+            position: 'right',
           },
         ],
       },
       footer: {
-        style: "light",
+        style: 'light',
         links: [
           {
-            title: "Overview",
+            title: 'Overview',
             items: [
               {
-                label: "Welcome",
-                to: "/docs/overview/introduction",
+                label: 'Welcome',
+                to: '/docs/overview/introduction',
               },
               {
-                label: "Installation",
-                to: "/docs/installation/requirements",
+                label: 'Installation',
+                to: '/docs/install/requirements',
               },
             ],
           },
           {
-            title: "Community",
+            title: 'Community',
             items: [
               {
-                label: "Discord",
-                href: "https://discord.com/invite/D8JsnBEuKb",
+                label: 'Discord',
+                href: 'https://discord.com/invite/D8JsnBEuKb',
               },
             ],
           },
           {
-            title: "More",
+            title: 'More',
             items: [
               {
-                label: "Blog",
-                to: "/blog",
+                label: 'Blog',
+                to: '/blog',
               },
               {
-                label: "GitHub",
-                href: "https://github.com/immich-app/immich",
+                label: 'GitHub',
+                href: 'https://github.com/immich-app/immich',
               },
             ],
           },
@@ -142,6 +145,7 @@ const config = {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
       },
+      image: 'overview/img/feature-panel.png',
     }),
 };
 

docs/src/pages/index.tsx

@@ -35,7 +35,7 @@ function HomepageHeader() {
           <div className={styles.buttons}>
             <Link
               className={clsx("button button--lg", styles.installButton)}
-              to="docs/installation/requirements"
+              to="docs/install/requirements"
             >
               Installation
             </Link>

docs/vercel.json

@@ -0,0 +1,21 @@
+{
+  "redirects": [
+    { "source": "/docs", "destination": "/docs/overview/introduction" },
+    { "source": "/docs/mobile-app-beta-program", "destination": "/docs/features/mobile-app" },
+    { "source": "/docs/contribution-guidelines", "destination": "/docs/overview/support-the-project#contributing" },
+    { "source": "/docs/install", "destination": "/docs/install/docker-compose" },
+    { "source": "/docs/installation/one-step-installation", "destination": "/docs/install/script" },
+    { "source": "/docs/installation/portainer-installation", "destination": "/docs/install/portainer" },
+    { "source": "/docs/installation/recommended-installation", "destination": "/docs/install/docker-compose" },
+    { "source": "/docs/installation/unraid", "destination": "/docs/install/unraid" },
+    { "source": "/docs/installation/requirements", "destination": "/docs/install/requirements" },
+    { "source": "/docs/overview/logo-meaning", "destination": "/docs/overview/logo" },
+    { "source": "/docs/overview/technology-stack", "destination": "/docs/developer/architecture" },
+    { "source": "/docs/usage/automatic-backup", "destination": "/docs/features/automatic-backup" },
+    { "source": "/docs/usage/bulk-upload", "destination": "/docs/features/bulk-upload" },
+    { "source": "/docs/usage/oauth", "destination": "/docs/features/oauth" },
+    { "source": "/docs/usage/post-installation", "destination": "/docs/install/post-install" },
+    { "source": "/docs/usage/update", "destination": "/docs/install/docker-compose#step-4---upgrading" },
+    { "source": "/docs/usage/server-commands", "destination": "/docs/features/server-commands" }
+  ]
+}

web/src/lib/utils/file-uploader.ts

@@ -46,7 +46,7 @@ export const openFileUploadDialog = (uploadType: UploadType) => {
 					message: `Cannot upload more than 50 files at a time - you are uploading ${files.length} files. 
           Please check out <u>the bulk upload documentation</u> if you need to upload more than 50 files.`,
 					timeout: 10000,
-					action: { type: 'link', target: 'https://immich.app/docs/usage/bulk-upload' }
+					action: { type: 'link', target: 'https://immich.app/docs/features/bulk-upload' }
 				});
 
 				return;