embedodon/index.html at main · danieldickison/embedodon · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
  <head>
    <meta charset="utf-8" />
    <title>embedodon</title>

    <script type="module">
      // import { Embedodon, EmbedodonElement } from './dist/index.js'
      import { Embedodon, EmbedodonElement } from 'https://cdn.jsdelivr.net/npm/embedodon@^1.0.0/dist/index.js'
      customElements.define('embedodon-example', EmbedodonElement)

      const custom = document.querySelector('embedodon-example.custom')
      const customCSS = new CSSStyleSheet()
      customCSS.replaceSync(`
        a {
          display: inline-block;
          transition: transform 200ms;
        }
        a:hover {
          transform: scale(1.5);
        }
      `)
      custom.shadowRoot.adoptedStyleSheets = custom.shadowRoot.adoptedStyleSheets.concat(customCSS)
    </script>

    <style>
      :root {
        --fg: #333;
        --bg: #edc;
        --code-bg: #eee;
        --link: #68c;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --fg: #ddd;
          --bg: #531;
          --code-bg: #333;
          --link: #9ad;
        }
      }

      body {
        background: var(--bg);
        color: var(--fg);
        font-family: sans-serif;
        max-width: 50rem;
        margin: 0 auto;
        padding: 1rem;
      }

      a {
        color: var(--link);
      }

      pre {
        width: 100%;
        margin: 1rem 0.5rem;
        padding: 0.5rem;
        overflow: scroll;
        background: var(--code-bg);
        border: solid 1px var(--fg);
      }

      .examples {
        display: grid;
        grid-template-columns: 30rem 30rem;
        gap: 1rem;
        width: 100%;
      }

      embedodon-example.custom {
        font-family: ui-monospace, monospace;
        --fg: #603;
        --bg: #eee;
        --link: #b0b;
        --border: 2px dashed var(--fg);
      }
      @media (prefers-color-scheme: dark) {
        embedodon-example.custom {
          --fg: #d9b;
          --bg: #222;
          --link: #b6e;
        }
      }
      embedodon-example.custom::part(timestamp) {
        font-style: italic;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <h1>embedodon</h1>
    <p>
      embedodon is a simple client-side typescript library to render a Mastodon user’s public timeline.
    </p>
    <ul>
      <li>source: <a href="https://github.com/danieldickison/embedodon">github.com/danieldickison/embedodon</a></li>
    </ul>

    <h2>example</h2>
    <p>
      A simple example for showing the author’s toots, using a standard built-in color scheme:
    </p>

<pre>&lt;script type="module">
  import { EmbedodonElement } from 'https://cdn.jsdelivr.net/npm/embedodon@^1.0.0/dist/index.js'
  customElements.define('embedodon-example', EmbedodonElement)
&lt;/script>

&lt;embedodon-example
  username="@dand@social.lol"
  class="standard"
>&lt;/embedodon-example></pre>

    <p>
      You can also <a href="https://github.com/danieldickison/embedodon/tree/main#customize-styles">customize the appearance</a> using CSS.
    </p>

    <p>
      On the left is the default appearance; on the right is customized with some extra network delay added for debugging:
    </p>
    <div class="examples">
      <embedodon-example username="@dand@social.lol" class="standard"></embedodon-example>
      <embedodon-example username="@dand@social.lol" class="custom"
        debug-logging debug-pause="2000"></embedodon-example>
    </div>
  </body>
</html>