Add index.html

2025-05-08 20:59:09 +01:00 · 2025-05-08 20:59:09 +01:00 · 87e8b6a976
commit 87e8b6a976
parent d78944762b
1 changed files with 140 additions and 0 deletions
--- a/site/content/popepedia/index.html
+++ b/site/content/popepedia/index.html
@ -0,0 +1,140 @@
+---
+title: "Popepedia"
+description: "Information about the edit frequency of the new Pope's Wikipedia page"
+hideAside: true
+---
+{% extends "_layouts/base.html" %}
+{% block head %}
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js" integrity="sha256-v0oiNSTkC3fDBL7GfhIiz1UfFIgM9Cxp3ARlWOEcB7E=" crossorigin="anonymous"></script>
+{% endblock %}
+
+{% block main %}
+<h1>Popepedia</h1>
+<p>Here are some stats about the <a href="https://en.wikipedia.org/wiki/Pope_Leo_XIV">new Pope's wikipedia page</a> and how often it's being edited. The 3 edits prior to the announcement included for a little context. Data last updated at <span id="updatedAt"></span>.</p>
+<p>Since announcement:</p>
+<ul>
+    <li>Total edits: <span id="totalEdits"></span></li>
+    <li>Total volume: <span id="totalVolume"></span></li>
+</ul>
+<center><div id="editchart" style="width: 80%;height: 500px;"></div></center>
+<center><div id="volumechart" style="width: 80%;height: 500px;"></div></center>
+
+<script type="text/javascript">
+    setTimeout(window.location.reload, 1000 * 60)
+
+    window
+      .fetch(new Request("data.json"))
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+    
+        return response.json();
+      })
+      .then((response) => {
+        var data = response.data
+        document.getElementById("updatedAt").innerText = response.updated_at
+        document.getElementById("totalEdits").innerText = response.total_edits
+        document.getElementById("totalVolume").innerText = response.total_bytes_changed + " characters"
+        
+        // Initialize the echarts instance based on the prepared dom
+        var myChart = echarts.init(document.getElementById('editchart'));
+    
+        // Specify the configuration items and data for the chart
+        var option = {
+          title: {
+            text: 'Edits over time'
+          },
+          tooltip: {
+              trigger: 'axis',
+            },
+            dataset: {
+              source: data,
+              dimensions: ['timestamp', "edits", "avg_edits", "running_edits", 'vol', 'avg_vol', "running_vol"],
+            },
+            xAxis: { type: 'time' },
+            yAxis: {name: 'Edit count', nameLocation: 'center', nameGap: 45},
+            series: [
+                // {
+                //     name: 'Raw edit count',
+                //     yAxisIndex: 0,
+                //     type: 'line',
+                //     encode: {
+                //       x: 'timestamp',
+                //       y: 'edits'
+                //     }
+                // },
+                {
+                    name: 'Average edit count',
+                    yAxisIndex: 0,
+                    type: 'line',
+                    encode: {
+                      x: 'timestamp',
+                      y: "avg_edits"
+                    }
+                },
+                {
+                    name: 'Running edit count (hundreds)',
+                    yAxisIndex: 0,
+                    type: 'line',
+                    encode: {
+                      x: 'timestamp',
+                      y: "running_edits"
+                    }
+                }
+            ]
+        };
+    
+        // Display the chart using the configuration items and data just specified.
+        myChart.setOption(option);
+        
+        myChart = echarts.init(document.getElementById('volumechart'));
+    
+        // Specify the configuration items and data for the chart
+        option = {
+          title: {
+            text: 'Volume over time'
+          },
+          tooltip: {
+              trigger: 'axis',
+            },
+            dataset: {
+              source: data,
+              dimensions: ['timestamp', "edits", "avg_edits", "running_edits", 'vol', 'avg_vol', "running_vol"],
+            },
+            xAxis: { type: 'time' },
+            yAxis: {name: 'Volume (characters)', nameLocation: 'center', nameGap: 60},
+            series: [
+                // {
+                //     name: 'Raw edit volume',
+                //     yAxisIndex: 1,
+                //     type: 'line',
+                //     encode: {
+                //       x: 'timestamp',
+                //       y: 'vol'
+                //     }
+                // },
+                {
+                    name: 'Average edit volume (characters)',
+                    type: 'line',
+                    encode: {
+                      x: 'timestamp',
+                      y: 'avg_vol'
+                    }
+                },
+                {
+                    name: 'Running edit volume (hundreds of characters)',
+                    type: 'line',
+                    encode: {
+                      x: 'timestamp',
+                      y: "running_vol"
+                    }
+                },
+            ]
+        };
+    
+        // Display the chart using the configuration items and data just specified.
+        myChart.setOption(option);
+      });
+  </script>
+{% endblock %}