Add three new examples

xyproto · Sep 5, 2024 · b54ffb0 · b54ffb0
1 parent 1224b58
commit b54ffb0
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 0 deletions.
diff --git a/samples/unixday/README.md b/samples/unixday/README.md
@@ -0,0 +1,9 @@
+## Three ways of displaying a UNIX Day counter
+
+* Client side only (index.html with JavaScript).
+* REST (index.html with JavaScript that fetches data from the /day endpoint, which is served by day/index.lua).
+* Server side only (index.po2 Pongo2 template together with a data.lua file that makes functions or data available for the template).
+
+## NOTE
+
+The REST example should be started within the `rest` folder so that Algernon serves `day/index.lua` as `/day` and not as `/rest/day`.
diff --git a/samples/unixday/clientside/index.html b/samples/unixday/clientside/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Current UNIX Day</title>
+    <style>
+        body {
+            background-color: black;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            font-size: 10vw;
+        }
+        #counter {
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div id="counter"></div>
+    <script>
+        function updateUnixDay() {
+            const now = Date.now();
+            const unixDay = Math.floor(now / 1000 / 86400);
+            document.getElementById('counter').innerText = unixDay;
+        }
+        updateUnixDay();
+        setInterval(updateUnixDay, 86400000);
+    </script>
+</body>
+</html>
diff --git a/samples/unixday/rest/day/index.lua b/samples/unixday/rest/day/index.lua
@@ -0,0 +1,20 @@
+local function current_unix_day()
+    return math.floor(os.time(os.date("!*t")) / 86400)
+end
+
+local function get_seconds_to_next_update_check()
+    local now = os.time(os.date("!*t"))
+    local nextDayStart = (current_unix_day() + 1) * 86400
+    return nextDayStart - now
+end
+
+local unixDay = current_unix_day()
+local secondsToNextUpdate = get_seconds_to_next_update_check()
+
+local responseData = {
+    unixday = unixDay,
+    secondsToNextUpdate = secondsToNextUpdate
+}
+
+content("application/json")
+print(json(responseData))
diff --git a/samples/unixday/rest/index.html b/samples/unixday/rest/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Current UNIX Day</title>
+    <style>
+        body {
+            background-color: black;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            font-size: 10vw;
+        }
+        #counter {
+            text-align: center;
+        }
+        .loader {
+            display: inline-flex;
+            border: 10px solid #fff;
+            border-radius: 5px;
+            padding: 0 10px;
+            overflow: hidden;
+        }
+        .loader span {
+            font-size: 30px;
+            font-family: monospace;
+            font-weight: bold;
+            line-height: 1em;
+            height: 1em;
+            width: 1.2ch;
+            text-align: center;
+            color: #fff;
+            text-shadow: 0 0 0 #fff;
+            animation: spin 2s infinite linear;
+        }
+        .loader span:nth-child(1) {
+            animation-duration: 4s;
+        }
+        @keyframes spin {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(-10em); }
+        }
+    </style>
+</head>
+<body>
+    <div id="counter">
+        <div class="loader">
+            <span>0 1 2 3 4 5 6 7 8 9 0</span>
+            <span>0 1 2 3 4 5 6 7 8 9 0</span>
+        </div>
+    </div>
+    <script>
+        let backoffTime = 60000;
+
+        function fetchDayData() {
+            fetch('/day')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    document.getElementById('counter').innerText = data.unixday;
+                    scheduleNextUpdate(data.secondsToNextUpdate);
+                    backoffTime = 60000;
+                })
+                .catch(() => {
+                    console.error('Fetching UNIX day failed, retrying in', backoffTime / 1000, 'seconds');
+                    setTimeout(fetchDayData, backoffTime);
+                    backoffTime = Math.min(backoffTime * 2, 3600000);
+                });
+        }
+
+        function scheduleNextUpdate(secondsToNextUpdate) {
+            setTimeout(fetchDayData, secondsToNextUpdate * 1000);
+        }
+
+        fetchDayData();
+    </script>
+</body>
+</html>
diff --git a/samples/unixday/serverside/data.lua b/samples/unixday/serverside/data.lua
@@ -0,0 +1,4 @@
+function current_unix_day()
+    local secondsPerDay = 86400
+    return math.floor(unixnano() / 1e9 / secondsPerDay)
+end
diff --git a/samples/unixday/serverside/index.po2 b/samples/unixday/serverside/index.po2
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Current UNIX Day</title>
+    <style>
+        body {
+            background-color: black;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            font-size: 10vw;
+        }
+        #counter {
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div id="counter">{{ current_unix_day() }}</div>
+</body>
+</html>