A short intro to the blog

The story behind the blog

Well, what else would it be if not a typical story of:

1. This is easy, lets just deploy a ready Markdown renderer with a blog plugin
2. That did not work, lets build our own frontend with NextJS like all the cool kids do
3. Lets think carefully this time. There are actual blog starter projects made by professionals, and there is no reason not to use them, so long as they are fitting our use case.

And here we are! A blog made with Astro based starter made by a talented frontend dev, but powered by my ingenious backend skills! So it includes a dedicated CMS, a dedicated kinda-What you see is what you get editor, and a multi cloud hosting and deployment solution that reads the content from CMS, adds summary by an LLM, then prepares a image generation prompt based on that summary, and finally creates a headline image! The content of the post is fully human, with my own choice of images and content 😃

Source code

To see how this blog was built, you need to visit 3 repos:

This is where the code for the website itself lives. It’s based on a starter project, you can find a link to it in the footer.

This is where the Webiny CMS, the “backend” of this blog lives. It has been extended to support markdown generation with re-mark support, and a kinda WYSIWYG editor.

And finally, this is where the deployment magic with AI sprinkle happens. The CMS has a “on post publish” hook that calls the pipeline orchestrator (AWS Step Function) which fetches the content, does a summary, generates an image prompt, generates image for the header of the post, and generates another image for the hero card that is based on the header image. Then its all uploaded to the CMS and finally a github action is called to build and deploy the website to Cloudflare Pages.

Showcase

To see what the blog is capable of I present to you a list of features with their code descriptions.

Theming

Use your favorite editor theme for your blog!

Theming for the website comes from builtin Shiki themes found in Expressive Code. You can view them here. After changing the theme with the top right homepage selector, the choice is saved to your browsers local storage.

Code Blocks

Let’s look at some code block styles:

def hello_world():
    print("Hello, world!")

hello_world()

def hello_world():
    print("Hello, world!")

hello_world()

python hello.py

Also some inline code: 1 + 2 = 3. Or maybe even (= (+ 1 2) 3).

See the Expressive Code Docs for more information on available features like wrapping text, line highlighting, diffs, etc.

Basic Markdown Elements

• List item 1
• List item 2

Bold text

Italic text

Strikethrough text

Link

In life, as in art, some endings are bittersweet. Especially when it comes to love. Sometimes fate throws two lovers together only to rip them apart. Sometimes the hero finally makes the right choice but the timing is all wrong. And, as they say, timing is everything.

- Gossip Girl

Images

![1a.jpg](https://cms-api.vahla.fi/files/69beb6154298fd00028df593/1a.jpg "Test image")

Admonitions

:::note
testing123
:::

Character Chats

:::duckright[https://cms-api.vahla.fi/files/69beb7a74298fd00028df595/duck.webp]
**Did you know?** You can easily create custom character chats for your blog with MultiTerm!
:::

Character Conversations

When there are multiple character chats in a row, the order of the chat image and chat bubble reverses to give the chat more of a back-and-forth appearance.

:::owl[https://cms-api.vahla.fi/files/69beb7a84298fd00028df597/owl.webp]
This is a cool feature!
:::

:::unicorn[https://cms-api.vahla.fi/files/69beb7ac4298fd00028df59f/unicorn.webp.png]
I agree!
:::

You can specify the alignment (left or right) to override the default left, right, left, ... ordering.

:::unicorn[https://cms-api.vahla.fi/files/69beb7ac4298fd00028df59f/unicorn.webp.png]{align="right"}
Over here, to the right!
:::

GitHub Cards

GitHub overview cards heavily inspired by Astro Cactus.

::github{repo="stelcodes/multiterm-astro"}

::github{user="withastro"}

Emoji 🤩

Emojis can be added in markdown by including a literal emoji character or a GitHub shortcode. You can browse an unofficial database here.

Good morning! :sleeping: :coffee: :pancakes:

Good morning! 😴 ☕ 🥞

All emojis (both literal and shortcoded) are made more accessible by wrapping them in a span tag like this:>html<span role="img" aria-label="coffee">☕️</span>>At the time of writing, emoji v16 is not supported yet. These emojis can be included literally but they do not have shortcodes and will not be wrapped.

The rest

Below the post you can find a “thank you for reading” note, below which there is a github issue based comment section (giscus), and even further below you will find links to my LinkedIn, email, RSS feed, and software used in making the blog!