Adil Al Qaba

Technologies Used

Links

Notable Features

• Statically generated at build time for CDN-level latency
• Automatically-updating README with Github workflows
• Automated a11y testing with Playwright
• Optimized images with Cloudinary
• Ease in adding new articles with MDX

Integrating MDX

Using @astrojs/mdx (opens in a new tab) to add MDX support was straight-forward.

All that was needed was installing and configuring the integration, and done! (Thanks Astro team!)

Automated Testing

Thanks to @axe-core/playwright - npm (opens in a new tab) , A11Y testing with playwright was super easy.

You can see my current a11y tests file (opens in a new tab) which asserts that every page in the website is accessible using the AxeBuilder.analyze method, and my current Github worflow setup (opens in a new tab) which sets up a node environment and runs the tests using pnpm dlx playwright test

Optimzied Images

You can view my current optimized image component (opens in a new tab) which I can import to MDX.

In this component, I basically check whether the link provided is external or internal, and apply the following optimizations:

• Set the delivery type to fetch (if it’s external)
• Construct an image source set for the image
• Resize each image to fit the current viewport width

Automatically-Updating README

Updating the README preview image every time I make a visual change to the website is inefficient and time-consuming, so I looked into ways of automating it.

What I currently do is:

• Capture an image of the current website using capture-website - npm (opens in a new tab)

• Compare to see whether the current image is different than the previous one

• Stop if they’re the same

• Otherwise, update the current preview image using the request method of @octokit/core - npm (opens in a new tab)

And I run the above script on every push to the production branch ( view my current workflow for automatically updating preview images in README (opens in a new tab) )

Lessons Learned

Learned a lot about Github Actions and Github Workflows, also Astro and MDX, and finally image optimizations.