Add url to acc names

public/post-container.css

@@ -4,13 +4,12 @@
   --medium: 0.5em;
   --small: 0.25em;
   margin-bottom: var(--large);
-  
   display: grid;
-  grid: ". post ." / 33% 33% 33%;
+  grid: ". post ." / auto 66% auto;
 
   .mastodon-post {
     grid-area: post;
-    justify-self: center;
+    justify-self: stretch;
     display: grid;
     grid: 
       "header"
@@ -18,7 +17,7 @@
       "image"
       "link-preview"
       "footer" /
-      420px;
+      100%;
     border: 1px solid #ccc;
     padding: var(--small);
 
@@ -26,14 +25,15 @@
       grid-area: header;
       justify-self: stretch;
       display: grid;
-      grid:  "avatar names . date" / 60px;
+      grid:  "avatar names . date" / max-content max-content auto 20%;
       margin: var(--medium);
   
       .mastodon-post-avatar {
         grid-area: avatar;
         width: auto;
-        height: 116%;
+        max-height: 60px;
         object-fit: contain;
+        align-self: center;
       }
   
       .mastodon-post-names {
@@ -49,15 +49,20 @@
         .display-name {
           grid-area: dp-name;
           align-self: end;
+          text-decoration: none;
+          color: inherit;
         }
       
         .account-name {
           grid-area: ac-name;
           align-self: start;
+          text-decoration: none;
+          color: inherit;
         }
       }
 
       .mastodon-post-date {
+        font-size: 85%;
         grid-area: date;
         justify-self: end;
         align-self: center;
@@ -70,7 +75,7 @@
       display: grid;
       grid: 
         "text"
-        "image" / auto;
+        "image" / 100%;
       padding: var(--medium);
 
       .mastodon-post-text {
@@ -79,10 +84,10 @@
   
       .mastodon-post-image {
         grid-area: image;
-        width: 100%; /* Adjust as needed */
-        align-self: center;
-        justify-self: center;
+        max-width: 100%; /* Adjust as needed */
         height: auto;
+        align-self: center;
+        justify-self: center;        
         border-radius: 1em;
       }
     }
@@ -102,7 +107,7 @@
       .mastodon-post-link-image{
         grid-area: image;
         justify-self: center;
-        width: 100%;
+        max-width: 100%;
         height: auto;
         object-fit: cover;
         border-radius: 0.25em;
@@ -189,4 +194,33 @@
       }
     }
   }
+
+  @media screen and (max-width: 575px) {
+    font-size: 2.1vw;
+  }
+
+  @media screen and (min-width: 576px) {
+    font-size: 2vw;
+  }
+
+  @media screen and (min-width: 768px) {
+    font-size: 2vw;
+  }
+
+  @media screen and (min-width: 992px) {
+    font-size: 1.5vw;
+  }
+
+  @media screen and (min-width: 1200px) {
+    font-size: 1.25vw;
+  }
+
+  @media screen and (min-width: 1400px) {
+    font-size: 1.1vw;
+  }
+
+  @media screen and (min-width: 2004px) {
+    font-size: 1vw;
+  }
+
 }

src/main/dda/masto_embed/account_mode.cljs

@@ -50,13 +50,14 @@
                (mastocard->html card)]]]))
         statuses)])
 
-(defn masto-header->html [html account created_at]
+(defn masto-header->html [html account created_at url]
   (let [{:keys [username display_name avatar_static]} account
         date (t/parse created_at)]
     (-> html
         (cm/replace-all-matching-values-by-new-value "AVATAR_URL" avatar_static)
+        (cm/replace-all-matching-values-by-new-value "POST_URL" url)
         (cm/replace-all-matching-values-by-new-value "DISPLAY_NAME" display_name)
-        (cm/replace-all-matching-values-by-new-value "ACCOUNT_NAME" username)
+        (cm/replace-all-matching-values-by-new-value "ACCOUNT_NAME" (str "@" username))
         (cm/replace-all-matching-values-by-new-value "DATETIME" created_at)
         (cm/replace-all-matching-values-by-new-value "TIME" (t/unparse (t/formatter "EEEE, dd MMMM yyyy") date))
         )))
@@ -70,6 +71,15 @@
     (-> html
         (cm/replace-all-matching-values-by-new-value "POST_IMG_URL" media))))
 
