src/profiles/Profile.tsx

@@ -116,13 +116,6 @@ const Profile: Component = () => {
       gap: 16px;
     }
 
-    .description {
-      & :global(a) {
-        color: inherit;
-        font-style: italic;
-      }
-    }
-
     .acct-grp {
       display: flex;
       flex-flow: row wrap;
@@ -281,7 +274,6 @@ const Profile: Component = () => {
               average: colors.hex,
               text: colors.isDark ? "white" : "black",
             });
-            ins.destroy();
           }}
         ></img>
       </div>
@@ -317,7 +309,6 @@ const Profile: Component = () => {
           </div>
         </div>
         <div
-          class="description"
           ref={(e) =>
             createRenderEffect(() => (e.innerHTML = description() || ""))
           }

src/timelines/MediaAttachmentGrid.tsx

@@ -2,7 +2,6 @@ import type { mastodon } from "masto";
 import {
   type Component,
   For,
-  Index,
   createMemo,
   createRenderEffect,
   createSignal,
@@ -104,31 +103,6 @@ const MediaAttachmentGrid: Component<{
     };
   });
 
-  const itemStyle = (item: mastodon.v1.MediaAttachment) => {
-    const { width, height } = constraintedSize(
-      item.meta?.small || { width: 1, height: 1 },
-      { width: 2, height: 2 },
-      itemMaxSize(),
-    );
-
-    // I don't know why mastodon does not return this
-    // and the condition for it to return this.
-    // Anyway, It is useless now.
-    // My hope is the FastAverageColor, but
-    // we may need better tool to manage the performance impact
-    // before using this. See #37.
-    // TODO: use fast average color to extract accent color
-    const accentColor = item.meta?.colors?.accent;
-
-    return Object.assign(
-      {
-        width: `${width}px`,
-        height: `${height}px`,
-      },
-      accentColor ? { "--media-color-accent": accentColor } : {},
-    );
-  };
-
   css`
     .attachments {
       column-count: ${columnCount().toString()};
@@ -144,48 +118,68 @@ const MediaAttachmentGrid: Component<{
         }
       }}
     >
-      <Index each={props.attachments}>
+      <For each={props.attachments}>
         {(item, index) => {
-          switch (item().type) {
+          // I don't know why mastodon does not return this
+          // and the condition for it to return this.
+          // Anyway, It is useless now.
+          // My hope is the FastAverageColor, but
+          // we may need better tool to manage the performance impact
+          // before using this. See #37.
+          // TODO: use fast average color to extract accent color
+          const accentColor = item.meta?.colors?.accent;
+          const { width, height } = item.meta?.small || {};
+
+          const size = () => {
+            return constraintedSize(
+              item.meta?.small || { width: 1, height: 1 },
+              { width: 2, height: 2 },
+              itemMaxSize(),
+            );
+          };
+
+          switch (item.type) {
             case "image":
               return (
                 <img
-                  data-sort={index}
+                  src={item.previewUrl}
-                  src={item().previewUrl}
+                  width={width}
-                  width={item().meta?.small?.width}
+                  height={height}
-                  height={item().meta?.small?.height}
+                  alt={item.description || undefined}
-                  alt={item().description || undefined}
+                  onClick={[openViewerFor, index()]}
-                  onClick={[openViewerFor, index]}
                   loading="lazy"
-                  style={itemStyle(item())}
+                  style={Object.assign(
+                    {
+                      width: `${size().width}px`,
+                      height: `${size().height}px`,
+                    },
+                    accentColor ? { "--media-color-accent": accentColor } : {},
+                  )}
                 ></img>
               );
             case "video":
               return (
                 <video
-                  data-sort={index}
+                  src={item.url || undefined}
-                  src={item().url || undefined}
                   autoplay={settings().autoPlayVideos}
                   playsinline={settings().autoPlayVideos ? true : undefined}
                   controls
-                  poster={item().previewUrl}
+                  poster={item.previewUrl}
-                  width={item().meta?.small?.width}
+                  width={width}
-                  height={item().meta?.small?.height}
+                  height={height}
-                  style={itemStyle(item())}
                 />
               );
             case "gifv":
               return (
                 <video
-                  src={item().url || undefined}
+                  src={item.url || undefined}
                   autoplay={settings().autoPlayGIFs}
                   controls
                   playsinline /* or safari on iOS will play in full-screen */
                   loop
-                  poster={item().previewUrl}
+                  poster={item.previewUrl}
-                  width={item().meta?.small?.width}
+                  width={width}
-                  height={item().meta?.small?.height}
+                  height={height}
-                  style={itemStyle(item())}
                 />
               );
 
@@ -194,7 +188,7 @@ const MediaAttachmentGrid: Component<{
               return <div></div>;
           }
         }}
-      </Index>
+      </For>
     </section>
   );
 };