Writing — Arne Bahlo

Static OG (Open Graph) Images in Astro

Fri, 07 Apr 2023 00:00:00 GMT

Have you every shared a link to a friend and wondered where the image preview came from? That's the Open Graph Protocol, a set of HTML <meta> extensions that can enrich a link, originally invented at Facebook. This blog post describes how you can generate these images on build time in the Astro web framework.

Most of the guides out there (including Vercel's official OG Image Generation) use a function to generate the OG image dynamically. While there's nothing wrong with that, I really wanted mine to be statically generated on build-time; it's faster, cheaper and cooler.

Build your image

The first thing to do is figure out what your OG image should look like. We're going to use Vercel's Satori, a JavaScript library which can render a HTML tree as SVG. Vercel also has a great OG Image Playground, where you can play around and quickly get results.

Set the size to 1200×630px as that's what Facebook recommends in their guidelines. Use Flexbox liberally and enable debug mode when figuring out the layout. A Complete Guide to Flexbox is a great resource to have at hand.

Create an Astro endpoint

Got a nice image built in the playground? Then let's get started. Install Satori to generate the SVG and sharp to then convert it to PNG:

$ npm install satori sharp

Then create an endpoint, e.g. pages/og-image.png.ts with the following code:

import fs from "fs/promises";
import satori from "satori";
import sharp from "sharp";
import type { APIRoute } from 'astro';

export const get: APIRoute = async function get({ params, request }) {
  const robotoData = await fs.readFile("./public/fonts/roboto/Roboto-Regular.ttf");

  const svg = await satori(
    { 
      type: "h1", 
      props: { 
        children: "Hello world", 
        style: { 
          fontWeight: "bold" 
        }
      }
    },
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: "Roboto",
          data: robotoData,
          weight: "normal",
          style: "normal",
        },
      ],
    }
  );

  const png = await sharp(Buffer.from(svg)).png().toBuffer();

  return new Response(png, {
    headers: {
      "Content-Type": "image/png",
    },
  });
}

One drawback that you can already see in the code above is that Astro does not support TSX endpoints, so we'll need to use React-elements-like objects.

You'll also always need to provide a font because it'll be embedded. I used Roboto in the example above, Inter or Open Sans are other solid free sans fonts (choose WOFF or TTF/OTF, WOFF2 is not supported).

Run astro dev and navigate to the endpoint (in our example :3000/og-image.png) to see the generated image.

Generate for each item in a collection

Once you have an image that you like in a function, you can create them in batch, for whole collections. Let's assume you have a blog collection and your blog posts live at pages/blog/:slug/index.astro. Create a pages/blog/:slug/og-image.png.ts with your API route and the getStaticPaths function exported:

import { getCollection, getEntryBySlug } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: post,
  }));
}

export const get: APIRoute = async function get({ params, request }) {
  // ...
}

If you now run astro build, you'll see that it statically generates an OG image for every blog post you have on your site.

Handling images

Images (like fonts) need to be embedded into the SVG. The easiest way I found is using data urls by first reading the file to a Base64 string like this:

const myImageBase64 = (await fs.readFile("./public/my-image.png")).toString("base64");

And then setting it as the backgroundImage or src property in Satori:

{
  type: "div",
  props: {
    style: {
      backgroundImage: `url('data:image/png;base64,${myImageBase64}')`,
    }
  }
}

Be aware that Satori does not support backgroundSize: cover, so if you have that use case, you'll need to build it yourself with image-size and some math.

Set OG tags in HTML

Now the only thing left to do is link to your OG images in your <head>. There are two properties you'll want to use for images: og:image and twitter:image.

<meta property="og:image" content="/blog/og-image.png" />
<meta property="twitter:image" content="/blog/og-image.png" />

Use dynamic paths on collections to automatically use the correct image. Check out the Open Graph protocol for more Open Graph meta extensions.

Further links & conclusion

If you want to see real, working code (I know I often do), check out the endpoint that powers the OG images of my book reviews: pages/books/[...slug]/og-image.png.ts. This is what it looks like: OG image of a book review.

Did I miss anything? Can this workflow be further improved? Drop me an email or @ me in the Fediverse, I'd love to hear from you.

