808.foxx.ink
Embed and aggregate Bluesky and Mastodon replies as blog or static-site comments.
change demo url
+14
-21
+4
-6
README.md
+4
-6
README.md
···
1
1
# Fediscuss
2
2
3
-
Embed and aggregate Bluesky and Mastodon replies as blog or static-site comments.
3
+
Embed and aggregate Bluesky and Mastodon replies as comments on static-site.
4
4
5
5
```html
6
6
<!-- assign the corresponding i18n in #comments element -->
···
24
24
</article>
25
25
<!-- assign the corresponding data-url here -->
26
26
<ul id="mstd-comments" aria-busy="true" aria-label="Discussion on Mastodon"
27
-
data-url="https://infosec.exchange/@foxx/113979609651534969"></ul>
27
+
data-url="https://instance.domain/@username/123456789012345678"></ul>
28
28
<ul id="bsky-comments" aria-busy="true" aria-label="Discussion on Bluesky"
29
-
data-url="https://bsky.app/profile/808.foxx.ink/post/3lknem6ci2s2h"></ul>
29
+
data-url="https://bsky.app/profile/username/post/0123456789abc"></ul>
30
30
<!-- if both Mastodon & Bluesky posts exist please add #fed-comments -->
31
31
<ul id="fed-comments" aria-busy="false" aria-label="Aggregated Discussion"></ul>
32
32
</div>
···
34
34
<script src="index.js" defer></script>
35
35
```
36
36
37
-
see the `index.html` or on [this Hugo theme's exampleSite](https://foxihd.github.io/hugo-brewm/en/post/configure-discussion/) for demo.
38
-
39
37
## License and Atrribution
40
38
41
39
Copyleft --- Legal advice needed!
42
40
43
-
This code originally forked from:
41
+
This code is originally forked from:
44
42
- [dpecos/mastodon-comments](https://github.com/dpecos/mastodon-comments) - ([GPLv3 License](https://github.com/dpecos/mastodon-comments/blob/master/LICENSE))
45
43
- [nsideras/bluesky-js-comments](https://github.com/nsideras/bluesky-js-comments) - ([MIT Licence](https://github.com/nsideras/bluesky-js-comments/blob/main/LICENSE))
+10
-15
index.html
+10
-15
index.html
···
109
109
<!-- for demo reason element above is replaced with this instead -->
110
110
<div style="margin: 1rem;">
111
111
This is example of discussion starter.
112
+
The comment threads bellow will return error,
113
+
Please enter valid Bluesky & Mastodon URL.
112
114
<br />
113
115
<noscript>
114
116
<div id=comments-error role=alert>Uh-oh... Javascript is disabled! No comments to display.</div>
115
117
</noscript>
116
118
</div>
117
119
<nav aria-label="Join Discussion">
118
-
<a id="join-discussion" href="https://infosec.exchange/@foxx/113979609651534969" rel="nofollow" aria-label="Join Discussion">
119
-
<i class="icon">mastodon</i>
120
+
<a id="join-discussion" href="https://instance.domain/@username/123456789012345678" rel="nofollow" aria-label="Join Discussion">
121
+
<i class="icon mastodon"></i>
120
122
<span>Join Discussion</span>
121
123
</a>
122
-
<a id="join-discussion-bluesky" href="https://bsky.app/profile/808.foxx.ink/post/3lknem6ci2s2h" rel="nofollow" aria-label="Reply with bluesky" title="Reply with bluesky">
124
+
<a id="join-discussion-bluesky" href="https://bsky.app/profile/username/post/0123456789abc" rel="nofollow" aria-label="Reply with bluesky" title="Reply with bluesky">
123
125
<i class="icon">bluesky</i>
124
126
</a>
125
127
</nav>
126
128
</article>
127
129
<!-- assign the corresponding data-url here -->
128
-
<ul id="mstd-comments" aria-busy="true" aria-label="Discussion"
129
-
data-url="https://infosec.exchange/@foxx/113979609651534969"></ul>
130
-
<ul id="bsky-comments" aria-busy="true" aria-label="Discussion"
131
-
data-url="https://bsky.app/profile/808.foxx.ink/post/3lknem6ci2s2h"></ul>
132
-
<ul id="fed-comments" aria-busy="false" aria-label="Discussion"></ul>
130
+
<ul id="mstd-comments" aria-busy="true" aria-label="Discussion on Mastodon"
131
+
data-url="https://instance.domain/@username/123456789012345678"></ul>
132
+
<ul id="bsky-comments" aria-busy="true" aria-label="Discussion on Bluesky"
133
+
data-url="https://bsky.app/profile/username/post/0123456789abc"></ul>
134
+
<ul id="fed-comments" aria-busy="false" aria-label="Aggregated Discussion"></ul>
133
135
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.6/dist/purify.min.js" referrerpolicy="no-referrer" integrity="sha256-ieH6dkfLSVNw06mXrOQ4f10V2fTFrxI1LFPapACVYoc=" crossorigin="anonymous" defer=""></script>
134
136
<script src="index.min.js" defer></script>
135
-
<!-- post moderation by css example -->
136
-
<style>
137
-
#bafyreigkkrppdb2ecncu32mtybmnhntvb4dijl374yln5k7jiboewcevdq,
138
-
#bafyreia2bifitj6j25aeo42btshgvt23rzaw4rda3olipztrhzrpgu4doq {
139
-
filter: blur(10px);
140
-
}
141
-
</style>
142
137
</main>
143
138
</body>
144
139
</html>