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.
211 commits 3 branches 24 tags 568 KiB
Clojure 53.1%
HTML 26.2%
CSS 17.6%
Python 3.1%
Find a file
patdyn 4a83bee3fc [Skip-CI] Fix mastodon add website link
2024-08-06 14:43:15 +02: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 Fix word wrap in chrome 2024-05-31 11:05:54 +02: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 14:43:15 +02:00
shadow-cljs.edn Parse html as hickory 2024-05-16 10:27:35 +02:00

README.md

dda-masto-embed

build

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 © 2023 meissa GmbH Licensed under the Apache License, Version 2.0 (the "License") Pls. find licenses of our subcomponents here