Devlog

I am exploring BiomeJS. I really wish for it to be the final solution to “linting” and formatting in JavaScript projects.

For some time I was trying to use just eslint, with some opinionated rules. I don’t have too many particular opinions on formatting, just that it’s easy to read, which I find most people’s to be, so that’s why I look to use other people’s. Unfortunately eslint formatting was not very good, and I often wished to go back to Prettier. So I guess I do have some opinions.

The reason I chose to not use Prettier, is because I disliked the idea of adding yet another dependency when eslint, which seemed to be doing the same thing, was enough.

So, here I am looking at BiomeJS. In particular, I am looking at setting it up with Zed. It looks to be okay, but now I have to see what I have done with the config. It has changed quite a bit since I last wrote about using eslint to format.

I guess that’s what I get for using ChatGPT. The script that would create an entry in my devlog from the Drafts app would just take the first line and make a slug from it. I ended up with huge slugs.

So I’m using this small script now to generate IDs for the slug, even though it’s not really needed. I do plan to allow to access these devlogs via a link, though.

function getSlug(_content) {
	// var slug = content.match(/^slug: (.*)$/m);
	// if (slug) return slug[1];
	// var firstLine = content.split("\n")[0].trim();
	// if (!firstLine) throw new Error("No valid title found");
	// return firstLine.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(
	// 	/^-|-$/g,
	// 	"",
	// );
	return "id" + Math.random().toString(16).slice(2);
}

I’m trying out InertiaJS, which I was introduced to from this blog post from this wonderful blog post https://dnlytras.com/blog/phoenix-react-inertia. Check it out to understand more, but basically, InertiaJS uses some tricks to allow you to utilize a SPA framework with your classic backend framework, without having to write an API for it as you typically would. This to me, sounds amazing. I don’t have much interest in learning NodeJS (or any of its derivatives) based backends like Hono, or Nest, and have been learning Phoenix for quite some time now. While I am enjoying Phoenix - I am not entirely sold on its frontend solution, LiveView (similarly to the author). So let’s see how InertiaJS goes.

Here’s a part of a script I found from Github, and had ChatGPT slightly edit it to fit my use case.

function main() {
  var content = draft.content;
  var slug = getSlug(content);
  var publishDate = new Date();
  content = createFrontMatter(content, publishDate) + content;

  var url = urlformat(
    BASE,
    OWNER,
    REPO,
    "contents",
    SOURCE,
    PATH,
    `${formatDate(publishDate)}-${slug}.md`,
  );

  var b64 = Base64.encode(content);
  var res = req("GET", url, null);

  if ((res.statusCode == 200) && (res.data.type != "file")) {
    throw "Target file exists, but is not a file: " + res.data.type;
  } else if (res.statusCode == 200) {
    res = req("PUT", url, {
      message: "Update via Drafts: " + slug,
      content: b64,
      sha: res.data.sha,
    });
  } else {
    res = req("PUT", url, { message: "New via Drafts: " + slug, content: b64 });
  }

  var result = urlformat(SITE, PATH, slug, "");
  app.setClipboard(result);
}

I’m curious how the markdown will render.

Okay, I was able to fix the rendering of devlog posts. It was all thanks to the following Stackoverflow link:

How to render multiple content entries

In particular, I was trying to run await render calls in a map in the frontmatter. It gets a bit confusing understanding what actually gets returned because if you see:

const { Content, headings } = await post.render();

// and then in the template
<Content />

I am pretty tired to know okay, what exactly is happening if it’s a component? Can I have a list of components that I just render?

The solution was easier, though:

<div class="space-y-8">
   {entriesByYear[year].map(async (entry) => {
      const { Content } = await entry.render()
         return (
            <article class="">
              <div class="mb-2 flex items-center justify-between">
                <span class="text-sm text-black/60 dark:text-white/60">
                  <FormattedDate date={entry.data.date} />
                </span>
              </div>
              <div class="prose prose-neutral dark:prose-invert">
                <Content />
              </div>
            </article>
    )})}
</div>

Testing my devlog script from Drafts!