Improve feature list + release Beta 2

src/assets/styles/window.css

@@ -144,4 +144,8 @@
 
 .bg-mix {
   background-color: #d7f0fe;
+}
+
+.dark\:bg-dark-mix:is(.dark *) {
+  background-color: #0b7ab0;
 }

src/components/ui/Tag.astro

@@ -0,0 +1,7 @@
+---
+import { twMerge } from 'tailwind-merge';
+
+const { tag = '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)}>{ tag }</span>

src/components/widgets/FeaturesList.astro

@@ -0,0 +1,53 @@
+---
+import Headline from '~/components/ui/Headline.astro';
+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';
+
+const {
+  title = await Astro.slots.render('title'),
+  subtitle = await Astro.slots.render('subtitle'),
+  tagline = await Astro.slots.render('tagline'),
+  products = [],
+  specs = [],
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props;
+---
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-3xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  <div>
+    <table class="w-full border-collapse border border-neutral-200 dark:border-neutral-800">
+      <thead>
+        <tr class="bg-neutral-100 dark:bg-neutral-700">
+          <th class="p-2 text-xl font-bold text-left">Features</th>
+          {
+            products.map((name) => (
+              <th class="p-2 text-xl font-bold">
+                <Fragment set:html={name} />
+              </th>
+            ))
+          }
+        </tr>
+      </thead>
+      <tbody>
+        {
+          specs.map(({ feature, isHeader, isV6, 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 && 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>
+</WidgetWrapper>

src/components/widgets/Header.astro

@@ -120,7 +120,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
                   ]}
                   href={href}
                 >
-                  {text}
+                  <Fragment set:html={text} />
                 </a>
               )}
             </li>

src/content/post/2024-10-14-v6-beta3.mdx

@@ -0,0 +1,46 @@
+---
+publishDate: 2024-10-15T18:00:00Z
+author: ildyria
+title: 'Bite-size v6: Beta.2 is Live!'
+excerpt: Bite-size v6 is a series of small post showing the progress made on the development of the future version of Lychee.
+image: https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?q=80&w=3544&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+category: Active Development
+tags:
+  - lychee
+  - vuejs
+  - v6
+---
+
+I got some nice and extensive feedback from Beta 1.
+See below the fixes and improvements that have been made in the Beta 2.
+
+- [x] : Fix pictures not being deleted when clicked on the button.
+- [x] : Fix links and bold which were invisible in light mode in Album and Photo descriptions
+- [x] : Add link shape check on Upload via Url
+- [x] : Dropbox upload is now set to `disabled` if it was empty, no more useless warning in Diagnostics.
+- [x] : Import from server is gone from the menu (it was already gone in v5).
+- [x] : Some labels have been updated for readability.
+- [x] : Added a button in the middle of the screen when the album is empty to prompt the upload of pictures.
+- [x] : Drag & Drop fixed on Upload + Full drag & drop support on album pages + Paste image support as upload on album pages.
+- [x] : Ongoing progress of uploads is now displayed on top of the modal.
+- [x] : Added tooltips on the action bar for photos (star, rotate, delete)
+- [x] : In slideshow the actions buttons for photos were still visible (though unusable).
+- [x] : Fixed the Edit photo dialog for consistent design.
+- [x] : Improved visibility form in Albums.
+- [x] : Add set as album header button in photo view
+- [x] : Rotating a photo refreshes the photo.
+- [x] : Added setting to preserve photo on upload when auto rotation is set.
+- [x] : Added swipe left / right to switch picture.
+- [x] : Added scroll up / down to switch picture.
+- [x] : Fixed some Warnings as Info in Diagnostics.
+- [x] : Fixed broken images on thumbs
+- [x] : After upload is completed, refresh album in the background
+- [x] : Switching from dark mode to light mode and vice-versa no longer requires reloading.
+- [x] : Fixed Photo details colors in light mode.
+- [x] : Do not show the Map when Map settings is disabled.
+- [x] : Fixes error messages showing up full screen when `dist/user.css` and `dist/custom.js` do not exist.
+- [x] : Add `GET api/v2/Photo::random` end point to request random pictures, this provides the full data of the photo instead of the src links for the frame.
+- [x] : Revamped completely the User Management panel.
+
+With this out of the pipe, it is now time to release a [new Beta version](https://github.com/LycheeOrg/Lychee/releases/tag/v6.0.0-beta.2).
+And as always, the Docker `alpha` tag reflects the latest changes to Version 6.

src/navigation.js

@@ -23,6 +23,10 @@ export const headerData = {
       text: 'About us',
       href: '/support',
     },
+    {
+      text: 'Lychee <span class="text-sky-500 ml-1">SE</span>',
+      href: '/get-supporter-edition',
+    },
     {
       text: 'Docs',
       href: '/docs',
@@ -39,11 +43,13 @@ export const footerData = {
       links: [
         { text: 'Read the Docs', href: '/docs' },
         { text: 'Community Forum', href: 'https://github.com/LycheeOrg/Lychee/discussions' },
+        { text: 'Join our discord', href: 'https://discord.gg/JMPvuRQcTf' },
       ],
     },
       {
         title: 'Support  Lychee',
         links: [
+          { text: 'Get Lychee <span class="text-sky-500">SE</span>', href: 'https://lycheeorg.github.io/get-supporter-edition' },
           { text: 'GitHub sponsor', href: 'https://github.com/sponsors/LycheeOrg' },
           { text: 'Open Collective', href: 'https://opencollective.com/LycheeOrg' },
         ],

src/pages/[...blog]/[...page].astro

@@ -8,6 +8,7 @@ import Pagination from '~/components/blog/Pagination.astro';
 // import PostTags from "~/components/blog/Tags.astro";
 
 import { blogListRobots, getStaticPathsBlogList } from '~/utils/blog';
+import CallToAction2 from '~/components/widgets/CallToAction2.astro';
 
 export const prerender = true;
 
@@ -48,5 +49,23 @@ const metadata = {
       <PostTags tags={allCategories} class="mb-2" title="Search by Categories:" isCategory />
       <PostTags tags={allTags}  title="Search by Tags:" />
     -->
-  </section>
+    <CallToAction2
+    classes={{headline: 'bg-white'}}
+    title="Support us!"
+    subtitle="If you are using Lychee, a small token of gratitude will go a long way. You can support further development of Lychee on GitHub."
+    actions={[
+      // {
+      //   variant: 'secondary',
+      //   text: '<img src="https://next-images.opencollective.com/_next/image?url=%2Fstatic%2Fimages%2Foc-logo-watercolor-256.png&w=64&q=75" class="h-5 w-5 mr-2.5"/>Open Collective',
+      //   href: 'https://opencollective.com/LycheeOrg',
+      // },
+      {
+        variant: 'secondary',
+        text: 'GitHub sponsor',
+        href: 'https://github.com/sponsors/LycheeOrg',
+        icon: 'tabler:heart',
+      },
+    ]}
+  /> 
+</section>
 </Layout>

src/pages/[...blog]/index.astro

@@ -53,13 +53,13 @@ const metadata = merge(
   <CallToAction2
   classes={{headline: 'bg-white'}}
   title="Support us!"
-  subtitle="If you are using Lychee, a small token of gratitude will go a long way. You can support further development of Lychee on opencollective or on GitHub."
+  subtitle="If you are using Lychee, a small token of gratitude will go a long way. You can support further development of Lychee on GitHub."
   actions={[
-    {
-      variant: 'secondary',
-      text: '<img src="https://next-images.opencollective.com/_next/image?url=%2Fstatic%2Fimages%2Foc-logo-watercolor-256.png&w=64&q=75" class="h-5 w-5 mr-2.5"/>Open Collective',
-      href: 'https://opencollective.com/LycheeOrg',
-    },
+    // {
+    //   variant: 'secondary',
+    //   text: '<img src="https://next-images.opencollective.com/_next/image?url=%2Fstatic%2Fimages%2Foc-logo-watercolor-256.png&w=64&q=75" class="h-5 w-5 mr-2.5"/>Open Collective',
+    //   href: 'https://opencollective.com/LycheeOrg',
+    // },
     {
       variant: 'secondary',
       text: 'GitHub sponsor',