Parse and fill header and text

Refactor for account mode output
Index to post
2024-05-16 11:56:33 +02:00 · 2024-05-16 11:55:55 +02:00 · 2024-05-16 11:55:17 +02:00
5 changed files with 254 additions and 21 deletions
--- a/public/index.html
+++ b/public/index.html
@ -4,13 +4,13 @@
    <meta charset="utf-8" />
    <title>masto-embed</title>
  </head>
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+  <link rel="stylesheet" href="post-container.css">
  <body>
    <div class="container">
      <div id="masto-embed" 
-        account_name="team"
+        account_name="meissa"
        host_url="https://social.meissa-gmbh.de"
-        replies_to="107937234506182462"
+        
        filter_favorited=true>
        Here the timeline will appear.
      </div>
--- a/public/post-container.css
+++ b/public/post-container.css
@ -0,0 +1,192 @@
+.section.post-container {
+
+  --large: 1em;
+  --medium: 0.5em;
+  --small: 0.25em;
+  margin-bottom: var(--large);
+  
+  display: grid;
+  grid: ". post ." / 33% 33% 33%;
+
+  .mastodon-post {
+    grid-area: post;
+    justify-self: center;
+    display: grid;
+    grid: 
+      "header"
+      "content"
+      "image"
+      "link-preview"
+      "footer" /
+      420px;
+    border: 1px solid #ccc;
+    padding: var(--small);
+
+    .mastodon-post-header {
+      grid-area: header;
+      justify-self: stretch;
+      display: grid;
+      grid:  "avatar names . date" / 60px;
+      margin: var(--medium);
+  
+      .mastodon-post-avatar {
+        grid-area: avatar;
+        width: auto;
+        height: 116%;
+        object-fit: contain;
+      }
+  
+      .mastodon-post-names {
+        grid-area: names;
+        display: grid;
+        grid: 
+          "dp-name"
+          "ac-name" /
+          auto;
+        justify-self: start;
+        margin-left: var(--medium);
+  
+        .display-name {
+          grid-area: dp-name;
+          align-self: end;
+        }
+      
+        .account-name {
+          grid-area: ac-name;
+          align-self: start;
+        }
+      }
+
+      .mastodon-post-date {
+        grid-area: date;
+        justify-self: end;
+        align-self: center;
+        margin-right: 1em;
+      }   
+    }
+
+    .mastodon-post-content {
+      grid-area: content;
+      display: grid;
+      grid: 
+        "text"
+        "image" / auto;
+      padding: var(--medium);
+
+      .mastodon-post-text {
+        grid-area: text;
+      }
+  
+      .mastodon-post-image {
+        grid-area: image;
+        width: 100%; /* Adjust as needed */
+        align-self: center;
+        justify-self: center;
+        height: auto;
+        border-radius: 1em;
+      }
+    }
+
+    .mastodon-post-link-preview {
+      grid-area: link-preview;
+      justify-self: center;
+      display: grid;
+      grid:
+        "image"
+        "info" / 100%;
+      text-decoration: none;
+      border: 1px solid #ccc;
+      border-radius: 0.25em;
+      margin: var(--medium);
+
+      .mastodon-post-link-image{
+        grid-area: image;
+        justify-self: center;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius: 0.25em;
+        margin-bottom: var(--small);
+      }
+
+      .mastodon-post-link-info {
+        grid-area: info;
+        grid: 
+        "." "link-title" "."
+        "." "link-description" "."
+        "." "link-url" "." / auto auto auto;
+        padding: var(--small);
+        
+        .mastodon-post-link-title {
+          grid-area: link-title;
+          color: #383838;
+          font-weight: bold;
+        }
+      
+        .mastodon-post-link-description {
+          color: #383838;
+          grid-area: link-description;
+        }
+      
+        .mastodon-post-link-url {
+          grid-area: link-url;
+          color: #666;
+        }
+      }
+    }
+
+    .mastodon-post-footer {
+      margin-right: var(--medium);
+      margin-left:  var(--medium);
+      grid-area: footer;
+      display: grid;
+      justify-content: space-between;
+      grid:
+        "replies retoots likes" 
+        / auto auto auto;
+      padding-top: var(--small);
+
+      .footer-button {
+        background: none;
+        border: none;
+        display: flex;
+        svg {
+          width: 24px;
+          height: 24px;
+          margin-right: var(--small);
+        }
+      }
+
+      .replies {
+        justify-self: center;
+        grid-area: replies;
+      }
+
+      .retoots {
+        justify-self: center;
+        grid-area: retoots;    
+      }
+
+      .likes {
+        justify-self: center;
+        grid-area: likes;
+      }
+
+      .like-count {
+        justify-self: center;
+        grid-area: like-count;
+      }
+
+      .retoot-count {
+        justify-self: center;
+        align-self: center;
+        grid-area: retoot-count;
+      }
+
+      .reply-count {
+        justify-self: center;
+        grid-area: reply-count;
+      }
+    }
+  }
+}
--- a/src/main/dda/masto_embed/account_mode.cljs
+++ b/src/main/dda/masto_embed/account_mode.cljs
@ -50,20 +50,42 @@
               (mastocard->html card)]]]))
        statuses)])

