feat: support AVIF image

src/components/event/textNote/ImageDisplay.tsx

@@ -2,7 +2,7 @@ import { Component, createSignal, Show } from 'solid-js';
 
 import SafeLink from '@/components/utils/SafeLink';
 import { useTranslation } from '@/i18n/useTranslation';
-import { fixUrl } from '@/utils/url';
+import { thumbnailUrl } from '@/utils/url';
 
 type ImageDisplayProps = {
   url: string;
@@ -30,7 +30,7 @@ const ImageDisplay: Component<ImageDisplayProps> = (props) => {
         <img
           ref={imageRef}
           class="max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
-          src={fixUrl(props.url)}
+          src={thumbnailUrl(props.url)}
           alt={props.url}
         />
       </SafeLink>

src/utils/url.test.ts

@@ -2,11 +2,11 @@ import assert from 'assert';
 
 import { describe, it } from 'vitest';
 
-import { fixUrl } from '@/utils/url';
+import { thumbnailUrl } from '@/utils/url';
 
-describe('fixUrl', () => {
+describe('thumbnailUrl', () => {
   it('should return an image url for a given imgur.com URL with additional path', () => {
-    const actual = fixUrl('https://imgur.com/uBf5Qts.jpeg');
+    const actual = thumbnailUrl('https://imgur.com/uBf5Qts.jpeg');
     const expected = 'https://i.imgur.com/uBf5Qtsl.webp';
     assert.deepStrictEqual(actual, expected);
   });

src/utils/url.ts

@@ -1,7 +1,7 @@
 export const isImageUrl = (urlString: string): boolean => {
   try {
     const url = new URL(urlString);
-    return /\.(jpeg|jpg|png|gif|webp|apng|svg)$/i.test(url.pathname);
+    return /\.(jpeg|jpg|png|gif|webp|avif|apng|svg)$/i.test(url.pathname);
   } catch {
     return false;
   }
@@ -16,7 +16,10 @@ export const isVideoUrl = (urlString: string): boolean => {
   }
 };
 
-export const fixUrl = (urlString: string): string => {
+/**
+ * Generate a URL of thumbnail for a given URL.
+ */
+export const thumbnailUrl = (urlString: string): string => {
   try {
     const url = new URL(urlString);
     // Imgur