me/adriano.fyi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(whereami): redesign layout, move location name to sidebar, group weather fields

Browse source
This commit is contained in:
Adriano Caloiaro 2026-04-10 06:08:50 -06:00
parent 36c4dab00d
commit f941254f58
No known key found for this signature in database
1 changed files with 40 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
layouts/custom/current_location.html
View file

@ -1,8 +1,9 @@
{{ define "title" }}
{{ try }}
{{ $d := resources.GetRemote "https://jellybee.bison-lizard.ts.net/whereami" | transform.Unmarshal }}
{{ $title := "Where Am I? :: adriano.fyi" }}
{{ $desc := "" }}
{{ $r := try (resources.GetRemote "https://jellybee.bison-lizard.ts.net/whereami") }}
{{ if not $r.Err }}
{{ $d := $r.Value | transform.Unmarshal }}
{{ with $d.location.name }}{{ $title = printf "Adriano is in %s :: adriano.fyi" . }}{{ end }}
{{ with $d.weather }}
{{ $parts := slice }}
@ -11,55 +12,53 @@
{{ with .windspeedmph }}{{ $parts = $parts | append (printf "wind %.1f mph" .) }}{{ end }}
{{ $desc = delimit $parts ", " }}
{{ end }}
{{ end }}
<title>{{ $title }}</title>
<meta property="og:title" content="{{ $title }}">
{{ with $desc }}<meta property="og:description" content="{{ . }}">{{ end }}
<meta property="og:url" content="https://adriano.fyi/whereami">
<meta property="og:type" content="website">
{{ catch }}
<title>Where Am I? :: adriano.fyi</title>
<meta property="og:title" content="Where Am I? :: adriano.fyi">
<meta property="og:url" content="https://adriano.fyi/whereami">
<meta property="og:type" content="website">
{{ end }}
{{ end }}
{{ define "main" }}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<style>
#location-name { min-height: 1.5em; }
.container { max-width: 1200px; width: 95%; }
#page-grid {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 1rem;
gap: 1.5rem;
align-items: start;
}
@media (max-width: 700px) {
#page-grid { grid-template-columns: 1fr; }
}
#map { height: 520px; }
#sidebar { display: flex; flex-direction: column; gap: 0; }
#location-name { margin: 0 0 0.15rem 0; min-height: 1.4em; }
#wx-meta { font-size: 0.75em; color: #888; margin: 0 0 1rem 0; }
#weather-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem 1rem;
gap: 0.5rem 1rem;
}
.wx-card {
border-left: 2px solid #ddd;
padding: 0.2rem 0 0.2rem 0.5rem;
border-left: 2px solid #444;
padding: 0.2rem 0 0.2rem 0.6rem;
}
.wx-label { font-size: 0.72em; color: #888; margin: 0; line-height: 1.2; }
.wx-value { font-size: 1.05em; margin: 0; line-height: 1.3; }
#weather-updated { font-size: 0.75em; color: #888; margin-bottom: 0.6rem; }
.wx-label { font-size: 0.7em; color: #888; margin: 0; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; }
.wx-value { font-size: 1.05em; margin: 0; line-height: 1.4; }
</style>
<div class="container" role="main">
<h2 id="location-name">Fetching location&hellip;</h2>
<div id="page-grid">
<div id="map"></div>
<div id="weather"></div>
<div id="sidebar">
<h2 id="location-name">Fetching location&hellip;</h2>
<p id="wx-meta"></p>
<div id="weather-grid"></div>
</div>
</div>
<script>
@ -84,7 +83,6 @@
fillColor: '#f03',
fillOpacity: 0.25
}).addTo(map);
if (loc.name) {
document.getElementById('location-name').textContent = loc.name;
} else {
@ -105,10 +103,12 @@
function fmt1(v) { return v !== undefined && v !== null ? Math.round(v * 10) / 10 : null; }
function fmt0(v) { return v !== undefined && v !== null ? Math.round(v) : null; }
var cards = [
{ label: 'Temperature', value: fmt1(w.tempf), unit: '°F' },
{ label: 'Outdoor temp', value: fmt1(w.tempf), unit: '°F' },
{ label: 'Indoor temp', value: fmt1(w.tempinf), unit: '°F' },
{ label: 'Feels like', value: fmt1(w.feelsLike), unit: '°F' },
{ label: 'Humidity', value: fmt0(w.humidity), unit: '%' },
{ label: 'Dew point', value: fmt1(w.dewPoint), unit: '°F' },
{ label: 'Humidity', value: fmt0(w.humidity), unit: '%' },
{ label: 'Indoor humidity', value: fmt0(w.humidityin), unit: '%' },
{ label: 'Wind speed', value: fmt1(w.windspeedmph), unit: 'mph' },
{ label: 'Wind gust', value: fmt1(w.windgustmph), unit: 'mph' },
{ label: 'Pressure', value: fmt1(w.baromrelin), unit: 'inHg' },
@ -116,21 +116,20 @@
{ label: 'Solar', value: fmt0(w.solarradiation), unit: 'W/m²' },
{ label: 'Rain (hourly)', value: w.hourlyrainin, unit: 'in' },
{ label: 'Rain (daily)', value: w.dailyrainin, unit: 'in' },
{ label: 'Indoor temp', value: fmt1(w.tempinf), unit: '°F' },
{ label: 'Indoor humidity', value: fmt0(w.humidityin), unit: '%' },
].filter(function(c) { return c.value !== null && c.value !== undefined; });
if (cards.length > 0) {
var updated = w.lastUpdated ? new Date(w.lastUpdated).toLocaleTimeString() : '';
var html = '<h3 style="margin-bottom:0.3rem">My Weather Station</h3>';
if (updated) html += '<div id="weather-updated">updated ' + updated + '</div>';
html += '<div id="weather-grid">';
var meta = 'My Weather Station';
if (updated) meta += ' · updated ' + updated;
document.getElementById('wx-meta').textContent = meta;
var grid = document.getElementById('weather-grid');
cards.forEach(function(c) {
html += '<div class="wx-card"><p class="wx-label">' + c.label + '</p><p class="wx-value">' + c.value + (c.unit ? ' ' + c.unit : '') + '</p></div>';
var div = document.createElement('div');
div.className = 'wx-card';
div.innerHTML = '<p class="wx-label">' + c.label + '</p><p class="wx-value">' + c.value + (c.unit ? ' ' + c.unit : '') + '</p>';
grid.appendChild(div);
});
html += '</div>';
document.getElementById('weather').innerHTML = html;
}
}
})
.catch(function() {