Forem: Thomas Ledoux

Adding search to a static Astro website

Thomas Ledoux — Wed, 26 Jun 2024 10:18:02 +0000

Why add a search page?

I always like it when a website includes a search page, it makes it easy to find the relevant content you're looking for.
This is especially useful when your website starts growing, and you've written a whole bunch of blog posts for example (it's me 😅).
At my agency job I create websites for large corporations with large budgets, and we usually go for Algolia there, since it's quite easy to use and it has some out of the box React components etc.
But Algolia gets quite pricy quite fast, so I wanted to look into something self hosted for my website.
I looked into what the Astro team is doing on their Starlight website, and found out they use Pagefind, "A fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure".
Sounds good to me, let's start using it!

Setting up the Astro integration

This part is very easy.
First we install astro-pagefind and pagefind

npm install astro-pagefind pagefind

Then we include it into our Astro config

import pagefind from "astro-pagefind";
import { defineConfig } from "astro/config";

export default defineConfig({
  integrations: [pagefind()],
});

Make sure to att the pagefind integration as the last element in the index, to make sure it runs after the other integrations.
By adding the integration, Pagefind will run as the last part of your build process, and index all the content from your static output.
You'll see something like this at the end of the build process:

Running Pagefind v1.1.0 (Extended)
Running from: "/Users/thomasledoux/Documents/website-thomas-astro"
Source:       ".vercel/output/static"
Output:       ".vercel/output/static/pagefind"

