reading-stats/index.html at main · derlin/reading-stats · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
    <link rel="canonical" href="%PUBLIC_URL%" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#ffffff" />
    <title>Derlin's Readlog</title>
    <meta
      name="description"
      content="Visualizing years in books. Follow Derlin's reading journey through data-driven timelines, book stats, and trends."
    />
    <link rel="canonical" href="%PUBLIC_URL%" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!-- SEO -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="%PUBLIC_URL%/" />
    <meta property="og:title" content="Derlin's Readlog" />
    <meta
      property="og:description"
      content="Visualizing years in books. Follow Derlin's reading journey through data-driven timelines, book stats, and trends."
    />
    <meta property="og:image" content="%PUBLIC_URL%/preview.png" />

    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content="Derlin's Readlog" />
    <meta property="twitter:image" content="%PUBLIC_URL%/preview.png" />

    <!-- fonts and base styles -->
    <style>
      /* from http://fonts.cdnfonts.com/css/trebuchet-ms-2 (http only) */
      @font-face {
        font-family: 'Trebuchet MS';
        font-style: normal;
        font-weight: 400;
        src: local('Trebuchet MS'),
          url('https://fonts.cdnfonts.com/s/12558/trebuc.woff') format('woff');
      }
      @font-face {
        font-family: 'Trebuchet MS';
        font-style: italic;
        font-weight: 400;
        src: local('Trebuchet MS'),
          url('https://fonts.cdnfonts.com/s/12558/Trebuchet-MS-Italic.woff') format('woff');
      }

      .seo-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }
    </style>
    <!--
    Use polifill.io to request new JS features.
    Currently used: Array.prototype.at
    -->
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.111.0&features=Array.prototype.at"></script>
    <script type="module" src="/src/index.jsx"></script>
  </head>
  <body>
    <section class="seo-only">
      <h1>Derlin's Personal Reading Statistics</h1>
      <p>
        This page displays my personal reading statistics, tracking books I have read over the
        years. It provides a detailed overview of my reading habits, including pace, formats, and
        yearly comparisons.
      </p>
      <p>
        The visualizations below include graphs showing my reading activity per day, per month, and
        per weekday, helping to identify patterns in my reading schedule. There is also a chart
        dedicated to the books I have finished within the selected period, offering insights into
        the types and lengths of books I prefer.
      </p>
      <p>
        Finally, a comprehensive table lists all the books read, with details on their titles,
        authors, and other relevant information, providing a complete log of my reading journey.
      </p>
    </section>
    <noscript>You need to enable JavaScript to run this app!</noscript>
    <div id="root">
      <div style="display: flex; justify-content: center; align-items: center; height: 100vh">
        <img src="%PUBLIC_URL%/loading.gif" />
      </div>
    </div>
  </body>
</html>