שרייבן אַן קסבאַר פּלוגין פֿאַר Plausible.io

שרייבט אַן קסבאַר-פּלוגין אין דזשאַוואַסקריפּט

ווי אַ אָפּרוטעג פּרויעקט, איך געוואלט צו שרייַבן אַ פּשוט פּלוגין פֿאַר קסבאַר, אַ אַפּלאַקיישאַן איך לעצטנס סטאַמבאַלד. קסבאַר זיך איז געשריבן אין די פּראָגראַממינג שפּראַך "גיין" און ניצט "וואַילס" ווי זיין אַנדערלייינג דינסט צו געבן דעוועלאָפּערס צו שרייַבן מנהג מעניו איינסן פֿאַר די מעניו באַר אין macOS (יאָ, עס איז דערווייַל לימיטעד צו בלויז macOS).

די פייַן זאַך וועגן קסבאַר איז אַז עס שטיצט אַ ברייט פאַרשיידנקייַט פון פּראָגראַממינג שפּראַכן, וואָס אויך כולל דזשאַוואַסקריפּט. ווי אַ וועב דעוועלאָפּ זיך, איך דעריבער געוואלט צו זען ווי גרינג עס איז צו שרייַבן אַ מנהג פּלוגין וואָס קאַנעקץ צו Plausible.io, מיין פּריוואַטקייט-פרייַנדלעך אַנאַליטיקס סערוויס. דער ציל איז צו ופפירן אַלע קראַנט יוזערז וואָס זענען דערווייַל אויף דעם וועב אַפּ. אין שרייבן, די ציען בעטן איז נאָך אין אָפּשאַצונג.

יקערדיק קסבאַר סעטאַפּ

קסבאַר קענען זיין דאַונלאָודיד און אינסטאַלירן אויף דיין מעק. אַמאָל איר אָנהייב עס פֿאַר די ערשטער מאָל, אַ פאַרשטעלן מיט אַלע דאָוונלאָאַדאַבלע און ארויס פּלוגינס קענען ווערן גענוצט צו באַקומען די פּלוגין איר ווילט.

די ינסטאָלינג פּראָצעס פשוט קאַפּיז די פּלוגין ס מקור קאָד (אַ איין טעקע פּער פּלוגין) אין אַ ספּעציעל טעקע, פֿון וואָס קסבאַר לייענט אַלע דערווייַל אינסטאַלירן פּלוגינס. צו אָנהייבן שרייבן דיין אייגענע פּלוגין, איר נאָר שאַפֿן אַ טעקע אין די וועגווייַזער און אָנהייבן כאַקינג. ציכטיק!

xbar טעקע נאָמען קאַנווענשאַן

דער נאָמען פון דער טעקע באשטייט פון דריי פּאַרץ, אַלע אפגעשיידט דורך פּונקט.

• דיין יינציק פּלוגין נאָמען
• די צייט מעהאַלעך אין וואָס דיין קאָד איז עקסאַקיוטאַד, ענלעך צו אַ CRON- אַרבעט
• דער פּראָסט טעקע סאַפיקס

plausible.1m.js

קאָודינג אַן קסבאַר פּלוגין אין JS

איצט איר זענט באַשטימט צו אָנהייבן קאָדירונג! קודם אַרייַן די פארלאנגט שעבאַנג דירעקטיוו צו זאָגן קסבאַר ווו די נאָדע בייַשפּיל זאָל זיין געפֿונען.

#!/usr/bin/env /usr/local/bin/node

דער ווייַטער טייל איז דעריבער אַדינג עטלעכע מעטאַ דאַטן. דאָך, פֿאַר היגע אַנטוויקלונג, דאָס קען זיין איבערגעהיפּערט, אָבער דאָס איז וואָס איך נוצן פֿאַר די פּלאַוסיבלע פּלוגין.

// 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>

און דאָס איז אַלע וואָס איז פארלאנגט פֿאַר דיין פּלוגין צו לויפן. איצט איר האָבן אַ לייַוונט ווו איר קענען קאָד אין ריין דזשאַוואַסקריפּט, עקסאַקיוטאַד דורך די Node.js- בייַשפּיל פון די באַניצער. דאָס מיטל אַז מיר האָבן אַקסעס צו אַלע האַרץ נאָדע פּאַקידזשיז, אַזאַ ווי "https". פֿאַר מיין נוצן פאַל, דאָס איז אַלץ איך דאַרפֿן, ווייַל די טראַקינג פון יוזערז ריקווייערז אַ פשוט אראפקאפיע פון די Plausible.io-API.

די פאלגענדע קאָדעס ווייַזן די מערסט באַטייַטיק טייל וואָס איך טראַכטן איז ווערט גערעדט וועגן. די פול קאָד איז בארעכטיגט אין די פֿאַרבונדענע עפנטלעך ריפּאַזאַטאָרי, לינק אין די אַדדענדום אין די סוף פון דעם בלאַט.

// 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();

קאָדירונג פֿאַר קסבאַר איז גרינג

דער גאנצער פּראָצעס האָט מיר עטלעכע שעה צו פאַרענדיקן, מערסטנס קאָנטראָלירונג די אַפּי פֿון קסבאַר און פּלייינג אַרום מיט פאַרשידענע קאַנפיגיעריישאַנז פֿאַר סטילינג. אַלע אין אַלע, שרייבן אַ פּשוט פּלוגין אַזאַ ווי דאָס איז טאַקע נישט פיל מי וואָס איז טאַקע שפּאַס. אויב איר האָט עטלעכע ספּער שעה, איר זאָל אויך פּרובירן דאָס!

איך טראַכטן, וואָס רעדט מערסט פֿאַר קסבאַר איז די סקריפּטינג געלעגנהייט וואָס די פלעקסאַבאַל און שנעל אַנטוויקלונג אַלאַוז. איר קענט שרייַבן מנהג טראַקערז פֿאַר דיין וואָלקן סעטאַפּס אָדער אַנאַליטיקס באַדינונגס אַזוי אַז די מעטריקס זענען אַלע קענטיק אין אַ בליק אין דיין מעניו באַר אין macOS. איך גלייך עס!