Browse Source

Server: add information, last updated and uptime

drafts
Kevin Mok 5 years ago
parent
commit
14283b1a33
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
  1. 24
      assets/sass/main.scss
  2. 11
      content/server/_index.md
  3. 22
      ideas.md
  4. 6
      layouts/server/single.html
  5. 152
      static/server-apps.json
  6. 26
      static/server-table.js

24
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

11
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

22
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

6
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" . }}

152
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"
}

26
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'])) + '.'
});
Loading…
Cancel
Save