activity-graph/index.html at main · hsablonniere/activity-graph · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;," />
    <title>activity-graph Web Component demos</title>
    <style>
      body {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        margin: 2em 1em;
      }
    </style>
    <link rel="stylesheet" href="themes/github.css" />
    <link rel="stylesheet" href="themes/serializd.css" />
    <link rel="stylesheet" href="themes/monkeytype.css" />
    <link rel="stylesheet" href="themes/letterboxd.css" />
    <script type="importmap">
      {
        "imports": {
          "lit": "https://esm.sh/lit@3.2.0",
          "lit/": "https://esm.sh/lit@3.2.0/"
        }
      }
    </script>
    <script type="module" src="./src/activity-graph.js"></script>
    <script type="module">
      const githubContributions = await fetch('./data/github-contributions.json').then((r) => r.json());
      document.querySelector('activity-graph.github').data = githubContributions;

      const serializdDiary = await fetch('./data/serializd-diary.json').then((r) => r.json());
      document.querySelector('activity-graph.serializd').data = serializdDiary;

      const monkeytypeData = await fetch('./data/monkeytype-data.json').then((r) => r.json());
      document.querySelector('activity-graph.monkeytype').data = monkeytypeData;

      const letterboxdDiary = await fetch('./data/letterboxd-diary.json').then((r) => r.json());
      document.querySelector('activity-graph.letterboxd').data = letterboxdDiary;
    </script>
  </head>
  <body>
    <h1>
      <code style="background-color: #eee; padding: 0.1em 0.25em; border-radius: 0.25em">&lt;activity-graph&gt;</code>
      Web component demos
    </h1>

    <h2>2023 GitHub contributions</h2>
    <activity-graph
      class="github"
      weekday-headers="short"
      month-limits="late"
      lang="en"
      start-date="2023-01-01"
      end-date="2023-12-31"
    ></activity-graph>

    <h2>2024 Serializd diary</h2>
    <activity-graph
      class="serializd"
      weekday-headers="short"
      month-headers="short"
      month-limits="late"
      start-date="2024-01-01"
      end-date="2024-08-13"
    ></activity-graph>

    <h2>Monkeytype</h2>
    <activity-graph
      class="monkeytype"
      weekday-headers="long"
      month-headers="short"
      month-limits="late"
      month-position="bottom"
    ></activity-graph>

    <h2>2023 Letterboxd diary</h2>
    <activity-graph
      class="letterboxd"
      weekday-headers="short"
      month-headers="long"
      month-limits="late"
      start-date="2023-01-01"
      end-date="2023-12-31"
    ></activity-graph>
  </body>
</html>