From 3e3d3f68233e1d6c7af7ca4428691c7e06c9d558 Mon Sep 17 00:00:00 2001
From: jbowdre <jbowdre@users.noreply.github.com>
Date: Thu, 7 Mar 2024 15:45:20 +0000
Subject: [PATCH] fetch web page

---
 web.css       |  53 +++++++++++++++++++++
 web.md        |  57 +++++++++++++++++++++++
 web_head.html | 124 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 234 insertions(+)
 create mode 100644 web.css
 create mode 100644 web.md
 create mode 100644 web_head.html

diff --git a/web.css b/web.css
new file mode 100644
index 0000000..a7e8ef6
--- /dev/null
+++ b/web.css
@@ -0,0 +1,53 @@
+#now .statuslol_content a,
+#now .statuslol_content p,
+#now .statuslol_content li,
+#now .statuslol_content em,
+#now .statuslol_content strong {
+  font-size: 0.8em;
+  color: #111;
+  text-shadow: none;
+}
+
+#now .statuslol_content a {
+  color: #111;
+  border-bottom: 1px dotted #111;
+  text-decoration: none;
+    text-decoration-line: none;
+    text-decoration-thickness: initial;
+    text-decoration-style: initial;
+  overflow-wrap: break-word;
+}
+
+#now .statuslol_content code {
+  color: #111;
+  background: #ced4da;
+  display: inline-block;
+  padding: 0.2em 0.3em;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+#plug p {
+  font-size: 0.8em;
+}
+
+.kudos {
+  display: flex;
+  justify-content: center;
+}
+
+button.tinylytics_kudos {
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  font-size: 1.2rem;
+  transition: all .2s ease-in-out;
+}
+
+button.tinylytics_kudos:hover {
+  transform: scale(1.1);
+  text-shadow: var(--off-fg) 0 0 1px;
+}
+
diff --git a/web.md b/web.md
new file mode 100644
index 0000000..fa6d8b3
--- /dev/null
+++ b/web.md
@@ -0,0 +1,57 @@
+{profile-picture}
+
+
+# John Bowdre
+
+| Pronouns: he/him
+| Occupation: cloud platform architect
+| Location: huntsville, al
+
+--- Bio ---
+
+<span class="kudos">Hi!<button class="tinylytics_kudos"></button></span>
+
+I write code to make imaginary computers run code written by less imaginary developers
+
+
+---
+
+--- Profile Items ---
+
+# /dev/stdout
+- [techy blog posts](https://runtimeterror.dev) {laptop-code}
+- [gemlog](https://capsule.jbowdre.lol/gemlog/) {satellite}
+- [code and kludges](https://github.com/jbowdre)
+
+# /dev/net
+- [counter.social](https://counter.social/@john_b) {hashtag}
+- [social.lol](https://social.lol/@jbowdre)
+- [statuslog](https://status.jbowdre.lol) {prami}
+- [/now](https://jbowdre.lol/now) {prami}
+
+# /mnt/media
+- [autox videos](https://www.youtube.com/playlist?list=PLwzr4uKY-x-EwCv-rWNGefdikuW6Oy9O_)
+- [games i play](https://steamcommunity.com/id/codesplice/)
+- [music i listen to](https://url.jbowdre.lol/song-obsessions) {headphones}
+
+# /usr/local/bin
+- [stuff i use](https://url.jbowdre.lol/stuff-i-use) {thumbs-up}
+
+# /dev/stdin
+- [matrix](https://matrix.to/#/@jbowdre:omg.lol) {matrix}
+- [simplex chat](https://url.jbowdre.lol/simplex-chat-invite) {message}
+- [signal](https://signal.me/#eu/lyHZbMnlM16O0w48j3rshYBofO0K-iXOt9LGwln7TS-fNKEHCrxH3La325q8IjRU) {signal-app}
+- [xmpp](https://conversations.im/i/jbowdre@omg.lol?omemo-sid-1374125881=a620f3c57733601a6646f6f13a71c86fc9be8dd4126fd158ef3e0a26beb0b434) {xmpp}
+- [electronic mail](mailto:jbowdre@omg.lol) {fastmail}
+  - PGP: {pgp-key}
+
+# /proc/wx
+- <span id="conditions"></span> {cloud-sun-rain}
+- <span id="temp"></span> {temperature-half}
+- <span id="humidity"></span> {droplet}
+- <span id="wind"></span> {wind}
+- <span id="rainToday"></span> {droplet-slash}
+- <span id="pressure"></span> {arrow-right-long}
+- <i>as of <span id="time"></span></i> {clock}
+
+
diff --git a/web_head.html b/web_head.html
new file mode 100644
index 0000000..a470879
--- /dev/null
+++ b/web_head.html
@@ -0,0 +1,124 @@
+<link rel="me" title="proven.lol" href="https://proven.lol/4cc26c">
+<script src="https://tinylytics.app/embed/QUH6xcnWKYeUUYaMkDKd.js?kudos=👋" defer></script>
+<script>
+const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
+// get ready to calculate relative time
+const units = {
+  year  : 24 * 60 * 60 * 1000 * 365,
+  month : 24 * 60 * 60 * 1000 * 365/12,
+  day   : 24 * 60 * 60 * 1000,
+  hour  : 60 * 60 * 1000,
+  minute: 60 * 1000,
+  second: 1000
+}
+let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+let getRelativeTime = (d1, d2 = new Date()) => {
+  let elapsed = d1 - d2
+  for (var u in units)
+    if (Math.abs(elapsed) > units[u] || u === 'second')
+      return rtf.format(Math.round(elapsed/units[u]), u)
+}
+
+// set up temperature and rain ranges
+const tempRanges = [
+  { upper: 32, label: 'cold' },
+  { upper: 60, label: 'cool' },
+  { upper: 80, label: 'warm' },
+  { upper: Infinity, label: 'hot' }
+];
+const rainRanges = [
+  { upper: 0.02, label: 'none' },
+  { upper: 0.2, label: 'light' },
+  { upper: 1.4, label: 'moderate' },
+  { upper: Infinity, label: 'heavy' }
+]
+
+// maps for selecting icons
+const CLASS_MAP_PRESS = {
+  'steady': 'fa-solid fa-arrow-right-long',
+  'rising': 'fa-solid fa-arrow-trend-up',
+  'falling': 'fa-solid fa-arrow-trend-down'
+}
+const CLASS_MAP_RAIN = {
+  'none': 'fa-solid fa-droplet-slash',
+  'light': 'fa-solid fa-glass-water-droplet',
+  'moderate': 'fa-solid fa-glass-water',
+  'heavy': 'fa-solid fa-bucket'
+}
+const CLASS_MAP_TEMP = {
+  'hot': 'fa-solid fa-thermometer-full',
+  'warm': 'fa-solid fa-thermometer-half',
+  'cool': 'fa-solid fa-thermometer-quarter',
+  'cold': 'fa-solid fa-thermometer-empty'
+}
+const CLASS_MAP_WX = {
+  'clear-day': 'fa-solid fa-sun',
+  'clear-night': 'fa-solid fa-moon',
+  'cloudy': 'fa-solid fa-cloud',
+  'foggy': 'fa-solid fa-cloud-showers-smog',
+  'partly-cloudy-day': 'fa-solid fa-cloud-sun',
+  'partly-cloudy-night': 'fa-solid fa-cloud-moon',
+  'possibly-rainy-day': 'fa-solid fa-cloud-sun-rain',
+  'possibly-rainy-night': 'fa-solid fa-cloud-moon-rain',
+  'possibly-sleet-day': 'fa-solid fa-cloud-meatball',
+  'possibly-sleet-night': 'fa-solid fa-cloud-moon-rain',
+  'possibly-snow-day': 'fa-solid fa-snowflake',
+  'possibly-snow-night': 'fa-solid fa-snowflake',
+  'possibly-thunderstorm-day': 'fa-solid fa-cloud-bolt',
+  'possibly-thunderstorm-night': 'fa-solid fa-cloud-bolt',
+  'rainy': 'fa-solid fa-cloud-showers-heavy',
+  'sleet': 'fa-solid fa-cloud-rain',
+  'snow': 'fa-solid fa-snowflake',
+  'thunderstorm': 'fa-solid fa-cloud-bolt',
+  'windy': 'fa-solid fa-wind',
+}
+
+// fetch data from pastebin
+fetch(wx_endpoint)
+  .then(res => res.json())
+  .then(function(res){
+
+    // calculate age of last update
+    let updateTime = res.time;
+    updateTime = parseInt(updateTime);
+    updateTime = updateTime*1000;
+    updateTime = new Date(updateTime);
+    let updateAge = getRelativeTime(updateTime);
+
+    // parse data
+    let conditions = (res.conditions).toLowerCase();
+    let tempDiff = Math.abs(res.temperature - res.feels_like);
+    let temp = `${res.temperature}°f (${(((res.temperature - 32) * 5) / 9).toFixed(1)}°c)`;
+    if (tempDiff >= 5) {
+      temp += `, feels ${res.feels_like}°f (${(((res.feels_like - 32) *5) / 9).toFixed(1)}°c)`;
+    }
+    let tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
+    let humidity = `${res.humidity}% humidity`;
+    let wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction).toLowerCase()}`;
+    let rainLabel = (rainRanges.find(range => res.rain_today < range.upper)).label;
+    let rainToday;
+    if (res.rain_today === 0) {
+      rainToday = 'no rain today';
+    } else {
+      rainToday = `${res.rain_today}" rain today`;
+    }
+    let pressureTrend = res.pressure_trend;
+    let pressure = `${res.pressure}inhg and ${pressureTrend}`;
+    let icon = res.icon;
+
+    // display data
+    document.getElementById('time').innerHTML = updateAge;
+    document.getElementById('conditions').innerHTML = conditions;
+    document.getElementById('temp').innerHTML = temp;
+    document.getElementById('humidity').innerHTML = humidity;
+    document.getElementById('wind').innerHTML = wind;
+    document.getElementById('rainToday').innerHTML = rainToday;
+    document.getElementById('pressure').innerHTML = pressure;
+    // update icons
+    document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
+    document.getElementsByClassName('fa-temperature-half')[0].classList = CLASS_MAP_TEMP[tempLabel];
+    document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
+    document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
+  });
+</script>
+