You’re Using Email Wrong

Sun, 06 Mar 2022 00:00:00 GMT

You probably don't like email, not a lot of people do. That's because you're using it wrong.

Chances are that if you look at your inbox, it's full of unsolicited marketing emails, log-in notifications or spam. Or you're doing inbox zero and all that trash lives in your archive.

As everything else, email is subject (hah) to entropy. If you're not careful, chaos will take over and your email inbox will look like the screenshot above.

A different concept

As controversial as the company behind HEY is, the concept that they introduced with their mail app has fundamentally changed how I think about email. I adapted the part that resonated with me to my Fastmail account like this:

Inbox

This is where all emails sent by humans end up. That's it.

Papertrail

Notifications, invoices, everything that you don't want to delete but are not really interested in. This folder has about 1.6k unread emails right now. They're not meant to be read, but if I need to look something up, I know where to look.

Newsfeed

I'm subscribed to over 20 newsletters and all of them end up in here. If I have time, I'll read the newsletters and add the articles I want to read to Instapaper.

By the way, if you're looking for something to add to your newsfeed, check out Arne's Weekly.

The Setup

I'm using Fastmail with a custom domain and have aliases with rules for the different destinations, for example papertrail@example.org or newsfeed@example.org.

This way, if I sign up for a new service or subscribe to a newsletter, instead of having to adapt existing rules, I can use the proper email address and everything will go where it should.

This is not Fastmail specific, you can do the same with most providers. For example, if you have hikingfan@gmail.com, you could set a rule for hikingfan+papertrail@gmail.com and one for hikingfan+newsfeed@gmail.com and use those email addresses when signing up.

The human factor

If I look at my inbox, it's a joy. Feedback to blog posts, articles and personal messages from people I care about. Sticking with this strategy made email about humans, not about machines.

I encourage you to try it!

If you have a different concept, feedback or ideas, please let me know.

Update (Mar 08, 2022): Multiple people have responded with their systems and questions (which I love, please keep doing that), some missed a way to track if a service "lost" their email address. If you use an alias, e.g. papertrail@example.org, you can use the + operator like this: papertrail+twitter@example.org. The sorting rule will be a bit more complicated, but you won't have to adapt it every time you sign up for something.

Plex on NixOS

Tue, 22 Feb 2022 00:00:00 GMT

A few weeks ago, the hard drive (yes, I know) in my home lab died. It was a sad moment, especially because I ran Plex on it and rely on that for my music and audiobook needs.

The upside is that it gave me the opportunity to rethink my Plex setup. Hosting it at home is great for storage costs and control, but it's hard to share with friends or access on the go, especially with a NATed IPv4, so I decided to move to the cloud.

Choosing a server and storage method

I chose Hetzner Cloud because I like their service, and they use green energy.

The biggest challenge was storage. Hetzner charges around €50/month for a 1 TB volume (others have comparable pricing).

But then my friend Eric told me about rclone and its ability to mount blob storage (which is cheap) as a virtual disk. That means Plex sees all files as if they were actually there and if it tries to read a file, it's downloaded on demand if it's not cached already.

Armed with this knowledge, I started setting up the server.

Setting up NixOS

NixOS is a declarative and reproducible operating system. You have a configuration file in /etc/nixos/configuration.nix that defines your installed applications, configuration and system setup. And if you mess up, you can always roll back.

The first I did was creating a server on Hetzner with any distribution (I went width a CPX11 and Ubuntu) and then following the instructions on the install scripts for Hetzner Cloud.

If you follow along, make sure to choose a server with at least 40 GB of disk space.

After booting into NixOS, I changed the root password by running passwd and upgraded NixOS (see Upgrading NixOS). If you want to further secure your NixOS installation, Christine Dodrill has a great guide called Paranoid NixOS Setup.

Setting up storage

I decided to go with Backblaze B2 as I have used it before, it's cheaper than S3, and I don't support Amazon. If you want to use something else, rclone supports a lot of providers.

After creating a bucket for the media, I created an Application Key and made note of the keyID and applicationKey.

Then I added the following lines to my Nix configuration at /etc/nixos/configuration.nix to install rclone and create a /etc/rclone/rclone.conf for the bucket:

