1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-29 15:11:58 +00:00

doc: Add content for usage section (#922)

This commit is contained in:
Alex 2022-11-03 21:42:24 -05:00 committed by GitHub
parent 296a5e786e
commit 0f9c2f0a38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 192 additions and 507 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -9,3 +9,7 @@ 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.
:::

View file

@ -1,5 +1,12 @@
---
sidebar_position: 5
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)

View file

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

View file

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

View file

@ -1,8 +0,0 @@
{
"label": "Tutorial - Basics",
"position": 6,
"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 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"
module.exports = {
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,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> !

View file

@ -1,7 +0,0 @@
{
"label": "Tutorial - Extras",
"position": 6,
"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"
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`

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"
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
```

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

View file

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

View file

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