Verkado de xbar-kromaĵo en Ĝavaskripto
Kiel semajnfina projekto mi volis verki simplan aldonaĵon por xbar, aplikaĵo, kiun mi ĵus faligis. xbar mem estas skribita en la programlingvo "Go" kaj uzas "Wails" kiel sian bazan servon por ebligi al programistoj skribi laŭmendajn enirojn de menuo por la menuobreto en macOS (jes, ĝi nuntempe limiĝas nur al macOS).
La interesa afero pri xbar estas, ke ĝi subtenas plej diversajn programlingvojn, kiuj ankaŭ inkluzivas Ĝavaskripton. Kiel retejo-programisto mem, mi tial volis vidi, kiel facile estas skribi laŭmendan aldonaĵon, kiu konektas al Plausible.io, mia privateca amika analiza servo. La celo estas redoni ĉiujn nunajn uzantojn, kiuj nuntempe troviĝas en ĉi tiu retejo. Dum la verkado, la tirpeto ankoraŭ estas en revizio.
Baza xbar-aranĝo
xbar povas simple esti elŝutita kaj instalita en via Mac. Unufoje vi ekfunkciigas ĝin por la unua fojo, ekrano kiu enhavas ĉiujn elŝuteblajn kaj publikigitajn aldonaĵojn povas esti uzata por akiri la aldonaĵon, kiun vi volas havi.
La instalprocezo simple kopias la fontkodon de la aldonaĵo (ununura dosiero por aldonaĵo) en specialan dosierujon, el kiu xbar legas ĉiujn nuntempe instalitajn aldonaĵojn. Por komenci verki vian propran aldonaĵon, vi simple kreu dosieron en la dosierujo kaj komencu kodrompadon. Bonorda!
konvencio pri dosiernoma xbar
La nomo de la dosiero konsistas el tri partoj, ĉiuj apartigitaj per punkto.
- via unika kromaĵa nomo
- la tempintervalo en kiu via kodo estas ekzekutita, simile al CRON-laboro
- la komuna dosier-sufikso
plausible.1m.js
Kodigo de kroma kromaĵo en JS
Nun vi staras por komenci kodadon! Unue inkluzivu la postulatan shebang-direktivon por diri al xbar, kie la noda kazo devas esti trovita.
#!/usr/bin/env /usr/local/bin/node
La sekva parto aldonas iujn meta-datumojn. Kompreneble, por loka disvolviĝo ĉi tio povas esti preterlasita, sed jen kion mi uzas por la Plausible-kromaĵo.
// Metadata allows your plugin to show up in the app, and website.
//
// <xbar.title>Plausible Tracker</xbar.title>
// <xbar.version>v1.0</xbar.version>
// <xbar.author>Tom Schönmann</xbar.author>
// <xbar.author.github>flaming-codes</xbar.author.github>
// <xbar.desc>See who's on your site at-a-glance.</xbar.desc>
// <xbar.dependencies>node</xbar.dependencies>
// <xbar.abouturl>https://flaming.codes</xbar.abouturl>
// <xbar.image>https://raw.githubusercontent.com/flaming-codes/xbar-plausible-stats/main/plausible-icon-36-36-144.png</xbar.image>
Kaj jen ĉio bezonata por ke via kromaĵo ruliĝu. Nun vi havas tolon, kie vi povas kodi en pura Ĝavaskripto, ekzekutita de la uzanto Node.js-instance. Ĉi tio signifas, ke ni havas aliron al ĉiuj kernaj Nodaj pakaĵoj, kiel ekzemple "https". Por mia uzokazo, ĉi tio estas ĉio, kion mi bezonas, ĉar la spurado de uzantoj simple bezonas alporton de la Plausible.io-API.
La jenaj kodpecoj montras la plej gravan parton, pri kiu mi opinias inda paroli. La kompleta kodo haveblas en la rilata publika deponejo, ligilo en la aldono ĉe la fino de ĉi tiu paĝo.
// Here you see how to make network
// requests with 'https'-only.
// This is a native node-lib that
// works w/ data streams, as you'll see.
const https = require("https");
// Those have to edited by the
// user directly in the file,
// after it has been downloaded
// (aka installed)!
const SITE_ID = "";
const API_KEY = "";
// ... other code ...
async function fetcher() {
return new Promise((resolve, reject) => {
let body = "";
const request = {
host: "plausible.io",
path: `/api/v1/stats/realtime/visitors?site_id=${SITE_ID}`,
method: "GET",
headers: {
Authorization: `Bearer ${API_KEY}`,
},
};
try {
const req = https.get(request, (res) => {
res.on("data", (data) => {
body += data;
});
res.on("end", () => {
resolve(JSON.parse(body));
});
});
req.on("error", (error) => {
console.error(error);
});
req.end();
} catch (error) {
reject(error);
}
});
}
// I've implemented an array of tuples
// that hold an icon + count threshold
// when to active it.
// The first entry doesn't render a
// string (which can be direclty used),
// but rather a mapping that results in
// the following code:
//
// `image="..." font=Menlo color=white`
//
// This is a special syntax that tells
// xbar to render a base64 image w/
// a custom font and color.
//
// 'plausibleIconWhite' is just the string
// for the base64-image.
const stepIcons = [
[0, `${plausibleIconWhite} Menlo white`, "image font color"],
[5, "💫"],
[10, "⭐️"],
[50, "🌟"],
[100, "⚡️"],
[500, "💥"],
];
// Actually rendering stuff in xbar
// is super simple - just output it
// with console.log(...).
//
// As you'll see, '---' define
// separator. The first log-call
// gets rendered as acutal menu item.
const linksMenu = [
"---",
`🔮 Open dashboard | href=https://plausible.io/${SITE_ID}`,
`🔥 Made by flaming.codes | href=https://flaming.codes`,
];
function renderError(props) {
const { error } = props;
const output = [
"❔",
"---",
"No data accessible",
"Please check your user data",
...linksMenu,
];
console.log(output.join("\n"));
}
// Finally, I defined a single function
// where everything starts. This function
// just gets called to kick everyting off.
// Plain JS, it's that simple.
async function render() {
const { data, error } = await fetcher()
.then((data) => ({ data }))
.catch((error) => ({ error }));
if (data >= 0) return renderData({ data });
if (error) return renderError({ error });
}
render();
Kodigo por xbar estas facila
La tuta procezo postrestis al mi kelkajn horojn, plejparte kontrolante la API de xbar kaj ludante kun malsamaj agordoj por stilo. Entute verki simplan kromaĵon kiel ĉi tiun vere ne multe penas fari tre amuze. Se vi havas iom da liberaj horoj, vi provu ĝin ankaŭ!
Mi pensas, ke tio, kio plej parolas pri xbar, estas la skripta ŝanco, kiun ĉi tiu fleksebla kaj rapida disvolviĝo permesas. Vi povas skribi laŭmendajn spurilojn por viaj nubaj aranĝoj aŭ analizaj servoj, tiel ke la metrikoj estu videblaj unuavide en via menuobreto en macOS. Mi ŝatas ĝin!
