Server: add information, last updated and uptime

5 years ago · 14283b1a33
6 changed files with 142 additions and 99 deletions
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -501,10 +501,18 @@ footer {// {{{
 }// }}}

 #server {// {{{
-  table {
-    margin-top: 1.75em;
+  .body {
+    @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
--- a/content/server/_index.md
+++ b/content/server/_index.md
@ -1,7 +1,14 @@
 ---
-title: "Server"
-date: 2019-09-21
+title: "Server Apps"
+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
--- a/ideas.md
+++ b/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
--- a/layouts/server/single.html
+++ b/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" . }}
--- a/static/server-apps.json
+++ b/static/server-apps.json
@ -1,74 +1,78 @@
-[
-  {
-    "status": "up",
-    "shortUrl": "kevin-mok.com",
-    "url": "https://kevin-mok.com",
-    "siteTitle": "Kevin Mok",
-    "description": "Personal site (this site).",
-    "repo": "Kevin-Mok/my-site",
-    "repoUrl": "https://git.kevin-mok.com/Kevin-Mok/my-site"
-  },
-  {
-    "status": "up",
-    "shortUrl": "git.kevin-mok.com",
-    "url": "https://git.kevin-mok.com",
-    "siteTitle": "Kevin Mok's Gitea",
-    "description": "Lightweight Git server.",
-    "repo": "go-gitea/gitea",
-    "repoUrl": "https://github.com/go-gitea/gitea"
-  },
-  {
-    "status": "up",
-    "shortUrl": "cal.khkm.tk",
-    "url": "https://cal.khkm.tk",
-    "siteTitle": "BaÃ¯kal server",
-    "description": "CalDAV/CardDAV server.",
-    "repo": "sabre-io/Baikal",
-    "repoUrl": "https://github.com/sabre-io/Baikal"
-  },
-  {
-    "status": "up",
-    "shortUrl": "matrix.ataraxy.tk",
-    "url": "https://matrix.ataraxy.tk/.well-known/matrix/server",
-    "siteTitle": "",
-    "description": "Matrix chat server (only accessible through Riot client).",
-    "repo": "matrix-org/synapse",
-    "repoUrl": "https://github.com/matrix-org/synapse"
-  },
-  {
-    "status": "up",
-    "shortUrl": "mnpd.gq",
-    "url": "https://mnpd.gq/test",
-    "siteTitle": "test",
-    "description": "Minimalist web notepad.",
-    "repo": "pereorga/minimalist-web-notepad",
-    "repoUrl": "https://github.com/pereorga/minimalist-web-notepad"
-  },
-  {
-    "status": "up",
-    "shortUrl": "pste.gq",
-    "url": "https://pste.gq",
-    "siteTitle": "hastebin",
-    "description": "Pastebin.",
-    "repo": "seejohnrun/haste-server",
-    "repoUrl": "https://github.com/seejohnrun/haste-server"
-  },
-  {
-    "status": "up",
-    "shortUrl": "smol.gq",
-    "url": "https://smol.gq",
-    "siteTitle": "Kevin's URL Shortener",
-    "description": "URL shortener.",
-    "repo": "132ikl/liteshort",
-    "repoUrl": "https://github.com/132ikl/liteshort"
-  },
-  {
-    "status": "up",
-    "shortUrl": "twem.tk",
-    "url": "https://twem.tk",
-    "siteTitle": "Twitch Emote Links",
-    "description": "Twitch emotes (for Matrix chat server which doesn't have custom emotes).",
-    "repo": "",
-    "repoUrl": ""
-  }
-]
+{
+  "sites": [
+    {
+      "shortUrl": "kevin-mok.com",
+      "url": "https://kevin-mok.com",
+      "siteTitle": " Kevin Mok ",
+      "description": "Personal site (this site).",
+      "repo": "Kevin-Mok/my-site",
+      "repoUrl": "https://git.kevin-mok.com/Kevin-Mok/my-site",
+      "status": "up"
+    },
+    {
+      "shortUrl": "git.kevin-mok.com",
+      "url": "https://git.kevin-mok.com",
+      "siteTitle": "Kevin Mok's Gitea",
+      "description": "Lightweight Git server.",
+      "repo": "go-gitea/gitea",
+      "repoUrl": "https://github.com/go-gitea/gitea",
+      "status": "up"
+    },
+    {
+      "shortUrl": "cal.khkm.tk",
+      "url": "https://cal.khkm.tk",
+      "siteTitle": "Ba&#xEF;kal server",
+      "description": "CalDAV/CardDAV server.",
+      "repo": "sabre-io/Baikal",
+      "repoUrl": "https://github.com/sabre-io/Baikal",
+      "status": "up"
+    },
+    {
+      "shortUrl": "matrix.ataraxy.tk",
+      "url": "https://matrix.ataraxy.tk/.well-known/matrix/server",
+      "siteTitle": "",
+      "description": "Matrix chat server. Only accessible through Riot client.",
+      "repo": "matrix-org/synapse",
+      "repoUrl": "https://github.com/matrix-org/synapse",
+      "status": "up"
+    },
+    {
+      "shortUrl": "mnpd.gq",
+      "url": "https://mnpd.gq/test",
+      "siteTitle": "test",
+      "description": "Minimalistic live web notepad.",
+      "repo": "pereorga/minimalist-web-notepad",
+      "repoUrl": "https://github.com/pereorga/minimalist-web-notepad",
+      "status": "up"
+    },
+    {
+      "shortUrl": "pste.gq",
+      "url": "https://pste.gq",
+      "siteTitle": "hastebin",
+      "description": "Pastebin.",
+      "repo": "seejohnrun/haste-server",
+      "repoUrl": "https://github.com/seejohnrun/haste-server",
+      "status": "up"
+    },
+    {
+      "shortUrl": "smol.gq",
+      "url": "https://smol.gq",
+      "siteTitle": "Kevin&apos;s URL Shortener",
+      "description": "URL shortener.",
+      "repo": "132ikl/liteshort",
+      "repoUrl": "https://github.com/132ikl/liteshort",
+      "status": "up"
+    },
+    {
+      "shortUrl": "taskd.khkm.tk",
+      "url": "taskd.khkm.tk:53589",
+      "siteTitle": "",
+      "description": "Taskwarrior (task manager) server. No web interface.",
+      "repo": "GothenburgBitFactory/taskserver",
+      "repoUrl": "https://github.com/GothenburgBitFactory/taskserver",
+      "status": "up"
+    }
+  ],
+  "updateTime": 1569204723194,
+  "upSince": "2019-09-22 19:30:10"
+}
--- a/static/server-table.js
+++ b/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'])) + '.'
  });
-