-(defn masto->html2 [statuses]
-  (let [html (b/index-html-hiccup)]
-    (map (fn [status]
-           (let [{:keys [account created-at]} status])))))
-
-(defn masto-header->html [html account created-at]
+(defn masto-header->html [html account created_at]
  (let [{:keys [username display_name avatar_static]} account
-        date (t/parse created-at)]
+        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 "DISPLAY_NAME" display_name)
        (cm/replace-all-matching-values-by-new-value "ACCOUNT_NAME" 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 "dd M yy") date)))))
+        (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))
+        )))
+
+(defn masto-content->html [html content]
+    (-> html
+        (cm/replace-all-matching-values-by-new-value "POST_TEXT" content)))
+
+(defn masto-media->html [html media_attachments]
+  (let [{:keys [media]} media_attachments]
+    (-> html
+        (cm/replace-all-matching-values-by-new-value "POST_IMG_URL" media))))
+
+(defn masto-footer->html [html replies_count reblogs_count favourites_count]
+  (-> html
+      (cm/replace-all-matching-values-by-new-value "REPLIES_COUNT" replies_count)
+      (cm/replace-all-matching-values-by-new-value "REBLOGS_COUNT" reblogs_count)
+      (cm/replace-all-matching-values-by-new-value "FAVOURITES_COUNT" favourites_count)))
+
+(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]
+             (-> html
+                 (masto-header->html account created_at)
+                 (masto-content->html content)
+                 (masto-media->html media_attachments)
+                 (masto-footer->html replies_count reblogs_count favourites_count))))
+         statuses)))

 (defn find-account-id [host-url account-name]
  (let [out (chan)]
@ -89,7 +111,7 @@
           (filter #(= nil (:reblog %)))
           (filter #(= nil (:in_reply_to_account_id %)))
           (take 4)
-           (masto->html)
+           (masto->html2)
           (render-html)
           (b/render-to-document)))))

@ -194,4 +216,25 @@
 :edited_at nil,
 :visibility "public",
 :created_at "2024-05-15T17:14:50.257Z",
- :spoiler_text ""}
+ :spoiler_text ""}
+
+:media_attachments
+[{:description "Plastikmüll gesammelt",
+  :meta
+  {:original
+   {:width 1500, :height 2000, :size "1500x2000", :aspect 0.75},
+   :small
+   {:width 416,
+    :height 554,
+    :size "416x554",
+    :aspect 0.7509025270758123}},
+  :type "image",
+  :blurhash "UAFiMmx^9aE1yEjEM|%N0eD%w]t7D$%NR4tR",
+  :preview_url
+  "https://cdn.masto.host/socialmeissagmbhde/media_attachments/files/112/432/505/467/393/505/small/0d01ddb07440328e.jpg",
+  :preview_remote_url nil,
+  :id "112432505467393505",
+  :url
+  "https://cdn.masto.host/socialmeissagmbhde/media_attachments/files/112/432/505/467/393/505/original/0d01ddb07440328e.jpg",
+  :remote_url nil,
+  :text_url nil}],
--- a/src/main/dda/masto_embed/browser.cljs
+++ b/src/main/dda/masto_embed/browser.cljs
@ -20,7 +20,7 @@

 (def masto-embed "masto-embed")

-(def index-html (rc/inline "dda/masto_embed/resources/index.html"))
+(def index-html (rc/inline "dda/masto_embed/resources/post.html"))

 (defn index-html-hiccup []
  (h/as-hiccup (h/parse index-html)))
--- a/src/main/dda/masto_embed/resources/index.html
+++ b/src/main/dda/masto_embed/resources/index.html
@ -6,9 +6,7 @@
        <a class="display-name">DISPLAY_NAME</a>
        <a class="account-name">ACCOUNT_NAME</a>
      </div>
-      <time class="mastodon-post-date" datetime="DATETIME">
-        TIME
-      </time>
+      <time class="mastodon-post-date" datetime="DATETIME">TIME</time>
    </header>
    <section class="mastodon-post-content">
      <p class="mastodon-post-text">POST_TEXT</p>
