mastodon-comments/example/index.html at master · dpecos/mastodon-comments · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.1/purify.min.js" integrity="sha512-uHOKtSfJWScGmyyFr2O2+efpDx2nhwHU2v7MVeptzZoiC7bdF6Ny/CmZhN2AwIK1oCFiVQQ5DA/L9FSzyPNu6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script type="module" src="../mastodon-comments.js"></script>

    <style>
      /*
      mastodon-comments {
        --font-color: #5d686f;
        --font-size: 1.0rem;

        --block-border-width: 1px;
        --block-border-radius: 3px;
        --block-border-color: #ededf0;
        --block-background-color: #f7f8f8;

        --comment-indent: 40px;
      }
      */

      @media only screen and (max-width: 1024px) {
        mastodon-comments {
          --comment-indent: 20px;
        }
      }

      @media only screen and (max-width: 640px) {
        mastodon-comments {
          --comment-indent: 0px;
        }
      }

      body {
        font-family: sans-serif;
        background-color: #ffffff;
        color: #222222;
      }

      @media (prefers-color-scheme: dark) {
        body {
        background-color: #121212;
        color: #d1d1d1;
        }
      }
    </style>

  </head>
  <body>
    <h1>Mastodon Comments Webcomponent</h1>

    <mastodon-comments host="fosstodon.org" user="dpecos" tootId="109574160582937075" style="max-width: 1024px"></mastodon-comments>
    <!-- with a moderation filter on the toots: only show those that are favorited by the user "dpecos" -->
    <!--mastodon-comments host="fosstodon.org" user="dpecos" tootId="109574160582937075" filter="favorites" style="max-width: 1024px"></mastodon-comments-->
  </body>
</html>