+(defn masto-link-prev->html [html card]
+  (let [{:keys [url image title description]} card]
+    (-> html 
+        (cm/replace-all-matching-values-by-new-value "LINK_PREVIEW_URL" url)
+        (cm/replace-all-matching-values-by-new-value "LINK_PREVIEW_IMG_URL" image)
+        (cm/replace-all-matching-values-by-new-value "LINK_PREVIEW_TITLE" title)
+        (cm/replace-all-matching-values-by-new-value "LINK_PREVIEW_DESC" description)
+        )))
+
 (defn masto-footer->html [html replies_count reblogs_count favourites_count]
   (-> html
       (cm/replace-all-matching-values-by-new-value "REPLIES_COUNT" replies_count)
@@ -79,11 +89,12 @@
 (defn masto->html2 [statuses]
   (let [html (b/index-html-hiccup)]
     (map (fn [status]
-           (let [{:keys [account created_at content media_attachments replies_count reblogs_count favourites_count]} status]
+           (let [{:keys [account created_at content media_attachments replies_count reblogs_count favourites_count card url]} status]
              (-> html
-                 (masto-header->html account created_at)
+                 (masto-header->html account created_at url)
                  (masto-content->html content)
                  (masto-media->html media_attachments)
+                 (masto-link-prev->html card)
                  (masto-footer->html replies_count reblogs_count favourites_count))))
          statuses)))
 

src/main/dda/masto_embed/resources/post-container.scss

@@ -4,13 +4,12 @@
   --medium: 0.5em;
   --small: 0.25em;
   margin-bottom: var(--large);
-  
   display: grid;
-  grid: ". post ." / 33% 33% 33%;
+  grid: ". post ." / auto 66% auto;
 
   .mastodon-post {
     grid-area: post;
-    justify-self: center;
+    justify-self: stretch;
     display: grid;
     grid: 
       "header"
@@ -18,7 +17,7 @@
       "image"
       "link-preview"
       "footer" /
-      420px;
+      100%;
     border: 1px solid #ccc;
     padding: var(--small);
 
@@ -26,14 +25,15 @@
       grid-area: header;
       justify-self: stretch;
       display: grid;
-      grid:  "avatar names . date" / 60px;
+      grid:  "avatar names . date" / max-content max-content auto 20%;
       margin: var(--medium);
   
       .mastodon-post-avatar {
         grid-area: avatar;
         width: auto;
-        height: 116%;
+        max-height: 60px;
         object-fit: contain;
+        align-self: center;
       }
   
       .mastodon-post-names {
@@ -49,15 +49,20 @@
         .display-name {
           grid-area: dp-name;
           align-self: end;
+          text-decoration: none;
+          color: inherit;
         }
       
         .account-name {
           grid-area: ac-name;
           align-self: start;
+          text-decoration: none;
+          color: inherit;
         }
       }
 
       .mastodon-post-date {
+        font-size: 85%;
         grid-area: date;
         justify-self: end;
         align-self: center;
@@ -70,7 +75,7 @@
       display: grid;
       grid: 
         "text"
-        "image" / auto;
+        "image" / 100%;
       padding: var(--medium);
 
       .mastodon-post-text {
@@ -79,10 +84,10 @@
   
       .mastodon-post-image {
         grid-area: image;
-        width: 100%; /* Adjust as needed */
-        align-self: center;
-        justify-self: center;
+        max-width: 100%; /* Adjust as needed */
         height: auto;
+        align-self: center;
+        justify-self: center;        
         border-radius: 1em;
       }
     }
@@ -102,7 +107,7 @@
       .mastodon-post-link-image{
         grid-area: image;
         justify-self: center;
-        width: 100%;
+        max-width: 100%;
         height: auto;
         object-fit: cover;
         border-radius: 0.25em;
@@ -189,4 +194,33 @@
       }
     }
   }
+
+  @media screen and (max-width: 575px) {
+    font-size: 2.1vw;
+  }
+
+  @media screen and (min-width: 576px) {
+    font-size: 2vw;
+  }
+
+  @media screen and (min-width: 768px) {
+    font-size: 2vw;
+  }
+
+  @media screen and (min-width: 992px) {
+    font-size: 1.5vw;
+  }
+
+  @media screen and (min-width: 1200px) {
+    font-size: 1.25vw;
+  }
+
+  @media screen and (min-width: 1400px) {
+    font-size: 1.1vw;
+  }
+
+  @media screen and (min-width: 2004px) {
+    font-size: 1vw;
+  }
+
 }

src/main/dda/masto_embed/resources/post.html

@@ -3,8 +3,8 @@
     <header class="mastodon-post-header">
       <img class="mastodon-post-avatar" src="AVATAR_URL"></img>
       <div class="mastodon-post-names">
-        <a class="display-name">DISPLAY_NAME</a>
-        <a class="account-name">ACCOUNT_NAME</a>
+        <a class="display-name" href="POST_URL">DISPLAY_NAME</a>
+        <a class="account-name" href="POST_URL">ACCOUNT_NAME</a>
       </div>
       <time class="mastodon-post-date" datetime="DATETIME">TIME</time>
     </header>