fix: missing packages & misc build errors

Author: sadmanca

package-lock.json

@@ -43,14 +43,17 @@
     "rehype-document": "^7.0.3",
     "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.1",
+    "rehype-pretty-code": "^0.14.1",
     "remark-emoji": "^5.0.1",
     "remark-math": "^6.0.0",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.7",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "xml2js": "^0.6.2"
   },
   "devDependencies": {
     "@iconify-icons/tabler": "^1.2.95",
+    "@types/xml2js": "^0.4.14",
     "prettier": "^3.5.1",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-astro-organize-imports": "^0.4.11",

package.json

@@ -26,7 +26,7 @@ const { project } = Astro.props
       <div class="relative max-w-[200px] sm:flex-shrink-0 relative">
           <div
             class="placeholder rounded-xl bg-gray-200 dark:bg-gray-900"
-            id={`placeholder-${project.data.title}`}
+            id={`placeholder-${project.data.name}`}
           >
             <div class="h-[105px] w-[200px] rounded-xl bg-gray-200 dark:bg-gray-900 flex items-center justify-center ">
               <Icon name="lucide:image" class="h-10 w-10 text-gray-400 dark:text-gray-700" />

src/components/ProjectCard.astro

@@ -83,8 +83,21 @@ const isDev = import.meta.env.DEV; // true when in development mode
         </div>
       </main>
       <Footer />
-    <div aria-hidden="true" class="pointer-events-none fixed inset-x-0 bottom-0 z-10 h-16 bg-gradient-to-b from-transparent to-[var(--background))] dark:bg-gradient-to-b dark:from-transparent dark:to-[var(--background))]"></div>
+    <div aria-hidden="true" class="z-20 pointer-events-none fixed inset-x-0 bottom-0 z-10 h-16 bg-gradient-to-b from-transparent to-[var(--background))] dark:bg-gradient-to-b dark:from-transparent dark:to-[var(--background))]"></div>
     </div>
     <div class="mb-4"/>
+    <script>
+      function hideMobileTOC() {
+        const tocContainer = document.getElementById('mobile-toc-container');
+        if (tocContainer && !window.location.pathname.startsWith('/blog/')) {
+          tocContainer.style.display = 'none';
+        } else if (tocContainer) {
+          tocContainer.style.display = '';
+        }
+      }
+
+      document.addEventListener('astro:after-swap', hideMobileTOC);
+      document.addEventListener('astro:page-load', hideMobileTOC);
+  </script>
   </body>
 </html>