chore(docs): refactor pages (#1144)

* chore(docs): refactor pages

* fix: links

* fix: broken link

* refactor: post install steps using partials

docs/docusaurus.config.js

@@ -1,57 +1,56 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "Immich",
-  tagline:
-    "High performance self-hosted photo and video backup solution directly from your mobile phone",
-  url: "https://documentation.immich.app",
-  baseUrl: "/",
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.png",
+  title: 'Immich',
+  tagline: 'High performance self-hosted photo and video backup solution directly from your mobile phone',
+  url: 'https://documentation.immich.app',
+  baseUrl: '/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'img/favicon.png',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: "immich-app", // Usually your GitHub org/user name.
-  projectName: "immich", // Usually your repo name.
-  deploymentBranch: "main",
+  organizationName: 'immich-app', // Usually your GitHub org/user name.
+  projectName: 'immich', // Usually your repo name.
+  deploymentBranch: 'main',
   // Even if you don't use internalization, you can use this field to set useful
   // metadata like html lang. For example, if your site is Chinese, you may want
   // to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
+    defaultLocale: 'en',
+    locales: ['en'],
   },
 
   presets: [
     [
-      "docusaurus-preset-openapi",
+      'docusaurus-preset-openapi',
       /** @type {import('docusaurus-preset-openapi').Options} */
       ({
         docs: {
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
 
-          sidebarPath: require.resolve("./sidebars.js"),
+          sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
+          editUrl: 'https://github.com/immich-app/immich/tree/main/docs/',
         },
         api: {
-          path: "../server/immich-openapi-specs.json",
-          routeBasePath: "/docs/api"
+          path: '../server/immich-openapi-specs.json',
+          routeBasePath: '/docs/api',
         },
         // blog: {
         //   showReadingTime: true,
         //   editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
         // },
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: require.resolve('./src/css/custom.css'),
         },
       }),
     ],
@@ -61,10 +60,10 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       announcementBar: {
-        id: "site_announcement_immich",
+        id: 'site_announcement_immich',
         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",
+        backgroundColor: '#593f00',
+        textColor: '#ffefc9',
         isCloseable: false,
       },
       docs: {
@@ -74,64 +73,68 @@ const config = {
       },
       navbar: {
         logo: {
-          alt: "Immich University Logo",
-          src: "img/color-logo.png",
-          srcDark: "img/logo.png",
+          alt: 'Immich University Logo',
+          src: 'img/color-logo.png',
+          srcDark: 'img/logo.png',
         },
         items: [
           {
-            to: "/docs/overview/introduction",
-            position: "right",
-            label: "Documentation",
+            to: '/docs/overview/introduction',
+            position: 'right',
+            label: 'Docs',
           },
           {
-            to: "/docs/api",
-            position: "right",
-            label: "API"
+            to: '/docs/api',
+            position: 'right',
+            label: 'API',
           },
-          { to: "/blog", label: "Blog", position: "right" },
           {
-            href: "https://github.com/immich-app/immich",
-            label: "GitHub",
-            position: "right",
+            to: '/blog',
+            position: 'right',
+            label: 'Blog',
+          },
+          {
+            href: 'https://github.com/immich-app/immich',
+            label: 'GitHub',
+            position: 'right',
           },
         ],
       },
       footer: {
-        style: "light",
+        style: 'light',
         links: [
           {
-            title: "Overview",
+            title: 'Overview',
             items: [
               {
-                label: "Welcome",
-                to: "/docs/overview/introduction",
+                label: 'Welcome',
+                to: '/docs/overview/introduction',
               },
               {
-                label: "Installation",
-                to: "/docs/installation/requirements",
+                label: 'Installation',
+                to: '/docs/install/requirements',
               },
             ],
           },
           {
-            title: "Community",
+            title: 'Community',
             items: [
               {
-                label: "Discord",
-                href: "https://discord.com/invite/D8JsnBEuKb",
+                label: 'Discord',
+                href: 'https://discord.com/invite/D8JsnBEuKb',
               },
             ],
           },
           {
-            title: "More",
+            title: 'More',
             items: [
               {
-                label: "Blog",
-                to: "/blog",
+                label: 'Blog',
+                to: '/blog',
               },
               {
-                label: "GitHub",
-                href: "https://github.com/immich-app/immich",
+                label: 'GitHub',
+                href: 'https://github.com/immich-app/immich',
               },
             ],
           },
@@ -142,6 +145,7 @@ const config = {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
       },
+      image: 'overview/img/feature-panel.png',
     }),
 };