Version 6! (#159)

---------

Co-authored-by: Martin Stone <[email protected]>

Author: ildyria

README.md

@@ -21,6 +21,15 @@ npm install
 pip install -r requirements.txt
 ```
 
+## Local dev
+
+In order to get the visual feedback of the website (without docs), you can run a local version:
+
+```sh
+npm run dev
+# Open http://localhost:4321/
+```
+
 # Generating
 
 Run `make` to generate the HTML files, which can then be found in `dist/`.

docs/releases.md

@@ -28,6 +28,89 @@
 }
 </style>
 
+## Version 6
+
+### v6.0.0
+
+Released on Oct 26, 2024
+
+#### Dropping Livewire for Vue3
+
+When we released version 5, we did not realize how much of a mistake switching to Livewire was.
+Lychee's front-end became slow and sluggish, plagued with issues.
+Most of the time as a work around, we had to advise users to disable version 5 of the front-end
+by setting the environment variable `LIVEWIRE_ENABLED=false`.
+
+With this in mind, at the end of June we came to the conclusion that we needed to build a new front-end from scratch.
+We decided to go with Vue3, as it is a more mature framework and has a lot of support. This marks the begining of the Lychee version 6.
+
+For more context on those changes, see our blog posts:
+
+- Jun 25, 2024 - [Livewire performances problems 📉](/2024-06-25-performance-problems/)
+- Jun 29, 2024 - [The future of Lychee: what is coming next. 🚀](/2024-06-29-future-of-lychee/)
+- Sep 24, 2024 - [About Lychee API documentation](/2024-09-24-v6-scramble/)
+
+
+#### Introducing Lychee SE
+
+For the past few years, Lychee has been developed by a [small group of people](https://lycheeorg.github.io/support/) who have been working on it in their free time. We are proud to offer this software for free and we will continue to do so. However with time our team has decreased to the point where maintaining Lychee has become a challenge. We have been thinking about ways to keep Lychee alive, to be able to keep providing support, and to add more features.
+
+We have come to the conclusion that we need to add a sponsor tier system. We have extended Lychee with a new version called SE (Supporter Edition) which will be available for our GitHub supporters. This SE version comes with enhanced features and configurations, helping us fund ongoing improvements while offering a bit extra to our supporters. The free version of Lychee will continue to be available but with a more streamlined feature set.
+
+We strongly encourage you to check the full comparison between the [free and supporter edition](https://lycheeorg.github.io/get-supporter-edition).  
+If you enjoy using Lychee, please consider [supporting us](https://github.com/sponsors/LycheeOrg).
+
+Thank you for helping us keep Lychee alive and growing!
+
+#### Important Docker Changes
+
+If you are consuming Lychee via Docker, you will probably need to update your `docker-compose.yml` file.
+In order solve the issue of temporary folders in the container, we added an extra volume `/lychee-tmp` which
+by default with the updated `docker-compose.yml` will be mapped to `./lychee/tmp`, see [here](https://github.com/LycheeOrg/Lychee-Docker/blob/master/docker-compose.yml).
+
+This volume allows you to control the temporary folder and avoid the issue of running out of space in the container.
+
+#### Changes
+
+`SE` refers to functionalities that are aimed at the Supporter Edition.
+
+* `new` #106 : have "Search" on all views by @ildyria.
+* `fixes` #126 : Add (optional) lossless rotation by @ildyria.
+  > Add the ability to over-write the original image with a temporary backup if the image was rotated.
+  > All the smaller sizes are normalized but the original is reverted back.
+  > Effectively, this is not lossless rotation, this is just no rotation for the original.
+* `fixes` #226 `SE` : Add counters for total pictures and subalbums by @ildyria.
+  > We added a statistic page, allowing the users to check how much space they are using
+  > and the total number of pictures and album that are in the library.
+* `new` #520 `SE` : Show and limit the space used by @ildyria.
+  > We introduced a quota system, allowing the admin to set a limit on the space used by each user.
+* `fixes` #987 : Open image in new tab by @ildyria.
+  > With the switch to Vue3, this feature is now fully functional.
+* `new` #1420 : Album name in link preview by @ildyria.
+* `new` #1641 `SE` : User note (only available to admin) by @ildyria.
+  > Admin can now add notes to users. Those are only visible to the admin users.
+* `fixes` #1987 : No space left on device by @ildyria.
+  > This error was mostly due to having temporary folders in the containers but without any ability to empty them.
+  > We now provide a UI to clean those folders, furthermore, those can now be mapped to a host directory.
+* `new` #2082 : SEO optimization 1/3 - Setting `<title>` and `<meta>` tags by @ildyria.
+  > The title and meta tag are directly fetched from the album targetted by the link.
+* `new` #2086 : Feature request: light theme for Lychee by @ildyria.
+  > Lychee now comes also with a Light theme, the user no longer needs to tweak their custom.css
+  > as there is now a native support for both dark and light sides.
+* `fixes` #2168 : Universal Drag & Drop and Paste to upload no longer work when using Livewire by @ildyria.
+  > When moving to version 5, this functionality was lost. We now re-introduce it.
+* `fixes` #2194 : Change album cover picture creates a slide show of all the picture after the selected one by @ildyria.
+  > Version 5 had this annoying re-rendering of the album when changing the cover picture which was completely messed up.
+  > By switching to Vue3, this is now fixed.
+* `fixes` #2361 : Image selecting does not work on chrome + MacOS by @ildyria.
+  > One of the main complaints of MacOs user was that CTRL was also opening the context menu.
+  > We now support the CMD key for MacOs users, this should fix this issue.
+* `fixes` #2495 : Inverted date on album tiles with multiple months by @ildyria.
+  > We provide the ability to change the order of the dates displayed both in the thumbs and hero on albums, cathering to either user preferences.
+* `dropped` : API Documentation.
+  > We have decided to drop the API documentation end-point as it was not working anymore.
+  > Read [more](https://lycheeorg.test/2024-09-24-v6-scramble/).
+
 ## Version 5
 
 ### v5.5.1

makefile

@@ -2,7 +2,7 @@ all: assets
 	@echo ""
 	@python3 gen.py
 
-.PHONY: assets
+.PHONY: assets docs
 
 node_modules:
 	npm install
@@ -25,4 +25,8 @@ update-python:
 	pip3 list --outdated --format=freeze | grep -v '^\-e' | cut -d = -f 1 | xargs -n1 pip3 install -U 
 
 clean: 
-	@rm -fr dist
+	@rm -fr dist
+
+docs:
+	@echo ""
+	@python3 gen.py

public/blog/v6/v6-live.png

@@ -0,0 +1,7 @@
+---
+import { twMerge } from 'tailwind-merge';
+
+const { tag = 'Soon <span class="hidden sm:inline">in v6</span>', classes = {} } = Astro.props;
+---
+
+<span class={twMerge("rounded-full text-xs text-white bg-sky-600 dark:text-neutral-200 dark:bg-sky-900 px-2 shadow-sm shadow-black/20 ml-2", classes)}><Fragment set:html={tag} /></span>

src/components/ui/Soon.astro

@@ -4,4 +4,4 @@ import { twMerge } from 'tailwind-merge';
 const { tag = '<span class="hidden sm:inline">New in </span>V6', classes = {} } = Astro.props;
 ---
 
-<span class={twMerge("rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20 ml-2", classes)}><Fragment set:html={tag} /></span>
+<span class={twMerge("rounded-full text-xs text-white bg-sky-300 dark:text-neutral-200 dark:bg-sky-600 px-2 shadow-sm shadow-black/20 ml-2", classes)}><Fragment set:html={tag} /></span>

src/components/ui/Tag.astro

@@ -3,15 +3,15 @@
 ---
 
 <div
-  class="dark text-muted text-sm bg-black dark:bg-transparent dark:border-b dark:border-slate-800 dark:text-slate-400 hidden md:flex gap-1 overflow-hidden px-3 py-2 relative text-ellipsis whitespace-nowrap"
+  class="dark text-slate-200 text-sm bg-black dark:bg-transparent dark:border-b dark:border-slate-800 dark:text-slate-300 hidden md:flex gap-1 overflow-hidden px-3 py-2 relative text-ellipsis whitespace-nowrap"
 >
   <span
-    class="dark:bg-slate-700 bg-white/40 dark:text-slate-300 font-semibold px-1 py-0.5 text-xs mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-block"
+    class="text-slate-200 dark:bg-sky-700 bg-sky-600 dark:text-slate-200 font-semibold px-1 py-0.5 text-xs mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-block"
     >NEW</span
   >
   <a
-    href="https://github.com/LycheeOrg/Lychee/releases/tag/v5.5.1"
-    class="text-muted hover:underline dark:text-slate-400 font-medium">Lychee 5.5.1 is now available! »</a
+    href="https://github.com/LycheeOrg/Lychee/releases/tag/v6.0.0"
+    class="text-slate-200 hover:underline dark:text-slate-200 font-medium">Lychee 6.0.0 is now available! »</a
   >
   <a
     target="_blank"

src/components/widgets/Announcement.astro

@@ -4,13 +4,15 @@ import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import type { FeaturesList as Props } from '~/types';
 import Tick from '../ui/Tick.astro';
 import Tag from '../ui/Tag.astro';
+import Soon from '../ui/Soon.astro';
 
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
   products = [],
   specs = [],
+  extra = await Astro.slots.render('extra'),
 
   id,
   isDark = false,
@@ -37,17 +39,18 @@ const {
       </thead>
       <tbody>
         {
-          specs.map(({ feature, isHeader, isV6, values, available }) => (
+          specs.map(({ feature, isHeader, isV6, isSoon, values, available }) => (
             <tr class={(isHeader && ' bg-neutral-50 dark:bg-neutral-800') || ''}>
               {isHeader && <td class="p-2 font-semibold"><Fragment set:html={feature} /></td>}
               {isHeader && products.map(() => <td class="p-2 text-center" />)}
-              {!isHeader && <td class="px-2 text-muted"><Fragment set:html={feature} />{ isV6 && <Tag/> }</td> }
+              {!isHeader && <td class="px-2 text-muted"><Fragment set:html={feature} />{ (!isSoon && isV6) && <Tag/> }{ isSoon && <Soon/> }</td> }
               {!isHeader && values && (values.map((val) => <td class="px-2 text-muted text-center">{val}</td>))}
               {!isHeader && available && available.map((yes) => <td class="px-2 text-muted text-center">{yes && <Tick />}</td>)}
             </tr>
           ))
         }
       </tbody>
     </table>
+    <div class="text-xs text-muted pt-2"><Fragment set:html={extra} /></div>
   </div>
 </WidgetWrapper>

src/components/widgets/FeaturesList.astro

@@ -0,0 +1,57 @@
+---
+publishDate: 2024-10-26T23:00:00Z
+author: ildyria
+title: 'Lychee Version 6 is Live!'
+excerpt: We are excited to announce the release of Lychee version 6, a complete rewrite of the frontend for an drastically improved user experience.
+image: /blog/v6/v6-live.png
+category: Release Notes
+tags:
+  - release
+  - lychee
+  - vuejs
+  - v6
+  - Supporter Edition
+---
+
+First and foremost, we are excited to announce the release of [Lychee version 6](https://github.com/LycheeOrg/Lychee/releases/tag/v6.0.0)!
+This new version brings a major upgrade with a completely reworked frontend built on [Vue.js](https://vuejs.org/).
+By leveraging the power and flexibility of Vue, we have enhanced the overall user experience,
+making the interface significantly more responsive, modern, and easier to navigate.
+
+If you are wondering what motivated such changes, we invite you to check our previous blog posts on the subject:
+- Jun 25, 2024 - [Livewire performances problems 📉](/2024-06-25-performance-problems/)
+- Jun 29, 2024 - [The future of Lychee: what is coming next. 🚀](/2024-06-29-future-of-lychee/)
+- Sep 24, 2024 - [About Lychee API documentation](/2024-09-24-v6-scramble/)
+
+### Some of the new Features
+
+While we originally did not plan to add new features and just rewrite the front-end, we ended up sneaking a few new things along the way:
+
+- **Improved User Interface**: A more responsive and modern frontend, providing an improved better user experience.
+- **Slideshow Mode**: A new slideshow mode has been added, allowing you to view your photos in a more dynamic way. Just press the space bar or click the play button in the header to start the slideshow.
+- **Dark and Light themes**: By popular demand, we have added the ability to chose between a dark and light themes. No more fiddling with CSS files!
+- **Upload by chunk**: Be free of the limitation imposed by your server. Large files are now automatically split into smaller chunks at your convenience.
+
+To know more about the changes, we invite you to check the [release notes](/docs/releases.html#v600).
+
+### Introducing Lychee <span class="text-sky-500">SE</span>
+
+For the past few years, Lychee has been developed by a [small group of people](/support/) who have been working on it in their free time. We are proud to offer this software for free and we will continue to do so. However with time our team has decreased to the point where maintaining Lychee has become a challenge. We have been thinking about ways to keep Lychee alive, to be able to keep providing support, and to add more features.
+
+We have come to the conclusion that we need to add a sponsor tier system. We have extended Lychee with a new version called <span class="text-sky-500">SE</span> (Supporter Edition) which will be available for our GitHub supporters. This <span class="text-sky-500">SE</span> version comes with enhanced features and configurations, helping us fund ongoing improvements while offering a bit extra to our supporters. The free version of Lychee will continue to be available but with a more streamlined feature set.
+
+We strongly encourage you to check the full comparison between the [free and supporter edition](/get-supporter-edition).  
+If you enjoy using Lychee, please consider [supporting us](https://github.com/sponsors/LycheeOrg).
+
+Thank you for helping us keep Lychee alive and growing!
+
+### Thanks
+
+Finally, I ([ildyria](https://github.com/ildyria)) have been working on this new front-end for the past few months and I am very proud of the result.
+Nevertheless, that release would not have been possible without the incredible support of two individuals: 
+- [Martin Stone](https://github.com/d7415),
+- [Tino Hager](https://github.com/tinohager).
+
+Tino has been a great help in the development of the new front-end, providing critical and constructive feedback on how to improve things.
+Martin has been an rock star reviewer, not shying away from a Pull Request with 1200+ files changes and more than 70 000 lines of code changed.
+Both of you are amazing and I am very grateful for your help!

src/content/post/2024-10-26-v6.mdx

@@ -10,11 +10,11 @@ export const headerData = {
           href: getBlogPermalink(),
         },
         {
-          text: 'The future of lychee',
-          href: getPermalink('2024-06-29-future-of-lychee', 'post'),
+          text: 'Lychee Version 6 is Live!',
+          href: getPermalink('2024-10-26-v6', 'post'),
         },
         {
-          text: 'About Version 6',
+          text: 'Current developments',
           href: getPermalink('v6', 'tag'),
         },
       ],