Old Dog, New Tricks - birth of "Waktu Solat"

See how the world evolved around WP, I (rather we) decided to learn a new CMS. One that is not bound and biased by the founder (i.e. free or open source)

I picked up 11ty. It's based on Nodejs. Does not require a server and can be hosted directly from Cloudflare.

I didn't know what to build.
Head against the wall.
Then I realised, I've always wanted to build a solat-website.

The difference, not using database.
Instead, using Muslim World League Calculations.
It uses JS. Not fun, but practical.

The Steps (as I remember)

Download using NPM and pushed using VSCode. There was a lot of back and forth with GPT, eventually I figure out how 11TY works.

1. You set the parameters
2. Run the app with "npm start"
3. Generates HTML pages

Sounds simple? Yeah. I kid you not. It took almost the entire weekend to build it with all the nooks and cranny.

The Confusing Bits

11ty is straightforward. So straightforward it you have to almost build everything from scratch. Skills that helped a lot was HTML and CSS.

Thankfully I have developed autoCSS, which made the build quicker

The JS Calculation

It took me the second repo to get this right. The first repo was a dud. It wasn't able to calculate prayer time on the fly. I ditch the entire thing and created the whole app again.

What works was pushing the js code to front in .eleventy.js using addPassthroughCopy. This simple character pushes any file or folder to the public facing.

The Generated Page

Obviously I didn't want to code every page. So I used "locations.md" and passed command to generate the pages based on json file.

The json file is basically the database.

.md file picks up .json then produced the pages. All 50 of them!

The Semi Circle SVG

As prompted by GPT, the max was "251.2" (I even memorise this by heart!). When it reached 150, it was already clocking beyond 100%.

No matter what prompt I used. I could never figure out.

Then I had to work backwards. Find out the maximum by manually changing the JS file, rerun the 'npm start' until I get very close to 100%.

Then I used it to build

Lesson: You can't rely on GPT for calculations.

The Curveball

It turns out Jakim uses their own system. Which means my method of calculating "Waktu Solat" is wrong. So Goodbye v2, Hello v3.

I will update more on this.