Split mode functions into raw and rendered

If we want to create different html to the default the raw functions can be used to build html from the reply itself.
General cleanup
2024-11-15 11:02:06 +01:00 · 2024-11-15 10:54:30 +01:00 · 2024-08-06 15:01:00 +02:00 · 2024-08-06 14:52:34 +02:00 · 2024-08-06 14:43:15 +02:00 · 2024-05-31 11:06:51 +02:00
29 changed files with 2024 additions and 2432 deletions
--- a/.gitignore
+++ b/.gitignore
@ -11,8 +11,17 @@ pom.xml.asc
 .lein-plugins/
 .lein-failures
 .nrepl-port
+package-lock.json
+output.calva-repl
 .cpcache/
 .shadow-cljs/
 node_modules/
 /public/js
-/out
+/out
+package-lock.json
+/.lsp/
+/.clj-kondo/
+
+*.pyc
+t2
+t1
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,55 @@
+stages:
+  - build_and_test
+  - package
+  - upload
+
+.cljs-job: &cljs
+  image: "domaindrivenarchitecture/ddadevops-clj-cljs:4.11.3"
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - node_modules/
+      - .shadow-cljs/
+      - .m2
+  before_script:
+  - export RELEASE_ARTIFACT_TOKEN=$MEISSA_REPO_BUERO_RW
+  - echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
+  - npm install
+
+.tag_only: &tag_only
+  rules:
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
+      when: never
+    - if: '$CI_COMMIT_TAG =~ /^[0-9]+\.[0-9]+\.[0-9]+$/'
+
+test-cljs:
+  <<: *cljs
+  stage: build_and_test
+  script:
+    - pyb test_cljs
+
+report-frontend:
+  <<: *cljs
+  stage: package
+  script:
+    - pyb report_frontend
+  artifacts:
+    paths:
+      - target/build-report.html
+
+package-frontend:
+  <<: *cljs
+  stage: package
+  script:
+    - pyb package_frontend
+  artifacts:
+    paths:
+      - target/
+
+release-to-forgejo:
+  <<: *cljs
+  <<: *tag_only
+  stage: upload
+  script:
+    - pyb publish_artifacts
+
--- a/README.md
+++ b/README.md
@ -1,20 +1,142 @@
 # dda-masto-embed
-Embeds mastodon timline into a html page. Uses JS, no intermediate server required.

