meissa/dda-masto-embed
6
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity
Embeds mastodon timline into a html page. Uses JS, no intermediate server required.
215 commits 3 branches 24 tags 568 KiB
Clojure 53.1%
HTML 26.2%
CSS 17.6%
Python 3.1%
Find a file
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
doc Remove dev notes 2024-05-29 15:13:39 +02:00
public Fix word wrap in chrome 2024-05-31 11:05:54 +02:00
src Split mode functions into raw and rendered 2024-11-15 11:02:06 +01:00
.gitignore Ignore test compares 2024-05-17 18:12:48 +02:00
.gitlab-ci.yml Fix ci paths 2024-05-10 12:23:07 +02:00
build.py bump version to: 1.0.2-SNAPSHOT 2024-05-31 11:06:51 +02:00
LICENSE Initial commit 2020-04-23 09:01:24 +02:00
package.json bump version to: 1.0.2-SNAPSHOT 2024-05-31 11:06:51 +02:00
README.md [Skip-CI] Fix mastodon add website link 2024-08-06 15:01:00 +02:00
shadow-cljs.edn General cleanup 2024-11-15 10:54:30 +01:00

README.md

dda-masto-embed

build | pipeline status

DeltaChat chat over e-mail | M meissa@social.meissa-gmbh.de | Blog | Website

In brief

dda-masto-embed embedd either your timeline or replies to a specific post on your website.

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 :-)

<!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>

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:

<!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>

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

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

shadow-cljs compile test

Releasing

prod release

#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:

License

Copyright © 2024 meissa GmbH Licensed under the Apache License, Version 2.0 (the "License") Pls. find licenses of our subcomponents here