This post is a continuation of my migration journey from WordPress to Astro. If you have not read the previous posts, you might want to start with:

• Why I Switched from WordPress to Astro: Faster, Cheaper, and Greener
• Migrating from WordPress to Astro: How I Moved My Blog Content

In this post, I explain how I replaced 3 WordPress plugin functionalities in Astro.

1. Acronyms 2
2. Add Meta Tags
3. Better Tag Cloud

Acronyms 2

The Acronyms 2 plugin allowed me to define a list of acronyms, and automatically generated tooltips with their meanings when they appeared in posts.

Astro Implementation

In Astro, I created a rehype plugin that processes text and wraps recognized acronyms with an <abbr> tag containing the full text of the acronym as the title attribute.

The first time an abbreviation is encountered on a page, the plugin will also wrap the <abbr> tag with an <dfn> tag. This semantic tag is used to indicate the defining instance of a term.

A special case is when an acronym is used in a <code> or <pre> block. In this case, the plugin will not wrap the acronym with an <abbr> tag.

23
if (current.tagName === 'code' || current.tagName === 'pre') {
24
  return; // Skip this node
25
}

See the full code on GitHub: rehypeAbbreviate.js.

Because there is no database to store the acronyms, I defined them in a YAML file and imported them into the plugin.

ACRONYMS:
  AST: Abstract Syntax Tree
  HTML: HyperText Markup Language

The YAML file is loaded in the astro.config.mjs file and passed to the rehypeAbbreviate plugin.

import { defineConfig } from "astro/config";
import yaml from "@rollup/plugin-yaml";
import yamlParser from "yaml";
import { readFileSync } from "fs";
import rehypeAbbreviate from "./src/plugins/rehypeAbbreviate.js";

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [
        rehypeAbbreviate,
        { acronyms: yamlParser.parse(readFileSync("./src/config/acronyms.yaml", "utf8")).ACRONYMS}
      ],
    ],
  },
  vite: {
    plugins: [yaml()],
  },
});

I expect that loading the acronyms from a YAML file could be improved, but for now, it works well enough.

Add Meta Tags

The Add Meta Tags plugin generated metadata for search engines and social media previews.

Astro Implementation

Most of the metadata is defined in the BaseHead.astro file, which is included in one of the layout files that pass on contextual values.

41
<meta property="og:url" content={Astro.url}>
42
<meta property="og:title" content={title}>
43
<meta property="og:description" content={description}>

Some properties are conditionally included based on availability. For example, the article object is passed to the layout when rendering a blog post.

Sections and tags can even occur multiple times, so I use the Array map function to generate multiple <meta> tags.

45
{article && (
46
  <meta property="og:type" content="article" />
47
  <meta property="article:published_time" content={article.published} />
48
  <meta property="article:modified_time" content={article.modified} />
49
)}
50
{article && article.sections && article.sections.map((section) =>
51
  <meta property="article:section" content={section}>
52
)}
53
{article && article.tags && article.tags.map((tag) =>
54
  <meta property="article:tag" content={tag}>
55
)}

View the full code on GitHub: BaseHead.astro.

Better Tag Cloud

The Better Tag Cloud plugin displayed a tag cloud where tags were weighted based on post frequency.

Astro Implementation

I used the PHP code from the plugin as a reference and, with some help from ChatGPT, created a function that:

1. Gets a map of tags and their posts.

   19
   export function getTagsWithPosts(paths) {
   20
     const posts = sortedPosts(paths);
   21
     const tagsMap = new Map();
   22
   
   23
     posts.forEach(post => {
   24
       post.data.tags?.forEach(tag => {
   25
         if (!tagsMap.has(tag)) {
   26
           tagsMap.set(tag, []);
   27
         }
   28
         tagsMap.get(tag).push(post);
   29
       });
   30
     });
   31
   
   32
     return tagsMap;
   33
   }

2. Sorts the tags by post count.

3. Get the top 50 tags.

4. Sort the tags alphabetically.

5. Calculate the weight of each tag based on the post count. Using 8pt as the smallest font size and 22pt as the largest font size.

   35
   return tagArray
   36
     .sort(([tagA], [tagB]) => tagA.localeCompare(tagB))
   37
     .map(([tag, tagPosts]) => ({
   38
       tag,
   39
       count: tagPosts.length,
   40
       fontSize: calculateFontSize(tagPosts.length),
   41
     }));

6. Render the tags in the sidebar.

   56
   <aside id="tag-cloud">
   57
     <h2>Tags</h2>
   58
     <div>
   59
       {
   60
         tags.map(tagItem =>
   61
           <a
   62
             href={`/tag/${urlifyToken(tagItem.tag)}/`}
   63
             title={`${tagItem.count} posts tagged with "${tagItem.tag}"`}
   64
             rel="tag"
   65
             style={`font-size: ${tagItem.fontSize}pt;`}>{tagItem.tag}</a>
   66
         )
   67
       }
   68
     </div>
   69
   </aside>

The full code can be found on GitHub: Sidebar.astro and util.js.

These are the first 3 plugins I replaced with Astro functionality.

In the next post, I will cover more plugins, including syntax highlighting, paging, and more.