DEV Community: Tömő Viktor

Best Way to Open URLs in Your Terminal via Tmux

Tömő Viktor — Sun, 07 Jul 2024 19:18:56 +0000

Efficently open URLs by only using the keyboard. Let me show you the script I made.

Motivation

I have been using tmux for a while now. It was really worth it, especially after I started using neovim. One thing was really missing though compared to my previous setup and that was opening URLs. I always used my mouse to do that, but now I couldn't even do that because I am using the good old xterm as a terminal which doesn't have a built in feature like that.

I looked at some xterm solutions for this problem, but I knew I had to do something in tmux because it has lots of commands and such. Then I found tmux-urlview, so I was sure I can make something cool with tmux.

The script

The full script can be found on my GitHub in my .dotfiles repository's scripts directory named tmux-select-url.

First I had to understand the basics of the upper mentioned tmux-urlview. It used a basic logic: save the current tmux pane's text content (buffer) and then parse out the URLs and show a choosing menu by which the URL will be opened. So I implemented the same logic.

Starting with saving the current buffer:

tmux capture-pane
tmux save-buffer "/tmp/tmuxsave"
tmux delete-buffer

Now comes some basic Linux command knowledge: get the URLs out of the file (/tmp/tmuxsave). That means we have to use some regex, but thankfully there are plenty out there on the internet, so we don't have to write our own. Just so duplicates are removed I also used uniq.

urls=$(grep -Eoi "(http|https)://[a-zA-Z0-9+./?=_%:-]+" /tmp/$buffer_file_name | uniq)

We have the URLs in a variable. I had to figure out a cool way to select from them. It had to be quick and easy. My first thought was to use fzf because I already used it many times with tmux, but then I also stumbled up on tmux's display-menu which you can see in this post's thumbnail.

I decided to use both. The menu is good to display few links and it's really nice because it also provides a way to assign keybinds to items. In the menu I also made it so the http or https is cut off so it is better for my eyes. For more than 5 items I decided to use fzf opened in a new pane.

url_count=$(echo "$urls" | wc -l)
if [ $url_count -gt 5 ]; then
  tmux neww -n "url-select" "printf '%s\n' '$urls' | fzf --exit-0 --print-query | xargs -I {} sh -c 'xdg-open {} > /dev/null 2>&1 && tmux display-message \"#[bold]$name: Opened {}#[bold]\"'"
