Content section overhauls

package.json

@@ -16,20 +16,21 @@
   "dependencies": {
     "@astrojs/markdown-component": "1.0.5",
     "@astrojs/react": "^3.6.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.16.0",
-    "@mui/material": "^5.16.0",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/material": "^5.16.5",
     "@netlify/functions": "^2.8.1",
     "fast-xml-parser": "^4.4.0",
     "markdown-truncate": "^1.1.1",
     "node-fetch": "^3.3.2"
   },
   "devDependencies": {
     "@astro-community/astro-embed-youtube": "^0.5.2",
-    "@astrojs/mdx": "^3.1.2",
+    "@astrojs/mdx": "^3.1.3",
     "@astrojs/partytown": "^2.1.1",
     "@astrojs/rss": "^4.0.7",
+    "@astrojs/markdown-component": "1.0.5",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@astrolib/analytics": "^0.5.0",
@@ -38,28 +39,28 @@
     "@fontsource/bitter": "^5.0.19",
     "@iconify-json/carbon": "^1.1.36",
     "@iconify-json/fa": "^1.1.8",
-    "@iconify-json/fluent": "^1.1.58",
+    "@iconify-json/fluent": "^1.1.59",
     "@iconify-json/simple-line-icons": "^1.1.8",
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/ri": "^1.1.21",
-    "@iconify-json/simple-icons": "^1.1.109",
-    "@iconify-json/tabler": "^1.1.117",
+    "@iconify-json/simple-icons": "^1.1.110",
+    "@iconify-json/tabler": "^1.1.118",
     "@tailwindcss/typography": "^0.5.13",
-    "@typescript-eslint/eslint-plugin": "^8.0.0-alpha.41",
-    "@typescript-eslint/parser": "^8.0.0-alpha.41",
+    "@typescript-eslint/eslint-plugin": "^8.0.0-alpha.54",
+    "@typescript-eslint/parser": "^8.0.0-alpha.54",
     "accessible-astro-components": "^2.3.6",
-    "astro": "^4.11.5",
+    "astro": "^4.12.2",
     "astro-icon": "^1.1.0",
-    "eslint": "^9.6.0",
+    "eslint": "^9.7.0",
     "eslint-plugin-astro": "^1.2.3",
     "limax": "4.1.0",
     "mdast-util-to-string": "^4.0.0",
-    "prettier": "^3.3.2",
-    "prettier-plugin-astro": "^0.14.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
     "reading-time": "^1.5.0",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.7",
     "truncate-html": "^1.1.1",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   }
 }

src/components/Book.astro

@@ -91,6 +91,7 @@ var idOfTitle = slugify(book.data.title);
       <i class="my-2 block">{book.data.publisher}, {formattedDate}, {book.data.role}</i>
     </header>
     <!-- TODO: Seems kind of ridiculous -->
+    <!-- TODO: Deprecated, need an alternative -->
     <Markdown class="m-2" />{truncatedBody}
     {
       book.data.store_urls && (

src/components/Client.astro

@@ -4,13 +4,19 @@
 import { Image } from 'astro:assets';
 import { type CollectionEntry } from 'astro:content';
 import Markdown from '@astrojs/markdown-component';
+import truncateMarkdown from 'markdown-truncate';
 
 export interface Props {
   client: CollectionEntry<'clients'>;
 }
 const { client } = Astro.props;
 // const { Content } = await client.render();
 // const featured_image = await findImage(client.data.image);
+
+const truncatedBody = truncateMarkdown(client.body, {
+  limit: 500,
+  ellipsis: true,
+});
 ---
 
 <article class={`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${client.data.image ? 'md:grid-cols-2' : ''}`}>
@@ -29,7 +35,7 @@ const { client } = Astro.props;
     <Image
       src={client.data.image}
       alt={client.data.title}
-      class="absolute object-contain h-full mb-6 rounded drop-shadow-lg"
+      class="absolute object-contain h-full w-64 mb-6 rounded drop-shadow-lg"
     />
   </div>
 
@@ -52,6 +58,9 @@ const { client } = Astro.props;
       <i class="my-2 block">{client.data.type}</i>
     </header>
     <!-- TODO: Seems kind of ridiculous -->
-    <Markdown class="m-2" />{client.body}
+    <!-- TODO: Deprecated, need an alternative -->
+    <div class="post-body body">
+      <Markdown class="m-2" />{truncatedBody}
+    </div>
   </div>
 </article>

src/components/Course.astro

@@ -78,6 +78,7 @@ var idOfTitle = slugify(course.data.title);
         <i class="my-2 block">{course.data.client}, {formattedDate}</i>
       </header>
       <!-- TODO: Better way -->
+      <!-- TODO: Deprecated, need an alternative -->
       <Markdown class="m-2" />{course.body}
       {
         course.data.store_urls && (