bump: upgrade astro and dependencies (#596)

* bump: update astro to v5.16.6 and related dependencies

* bump: update dependencies to latest versions

- Upgraded @tailwindcss/vite from 4.1.11 to 4.1.18
- Updated dayjs from 1.11.13 to 1.11.19
- Bumped satori from 0.15.2 to 0.18.3
- Updated sharp from 0.34.2 to 0.34.5
- Upgraded @pagefind/default-ui from 1.3.0 to 1.4.0
- Updated @tailwindcss/typography from 0.5.16 to 0.5.19
- Bumped @typescript-eslint/parser from 8.36.0 to 8.51.0
- Updated eslint from 9.30.1 to 9.39.2
- Upgraded eslint-plugin-astro from 1.3.1 to 1.5.0
- Updated globals from 16.3.0 to 16.5.0
- Bumped pagefind from 1.3.0 to 1.4.0
- Updated prettier from 3.6.2 to 3.7.4
- Upgraded prettier-plugin-tailwindcss from 0.6.13 to 0.7.2
- Updated typescript from 5.8.3 to 5.9.3
- Bumped typescript-eslint from 8.36.0 to 8.51.0

* chore: fix prettier warnings

- Changed single quotes to double quotes for the @plugin directive in typography.css.
- Updated CSS classes to use wrap-break-word for better text handling in various elements.

package.json

@@ -13,34 +13,34 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@astrojs/rss": "^4.0.12",
+    "@astrojs/rss": "^4.0.14",
-    "@astrojs/sitemap": "^3.4.1",
+    "@astrojs/sitemap": "^3.6.0",
     "@resvg/resvg-js": "^2.6.2",
-    "@tailwindcss/vite": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.18",
-    "astro": "^5.12.0",
+    "astro": "^5.16.6",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.19",
     "lodash.kebabcase": "^4.1.1",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
-    "satori": "^0.15.2",
+    "satori": "^0.18.3",
-    "sharp": "^0.34.2",
+    "sharp": "^0.34.5",
-    "tailwindcss": "^4.1.11"
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.4",
+    "@astrojs/check": "^0.9.6",
-    "@pagefind/default-ui": "^1.3.0",
+    "@pagefind/default-ui": "^1.4.0",
-    "@shikijs/transformers": "^3.7.0",
+    "@shikijs/transformers": "^3.20.0",
-    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/lodash.kebabcase": "^4.1.9",
-    "@typescript-eslint/parser": "^8.36.0",
+    "@typescript-eslint/parser": "^8.51.0",
-    "eslint": "^9.30.1",
+    "eslint": "^9.39.2",
-    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-astro": "^1.5.0",
-    "globals": "^16.3.0",
+    "globals": "^16.5.0",
-    "pagefind": "^1.3.0",
+    "pagefind": "^1.4.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.13",
+    "prettier-plugin-tailwindcss": "^0.7.2",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.36.0"
+    "typescript-eslint": "^8.51.0"
   }
 }

src/data/blog/how-to-add-latex-equations-in-blog-posts.md

@@ -85,7 +85,7 @@ In this section, you will find instructions on how to add support for LaTeX in y
 4. As the last step, add a text-color for `katex` in `typography.css`.
 
    ```css file=src/styles/typography.css
-   @plugin '@tailwindcss/typography';
+   @plugin "@tailwindcss/typography";
 
    @layer base {
      /* other classes */

src/styles/typography.css

@@ -1,4 +1,4 @@
-@plugin '@tailwindcss/typography';
+@plugin "@tailwindcss/typography";
 
 @layer base {
   /* ===== Override default Tailwind Typography styles ===== */
@@ -28,7 +28,7 @@
     }
 
     a {
-      @apply break-words text-foreground decoration-dashed underline-offset-4 hover:text-accent focus-visible:no-underline;
+      @apply wrap-break-word text-foreground decoration-dashed underline-offset-4 hover:text-accent focus-visible:no-underline;
     }
 
     ul {
@@ -67,7 +67,7 @@
     }
 
     code {
-      @apply rounded bg-muted/75 p-1 break-words text-foreground before:content-none after:content-none;
+      @apply rounded bg-muted/75 p-1 wrap-break-word text-foreground before:content-none after:content-none;
     }
 
     .astro-code code {
@@ -75,11 +75,11 @@
     }
 
     blockquote {
-      @apply border-s-accent/80 break-words opacity-80;
+      @apply border-s-accent/80 wrap-break-word opacity-80;
     }
 
     details {
-      @apply inline-block cursor-pointer text-foreground select-none [&_p]:hidden [&_ul]:!my-0;
+      @apply inline-block cursor-pointer text-foreground select-none [&_p]:hidden [&_ul]:my-0!;
     }
 
     summary {