Server: add information, last updated and uptime

assets/sass/main.scss

@@ -501,10 +501,18 @@ footer {// {{{
 }// }}}
 
 #server {// {{{
-  table {
+  .body {
-    margin-top: 1.75em;
+    @include vert-padding-rem(.5);
   }
 
+  h1 {
+    margin-bottom: .25em;
+  }
+
+  // table {
+    // margin-top: 1.75em;
+  // }
+
   th, td {
     @include vert-padding-rem(.4);
     @include side-padding-rem(.5);
@@ -519,6 +527,11 @@ footer {// {{{
 
   td {
     font-size: .9em;
+
+  }
+
+  .description {
+    font-size: .85em;
   }
 
   .status {
@@ -528,6 +541,13 @@ footer {// {{{
       height: 2em;
     }
   }
+
+  #time-info {
+    padding-top: 1em;
+    font-size: .75em;
+    font-style: italic;
+    color: $base03;
+  }
 }// }}}
 
 // TODO: converted up to here

content/server/_index.md

@@ -1,7 +1,14 @@
 ---
-title: "Server"
+title: "Server Apps"
-date: 2019-09-21
+date: 2019-09-22
 draft: false
 layout: single
 js: ["server-table"]
 ---
+Here is a list of apps that I am running a my [DigitalOcean 
+droplet][do-droplet] along with their statuses, which are updated 
+every hour using [this Node.js script][update-script].
+
+[do-droplet]: https://www.digitalocean.com/products/droplets/
+[update-script]: 
+https://git.kevin-mok.com/Kevin-Mok/server-pages/src/branch/master/server-status.js

ideas.md

@@ -1,12 +1,5 @@
 # Large
 - resume
-  - expand some projects by default
-  - repo link (GitHub icon) beside each section
-    - make links open in new tab
-    - picture/video links?
-  - printable white version
-    - upload PDF
-    - JS to change CSS?
   - make old proj's displayable
     - spv
       - screenshots
@@ -27,21 +20,20 @@
   - cd/ls diff. pages
 
 # Medium
-- socials in footer
+- contact page
   - icons
+    - Gitea
     - GitHub
+    - email
+      - copy button
+        - [Copying Text to Clipboard in HTML & JavaScript](https://www.youtube.com/watch?v=NHg6jQajaMs)
+        - [Native Browser Copy To Clipboard](https://css-tricks.com/native-browser-copy-clipboard/)
     - Fosstodon
-  - email
-    - tooltip pop-up with email and clipboard button/link
-    - [Pure CSS Tooltips](https://www.youtube.com/watch?v=hAeQ8CqrGDY)
-    - use position element
-    - [Copying Text to Clipboard in HTML & JavaScript](https://www.youtube.com/watch?v=NHg6jQajaMs)
-    - [Native Browser Copy To Clipboard](https://css-tricks.com/native-browser-copy-clipboard/)
 - pages
   - fav. apps
   - linux config 
+    - neofetch on all devices
   - credits
-  - contact?
 - site stats
   - size
   - load time

layouts/server/single.html

@@ -7,8 +7,14 @@
 {{ partial "base/base16-logo.html" . }}
 
 <main role="main" id="server">
+  {{ partial "base/article.html" . }}
   <table>
   </table>
+  <div id="time-info">
+    <!-- <p id="last-updated">Last updated: <span id="last-updated-time"></span></p> -->
+    <!-- <p id="server-uptime">Server Uptime: <span id="server-uptime-time"></span></p> -->
+    Last updated: <span id="last-updated-time"></span> Server Uptime: <span id="server-uptime-time">
+  </div>
 </main>
 
 {{ partial "base/footer.html" . }}

static/server-apps.json

@@ -1,74 +1,78 @@
-[
+{
-  {
+  "sites": [
-    "status": "up",
+    {
-    "shortUrl": "kevin-mok.com",
+      "shortUrl": "kevin-mok.com",
-    "url": "https://kevin-mok.com",
+      "url": "https://kevin-mok.com",
-    "siteTitle": "Kevin Mok",
+      "siteTitle": " Kevin Mok ",
-    "description": "Personal site (this site).",
+      "description": "Personal site (this site).",
-    "repo": "Kevin-Mok/my-site",
+      "repo": "Kevin-Mok/my-site",
-    "repoUrl": "https://git.kevin-mok.com/Kevin-Mok/my-site"
+      "repoUrl": "https://git.kevin-mok.com/Kevin-Mok/my-site",
-  },
+      "status": "up"
-  {
+    },
-    "status": "up",
+    {
-    "shortUrl": "git.kevin-mok.com",
+      "shortUrl": "git.kevin-mok.com",
-    "url": "https://git.kevin-mok.com",
+      "url": "https://git.kevin-mok.com",
-    "siteTitle": "Kevin Mok's Gitea",
+      "siteTitle": "Kevin Mok's Gitea",
-    "description": "Lightweight Git server.",
+      "description": "Lightweight Git server.",
-    "repo": "go-gitea/gitea",
+      "repo": "go-gitea/gitea",
-    "repoUrl": "https://github.com/go-gitea/gitea"
+      "repoUrl": "https://github.com/go-gitea/gitea",
-  },
+      "status": "up"
-  {
+    },
-    "status": "up",
+    {
-    "shortUrl": "cal.khkm.tk",
+      "shortUrl": "cal.khkm.tk",
-    "url": "https://cal.khkm.tk",
+      "url": "https://cal.khkm.tk",
-    "siteTitle": "Baïkal server",
+      "siteTitle": "Baïkal server",
-    "description": "CalDAV/CardDAV server.",
+      "description": "CalDAV/CardDAV server.",
-    "repo": "sabre-io/Baikal",
+      "repo": "sabre-io/Baikal",
-    "repoUrl": "https://github.com/sabre-io/Baikal"
+      "repoUrl": "https://github.com/sabre-io/Baikal",
-  },
+      "status": "up"
-  {
+    },
-    "status": "up",
+    {
-    "shortUrl": "matrix.ataraxy.tk",
+      "shortUrl": "matrix.ataraxy.tk",
-    "url": "https://matrix.ataraxy.tk/.well-known/matrix/server",
+      "url": "https://matrix.ataraxy.tk/.well-known/matrix/server",
-    "siteTitle": "",
+      "siteTitle": "",
-    "description": "Matrix chat server (only accessible through Riot client).",
+      "description": "Matrix chat server. Only accessible through Riot client.",
-    "repo": "matrix-org/synapse",
+      "repo": "matrix-org/synapse",
-    "repoUrl": "https://github.com/matrix-org/synapse"
+      "repoUrl": "https://github.com/matrix-org/synapse",
-  },
+      "status": "up"
-  {
+    },
-    "status": "up",
+    {
-    "shortUrl": "mnpd.gq",
+      "shortUrl": "mnpd.gq",
-    "url": "https://mnpd.gq/test",
+      "url": "https://mnpd.gq/test",
-    "siteTitle": "test",
+      "siteTitle": "test",
-    "description": "Minimalist web notepad.",
+      "description": "Minimalistic live web notepad.",
-    "repo": "pereorga/minimalist-web-notepad",
+      "repo": "pereorga/minimalist-web-notepad",
-    "repoUrl": "https://github.com/pereorga/minimalist-web-notepad"
+      "repoUrl": "https://github.com/pereorga/minimalist-web-notepad",
-  },
+      "status": "up"
-  {
+    },
-    "status": "up",
+    {
-    "shortUrl": "pste.gq",
+      "shortUrl": "pste.gq",
-    "url": "https://pste.gq",
+      "url": "https://pste.gq",
-    "siteTitle": "hastebin",
+      "siteTitle": "hastebin",
-    "description": "Pastebin.",
+      "description": "Pastebin.",
-    "repo": "seejohnrun/haste-server",
+      "repo": "seejohnrun/haste-server",
-    "repoUrl": "https://github.com/seejohnrun/haste-server"
+      "repoUrl": "https://github.com/seejohnrun/haste-server",
-  },
+      "status": "up"
-  {
+    },
-    "status": "up",
+    {
-    "shortUrl": "smol.gq",
+      "shortUrl": "smol.gq",
-    "url": "https://smol.gq",
+      "url": "https://smol.gq",
-    "siteTitle": "Kevin's URL Shortener",
+      "siteTitle": "Kevin's URL Shortener",
-    "description": "URL shortener.",
+      "description": "URL shortener.",
-    "repo": "132ikl/liteshort",
+      "repo": "132ikl/liteshort",
-    "repoUrl": "https://github.com/132ikl/liteshort"
+      "repoUrl": "https://github.com/132ikl/liteshort",
-  },
+      "status": "up"
-  {
+    },
-    "status": "up",
+    {
-    "shortUrl": "twem.tk",
+      "shortUrl": "taskd.khkm.tk",
-    "url": "https://twem.tk",
+      "url": "taskd.khkm.tk:53589",
-    "siteTitle": "Twitch Emote Links",
+      "siteTitle": "",
-    "description": "Twitch emotes (for Matrix chat server which doesn't have custom emotes).",
+      "description": "Taskwarrior (task manager) server. No web interface.",
-    "repo": "",
+      "repo": "GothenburgBitFactory/taskserver",
-    "repoUrl": ""
+      "repoUrl": "https://github.com/GothenburgBitFactory/taskserver",
-  }
+      "status": "up"
-]
+    }
+  ],
+  "updateTime": 1569204723194,
+  "upSince": "2019-09-22 19:30:10"
+}

static/server-table.js

@@ -8,7 +8,7 @@ const headerKeys = {
 }
 const keyOrder = ["status", "url", "description", "repo"]
 
-function generateTableHead(table) {
+const generateTableHead = table => {
   let thead = table.createTHead();
   let row = thead.insertRow();
   keyOrder.forEach(key => {
@@ -18,7 +18,7 @@ function generateTableHead(table) {
   })
 }
 
-function generateTable(table, data) {
+const generateTable = (table, data) => {
   data.forEach(elem => {
     let row = table.insertRow();
     keyOrder.forEach(key => {
@@ -50,13 +50,27 @@ function generateTable(table, data) {
   })
 }
 
-// fetch("http://localhost:1313/server-apps.json")
+const getDurationSince = date => { 
+  const milli = Math.abs(Date.now() - date)
+  let mins = Math.floor(milli/1000/60)
+  const days = Math.floor(mins/60/24)
+  mins %= 60*24
+  const hours = Math.floor(mins/60)
+  mins %= 60
+  let durationString = (days > 0) ? `${days}d ` : ''
+  durationString += (hours > 0) ? `${hours} hours, ` : ''
+  durationString += (mins > 0) ? `${mins} minutes` : '0m'
+  return durationString
+}
+
 fetch("/server-apps.json")
   .then(response => response.json())
   .then(json => {
-    // console.log(json)
     let table = document.querySelector("table");
-    generateTable(table, json);
+    generateTable(table, json['sites']);
     generateTableHead(table);
+    document.querySelector('#last-updated-time').textContent =
+      getDurationSince(new Date(json['updateTime'])) + ' ago.'
+    document.querySelector('#server-uptime-time').textContent = 
+      getDurationSince(new Date(json['upSince'])) + '.'
   });
-