environment.systemPackages = [ pkgs.rclone ];

environment.etc = {
  "rclone/rclone.conf" = {
    text = ''
      [b2]
      type = b2
      account = <keyID>
      key = <applicationKey>
      hard_delete = true
      versions = false
    '';
    mode = "0644";
  };
};

If you follow along, make sure to replace <keyID> and <applicationKey>.

By the way, NixOS comes with nano preinstalled, so if you want a real editor, you can get it with the following command:

$ nix-shell -p vim

For the disk mount, I created a Systemd service that mounts the bucket on start and automatically starts on boot.

systemd.services.plex_media = {
  enable = true;
  description = "Mount media dir";
  wantedBy = ["multi-user.target"];
  serviceConfig = {
    ExecStartPre = "/run/current-system/sw/bin/mkdir -p /mnt/media";
    ExecStart = ''
      ${pkgs.rclone}/bin/rclone mount 'b2:<bucket name>/' /mnt/media \
        --config=/etc/rclone/rclone.conf \
        --allow-other \
        --allow-non-empty \
        --log-level=INFO \
        --buffer-size=50M \
        --drive-acknowledge-abuse=true \
        --no-modtime \
        --vfs-cache-mode full \
        --vfs-cache-max-size 20G \
        --vfs-read-chunk-size=32M \
        --vfs-read-chunk-size-limit=256M
    '';
    ExecStop = "/run/wrappers/bin/fusermount -u /mnt/media";
    Type = "notify";
    Restart = "always";
    RestartSec = "10s";
    Environment = ["PATH=${pkgs.fuse}/bin:$PATH"];
  };
};

If you follow along, make sure to replace <bucket name>.

The --vfs-* arguments configure the virtual file system. I only have 40 GB local disk space, so I set the cache size to 20 GB (using --vfs-cache-max-size).

I then ran nixos-rebuild switch to apply the configuration, uploaded some data to the bucket and listed /mnt/media to make sure everything works.

Configuring Plex

NixOS has a predefined service for Plex, which I used like this:

nixpkgs.config.allowUnfree = true; # Plex is unfree

services.plex = {
  enable = true;
  dataDir = "/var/lib/plex";
  openFirewall = true;
  user = "plex";
  group = "plex";
};

With this configuration, Nix will open the correct ports in the firewall, create a user called plex with a group also called plex and install the Plex Media Server with the configuration in /var/lib/plex.

Adding an Audiobooks Plugin

I wanted to use the Audiobooks.bundle metadata agent for better matching, so I added this to the let-section at the top of plex.nix:

let
  audiobooksPlugin = pkgs.stdenv.mkDerivation {
    name = "Audiobooks.bundle";
    src = pkgs.fetchurl {
      url = https://github.com/macr0dev/Audiobooks.bundle/archive/9b1de6b66cd8fe11c7d27623d8579f43df9f8b86.zip;
      sha256 = "539492e3b06fca2ceb5f0cb6c5e47462d38019317b242f6f74d55c3b2d5f6e1d";
    };
    buildInputs = [ pkgs.unzip ];
    installPhase = "mkdir -p $out; cp -R * $out/";
  };
in
  # ...

That fetches the commit 9b1de6b of the audiobooks plugin and makes sure that the SHA256 is correct.

Then I told Plex to use this plugin like this:

services.plex.managePlugins = true;
services.plex.extraPlugins = [audiobooksPlugin];

If you're following along and get an error which says services.plex.managePlugins no longer has an effect, remove that line.

At this point, after running nixos-rebuild switch again, I was able to access the Plex interface at https://<domain or ip>:32400.

Plex needs an initial configuration, but only allows it if it's coming from a local connection. One way to do this is an SSH tunnel, which I opened like this:

$ ssh -L 32400:localhost:32400 user@domain-or-ip

Then I opened http://localhost:32400/web in my local browser and set up Plex.

Configuring Nginx

I wanted a nice domain with HTTPS on 443 (instead of HTTP on port 32400), so I set up Nginx with Let's Encrypt next.

The first thing I did was setting openFirewall to false in the Plex configuration. Then I allowed port 80 and 443 for HTTP and HTTPS and all the Plex ports except for 32400 as we want to proxy the web interface through Nginx.

