v5.1.0

Author: ChristineTham

.github/workflows/deploy.yml

@@ -20,14 +20,12 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
       - name: Install, build, and upload your site
-        uses: withastro/action@v2
+        uses: withastro/action@v4
         # with:
-        #   package-manager: pnpm
-        #   node-version: 18
-          # path: . # The root location of your Astro project inside the repository. (optional)
+        #   package-manager: pnpm@latest
+        #   node-version: 22
+        # path: . # The root location of your Astro project inside the repository. (optional)
 
   deploy:
     needs: build

README.md

@@ -256,3 +256,7 @@ All commands are run from the root of the project, from a terminal:
   - Updated prettier and eslint config
   - Fixed dark mode with Tailwind CSS 4
   - Used img-svg in rehype-mermaid
+- 5.1.0: Major changes:
+  - Migrated to astro-mermaid, astro-plantuml
+  - Fixed Tailwind 4 plugin support
+  - Updated Katex CSS to 0.16.22

astro.config.mjs

@@ -4,19 +4,16 @@ import mdx from '@astrojs/mdx'
 import tailwindcss from '@tailwindcss/vite'
 import alpinejs from '@astrojs/alpinejs'
 import robotsTxt from 'astro-robots-txt'
+import plantuml from 'astro-plantuml'
+import mermaid from 'astro-mermaid'
 import remarkMath from 'remark-math'
 import remarkEmoji from 'remark-emoji'
 import rehypeKatex from 'rehype-katex'
-import rehypeMermaid from 'rehype-mermaid'
-import remarkPlantUML from '@akebifiky/remark-simple-plantuml'
 import { remarkReadingTime } from './remark-plugins/remark-reading-time.mjs'
 import { remarkDiagram } from './remark-plugins/remark-diagram.mjs'
 import icon from 'astro-icon'
-
 import markdoc from '@astrojs/markdoc'
 
-import expressiveCode from 'astro-expressive-code'
-
 // https://astro.build/config
 export default defineConfig({
   vite: {
@@ -29,19 +26,20 @@ export default defineConfig({
   },
   site: 'https://hellotham.github.io',
   base: '/hello-astro/',
-  integrations: [icon(), sitemap(), alpinejs(), robotsTxt(), markdoc(), expressiveCode(), mdx()],
+  integrations: [
+    icon(),
+    sitemap(),
+    alpinejs(),
+    robotsTxt(),
+    markdoc(),
+    mdx(),
+    plantuml(),
+    mermaid()
+  ],
   markdown: {
     extendDefaultPlugins: true,
-    remarkPlugins: [remarkReadingTime, remarkMath, remarkPlantUML, remarkDiagram, remarkEmoji],
-    rehypePlugins: [
-      [
-        rehypeMermaid,
-        {
-          strategy: 'img-svg'
-        }
-      ],
-      rehypeKatex
-    ]
+    remarkPlugins: [remarkReadingTime, remarkMath, remarkDiagram, remarkEmoji],
+    rehypePlugins: [rehypeKatex]
   },
   scopedStyleStrategy: 'where'
 })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hello-astro",
   "description": "Hello Astro is a full featured Astro corporate/marketing/blog starter theme written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.",
-  "version": "4.0.0",
+  "version": "5.1.0",
   "scripts": {
     "dev": "astro dev",
     "clean": "rm -rf node_modules .astro dist",
@@ -16,19 +16,16 @@
     "astro": "astro"
   },
   "devDependencies": {
-    "@akebifiky/remark-simple-plantuml": "^1.0.2",
     "@astrojs/alpinejs": "0.4.8",
     "@astrojs/mdx": "4.3.4",
     "@astrojs/sitemap": "3.5.1",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
     "@types/alpinejs": "^3.13.11",
     "@types/leaflet": "^1.9.20",
-    "@typescript-eslint/parser": "^8.41.0",
+    "@typescript-eslint/parser": "^8.42.0",
     "alpinejs": "^3.14.9",
-    "astro": "5.13.3",
+    "astro": "5.13.5",
     "astro-robots-txt": "^1.0.0",
     "eslint": "^9.34.0",
     "eslint-plugin-astro": "^1.3.1",
@@ -44,11 +41,11 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "reading-time": "^1.5.0",
     "rehype-katex": "^7.0.1",
-    "remark-emoji": "^5.0.1",
+    "remark-emoji": "^5.0.2",
     "remark-math": "^6.0.0",
     "schema-dts": "^1.1.5",
     "typescript": "~5.9.2",
-    "typescript-eslint": "^8.41.0",
+    "typescript-eslint": "^8.42.0",
     "unist-util-visit": "^5.0.0"
   },
   "dependencies": {
@@ -59,9 +56,10 @@
     "@iconify-json/bi": "^1.2.6",
     "@iconify-json/heroicons": "^1.2.2",
     "@tailwindcss/vite": "^4.1.12",
-    "astro-expressive-code": "^0.41.3",
     "astro-geo-map": "^2.0.0",
     "astro-icon": "^1.1.5",
+    "astro-mermaid": "^1.0.4",
+    "astro-plantuml": "^0.1.4",
     "astro-seo": "^0.8.4",
     "hero-patterns": "^2.1.0",
     "katex": "^0.16.22",
@@ -71,7 +69,6 @@
     "photoswipe": "^5.4.4",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
     "playwright": "^1.55.0",
-    "rehype-mermaid": "^3.0.0",
     "swiper": "^11.2.10",
     "tailwindcss": "^4.1.12"
   },