Personal Website

Why Astro?

If you are a frontend developer, or just someone interested in web development, give Astro a look. While I am not trying to be yet another framework shill, Astro is truly a great technology.

For my personal website, I needed to serve a static site, since I am hosting on GitHub Pages. Beyond that requirement, however, I also wanted the experience of using/navigating my site to be smooth, fast and enjoyable (You be the judge of how I did!).

Astro specializes in server-side rendering of components, which means that what I send to the client is just lightweight HTML, along with some minimal JavaScript. For someone who studies compilers and compiler technology, that approach wasn’t a hard sell.

Article Table of Contents

By far my favorite addition to Astro Sphere is the Table of Contents component that you can find on the full-width versions of blog and project posts (Desktop visitors may be able to see it off to the right, there). The component is both functional—improving the usability of the page—and aesthetic. There is a certain level of polish brought by a good navigation element.

Here is an example of the TOC in action, as demonstrated by one of Astro Sphere’s example articles.

The TOC is dynamically generated from the headings in the reference .mdx or .md file, and each button automatically linked to the relevant header. All sections currently in view are highlighted, and the current page scope is represented by the animated white line which hugs the left side of the menu.

Inspiration for the design comes from Kevin Drum who created a very similar component for his Astro site. I took a lot of inspiration while building my version, and I added some additional features that Astro Sphere needed. Namely, Astro Sphere needs to support potentially lengthy articles, since it is a template, and so the TOC needs to be able to scroll with the content, if the TOC is longer than the page height. The image above shows the fade-out styling which indicates when this is the case.

Code Snippets

The next improvement which I made to Astro Sphere was to the code snippets. While Astro Sphere did have existing styling for code snippets, it didn’t actually meet my needs for the template.

My upgrade to the code snippet component achieved two things: First, it added the features I needed—linking to code bases, line-numbers, and line highlighting—and it also brought the code snippets more in line with Astro Sphere’s existing crisp, minimal style.

The new code block makes copying more clear, and makes it very easy to configure all of the new features. If you provide a Github link, the component even parses out the relevant line numbers for you.

Here is the code that creates that code snippet example, linked to my Astro Sphere fork:

```js link=https://github.com/HesitantlyHuman/astro-sphere/blob/5c8562ed9ec0590395df40bb4c43fc104cf33eaf/astro.config.mjs#L8-L11 {2}
export default defineConfig({
  site: "https://astro-sphere.vercel.app", // your domain here
  integrations: [mdx(), sitemap(), solidJs(), tailwind({ applyBaseStyles: false })],
})
```

Blog and Project Search

The final change that I needed to make was improving the Astro Sphere blog and project main pages. The existing implementation was almost there, but missing some key usability features.

There was no way to search just blogs by text, or just posts by text. To do any text search, you had to go to the search page and search the entire site. Additionally, there was no way to reverse the order of the posts, or clear all tags once you had selected multiple.

Some styling improvements were made as well. To support longer tags and descriptions, the page width maximums were increased, the search bar magnifying glass icon was reduced in opacity to match the placeholder text, and a custom svg was created for the ascending to descending ordering switch—optimized for size and transfer speed, of course.

Here you can see some of those usability and style improvements applied to the search page as well. First the old search page:

And now the new search page, after those changes: