mirror of
https://github.com/immich-app/immich.git
synced 2024-12-28 22:51:59 +00:00
chore: Update repo readme (#927)
This commit is contained in:
Alex
GitHub
parent
86e50f97ba
commit
8b39a1da00
7 changed files with 132 additions and 254 deletions
297
README.md
297
README.md
|
|
@ -1,36 +1,47 @@
|
||||||
<h1 align="center"> Immich </h1>
|
<p align="center">
|
||||||
<p align="center"> <b>High performance self-hosted photo and video backup solution.</b> </p>
|
<br/>
|
||||||
<p align="center">
|
|
||||||
<img src="design/feature-panel.png" title="Immich Logo">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-green.svg?color=3F51B5&style=for-the-badge&label=License&logoColor=000000&labelColor=ececec" alt="License: MIT"></a>
|
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-green.svg?color=3F51B5&style=for-the-badge&label=License&logoColor=000000&labelColor=ececec" alt="License: MIT"></a>
|
||||||
<a href="https://github.com/alextran1502/immich"><img src="https://img.shields.io/github/stars/alextran1502/immich.svg?style=for-the-badge&logo=github&color=3F51B5&label=Stars&logoColor=000000&labelColor=ececec" alt="Star on Github"></a>
|
|
||||||
<a href="https://immichci.little-home.net/viewType.html?buildTypeId=Immich_BuildAndroidAndGetArtifact&guest=1">
|
|
||||||
<img src="https://img.shields.io/teamcity/http/immichci.little-home.net/s/Immich_BuildAndroidAndGetArtifact.svg?style=for-the-badge&label=Android&logo=teamcity&logoColor=000000&labelColor=ececec" alt="Android Build"/>
|
|
||||||
</a>
|
|
||||||
<a href="https://immichci.little-home.net/viewType.html?buildTypeId=Immich_BuildAndPublishIOSToTestFlight&guest=1">
|
|
||||||
<img src="https://img.shields.io/teamcity/http/immichci.little-home.net/s/Immich_BuildAndPublishIOSToTestFlight.svg?style=for-the-badge&label=iOS&logo=teamcity&logoColor=000000&labelColor=ececec" alt="iOS Build"/>
|
|
||||||
</a>
|
|
||||||
<a href="https://actions-badge.atrox.dev/alextran1502/immich/goto?ref=main">
|
|
||||||
<img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Falextran1502%2Fimmich%2Fbadge%3Fref%3Dmain&style=for-the-badge&label=Github Action&logo=github&labelColor=ececec&logoColor=000000" />
|
|
||||||
</a>
|
|
||||||
<a href="https://discord.gg/D8JsnBEuKb">
|
<a href="https://discord.gg/D8JsnBEuKb">
|
||||||
<img src="https://img.shields.io/discord/979116623879368755.svg?label=Immich%20Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Immich Discord"/>
|
<img src="https://img.shields.io/discord/979116623879368755.svg?label=Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Discord"/>
|
||||||
</a>
|
</a>
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<img src="design/immich-logo.svg" width="150" title="Login With Custom URL">
|
||||||
|
</p>
|
||||||
|
<h3 align="center">Immich - High performance self-hosted photo and video backup solution</h3>
|
||||||
|
<br/>
|
||||||
|
<a href="https://docs.immich.app">
|
||||||
|
<img src="design/immich-screenshots.png" title="Main Screenshot">
|
||||||
|
</a>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
## Disclaimer
|
||||||
|
|
||||||
|
- ⚠️ The project is under **very active** development.
|
||||||
|
- ⚠️ Expect bugs and breaking changes.
|
||||||
|
- ⚠️ **Do not use as a single source to store of your photos and videos!**
|
||||||
|
|
||||||
|
## Content
|
||||||
|
|
||||||
|
- [Official Documentation](https://docs.immich.app/docs/overview/introduction)
|
||||||
|
- [Demo](#demo)
|
||||||
|
- [Features](#features)
|
||||||
|
- [Introduction](https://docs.immich.app/docs/overview/introduction)
|
||||||
|
- [Installation](https://docs.immich.app/docs/installation/requirements)
|
||||||
|
- [Contribution Guidelines](https://docs.immich.app/docs/contribution-guidelines)
|
||||||
|
- [Support The Project](#support-the-project)
|
||||||
|
- [Known Issues](#known-issues)
|
||||||
|
|
||||||
## Demo
|
## Demo
|
||||||
|
|
||||||
You can access the web demo at https://demo.immich.app
|
You can access the web demo at https://demo.immich.app
|
||||||
|
|
||||||
For the mobile app, you can use https://demo.immich.app/api for the `Server Endpoint URL`
|
For the mobile app, you can use `https://demo.immich.app/api` for the `Server Endpoint URL`
|
||||||
|
|
||||||
|
```bash title="Demo Credential"
|
||||||
```
|
|
||||||
The credential
|
The credential
|
||||||
email: demo@immich.app
|
email: demo@immich.app
|
||||||
password: demo
|
password: demo
|
||||||
|
|
@ -40,236 +51,52 @@ password: demo
|
||||||
Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM
|
Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM
|
||||||
```
|
```
|
||||||
|
|
||||||
## Content
|
# Features
|
||||||
- [Features](#features)
|
|
||||||
- [Screenshots](#screenshots)
|
|
||||||
- [Installation](#installation)
|
|
||||||
- [Update](#update)
|
|
||||||
- [Mobile App](#mobile-app)
|
|
||||||
- [App Beta Invitation links](#App-Beta-release-channel)
|
|
||||||
- [Development](#development)
|
|
||||||
- [Support](#support)
|
|
||||||
- [Known Issues](#known-issues)
|
|
||||||
|
|
||||||
# Features
|
| Features | Mobile | Web |
|
||||||
|
| ------------------------------------------- | ------- | --- |
|
||||||
|
| Upload and view videos and photos | Yes | Yes |
|
||||||
|
| Auto backup when the app is opened | Yes | N/A |
|
||||||
|
| Selective album(s) for backup | Yes | N/A |
|
||||||
|
| Download photos and videos to local device | Yes | Yes |
|
||||||
|
| Multi-user support | Yes | Yes |
|
||||||
|
| Album | Yes | Yes |
|
||||||
|
| Shared Albums | Yes | Yes |
|
||||||
|
| Quick navigation with draggable scrollbar | Yes | Yes |
|
||||||
|
| Support RAW (HEIC, HEIF, DNG, Apple ProRaw) | Yes | Yes |
|
||||||
|
| Metadata view (EXIF, map) | Yes | Yes |
|
||||||
|
| Search by metadata, objects and image tags | Yes | No |
|
||||||
|
| Administrative functions (user management) | N/A | Yes |
|
||||||
|
| Background backup | Android | N/A |
|
||||||
|
| Virtual scroll | N/A | Yes |
|
||||||
|
|
||||||
> ⚠️ WARNING: **NOT READY FOR PRODUCTION! DO NOT USE TO STORE YOUR ASSETS**. This project is under heavy development. There will be continuous functions, features and api changes.
|
# Support the project
|
||||||
|
|
||||||
| Features | Mobile | Web |
|
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.
|
||||||
| - | - | - |
|
|
||||||
| Upload and view videos and photos | Yes | Yes
|
|
||||||
| Auto backup when the app is opened | Yes | N/A
|
|
||||||
| Selective album(s) for backup | Yes | N/A
|
|
||||||
| Download photos and videos to local device | Yes | Yes
|
|
||||||
| Multi-user support | Yes | Yes
|
|
||||||
| Album | Yes | Yes
|
|
||||||
| Shared Albums | Yes | Yes
|
|
||||||
| Quick navigation with draggable scrollbar | Yes | Yes
|
|
||||||
| Support RAW (HEIC, HEIF, DNG, Apple ProRaw) | Yes | Yes
|
|
||||||
| Metadata view (EXIF, map) | Yes | Yes
|
|
||||||
| Search by metadata, objects and image tags | Yes | No
|
|
||||||
| Administrative functions (user management) | N/A | Yes
|
|
||||||
| Background backup | Android | N/A
|
|
||||||
| Virtual scroll | N/A | Yes
|
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
<br/>
|
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.
|
||||||
|
|
||||||
# Screenshots
|
## Donation
|
||||||
|
|
||||||
### Mobile
|
- [Monthly donation](https://github.com/sponsors/alextran1502) via GitHub Sponsors
|
||||||
| | | | | |
|
- [One-time donation](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) via Github Sponsors
|
||||||
| - | - | - | - | - |
|
|
||||||
| <img src="design/login-screen.png" width="150" title="Login With Custom URL"> <p align="center"> Login with custom URL </p> | <img src="design/backup-screen.png" width="150" title="Backup Setting Info"> <p align="center"> Backup Settings </p> | <img src="design/selective-backup-screen.png" width="150" title="Backup Setting Info"> <p align="center"> Backup selection </p> | <img src="design/home-screen.jpeg" width="150" title="Home Screen"> <p align="center"> Home Screen </p> | <img src="design/search-screen.jpeg" width="150" title="Curated Search Info"> <p align="center"> Curated search </p> |
|
|
||||||
| <img src="design/shared-albums.png" width="150" title="Shared Albums"> <p align="center"> Shared albums </p> | <img src="design/nsc6.png" width="150" title="EXIF Info"> <p align="center"> EXIF info </p> | <img src="https://media.giphy.com/media/y8ZeaAigGmNvlSoKhU/giphy.gif" width="150" title="Loading ~4000 images/videos"> <p align="center"> Loading ~4000 images/videos </p> |
|
|
||||||
|
|
||||||
### Web
|
|
||||||
| Home Dashboard | Image view |
|
|
||||||
| - | - |
|
|
||||||
|<img src="design/web-home.jpeg" width="100%" title="Home Dashboard"> | <img src="design/web-detail.jpeg" width="100%" title="Detail">|
|
|
||||||
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
# Project Details
|
|
||||||
## 💾 System Requirements
|
|
||||||
|
|
||||||
- **OS**: Preferred unix-based operating system (Ubuntu, Debian, MacOS...etc).
|
|
||||||
|
|
||||||
- **RAM**: At least 2GB, preferred 4GB.
|
|
||||||
|
|
||||||
- **Core**: At least 2 cores, preferred 4 cores.
|
|
||||||
|
|
||||||
## 🔩 Technology Stack
|
|
||||||
|
|
||||||
There are several services that compose Immich:
|
|
||||||
|
|
||||||
1. **NestJs** - Backend of the application
|
|
||||||
2. **SvelteKit** - Web frontend of the application
|
|
||||||
3. **PostgreSQL** - Main database of the application
|
|
||||||
4. **Redis** - For sharing websocket instance between docker instances and background tasks message queue.
|
|
||||||
5. **Nginx** - Load balancing and optimized file uploading.
|
|
||||||
6. **TensorFlow** - Object Detection (COCO SSD) and Image Classification (ImageNet).
|
|
||||||
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
# Installation
|
|
||||||
|
|
||||||
NOTE: When using a reverse proxy in front of Immich (such as NGINX), the reverse proxy might require extra configuration to allow large files to be uploaded (such as `client_max_body_size` in the case of NGINX).
|
|
||||||
## Testing one-step installation (not recommended for production)
|
|
||||||
|
|
||||||
> ⚠️ *This installation method is for evaluating Immich before further customization to meet the users' needs.*
|
|
||||||
|
|
||||||
*Applicable operating systems: Ubuntu, Debian, MacOS*
|
|
||||||
|
|
||||||
- In the shell, from the directory of your choice, run the following command:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl -o- https://raw.githubusercontent.com/immich-app/immich/main/install.sh | bash
|
|
||||||
```
|
|
||||||
|
|
||||||
This script will download the `docker-compose.yml` file and the `.env` file, then populate the necessary information, and finally run the `docker-compose up` or `docker compose up` (based on your docker's version) command.
|
|
||||||
|
|
||||||
The web application will be available at `http://<machine-ip-address>:2283`, and the server URL for the mobile app will be `http://<machine-ip-address>:2283/api`.
|
|
||||||
|
|
||||||
The directory which is used to store the backup file is `./immich-app/immich-data`.
|
|
||||||
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
## Custom installation (Recommended)
|
|
||||||
|
|
||||||
### Step 1 - Download necessary files
|
|
||||||
|
|
||||||
- Create a directory called `immich-app` and cd into it.
|
|
||||||
|
|
||||||
- Get `docker-compose.yml`
|
|
||||||
|
|
||||||
```bash
|
|
||||||
wget https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml
|
|
||||||
```
|
|
||||||
|
|
||||||
- Get `.env`
|
|
||||||
|
|
||||||
```bash
|
|
||||||
wget -O .env https://raw.githubusercontent.com/immich-app/immich/main/docker/.env.example
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 2 - Populate .env file with custom information
|
|
||||||
|
|
||||||
<a href="https://github.com/immich-app/immich/blob/main/docker/.env.example" target="_blank"><b>See the example <code>.env</code> file</b></a>
|
|
||||||
|
|
||||||
* Populate custom database information if necessary.
|
|
||||||
* Populate `UPLOAD_LOCATION` as prefered location for storing backup assets.
|
|
||||||
* Populate a secret value for `JWT_SECRET`, you can use this command: `openssl rand -base64 128`
|
|
||||||
|
|
||||||
### Step 3 - Start the containers
|
|
||||||
|
|
||||||
- Run `docker-compose up` or `docker compose up` (based on your docker's version)
|
|
||||||
|
|
||||||
### Step 4 - Register admin user
|
|
||||||
|
|
||||||
- Navigate to the web at `http://<machine-ip-address>:2283` and follow the prompts to register admin user.
|
|
||||||
<p align="center">
|
|
||||||
<img src="design/admin-registration-form.png" width="300" title="Admin Registration">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
- You can add and manage users from the administration page.
|
|
||||||
<p align="center">
|
|
||||||
<img src="design/admin-interface.png" width="500" title="Admin User Management">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
### Step 5 - Access the mobile app
|
|
||||||
|
|
||||||
- Login the mobile app with the server endpoint URL at `http://<machine-ip-address>:2283/api`
|
|
||||||
<p align="center">
|
|
||||||
<img src="design/login-screen.jpeg" width="250" title="Example login screen">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
## Update
|
|
||||||
|
|
||||||
If you have installed, you can update the application by navigate to the directory that contains the `docker-compose.yml` file and run the following command:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docker-compose pull && docker-compose up -d
|
|
||||||
```
|
|
||||||
# Unraid Installation
|
|
||||||
|
|
||||||
Please follow this [article](https://mfaz.dev/posts/immich-unraid/) for a tutorial on how to install Immich on Unraid
|
|
||||||
|
|
||||||
|
|
||||||
# Mobile app
|
|
||||||
|
|
||||||
| F-Droid | Google Play | iOS |
|
|
||||||
| - | - | - |
|
|
||||||
| <a href="https://f-droid.org/packages/app.alextran.immich"><img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" alt="Get it on F-Droid" height="80"></a> | <p align="left"> <a href="https://play.google.com/store/apps/details?id=app.alextran.immich"><img src="design/google-play-qr-code.png" width="200" title="Google Play Store"></a> <p/> | <p align="left"> <a href="https://apps.apple.com/us/app/immich/id1613945652"><img src="design/ios-qr-code.png" width="200" title="Apple App Store"></a> <p/> |
|
|
||||||
|
|
||||||
> *The Play/App Store version might be lagging behind the latest release due to their review process.*
|
|
||||||
|
|
||||||
# App Beta release channel
|
|
||||||
|
|
||||||
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)
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
# Development
|
|
||||||
|
|
||||||
The development environment can be started from the root of the project after populating the `.env` file with the command:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
make dev # required Makefile installed on the system.
|
|
||||||
```
|
|
||||||
|
|
||||||
All servers and web container are hot reload for quick feedback loop.
|
|
||||||
|
|
||||||
## Note for developers
|
|
||||||
### 1 - OpenAPI
|
|
||||||
OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generator-cli` can be installed [here](https://openapi-generator.tech/docs/installation/). When you add a new or modify an existing endpoint, you must run the generate command below to update the client SDK.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run api:generate # Run from server directory
|
|
||||||
```
|
|
||||||
You can find the generated client SDK in the [`web/src/api`](web/src/api) for Typescript SDK and [`mobile/openapi`](mobile/openapi) for Dart SDK.
|
|
||||||
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
# Support
|
|
||||||
|
|
||||||
If you like the app, find it helpful, and want to support me to offset the cost of publishing to AppStores, you can sponsor the project with [**one time**](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) or monthly donation from [**Github Sponsor**](https://github.com/sponsors/alextran1502).
|
|
||||||
|
|
||||||
You can also donate using crypto currency with the following addresses:
|
|
||||||
|
|
||||||
<p align="" style="display: flex; place-items: center; gap: 15px" title="Bitcoin(BTC)"><img src="design/bitcoin.png" width="25" title="Bitcoin"> <b>Bitcoin</b>: <code>1FvEp6P6NM8EZEkpGUFAN2LqJ1gxusNxZX</code></p>
|
|
||||||
|
|
||||||
<p align="" style="display: flex; place-items: center; gap: 15px" title="Cardano(ADA)"> <img src="design/cardano.png" width="30" title="Cardano"> <b>Cardano</b>: <code>addr1qyy567vqhqrr3p7vpszr5p264gw89sqcwts2z8wqy4yek87cdmy79zazyjp7tmwhkluhk3krvslkzfvg0h43tytp3f5q49nycc</code> </p>
|
|
||||||
|
|
||||||
|
|
||||||
This is also a meaningful way to give me motivation and encouragement to continue working on the app.
|
|
||||||
|
|
||||||
Cheers! 🎉
|
|
||||||
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
# Known Issues
|
# Known Issues
|
||||||
|
|
||||||
## TensorFlow Build Issue
|
## TensorFlow Build Issue
|
||||||
|
|
||||||
*This is a known issue for incorrect Proxmox setup*
|
_This is a known issue for incorrect Proxmox setup_
|
||||||
|
|
||||||
TensorFlow doesn't run with older CPU architecture, it requires a CPU with AVX and AVX2 instruction set. If you encounter the error `illegal instruction core dump` when running the docker-compose command above, check for your CPU flags with the command and make sure you see `AVX` and `AVX2`:
|
TensorFlow doesn't run with older CPU architecture, it requires a CPU with AVX and AVX2 instruction set. If you encounter the error `illegal instruction core dump` when running the docker-compose command above, check for your CPU flags with the command and make sure you see `AVX` and `AVX2`:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
more /proc/cpuinfo | grep flags
|
more /proc/cpuinfo | grep flags
|
||||||
```
|
```
|
||||||
|
|
||||||
If you are running virtualization in Proxmox, the VM doesn't have the flag enabled.
|
If you are running virtualization in Proxmox, the VM doesn't have the flag enabled.
|
||||||
|
|
||||||
You need to change the CPU type from `kvm64` to `host` under VMs hardware tab.
|
You need to change the CPU type from `kvm64` to `host` under VMs hardware tab.
|
||||||
|
|
||||||
`Hardware > Processors > Edit > Advanced > Type (dropdown menu) > host`
|
`Hardware > Processors > Edit > Advanced > Type (dropdown menu) > host`
|
||||||
|
|
|
||||||
BIN
design/immich-screenshots.png
Normal file
BIN
design/immich-screenshots.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
|
|
@ -6,9 +6,9 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
|
||||||
|
|
||||||
/** @type {import('@docusaurus/types').Config} */
|
/** @type {import('@docusaurus/types').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
title: "Immich Documentation",
|
title: "Immich",
|
||||||
tagline:
|
tagline:
|
||||||
"Self-hosted photo and video backup solution directly from your mobile phone",
|
"High performance self-hosted photo and video backup solution directly from your mobile phone",
|
||||||
url: "https://documentation.immich.app",
|
url: "https://documentation.immich.app",
|
||||||
baseUrl: "/",
|
baseUrl: "/",
|
||||||
onBrokenLinks: "throw",
|
onBrokenLinks: "throw",
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,10 @@
|
||||||
* work well for content-centric websites.
|
* work well for content-centric websites.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Snowburst+One&display=swap");
|
||||||
|
|
||||||
html {
|
html {
|
||||||
/* font-family: "Work Sans", sans-serif; */
|
|
||||||
font-family: "Overpass", sans-serif;
|
font-family: "Overpass", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,13 @@
|
||||||
|
|
||||||
.heroBanner {
|
.heroBanner {
|
||||||
padding: 4rem 0;
|
padding: 4rem 0;
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 40rem;
|
text-align: center;
|
||||||
|
background: #606c88;
|
||||||
|
background: -webkit-linear-gradient(to top, #4e5362, #606c88);
|
||||||
|
background: linear-gradient(to top, #4e5362, #606c88);
|
||||||
|
color: whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 996px) {
|
@media screen and (max-width: 996px) {
|
||||||
|
|
@ -22,3 +25,32 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.buttonsRow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.installButton {
|
||||||
|
background-color: #adcbfa;
|
||||||
|
color: #000000;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.installButton:hover {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introButton {
|
||||||
|
background-color: #e6ebf5;
|
||||||
|
color: #000000;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introButton:hover {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,16 +12,37 @@ function HomepageHeader() {
|
||||||
return (
|
return (
|
||||||
<header className={clsx("hero hero--primary", styles.heroBanner)}>
|
<header className={clsx("hero hero--primary", styles.heroBanner)}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<h1 className="hero__title">{siteConfig.title}</h1>
|
<h1
|
||||||
|
className="hero__title"
|
||||||
|
style={{
|
||||||
|
fontFamily: "Snowburst One",
|
||||||
|
color: "#adcbfa",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
IMMICH
|
||||||
|
</h1>
|
||||||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||||||
<div className={styles.buttons}>
|
<div className={styles.buttonsRow}>
|
||||||
<Link
|
<div className={styles.buttons}>
|
||||||
className="button button--secondary button--lg"
|
<Link
|
||||||
to="docs/installation/requirements"
|
className={clsx("button button--lg", styles.introButton)}
|
||||||
>
|
to="docs/overview/introduction"
|
||||||
Getting Started
|
>
|
||||||
</Link>
|
Introduction
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.buttons}>
|
||||||
|
<Link
|
||||||
|
className={clsx("button button--lg", styles.installButton)}
|
||||||
|
to="docs/installation/requirements"
|
||||||
|
>
|
||||||
|
Installation
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<img src="/img/immich-screenshots.png" alt="logo" />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|
@ -31,13 +52,11 @@ export default function Home(): JSX.Element {
|
||||||
const { siteConfig } = useDocusaurusContext();
|
const { siteConfig } = useDocusaurusContext();
|
||||||
return (
|
return (
|
||||||
<Layout
|
<Layout
|
||||||
title={`${siteConfig.title}`}
|
title={`Home`}
|
||||||
description="Description will go into a meta tag in <head />"
|
description="immich Self-hosted photo and video backup solution directly from your mobile phone "
|
||||||
>
|
>
|
||||||
<HomepageHeader />
|
<HomepageHeader />
|
||||||
<main>
|
<main>{/* <HomepageFeatures /> */}</main>
|
||||||
<HomepageFeatures />
|
|
||||||
</main>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
docs/static/img/immich-screenshots.png
vendored
Normal file
BIN
docs/static/img/immich-screenshots.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Loading…
Reference in a new issue