dda-masto-embed/README.md

143 lines
4.2 KiB
Markdown
Raw Normal View History

2020-04-23 07:01:24 +00:00
# dda-masto-embed
2024-05-30 07:45:17 +00:00
2020-07-08 19:11:13 +00:00
![build](https://github.com/DomainDrivenArchitecture/dda-masto-embed/workflows/build-it/badge.svg)
[<img src="https://meissa-gmbh.de/img/community/Mastodon_Logotype.svg" width=20 alt="team@social.meissa-gmbh.de"> team@social.meissa-gmbh.de](https://social.meissa-gmbh.de/@team) | [Website & Blog](https://domaindrivenarchitecture.org)
2023-01-04 10:44:20 +00:00
## In brief
2022-03-11 10:31:38 +00:00
2024-05-30 07:45:17 +00:00
dda-masto-embed embedd either your timeline or replies to a specific post on your website.
2020-07-03 06:38:08 +00:00
* Uses JS, **no intermediate server** required,
2024-05-30 07:45:17 +00:00
* in replies mode you can decide to show only favorited replies in order to do upfront moderation
2024-05-29 14:19:37 +00:00
* example for embedding a timeline at [meissa.de/news](https://meissa.de/news/)
2024-05-30 07:45:17 +00:00
* example for embedding replies to a specific post at [meissa.de/sustainibility_microplastic](https://meissa.de/about-meissa/03plastik-aktion/)
2020-07-03 06:38:08 +00:00
* Download latest version at:
2024-05-30 07:54:39 +00:00
* [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)
2020-07-03 06:38:08 +00:00
* It is **OpenSource** - published under the Apache License, Version 2.0
2024-05-29 14:19:37 +00:00
### css and html as base
Uses a generalized HTML structure with descriptive classes and css grid for styling.
2024-05-30 07:45:17 +00:00
The structure in the css follows the html structure. Both accound mode and replies mode are styled there.
2024-05-29 14:19:37 +00:00
2024-05-30 07:45:17 +00:00
Re-styling your timeline should now be a breeze.
2023-01-04 10:44:20 +00:00
## Include a timeline
2022-03-11 10:31:38 +00:00
2022-04-08 08:12:06 +00:00
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 :-)
2022-03-11 10:31:38 +00:00
2024-05-30 07:45:17 +00:00
```html
2020-07-03 06:38:08 +00:00
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>masto-embed</title>
2024-05-30 07:45:17 +00:00
<link rel="stylesheet" href="post.css">
2020-07-03 06:38:08 +00:00
</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>
```
2022-03-11 10:31:38 +00:00
Reference:
2024-05-30 07:45:17 +00:00
2022-03-11 10:31:38 +00:00
* `id` has to be `masto-embed`
2022-03-11 11:50:09 +00:00
* `account_name` is the name of your account.
2022-03-11 10:31:38 +00:00
* `host_url` the url of your mastodon instance.
2024-05-30 07:45:17 +00:00
* Use the `post.css` from the src/main/resources or the public folder.
2020-04-27 10:21:46 +00:00
2023-01-04 10:44:20 +00:00
## Using in reply mode
2022-03-10 09:46:22 +00:00
2022-03-11 10:31:38 +00:00
Including replies of one of your posts will work as follows:
2024-05-30 07:45:17 +00:00
```html
2022-03-11 10:31:38 +00:00
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>masto-embed</title>
2024-05-30 07:45:17 +00:00
<link rel="stylesheet" href="post.css">
2022-03-11 10:31:38 +00:00
</head>
<body>
<div id="masto-embed"
account_name="team"
replies_to="112432461907918517"
2022-03-11 10:31:38 +00:00
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>
```
2024-05-30 07:45:17 +00:00
2022-03-11 10:31:38 +00:00
Reference:
2024-05-30 07:45:17 +00:00
2022-03-11 10:31:38 +00:00
* `id` has to be `masto-embed`
2022-03-11 11:50:09 +00:00
* `account_name` is the name of your account.
2022-03-11 10:31:38 +00:00
* `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.
2023-01-04 10:44:20 +00:00
## Dev setup
2024-05-30 07:45:17 +00:00
```bash
2020-07-03 06:38:08 +00:00
npm install -g npx
npm install -g shadow-cljs
npm install -g source-map-support --save-dev
npm install
2020-04-24 12:42:30 +00:00
shadow-cljs watch frontend
2020-06-19 13:02:24 +00:00
```
open browser at http://localhost:8080
Connect your repl for :frontend
2023-01-04 10:44:20 +00:00
## Run the tests
2020-06-19 13:02:24 +00:00
2024-05-30 07:45:17 +00:00
```bash
2020-04-24 15:26:42 +00:00
shadow-cljs compile test
```
2020-07-03 06:38:08 +00:00
2023-01-04 10:44:20 +00:00
## Releasing
2024-05-30 07:45:17 +00:00
2020-07-03 06:38:08 +00:00
### prod release
2024-05-30 07:45:17 +00:00
```bash
2020-07-03 06:38:08 +00:00
#adjust version
2020-07-08 07:25:44 +00:00
vi package.json
2020-07-08 18:42:46 +00:00
git commit -am 'releasing'
2020-07-03 06:46:59 +00:00
git tag -am 'releasing' <version>
git push --follow-tags
2020-07-03 06:38:08 +00:00
# Bump version
2020-07-08 18:42:46 +00:00
vi package.json
2020-07-03 06:38:08 +00:00
git commit -am "version bump" && git push
2020-07-08 19:19:54 +00:00
```
2021-06-29 07:54:03 +00:00
## Development & mirrors
2024-05-30 07:45:17 +00:00
Development happens at: https://repo.prod.meissa.de/meissa/dda-masto-embed
Mirrors are:
2024-05-30 07:45:17 +00:00
* 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
2021-06-29 07:54:03 +00:00
## License
2023-01-04 10:44:20 +00:00
Copyright © 2023 meissa GmbH
2021-06-29 07:54:03 +00:00
Licensed under the [Apache License, Version 2.0](LICENSE) (the "License")
Pls. find licenses of our subcomponents [here](doc/SUBCOMPONENT_LICENSE)