[Walking source directory]
Found 58 files matching **/*.{html}

[Parsing files]
Did not find a data-pagefind-body element on the site.
↳ Indexing all <body> elements on the site.
1 page found without an <html> element.
Pages without an outer <html> element will not be processed by default.
If adding this element is not possible, use the root selector config to target a different root element.

[Reading languages]
Discovered 1 language: en

[Building search indexes]
Total:
  Indexed 1 language
  Indexed 56 pages
  Indexed 3345 words
  Indexed 0 filters
  Indexed 0 sorts

Finished in 0.197 seconds

Creating the search UI

For the search UI I opted to create a separate search page for now, mainly because I didn't want to bother with modals for the search etc.
Pagefind provides default CSS and JS for the search element, so you can get up and running in minutes.

So I created a page under pages/search.astro

---
import Layout from "~/layouts/Layout.astro";
---

<Layout>
  <link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
  <script is:inline src="/pagefind/pagefind-ui.js"></script>

  <div id="search"></div>
  <script>
    // @ts-expect-error
    import { PagefindUI } from "@pagefind/default-ui";
    window.addEventListener("DOMContentLoaded", () => {
      new PagefindUI({
        element: "#search",
        showSubResults: true,
        autofocus: true,
      });
      const el = document.querySelector(".pagefind-ui");
      const input = el?.querySelector<HTMLInputElement>(`input[type="text"]`);
      const clearButton = el?.querySelector(".pagefind-ui__search-clear");
      // Check if the current URL has any query params
      const url = new URL(window.location.href);
      const params = new URLSearchParams(url.search);
      const query = params.get("q");

      // If query exists on page load
      if (query && input) {
        input.value = query;
        input.dispatchEvent(new Event("input", { bubbles: true }));
      }
      input?.addEventListener("input", (e) => {
        const input = e.target as HTMLInputElement;
        const url = new URL(window.location.href);
        const params = new URLSearchParams(url.search);
        params.set("q", input.value);
        window.history.replaceState({}, "", `${url.pathname}?${params}`);
      });
      clearButton?.addEventListener("click", () => {
        const url = new URL(window.location.href);
        const params = new URLSearchParams(url.search);
        params.delete("q");
        window.history.replaceState({}, "", `${url.pathname}`);
      });
    });
  </script>
</Layout>

As you can see, just calling the new PagefindUI() constructor with the correct element referenced is all you need to do to get the basics done.
The only extra code I added is code to handle query params, both reading from the query params and inputting that into the search element on page load and writing to the query params when searching.
I also added a click listener on the default clear button which pops up the moment you entered something into the search input, just to make sure the query params are also cleared.

The result after executing a search will look like this:

You get things like syntax highlighting, image detection and subsections for your headings out of the box!

Configuring the indexing

After executing a search on the keyword remix, which I use on my website a few times, I noticed that some results were being returned that I did not expect to be returned.
I saw all my automatically generated tag pages were being returned as results for this search term.
This was caused by my tags section at the top of the page, which always includes all the tags used on my blog.
So I should somehow make sure this content does not get indexed.
Luckily Pagefind provides something for this out of the box, you can use the data-pagefind-ignore="all" attribute on the HTML tag which you don't want to have indexed. It will also ignore all the children underneath it.

With this set up, I now have a simple search purely based on my static content, no need to set up a SaaS product for this and completely free!

Conclusion

For a website with almost completely static content like mine, Pagefind was the ideal solution to integrate search into my website. The fact that it's free, and doesn't require setting up a complex indexing mechanism is great.

This blog post was inspired by Alex Trost's blog post.

Want to see it in action? Find it on my site.
The diff of the code I needed to add for this can be found on my GitHub

Feature flags with Astro + Vercel Toolbar

Thomas Ledoux — Thu, 09 May 2024 18:55:36 +0000

I've been using Vercel for a few years now to host my website(s), but I never really looked into the Vercel Toolbar until now.
I though it was mainly used for leaving comments, but apparently it has evolved a lot, and Vercel added a lot of new capabilities.
One of those caught my eye: the feature flags.
Feature flags is a concept where you can toggle on or off certain functionalities, allowing for controlled release and testing of new features.

Now we know what feature flags are, let's see how to implement them in an Astro website.

Adding the Vercel Toolbar locally

We start by adding the @vercel/toolbar dependency.

npm i @vercel/toolbar

The use the vercel CLI to link your local project to your Vercel project

vercel link [path-to-directory]

Vercel injects the Toolbar into your deployment previews automatically, but while developing locally of course this is not available.
That's why I added the check on the NODE_ENV variable, to only add the script when we're developing locally.
So let's add the Toolbar to the Layout, which is shared by all pages on my website.
We just need to add a <script> tag to our Astro code.

{
  import.meta.env.NODE_ENV === "development" ? (
    <script
      is:inline
      src="https://vercel.live/_next-live/feedback/feedback.js"
      data-explicit-opt-in="true"
      data-owner-id="team_PK64Z6zzqG3h5W3BmmCZX9aS"
      data-project-id="prj_UlaZ1TGeEMBpy8kKmj3wnD7F3M9a"
      data-branch="main"
    />
  ) : null
}

To know what to fill in on the data-owner-id and data-project-id, it's best to follow Vercels guide.

Once this is set up, you should see the toolbar appear at the bottom of the page.

Setting up Feature Flags

First we need to set an environment variable called FLAGS_SECRET inside the Vercel settings for our website, and then pull the environment variable using vercel env pull.
The FLAGS_SECRET value must have a specific length (32 random bytes encoded in base64) to work as an encryption key.
You can generate this value using nodejs:

node -e "console.log(crypto.randomBytes(32).toString('base64url'))"

The Vercel Toolbar will send GET requests to an endpoint with the URL .well-known/vercel/flags on the current domain to retrieve the configuration for the feature flags.
So we should make sure we have an API route which listens on this URL for GET requests, and returns a configuration.
The configuration should have the following shape:

type ApiData = {
  definitions: Record<
    string,
    {
      description?: string;
      origin?: string;
      options?: { value: any; label?: string }[];
    }
  >;
  hints?: { key: string; text: string }[];
  overrideEncryptionMode?: "plaintext" | "encrypted";
};

Let's implement this into an API route in our Astro codebase:

export const prerender = false;

import { verifyAccess } from "../../../../lib/vercel-flags-port.mjs";
import type { APIRoute } from "astro";

export const GET: APIRoute = async ({ request }) => {
  const access = await verifyAccess(request.headers.get("Authorization"));
  if (!access) {
    return new Response(null, { status: 401 });
  }

  return new Response(
    JSON.stringify({
      definitions: {
        newFeature: {
          description: "Controls whether the new feature is visible",
          options: [
            { value: false, label: "Off" },
            { value: true, label: "On" },
          ],
        },
      },
    }),
  );
};

Note that I added export const prerender = false at the top of the file, because I'm using hybrid rendering, it's necessary to flag non-static routes.
You can also see I import verifyAccess from a local file, this is done because I could not get the @vercel/flags package to work with Astro, because the @vercel/flags package checks for an environment variable on process.env, but Astro (actually Vite) uses environment variables on the import.meta.env property.
Because of this, the package thinks the environment variable is not defined, and throws errors.
Therefore, I ported the file over to my own codebase, and replace process.env mentions with import.meta.env, and it works!

The verifyAccess token will make sure the request to our API route is actually coming from the Vercel Toolbar.

When we click on the feature flags button inside of the toolbar we'll see our newly created feature flag pop up.

Once we select one of the overrides, a cookie with the key vercel-flag-overrides will be created, containing the encypted value of the flag.
You'll also see the Vercel Toolbar turns purple when you activate a flag.

Now we want to actually read the flag and do something with it.
I decided to use the flag as an indication that the homepage should be redirected to another version of the homepage.
Because I want to redirect as early as possible, I decided to put this logic into a middleware.
In the middleware, we can read the cookies of the incoming request, and execute logic based on that.

import { defineMiddleware } from "astro:middleware";
import { decrypt } from "./lib/vercel-flags-port.mjs";

// `context` and `next` are automatically typed
export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next();
  const featureFlagOverrideCookie = context.cookies.get(
    "vercel-flag-overrides",
  )?.value;
  if (featureFlagOverrideCookie && context.url.pathname === "/") {
    const decryptedFlags = (await decrypt(featureFlagOverrideCookie)) as {
      newFeature: boolean;
    };
    if (decryptedFlags.newFeature) {
      return context.redirect("/homepage-alternative-feature-flag");
    }
  }
  return response;
});

So we get the cookies from the context, check if the requested page is the homepage and read the vercel-flag-overrides cookie's value.
If there's a cookie and the request is for the homepage, we decrypt the cookie's value and check if the newFeature flag is set to true.
If this is the case, we'll redirect the user (using context.redirect()) to an alternative homepage.

On more thing that needed to be changed was that I had to change my homepage to also be server rendered (so adding export const prerender = false; to the top of the file) instead of statically rendered, otherwise it was not possible to read the cookies for the request for that page.

The source code can be found on Github.

Thanks for reading! Hope it helps someone further.

Astro DB: Migrating my analytics data from Vercel Postgres

Thomas Ledoux — Tue, 02 Apr 2024 18:55:16 +0000

Why migrate?

A few months ago I wrote about setting up Basic analytics with Vercel Postgres - Drizzle - Astro.
At the time I chose Vercel Postgres as a database because it had an ok free tier, and I thought it was easy to manage all my hosted tools in one place.
But earlier this month the Astro team announced Astro DB, a fully managed (lib)SQL database.
They partnered with Turso to provide very generous free tiers with infinite scalability.
I was immediately sold!

Setting up Astro DB

As with every Astro feature, you can just run npx astro add db, and all dependencies and configurations will be put into place for you.
Once this is done, you can define and seed your database.

import { column, defineDb, defineTable } from "astro:db";

export const PageView = defineTable({
  columns: {
    url: column.text(),
    date: column.date(),
  },
  indexes: {
    url_idx: { on: ["url"], unique: false },
    date_idx: { on: ["date"], unique: false },
  },
});

export default defineDb({
  tables: { PageView },
});

import { db, PageView } from "astro:db";

export default async function () {
  await db.insert(PageView).values([
    { date: new Date(), url: "/" },
    { date: new Date(new Date().getTime() - 1000), url: "/test" },
  ]);
}

During development, whenever you start your development server, a new database is created locally and will contain the data from your db/seed.ts file.

Migrating data from Vercel Postgres to Astro DB

I didn't want to spend too much time on the code for this functionality, and since Vercel doesn't provide the functionality to export the database, I created an API route in my Astro app where I query the Vercel postgres database, and then write the resulting dataset to Astro DB.
This could probably be done in a more efficient way using batching or transactions, but databases aren't my specialty, so I didn't dive into it deeper.

export const prerender = false;
import type { APIRoute } from "astro";
import { db, asc, gt, PageView } from "astro:db";
import { PageViewsTable, client } from "~/lib/dbClient";

export const GET: APIRoute = async () => {
  try {
    const entries = await client
      .select()
      .from(PageViewsTable)
      .orderBy(asc(PageViewsTable.date))
      .where(gt(PageViewsTable.date, new Date("2024-01-16")));
    for (const entry of entries) {
      await db.insert(PageView).values({ url: entry.url, date: entry.date });
    }
  } catch (e) {
    console.error(e);
    return new Response(
      JSON.stringify({
        error: "Error updating views",
      }),
      { status: 400 },
    );
  }

  return new Response(
    JSON.stringify({
      message: "Succesfully updated views",
    }),
    { status: 200 },
  );
};

Due to the fact that I had around 30k views to migrate, my function timed out a few times, and I had to find out what the date of the last migrated entry was, to know what to use as the greater than value for my query to Vercel Postgres.

Querying Astro DB

Now that I've got data in Astro DB, I can start with the fun part, querying the data!
To query your database and to insert data into it, you'll be using Drizzle, a type-safe ORM which is built into Astro.
This was great news for me, since I already used Drizzle in my previous implementation with Vercel Postgres.
You can import db and start querying right away, all with full TypeScript support.
An example where I query the count of page views for a certain URL:

import { PageView, eq, db, count } from "astro:db";

const viewCount = await db
  .select({ value: count() })
  .from(PageView)
  .where(eq(PageView.url, url));

The return type here will be inferred automatically and would look like:

{
  value: number;
}
[];

Inserting data into Astro DB

Inserting is as easy as it gets, just call db.insert() and off you go.
On the inserts, Drizzle will check the types of the values being passed to it again, so if you'd send a number for the url field, this would fail, since it's expecting a string.

await db.insert(PageView).values({
  url: body.url,
  date: new Date(),
});

Conclusion

Since Drizzle abstracts away the differences between Postgres & LibSQL behind the scenes, I didn't have to change much to my queries. This made the migration very easy. Having the type-safety of Drizzle, I could just do the changes and do a quick type-check to see if any TS errors popped up, if there weren't any, I was done.
Now the migration's done, I don't have to worry about hitting the limits of the free tier anywhere soon, and the DX got even better, double win!
If you want to see the changes I had to do to move from Vercel Postgres to Astro DB in code, you can check this compare. You'll see a lot of the changed files are from moving my pages/page-views route to a static route, and handling all the data fetching for it on the client side.
This was mainly done to avoid seeing an empty page for too long while server rendering the dataset.

Hope you like it, now go give it a try!
GitHub code
Live site

I created basic analytics with Vercel Postgres, Drizzle & Astro

Thomas Ledoux — Wed, 17 Jan 2024 13:40:29 +0000

TL;DR

Full code can be found on GitHub, live data can be seen on my website.

Why?

Since Vercel's analytics pricing is a bit too expensive for my use case (where I hit the limit of 2,500 requests per month), and I didn't like using Google Analytics (not a big fan of Google), I decided to build my own analytics dashboard.
Databases was something I didn't work with much before directly, so I decided to use an ORM, Drizzle, which is quite lightweight and easy to use.

Setting up the database

I used Vercel Postgres as my database and Astro as my frontend framework.
Vercel Postgres is basically a wrapper around Neon, a serverless SQL server provider.
Setting up the database is pretty straightforward, I just followed the docs and got my database up and running in no time.
Once my database was up and running, the time came to set up the database schema.
The schema is pretty simple, it consists of a table called page_views with the following columns:

url: the URL of the viewed page
date: the data of the page view

The SQL query to create this table is the following:

CREATE TABLE page_views (
  url VARCHAR(255) NOT NULL,
  date TIMESTAMP NOT NULL
);

Setting up Drizzle

To set up the Drizzle client, I first created a pool using the @vercel/postgres createPool function.
Once the pool is created, I can instantiate the Drizzle client with the pool.
In the client I also create an export of the PageViews table, which is a Drizzle table that represents the page_views table in the database.

import { createPool } from "@vercel/postgres";
import { pgTable, text, timestamp } from "drizzle-orm/pg-core";
import { drizzle } from "drizzle-orm/vercel-postgres";

export const PageViewsTable = pgTable("page_views", {
  url: text("url").notNull(),
  date: timestamp("date").defaultNow().notNull(),
});

// Connect to Vercel Postgres

const pool = createPool({
  connectionString: import.meta.env.POSTGRES_URL,
});
const client = drizzle(pool);

export { client };

Filling up the database

Now that the database is set up, it's time to fill it up with data.
Since I was using Google Analytics before this, I had a lot of data already available.
Porting this data to my own database required a bit of work:

Export the data from Google Analytics by downloading a CSV file
Create an API route in Astro
Inside the API route, convert the CSV file to JSON with csv-parser
Once converted, insert the data into the database using the Drizzle client

The code for the API route is the following:

import type { APIRoute } from "astro";
import csv from "csv-parser";
import fs from "fs";
import { PageViewsTable, client } from "~/lib/dbClient";

export const GET: APIRoute = async () => {
  const csvFilePath = "./public/data-export.csv";
  const jsonArray: { "Page path": string; views: string }[] = [];

  fs.createReadStream(csvFilePath)
    .pipe(csv())
    .on("data", (data) => jsonArray.push(data))
    .on("end", async () => {
      for (const item of jsonArray) {
        let count = 0;
        while (count < parseInt(item.views)) {
          await client.insert(PageViewsTable).values({
            url: item["Page path"],
            date: new Date(),
          });
          count++;
        }
      }
    });

  return new Response(
    JSON.stringify({
      message: "Succesfully updated views",
    }),
    { status: 200 },
  );
};

After a few seconds or minutes (depending on the size of your CSV and amount of views), the database should be filled up with data.

Tracking new views

Now the database is filled up with the historic data, but I'm not tracking new views yet.
To do this, I created a new API route that inserts a new row into the database every time a page is viewed.
This API route is called when the astro:page-load event is triggered on the document (see Astro docs on View Transitions).
This event is triggered whenever a new page is loaded when you're using View Transitions.
I use the isbot package to check if the page is loaded by a crawler/bot to prevent bots from being tracked, and when running the site in development mode, I return an error to prevent the database from being filled up with development views.
The code for the API route is the following:

export const prerender = false;
import { isbot } from "isbot";

import type { APIRoute } from "astro";
import { PageViewsTable, client } from "~/lib/dbClient";

export const POST: APIRoute = async ({ request }) => {
  if (import.meta.env.NODE_ENV === "development") {
    return new Response(
      JSON.stringify({
        error: "This endpoint is not available in development",
      }),
      { status: 400 },
    );
  }
  if (isbot(request.headers.get("user-agent"))) {
    return new Response(
      JSON.stringify({
        error: "This endpoint is not available for bots",
      }),
      { status: 400 },
    );
  }
  const body = await request.json();
  if (!body.url) {
    return new Response(
      JSON.stringify({
        error: "Missing URL",
      }),
      { status: 400 },
    );
  }
  if (body.url === "/page-views") {
    return new Response(
      JSON.stringify({
        error: "This url is not tracked",
      }),
      { status: 202 },
    );
  }
  try {
    await client.insert(PageViewsTable).values({
      url: body.url,
      date: new Date(),
    });
  } catch (e) {
    console.error(e);
    return new Response(
      JSON.stringify({
        error: "Error updating views",
      }),
      { status: 400 },
    );
  }

  return new Response(
    JSON.stringify({
      message: "Succesfully updated views",
    }),
    { status: 200 },
  );
};

Creating the dashboard

Now I have my historic and new data coming into my database, it's time to create the dashboard.
I created a (publicly available) route called /page-views that shows the dashboard.
This is a .astro page that uses the Drizzle client to query the database and show the data.
There's a few things going on here:

A search input that allows you to search for a specific page
A dropdown with some predefined time ranges (past day, past week, past month, past year, all time)
A bar chart that shows the amount of views per page
Pagination buttons to go to the next or previous page of results, with a maximum of 10 results per page

The code to handle the query to the database looks like this:

import { and, count, countDistinct, desc, gte, like, lte } from "drizzle-orm";
import { PageViewsTable, client } from "~/lib/dbClient";
const searchParams = Astro.url.searchParams;
const dateRange = searchParams.get("date-range") ?? "all-time";
const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
let dateGreaterThan: Date | undefined;
const dateLessThan = new Date(Date.now());
switch (dateRange) {
  case "past-day":
    dateGreaterThan = new Date(Date.now() - 24 * 60 * 60 * 1000);
    break;
  case "past-week":
    dateGreaterThan = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
    break;
  case "past-month":
    dateGreaterThan = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
    break;
  case "past-year":
    dateGreaterThan = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000);
    break;
  default:
    break;
}

const pageSize = 10;
const offset = (page - 1) * pageSize;
const search = searchParams.get("search") ?? "";

const start = performance.now();

const conditions = [];
if (dateGreaterThan) {
  conditions.push(gte(PageViewsTable.date, dateGreaterThan));
  conditions.push(lte(PageViewsTable.date, dateLessThan));
}
if (search !== "") {
  conditions.push(like(PageViewsTable.url, `%${search}%`));
}
const totalViewsQuery = client
  .select({
    totalUniqueURLs: countDistinct(PageViewsTable.url),
    totalCount: count(),
  })
  .from(PageViewsTable)
  .where(and(...conditions));

const viewsQuery = client
  .select({
    url: PageViewsTable.url,
    pageviews: count(),
  })
  .from(PageViewsTable)
  .where(and(...conditions))
  .limit(pageSize)
  .offset(offset)
  .groupBy(PageViewsTable.url)
  .orderBy(desc(count()));

The totalViewsQuery is used to get the total amount of views and unique URLs, and the viewsQuery is used to get the data for the bar chart.
The total views are used to provide the pagination at the bottom of the page.
I left out the code for the search input and dropdown, but it's pretty straightforward and can be found on GitHub if you're interested (see links at bottom of the article).

The bar chart is created using recharts and the code looks like this:

import {
  Bar,
  BarChart,
  LabelList,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

type ViewChartProps = {
  data: {
    url: string;
    pageviews: number;
  }[];
};

const ViewChart = ({ data }: ViewChartProps) => {
  return (
    <ResponsiveContainer
      className="-ml-16"
      width="100%"
      height={data.length * 50}
    >
      <BarChart layout="vertical" data={data}>
        <YAxis
          type="category"
          dataKey="url"
          stroke="#888888"
          fontSize={12}
          tickLine={false}
          axisLine={false}
          tick={false}
        />
        <XAxis type="number" hide />
        <Tooltip
          wrapperStyle={{ maxWidth: "300px" }}
          // @ts-expect-error
          labelStyle={{ textWrap: "balance" }}
        />
        <Bar
          label={false}
          dataKey="pageviews"
          fill="#2c6e49"
          radius={[4, 4, 0, 0]}
        >
          <LabelList
            dataKey="url"
            position="insideLeft"
            style={{ fill: "#000" }}
          />
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
};

export default ViewChart;

Conclusion

Now I own my own analytics data, I can choose how the visualize it myself, what to track and what not to track.
Of course I'm not storing IP addresses or any other personal data, so I'm not violating any privacy laws.
I'm also not tracking any data that I don't need, so I'm not wasting any resources.

The only downside I encountered so far with the Vercel Postgres database, is the cold starts.
Since the database is serverless, it needs to start up when it's not used for a while, so the first request after a while takes a bit longer (up to 1.5 seconds).

I'm pretty happy with the result, and I hope you learned something from this post!
This gave me the opportunity to learn more about SQL and Drizzle, which is another thing I can check off my list.

There's still room for improvement on the UI side, and the tracking data could also be improved by tracking things like the referrer etc.

Full code can be found on GitHub, live data can be seen on my website.

A minimal dependency-free translation system for Next.js

Thomas Ledoux — Wed, 15 Nov 2023 19:05:06 +0000

TLDR:

Source code &
Live demo

Introduction

I've been doing some web speed performance checks on the Next.js websites we are building at my current company lately, and one of the things that I noticed is that the translation system we are using is adding a lot of weight to the bundle size. I decided to create a minimal translation system that doesn't add any dependencies to the bundle size.
Of course this is no shade to the existing translation systems out there, but I wanted to see if I could create something that is minimal and dependency-free, without all the functionality which systems like next-intl provide.

Setting up the backend

For the purpose of this blog and demo I decided to use POEditor to host my translations.
They have a generous free tier which is more than enough for this demo.
I created a project, added 2 languages (NL and EN) and added a few translations to it.

Setting up the frontend

Getting started with a new Next.js app is easy, just run npx create-next-app, follow the steps in your terminal and you're good to go.
For this demo and blog I'm using the Pages Router, I might do another blog post on doing the same in the App Router later, but this might work a bit differently since React Context can not be used in RSC.
In next.config.js I added

i18n: {
  defaultLocale: 'en',
  locales: ['en', 'nl'],
},

to add an extra language (Dutch) to the project.

Setting up the translation fetching from POEditor

Using the Fetch API, I'm fetching the translations for my project from POEditor in the specified language.
I'm creating an object with the translations, where the key is the translation key and the value is the translation itself.

export const getDictionaryItems = async (locale: string) => {
  const urlencoded = new URLSearchParams();
  urlencoded.append("id", process.env.POEDITOR_PROJECT_ID!);
  urlencoded.append("api_token", process.env.POEDITOR_API_TOKEN!);
  urlencoded.append("language", locale);
  const dictionaryItems = await fetch(
    "https://api.poeditor.com/v2/terms/list",
    {
      method: "POST",
      body: urlencoded,
    },
  ).then((res) => res.json());
  const terms = dictionaryItems.result.terms as {
    term: string;
    translation: {
      content: string;
    };
  }[];
  return Object.fromEntries(
    terms.map((el) => [el.term, el.translation.content]),
  );
};

Setting up the translation context

Here I'm creating a React Context to store the translations.

import { createContext } from "react";

export const DictionaryContext = createContext<
  Record<string, string> | undefined | null
>(null);

Setting up the translation provider

In the _app.tsx file (the entrypoint of the Next.js app) I'm importing my DictionaryContext, and using it's Provider to provide the translations to all the pages in my app by wrapping everything in the render function in the Provider.
The DictionaryContext.Provider takes a value prop, which should be the translations coming from POEditor. I fill the value with pageProps.dictionaryItems, which will be provided by the getStaticProps (or getServersideProps) function in the pages.

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
import { DictionaryContext } from '../lib/dictionary-context';
import Link from 'next/link';
import { useRouter } from 'next/router';

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  return (
    <DictionaryContext.Provider value={pageProps.dictionaryItems}>
      <header className="flex justify-center">
        <nav>
          <ul className="flex py-4 gap-x-4">
            <li>
              <Link
                className={`p-2 border ${
                  router.asPath === '/' ? 'border-orange-500' : ''
                }`}
                href="/"
              >
                Home
              </Link>
            </li>
            <li>
              <Link
                className={`p-2 border ${
                  router.asPath === '/detail' ? 'border-orange-500' : ''
                }`}
                href="/detail"
              >
                Detailpage
              </Link>
            </li>
          </ul>
        </nav>
        <div className="fixed top-4 right-4">
          <Link
            className={`${
              router.locale === 'en' ? 'text-orange-500 font-bold' : ''
            }`}
            href={router.asPath}
            locale="en"
          >
            EN
          </Link>
          <Link
            className={`ml-2 ${
              router.locale === 'nl' ? 'text-orange-500 font-bold' : ''
            }`}
            href={router.asPath}
            locale="nl"
          >
            NL
          </Link>
        </div>
      </header>
      <main className={inter.className}>
        <Component {...pageProps} />
      </main>
    </DictionaryContext.Provider>
  );
}

Setting up the translation hook

For my custom translation hook I'm using the useContext hook to get the translations from the DictionaryContext and return the translation for the given key. I also added a second parameter to the function, which is an object containing variables which can be used in the translation. The translation should contain the variable name between double curly braces, and the variable will be replaced with the value passed to the translation function.

import { useContext } from "react";
import { DictionaryContext } from "../lib/dictionary-context";

const useTranslation = () => {
  const translations = useContext(DictionaryContext);
  const t = (
    key: string,
    variables?: {
      [key: string]: string | number;
    },
  ) => {
    if (!translations) {
      return key;
    }
    if (variables) {
      return Object.keys(variables).reduce((acc, variableKey) => {
        return acc.replace(
          new RegExp(`{{${variableKey}}}`, "g"),
          variables[variableKey].toString(),
        );
      }, translations[key] || key);
    }
    return translations[key] || key;
  };
  return t;
};

export default useTranslation;

Setting up the translation fetching in the pages

In my demo I'm using getStaticProps to avoid too many fetches to my backend, but you could also use getServerSideProps if you want to fetch the translations on every request.
In the getStaticProps function I'm fetching the translations for the current locale, and returning them in the dictionaryItems prop.
I also chose to add the revalidate: 300 option to make sure the translations are only refetched every 5 minutes.

import Cta from "@/components/Cta";
import useTranslation from "@/hooks/use-translation";
import { getDictionaryItems } from "@/lib/api";
import { GetStaticProps } from "next";

export default function Home() {
  const t = useTranslation();
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-3xl font-bold mb-4">{t("homepage.title")}</h1>
      <p className="italic">{t("homepage.description")}</p>
      <Cta />
    </div>
  );
}

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  const dictionaryItems = await getDictionaryItems(locale ?? "en");
  return {
    props: {
      dictionaryItems,
    },
    revalidate: 300,
  };
};

Inside my React components I can now simply use the useTranslation hook to get the translation function, and then use the function to translate the given key. In the Cta component I'm also using the second parameter of the translation function to pass a variable to the translation. The translation value in POEditor looks like this: Cta description with count_variable: {{count_variable}}.

import useTranslation from "@/hooks/use-translation";

const Cta = () => {
  const t = useTranslation();
  return (
    <div className="p-6 border text-center mt-4">
      <h2>{t("cta.title")}</h2>
      <p>{t("cta.description", { count_variable: 20 })}</p>
    </div>
  );
};
export default Cta;

Conclusion

This is a very basic translation system, but it works well for my use case, and has been enough for the projects at work.
I hope it's helpful for you as well, and if you have any questions or feedback, feel free to leave a comment below.
Links to source code and live demo can be found at the top of this blog post.

Creating a Chrome extension to convert the URL to use localhost in 1 click

Thomas Ledoux — Mon, 04 Sep 2023 17:25:00 +0000

Why?

Often when I'm working on a project, I get bug reports of issues happening on production/acceptance environments with a URL pointing to the matching environment. The problem is that I have to copy the URL, remove the domain and paste it in my local environment and port to reproduce the issue. This is a tedious process, so I decided to create a Chrome extension to automate this.

How?

I started out by creating a manifest.json file, which is required for every Chrome extension. This file contains the name, version, description, icons, permissions, etc. of the extension.

{
  "manifest_version": 3,
  "name": "Convert to localhost",
  "description": "Convert your current URL to localhost",
  "version": "0.0.1",
  "action": {
    "default_popup": "convert-to-localhost.html",
    "default_icon": "128x128.png"
  },
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  "permissions": ["tabs", "storage"],
  "icons": {
    "16": "16x16.png",
    "32": "32x32.png",
    "48": "48x48.png",
    "128": "128x128.png"
  }
}

The action property is used to define the popup that is shown when you click on the extension icon. The options_ui property is used to define the options page of the extension. The permissions property is used to define which permissions the extension needs. In this case, we need the tabs permission to get the current URL and the storage permission to store the user's settings. The icons property is used to define the icons of the extension.
In the action's HTML I reference the JavaScript file which I use to execute the logic of the extension.
The port and the flag if HTTPS should be used come from the options of the extension (more on that below).
It also displays the sentence "Converted URL to localhost" to give some feedback to the user.

<html>
  <body>
    <h1>Converted URL to localhost</h1>
    <script src="convert-to-localhost.js"></script>
  </body>
</html>

The JavaScript itself is also quite simple:

get the currently active tab
get the URL from the tab and create a URL object from it, so we can read the pathname (the part we need) later
get the port from the user's settings and replace the domain with http${secure ? 's' : ''}://localhost:${port} and update the tab with the new URL.

(async () => {
  let queryOptions = { active: true, currentWindow: true };
  let [tab] = await chrome.tabs.query(queryOptions);
  const url = new URL(tab.url);
  const port = (await chrome.storage.sync.get("port")).port;
  const secure = (await chrome.storage.sync.get("secure")).secure;
  chrome.tabs.update({
    url: `http${secure ? "s" : ""}://localhost:${port ?? "3000"}${
      url.pathname
    }`,
  });
})();

The options page is a simple HTML page with a form to set the port. The port is stored in the storage of the extension, so it's persisted between sessions.

<html>
  <body>
    <form>
      <label for="port">Port:</label>
      <input type="number" id="port" name="port" />
      <br />
      <label for="secure">HTTPS:</label>
      <input type="checkbox" id="secure" name="secure" />
      <button id="save" type="submit">Save</button>
    </form>
    <script src="options.js"></script>
  </body>
</html>

The JavaScript for the options page is only contains a few lines do to:

on load, get the port and secure from the storage and set the value of the input to the port and secure checkbox
on submit, get the value of the inputs and store them in the storage

// Saves options to chrome.storage
const saveOptions = () => {
  const port = document.getElementById("port").value;
  const secure = document.getElementById("secure").checked;
  chrome.storage.sync.set({ port, secure });
  window.close();
};

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
const restoreOptions = async () => {
  const syncItems = await chrome.storage.sync.get(["port", "secure"]);
  console.log(syncItems);
  document.getElementById("port").value = syncItems.port ?? "3000";
  document.getElementById("secure").checked = syncItems.secure;
};

document.addEventListener("DOMContentLoaded", restoreOptions);
document.getElementById("save").addEventListener("click", saveOptions);

Once the code was ready, the time had come to start testing it in Chrome. To do this, you have to go to chrome://extensions/, enable developer mode and click on "Load unpacked". Then you can select the folder containing the extension and it will be loaded in Chrome. Now you can test the extension by clicking on the icon and setting the port in the options page.

When you change the source code, you do have to reload the extension by clicking the refresh icon on the extension in chrome://extensions/.
Publishing to the Chrome store wasn't really something I wanted to do for this extension, so that's not covered in this article.
Hope this was useful to you!

Source code can be found on GitHub.

Keeping your NPM dependencies up-to-date in a visual way with npm-check-updates

Thomas Ledoux — Mon, 10 Jul 2023 08:44:26 +0000

Why?

Keeping your dependencies up to date is important because it helps you keep your application secure and up to date with the latest features. It also helps you avoid the situation where you have to update a dependency that is 3 years old and has 100 breaking changes.
Using a tool like npm-check-updates helps you keep your dependencies up to date and makes it easier to update them, without having to manually go through all your dependencies in your package.json file.

How?

To install npm-check-updates, run npm install -g npm-check-updates. This will install the tool globally on your machine, making sure you can use the tool in any project.
To run the tool, run ncu in the root of your project. This will show you a list of all your dependencies and their current version and the latest version available.
The output will look something like this:

Notice in the output that different colors are used to indicate the type of update
that is available:

Green means that a patch update is available
Yellow means that a minor update is available
Red means that a major update is available

Running ncu -u will output the same list, but with the updated versions of the dependencies. This will also update the dependencies in your package.json & package-lock.json. Now all you have to do afterwards is to run npm install to install the updated dependencies.

Another thing I find useful in this tool is the fact that you can use the --filter flag to filter the dependencies you want to update, for example ncu --filter @babel will only show you the dependencies that start with @babel.

There's also an option to only go an update 'patch' or 'minor' versions of your dependencies, this can be done by using the --target flag, for example ncu --target minor will only update your dependencies to the latest minor version.

Of course there's even more options to use in this tool, you can find them all in the documentation.

Conclusion

If you're looking for a better workflow of keeping the dependecies of your projects up to date, I would definitely recommend using npm-check-updates. It's a great tool that helps you keep your dependencies up to date and makes it easier to update them with a visual output.

Using GitHub Discussions to host my Astro blog comments and reactions

Thomas Ledoux — Mon, 19 Jun 2023 19:48:08 +0000

Until the day of writing, I was using a custom made comment section for my blog posts.
This included setting up a database with PlanetScale and Prisma as ORM, and a TRPC server to handle the requests, which was a lot of work for a simple comment section.
And even then, it was not perfect, because I had to manually clean up spam comments (since I was too lazy to add authentication :-D), I didn't have support for replies to comments, and I didn't have reactions.

When I was reading one of the blogs on TkDodo's website, I noticed he was using GisCus for his comment section.
GisCus is based on GitHub Discussions, so I already had this feature available to me as part of the repository I host my website on.
The setup was very easy, on the GisCus website you can select the repository you want to use, and it will generate a script for you to include in your website.
This will look something like this:

<script
  src="https://giscus.app/client.js"
  data-repo="[ENTER REPO HERE]"
  data-repo-id="[ENTER REPO ID HERE]"
  data-category="[ENTER CATEGORY NAME HERE]"
  data-category-id="[ENTER CATEGORY ID HERE]"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
  data-lang="en"
  crossorigin="anonymous"
  async
></script>

The blanks are filled in with the repository name, repository ID, category name and category ID automatically.
The only thing I noticed was that using the default <script> tag, clicking on the "Sign in with GitHub" button would refresh the whole page, and it doesn't scroll down to the comment section.
For me that's quite annoying, so I decided to use the GisCus React component instead.
This component is very easy to use, you just have to install it with npm install @giscus/react and then import it in your React component.
The props you need to pass to the component are the same as the data attributes in the script tag, but camelCased instead of kebab-cased.

import * as React from 'react';
import Giscus from '@giscus/react';

const id = 'inject-comments';

const Comments = () => {
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <div id={id}>
      {mounted ? (
        <Giscus
          id={id}
          repo="[ENTER REPO HERE]"
          repoId="[ENTER REPO ID HERE]"
          category="[ENTER CATEGORY HERE]"
          categoryId="[ENTER CATEGORY ID HERE]"
          mapping="pathname"
          reactionsEnabled="1"
          emitMetadata="0"
          inputPosition="top"
          lang="en"
          loading="lazy"
        />
      ) : null}
    </div>
  );
};

export default Comments;

To have this comment section on every blog I create, I updated my BlogLayout.astro (which I used to wrap all my blogs ) file to include this component. The relevant part in this file:

<Comments client:idle />

You can see I only load the component when the browser is idle by using the built in client directives from Astro.

And that's it!
A fully functional comment section for my blog posts, without having to manage a database or authentication.
Hope it's useful for you too!
Full code can be found on my GitHub.

Using TRPC in Astro and its (React) islands

Thomas Ledoux — Thu, 09 Mar 2023 19:24:35 +0000

I started using TRPC in some Next.js projects at work, and really liked the end-to-end type safety this gives you as a developer when working with APIs.
So I decided to also implement TRPC on my own website, which is using Astro.
There's a few steps that need to be taken to start using TRPC in Astro.

Installing the required packages

npm install @tanstack/react-query @trpc/client @trpc/server @trpc/react-query

Setting up the TRPC context

// /src/server/context.ts

import { getUser } from '@astro-auth/core';
import type { inferAsyncReturnType } from '@trpc/server';
import type { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';

export function createContext({
  req,
  resHeaders,
}: FetchCreateContextFnOptions) {
  const user = getUser({ server: req });
  return { req, resHeaders, user };
}

export type Context = inferAsyncReturnType<typeof createContext>;

Because I want to check the currently logged in user when a TRPC route is called, I add the getUser() call from @astro-auth. By adding this to the context, I can use the user later on in my middleware (see below).

Setting up the TRPC server

// src/server/router.ts

import { initTRPC, TRPCError } from '@trpc/server';
import { z } from 'zod';
import { prisma } from '../lib/prisma';
import type { Comment } from '@prisma/client';
import type { Context } from './context';

export const t = initTRPC.context<Context>().create();

export const middleware = t.middleware;
export const publicProcedure = t.procedure;

const isAdmin = middleware(async ({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next({
    ctx: {
      user: ctx.user,
    },
  });
});

export const adminProcedure = publicProcedure.use(isAdmin);

export const appRouter = t.router({
  getCommentsForBlog: publicProcedure
    .input(z.string())
    .query(async ({ input }) => {
      const blogUrl = input.replace('src/content', '').replace('.mdx', '');
      const commentsForBlogUrl = await prisma?.post.findFirst({
        where: { url: (blogUrl as string) ?? undefined },
        include: { Comment: { orderBy: { createdAt: 'desc' } } },
      });
      const allCommentsInDbForPost = commentsForBlogUrl?.Comment;
      return allCommentsInDbForPost ?? null;
    }),
  createCommentForBlog: publicProcedure
    .input(
      z.object({
        comment: z.string(),
        author: z.string(),
        blogUrl: z.string(),
      })
    )
    .mutation(async ({ input }) => {
      const { comment, blogUrl, author } = input;
      let commentInDb: Comment | undefined;
      const blog = await prisma?.post.findFirst({
        where: { url: blogUrl },
      });
      try {
        commentInDb = await prisma?.comment.create({
          data: {
            author: author ?? '',
            text: comment ?? '',
            post: {
              connectOrCreate: {
                create: {
                  url: blogUrl ?? '',
                },
                where: {
                  id: blog?.id ?? 0,
                },
              },
            },
          },
        });
      } catch (err) {
        console.error('Error saving comment', err);
        return { status: 'error', error: 'Error saving comment' };
      }
      if (!commentInDb) {
        return { status: 'error', error: 'Error saving comment' };
      }
      return { status: 'success' };
    }),
  deleteCommentForBlog: adminProcedure
    .input(z.object({ id: z.number() }))
    .mutation(async ({ input }) => {
      let deleteComment;
      try {
        deleteComment = await prisma?.comment.delete({
          where: {
            id: input.id,
          },
        });
      } catch (e) {
        return { status: 'error', error: 'Error deleting comment' };
      }
      if (!deleteComment) {
        return { status: 'error', error: 'Error deleting comment' };
      }

      return { status: 'success' };
    }),
  sendContactForm: publicProcedure
    .input(
      z.object({ email: z.string().nullable(), message: z.string().nullable() })
    )
    .mutation(async ({ input }) => {
      if (input.email && input.message) {
        await fetch(import.meta.env.FORMSPREE_URL!, {
          method: 'post',
          headers: {
            Accept: 'application/json',
          },
          body: JSON.stringify(input),
        }).catch(e => {
          console.error(e);
          return { status: 'error' };
        });
        return { status: 'success' };
      }
      return { status: 'missingdata' };
    }),
});

export type AppRouter = typeof appRouter;

I created a separate procedure adminProcedure, on which I applied the middleware. This will make sure that any route on this procedure can only be called if there is a logged in user.
After creating the procedures, I declare the different routes. Check the deleteCommentForBlog route which is the route behind the adminProcedure.

Setting up the API Route in Astro

// /src/pages/api/trpc/[trpc].ts

import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import type { APIRoute } from 'astro';
import { createContext } from '../../../server/context';
import { appRouter } from '../../../server/router';

export const all: APIRoute = ({ request }) => {
  return fetchRequestHandler({
    endpoint: '/api/trpc',
    req: request,
    router: appRouter,
    createContext,
  });
};

I'll be using the fetch adapter to handle the requests from the client side to the TRPC router.
This is possible because Astro uses the built-in Web Platform APIs Response & Request.
We link the router and the context, and we're ready to set up the TRPC client.

Setting up the TRPC client

Because I want to use TRPC both in client side scripts on Astro pages, as well as on islands.
My islands are created using React, to I'll set up the TRPC React client too.

// /src/client/index.ts

import { createTRPCReact } from '@trpc/react-query';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server/router';

const trpcReact = createTRPCReact<AppRouter>();

const trpcAstro = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/api/trpc',
    }),
  ],
});

export { trpcReact, trpcAstro };

Using the TRPC client in .astro files

I'll be using the Astro TRPC client to communicate from my <script> tag on the client to the TRPC routes.

// /src/pages/context/index.astro export const prerender = true; import Layout
from '../../layouts/Layout.astro';

<form id="contactForm">
  <label class="flex flex-col gap-2 mb-4" for="email">
    Your e-mail
    <input
      class="py-2 px-4 bg-white border-secondary border-2 rounded-lg"
      id="email"
      type="email"
      name="email"
      placeholder="info@example.com"
      required
    />
  </label>
  <label class="flex flex-col gap-2" for="message">
    Your message
    <textarea
      class="py-2 px-4 bg-white border-secondary border-2 rounded-lg"
      rows={3}
      id="message"
      name="message"
      placeholder="Hey, I would like to get in touch with you"
      required></textarea>
  </label>

  <button
    class="px-8 mt-4 py-4 bg-secondary text-white rounded-lg lg:hover:scale-[1.04] transition-transform disabled:opacity-50"
    type="submit"
    id="submitBtn"
  >
    Submit
  </button>
  <div id="missingData" class="text-red-500 font-bold hidden">
    Something went from while processing the contact form. Try again later.
  </div>
  <div id="error" class="text-red-500 font-bold hidden">
    Something went from while processing the contact form. Try again later.
  </div>
</form>
<script>
  import { trpcAstro } from '../../client';
  const form = document.getElementById('contactForm') as HTMLFormElement | null;
  form?.addEventListener('submit', async e => {
    e.preventDefault();
    const formData = new FormData(form);
    const result = await trpcAstro.sendContactForm.mutate({
      message: formData.get('message') as string | null,
      email: formData.get('email') as string | null,
    });
    if (result.status === 'success') {
      window.location.href = '/contact/thanks';
    }
  });
</script>

Because I'm using the TRPC client, I get autocompletion on the code, and I know exactly what is expected as input for the route and what will be returned!

Using the TRPC client in React islands

I decided to work with @tanstack/react-query to facilitate easier fetching/mutating in my React code.
Because of this, I needed to instantiate the TRPC client and a QueryClient for react-query.
This I did in a wrapper component, which wraps the actual component which will be doing the calls to the TRPC routes.

// /src/components/CommentOverviewWrapper.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { CommentOverview } from './CommentOverview';
import { trpcReact } from '../client';
import { httpBatchLink } from '@trpc/client';
import { useState } from 'react';

const CommentsOverviewWrapper = () => {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpcReact.createClient({
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/api/trpc',
        }),
      ],
    })
  );
  return (
    <trpcReact.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <CommentOverview />
      </QueryClientProvider>
    </trpcReact.Provider>
  );
};
export default CommentsOverviewWrapper;

The actual component ended up looking like this:

// /src/components/CommentOverview.tsx

import type { Comment } from '@prisma/client';
import { trpcReact } from '../client';

const CommentOverview = () => {
  const upToDateCommentsQuery = trpcReact.getAllComments.useQuery();
  const { mutate: deleteComment } = trpcReact.deleteCommentForBlog.useMutation({
    onError: () => {
      console.error('Error deleting comment');
    },
    onSuccess: res => {
      if (res.status === 'error') {
        console.log('Succesfully deleted comment');
      }
    },
    onSettled: () => {
      upToDateCommentsQuery.refetch();
    },
  });

  const commentsReduced = upToDateCommentsQuery?.data?.reduce<{
    [key: string]: typeof upToDateCommentsQuery.data;
  }>(
    (acc, cur) => ({
      ...acc,
      [cur.post.url]: [...(acc[cur.post.url] || []), cur],
    }),
    {}
  );
  return (
    <div className="grid lg:grid-cols-2 gap-6">
      {commentsReduced
        ? Object.entries(commentsReduced).map(([key, val]) => {
            return (
              <div key={key}>
                <h2 className="font-bold mb-4 text-xl">{key}</h2>
                <ul className="flex flex-col gap-y-2">
                  {val.map(comment => (
                    <div className="flex gap-x-2" key={comment.id}>
                      <button
                        type="button"
                        onClick={() => {
                          deleteComment({ id: comment.id });
                        }}
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          strokeWidth={1.5}
                          stroke="currentColor"
                          className="min-w-[1.5rem] h-6 text-red-600"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                          />
                        </svg>
                      </button>
                      <li>
                        <span className="font-bold">{comment.author}</span> :{' '}
                        {comment.text}
                      </li>
                    </div>
                  ))}
                </ul>
              </div>
            );
          })
        : null}
    </div>
  );
};

export default CommentOverview;

So fetching all comments is as easy as adding const upToDateCommentQuery = trpcReact.getAllComments.useQuery().
Deleting a comment is done by adding const { mutate: deleteComment } = trpcReact.deleteCommentForBlog.useMutation and then in my <button>'s click handler calling deleteComment({ id: comment.id });.

Hope this was helpful!
Code can be found on my GitHub.

Setting up authentication in Astro with Prisma and Planetscale

Thomas Ledoux — Sun, 26 Feb 2023 16:22:26 +0000

I've been wanting to add authentication to my personal website for a while now to see how it works in Astro.
With Prisma and PlanetScale already running for comments on my blogs, I decided to store my account information in PlanetScale.
Because it's just used for my own account, and I'm not storing any other sensitive information in my database, I decided to store the credentials in plain text for now.
I changed my Prisma schema to make this possible:

// schema.prisma

model Account {
  id Int @id @default(autoincrement())
  username String @unique
  password String
}

Once the model is updated in the code, running npx prisma db push propagates the changes to PlanetScale, so the schema is updated in the actual database.

I used an existing package called @astro-auth to handle all the authentication on my site.
For this to work, I needed to add 2 environment variables to my application: ASTROAUTH_URL (the URL my site is hosted on) and ASTROAUTH_SECRET (a self chosen secret key).

Because I stored the credentials in PlanetScale, I needed to use the CredentialProvider to enable logging in with username and password.
There are many other providers available on @astro-auth, go check out the package if you're interested.
The code needed to set this up with @astro-auth looks like this:

// /pages/api/auth/[...astroauth].ts

import AstroAuth from '@astro-auth/core';
import { CredentialProvider } from '@astro-auth/providers';
import { prisma } from '../../../lib/prisma';

export const all = AstroAuth({
  authProviders: [
    CredentialProvider({
      authorize: async properties => {
        const account = await prisma?.account.findFirst({
          where: {
            username: properties.username,
            AND: {
              password: properties.password,
            },
          },
          select: {
            id: true,
          },
        });
        if (account?.id) {
          return properties.username;
        }
        return null;
      },
    }),
  ],
});

Creating a login page was very easy.
I just created a form, calling the signIn() method from @astro-auth on submit, and BOOM: logged in!
The code for the login page:

// /pages/login.astro

<html>
  <head>
    <title>Login</title>
    <script>
      import { signIn } from '@astro-auth/client';

      document.addEventListener('DOMContentLoaded', () => {
        document.querySelector('form')?.addEventListener('submit', async e => {
          e.preventDefault();
          const form = e.target;
          if (form) {
            const formData = new FormData(form as HTMLFormElement);
            const data = Object.fromEntries(formData);
            await signIn({
              provider: 'credential',
              login: data,
            });
            window.location.href = '/';
          }
        });
      });
    </script>
  </head>
  <body>
    <form>
      <label for="username">Name</label>
      <input type="text" name="username" />

      <label for="password">Password</label>
      <input type="password" name="password" />

      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

After submitting the form, the user's signed in and is redirected to the homepage.
Protecting a page with authentication is easy, just checking the logged in user with the getUser() function from @astro-auth.
Here's an example of a page where I used this check:

// /pages/comment-overview.astro

---
import { getUser } from '@astro-auth/core';
import Layout from '../layouts/Layout.astro';
import { prisma } from '../lib/prisma';
import CommentsOverviewWrapper from '../components/CommentOverviewWrapper';
const user = getUser({ client: Astro });
if (!user) {
  return Astro.redirect('/', 307);
}
const commentsWithPost = await prisma?.comment.findMany({
  include: {
    post: {
      select: {
        url: true,
      },
    },
  },
});
---

<Layout
  description="Overview of comments"
  title="Thomas Ledoux | Comment overview"
>
  <CommentsOverviewWrapper commentsWithPost={commentsWithPost} client:load />
</Layout>

If the user is not logged in, the user will be redirected to the homepage with a 307 status code.
I also have an API route to delete comments on my blog posts, which I want to fence off so only authenticated user can use this API.
It's possible to use the getUser() function from @astro-auth for this too, but this time we're going to pass the request instead of the Astro object.
Example of using this code:

// /pages/api/comments.ts

export const del: APIRoute = async ({ request }) => {
  const user = getUser({ server: request });
  if (user) {
    const body = await request.json();
    const deleteComment = await prisma?.comment.delete({
      where: {
        id: body.id,
      },
    });
    return new Response(
      JSON.stringify({
        message: `Comment with id ${deleteComment?.id} deleted`,
      }),
      { status: 200 }
    );
  }
  return new Response(null, { status: 403 });
};

So when the user is not authenticated, a 403 response will be returned.

Hope this was helpful!
Source code can be found on my Github as always.

Automatically generating pages for each tag used in Astro with MDX

Thomas Ledoux — Mon, 06 Feb 2023 13:48:09 +0000

With the launch of Astro 2.0, the Content Collections API became available.
This makes it very easy to query your Markdown/MDX in a type safe matter (and much more, make sure to read the blogpost I linked above).
Setting it up was really easy for my blog, I just had to move my blogs from /pages/blog to /content/blog and add a /content/config.ts file.
The /content folder is a reserved folder to be used for Content Collections.
In the /content/config.ts file you define the schema(s) for the collections you want to create.
At the moment I just have 1 collections, namely my blog.
So I created my schema as follows:

import { z, defineCollection } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    layout: z.string(),
    tags: z.array(z.string()),
    date: z.string(),
    image: z.string().optional(),
  }),
});

export const collections = {
  blog,
};

As you can see, tags are a required property for all of my blogs, luckily I added tags to every blogpost from the start.
In my MDX the tags are defined like this at the top of the file:

---
tags: ['javascript', 'edge', 'vercel'];
---

Now I have the blog collection defined in my config, I can start working with the data in my .astro files.
I want to create a separate page for every unique tag which is used in my blogs.
To make this possible, I simply added a file /pages/blog/tags/[...slug].astro (this is a dynamic route).
In this file, I want to fetch all the blogs from my collection, find the unique tags, and generate a URL for each one of them.
The getStaticPaths() function will return the URLs I want to have prerendered during build time (hence the export const prerender = true; line).

---
export const prerender = true;
const { slug } = Astro.params;
import { getCollection } from 'astro:content';
const blogs = await getCollection('blog');
const tags = blogs
  .map(blog => blog.data.tags)
  .flat()
  .reduce<{ [key: string]: number }>(function (result, c) {
    var count = result[c] || 0;
    result[c] = count + 1;
    return result;
  }, {});
export async function getStaticPaths() {
  const blogs = await getCollection('blog');
  return [...new Set(blogs.map(blog => blog.data.tags).flat())].map(tag => ({
    params: { slug: tag },
  }));
}
if (!slug) {
  return Astro.redirect('/404');
}
const allBlogPostsWithTag = await getCollection('blog', blog =>
  blog.data.tags.some(tag => tag === slug)
);
if (allBlogPostsWithTag.length === 0) {
  return Astro.redirect('/404');
}
---

I used a .reduce() function to calculate the amount of blogs I have available per tag, so I can display this at the top of my tag pages.
The API provided by Content Collections is the getCollection() function, this allows me to fetch all the blogs in my blogs collection. As you can see it's also possible to pass a filter function to this function, which I used to only fetch the blogs which contain the tag for which the current page is generated on line 22.
The actual rendering is simple, I can now use the allBlogPostsWithTag variable and render the blog posts.
Since the slug matches the tag this page is generated for, I can just use this slug in my title/description/..

<Layout
  title={`The Thomas Ledoux blog | ${slug}`}
  description={`All blogs about ${slug}`}
>
  <section>
    <h1 class="text-center text-2xl font-bold mb-6">
      All blogs about {slug}
    </h1>
    <Tags tags={tags} slug={slug} />
    <div
      class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 items-center auto-rows-min mt-4"
    >
      {
        allBlogPostsWithTag.map(async (post, i) => {
          const { remarkPluginFrontmatter } = await post.render();

          return (
            <PostPreview
              minutesRead={remarkPluginFrontmatter?.minutesRead}
              post={post}
              index={i}
            />
          );
        })
      }
    </div>
  </section>
</Layout>

The result of this tag page will look like this:

I must say I really enjoy working with Astro for writing Markdown/MDX, especially when they make it this easy!

Source code can be found on Github.

An example of a tag page can be found here.

Adding Vercel og:image generation to Astro project with Edge functions

Thomas Ledoux — Sat, 10 Dec 2022 14:44:39 +0000

In a previous blog post, I mentioned that I was using a Next.js project to run the @vercel/og logic to generate my og:images for my blog posts.
This is now no longer needed, I figured out how to run this in my Astro blog project (this site ;-)).

A few changes were needed for this.
The original code in my Next.js project looked like this:

// /pages/api/og.jsx

import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'experimental-edge',
};

const font = fetch(new URL('../../assets/Inter.ttf', import.meta.url)).then(
  res => res.arrayBuffer()
);

export default async function handler(req) {
  const fontData = await font;

  try {
    const { searchParams } = new URL(req.url);

    // ?title=<title>
    const hasTitle = searchParams.has('title');
    const title = hasTitle
      ? searchParams.get('title')?.slice(0, 200)
      : 'My default title';

    return new ImageResponse(
      (
        <div
          style={{
            background: 'white',
            width: '100%',
            height: '100%',
            display: 'flex',
            textAlign: 'center',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
            fontFamily: 'Inter',
            backgroundImage:
              'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
            backgroundSize: '100px 100px',
          }}
        >
          <div
            style={{
              width: '80%',
              display: 'flex',
              flexDirection: 'column',
              textAlign: 'center',
              alignItems: 'center',
            }}
          >
            <p style={{ fontSize: 32 }}>Thomas Ledoux&apos;s blog</p>
            <p style={{ fontSize: 64 }}>{title}</p>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 600,
        fonts: [
          {
            name: 'Inter',
            data: fontData,
            style: 'normal',
          },
        ],
      }
    );
  } catch (e) {
    console.log(`${e.message}`);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

As you can see, JSX code is being used to build up the output for my og:image.
Using JSX code inside an serverless/edge API function only works inside the /api folder inside Next.js projects deployed to Vercel.
On other frameworks deployed to Vercel (like Astro), this is not possible.
When attempting this, I got error messages like the following: vc-file-system:api/og.js:25:8: ERROR: The JSX syntax extension is not currently enabled.

So I had to find a way around using JSX inside the API function.
Luckily, the ImageResponse function also allows for "React-elements-like" objects to be used.
Using the example provided on the link above, I created the following Edge API Route inside my Astro project:

// /api/og.js

import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'experimental-edge',
};

const font = fetch(new URL('../assets/Inter.ttf', import.meta.url)).then(res =>
  res.arrayBuffer()
);

export default async function handler(req) {
  const fontData = await font;

  try {
    const { searchParams } = new URL(req.url);

    // ?title=<title>
    const hasTitle = searchParams.has('title');
    const title = hasTitle
      ? searchParams.get('title')?.slice(0, 200)
      : 'My default title';

    const html = {
      type: 'div',
      props: {
        children: [
          {
            type: 'div',
            props: {
              style: {
                width: '80%',
                display: 'flex',
                flexDirection: 'column',
                textAlign: 'center',
                alignItems: 'center',
              },
              children: [
                {
                  type: 'p',
                  props: {
                    style: { fontSize: 32 },
                    children: 'Blog by Thomas Ledoux',
                  },
                },
                {
                  type: 'p',
                  props: {
                    style: { fontSize: 64 },
                    children: title,
                  },
                },
              ],
            },
          },
        ],
        style: {
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          fontFamily: 'Inter',
          backgroundImage:
            'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
          backgroundSize: '100px 100px',
        },
      },
    };

    return new ImageResponse(html, {
      width: 1200,
      height: 600,
      fonts: [
        {
          name: 'Inter',
          data: fontData,
          style: 'normal',
        },
      ],
    });
  } catch (e) {
    console.log(`${e.message}`);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

Now, I want the API route to be picked up by Vercel.
By default the Astro build command will not pick up these API routes in the root directory (since they are part of the (vercel build command)[https://github.com/withastro/astro/issues/5451#issuecomment-1339720682]).
So to get this working in my use case, I switched to using the (Vercel CLI)[https://vercel.com/docs/cli] to build and deploy my project.
After installing the cli globally with npm i -g vercel, I can run vercel build to build my project locally, and run vercel deploy --prebuilt afterwards to deploy the locally created build directly to Vercel.
I also opted to disable the automatic deployments on pushes to my git repository, since I'm doing the deployments through the CLI now.
Disabling the automatic deployments was done by adding a vercel.json file in the root directory, containing the following:

{
  "git": {
    "deploymentEnabled": false
  }
}

Hopefully this helps other people wanting to use serverless/edge API functions in their Astro projects.
Source code can be found here.