Small docs site tweaks (#954)

* Add yarn.lock to .gitignore

* Tweak announcementBar message

* Add demo link to docs homepage

* chore(docs): logo-meaning page cleanup

* chore(docs): support page cleanup

* chore(docs): tech-stack page cleanup

* chore(docs): requirements page cleanup

* Update main README warning to match docs site

* Add clearer documentation link to main README

* chore(docs): one-step-install page cleanup

* chore(docs): Security: remove example JWT_SECRET value

* chore(docs): recommended-install page cleanup

* chore(docs): portainer-install page cleanup

* chore(docs): unraid-install page cleanup

README.md

@@ -22,7 +22,7 @@
 
 - ⚠️ 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!**
+- ⚠️ **Do not use it as the only way to store your photos and videos!**
 
 ## Content
 
@@ -35,6 +35,10 @@
 - [Support The Project](#support-the-project)
 - [Known Issues](#known-issues)
 
+## Documentation
+
+You can find the main documentation, including installation guides, at https://immich.app/.
+
 ## Demo
 
 You can access the web demo at https://demo.immich.app

docs/.gitignore

@@ -18,3 +18,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

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

@@ -22,7 +22,7 @@ The script will perform the following actions:
 
 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` relative to the current directory.
+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.

docs/docs/installation/portainer-installation.md

@@ -9,7 +9,7 @@ Install Immich using Portainer's Stack feature.
 1. Go to "**Stacks**" in the left sidebar.
 2. Click on "**Add stack**".
 3. Give the stack a name (i.e. Immich), and select "**Web Editor**" as the build method.
-4. Copy the content of the `docker-compose.yml` file from the [GitHub repository](https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml)
+4. Copy the content of the `docker-compose.yml` file from the [GitHub repository](https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml).
 5. Replace `.env` with `stack.env` for all containers that need to use environment variables in the web editor.
 
 <img
@@ -28,7 +28,7 @@ Install Immich using Portainer's Stack feature.
   alt="Dot Env Example"
 />
 
-9. Copy the content of the `.env.example` file from the [GitHub repository](https://raw.githubusercontent.com/immich-app/immich/main/docker/.env.example) and paste to the editor.
+9. Copy the content of the `.env.example` file from the [GitHub repository](https://raw.githubusercontent.com/immich-app/immich/main/docker/.env.example) and paste into the editor.
 10. Switch back to "**Simple Mode**".
 
 <img
@@ -39,8 +39,8 @@ Install Immich using Portainer's Stack feature.
 />
 
 * 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 the command below to generate a secured key
+* 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="Generate secure JWT_SECRET key"
 openssl rand -base64 128

docs/docs/installation/recommended-installation.md

@@ -69,9 +69,7 @@ LOG_LEVEL=simple
 # This JWT_SECRET is used to sign the authentication keys for user login
 # You should set it to a long randomly generated value
 # You can use this command to generate one: openssl rand -base64 128
-JWT_SECRET=kWPdavjCECB0yoXgUHA/vpwpIKdCi/4ODVLIOe9WIi6AQlFfjWEuIVhWT3DtJE+T
-CTckJnpwGgSK5AoqD+A8DZKsHCRdfVnlQIVqqmyR8isZTcxL5DWYQUSDRzyOO5OA
-ZRUTE63FxiYhrRoe/y1yr5mV1osGy6mm6NZW8T2Tjwc=
+JWT_SECRET=
 
 ###################################################################################
 # Reverse Geocoding
@@ -102,8 +100,8 @@ PUBLIC_LOGIN_PAGE_MESSAGE="My Family Photos and Videos Backup Server"
 </details>
 
 * 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 the command below to generate a secure key
+* 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

docs/docs/installation/requirements.md

@@ -12,14 +12,14 @@ 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 configurations might be required on your end.
+You can also use Podman to run the application. However, additional configuration might be required on your end.
 :::
 
 ## Hardware
 
-- **OS**: Preferred unix-based operating system (Ubuntu, Debian, MacOS...etc). Windows works too, with [Docker Desktop on Windows](https://docs.docker.com/desktop/install/windows-install/)
-- **Ram**: At least 2GB, preferred 4GB.
-- **Core**: At least 2 cores, preferred 4 cores.
+- **OS**: Preferred unix-based operating system (Ubuntu, Debian, MacOS, etc). Windows works too, with [Docker Desktop on Windows](https://docs.docker.com/desktop/install/windows-install/)
+- **RAM**: At least 2GB, preferred 4GB.
+- **CPU**: At least 2 cores, preferred 4 cores.
 
 ## Installation methods
 

docs/docs/installation/unraid-installation.md

@@ -7,7 +7,7 @@ sidebar_position: 5
 Install Immich on Unraid.
 
 :::info Community contribution
-Please follow this community contributed [article](https://mfaz.dev/posts/immich-unraid/) to install Immich on Unraid.
+Please follow [this community contributed article](https://mfaz.dev/posts/immich-unraid/) to install Immich on Unraid.
 :::
 
 :::tip

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

@@ -10,7 +10,7 @@ I really like the Japanese culture, especially the books, history, and food. The
 
 ![Oda_emblem](https://user-images.githubusercontent.com/27055614/182044504-a5ed33a8-5640-42de-b359-18fdbee9fb90.svg)
 
-One of my favorite books is [Taikō](https://www.goodreads.com/book/show/336228.Taiko), it is the story about a prominent figure in the history of Japan, [Toyotomy Hideyoshi](https://www.britannica.com/biography/Toyotomi-Hideyoshi). He came from nothing, and through his resilience and wonderful mind, he has become one of the most powerful rulers in Japan's history. I enjoy his personality and the way he moved through life.
+One of my favorite books is [Taikō](https://www.goodreads.com/book/show/336228.Taiko), it is a story about a prominent figure in the history of Japan, [Toyotomy Hideyoshi](https://www.britannica.com/biography/Toyotomi-Hideyoshi). He came from nothing, and through his resilience and wonderful mind, he has become one of the most powerful rulers in Japan's history. I enjoy his personality and the way he moved through life.
 
 The color is an adaptation of **_App-Which-Must-Not-Be-Named_**'s color scheme, with an extra color (pink) to complete the flower's fifth petal. The petal layers are the same color scheme as the main layer rotating back and forth to "bring the flower to life."
 

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; what 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.
+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.
 

docs/docs/overview/technology-stack.md

@@ -4,7 +4,7 @@ sidebar_position: 4
 
 # Technology stack
 
-The app is built with the following technologies
+The app is built with the following technologies:
 
 ## Frontend
 * [Flutter](https://flutter.dev/) for the mobile app

docs/docusaurus.config.js

@@ -58,7 +58,7 @@ const config = {
     ({
       announcementBar: {
         id: "site_announcement_immich",
-        content: `⚠️ The project is under <strong>very active</strong> development. Expect bugs and changes. Do not use as a <strong>single source</strong> to store of your photos and videos!`,
+        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",
         isCloseable: false,

docs/src/pages/index.module.css

@@ -54,3 +54,13 @@
 .introButton:hover {
   color: #000000;
 }
+
+.demoButton {
+  background-color: aquamarine;
+  color: #000000;
+  border-radius: 50px;
+}
+
+.demoButton:hover {
+  color: #000000;
+}

docs/src/pages/index.tsx

@@ -40,6 +40,15 @@ function HomepageHeader() {
               Installation
             </Link>
           </div>
+
+          <div className={styles.buttons}>
+            <Link
+              className={clsx("button button--lg", styles.demoButton)}
+              to="https://demo.immich.app/"
+            >
+              Demo
+            </Link>
+          </div>
         </div>
 
         <img src="/img/immich-screenshots.webp" alt="logo" />