services.plex = {
  openFirewall = false;
  # ...
};

networking.firewall = {
  allowedTCPPorts = [ 3005 8324 32469 80 443 ];
  allowedUDPPorts = [ 1900 5353 32410 32412 32413 32414 ];
};

Then I configured ACME:

security.acme.acceptTerms = true;
security.acme.defaults.email = "<your email>";

The default provider is Let's Encrypt, you can find their terms of service here: Policy and Legal Repository.

Now it was time to add the Nginx service. I used recommended settings and only PFS-enabled ciphers with AES256. As this proxies Plex requests, I forwarded some headers as well. Here's the code:

services.nginx = {
  enable = true;

  # Recommended settings
  recommendedGzipSettings = true;
  recommendedOptimisation = true;
  recommendedProxySettings = true;
  recommendedTlsSettings = true;

  # Only allow PFS-enabled ciphers with AES256
  sslCiphers = "AES256+EECDH:AES256+EDH:!aNULL";

  virtualHosts = {
    "<your domain>" = {
      forceSSL = true;
      enableACME = true;
      extraConfig = ''
        # Some players don't reopen a socket and playback stops totally instead of resuming after an extended pause
        send_timeout 100m;
        # Plex headers
        proxy_set_header X-Plex-Client-Identifier $http_x_plex_client_identifier;
        proxy_set_header X-Plex-Device $http_x_plex_device;
        proxy_set_header X-Plex-Device-Name $http_x_plex_device_name;
        proxy_set_header X-Plex-Platform $http_x_plex_platform;
        proxy_set_header X-Plex-Platform-Version $http_x_plex_platform_version;
        proxy_set_header X-Plex-Product $http_x_plex_product;
        proxy_set_header X-Plex-Token $http_x_plex_token;
        proxy_set_header X-Plex-Version $http_x_plex_version;
        proxy_set_header X-Plex-Nocache $http_x_plex_nocache;
        proxy_set_header X-Plex-Provides $http_x_plex_provides;
        proxy_set_header X-Plex-Device-Vendor $http_x_plex_device_vendor;
        proxy_set_header X-Plex-Model $http_x_plex_model;
        # Buffering off send to the client as soon as the data is received from Plex.
        proxy_redirect off;
        proxy_buffering off;
      '';
      locations."/" = {
        proxyPass = "http://localhost:32400";
        proxyWebsockets = true;
      };
    };
  };
};

If you're following along, make sure to replace <your domain>.

To secure things even further, I set some headers for every request:

services.nginx.commonHttpConfig = ''
  # Add HSTS header with preloading to HTTPS requests.
  # Adding this header to HTTP requests is discouraged
  map $scheme $hsts_header {
      https   "max-age=31536000; includeSubdomains; preload";
  }
  add_header Strict-Transport-Security $hsts_header;
  # Enable CSP for your services.
  #add_header Content-Security-Policy "script-src 'self'; object-src 'none'; base-uri 'none';" always;
  # Minimize information leaked to other domains
  add_header 'Referrer-Policy' 'origin-when-cross-origin';
  # Disable embedding as a frame
  add_header X-Frame-Options DENY;
  # Prevent injection of code in other mime types (XSS Attacks)
  add_header X-Content-Type-Options nosniff;
  # Enable XSS protection of the browser.
  # May be unnecessary when CSP is configured properly (see above)
  add_header X-XSS-Protection "1; mode=block";
'';

Finally, I ran nixos-rebuild switch one last time to apply the configuration. Then I opened https://my-domain in a browser and started creating Plex libraries.

How much does it cost?

The CPX11 costs €4,75/month with backups enabled, B2 costs $0.005/GB/month storage + $0.01/GB downloaded. Storage pricing depends heavily on the amount of media stored and the amount of media downloaded. I pay around €10/month for my setup.

Wrapping up

All that's left to do now is further configure NixOS to set a hostname, timezone, installed packages like htop and enabling Automatic Upgrades.

In case that's useful for you, here is the configuration.nix from when I tested this blog post.

If you discover an issue or have a question, please don't hesitate to let me know, I'm more than happy to help!