docs: roadmap (#9902)

docs/docusaurus.config.js

@@ -100,9 +100,9 @@ const config = {
             label: 'Docs',
           },
           {
-            to: '/milestones',
+            to: '/roadmap',
             position: 'right',
-            label: 'Milestones',
+            label: 'Roadmap',
           },
           {
             to: '/docs/api',

docs/src/components/timeline.tsx

@@ -1,28 +1,22 @@
-import React from 'react';
-import Icon from '@mdi/react';
-import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import { mdiCheckboxBlankCircle, mdiCheckboxMarkedCircle } from '@mdi/js';
+import Icon from '@mdi/react';
+import React from 'react';
 
-export interface Item {
+export type Item = {
   icon: string;
   title: string;
   description?: string;
-  release?: string;
+  link?: { url: string; text: string };
-  tag?: string;
+  done?: false;
-  date: Date;
+  getDateLabel: (language: string) => string;
-  dateType: DateType;
+};
-}
-
-export enum DateType {
-  RELEASE = 'Release Date',
-  DATE = 'Date',
-}
 
 interface Props {
   items: Item[];
 }
 
-export default function Timeline({ items }: Props): JSX.Element {
+export function Timeline({ items }: Props): JSX.Element {
   const isBrowser = useIsBrowser();
 
   return (
@@ -30,21 +24,15 @@ export default function Timeline({ items }: Props): JSX.Element {
       {items.map((item, index) => {
         const isFirst = index === 0;
         const isLast = index === items.length - 1;
-
+        const done = item.done ?? true;
-        const classNames: string[] = [];
+        const dateLabel = item.getDateLabel(isBrowser ? navigator.language : 'en-US');
-
+        const timelineIcon = done ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircle;
-        if (isFirst) {
+        const cardIcon = item.icon;
-          classNames.push('');
-        }
-
-        if (isLast) {
-          classNames.push('rounded rounded-b-full');
-        }
 
         return (
-          <li key={index} className="flex min-h-24 w-[700px] max-w-[90vw]">
+          <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">
-              {isBrowser ? item.date.toLocaleDateString(navigator.language) : ''}
+              {dateLabel}
             </div>
             <div className={`${isFirst && 'relative top-[50%]'} ${isLast && 'relative bottom-[50%]'}`}>
               <div
@@ -54,33 +42,26 @@ export default function Timeline({ items }: Props): JSX.Element {
               ></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={mdiCheckboxMarkedCircleOutline} size={1.25} />
+              {<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-col 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">
+            <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="m-0 text-lg flex w-full items-center justify-between gap-2">
+              <div className="flex-col flex-grow items-center justify-between gap-2">
-                <p className="m-0 items-start flex gap-2">
+                <p className="m-0 mb-2 text-lg items-start flex gap-2">
-                  <Icon path={item.icon} size={1} />
+                  <Icon path={cardIcon} size={1} />
                   <span>{item.title}</span>
                 </p>
-
+                <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.tag ? (
+                  {item.link && (
-                    <a
+                    <a href={item.link.url} target="_blank" rel="noopener">
-                      href={`https://github.com/immich-app/immich/releases/tag/${item.tag}`}
+                      [{item.link.text}]
-                      target="_blank"
-                      rel="noopener"
-                    >
-                      [{item.release ?? item.tag}]{' '}
                     </a>
-                  ) : (
-                    item.release && <span>[{item.release}]</span>
                   )}
                 </span>
+                <div className="md:hidden text-sm text-right">{dateLabel}</div>
               </div>
-              <div className="md:hidden text-xs">
-                {`${item.dateType} - ${isBrowser ? item.date.toLocaleDateString(navigator.language) : ''}`}
-              </div>
-              <p className="m-0 text-sm text-gray-600 dark:text-gray-300">{item.description}</p>
             </section>
           </li>
         );

docs/static/_redirects

@@ -28,3 +28,4 @@
 /docs/features/search /docs/features/smart-search 301
 /docs/guides/api-album-sync /docs/community-projects 301
 /docs/guides/remove-offline-files /docs/community-projects 301
+/milestones /roadmap 301