@ -27,19 +25,19 @@
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.999989 18.905102" fill="currentColor">
            <path d="M 12.605469 0 C 6.3127313 -3.016065e-07 1.2128906 3.6227598 1.2128906 8.0917969 C 1.2082806 9.3482967 1.6202949 10.587431 2.4179688 11.708984 C 2.4578657 11.764164 2.498768 11.811806 2.5390625 11.865234 C 3.3268045 11.641832 4.3869061 11.848285 5.3300781 12.486328 C 6.3288461 13.162012 6.9253832 14.138795 6.953125 14.988281 C 7.1369873 15.068801 7.3124925 15.149004 7.5117188 15.232422 C 9.0912976 15.798243 10.836341 16.090505 12.605469 16.087891 C 16.920323 16.086691 20.863977 14.35437 22.792969 11.613281 C 23.580255 10.506333 23.991872 9.2846052 23.998047 8.0449219 C 23.962291 3.5975966 18.876044 0 12.605469 0 z M 23.998047 8.0449219 C 23.998174 8.0606359 24 8.0760629 24 8.0917969 L 24 7.9960938 C 24.00006 8.0124607 23.998147 8.0285639 23.998047 8.0449219 z M 2.9121094 12.222656 C 2.2425334 12.223796 1.667313 12.46211 1.3457031 12.9375 C 1.1638316 13.204122 1.077675 13.531936 1.09375 13.890625 C 1.1537212 14.293189 1.209808 14.432962 1.3125 14.671875 C 1.4316055 14.948973 1.7207031 15.40625 1.7207031 15.40625 C 1.9907532 15.764415 2.3364315 16.089696 2.7304688 16.355469 C 3.6907784 17.004767 4.8168668 17.230272 5.640625 16.9375 C 5.9710419 16.821946 6.2362892 16.627161 6.4160156 16.369141 C 7.0592353 15.418362 6.445179 13.878941 5.0449219 12.931641 C 4.3447931 12.457991 3.5816854 12.221516 2.9121094 12.222656 z M 1.0195312 16.197266 C 0.64478833 16.1979 0.32257415 16.331594 0.14257812 16.597656 C 0.040789845 16.746877 -0.007044805 16.928158 0.001953125 17.128906 C 0.035517005 17.35421 0.065572735 17.432694 0.12304688 17.566406 C 0.18970686 17.72149 0.3515625 17.978516 0.3515625 17.978516 C 0.50270196 18.178971 0.69743713 18.361021 0.91796875 18.509766 C 1.4554271 18.873168 2.0858405 18.99784 2.546875 18.833984 C 2.7316813 18.769352 2.8798841 18.661846 2.9804688 18.517578 C 3.3404608 17.985454 2.9965753 17.123927 2.2128906 16.59375 C 1.8210482 16.328648 1.3942742 16.196631 1.0195312 16.197266 z "/>
        </svg>
-        <span class="count  reply-count">REPLY_COUNT</span>
+        <span class="count  reply-count">REPLIES_COUNT</span>
      </button>
      <button class="footer-button retoots">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15.292642" fill="currentColor">
          <path  d="M 5.5533678,0 C 3.6714839,2.400492 1.6157603,5.1817846 0,7.362011 c 1.4380083,0 2.4385201,-5.881e-4 3.6172864,0.024507 v 3.36241 c 0,2.591649 -0.00735,3.641069 -0.00735,4.541214 0.9377142,0 1.8786511,0.0025 4.6000315,0.0025 h 9.6117861 c -0.967065,-1.240489 -1.863419,-2.423552 -2.791388,-3.644245 -2.391113,-0.01058 -5.4310727,0 -7.7149168,0 0,-1.389694 0.00491,-2.9515088 0.00491,-4.2863375 H 10.998903 C 9.4664195,5.0599896 7.0361202,1.897534 5.5533678,0 Z m 0.6249377,0 c 0.9523292,1.225788 1.9124438,2.5142572 2.7766839,3.6368923 2.3911146,0.010578 5.4433266,0.00491 7.7271706,0.00491 0,1.3896944 -0.0025,2.9515086 -0.0025,4.2863373 h -3.678556 c 1.532486,2.3020214 3.962784,5.4669284 5.445536,7.3644624 1.881875,-2.400496 3.9376,-5.18424 5.55336,-7.3644663 -1.438009,0 -2.440971,5.881e-4 -3.619738,-0.024507 V 4.5412139 c 0,-2.5916487 0.0098,-3.64106836 0.0098,-4.5412139 -0.937714,0 -1.881102,0 -4.602482,0 z"/>
        </svg>
-        <span class="count retoot-count">RETOOT_COUNT</span>
+        <span class="count retoot-count">REBLOGS_COUNT</span>
      </button>
      <button class="footer-button likes">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22.799999" fill="currentColor">
          <path d="M 12,18.324 19.416,22.8 17.448,14.364 24,8.688 15.372,7.956 12,0 8.628,7.956 0,8.688 6.552,14.364 4.584,22.8 Z"/>
        </svg>
-        <span class="count like-count">LIKE_COUNT</span>
+        <span class="count like-count">FAVOURITES_COUNT</span>
      </button>
    </footer>
  </article>
Author	SHA1	Message	Date
erik	6a99a4a9ea	Parse and fill header and text	2024-05-16 11:56:33 +02:00
erik	88aee64dad	Refactor for account mode output	2024-05-16 11:55:55 +02:00
erik	6c9372c80f	Index to post	2024-05-16 11:55:17 +02:00