Skip to main content

Making miti.today

· 4 min read
miti.today

Website

The miti.today website is my attempt at making a minimal calendar that gets me the Nepali date without any fluff or ambition.

My requirements for the website were simple:

  1. build it in a day
  2. hosted for free
  3. Loads fast

So I came up with a system where I host a static website on Cloudflare Pages. And every 24 hours at 12AM Nepal time, a cloudflare worker triggers the deployment again, updating the page.

An invocation a day is well within the free tier, and something that even if I had to pay for, it would be in cents/day.

I use a table of months in each day to calculate what date today should be:

const daysInYears = [
...
[31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 30], // 2080
[31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31], // 2081
...
];

const startingTime = new Date("2018-04-14T00:00:00+05:45").getTime() / 1000;
let daysSince = (seconds - startingTimestamp) / 86400;

let year = 0,
month = 0,
day = 0,
firstDayOfMonth = 0;

let _daySum = 0;
const daysInYearsFlat = daysInYears.flat();
for (let i = 0; i < daysInYearsFlat.length; i++) {
_daySum += daysInYearsFlat[i];
if (_daySum >= daysSince) {
_daySum -= daysInYearsFlat[i]; // revert
year = Math.floor(i / 12) + 2075;
month = (i % 12) + 1;
day = Math.floor(daysSince - _daySum) + 1;
firstDayOfMonth = (_daySum % 7) - 1;
break;
}
}

The code is crude but works fine.

For a while I considered using the pancanga perl script by Professors M. YANO and M FUSHIMI (demo here). It is interesting and and something I hope to study in detail in future, but ultimately I felt it was too complex for my current use.

Once I have the date and the calendar, I generate the HTML "by hand".

 calendar.forEach((week) => {
week.forEach((day) => {
let $day;
if (day === "-") {
$day = $(`<div class='day'></div>`);
} else {
$day = $(
`<div class='day${
dateArray[2] === parseInt(day) ? " toDay" : ""
}'>${day}</div>`
);
}
$calendar.append($day);
});
});

const html = $(".calendar").prop("outerHTML");

const monthEnHtml = `<div class="monthEn">${
monthsEn[dateArray[1] - 1]
}</div>`;

I'm using Cheerio to work with HTML easier. The generated HTML gets injected into a template using mustache.

It was important to me that the HTML generated be a single page, with no extra HTTP requests once it reaches the browser. Thus:

  1. I embedded the font in the HTML (and makes up for more than 90% of the page weight)
  2. The favicon is a SVG that has today's date in Nepali.
  3. The CSS is inlined.
  4. There is no JS.

Apps

The miti.today website was useful. It is something I reference everyday.

But over time, I began to wonder if a widget would be more useful. I decided to write a simple widget for iOS and see if it would be more useful. I used SwiftUI to make it, it was quite pleasant.

miti.today iOS app
miti.today iOS widget

It turned out to beuseful. Some of my friends asked for an Android version. So I used Compose with Glance to make it. It wasn't as pleasant.

miti.today Android app
miti.today Android widget

The Android app is in internal testing in Play Store, and I'm waiting for my Apple developer account to be approved. I'll update this page with links after they are generally available. The apps will be listed at app.miti.today.