4: Shoehorning it into my setup

After I converted the start page and the about page it was time for the main deal:

Making the script that builds my blog output everything for a wap-portal.

---

One of these days I'll write a post about how my blog works, but here's the short form:

The posts are written im markdown on my desktop.

(1)

A CI/CD script on my Gitea server converts the markdown into html and inserts it into two templates, one for the

retro site

and one for the modern site.

The script converts all images to webp and avif (modern site) and to gif (retro site)

Another script is called that pushes everything to the prod server

The whole thing is written in Javascript and runs in nodejs (I will not apologize for that). There's some more to it, but for the sake of this post that's enough information.

(1)

Some Posts are actually mastodon threads, which automatically get assembled into a single page. Those are plainly not supported by the wap version.

---

Converting images to wbmp is easy, just call a script during the image conversion already in place that does that. I won't have jpeg files available for phones that support them, but I figured that's not a big deal.

The code that gets added to the remaining image conversion code looks a bit like that. If you looked at the script I linked earlier It'll look familiar to you.

// var im = require('imagemagick'); im.convert([imgSrc, '-resize', '100', '-monochrome', '+dither', imgDest], function (err, stdout) { if (err) { console.warn(err); } }); //

---

The More complicated part to deal with is the wml for multiple reasons. One issue I'm having is that WML pages that are to big will load on an emulator, but not on a real device. So It has to be split into multiple pages.

Another issue is that standard html has a bunch of tags wml doesn't, like

// li //

---

,

// code //

---

or

// hr //

---

. Some wap implementations treat them like

// p //

---

tags, some actually display them correctly and some throw an error. Because it was important to me for the site to look the same on every device, I added some code to replace them with

// p //

---

tags and some additional text.

// <code>example</code> //

---

for example turns into

// <p>//example//</p> //

---

After converting the images and the DOM-elements my code assembles everything together with a pre-made template, the same as all other versions of the website. The template for the wap-version also has links to go forward and back between the pages of each post. Right now there are no pages for the index on any version of the site. This will be something to fix in the future.

After a lot of trial and error I ended up with something that works. But the disclaimer on the start page about the wapsite being experimental will probably stay for good.

previous page next page post index