Richer Content

Taking stock of progress we can note a3l now has some of the basics in place:

a pipeline to translate source mdx files and place them into an internationalised site setup
some very basic home and article pages are designed and implementated.

Since the last coding session I’ve written the last few Log posts preceding this one, and have tentatively added them to the site. However, those articles have more images, utilise code blocks, and contain many links. With Astro’s out of the box styling these are looking a bit basic. Some consolidation of article display is in order.

Starting with code styling, we can observe Astro turns inline code blocks like this into code elements <code>like this</code> while triple backtick code blocks:

```ts

```

turn into:

<pre class="astro-code …" data-language="ts">
 <code>
 </code>
</pre>

Therefore to style inline blocks and the pre container we can use:

/*
  `inline code` elements
*/
:not(.astro-code) > code {
  color: red;
  background-color: lightgrey;
  …
}

/*
  the `pre` container for ```code blocks```
*/
.astro-code {
  padding: 1rem;
  …
}

Beyond this, most styling concerns for code blocks are addressed just by choosing a Shiki code styling theme. I will want dark mode support, but for now, I will stick with the github-dark theme.

Continuing on, I ticked off a few other items:

Creating a CaptionedImage component to center and nicely display images included between article paragraphs: just a figure element with an optional figcaption element with associated styling.
Improvements to font styling & paragraph spacing.
Designing & adding link style css: just a basic underline for now like so:

Loading in recent article content.
Stripping markdown from excerpts by using remove-markdown. This is to ensure they didn’t display rich content on the home page.

Adding next and previous links to the bottom of article pages like below. This involved looping through all posts and finding those that shared a tag with the current article:

Adding a very simple footer:

After all these changes, all in all the articles were looking basic but presentable!