doc: Add content for usage section (#922)

docs/docs/FAQ.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 6
 ---
 
 # FAQ

docs/docs/contribution-guidelines.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 5
 ---
 
 # Contribution Guidelines

docs/docs/installation/one-step-installation.md

@@ -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 backup file is `./immich-app/immich-data` relative to the current directory.
 
 :::tip
-For more information about using the application, please refer to [How to use the application](/docs/category/how-to-use-the-application).
+For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
 :::

docs/docs/installation/portainer-installation.md

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

docs/docs/installation/recommended-installation.md

@@ -116,5 +116,5 @@ docker-compose up -d # or `docker compose up -d` based on your docker-compose ve
 ```
 
 :::tip
-For more information about using the application, please refer to [How to use the application](/docs/category/how-to-use-the-application).
+For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
 :::

docs/docs/installation/unraid-installation.md

@@ -8,4 +8,8 @@ Install Immich on Unraid.
 
 :::info Community contribution
 Please follow this community contributed [article](https://mfaz.dev/posts/immich-unraid/) to install Immich on Unraid.
+:::
+
+:::tip
+For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
 :::

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

@@ -1,5 +1,12 @@
 ---
-sidebar_position: 5
+sidebar_position: 4
 ---
 
-# Mobile App Beta Program
+
+# 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/support-the-project.md

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 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.
 
-As our hosts in the [selfhosted.show - In the episode 'The-organization-must-not-be-name is a Hostile Actor'](https://selfhosted.show/79?t=1418) said, this is a massive undertaking that the team and I are doing. And I would love to someday be able to do this full-time, and I am asking for your help to make that happen.
+As our hosts in the [selfhosted.show - In the episode 'The-organization-must-not-be-name is a Hostile Actor'](https://selfhosted.show/79?t=1418) said, this is a massive undertaking of what the team and I are doing. And 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 are seeing yourself using for a long time, please consider supporting the project with the option below.
 

docs/docs/overview/technology-stack.md

@@ -18,6 +18,6 @@ The app is built with the following technologies
 * [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.
 
-# App architecture
+## High level architecture
 
 ![Immich Architecture](./img/app-architecture.png)

docs/docs/tutorial-basics/_category_.json

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

docs/docs/tutorial-basics/congratulations.md

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

docs/docs/tutorial-basics/create-a-blog-post.md

@@ -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 you like.
-```
-
-A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).

docs/docs/tutorial-basics/create-a-document.md

@@ -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"
-module.exports = {
-  tutorialSidebar: [
-    'intro',
-    // highlight-next-line
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-};
-```

docs/docs/tutorial-basics/create-a-page.md

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

docs/docs/tutorial-basics/deploy-your-site.md

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

docs/docs/tutorial-basics/markdown-features.mdx

@@ -1,146 +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, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
-
-## Code Blocks
-
-Markdown code blocks are supported with Syntax highlighting.
-
-    ```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:
-
-    :::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> !

docs/docs/tutorial-extras/_category_.json

@@ -1,7 +0,0 @@
-{
-  "label": "Tutorial - Extras",
-  "position": 6,
-  "link": {
-    "type": "generated-index"
-  }
-}

docs/docs/tutorial-extras/manage-docs-versions.md

@@ -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"
-module.exports = {
-  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`

docs/docs/tutorial-extras/translate-your-site.md

@@ -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"
-module.exports = {
-  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 same 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"
-module.exports = {
-  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
-```

docs/docs/usage/automatic-backup.md

@@ -0,0 +1,35 @@
+---
+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 Android, there are two options for automatic backup 
+  * [**Foreground backup**](#foreground-backup) 
+  * [**Background backup**](#background-backup)
+
+## Foreground backup
+
+If foreground backup is enabled. Whenever the app is opened or resumed, it will check if any photos or videos in the selected album(s) have yet to be uploaded to the cloud (the remainder count). If there are any, it will upload them to the cloud.
+
+## Background backup
+
+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 any photos or videos in the selected album(s) still need to be uploaded to the cloud. If there are any, 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 reflect the background uploaded result. You have to navigate out of the page and come back to see the updated counts.
+:::

docs/docs/usage/bulk-upload.md

@@ -0,0 +1,75 @@
+---
+sidebar_position: 3
+---
+
+# Bulk Upload (Using the CLI)
+
+You can use the CLI to upload the existing gallery to the Immich's server
+
+[Immich CLI Repository](https://github.com/immich-app/CLI)
+
+
+## Requirements
+* Node.js 16 or above
+* Npm
+
+## Installation
+```bash
+npm i -g immich
+```
+
+## Quick Start
+Specify user's credential, Immich's server address and port and the directory you would like to upload videos/photos from.
+
+```bash
+immich upload --email testuser@email.com --password password --server http://192.168.1.216:2283/api -d your/target/directory
+```
+
+---
+
+### Parameters
+
+| Parameter        | Description                                                         |
+| ---------------- | ------------------------------------------------------------------- |
+| --yes / -y       | Assume yes on all interactive prompts                               |
+| --delete / -da   | Delete local assets after upload                                    |
+| --email / -e     | User's email                                                        |
+| --password / -pw | User's password                                                     |
+| --server / -s    | Immich's server address                                             |
+| --directory / -d | Directory to upload from                                            |
+| --threads / -t   | Number of threads to use (Default 5)                                |
+| --album/ -al     | Create albums for assets based on the parent folder or a given name |
+
+### Run via Docker
+
+Be aware that as this runs inside a container, it mounts your current directory as a volume and for the -d flag you need to use the path inside the container.
+
+```bash
+docker run -it --rm -v $(pwd):/import ghcr.io/immich-app/immich-cli:latest upload --email testuser@email.com --password password --server http://192.168.1.216:2283/api -d /import
+```
+
+Optionally, you can create an alias:
+
+```bash
+alias immich="docker run -it --rm -v $(pwd):/import ghcr.io/immich-app/immich-cli:latest"
+immich upload --email testuser@email.com --password password --server http://192.168.1.216:2283/api -d /import
+```
+
+### Run from source
+
+```bash title="Clone Repository"
+git clone https://github.com/alextran1502/immich-cli
+```
+
+
+```bash title="Install dependencies"
+npm install
+```
+
+```bash title="Build the project"
+npm run build
+```
+
+```bash title="Run the command"
+node bin/index.js upload --email testuser@email.com --password password --server http://192.168.1.216:2283/api -d your/target/directory
+```

docs/docs/usage/post-installation.md

@@ -0,0 +1,57 @@
+---
+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 - Registering 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 - Creating 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 - 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 5 - 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 the album you want to back up from the backup screen to the Immich server.
+
+<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/docusaurus.config.js

@@ -34,18 +34,17 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
+          showLastUpdateAuthor: true,
+          showLastUpdateTime: true,
+
           sidebarPath: require.resolve("./sidebars.js"),
           // 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/",
+          editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
         },
         blog: {
           showReadingTime: 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/",
+          editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
         },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),