else
  tmux_menu="tmux display-menu -t 1 -T 'url-select'"
  index=1
  for url in ${(f)urls}; do
    clean_url=${url#*//}

    tmux_menu="$tmux_menu '$clean_url' $index 'run-shell \"xdg-open $url > /dev/null 2>&1; tmux display-message '\''#[bold]$name: Opened $url#[bold]'\''\"'"

    ((index++))
    if [ $index -gt 9 ]; then
      break
    fi
  done

  eval $tmux_menu
fi

The code upper isn't hard to understand, it's just dense. If you don't understand something I recommend you to read the manuals via man.

I added some useful things to the script too. For example if there are no URLs don't show anything or if only one is available just open it right away.

By default capture-buffer only captures the currently visible parts of the pane, but by setting S to - the whole history is saved. So in the final version of the script I added that if "full" is passed as an argument then it will capture the full history. The full script can be found on my GitHub in my .dotfiles repository's scripts directory named tmux-select-url. Feel free to use my script.

To make it easily accessable I binded it to o and O in my .tmux.conf (NOTE: I also added executable permission to the script and put it in my $PATH):

bind-key o run-shell -b "tmux-select-url"
bind-key O run-shell -b "tmux-select-url full"

I hope that this post encourages you to make your own tmux related scripts.

If you are interested in more of this type of content then I suggest you to read posts from my series about improving my setup and developer productivity.

Two Simple Tmux Keybinds that Help Me Everyday

Tömő Viktor — Sun, 07 Jul 2024 19:12:53 +0000

I have been using tmux for a while now, but I still need some help. Two keybinds help me day by day.

Helpful keybinds

They are literally helpful. When I started using tmux I of course didn't know any keybinds. There is a builtin help menu by using the keybind ?, but I wanted to level that up.

All the keybinds are listed there, but I can't search them and manually looking through each one is frustrating. So I made one that is searchable via fzf.

unbind-key ?
bind-key ? run-shell 'tmux neww -n "help"  "tmux list-keys -N | fzf"'

The binding opens a new tmux window with the name help and it lists all the available keybinds and pipes it into fzf. With this I can quickly search for something like "split vertically".

There is more! I use zimfw which is like oh-my-zsh but faster. I discovered that it comes with default aliases. I want to learn those too because Gcm is faster than git commit --message. So I made a quick fzf bind for that too.

bind-key a run-shell 'tmux neww -n "aliases" "source ~/.zshrc && alias | fzf"'

Here it's a good thing to know that by using alias all the configured aliases are listed to stdout. Also, if you use bash instead of zsh then change .zshrc to .bashrc.

Put the upper mentioned two keybinds into your .tmux.conf and start learning the shortcuts which make your workflow faster!

If you are interested in more of this type of content then I suggest you to read posts from my series about improving my setup and developer productivity.

Simple Directory Watcher to Restart Dev Server

Tömő Viktor — Thu, 27 Jun 2024 17:44:59 +0000

Simple Linux script that restarts the dev server on file changes. Couldn't find it so I made it.

Intro

I have been learning Go and I came across a pretty basic problem. I was practicing making a REST API web server and I wanted to enable hot reloading so my changes would be visible while I am changing the code. This is a common workflow when using a development server.

Ever since I have been making APIs there was always a simple way to enable hot reloading. It is easy in Go too, you just have to use air. It so simple, just write air and you have hot reloading. Now you may ask the question that if it's so great what this post is for?

My script

It all started when air decided to freeze multiple times. I searched a few and found no quick solution so I started to think about a solution. By my understanding air basically just executes the command that runs the web server (in this case go run .).

Do I really need a whole Go library to do that? There must be a lighter or in other words Linux solution. I came across few solutions but not all had the capability to handle all types of directory changes. I wanted to be able to watch for file: create, edit, move, delete. For example entr doesn't rerun the command when a new file is added to the directory that is being watched.

Then I discovered inotify-tools and inside it inotifywait. This tool can do all kinds of file changes that I wanted. So now I only had to create a script which can run the specified command and also is able to kill the process and rerun the command.

The script takes whatever args are passed into it and runs that and restarts it whenever a file change happens in the current directory. I also made it so via --we-exclude=[PATHS] you can pass inotify what to exlude from watching.

#!/usr/bin/env zsh

if ! command -v inotifywait > /dev/null; then
  print -P "%F{red}Can't start: inotifywait not found.%f"
  exit
fi

we_exclude_value=""
command_to_exec=""
for arg in "$@"; do
    if [[ $arg == "--we-exclude="* ]]; then
        we_exclude_value="${arg#*=}"
        break
    else
      command_to_exec+="$arg "
    fi
done

command_to_exec=${command_to_exec% }

while true; do
  print -P "$(date +%T): %F{green}Restarting...%f"
  $@ &
  PID=$!
  inotifywait --event=modify,move,create,delete,delete_self --recursive . --exclude=$we_exclude_value > /dev/null 2>&1
  pkill -P $PID 2>/dev/null
  kill $PID 2>/dev/null
  wait $PID 2>/dev/null
done

The script is also available in my GitHub .dotfiles repository under the scripts directory.

If you are interested in more of this type of content then I suggest you to read posts from my series about improving my setup and developer productivity.

Automatic Visual Feedback for System Volume Change in I3wm via Dunst

Tömő Viktor — Thu, 27 Jun 2024 17:39:46 +0000

Simple yet powerful all in one stytem volume watcher and changer script for linux. Let me show you my small script.

Introduction

I switched to the i3 tiling based window manager. Because it's a whole different environment and thinking, it was very different from what I was used to. The volume buttons were working on my keyboard, but I didn't get any visual feedback. Furthermore, the volume percentage could go down below zero and increase up to more than hundread percent. There were times when I was confused why the keys stopped working, but the actual hidden reason was that the volume's value was somehow -500 percent, so increasing it by 5 percent via my keys would have taken a little time.

To solve all this, I decided to write my own zsh script. If you are familiar with linux scripting you may ask: why didn't I use bash? It's simple, I did lots of bash scripting in school already so I decided to try out zsh (not like I discovered big differences).

The script is available at my GitHub .dotfiles repository named change-volume. In this blog I will explain how to use it and how does the code work.

Using the script

There are two use cases for the script: watch, change the current volume.

Watch listens to volume changes and automatically shows notifications. The watcher actually watches meaning it also works if the volume isn't changed via this script.

Chaning the volume is just a wrapper that takes care of minimizing and maximizing the values so they don't go under or over a certain limit. You must decrease or increase by percentage and you also have the option to mute too. When the source is muted and a value change is requested the script first unmutes the source and the next volume change will actually do something with the source's value.

Starting a watch:

volume-changer "watch"

Increase or decrease the volume or mute it fully (which automatically toggles):

volume-changer "+5%"
volume-changer "+50%"
volume-changer "-5%"
volume-changer "-21%"

volume-changer "full"

My script also logs details via logger so I can inspect it if it doesn't seem to work.

If you think don't want to bother with the code, you can just download it from GitHub. I made it so that in the top few lines you can easily configure few basic things. Don't forget to download the icons too if you need them.

The code

Sending notifications

The base of all of this is notifications. Because my i3 came with dunst and I liked the simple look of it I decided to use it as the notification daemon. I wanted to have 3 simple things: display current status of the volume via text, display an icon so it is somewhat prettier, display the volume level via a progress bar. Lucily all these are possible via dunst.

How do you actually send notifications? Just use dunstify. I also found a nice website that uses examples to show how it works.

Important note is that the progress bar feature is available since dunst version 1.6.0, so make sure you have a updated version. For me, the apt install on my Ubuntu downloaded a very outdated version of dunst which din't supported progress bars, so I decided to build it from source.

I created a perfect function for showing alerts:

lastalerttext=""
show_alert() {
  if [[ $lastalerttext != $3 ]]; then
    lastalerttext="$3"
    dunstify --replace=1111 --timeout=1500 --icon="$1" --hints=int:value:"$2%" "change-volume" "$3"
  fi
}
# usage: show_alert [iconpath] [progressbar percentage] [text]

Chaning the volume

I wanted to make it so you must provide two type of values for changing the percentage: +[NUMBER]% or -[NUMBER]%. For these format validations I made three functions (starts_with_pm, ends_with_percent_and_numeric, extract_number) which I won't describe here, but you can view that on my GitHub (I also used them via if statements).

To actually change the values I used pactl. It is very simple to use. You can even use @DEFAULT_SINK@ to not bother with getting the current source (sink) that you are making the changes to. Set volume with set-sink-volume and mute with set-sink-mute.

One last thing: just as I mentioned upper if the volume is muted then first I unmute.

I also crafted this into a function:

set_volume() {
  if [[ $1 == "full" ]]; then
    pactl set-sink-mute @DEFAULT_SINK@ toggle
  else
    muted=$(pactl get-sink-mute @DEFAULT_SINK@ | awk '{print $2}')
    if [[ $muted == "yes" ]]; then
        set_volume "full"
    else
        pactl set-sink-volume @DEFAULT_SINK@ "$1%"
    fi
  fi
}
# usage: set_volume ["full" or number]

To make this work via command line and to also minimize and maximize the values I used few if statements:

minvolume=0
maxvolume=150
# ...
volume="$1"
if [[ $volume == "full" ]]; then
  set_volume $volume
  exit
fi
# ...
changeval=$(extract_number "$volume")
currvolume=$(extract_number $(pactl get-sink-volume @DEFAULT_SINK@ | awk '{print $5}'))
finalvolume=$(( $currvolume + $changeval))
if (( $finalvolume < $minvolume )); then # if goes under min then use the min value
  finalvolume=$minvolume
fi
if (( $finalvolume > $maxvolume )); then # if goes over max then use the max value
  finalvolume=$maxvolume
fi
set_volume $finalvolume

Watching for change

Now comes the final part. I start by listening to events via pactl subscribe and via a while loop I display notifications based on if it's muted or what's the current volume percentage.

Because now I will need icons I downloaded 4 types of them: low, mid, high, muted. I also added variables to my script which decides the border limits:

highafter=75
midafter=35

muteimg="$HOME/dotfile-assets/volume-mute.svg"
highimg="$HOME/dotfile-assets/volume-high.svg"
lowimg="$HOME/dotfile-assets/volume-low.svg"
midimg="$HOME/dotfile-assets/volume-mid.svg"

get_icon_from_value() {
  if (( $1 < $midafter )); then
    echo "$lowimg"
  elif (( $1 < $highafter )); then
    echo "$midimg"
  else
    echo "$highimg"
  fi
}

Now I could easily display alerts. The while looks like this:

# ...
pactl subscribe | grep --line-buffered "sink" |
while read; do
  muted=$(pactl get-sink-mute @DEFAULT_SINK@ | awk '{print $2}')
  if [[ $muted == "yes" ]]; then
    show_alert "$muteimg" "0" "Volume: Muted"
  else
    currvolume=$(get_curr_volume)
    icontoshow=$(get_icon_from_value $currvolume)
    show_alert "$icontoshow" "$currvolume" "Volume: $currvolume%"
  fi
done
exit
# ...

Making it work

The script is ready. All that is left is making i3 start the watch on startup and adding keybinds that use the script.

I won't detail them here because i3 has great documentation about it. If you are curious you can view my i3 config to see where I created the keybindings and where I added the autostart.

If you are interested more of this content then I suggest you to read posts from my series about improving my setup and developer productivity.

Simple markdown plugin to open external links in a new tab

Tömő Viktor — Sun, 04 Jun 2023 18:35:32 +0000

I made all the external links to be _blank. I needed this because I write every post of mine in Markdown.

Introduction

On my personal blog I have few external links in my posts. I wanted to keep people on my website by applying target="_blank" on external (those what don't reference to my site) links. This is a common and good practice too. I write my content in Markdown, so I decided to write a remark plugin. It is simple to implement, just few lines of code.

The plugin

It takes in the tree of the markdown file and looks through the links.

To check if it is an external site:

Checks with a regex if link is a full url (for example: https://example.com/ will be full but /example won't be)
Checks if it doesn't contain my site's starting url (edit this if you use the plugin)

If an external link is found, it sets the target to _blank. Because the element might not have any special property, first it ensures that it has data and data.hProperties.

import { visit } from 'unist-util-visit';

const site = "https://tomoviktor.com";

export function externalAnchorPlugin() {
  return function (tree, file) {
    visit(tree, 'link', (node) => {
      if (/^(https?):\/\/[^\s/$.?#].[^\s]*$/i.test(node.url) && !node.url.includes(site)) {
        node.data ??= {};
        node.data.hProperties ??= {};
        node.data.hProperties.target = '_blank';
      }
    });
  }
}

Use it with Astro

As I mentioned in one of my other post I use the Astro web framework for my blog. Astro makes it effortless to import a Markdown plugin. All I had to do is add the function to astro.config.mjs.

import { externalAnchorPlugin } from './remarkplugins/external-anchor-plugin.mjs';

export default defineConfig({
  markdown: {
    remarkPlugins: [externalAnchorPlugin],
  },
});

CleverImage Astro Component for My Responsive Images

Tömő Viktor — Fri, 12 May 2023 16:02:14 +0000

Create responsive images in pure HTML with the CleverImage component. Let me show you how easy it is. The full code written in this post can be found at GitHub Gist: CleverImg.astro.

What is a responsive image?

Responsive images work well on all kinds of screen sizes and resolutions. It can help in optimizing page performance. For example, you don't need a 4k image on a mobile screen because it is just a waste.

It can be done in pure HTML. To create one, you have to modify an img element's attributes:

srcset: specify multiple image sources and their scale factors (note that if sizes isn't defined then the browser will decide which to display, that is why order matters here, the browser will use the first usable image it finds)
sizes: specify which image source to use from the srcset on which screen sizes.

These two attributes value generation will be implemented.

Example

In the previous part we created an automatic image generator, look at that for generating images, I am going to use an example related to that.

Let's say our base image is cat.png, it has different sizes and formats (file names scheme: [NAME]-[WIDTH]-[HEIGHT].[EXTENSION]): cat-100-500.png, cat-100-500.webp, cat-200-1000.png, cat-200-1000.webp. The smaller image should be loaded if the user's screen is smaller than 768px. WebP is preferred.

<img 
  src="cat-200-1000.png"
  alt="a black cat with big green eyes"
  srcset="cat-100-500.webp 100w,
          cat-100-500.png 100w,
          cat-200-1000.webp 200w,
          cat-200-1000.png 200w"
  sizes="(max-width: 768px) 100px, 200px"
/>

For more explanation read MDN - Responsive images.

Implementation

Setup

Create a new Astro component, let's name it CleverImg.astro.

What props are needed?

Basic img tag arguments: imgPath (src), alt, loading (if later want to add lazy load)
sizes what tells the sizes to generate for srcset
breakpoints that declares at what maxWidth which size source should be loaded, here 0 maxWidth will be the default non media query related size
withWebp if the image(s) exist in .webp format too

interface Props {
  imgPath: string,
  alt: string,
  loading?: "eager" | "lazy" | null,
  sizes: { width: number; height: number }[],
  breakpoints?: {maxWidth: number, imgWidth: number}[]
  withWebp?: boolean,
}
const { imgPath, alt, sizes, withWebp, loading, breakpoints } = Astro.props; // init each prop as a const variable

Both srcset and sizes require separating strings with a comma. That is why both will be handled as an array and will be joined after.

const generatedSrcset: string[] = [];
const generatedSizes: string[] = [];

If you followed the previous part, and images are only generated on build, then put the following code into an if, so it only runs on build:

if (import.meta.env.PROD) {
  // ...
}

Generate srcset

First, sort the sizes. Because order matters, order them ascending.

sizes.sort((a, b) => a.width - b.width);

Now, we have to append strings to generatedSrcset in format [IMGPATH] [IMGWIDTH]w. Path will be generated with function that was written in previous part of this series. This must be done for WebP format too.

for (const size of sizes) {
  ((withWebp ?? true) ? [true, false] : [false]).forEach((isWebp) => { // to do it for webp too
    generatedSrcset.push(`${ImageGenerator.generateName(imgPath, size, isWebp)} ${size.width}w`);
  });
}

There is a small modification which should be made. If there is a breakpoint, only include images which are in that. Because breakpoint will tell the browser to display which image and when, just those images are required. For this, let's filter the sizes and remove ones that aren't required.

let allBreakpointSizes: number[] | null = null;
if (breakpoints) {
  allBreakpointSizes = breakpoints.map(bp => bp.imgWidth);
}
sizes.sort((a, b) => a.width - b.width);
for (const size of sizes) {
  if (allBreakpointSizes && allBreakpointSizes.indexOf(size.width) === -1) {continue;} // skip if the curren width is not found in breakpoints
  ((withWebp ?? true) ? [false, true] : [false]).forEach((isWebp) => {
    generatedSrcset.push(`${ImageGenerator.generateName(imgPath, size, isWebp)} ${size.width}w`);
  });
}

Generate sizes

Add strings to generatedSizes in (max-width: [MAXWIDTH]px) {IMGWIDTH}px format. There is one exception, if the maxWidth is 0 then it means that this is the default value.

if (breakpoints) {
  for (const breakpoint of breakpoints) {
    if (breakpoint.maxWidth === 0) {
      generatedSizes.push(`${breakpoint.imgWidth}px`); // handle default
    } else {
      generatedSizes.push(`(max-width: ${breakpoint.maxWidth}px) ${breakpoint.imgWidth}px`);
    }
  }
}

Use it in HTML

The src should be the biggest sized image. If someone's browser doesn't support srcset then this will be used. The other attributes are nothing special, the generated arrays must be joined with comma.

---
// ...
const biggestSize = sizes.reduce((prev, current) => {
  return (prev.width > current.width) ? prev : current;
});
---
<img
  src={ImageCompressorIntegration.generateName(imgPath, biggestSize)}
  alt={alt}
  srcset={generatedSrcset.join(", ")}
  sizes={generatedSizes.join(", ")}
  loading={loading}
/>

If you followed the previous part, and images are only generated on build, then put the fully generated img in a conditional, and put a simple img in with import.meta.env.DEV condition. Look at the implementation at GitHub Gist: CleverImg.astro.

Automatic Responsive Image Generation with an Astro Hook

Tömő Viktor — Fri, 12 May 2023 16:01:49 +0000

Resized, compressed, formatted pictures. Use an Astro hook to automatically format images. I use typescript in this post. The full code written in this post can be found at GitHub Gist: ImageCompressorIntegration.ts.

Introduction

Get the most out of the images on your site. I optimized the thumbnails on my personal blog, this is the image generation part of it.

The different methods I used to format the images:

Resize to different sizes
Convert to WebP format
Compress
Remove all metadata

To actually generate the methods, I made an Astro hook that runs at build.

Implementing the methods

Setup

Let's use a class for this. Name it however you want, I used ImageGenerator.

class ImageGenerator {}

One special custom type is required. Image related sizes will be used frequently.

type imageSize = { width: number, height: number };

To resize the images a naming convention must be created, because multiple images will be generated. The typical that is used is: [NAME]-[WIDTH]-[HEIGHT].[EXTENSION]. For example if it resizes image.png to 600 width and 315 height and changes its format to WebP the name of the image will be image-600-315.webp. This name generation will be used frequently, so let's create a method for that. The NAME, WIDTH and HEIGHT, EXTENSION are parameters. Because at the end it will only use wepb, instead of EXTENSION I will use a boolean that indicates if the result file extension is webp or not.

import path from 'path';

class ImageGenerator {
  static generateName(filePath: string, size: imageSize, isWebp: boolean = false) {
    const extension = (isWebp ? ".webp" : path.extname(filePath));
    const justName = path.join(path.dirname(filePath), path.basename(filePath, path.extname(filePath))); // /directory/file.txt -> /directory/file
    return [justName, String(size.width), String(size.height)].join("-") + extension; // join the 3 parts and add extension
  }
}

I am going to predefine the sizes of my thumbnails.

class ImageGenerator {
  public static readonly thumbnailMetaSizes = [
    { width: 1200, height: 630 },
    { width: 600, height: 315 },
    { width: 360, height: 189 },
    { width: 736, height: 414 },
  ];
}

To actually edit the images, we are going to use sharp. Sharp is a high-performance image processing library. You can do all the cool things we want to do with it. Install the library then import it with import sharp from 'sharp'.

Process

Let's edit the images.

First, load in the image with sharp.

class ImageGenerator {
  static processImage(filepath: string) { // without a filepath we can't open it :D
    const image = sharp(filepath);
  }
}

We need to resize the image to multiple sizes and edit each of them. That is why a imageSize[] parameter is needed. It is very easy to resize images with sharp, it also allows to select the object-fit of the image. Object fit tells how the image should look like if the resized ratio is not the original one. With object fit, I can define that it will always show the center part of the image. We have to make sure to clone the image before doing anything with it, so the resize will always happen with the original one.

class ImageGenerator {
  static processImage(filepath: string, sizes: imageSize[]) {
    const image = sharp(filepath);
    for (const size of sizes) {
      const resizedImage = image.clone().resize(size.width, size.height, { fit: 'cover', withoutEnlargement: true });
      // compress, remove metadata, save to png and webp
    }
  }
}

Next, format the file to WebP. I want to leave this optional, so needWebp argument will be added to our method definition. toFormat method is used for converting between formats.

class ImageGenerator {
  static async processImage(filepath: string, sizes: imageSize[], needWebp: boolean = false) {
    const image = //...
    for (const size of sizes) {
      const resizedImage = //...
      for (const isWebp of (needWebp ? [true, false] : [false])) { // we are going to run compress and metadata modification for each format
        await resizedImage.toFormat((isWebp ? "webp" : path.extname(filepath).slice(1) as any));
      }
    }
  }
}

To compress, add {quality: 100} as a parameter to toFormat method. To remove metadata call withMetadata after the formatting is done.

await resizedImage.toFormat((isWebp ? "webp" : path.extname(filepath).slice(1) as any), { quality: 100 }).withMetadata();

The last thing is to save the new images. We already implemented generateName, we just have to use it.

class ImageGenerator {
  static async processImage(filepath: string, sizes: imageSize[], needWebp: boolean = false) {
    const image = //...
    const basePath = path.dirname(filepath) + path.sep;
    for (const size of sizes) {
      //...
      for (const isWebp of (needWebp ? [true, false] : [false])) {
        const outPath = ImageCompressorIntegration.generateName(filepath, size, isWebp);
        await resizedImage.toFormat((isWebp ? "webp" : path.extname(filepath).slice(1) as any), { quality: 100 }).withMetadata().toFile(outPath);
      }
    }
  }
}

I don't need the original image, so I added an option to delete it automatically.

import fs from 'fs';

class ImageGenerator {
  static async processImage(filepath: string, sizes: imageSize[], needWebp: boolean = false, removeOriginal: boolean = false) {
    //...
    if (removeOriginal) {
      fs.rm(filepath, () => { }); // rm to remove
    }
  }
}

We are done with our ImageGenerator class.

Astro hook

To automatically generate the images a custom Astro integration is required.

There are 3 build related hooks: start, setup, generated. We are going to use astro:build:generated, so it will run after Astro is fully done with the build.

Inside the same TypeScript file as our ImageGenerator class export a function that will return the integration's settings.

import type { AstroIntegration } from "astro";

export default function createPlugin(): AstroIntegration {
  return {
    name: "ImageCompressorIntegration",
    hooks: {
      "astro:build:generated": async (options: { dir: URL }) => {} // make it async because our processImage is async too
    }
  };
}

All we have to do is call processImage for all images we want to process. I want to process all files in the thumbnail directory. The built project's path can be accessed from the options dir argument.

export default function createPlugin(): AstroIntegration {
  return {
    name: "ImageCompressorIntegration",
    hooks: {
      "astro:build:generated": async (options: { dir: URL }) => {
        const distPath = options.dir.pathname;
        const allFiles = readDirectoryRecursive(path.join(distPath, "thumbnail"));
        for (const [i, imgPath] of allFiles.entries()) {
          await ImageGenerator.processImage(imgPath, ImageGenerator.thumbnailMetaSizes, true, true);
          console.log(`${path.basename(imgPath)} image sizes generated (${i+1}/${allFiles.length})`);
        }
      }
    }
  };
}

readDirectoryRecursive function's code can be found at GitHub Gist: ImageCompressorIntegration.ts

To finish it, use your integration in astro.config.mjs.

In the next part I will show how I use the images on the site.

I Boosted the Site's Performance with Better Images

Tömő Viktor — Fri, 12 May 2023 16:01:17 +0000

I optimized the images on my personal blog. Let me tell you the goals of this series.

Introduction

On my site, every blog or series has a thumbnail. These are used no matter what and loaded in for everyone. They are also present in the OG meta tags.

Because of their high usage it is essential to optimize them by creating responsive images. It is good for the client and the server too. The client gets a better performance (load time). The server's bandwidth will not be overloaded.

Before the update I made, I had to manipulate images manually. Compress and remove metadata from them. It was really annoying. I automated this process (also made it better). In this series I will share how I've done it.

Goals

There will be two parts of the implementation. First, in order to use different sized images, they need to be generated. Second, use our new fancy images on the site. More details can be seen in each part of the series.

Note

I am using the Astro web framework, so some parts of the series will be Astro specific. I am going to use typescript.