+![build](https://gitlab.com/domaindrivenarchitecture/dda-masto-embed/-/commits/master) | [![pipeline status](https://gitlab.com/domaindrivenarchitecture/dda-masto-embed/badges/main/pipeline.svg)](https://gitlab.com/domaindrivenarchitecture/dda-masto-embed/-/commits/master)  

-# Setup
+[<img src="https://domaindrivenarchitecture.org/img/delta-chat.svg" width=20 alt="DeltaChat"> chat over e-mail](mailto:buero@meissa-gmbh.de?subject=community-chat) | [<img src="https://meissa.de/images/parts/contact/mastodon36_hue9b2464f10b18e134322af482b9c915e_5501_filter_14705073121015236177.png" width=20 alt="M"> meissa@social.meissa-gmbh.de](https://social.meissa-gmbh.de/@meissa) | [Blog](https://domaindrivenarchitecture.org) | [Website](https://meissa.de)

-```
-npm install npx
-npm install shadow-cljs
-npm install source-map-support --save-dev
-npm install mastodon-api
+## In brief
+
+dda-masto-embed embedd either your timeline or replies to a specific post on your website.
+
+* Uses JS, **no intermediate server** required,
+* in replies mode you can decide to show only favorited replies in order to do upfront moderation
+* example for embedding a timeline at [meissa.de/news](https://meissa.de/news/)
+* example for embedding replies to a specific post at [meissa.de/sustainibility_microplastic](https://meissa.de/about-meissa/03plastik-aktion/)
+* Download latest version at:
+  * [dda-masto-embed.js](https://repo.prod.meissa.de/attachments/fd727528-0ab4-42d1-bade-8ff129997315)
+  * [dda-masto-embed.js.sha256](https://repo.prod.meissa.de/attachments/fd727528-0ab4-42d1-bade-8ff129997315)
+  * [dda-masto-embed.js.sha512](https://repo.prod.meissa.de/attachments/fd727528-0ab4-42d1-bade-8ff129997315)
+* It is **OpenSource** - published under the Apache License, Version 2.0
+
+### css and html as base
+
+Uses a generalized HTML structure with descriptive classes and css grid for styling.
+The structure in the css follows the html structure. Both accound mode and replies mode are styled there.
+
+Re-styling your timeline should now be a breeze.
+
+## Include a timeline
+
+Including a timeline needs the following html. The div with id `masto-embed` configures the timeline to be shown.
+We use bootstrap for rough styling. More styling is up to you at the moment, help is welcome :-)
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>masto-embed</title>
+    <link rel="stylesheet" href="post.css">
+  </head>
+  <body>
+    <div id="masto-embed" 
+          account_name="team"
+          host_url="https://social.meissa-gmbh.de">
+      Here the timeline will appear.
+    </div>
+    <script src="https://domaindrivenarchitecture.org/downloads/dda-masto-embed.js"></script>
+  </body>
+</html>
 ```

-# Development
+Reference:

+* `id` has to be `masto-embed`
+* `account_name` is the name of your account.
+* `host_url` the url of your mastodon instance.
+* Use the `post.css` from the src/main/resources or the public folder. 
+
+## Using in reply mode
+
+Including replies of one of your posts will work as follows:
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>masto-embed</title>
+    <link rel="stylesheet" href="post.css">
+  </head>
+  <body>
+    <div id="masto-embed" 
+          account_name="team"
+          replies_to="112432461907918517"
+          filter_favorited=false
+          host_url="https://social.meissa-gmbh.de">
+      Here the timeline will appear.
+    </div>
+    <script src="https://domaindrivenarchitecture.org/downloads/dda-masto-embed.js"></script>
+  </body>
+</html>
 ```
-shadow-cljs node-repl
+
+Reference:
+
+* `id` has to be `masto-embed`
+* `account_name` is the name of your account.
+* `host_url` the url of your mastodon instance.
+* `replies_to` the id of your post.
+* `filter_favorited=<true|false>` true will show only favorited replies, false will show every answer.
+
+## Dev setup
+
+```bash
+npm install -g npx
+npm install -g shadow-cljs
+npm install -g source-map-support --save-dev
+npm install
 shadow-cljs watch frontend
+```
+
+open browser at http://localhost:8080
+
+Connect your repl for :frontend
+
+## Run the tests
+
+```bash
 shadow-cljs compile test
 ```
+
+## Releasing
+
+### prod release
+
+```bash
+#adjust version
+vi package.json
+git commit -am 'releasing'
+git tag -am 'releasing' <version>
+git push --follow-tags
+
+# Bump version
+vi package.json
+git commit -am "version bump" && git push
+```
+
+## Development & mirrors
+
+Development happens at: https://repo.prod.meissa.de/meissa/dda-masto-embed
+
+Mirrors are:
+
+* https://codeberg.org/meissa/dda-masto-embed (issues and PR)
+* https://gitlab.com/domaindrivenarchitecture/dda-masto-embed (CI issues and PR)
+* https://github.com/DomainDrivenArchitecture/dda-masto-embed
+
+## License
+
+Copyright © 2024 meissa GmbH
+Licensed under the [Apache License, Version 2.0](LICENSE) (the "License")
+Pls. find licenses of our subcomponents [here](doc/SUBCOMPONENT_LICENSE)
--- a/build.py
+++ b/build.py
@ -0,0 +1,133 @@
+from os import environ
+from subprocess import run
+from pybuilder.core import init, task
+from ddadevops import *
+
+default_task = "dev"
+base_name = "dda-masto-embed"
+name = 'dda-masto-embed'
+MODULE = 'not-used'
+PROJECT_ROOT_PATH = '.'
+
+version = "1.0.2-dev"
+
+@init
+def initialize(project):
+    project.build_depends_on("ddadevops>=4.7.0")
+
+    input = {
+        "name": name,
+        "module": MODULE,
+        "stage": "notused",
+        "project_root_path": PROJECT_ROOT_PATH,
+        "build_types": [],
+        "mixin_types": ["RELEASE"],
+        "release_primary_build_file": "package.json",
+        "release_secondary_build_files": [
+            "build.py"
+        ],
+        "release_artifact_server_url": "https://repo.prod.meissa.de",
+        "release_organisation": "meissa",
+        "release_repository_name": name,
+        "release_artifacts": [
+            f"target/{name}.js",
+        ],
+        "release_main_branch": "master",
+    }
+    
+    build = ReleaseMixin(project, input)
+    build.initialize_build_dir()
+
+
+@task
+def test(project):
+    test_cljs(project)
+
+
+@task
+def test_cljs(project):
+    run("shadow-cljs compile test", shell=True, check=True)
+    run("node target/node-tests.js", shell=True, check=True)
+
+
+@task
+def report_frontend(project):
+    run("mkdir -p target/frontend-build", shell=True, check=True)
+    run(
+        "shadow-cljs run shadow.cljs.build-report frontend target/build-report.html",
+        shell=True,
+        check=True,
+    )
+
+
+@task
+def package_frontend(project):
+    run("mkdir -p target/", shell=True, check=True)
+    run("shadow-cljs release frontend", shell=True, check=True)
+    run(
+        f"cp public/js/main.js target/{name}.js",
+        shell=True,
+        check=True,
+    )
+    run(
+        f"sha256sum target/{name}.js > target/{name}.js.sha256",
+        shell=True,
+        check=True,
+    )
+    run(
+        f"sha512sum target/{name}.js > target/{name}.js.sha512",
+        shell=True,
+        check=True,
+    )
+
+
+@task
+def patch(project):
+    linttest(project, "PATCH")
+    release(project)
+
+
+@task
+def minor(project):
+    linttest(project, "MINOR")
+    release(project)
+
+
+@task
+def major(project):
+    linttest(project, "MAJOR")
+    release(project)
+
+
+@task
+def dev(project):
+    linttest(project, "NONE")
+
+
+@task
+def prepare(project):
+    build = get_devops_build(project)
+    build.prepare_release()
+
+
+@task
+def tag(project):
+    build = get_devops_build(project)
+    build.tag_bump_and_push_release()
+
+
+@task
+def publish_artifacts(project):
+    build = get_devops_build(project)
+    build.publish_artifacts()
+
+
+def release(project):
+    prepare(project)
+    tag(project)
+
+
+def linttest(project, release_type):
+    build = get_devops_build(project)
+    build.update_release_type(release_type)
+    test_cljs(project)
--- a/doc/masto-embed-example.png
+++ b/doc/masto-embed-example.png
--- a/doc/media-reference.edn
+++ b/doc/media-reference.edn
@ -0,0 +1,20 @@
+: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/doc/status-reference.edn
+++ b/doc/status-reference.edn
@ -0,0 +1,88 @@
+{:mentions
+ [{:id "109517000301838437",
+   :username "J12t",
+   :url "https://social.coop/@J12t",
+   :acct "J12t@social.coop"}],
+ :emojis [],
+ :tags
+ [{:name "federation",
+   :url "https://social.meissa-gmbh.de/tags/federation"}
+  {:name "test", :url "https://social.meissa-gmbh.de/tags/test"}],
+ :reblog nil,
+ :replies_count 1,
+ :in_reply_to_account_id nil,
+ :reblogs_count 0,
+ :content
+ "<p><span class=\"h-card\" translate=\"no\"><a href=\"https://social.coop/@J12t\" class=\"u-url mention\">@<span>J12t</span></a></span> Hi Johannes, do you have a solution for such integration tests in place / planed?</p><p><a href=\"https://codeberg.org/forgejo/forgejo/src/commit/fe3473fc8b7b51e024b1a564fc7f01e385ebfb5e/tests/integration/api_activitypub_repository_test.go#L76-L115\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">codeberg.org/forgejo/forgejo/s</span><span class=\"invisible\">rc/commit/fe3473fc8b7b51e024b1a564fc7f01e385ebfb5e/tests/integration/api_activitypub_repository_test.go#L76-L115</span></a></p><p>Would love to be able to make better integration tests ...</p><p><a href=\"https://social.meissa-gmbh.de/tags/federation\" class=\"mention hashtag\" rel=\"tag\">#<span>federation</span></a> <a href=\"https://social.meissa-gmbh.de/tags/test\" class=\"mention hashtag\" rel=\"tag\">#<span>test</span></a></p>",
+ :sensitive false,
+ :favourites_count 1,
+ :in_reply_to_id nil,
+ :poll nil,
+ :account
+ {:acct "meissa",
+  :last_status_at "2024-05-15",
+  :emojis [],
+  :bot false,
+  :group false,
+  :following_count 80,
+  :avatar_static
+  "https://cdn.masto.host/socialmeissagmbhde/accounts/avatars/112/400/753/820/571/578/original/fd05f46bcc0c5c69.png",
+  :roles [],
+  :fields
+  [{:name "See also",
+    :value
+    "<a href=\"https://meissa.de\" target=\"_blank\" rel=\"nofollow noopener noreferrer me\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"\">meissa.de</span><span class=\"invisible\"></span></a>",
+    :verified_at "2024-05-14T09:08:20.463+00:00"}
+   {:name "OpenPGP",
+    :value "DF43207F1ABF673D8C7F5D1D756A2A4873B93D34",
+    :verified_at nil}],
+  :username "meissa",
+  :header_static
+  "https://cdn.masto.host/socialmeissagmbhde/accounts/headers/112/400/753/820/571/578/original/915998366b020667.jpg",
+  :discoverable true,
+  :statuses_count 10,
+  :header
+  "https://cdn.masto.host/socialmeissagmbhde/accounts/headers/112/400/753/820/571/578/original/915998366b020667.jpg",
+  :note
+  "<p>DevOps, Cloud, KI, Clojure, Kotlin, JVM, Python &amp; k8s, Germany, Reutlingen, Tübingen, Stuttgart, genossenschaftlich, OpenSource, TestDriven, Maintainer, Forgejo, Federation</p>",
+  :noindex false,
+  :locked false,
+  :id "112400753820571578",
+  :avatar
+  "https://cdn.masto.host/socialmeissagmbhde/accounts/avatars/112/400/753/820/571/578/original/fd05f46bcc0c5c69.png",
+  :url "https://social.meissa-gmbh.de/@meissa",
+  :uri "https://social.meissa-gmbh.de/users/meissa",
+  :display_name "meissa-team",
+  :followers_count 172,
+  :created_at "2024-05-07T00:00:00.000Z"},
+ :card
+ {:description "forgejo - Beyond coding. We forge.",
+  :author_url "",
+  :image_description "",
+  :width 290,
+  :type "link",
+  :embed_url "",
+  :blurhash "URC3:FsU1xJS-8NvJ9$OFIS3wexEJ9n*xEbG",
+  :title
+  "forgejo/tests/integration/api_activitypub_repository_test.go at fe3473fc8b7b51e024b1a564fc7f01e385ebfb5e",
+  :published_at nil,
+  :provider_name "Codeberg.org",
+  :language "en",
+  :url
+  "https://codeberg.org//forgejo/forgejo/src/commit/fe3473fc8b7b51e024b1a564fc7f01e385ebfb5e/tests/integration/api_activitypub_repository_test.go",
+  :author_name "",
+  :image
+  "https://cdn.masto.host/socialmeissagmbhde/cache/preview_cards/images/000/545/643/original/199336f5aa5b9683.png",
+  :provider_url "",
+  :height 290,
+  :html ""},
+ :language "en",
+ :id "112446229070164194",
+ :url "https://social.meissa-gmbh.de/@meissa/112446229070164194",
+ :media_attachments [],
+ :uri
+ "https://social.meissa-gmbh.de/users/meissa/statuses/112446229070164194",
+ :edited_at nil,
+ :visibility "public",
+ :created_at "2024-05-15T17:14:50.257Z",
+ :spoiler_text ""}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,12 +1,26 @@
 {
-  "name": "dda-masto-embed",
-  "version": "0.0.1",
-  "private": true,
-  "devDependencies": {
-    "shadow-cljs": "^2.8.100",
-    "source-map-support": "^0.5.19"
-  },
-  "dependencies": {
-    "mastodon-api": "^1.3.0"
-  }
-}
+    "name": "dda-masto-embed",
+    "author": "meissa GmbH",
+    "version": "1.0.2-SNAPSHOT",
+    "homepage": "https://github.com/DomainDrivenArchitecture/dda-masto-embed",
+    "repository": "https://github.com/DomainDrivenArchitecture/dda-masto-embed",
+    "license": "Apache-2.0",
+    "private": false,
+    "devDependencies": {
+        "ajv": "^8.10",
+        "eslint": ">=8.10.0",
+        "lodash.template": ">=4.5.0",
+        "shadow-cljs": "^2.17.8",
+        "source-map-support": "^0.5.21"
+    },
+    "dependencies": {
+        "mastodon-api": "^1.3.0"
+    },
+    "main": "dda-masto-embed.js",
+    "keywords": [
+        "cljs",
+        "mastodon",
+        "status",
+        "bootstrap"
+    ]
+}
--- a/public/index.html
+++ b/public/index.html
@ -3,9 +3,18 @@
  <head>
    <meta charset="utf-8" />
    <title>masto-embed</title>
+    <link rel="stylesheet" href="post.css">
  </head>
  <body>
-    <div id="root"></div>
+    <div class="container">
+      <div id="masto-embed" 
+        account_name="meissa"
+        host_url="https://social.meissa-gmbh.de"
+        replies_to="112432461907918517"
+        filter_favorited=true>
+        Here the timeline will appear.
+      </div>
+    </div>
    <script src="js/main.js"></script>
  </body>
 </html>
--- a/public/post.css
+++ b/public/post.css
@ -0,0 +1,358 @@
+.section.account-mode {
+  --large: 1em;
+  --medium: 0.5em;
+  --small: 0.25em;
+  margin-bottom: var(--large);
+  
+  display: grid;
+  grid: ". post ." / auto auto auto;
+
+  font-size: calc(clamp(0.8rem, 19200.75rem - 40000vw, 1.0rem) + max(0.75rem, 0.5rem + 0.5208333vw) - 0.75rem);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  
+  .mastodon-post {
+    grid-area: post;
+    justify-self: center;
+    display: grid;
+    grid: 
+      "header"
+      "content"
+      "image"
+      "link-preview"
+      "footer" /
+      minmax(380px, 450px);
+    border: 1px solid #ccc;
+    padding: var(--small);
+
+    .mastodon-post-header {
+      grid-area: header;
+      justify-self: stretch;
+      display: grid;
+      grid:  "avatar names . date" / max-content max-content auto 20%;
+      margin: var(--medium);
+  
+      .mastodon-post-avatar {
+        grid-area: avatar;
+        width: auto;
+        max-height: 60px;
+        object-fit: contain;
+        align-self: center;
+      }
+  
+      .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;
+          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;
+        margin-right: 1em;
+      }  
+    }
+
+    .mastodon-post-content {
+      grid-area: content;
+      display: grid;
+      grid: 
+        "text"
+        "image" / 100%;
+      padding: var(--medium);
+
+      .mastodon-post-text {
+        grid-area: text;
+      }
+  
+      .mastodon-post-image {
+        grid-area: image;
+        max-width: 100%; 
+        height: auto;
+        align-self: center;
+        justify-self: center;
+        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: var(--small);
+      margin: var(--medium);
+
+      .mastodon-post-link-image{
+        grid-area: image;
+        justify-self: center;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius:var(--small);
+        margin-bottom: var(--small);
+      }
+
+      .mastodon-post-link-info {
+        grid-area: info;
+        grid: 
+        "link-title"
+        "link-description"
+        "link-url"
+        / auto;
+        padding: var(--small);
+        
+        .mastodon-post-link-title {
+          grid-area: link-title;
+          color: #383838;
+          font-weight: bold;
+        }
+      
+        .mastodon-post-link-description {
+          grid-area: link-description;
+          color: #383838;
+          padding-bottom: var(--medium);
+        }
+      
+        .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;
+        grid-area: retoot-count;
+      }
+
+      .reply-count {
+        justify-self: center;
+        grid-area: reply-count;
+      }
+    }
+  }
+}
+
+.section.replies-mode {
+  --large: 1em;
+  --medium: 0.5em;
+  --small: 0.25em;
+  margin-bottom: var(--large);
+  
+  display: grid;
+  grid: ". post ." / auto auto auto;
+
+  font-size: calc(clamp(0.8rem, 19200.75rem - 40000vw, 1.0rem) + max(0.75rem, 0.5rem + 0.5208333vw) - 0.75rem);
+
+  .mastodon-post {
+    grid-area: post;
+    justify-self: center;
+    align-self: start;
+    display: grid;
+    grid: 
+      "header"
+      "content"
+      "image"
+      "link-preview"
+      "footer" /
+      minmax(380px, 450px);
+    border: 1px solid #ccc;
+    padding: var(--small);
+
+    .mastodon-post-header {
+      grid-area: header;
+      justify-self: stretch;
+      display: grid;
+      grid:  "avatar names . date" / max-content max-content auto 20%;
+      margin: var(--medium);
+  
+      .mastodon-post-avatar {
+        grid-area: avatar;
+        width: auto;
+        max-height: 60px;
+        object-fit: contain;
+        align-self: center;
+      }
+  
+      .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;
+          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;
+        margin-right: 1em;
+      }   
+    }
+
+    .mastodon-post-content {
+      grid-area: content;
+      display: grid;
+      grid: 
+      "image text" / minmax(40%, 108px) auto;
+      padding: var(--medium);
+
+      .mastodon-post-text {
+        grid-area: text;
+        align-self: center;
+        display: grid;        
+        padding: var(--medium) 0 var(--medium) var(--medium);
+      }
+  
+      .mastodon-post-image {
+        grid-area: image;
+        max-width: 100%;
+        height: auto;
+        align-self: center;
+        justify-self: center;
+        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: var(--small);
+      margin: var(--medium);
+
+      .mastodon-post-link-image{
+        grid-area: image;
+        justify-self: center;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius: var(--small);
+        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 {
+      display: none;
+    }
+  }
+
+}
+
--- a/shadow-cljs.edn
+++ b/shadow-cljs.edn
@ -1,17 +1,23 @@
 ;; shadow-cljs configuration
 {:source-paths
- ["src/dev"
-  "src/main"
+ ["src/main"
  "src/test"]

 :dependencies
- []
+ [[orchestra "2021.01.01-1"]
+  [hiccups "0.3.0"]
+  [org.clj-commons/hickory "0.7.4"]
+  [com.andrewmcveigh/cljs-time "0.5.2"]
+  [org.domaindrivenarchitecture/c4k-common-cljs "8.0.0"]]
 :dev-http {8080 "public"}
 :builds
- {:test
-  {:target    :node-test
-   :output-to "out/node-tests.js"
-   :autorun   true}
-  :frontend
-  {:target :browser
-   :modules {:main {:init-fn dda.masto-embed.app/init}}}}}
+ {:test {:target    :node-test
+         :output-to "target/node-tests.js"
+         :autorun   true}
+  :lib {:target :node-library
+        :output-to "target/dda-masto-embed.js"
+        :exports {:init dda.masto-embed.app/init}
+        :release {:compiler-options {:optimizations :advanced}}}
+  :frontend {:target :browser
+             :modules {:main {:init-fn dda.masto-embed.app/init}}
+             :release {}}}}
--- a/src/main/dda/masto_embed/api.cljs
+++ b/src/main/dda/masto_embed/api.cljs
@ -0,0 +1,61 @@
+; Licensed to the Apache Software Foundation (ASF) under one
+; or more contributor license agreements. See the NOTICE file
+; distributed with this work for additional information
+; regarding copyright ownership. The ASF licenses this file
+; to you under the Apache License, Version 2.0 (the
+; "License"); you may not use this file except in compliance
+; with the License. You may obtain a copy of the License at
+;
+; http://www.apache.org/licenses/LICENSE-2.0
+;
+; Unless required by applicable law or agreed to in writing, software
+; distributed under the License is distributed on an "AS IS" BASIS,
+; WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+; See the License for the specific language governing permissions and
+; limitations under the License.
+(ns dda.masto-embed.api
+  (:require
+   ["mastodon-api" :as Mastodon]
+   [dda.masto-embed.infra :as infra]
+   [clojure.spec.alpha :as s]
+   [orchestra.core :refer-macros [defn-spec]]))
+
+(s/def ::account-id string?)
+(s/def ::host-url string?)
+
+(defn mastojs->edn [response]
+  (-> response .-data infra/js->edn))
+
+(defn-spec mastodon-client any? 
+  [host-url ::host-url]
+  (let [mastodon-config
+        {:access_token "unused"
+         :api_url (str host-url "/api/v1/")}]
+    (some-> mastodon-config clj->js Mastodon.)))
+
+(defn-spec get-account-statuses any?
+  [host-url ::host-url
+   account-id ::account-id]
+  (.get (mastodon-client host-url)
+        (str "accounts/" account-id "/statuses")
+        #js {}))
+
+(defn get-replies
+  [host-url
+   status-id]
+  (.get (mastodon-client host-url)
+        (str "statuses/" status-id "/context")
+        #js {}))
+
+(defn get-favorited-by
+  [host-url
+   status-id]
+  (.get (mastodon-client host-url)
+        (str "statuses/" status-id "/favourited_by")
+        #js {}))
+
+(defn-spec get-directory any?
+  [host-url ::host-url]
+  (.get (mastodon-client host-url)
+        (str "directory?local=true")
+        #js {}))
--- a/src/main/dda/masto_embed/app.cljs
+++ b/src/main/dda/masto_embed/app.cljs
@ -1,25 +1,28 @@
+; Licensed to the Apache Software Foundation (ASF) under one
+; or more contributor license agreements. See the NOTICE file
+; distributed with this work for additional information
+; regarding copyright ownership. The ASF licenses this file
+; to you under the Apache License, Version 2.0 (the
+; "License"); you may not use this file except in compliance
+; with the License. You may obtain a copy of the License at
+;
+; http://www.apache.org/licenses/LICENSE-2.0
+;
+; Unless required by applicable law or agreed to in writing, software
+; distributed under the License is distributed on an "AS IS" BASIS,
+; WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+; See the License for the specific language governing permissions and
+; limitations under the License.
 (ns dda.masto-embed.app
  (:require
-   ["mastodon-api" :as Mastodon]
-   [clojure.pprint :as pprint :refer [pprint]]
-   [cljs.core.async :refer [go]]
-   [cljs.core.async.interop :refer-macros [<p!]]))
-
-(defn get-content-seq [response]
-  (map
-   #(aget % "content")
-   (array-seq
-    (aget response "data"))))
+   [dda.masto-embed.browser :as b]
+   [dda.masto-embed.modes :as m]))

 (defn init []
-  (let [config (js-obj "api_url" "https://social.meissa-gmbh.de/api/v1/" "access_token" "...")
-        masto (new Mastodon config)
-        rest-endpoint "accounts/:id/statuses"
-        id-config (js-obj "id" "2")]
-    (pprint
-     (go
-       (let [response (<p! (.get masto rest-endpoint id-config))]
-         (get-content-seq response))))))
-
-(defn add-one [a]
-  (+ a 1))
+  (let [host-url (b/host-url-from-document)
+        account-name (b/account-name-from-document)
+        replies-to (b/replies-to-from-document)
+        filter-favorited (b/filter-favorited-from-document)]
+    (if (nil? replies-to)
+      (m/account-mode host-url account-name)
+      (m/replies-mode host-url account-name replies-to filter-favorited))))
--- a/src/main/dda/masto_embed/browser.cljs
+++ b/src/main/dda/masto_embed/browser.cljs
@ -0,0 +1,51 @@
+; Licensed to the Apache Software Foundation (ASF) under one
+; or more contributor license agreements. See the NOTICE file
+; distributed with this work for additional information
+; regarding copyright ownership. The ASF licenses this file
+; to you under the Apache License, Version 2.0 (the
+; "License"); you may not use this file except in compliance
+; with the License. You may obtain a copy of the License at
+;
+; http://www.apache.org/licenses/LICENSE-2.0
+;
+; Unless required by applicable law or agreed to in writing, software
+; distributed under the License is distributed on an "AS IS" BASIS,
+; WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+; See the License for the specific language governing permissions and
+; limitations under the License.
+(ns dda.masto-embed.browser
+  (:require 
+   [hickory.core :as h]
+   [shadow.resource :as rc]))
+
+(def masto-embed "masto-embed")
+
+(def post-html (rc/inline "dda/masto_embed/resources/post.html"))
+
+(defn post-html-hiccup []
+  (h/as-hiccup (h/parse post-html)))
+
+
+(defn element-from-document-by-name [name]
+  (-> js/document
+      (.getElementById masto-embed)
+      (.getAttribute name)))
+
+(defn host-url-from-document []
+  (element-from-document-by-name "host_url"))
+
+(defn account-name-from-document []
+  (element-from-document-by-name "account_name"))
+
+(defn replies-to-from-document []
+  (element-from-document-by-name "replies_to"))
+
+(defn filter-favorited-from-document []
+  (element-from-document-by-name "filter_favorited"))
+
+(defn render-to-document
+  [input]
+  (-> js/document
+      (.getElementById masto-embed)
+      (.-innerHTML)
+      (set! input)))
--- a/src/main/dda/masto_embed/infra.cljs
+++ b/src/main/dda/masto_embed/infra.cljs
@ -0,0 +1,29 @@
+; Licensed to the Apache Software Foundation (ASF) under one
+; or more contributor license agreements. See the NOTICE file
+; distributed with this work for additional information
+; regarding copyright ownership. The ASF licenses this file
+; to you under the Apache License, Version 2.0 (the
+; "License"); you may not use this file except in compliance
+; with the License. You may obtain a copy of the License at
+;
+; http://www.apache.org/licenses/LICENSE-2.0
+;
+; Unless required by applicable law or agreed to in writing, software
+; distributed under the License is distributed on an "AS IS" BASIS,
+; WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+; See the License for the specific language governing permissions and
+; limitations under the License.
+(ns dda.masto-embed.infra
+  (:require
+   [clojure.pprint :as pprint :refer [pprint]]))
+
+(defn exit-with-error [error]
+  (js/console.error error)
+  (js/process.exit 1))
+
+(defn js->edn [data]
+  (js->clj data :keywordize-keys true))
+
+(defn debug [elem]
+  (pprint elem)
+  elem)
--- a/src/main/dda/masto_embed/modes.cljs
+++ b/src/main/dda/masto_embed/modes.cljs
@ -0,0 +1,99 @@
+; Licensed to the Apache Software Foundation (ASF) under one
+; or more contributor license agreements. See the NOTICE file
+; distributed with this work for additional information
+; regarding copyright ownership. The ASF licenses this file
+; to you under the Apache License, Version 2.0 (the
+; "License"); you may not use this file except in compliance
+; with the License. You may obtain a copy of the License at
+;
+; http://www.apache.org/licenses/LICENSE-2.0
+;
+; Unless required by applicable law or agreed to in writing, software
+; distributed under the License is distributed on an "AS IS" BASIS,
+; WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+; See the License for the specific language governing permissions and
+; limitations under the License.
+(ns dda.masto-embed.modes
+  (:require
+   [cljs.core.async :refer [go chan <! >!]]
+   [cljs.core.async.interop :refer-macros [<p!]]
+   [hiccups.runtime :refer [render-html]]
+   [dda.masto-embed.api :as api]
+   [dda.masto-embed.browser :as b]
+   [dda.masto-embed.to-html :as th]
+   ))
+
+; TODO?: Functions in this ns mix business logic and api calls.
+;        Should we separate better etween business and infra logic?
+
+(defn favorited-replies? [host-url account-name reply-id]
+  (let [out (chan)]
+    (go
+      (>! out
+          (->>
+           (<p! (api/get-favorited-by host-url reply-id))
+           api/mastojs->edn
+           (filter #(= account-name (:acct %)))
+           (seq))))
+    out))
+
+(defn favorited? [host-url account-name replies]
+  (let [out (chan)]
+    (go
+      (>! out
+          (loop [loc-replies replies
+                 result []]
+            (if (empty? loc-replies)
+              result
+              (recur (rest loc-replies)
+                     (conj result (<! (favorited-replies? host-url account-name (first loc-replies)))))))))
+  out))
+
+(defn find-account-id [host-url account-name]
+  (let [out (chan)]
+    (go
+      (>! out
+          (->>
+           (<p! (api/get-directory host-url))
+           api/mastojs->edn
+           (filter #(= account-name (:acct %)))
+           (map :id)
+           first)))
+    out))
+
+(defn replies-mode-raw [host-url account-name post-id filter-favorited]
+  (go
+    (let [replies (->
+                   (<p! (api/get-replies host-url post-id))
+                   api/mastojs->edn)
+          favorited (<! (favorited? host-url account-name (map :id (:descendants replies))))
+          combined (map (fn [s f] {:status s :favorited f}) (:descendants replies) favorited)]
+      (->> combined
+           (filter #(or (not filter-favorited) (:favorited %)))
+           (reverse)
+           (map :status)))))
+
+(defn replies-mode [host-url account-name post-id filter-favorited]
+  (go
+    (->> (replies-mode-raw host-url account-name post-id filter-favorited)
+         (th/masto->html "replies-mode")
+         (render-html)
+         (b/render-to-document))))
+
+(defn account-mode-raw [host-url account-name]
+  (go
+    (let [account-id (<! (find-account-id host-url account-name))
+          status (->
+                  (<p! (api/get-account-statuses host-url account-id))
+                  api/mastojs->edn)]
+      (->> status
+           (filter #(= nil (:reblog %)))
+           (filter #(= nil (:in_reply_to_account_id %)))
+           (take 4)))))
+
+(defn account-mode [host-url account-name]
+  (go
+    (->> (account-mode-raw host-url account-name)
+         (th/masto->html "account-mode")
+         (render-html)
+         (b/render-to-document))))
--- a/src/main/dda/masto_embed/resources/image.html
+++ b/src/main/dda/masto_embed/resources/image.html
@ -0,0 +1 @@
+<img class="mastodon-post-image" src="https://cdn.masto.host/socialmeissagmbhde/media_attachments/files/112/432/505/467/393/505/original/0d01ddb07440328e.jpg"></img>
--- a/src/main/dda/masto_embed/resources/link_prev.html
+++ b/src/main/dda/masto_embed/resources/link_prev.html
@ -0,0 +1 @@
+<a href="LINK_PREVIEW_URL" class="mastodon-post-link-preview" target="_blank"><img class="mastodon-post-link-image" src="LINK_PREVIEW_IMG_URL"></img><div class="mastodon-post-link-info"><h4 class="mastodon-post-link-title">LINK_PREVIEW_TITLE</h4><div class="mastodon-post-link-description">LINK_PREVIEW_DESC</div><div class="mastodon-post-link-url">LINK_PREVIEW_URL</div></div></a>
--- a/src/main/dda/masto_embed/resources/post-min-base.html
+++ b/src/main/dda/masto_embed/resources/post-min-base.html
@ -0,0 +1 @@
+<section class="section post-container"><article class="mastodon-post"><header class="mastodon-post-header"><img class="mastodon-post-avatar" src="AVATAR_URL"></img><div class="mastodon-post-names"><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><section class="mastodon-post-content"><p class="mastodon-post-text">POST_TEXT</p></section><a href="LINK_PREVIEW_URL" class="mastodon-post-link-preview" target="_blank"></a><footer class="mastodon-post-footer"><button class="footer-button replies"><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">REPLIES_COUNT</span></button><button class="footer-button retoots">src/main/dda/masto_embed/resources/post.html<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">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">FAVOURITES_COUNT</span></button></footer></article></section>
--- a/src/main/dda/masto_embed/resources/post-min-complete.html
+++ b/src/main/dda/masto_embed/resources/post-min-complete.html
@ -0,0 +1 @@
+<section class="section post-container"><article class="mastodon-post"><header class="mastodon-post-header"><img class="mastodon-post-avatar" src="AVATAR_URL"></img><div class="mastodon-post-names"><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><section class="mastodon-post-content"><p class="mastodon-post-text">POST_TEXT</p><img class="mastodon-post-image" src="POST_IMG_URL"></img></section><a href="LINK_PREVIEW_URL" class="mastodon-post-link-preview" target="_blank"><img class="mastodon-post-link-image" src="LINK_PREVIEW_IMG_URL"></img><div class="mastodon-post-link-info"><h4 class="mastodon-post-link-title">LINK_PREVIEW_TITLE</h4><div class="mastodon-post-link-description">LINK_PREVIEW_DESC</div><div class="mastodon-post-link-url">LINK_PREVIEW_URL</div></div></a><footer class="mastodon-post-footer"><button class="footer-button replies"><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">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">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">FAVOURITES_COUNT</span></button></footer></article></section>
--- a/src/main/dda/masto_embed/resources/post-min-img.html
+++ b/src/main/dda/masto_embed/resources/post-min-img.html
@ -0,0 +1 @@
+<section class="section post-container"><article class="mastodon-post"><header class="mastodon-post-header"><img class="mastodon-post-avatar" src="AVATAR_URL"></img><div class="mastodon-post-names"><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><section class="mastodon-post-content"><p class="mastodon-post-text">POST_TEXT</p><img class="mastodon-post-image" src="https://cdn.masto.host/socialmeissagmbhde/media_attachments/files/112/432/505/467/393/505/original/0d01ddb07440328e.jpg"></img></section><footer class="mastodon-post-footer"><button class="footer-button replies"><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">REPLIES_COUNT</span></button><button class="footer-button retoots">src/main/dda/masto_embed/resources/post.html<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">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">FAVOURITES_COUNT</span></button></footer></article></section>
--- a/src/main/dda/masto_embed/resources/post-min-prev.html
+++ b/src/main/dda/masto_embed/resources/post-min-prev.html
@ -0,0 +1 @@
+<section class="section post-container"><article class="mastodon-post"><header class="mastodon-post-header"><img class="mastodon-post-avatar" src="AVATAR_URL"></img><div class="mastodon-post-names"><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><section class="mastodon-post-content"><p class="mastodon-post-text">POST_TEXT</p></section><a href="LINK_PREVIEW_URL" class="mastodon-post-link-preview" target="_blank"><img class="mastodon-post-link-image" src="LINK_PREVIEW_IMG_URL"></img><div class="mastodon-post-link-info"><h4 class="mastodon-post-link-title">LINK_PREVIEW_TITLE</h4><div class="mastodon-post-link-description">LINK_PREVIEW_DESC</div><div class="mastodon-post-link-url">LINK_PREVIEW_URL</div></div></a><footer class="mastodon-post-footer"><button class="footer-button replies"><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">REPLIES_COUNT</span></button><button class="footer-button retoots">src/main/dda/masto_embed/resources/post.html<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">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">FAVOURITES_COUNT</span></button></footer></article></section>
--- a/src/main/dda/masto_embed/resources/post.css
+++ b/src/main/dda/masto_embed/resources/post.css
@ -0,0 +1,358 @@
+.section.account-mode {
+  --large: 1em;
+  --medium: 0.5em;
+  --small: 0.25em;
+  margin-bottom: var(--large);
+  
+  display: grid;
+  grid: ". post ." / auto auto auto;
+
+  font-size: calc(clamp(0.8rem, 19200.75rem - 40000vw, 1.0rem) + max(0.75rem, 0.5rem + 0.5208333vw) - 0.75rem);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  
+  .mastodon-post {
+    grid-area: post;
+    justify-self: center;
+    display: grid;
+    grid: 
+      "header"
+      "content"
+      "image"
+      "link-preview"
+      "footer" /
+      minmax(380px, 450px);
+    border: 1px solid #ccc;
+    padding: var(--small);
+
+    .mastodon-post-header {
+      grid-area: header;
+      justify-self: stretch;
+      display: grid;
+      grid:  "avatar names . date" / max-content max-content auto 20%;
+      margin: var(--medium);
+  
+      .mastodon-post-avatar {
+        grid-area: avatar;
+        width: auto;
+        max-height: 60px;
+        object-fit: contain;
+        align-self: center;
+      }
+  
+      .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;
+          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;
+        margin-right: 1em;
+      }  
+    }
+
+    .mastodon-post-content {
+      grid-area: content;
+      display: grid;
+      grid: 
+        "text"
+        "image" / 100%;
+      padding: var(--medium);
+
+      .mastodon-post-text {
+        grid-area: text;
+      }
+  
+      .mastodon-post-image {
+        grid-area: image;
+        max-width: 100%; 
+        height: auto;
+        align-self: center;
+        justify-self: center;
+        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: var(--small);
+      margin: var(--medium);
+
+      .mastodon-post-link-image{
+        grid-area: image;
+        justify-self: center;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius:var(--small);
+        margin-bottom: var(--small);
+      }
+
+      .mastodon-post-link-info {
+        grid-area: info;
+        grid: 
+        "link-title"
+        "link-description"
+        "link-url"
+        / auto;
+        padding: var(--small);
+        
+        .mastodon-post-link-title {
+          grid-area: link-title;
+          color: #383838;
+          font-weight: bold;
+        }
+      
+        .mastodon-post-link-description {
+          grid-area: link-description;
+          color: #383838;
+          padding-bottom: var(--medium);
+        }
+      
+        .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;
+        grid-area: retoot-count;
+      }
+
+      .reply-count {
+        justify-self: center;
+        grid-area: reply-count;
+      }
+    }
+  }
+}
+
+.section.replies-mode {
+  --large: 1em;
+  --medium: 0.5em;
+  --small: 0.25em;
+  margin-bottom: var(--large);
+  
+  display: grid;
+  grid: ". post ." / auto auto auto;
+
+  font-size: calc(clamp(0.8rem, 19200.75rem - 40000vw, 1.0rem) + max(0.75rem, 0.5rem + 0.5208333vw) - 0.75rem);
+
+  .mastodon-post {
+    grid-area: post;
+    justify-self: center;
+    align-self: start;
+    display: grid;
+    grid: 
+      "header"
+      "content"
+      "image"
+      "link-preview"
+      "footer" /
+      minmax(380px, 450px);
+    border: 1px solid #ccc;
+    padding: var(--small);
+
+    .mastodon-post-header {
+      grid-area: header;
+      justify-self: stretch;
+      display: grid;
+      grid:  "avatar names . date" / max-content max-content auto 20%;
+      margin: var(--medium);
+  
+      .mastodon-post-avatar {
+        grid-area: avatar;
+        width: auto;
+        max-height: 60px;
+        object-fit: contain;
+        align-self: center;
+      }
+  
+      .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;
+          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;
+        margin-right: 1em;
+      }   
+    }
+
+    .mastodon-post-content {
+      grid-area: content;
+      display: grid;
+      grid: 
+      "image text" / minmax(40%, 108px) auto;
+      padding: var(--medium);
+
+      .mastodon-post-text {
+        grid-area: text;
+        align-self: center;
+        display: grid;        
+        padding: var(--medium) 0 var(--medium) var(--medium);
+      }
+  
+      .mastodon-post-image {
+        grid-area: image;
+        max-width: 100%;
+        height: auto;
+        align-self: center;
+        justify-self: center;
+        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: var(--small);
+      margin: var(--medium);
+
+      .mastodon-post-link-image{
+        grid-area: image;
+        justify-self: center;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius: var(--small);
+        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 {
+      display: none;
+    }
+  }
+
+}
+
--- a/src/main/dda/masto_embed/resources/post.html
+++ b/src/main/dda/masto_embed/resources/post.html
@ -0,0 +1,29 @@
+<section class="section MODE">
+  <article class="mastodon-post">
+    <header class="mastodon-post-header">
+      <img class="mastodon-post-avatar" src="AVATAR_URL"></img>
+      <div class="mastodon-post-names">
+        <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>
+    <section class="mastodon-post-content">
+      <div class="mastodon-post-text">POST_TEXT</div>
+    </section>
+    <footer class="mastodon-post-footer"><button class="footer-button replies"><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">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">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">FAVOURITES_COUNT</span></button></footer>
+  </article>
+</section>
--- a/src/main/dda/masto_embed/to_html.cljs
+++ b/src/main/dda/masto_embed/to_html.cljs
@ -0,0 +1,112 @@
+; Licensed to the Apache Software Foundation (ASF) under one
+; or more contributor license agreements. See the NOTICE file
+; distributed with this work for additional information
+; regarding copyright ownership. The ASF licenses this file
+; to you under the Apache License, Version 2.0 (the
+; "License"); you may not use this file except in compliance
+; with the License. You may obtain a copy of the License at
+;
+; http://www.apache.org/licenses/LICENSE-2.0
+;
+; Unless required by applicable law or agreed to in writing, software
+; distributed under the License is distributed on an "AS IS" BASIS,
+; WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+; See the License for the specific language governing permissions and
+; limitations under the License.
+(ns dda.masto-embed.to-html
+  (:require
+   [cljs-time.format :as t]
+   [dda.masto-embed.browser :as b]
+   [dda.c4k-common.common :as cm]
+   [clojure.walk :refer [postwalk]]))
+
+(def link_preview
+  [:a
+   {:href "LINK_PREVIEW_URL", :class "mastodon-post-link-preview", :target "_blank"}
+   [:img {:class "mastodon-post-link-image", :src "LINK_PREVIEW_IMG_URL"}]
+   [:div
+    {:class "mastodon-post-link-info"}
+    [:h4 {:class "mastodon-post-link-title"} "LINK_PREVIEW_TITLE"]
+    [:div {:class "mastodon-post-link-description"} "LINK_PREVIEW_DESC"]
+    [:div {:class "mastodon-post-link-url"} "LINK_PREVIEW_URL"]]])
+
+(defn insert [v i e] (vec (concat (subvec v 0 i) [e] (subvec v i))))
+
+(defn truncate  [s n] (subs s 0 (min (count s) n)))
+
+(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 "AVATAR_URL" avatar_static)
+        (cm/replace-all-matching "POST_URL" url)
+        (cm/replace-all-matching "DISPLAY_NAME" display_name)
+        (cm/replace-all-matching "ACCOUNT_NAME" (str "@" username))
+        (cm/replace-all-matching "DATETIME" created_at)
+        (cm/replace-all-matching "TIME" (t/unparse (t/formatter "EEEE, dd MMMM yyyy") date)))))
+
+(defn masto-content->html [html content]
+    (-> html
+        (cm/replace-all-matching "POST_TEXT" content)))
+
+; Meant to be used in postwalk on hiccup/hickory html-representation
+(defn insert-into-content [item insertion-element]
+  (let [condition (if (vector? item)
+                    (every? true? [(= (first item) :section)
+                                  (= (:class (second item)) "mastodon-post-content")])
+                    false)]
+    (if condition       
+        (conj item insertion-element)
+      item)))
+
+(defn insert-into-post [item index insertion-element]
+  (let [condition (if (vector? item)
+                    (every? true? [(= (first item) :article)
+                                   (= (:class (second item)) "mastodon-post")])
+                    false)]
+    (if condition
+        (insert item index insertion-element)
+      item)))
+
+(defn masto-media->html [html media_attachments]
+  (if-let [preview-image-url (get-in media_attachments [0 :preview_url])]
+      (let [image-element [:img {:class "mastodon-post-image", :src preview-image-url}]]
+        (postwalk #(insert-into-content % image-element) html))
+      html))
+
+(defn insert-link-prev [html]
+  (postwalk #(insert-into-post % 4 link_preview) html))
+
+(defn masto-link-prev->html [html card]
+  (let [{:keys [url image title description]} card]
+    (if (nil? card)
+      html
+      (-> html
+          (insert-link-prev)
+          (cm/replace-all-matching "LINK_PREVIEW_URL" url)
+          (cm/replace-all-matching "LINK_PREVIEW_IMG_URL" image)
+          (cm/replace-all-matching "LINK_PREVIEW_TITLE" (str (truncate title 47) "..."))
+          (cm/replace-all-matching "LINK_PREVIEW_DESC" description)))))
+
+(defn masto-footer->html [html replies_count reblogs_count favourites_count]
+  (-> html
+      (cm/replace-all-matching "REPLIES_COUNT" replies_count)
+      (cm/replace-all-matching "REBLOGS_COUNT" reblogs_count)
+      (cm/replace-all-matching "FAVOURITES_COUNT" favourites_count)))
+
+(defn insert-mode [html mode]
+  (-> html
+      (cm/replace-all-matching "section MODE" (str "section " mode))))
+
+(defn masto->html [mode statuses]
+  (let [html (b/post-html-hiccup)]
+    (map (fn [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 url)
+                 (masto-content->html content)
+                 (masto-media->html media_attachments)
+                 (masto-link-prev->html card)
+                 (masto-footer->html replies_count reblogs_count favourites_count)
+                 (insert-mode mode))))
+         statuses)))
--- a/src/test/dda/masto_embed/app_test.cljs
+++ b/src/test/dda/masto_embed/app_test.cljs
@ -1,8 +0,0 @@
-(ns dda.masto-embed.app-test
-  (:require 
-    [cljs.test :refer (deftest is)]
-    [dda.masto-embed.app :as sut]))
-
-(deftest a-failing-test
-  (is (= 3
-         (sut/add-one 2))))
--- a/src/test/dda/masto_embed/data_helpers.cljs
+++ b/src/test/dda/masto_embed/data_helpers.cljs
@ -0,0 +1,319 @@
+(ns dda.masto-embed.data-helpers)
+
+(def complete-template-post-hiccup
+  [:html
+   {}
+   [:head {}]
+   [:body
+    {}
+    [:section
+     {:class "section post-container"}
+     [:article
+      {:class "mastodon-post"}
+      [:header
+       {:class "mastodon-post-header"}
+       [:img {:class "mastodon-post-avatar", :src "AVATAR_URL"}]
+       [:div
+        {:class "mastodon-post-names"}
+        [:a {:class "display-name", :href "POST_URL"} "DISPLAY_NAME"]
+        [:a {:class "account-name", :href "POST_URL"} "ACCOUNT_NAME"]]
+       [:time {:class "mastodon-post-date", :datetime "DATETIME"} "TIME"]]
+      [:section
+       {:class "mastodon-post-content"}
+       [:p {:class "mastodon-post-text"} "POST_TEXT"]
+       [:img {:class "mastodon-post-image", :src "POST_IMG_URL"}]]
+      [:a
+       {:href "LINK_PREVIEW_URL", :class "mastodon-post-link-preview", :target "_blank"}
+       [:img {:class "mastodon-post-link-image", :src "LINK_PREVIEW_IMG_URL"}]
+       [:div
+        {:class "mastodon-post-link-info"}
+        [:h4 {:class "mastodon-post-link-title"} "LINK_PREVIEW_TITLE"]
+        [:div {:class "mastodon-post-link-description"} "LINK_PREVIEW_DESC"]
+        [:div {:class "mastodon-post-link-url"} "LINK_PREVIEW_URL"]]]
+      [:footer
+       {:class "mastodon-post-footer"}
+       [:button
+        {:class "footer-button replies"}
+        [: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 "}]]
+        [:span {:class "count reply-count"} "REPLIES_COUNT"]]
+       [: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"}]]
+        [:span {:class "count retoot-count"} "REBLOGS_COUNT"]]
+       [: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"}]]
+        [:span {:class "count like-count"} "FAVOURITES_COUNT"]]]]]]])
+
+; complete-template-post-hiccup without link prev and img
+(def post-base-img
+  [:html
+   {}
+   [:head {}]
+   [:body
+    {}
+    [:section
+     {:class "section post-container"}
+     [:article
+      {:class "mastodon-post"}
+      [:header
+       {:class "mastodon-post-header"}
+       [:img {:class "mastodon-post-avatar", :src "AVATAR_URL"}]
+       [:div
+        {:class "mastodon-post-names"}
+        [:a {:class "display-name", :href "POST_URL"} "DISPLAY_NAME"]
+        [:a {:class "account-name", :href "POST_URL"} "ACCOUNT_NAME"]]
+       [:time {:class "mastodon-post-date", :datetime "DATETIME"} "TIME"]]
+      [:section
+       {:class "mastodon-post-content"}
+       [:p {:class "mastodon-post-text"} "POST_TEXT"]]
+      [:footer
+       {:class "mastodon-post-footer"}
+       [:button
+        {:class "footer-button replies"}
+        [: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 "}]]
+        [:span {:class "count reply-count"} "REPLIES_COUNT"]]
+       [: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"}]]
+        [:span {:class "count retoot-count"} "REBLOGS_COUNT"]]
+       [: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"}]]
+        [:span {:class "count like-count"} "FAVOURITES_COUNT"]]]]]]])
+
+(def post-with-img
+  [:html
+   {}
+   [:head {}]
+   [:body
+    {}
+    [:section
+     {:class "section post-container"}
+     [:article
+      {:class "mastodon-post"}
+      [:header
+       {:class "mastodon-post-header"}
+       [:img {:class "mastodon-post-avatar", :src "AVATAR_URL"}]
+       [:div
+        {:class "mastodon-post-names"}
+        [:a {:class "display-name", :href "POST_URL"} "DISPLAY_NAME"]
+        [:a {:class "account-name", :href "POST_URL"} "ACCOUNT_NAME"]]
+       [:time {:class "mastodon-post-date", :datetime "DATETIME"} "TIME"]]
+      [:section
+       {:class "mastodon-post-content"}
+       [:p {:class "mastodon-post-text"} "POST_TEXT"]
+       [:img 
+        {:class "mastodon-post-image", 
+         :src "https://cdn.masto.host/socialmeissagmbhde/media_attachments/files/112/432/505/467/393/505/small/0d01ddb07440328e.jpg"}]]
+      [:footer
+       {:class "mastodon-post-footer"}
+       [:button
+        {:class "footer-button replies"}
+        [: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 "}]]
+        [:span {:class "count reply-count"} "REPLIES_COUNT"]]
+       [: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"}]]
+        [:span {:class "count retoot-count"} "REBLOGS_COUNT"]]
+       [: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"}]]
+        [:span {:class "count like-count"} "FAVOURITES_COUNT"]]]]]]])
+
+; complete-template-post-hiccup without link prev and img
+(def post-base-prev
+  [:html
+   {}
+   [:head {}]
+   [:body
+    {}
+    [:section
+     {:class "section post-container"}
+     [:article
+      {:class "mastodon-post"}
+      [:header
+       {:class "mastodon-post-header"}
+       [:img {:class "mastodon-post-avatar", :src "AVATAR_URL"}]
+       [:div
+        {:class "mastodon-post-names"}
+        [:a {:class "display-name", :href "POST_URL"} "DISPLAY_NAME"]
+        [:a {:class "account-name", :href "POST_URL"} "ACCOUNT_NAME"]]
+       [:time {:class "mastodon-post-date", :datetime "DATETIME"} "TIME"]]
+      [:section
+       {:class "mastodon-post-content"}
+       [:p {:class "mastodon-post-text"} "POST_TEXT"]]
+      [:footer
+       {:class "mastodon-post-footer"}
+       [:button
+        {:class "footer-button replies"}
+        [: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 "}]]
+        [:span {:class "count reply-count"} "REPLIES_COUNT"]]
+       [: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"}]]
+        [:span {:class "count retoot-count"} "REBLOGS_COUNT"]]
+       [: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"}]]
+        [:span {:class "count like-count"} "FAVOURITES_COUNT"]]]]]]])
+
+(def post-with-prev
+  [:html
+   {}
+   [:head {}]
+   [:body
+    {}
+    [:section
+     {:class "section post-container"}
+     [:article
+      {:class "mastodon-post"}
+      [:header
+       {:class "mastodon-post-header"}
+       [:img {:class "mastodon-post-avatar", :src "AVATAR_URL"}]
+       [:div
+        {:class "mastodon-post-names"}
+        [:a {:class "display-name", :href "POST_URL"} "DISPLAY_NAME"]
+        [:a {:class "account-name", :href "POST_URL"} "ACCOUNT_NAME"]]
+       [:time {:class "mastodon-post-date", :datetime "DATETIME"} "TIME"]]
+      [:section
+       {:class "mastodon-post-content"}
+       [:p {:class "mastodon-post-text"} "POST_TEXT"]]
+      [:a
+       {:href "LINK_PREVIEW_URL", :class "mastodon-post-link-preview", :target "_blank"}
+       [:img {:class "mastodon-post-link-image", :src "LINK_PREVIEW_IMG_URL"}]
+       [:div
+        {:class "mastodon-post-link-info"}
+        [:h4 {:class "mastodon-post-link-title"} "LINK_PREVIEW_TITLE"]
+        [:div {:class "mastodon-post-link-description"} "LINK_PREVIEW_DESC"]
+        [:div {:class "mastodon-post-link-url"} "LINK_PREVIEW_URL"]]]
+      [:footer
+       {:class "mastodon-post-footer"}
+       [:button
+        {:class "footer-button replies"}
+        [: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 "}]]
+        [:span {:class "count reply-count"} "REPLIES_COUNT"]]
+       [: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"}]]
+        [:span {:class "count retoot-count"} "REBLOGS_COUNT"]]
+       [: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"}]]
+        [:span {:class "count like-count"} "FAVOURITES_COUNT"]]]]]]])
+
+(def filled-post-with-prev
+  [:html
+   {}
+   [:head {}]
+   [:body
+    {}
+    [:section
+     {:class "section post-container"}
+     [:article
+      {:class "mastodon-post"}
+      [:header
+       {:class "mastodon-post-header"}
+       [:img {:class "mastodon-post-avatar", :src "AVATAR_URL"}]
+       [:div
+        {:class "mastodon-post-names"}
+        [:a {:class "display-name", :href "POST_URL"} "DISPLAY_NAME"]
+        [:a {:class "account-name", :href "POST_URL"} "ACCOUNT_NAME"]]
+       [:time {:class "mastodon-post-date", :datetime "DATETIME"} "TIME"]]
+      [:section
+       {:class "mastodon-post-content"}
+       [:p {:class "mastodon-post-text"} "POST_TEXT"]]
+      [:a
+       {:href "https://codeberg.org//forgejo/forgejo/src/commit/fe3473fc8b7b51e024b1a564fc7f01e385ebfb5e/tests/integration/api_activitypub_repository_test.go", :class "mastodon-post-link-preview", :target "_blank"}
+       [:img {:class "mastodon-post-link-image", :src "https://cdn.masto.host/socialmeissagmbhde/cache/preview_cards/images/000/545/643/original/199336f5aa5b9683.png"}]
+       [:div
+        {:class "mastodon-post-link-info"}
+        [:h4 {:class "mastodon-post-link-title"} "forgejo/tests/integration/api_activitypub_repos..."]
+        [:div {:class "mastodon-post-link-description"} "forgejo - Beyond coding. We forge."]
+        [:div {:class "mastodon-post-link-url"} "https://codeberg.org//forgejo/forgejo/src/commit/fe3473fc8b7b51e024b1a564fc7f01e385ebfb5e/tests/integration/api_activitypub_repository_test.go"]]]
+      [:footer
+       {:class "mastodon-post-footer"}
+       [:button
+        {:class "footer-button replies"}
+        [: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 "}]]
+        [:span {:class "count reply-count"} "REPLIES_COUNT"]]
+       [: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"}]]
+        [:span {:class "count retoot-count"} "REBLOGS_COUNT"]]
+       [: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"}]]
+        [:span {:class "count like-count"} "FAVOURITES_COUNT"]]]]]]])
--- a/src/test/dda/masto_embed/to_html_test.cljs
+++ b/src/test/dda/masto_embed/to_html_test.cljs
@ -0,0 +1,90 @@
+; Licensed to the Apache Software Foundation (ASF) under one
+; or more contributor license agreements. See the NOTICE file
+; distributed with this work for additional information
+; regarding copyright ownership. The ASF licenses this file
+; to you under the Apache License, Version 2.0 (the
+; "License"); you may not use this file except in compliance
+; with the License. You may obtain a copy of the License at
+;
+; http://www.apache.org/licenses/LICENSE-2.0
+;
+; Unless required by applicable law or agreed to in writing, software
+; distributed under the License is distributed on an "AS IS" BASIS,
+; WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+; See the License for the specific language governing permissions and
+; limitations under the License.
+
+(ns dda.masto-embed.to-html-test
+  (:require
+   [cljs.test :refer (deftest is)]
+   [dda.masto-embed.to-html :as sut]
+   [dda.masto-embed.data-helpers :as dh]
+   [hickory.core :as h]
+   [hickory.convert :as hc]
+   [shadow.resource :as rc]))
+
+(def 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}])
+
+(def link_prev
+  {:description "forgejo - Beyond coding. We forge.",
+   :author_url "",
+   :image_description "",
+   :width 290,
+   :type "link",
+   :embed_url "",
+   :blurhash "URC3:FsU1xJS-8NvJ9$OFIS3wexEJ9n*xEbG",
+   :title
+   "forgejo/tests/integration/api_activitypub_repository_test.go at fe3473fc8b7b51e024b1a564fc7f01e385ebfb5e",
+   :published_at nil,
+   :provider_name "Codeberg.org",
+   :language "en",
+   :url
+   "https://codeberg.org//forgejo/forgejo/src/commit/fe3473fc8b7b51e024b1a564fc7f01e385ebfb5e/tests/integration/api_activitypub_repository_test.go",
+   :author_name "",
+   :image
+   "https://cdn.masto.host/socialmeissagmbhde/cache/preview_cards/images/000/545/643/original/199336f5aa5b9683.png",
+   :provider_url "",
+   :height 290,
+   :html ""})
+
+; TODO: Replace this test
+;(deftest test-mastodon->html 
+;  (is (= [:ul {:class "list-group"}
+;          '([:li {:class "list-group-item, card"}
+;             [:div {:class "card-body"}
+;              [:h2 {:class "card-title"} [:a {:href "https://social.meissa-gmbh.de/users/team/statuses/104183256213204298/activity"} "2020-05-17" " " "10:12:10"]]
+;              [:p {:class "card-text"} "<p>We&apos;ve a new asciicast ... </p>"
+;               nil]]])]
+;         (sut/masto->html statuses))))
+
+(deftest test-masto-media->html
+  (is (= dh/post-with-img
+         (sut/masto-media->html dh/post-base-img media_attachments))))
+
+(deftest test-insert-link-prev
+  (is (= dh/post-with-prev
+         (sut/insert-link-prev dh/post-base-prev))))
+
+(deftest test-masto-link-prev->html
+  (is (= dh/filled-post-with-prev
+         (sut/masto-link-prev->html dh/post-base-prev link_prev))))
+
Author	SHA1	Message	Date
bom	a24ee62d16	Split mode functions into raw and rendered If we want to create different html to the default the raw functions can be used to build html from the reply itself.	2024-11-15 11:02:06 +01:00
bom	f0aa2633a7	General cleanup imports, deprecations & versions	2024-11-15 10:54:30 +01:00
patdyn	93aae1f7d6	[Skip-CI] Fix mastodon add website link	2024-08-06 15:01:00 +02:00
patdyn	795d5397e7	[Skip-CI] Fix mastodon add website link	2024-08-06 14:52:34 +02:00
patdyn	4a83bee3fc	[Skip-CI] Fix mastodon add website link	2024-08-06 14:43:15 +02:00
patdyn	e681d7be23	bump version to: 1.0.2-SNAPSHOT	2024-05-31 11:06:51 +02:00
patdyn	e14c07204a	release: 1.0.1	2024-05-31 11:06:51 +02:00
patdyn	979f6a3a80	Fix word wrap in chrome	2024-05-31 11:05:54 +02:00
erik	0fa7a15296	[Skip-CI] Update download links	2024-05-30 09:54:47 +02:00
erik	257adb6bb5	bump version to: 1.0.1-SNAPSHOT	2024-05-30 09:49:19 +02:00
erik	8b509e9f8c	release: 1.0.0	2024-05-30 09:49:18 +02:00
erik	176b919edf	Update readme	2024-05-30 09:47:34 +02:00
erik	39333ea4fe	Update readme	2024-05-29 16:19:37 +02:00
erik	f79529e0ea	Truncate long titles	2024-05-29 15:49:10 +02:00
erik	2a8171b9bb	Update in resources	2024-05-29 15:23:20 +02:00
erik	a91003568f	Remove dev notes	2024-05-29 15:13:39 +02:00
erik	99323a05ef	Format	2024-05-29 15:09:10 +02:00
erik	47126a7b75	Add arg to masto-html for mode	2024-05-29 15:09:01 +02:00
erik	fd72cdecfa	Remove unnecessary media queries	2024-05-29 15:08:20 +02:00
erik	4b52c1214a	Fix post content	2024-05-29 15:08:00 +02:00
erik	8bb9e6c0f8	Implement proper font size calc	2024-05-29 15:07:28 +02:00
erik	9f253e4401	Use div instead of p For the case that hashtags and mentions are present.	2024-05-29 14:31:16 +02:00
erik	643541f798	Add post css	2024-05-29 14:30:48 +02:00
erik	14f66cb2e1	Remove unused	2024-05-29 14:30:33 +02:00
erik	ec9e4ae300	Rename to post css	2024-05-29 14:29:59 +02:00
erik	ff49e13b86	Use post.css and replies mode	2024-05-29 14:29:46 +02:00
erik	773ecc1820	Move link elem to head	2024-05-29 13:59:14 +02:00
Clemens	0f330ca3c7	remove debug log	2024-05-29 11:27:50 +02:00
Clemens	1cde7289c5	Handle account and reply mode in same namespace, and html generation in own namespace	2024-05-29 11:25:49 +02:00
erik	0b85045158	Merge branch 'master' of ssh://repo.prod.meissa.de:2222/meissa/dda-masto-embed	2024-05-29 11:06:33 +02:00
erik	524ee19dc8	Update todos	2024-05-29 11:06:29 +02:00
Clemens	6a637dc2cf	remove debug lines	2024-05-29 10:18:16 +02:00
erik	8f02c0124f	Add dev notes	2024-05-29 10:16:21 +02:00
Clemens	a7ac9fab94	do not show link-preview if card is empty	2024-05-29 10:12:43 +02:00
erik	8d41a8236d	Remove erroneous text	2024-05-28 18:22:13 +02:00
erik	1e1eb7786e	Fix test	2024-05-28 18:20:20 +02:00
erik	daf9149b04	Re-Add post html and remove link preview stub	2024-05-28 18:05:32 +02:00
erik	142b74cd9b	Refactor to to_html Currently keeping reply_mode as ref	2024-05-28 18:04:58 +02:00
erik	6a7e7deac6	Cleanup	2024-05-28 17:55:09 +02:00
erik	73943a9af9	Add complete post for ref	2024-05-28 17:54:59 +02:00
erik	9ef30bd5a2	Remove unused	2024-05-28 17:53:18 +02:00
erik	bc604143b1	Rewrite for handling hiccup consistently	2024-05-28 17:53:10 +02:00
erik	6bcbfa4da6	Rename to data_helpers	2024-05-28 15:45:06 +02:00
erik	b16e3ea61f	Remove unused data	2024-05-28 15:42:48 +02:00
erik	1fe7b2ed78	Add todo	2024-05-28 15:21:42 +02:00
Clemens	e0a735e9bc	remove unused functions	2024-05-22 12:14:26 +02:00
erik	430911272e	Dont use let	2024-05-17 18:54:08 +02:00
erik	a21ff9592d	Remove todo	2024-05-17 18:52:26 +02:00
erik	aa5afcd90f	Test for value filling	2024-05-17 18:45:04 +02:00
erik	19e602bf9c	Assoc without conj Otherwise the vector is wrapped into a list	2024-05-17 18:31:49 +02:00
erik	644717d272	Remove erroneous key	2024-05-17 18:30:59 +02:00
erik	90ec08522d	Ignore test compares	2024-05-17 18:12:48 +02:00
erik	8422e3580a	One function for inserting elem, one for filling vals	2024-05-17 18:12:22 +02:00
erik	4fe4060a1f	Test if class in attrs	2024-05-17 18:11:55 +02:00
erik	07c7caade1	Fix	2024-05-17 18:10:25 +02:00
erik	1143ba78a4	Test correct function	2024-05-17 18:10:13 +02:00
erik	4537956c41	Fix	2024-05-17 18:09:46 +02:00
erik	4f8eeb3eea	Add empty a elem for link preview	2024-05-17 18:09:29 +02:00
erik	ad352eb7fb	Remove link prev section	2024-05-17 16:29:38 +02:00
erik	43a3cbe6af	Fix media->html test	2024-05-17 16:29:15 +02:00
erik	098403588f	Add minified html res	2024-05-17 16:28:38 +02:00
erik	30f7ecd612	WIP implement link prev	2024-05-17 13:33:49 +02:00
erik	b0d0ba9bd7	Fix test Put hiccup defs for the test in own ns.	2024-05-17 12:47:50 +02:00
erik	ea01bfe676	Delete redundant test	2024-05-17 11:30:22 +02:00
erik	eb78652718	Rename for clarity	2024-05-17 11:29:48 +02:00
erik	02b6af0e91	WIP Add test for masto media	2024-05-17 11:29:38 +02:00
erik	a7ca30cf09	Add test values	2024-05-17 11:29:07 +02:00
bom	0ff6f40af8	Move url in image element to src	2024-05-17 08:26:38 +02:00
bom	051800a3d2	Move masto-edn references to doc	2024-05-17 08:20:15 +02:00
bom	c78a4dfdbe	Cleanup account_mode	2024-05-17 08:19:53 +02:00
bom	0a83f43921	Conditionally insert image element	2024-05-17 08:15:27 +02:00
erik	af4f94adfc	Add dummy function	2024-05-16 16:45:35 +02:00
erik	dce3eb0bb9	Add tests to fail	2024-05-16 16:45:14 +02:00
erik	2d0dcf60a3	Refactor function names	2024-05-16 15:11:27 +02:00
erik	a2265d6b42	Add url to acc names	2024-05-16 14:47:00 +02:00
erik	52c4574a3b	Style and responsiveness tweaks	2024-05-16 14:46:22 +02:00
erik	b8cbac40f6	Make responsive	2024-05-16 13:24:37 +02:00
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
bom	b01bae1f93	Parse masto response into html header	2024-05-16 10:28:01 +02:00
bom	92456c16bf	Parse html as hickory	2024-05-16 10:27:35 +02:00
erik	a5f4be5dc2	Update deps	2024-05-15 16:12:54 +02:00
erik	ed7c2a1f5f	Add debug function	2024-05-15 16:12:21 +02:00
erik	afb4152500	Add html and css	2024-05-15 16:12:11 +02:00
erik	e2f74a7109	Merge branch 'master' of ssh://repo.prod.meissa.de:2222/meissa/dda-masto-embed	2024-05-15 13:41:09 +02:00
erik	e356bae922	Update gitignore	2024-05-15 13:40:00 +02:00
bom	d926031406	Fix ci paths	2024-05-10 12:23:07 +02:00
bom	d35335c234	Fix ci file name	2024-05-10 12:12:08 +02:00
bom	7c5bc8f412	Update build to gitlab and ddadevops	2024-05-10 12:10:59 +02:00
bom	efea7a59bf	Fix account mode test	2024-05-10 12:10:43 +02:00
bom	38291503a3	Fix reply mode test	2024-05-10 12:10:30 +02:00
bom	eb13c31062	Get status url instead of card	2024-05-10 12:10:19 +02:00
bom	0b0b387ec8	Ignore compiled python build files	2024-05-10 12:09:37 +02:00
bom	0e7a16f59b	Remove github workflow	2024-05-10 11:39:42 +02:00
bom	1821e2bf08	Link to status instead of account	2024-05-10 11:31:06 +02:00
bom	4114318ded	Filter replies from account_mode	2024-05-10 11:25:17 +02:00
bom	9f75c9ed0d	Filter boosts from account status	2024-05-10 11:21:18 +02:00
erik	93b1faff6a	[Skip-CI] Add Development and mirrors section	2023-07-28 14:44:04 +02:00
jerger	9106a08e6b	update mirror infor	2023-01-20 14:43:28 +01:00
jerger	70002e018a	add mirrors	2023-01-04 11:44:20 +01:00
bom	45b06cfba6	releasing	2022-05-04 12:43:28 +02:00
bom	f2dbb2cf49	fixed some typos in readme	2022-04-08 10:12:06 +02:00
bom	557f9fb56f	version bump	2022-04-08 10:09:52 +02:00
bom	cff37e8dfd	releasing	2022-04-08 10:09:15 +02:00
bom	1f8610410d	reverse status order	2022-04-08 10:08:09 +02:00
bom	f4b4e69516	version bump	2022-03-11 14:57:40 +01:00
bom	0376c46f7a	releasing	2022-03-11 14:56:56 +01:00
bom	683df41e2a	changed date format to existing on website	2022-03-11 14:55:12 +01:00
bom	e30b09484f	version bump	2022-03-11 14:35:59 +01:00
bom	668b5a77ae	releasing	2022-03-11 14:35:27 +01:00
bom	dbf2f71b9f	fixed test	2022-03-11 14:34:37 +01:00
bom	eb9c1d11ab	fniished image impl	2022-03-11 14:34:32 +01:00
bom	2b1b032039	wip mob	2022-03-11 14:26:47 +01:00
jerger	4c494e7d33	wip	2022-03-11 13:58:18 +01:00
jerger	bb5d0eab5f	refactoring	2022-03-11 13:11:05 +01:00
jerger	e6eef65e1b	update doc	2022-03-11 12:50:09 +01:00
jerger	96de64e06e	improve doc	2022-03-11 11:31:38 +01:00
jerger	fce8227f66	version bump	2022-03-11 10:02:30 +01:00
jerger	a32e895f7a	releasing	2022-03-11 10:01:29 +01:00
jerger	0475e3b986	update dependency	2022-03-11 10:00:46 +01:00
bom	4bde2412fe	cleanup in app	2022-03-11 09:50:01 +01:00
bom	e678de8f4e	fixed links in readme	2022-03-11 09:49:23 +01:00
bom	fc45b37012	removed old div	2022-03-11 09:49:05 +01:00
bom	cb7ec39d76	version bump	2022-03-10 10:51:36 +01:00
bom	2156a5db6f	releasing	2022-03-10 10:50:43 +01:00
bom	4c21e559b2	fixed misleading doc in readme	2022-03-10 10:48:28 +01:00
bom	442050f366	added Doc of new feature to Readme	2022-03-10 10:46:22 +01:00
bom	b185ce058f	removed obsolete comments	2022-03-10 10:21:50 +01:00
bom	160eacf313	refactored code into reply and account mode	2022-03-10 10:18:37 +01:00
bom	44177d5c0b	finished POC for filtering by favorited replies	2022-03-10 10:02:17 +01:00
bom	ec73ff83e3	removed "get-filtered-replies" function	2022-03-10 10:01:53 +01:00
jerger	0bed73f287	update versions	2022-03-04 11:51:30 +01:00
bom	84da12fa64	wip mob	2022-03-04 11:32:46 +01:00
Mattis Böckle	14dd5afe87	Merge pull request #3 from mattisboeckle/master WIP Changes to allow comment function	2022-03-04 11:07:44 +01:00
Mattis Böckle	6b8ca6d2ee	Merge branch 'DomainDrivenArchitecture:master' into master	2022-03-04 11:06:28 +01:00
bom	631a647255	WIP mob	2022-03-04 10:53:19 +01:00
bom	a1533bd452	WIP for automatic comments	2022-03-02 14:40:25 +01:00
bom	c09524e1a8	updated gitignote	2022-02-24 15:56:51 +01:00
bom	bc5af89daa	base function to get replies to status	2022-02-24 15:56:35 +01:00
bom	1cb2d824d0	refactor app to use common function	2022-02-24 14:08:43 +01:00
Jan Krebs	770006b06f	Add copyright notice to Readme	2021-06-29 09:54:03 +02:00
jem	437033ef25	add unstable build	2020-07-13 18:23:07 +02:00
jem	30e6e1a8e9	fix main	2020-07-10 10:47:09 +02:00
jem	6a84df7c7e	releasing	2020-07-10 10:23:04 +02:00
jem	d8ac788a46	Merge branch 'master' of github.com:DomainDrivenArchitecture/dda-masto-embed	2020-07-10 10:20:49 +02:00
jem	0b1e9773da	reduce artefact size	2020-07-10 10:20:13 +02:00
M.Jerger	5600150847	Merge pull request #1 from mattisboeckle/master Fixed typo in Readme	2020-07-10 08:25:06 +02:00
jem	18fa365d9e	releasing	2020-07-10 08:17:46 +02:00
mattisderbock@gmail.com	94d2791c4a	Fixed typo in Readme	2020-07-09 17:33:48 +02:00
jem	36e0df4812	releasing	2020-07-09 17:22:05 +02:00
jem	e18d06fbe5	releasing	2020-07-09 17:16:43 +02:00
jem	7450d1d314	fix the npm publish	2020-07-09 17:00:03 +02:00
jem	d2d6e30a7f	format	2020-07-08 21:19:54 +02:00
jem	527e950b8d	reorder & add styling info	2020-07-08 21:16:17 +02:00
jem	40c06ad226	remove leiningen reference	2020-07-08 21:12:01 +02:00
jem	985f13e661	add communication & build status	2020-07-08 21:11:13 +02:00
jem	c203f75c79	update doc	2020-07-08 20:57:12 +02:00
jem	034467730f	version bump	2020-07-08 20:55:17 +02:00
jem	06f904c7ef	releasing	2020-07-08 20:43:09 +02:00
jem	5707750913	fix build	2020-07-08 20:42:46 +02:00
jem	98c6814297	releasing	2020-07-08 20:36:53 +02:00
jem	56f33f95cb	fix releasing	2020-07-08 20:35:30 +02:00
jem	1466c3123f	add release options	2020-07-08 20:35:16 +02:00
jem	431df76787	refactor rendering out	2020-07-08 20:35:01 +02:00
jem	ed8f26ec50	fix build & prepare release	2020-07-08 09:36:07 +02:00
jem	91d08399d9	releasing	2020-07-08 09:25:44 +02:00
jem	45c5b10d93	added some bootstrap styling	2020-07-08 09:23:28 +02:00
jem	5f076fccc6	fix build #3	2020-07-03 08:50:46 +02:00
jem	2420e136cc	releasing	2020-07-03 08:46:59 +02:00
jem	370d33d55d	fix build #2	2020-07-03 08:40:17 +02:00
jem	479bd2cdb3	fix build #1	2020-07-03 08:39:08 +02:00
jem	6d2c096cc6	new ci & add doc	2020-07-03 08:38:08 +02:00
jem	6f4161172a	adjust styling	2020-07-02 09:21:53 +02:00
jem	5934c595a0	going to release	2020-06-30 13:00:48 +02:00
jem	018281c148	release-test	2020-06-30 10:28:35 +02:00
jem	a3eac086b6	test 0.0.3	2020-06-30 09:20:20 +02:00
jem	f92b652bf9	test releasing as lib	2020-06-30 09:09:59 +02:00
jem	65a0f5cb00	add github actions	2020-06-29 21:59:31 +02:00
jem	821092744f	wip	2020-06-25 09:18:24 +02:00
jem	b5c1a12e33	print acnt->id to js-console	2020-06-24 19:59:02 +02:00
jem	7775dc88f5	improved timestamp & added card	2020-06-24 19:53:04 +02:00
jem	0cfdf7fc02	first styling	2020-06-23 20:09:00 +02:00
jem	79f0a0e1ce	remove unused	2020-06-19 17:31:30 +02:00
jem	503f9fccc2	remove unused	2020-06-19 17:28:32 +02:00
jem	ca16b645bb	now it works	2020-06-19 17:26:34 +02:00
jem	c28d74cc5b	wip	2020-06-19 15:25:08 +02:00
jem	8c6bf43765	wip	2020-06-19 15:02:24 +02:00
jem	2f54b0fddd	wip	2020-06-19 14:58:59 +02:00
jem	85ef9b8667	jans-mob	2020-06-19 11:05:45 +02:00
jem	c4f62a9b4d	Merge branch 'master' of github.com:DomainDrivenArchitecture/dda-masto-embed	2020-04-30 09:17:52 +02:00
jem	a5dec35f9c	format	2020-04-30 09:17:48 +02:00
jem	08e69ef973	update deps	2020-04-27 12:21:46 +02:00
jem	5fde78a343	more direct	2020-04-26 18:35:09 +02:00
jem	de0c47124c	add dir-api	2020-04-26 17:41:08 +02:00
jem	41a1387bdb	get input from html	2020-04-25 14:26:33 +02:00
jem	61746c417f	use more dedicated ns	2020-04-25 13:42:54 +02:00
jem	73b739e594	render output to document	2020-04-24 18:41:40 +02:00
jem	f3c9b3bd99	fix security issue	2020-04-24 18:31:58 +02:00
jem	fa50477c33	fix security issue	2020-04-24 18:28:13 +02:00
jem	d9467f5f1d	works now in a more clojure way	2020-04-24 18:22:41 +02:00
jem	c7af7ed650	some more npm magic	2020-04-24 18:04:25 +02:00
				`@ -0,0 +1 @@`
				`<img class="mastodon-post-image" src="https://cdn.masto.host/socialmeissagmbhde/media_attachments/files/112/432/505/467/393/505/original/0d01ddb07440328e.jpg"></img>`
				`@ -0,0 +1 @@`
				`<a href="LINK_PREVIEW_URL" class="mastodon-post-link-preview" target="_blank"><img class="mastodon-post-link-image" src="LINK_PREVIEW_IMG_URL"></img><div class="mastodon-post-link-info"><h4 class="mastodon-post-link-title">LINK_PREVIEW_TITLE</h4><div class="mastodon-post-link-description">LINK_PREVIEW_DESC</div><div class="mastodon-post-link-url">LINK_PREVIEW_URL</div></div></a>`
				`@ -0,0 +1 @@`
				<section class="section post-container"><article class="mastodon-post"><header class="mastodon-post-header"><img class="mastodon-post-avatar" src="AVATAR_URL"></img><div class="mastodon-post-names"><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><section class="mastodon-post-content"><p class="mastodon-post-text">POST_TEXT</p></section><a href="LINK_PREVIEW_URL" class="mastodon-post-link-preview" target="_blank"></a><footer class="mastodon-post-footer"><button class="footer-button replies"><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">REPLIES_COUNT</span></button><button class="footer-button retoots">src/main/dda/masto_embed/resources/post.html<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">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">FAVOURITES_COUNT</span></button></footer></article></section>