Fix #22, fix #23. Display posts as grid instead of flexbox, add song info

src/lib/components/AvatarComponent.svelte

@@ -10,8 +10,8 @@
 
 <style>
   img {
-    max-width: 50px;
+    max-width: 100%;
-    max-height: 50px;
+    max-height: 100%;
     width: auto;
     height: auto;
     object-fit: contain;

src/lib/components/PostComponent.svelte

@@ -24,34 +24,139 @@
 
 <div class="wrapper">
   <div class="avatar"><AvatarComponent account={post.account} /></div>
-  <div class="post">
+  <div class="account"><AccountComponent account={post.account} /></div>
   <div class="meta">
-      <AccountComponent account={post.account} />
     <small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
   </div>
   <div class="content">{@html post.content}</div>
+  <div class="song">
+    {#if post.songs}
+      {#each post.songs as song (song.pageUrl)}
+        <div class="info-wrapper">
+          <div class="bgimage" style="background-image: url({song.thumbnailUrl});" />
+          <a href={song.pageUrl ?? song.postedUrl} target="_blank">
+            <div class="info">
+              <img
+                src={song.thumbnailUrl}
+                class="cover"
+                alt="Cover for {song.artistName} - {song.title}"
+              />
+              <span class="text">{song.artistName} - {song.title}</span>
+            </div>
+          </a>
+        </div>
+      {/each}
+    {/if}
   </div>
 </div>
 
 <style>
   .wrapper {
-    display: flex;
+    display: grid;
-  }
+    grid-template-columns: 50px 1fr auto auto;
-  .post {
+    grid-template-rows: auto 1fr auto;
-    display: flex;
+    grid-template-areas:
-    flex-direction: column;
+      'avatar account account meta'
-    flex-grow: 2;
+      'avatar content content song'
-    word-break: break-word;
+      '. content content song';
-  }
+    grid-column-gap: 6px;
-  .meta {
+    column-gap: 6px;
-    display: flex;
+    grid-row-gap: 6px;
-    justify-content: space-between;
+    row-gap: 6px;
   }
   .avatar {
-    margin-right: 1em;
+    grid-area: avatar;
+    max-width: 50px;
+    max-height: 50px;
+  }
+  .account {
+    grid-area: account;
+  }
+  .meta {
+    grid-area: meta;
+    justify-self: end;
   }
   .content {
-    max-width: calc(600px - 1em - 50px);
+    grid-area: content;
-    overflow-x: auto;
+    word-break: break-word;
+    translate: 0 -0.5em;
+  }
+  .song {
+    grid-area: song;
+    align-self: center;
+    justify-self: center;
+    max-width: 200px;
+  }
+  .cover {
+    max-width: 200px;
+    display: block;
+    border-radius: 3px;
+    margin-bottom: 3px;
+  }
+  .bgimage {
+    display: none;
+    background-color: var(--color-bg);
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5em;
+    z-index: 1;
+  }
+  .info * {
+    z-index: inherit;
+  }
+  @media only screen and (max-width: 650px) {
+    .wrapper {
+      grid-template-areas:
+        'avatar account account meta'
+        'content content content content'
+        'song song song song';
+      grid-row-gap: 3px;
+      row-gap: 3px;
+    }
+    .song {
+      width: 100%;
+    }
+    .song,
+    .cover {
+      max-width: 100%;
+    }
+    .cover {
+      height: 60px;
+    }
+    .cover:not(.background) {
+      z-index: 1;
+      width: 60px;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+    .bgimage {
+      display: block;
+      width: 100%;
+      height: 60px;
+      z-index: 0;
+      filter: blur(10px);
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+    }
+    .info {
+      position: relative;
+      top: -60px;
+      flex-direction: row;
+    }
+    .info-wrapper {
+      margin-bottom: -50px;
+    }
+    .text {
+      padding: 3px;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      border-radius: 3px;
+      background-color: var(--color-bg-translucent);
+      color: var(--color-text);
+    }
   }
 </style>

src/lib/server/db.ts

@@ -32,8 +32,15 @@ type PostTagRow = {
   url: string;
 };
 
-type SongRow = SongInfo & {
+type SongRow = {
   post_url: string;
+  postedUrl: string;
+  overviewUrl?: string;
+  type: 'album' | 'song';
+  youtubeUrl?: string;
+  title?: string;
+  artistName?: string;
+  thumbnailUrl?: string;
 };
 
 type Migration = {
@@ -468,7 +475,16 @@ function getSongData(postIdsParams: String, postIds: string[]): Promise<Map<stri
         }
         const songMap: Map<string, SongInfo[]> = tagRows.reduce(
           (result: Map<string, SongInfo[]>, item) => {
-            result.set(item.post_url, [...(result.get(item.post_url) || []), item]);
+            const info = {
+              pageUrl: item.overviewUrl,
+              youtubeUrl: item.youtubeUrl,
+              type: item.type,
+              title: item.title,
+              artistName: item.artistName,
+              thumbnailUrl: item.thumbnailUrl,
+              postedUrl: item.postedUrl
+            } as SongInfo;
+            result.set(item.post_url, [...(result.get(item.post_url) || []), info]);
             return result;
           },
           new Map()

src/lib/server/timeline.ts

@@ -176,6 +176,8 @@ export class TimelineReader {
             return;
           }
           log.debug('Found YT URL', youtubeUrl, found_urls, found_urls.length);
+        } else {
+          log.debug('Found URLs and/or tags:', found_urls, found_tags);
         }
 
         // TODO: Change URL detection above to use this regex.

static/style.css

@@ -21,6 +21,7 @@ body {
   --color-link: var(--color-mauve);
   --color-link-visited: var(--color-lavender);
   --color-bg: var(--color-grey-light);
+  --color-bg-translucent: hsla(42, 7%, 72%, 0.5);
   --color-button: var(--color-red-light);
   --color-button-shadow: var(--color-red-desat-dark);
   --color-button-hover: var(--color-red);
@@ -48,6 +49,7 @@ a:visited {
     --color-link: var(--color-mauve);
     --color-link-visited: var(--color-lavender);
     --color-bg: var(--color-blue);
+    --color-bg-translucent: hsla(259, 82%, 26%, 0.5);
     --color-button: var(--color-red-light);
     --color-button-shadow: var(--color-red-desat);
     --color-button-hover: var(--color-red);