Source Code added

docs/src/components/timeline.tsx

@@ -0,0 +1,78 @@
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { mdiCheckboxBlankCircle, mdiCheckboxMarkedCircle } from '@mdi/js';
+import Icon from '@mdi/react';
+import React from 'react';
+
+export type Item = {
+  icon: string;
+  iconColor: string;
+  title: string;
+  description?: string;
+  link?: { url: string; text: string };
+  done?: false;
+  getDateLabel: (language: string) => string;
+};
+
+interface Props {
+  items: Item[];
+}
+
+export function Timeline({ items }: Props): JSX.Element {
+  const isBrowser = useIsBrowser();
+
+  return (
+    <ul className="flex flex-col pl-4">
+      {items.map((item, index) => {
+        const isFirst = index === 0;
+        const isLast = index === items.length - 1;
+        const done = item.done ?? true;
+        const dateLabel = item.getDateLabel(isBrowser ? navigator.language : 'en-US');
+        const timelineIcon = done ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircle;
+        const cardIcon = item.icon;
+
+        return (
+          <li key={index} className={`flex min-h-24 w-[700px] max-w-[90vw] ${done ? '' : 'italic'}`}>
+            <div className="md:flex justify-start w-36 mr-8 items-center dark:text-immich-dark-primary text-immich-primary hidden">
+              {dateLabel}
+            </div>
+            <div className={`${isFirst && 'relative top-[50%]'} ${isLast && 'relative bottom-[50%]'}`}>
+              <div
+                className={`h-full border-solid border-4 border-immich-primary dark:border-immich-dark-primary ${
+                  isFirst && 'rounded rounded-t-full'
+                } ${isLast && 'rounded rounded-b-full'}`}
+              ></div>
+            </div>
+            <div className="z-10 flex items-center bg-immich-primary dark:bg-immich-dark-primary border-2 border-solid rounded-full dark:text-black text-white relative top-[50%] left-[-3px] translate-y-[-50%] translate-x-[-50%] w-8 h-8 shadow-lg ">
+              {<Icon path={timelineIcon} size={1.25} />}
+            </div>
+            <section className=" dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl flex flex-row w-full gap-2 p-4 md:ml-4 my-2 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 transition-all">
+              <div className="flex flex-col flex-grow justify-between gap-2">
+                <div className="flex gap-2 items-center">
+                  {cardIcon === 'immich' ? (
+                    <img src="/img/immich-logo.svg" height="30" className="rounded-none" />
+                  ) : (
+                    <Icon path={cardIcon} size={1} color={item.iconColor} />
+                  )}
+                  <p className="m-0 mt-1 text-lg items-start flex gap-2 place-items-center content-center">
+                    <span>{item.title}</span>
+                  </p>
+                </div>
+                <p className="m-0 text-sm text-gray-600 dark:text-gray-300">{item.description}</p>
+              </div>
+              <div className="flex flex-col justify-between place-items-end">
+                <span className="dark:text-immich-dark-primary text-immich-primary">
+                  {item.link && (
+                    <a href={item.link.url} target="_blank" rel="noopener">
+                      [{item.link.text}]
+                    </a>
+                  )}
+                </span>
+                <div className="md:hidden text-sm text-right">{dateLabel}</div>
+              </div>
+            </section>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

docs/src/components/version-switcher.tsx

@@ -0,0 +1,69 @@
+import { useWindowSize } from '@docusaurus/theme-common';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import React, { useEffect, useState } from 'react';
+
+export default function VersionSwitcher(): JSX.Element {
+  const [versions, setVersions] = useState([]);
+  const [activeLabel, setLabel] = useState('Versions');
+
+  const windowSize = useWindowSize();
+
+  useEffect(() => {
+    async function getVersions() {
+      try {
+        let baseUrl = 'https://docs.immich.app';
+        if (window.location.origin === 'http://localhost:3005') {
+          baseUrl = window.location.origin;
+        }
+
+        const response = await fetch(`${baseUrl}/archived-versions.json`);
+
+        const archiveVersions = await response.json();
+
+        const allVersions = [
+          { label: 'Next', url: 'https://docs.main.preview.immich.app' },
+          { label: 'Latest', url: 'https://docs.immich.app' },
+          ...archiveVersions,
+        ].map(({ label, url, rootPath }) => ({
+          label,
+          url: new URL(url),
+          rootPath,
+        }));
+        setVersions(allVersions);
+
+        const activeVersion = allVersions.find((version) => version.url.origin === window.location.origin);
+        if (activeVersion) {
+          setLabel(activeVersion.label);
+        }
+      } catch (error) {
+        console.error('Failed to fetch versions', error);
+      }
+    }
+
+    if (versions.length === 0) {
+      getVersions();
+    }
+  }, []);
+
+  return (
+    versions.length > 0 && (
+      <DropdownNavbarItem
+        className="version-switcher-34ab39"
+        label={activeLabel}
+        mobile={windowSize === 'mobile'}
+        items={versions.map(({ label, url, rootPath }) => {
+          let path = location.pathname + location.search + location.hash;
+          if (rootPath && !path.startsWith(rootPath)) {
+            path = rootPath + path;
+          }
+          return {
+            label,
+            to: new URL(path, url).href,
+            target: '_self',
+            className: label === activeLabel ? 'dropdown__link--active menu__link--active' : '', // workaround because React Router `<NavLink>` only supports using URL path for checking if active: https://v5.reactrouter.com/web/api/NavLink/isactive-func
+          };
+        })}
+      />
+    )
+  );
+}

docs/src/css/custom.css

@@ -0,0 +1,126 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: 'GoogleSans';
+  src: url('/fonts/GoogleSans/GoogleSans.ttf') format('truetype-variations');
+  font-weight: 410 900;
+  font-style: normal;
+  ascent-override: 106.25%;
+  size-adjust: 106.25%;
+}
+
+@font-face {
+  font-family: 'GoogleSansCode';
+  src: url('/fonts/GoogleSansCode/GoogleSansCode.ttf') format('truetype-variations');
+  font-weight: 1 900;
+  font-style: monospace;
+  ascent-override: 106.25%;
+  size-adjust: 106.25%;
+}
+
+.breadcrumbs__link {
+  font-weight: 500;
+  font-size: 0.875rem;
+  padding: 8px 16px 8px 16px;
+}
+
+img {
+  border-radius: 15px;
+}
+
+/* You can override the default Infima variables here. */
+:root {
+  font-family: 'GoogleSans', sans-serif;
+  letter-spacing: 0.1px;
+  --ifm-color-primary: #4250af;
+  --ifm-color-primary-dark: #4250af;
+  --ifm-color-primary-darker: #4250af;
+  --ifm-color-primary-darkest: #4250af;
+  --ifm-color-primary-light: #4250af;
+  --ifm-color-primary-lighter: #4250af;
+  --ifm-color-primary-lightest: #4250af;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'GoogleSans', sans-serif;
+  letter-spacing: 0.1px;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #adcbfa;
+  --ifm-color-primary-dark: #85b2f8;
+  --ifm-color-primary-darker: #71a5f6;
+  --ifm-color-primary-darkest: #357ff3;
+  --ifm-color-primary-light: #d5e4fc;
+  --ifm-color-primary-lighter: #e9f1fe;
+  --ifm-color-primary-lightest: #ffffff;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-navbar-background-color: #0c0c0c;
+  --ifm-footer-background-color: #0c0c0c;
+}
+
+[data-theme='dark'] body,
+[data-theme='dark'] .main-wrapper {
+  background-color: #070707;
+}
+
+div[class^='announcementBar_'] {
+  min-height: 2rem;
+  background-color: #2b3336;
+  color: white;
+}
+
+.menu__link {
+  padding: 10px 10px 10px 16px;
+  border-radius: 24px;
+  margin-right: 16px;
+  font-weight: 500;
+}
+
+.menu__list-item-collapsible {
+  margin-right: 16px;
+  border-radius: 24px;
+  font-weight: 500;
+}
+
+.menu__link--active {
+  font-weight: 600;
+}
+
+.table-of-contents__link {
+  font-size: 14px;
+  font-weight: 450;
+}
+
+/* workaround for version switcher PR 15894 */
+div[class*='navbar__items'] > li:has(a[class*='version-switcher-34ab39']) {
+  display: none;
+}
+
+code {
+  font-weight: 500;
+  font-family: 'GoogleSansCode';
+}
+
+.buy-button {
+  padding: 8px 14px;
+  border: 1px solid transparent;
+  font-family: 'GoogleSans', sans-serif;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 0 5px 2px rgba(181, 206, 254, 0.4);
+}

docs/src/pages/errors.md

@@ -0,0 +1,34 @@
+# Errors
+
+## TypeORM Upgrade
+
+If you encountered "Migrations failed: Error: Invalid upgrade path" then perform an intermediate upgrade to `v1.132.3` first.
+
+:::tip
+We recommend users upgrade to `v1.132.3` since it does not have any breaking changes or bugs on this upgrade path.
+:::
+
+In order to update to Immich `v1.137.0` or above, the application must be started at least once on a version in the range between `1.132.0` and `1.136.0`. Doing so will complete database schema upgrades that are required for `v1.137.0` (and above). After Immich has successfully updated to a version in this range, you can now attempt to update to `v1.137.0` (or above).
+
+:::caution
+Avoid `v1.136.0` if upgrading from `v1.131.0` (or earlier) due to a bug blocking this upgrade in some installations.
+:::
+
+## Inconsistent Media Location
+
+:::caution
+This error is related to the location of media files _inside the container_. Never move files on the host system when you run into this error message.
+:::
+
+Immich automatically tries to detect where your Immich data is located. On start up, it compares the detected media location with the file paths in the database and throws an Inconsistent Media Location error when they do not match.
+
+To fix this issue, verify that the `IMMICH_MEDIA_LOCATION` environment variable and `UPLOAD_LOCATION` volume mount are in sync with the database paths.
+
+If you would like to migrate from one media location to another, simply successfully start Immich on `v1.136.0` or later, then do the following steps:
+
+1. Stop Immich
+2. Update `IMMICH_MEDIA_LOCATION` to the new location
+3. Update the right-hand side of the `UPLOAD_LOCATION` volume mount to the new location
+4. Start up Immich
+
+After version `1.136.0`, Immich can detect when a media location has moved and will automatically update the database paths to keep them in sync.

docs/src/pages/index.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from '@docusaurus/router';
+
+export default function Home(): JSX.Element {
+  return <Redirect to="/overview/quick-start" />;
+}

docs/src/pages/privacy-policy.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+function HomepageHeader() {
+  return (
+    <header>
+      <section className="max-w-[900px] m-4 p-4 md:p-6 md:m-auto md:my-12 border border-red-400 rounded-2xl  bg-slate-200 dark:bg-immich-dark-gray">
+        <section>
+          <h1>Privacy Policy</h1>
+          <p>Last updated: July 31st 2024</p>
+          <p>
+            Welcome to Immich. We are committed to respecting your privacy. This Privacy Policy sets out how we collect,
+            use, and share information when you use our Immich app.
+          </p>
+        </section>
+
+        {/* 1. Scope of This Policy */}
+        <section>
+          <h2>1. Scope of This Policy</h2>
+          <p>
+            This Privacy Policy applies to the Immich app ("we", "our", or "us") and covers our collection, use, and
+            disclosure of your information. This Policy does not cover any third-party websites, services, or
+            applications that can be accessed through our app, or third-party services you may access through Immich.
+          </p>
+        </section>
+
+        {/* 2. Information We Collect */}
+        <section>
+          <h2>2. Information We Collect</h2>
+          <div>
+            <p>
+              <strong>Locally Stored Data</strong>: Immich stores all your photos, albums, settings, and locally on your
+              device. We do not have access to this data, nor do we transmit or store it on any of our servers.
+            </p>
+          </div>
+
+          <div>
+            <p>
+              <strong>Purchase Information:</strong> When you make a purchase within the{' '}
+              <a href="https://buy.immich.app">https://buy.immich.app</a>, we collect the following information for tax
+              calculation purposes:
+            </p>
+            <ul>
+              <li>Country of origin</li>
+              <li>Postal code (if the user is from Canada or the United States)</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* 3. Use of Your Information */}
+        <section>
+          <h2>3. Use of Your Information</h2>
+          <p>
+            <strong>Tax Calculation:</strong> The country of origin and postal code (for users from Canada or the United
+            States) are collected solely for determining the applicable tax rates on your purchase.
+          </p>
+        </section>
+
+        {/* 4. Sharing of Your Information */}
+        <section>
+          <h2>4. Sharing of Your Information</h2>
+          <ul>
+            <li>
+              <strong>Tax Authorities:</strong> The purchase information may be shared with tax authorities as required
+              by law.
+            </li>
+            <li>
+              <strong>Payment Providers:</strong> The purchase information may be shared with payment providers where
+              required.
+            </li>
+          </ul>
+        </section>
+
+        {/* 5. Changes to This Policy */}
+        <section>
+          <h2>5. Changes to This Policy</h2>
+          <p>
+            We may update our Privacy Policy from time to time. If we make any changes, we will notify you by revising
+            the "Last updated" date at the top of this policy. It's encouraged that users frequently check this page for
+            any changes to stay informed about how we are helping to protect the personal information we collect.
+          </p>
+        </section>
+
+        {/* 6. Contact Us */}
+        <section>
+          <h2>6. Contact Us</h2>
+          <p>
+            If you have any questions about this Privacy Policy, please contact us at{' '}
+            <a href="mailto:immich@futo.org">immich@futo.org</a>
+          </p>
+        </section>
+      </section>
+    </header>
+  );
+}
+
+export default function Home(): JSX.Element {
+  return (
+    <Layout
+      title="Home"
+      description="immich Self-hosted photo and video backup solution directly from your mobile phone "
+      noFooter={true}
+    >
+      <HomepageHeader />
+      <div className="flex flex-col place-items-center place-content-center">
+        <p>This project is available under GNU AGPL v3 license.</p>
+        <p className="text-xs">Privacy should not be a luxury</p>
+      </div>
+    </Layout>
+  );
+}

docs/src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,7 @@
+import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
+import VersionSwitcher from '@site/src/components/version-switcher';
+
+export default {
+  ...ComponentTypes,
+  'custom-versionSwitcher': VersionSwitcher,
+};