Indie Log #5

It's time for me to resume my indie log journey. After returning to college, I've found myself with ample free time—a perfect opportunity to be productive.

I've resumed work on Writeflow, though I had nearly forgotten its structure. To regain the memory, I decided to tackle a simple but crucial task: developing the library for Astro.js. This is necessary for my personal blog since I'm using Astro for it. However, the current rendering library is React-specific, so I needed to create an Astro version to enhance my website's performance.

The work was straightforward—I simply copied and pasted most of the code into the new package with some modifications. During this process, I realized that creating a core library would allow me to use it for other libraries as well. So, I wrote the core logic and made use of it in the @writeflow/astro package.

Astro was initially confusing for me, and I'm still not entirely sure how it works. Its behavior is similar to React, but not identical in every aspect. I struggled to make it work, but I eventually succeeded. I've now published it on NPM, where you can find it as @writeflow/astro.

Here's how to use it in Astro:

---
import { writeflow } from "../../utils/writeflow";
import Renderer from "@writeflow/astro";
import type { GetStaticPaths, InferGetStaticPropsType } from "astro";

export const getStaticPaths = (async () => {
  const contents = await writeflow({
    apiKey: import.meta.env.WRITEFLOW_API_KEY,
  }).content.list({
    fields: {
      title: true,
      slug: true,
      properties: true,
      body: true,
    },
  });

  return contents
    .filter((content) => content.properties.published.checkbox)
    .map((content) => ({
      params: { slug: content.slug },
      props: { content },
    }));
}) satisfies GetStaticPaths;

const props = Astro.props as InferGetStaticPropsType<typeof getStaticPaths>;
---

<Renderer block={props.content.body} components={{ image: CustomImage }} />

As you can see, it's straightforward. You have the flexibility to render Notion blocks using your own custom components.

After migrating the rendering logic from React to Astro, I've reduced the bundle size and improved performance. (While I can't measure the performance using the right method, I'm optimistic about the improvements.)

Keep on it!

Burnout is my recurring challenge, a persistent obstacle I face. Yet, here I am, back again, ready to persevere.