Update deps and introduce new article

content/articles/2025-03-15-exploring-nuxt-pt-2.md

@@ -0,0 +1,50 @@
+---
+title: "Exploring the Power of Nuxt: Part 2"
+date: 2025-03-15
+coverImage:
+  author: Behnam Norouzi
+  authorUrl: https://unsplash.com/@behy_studio
+  url: "https://images.unsplash.com/photo-1739542233673-572b6f1f9934?q=80&h=600&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+---
+
+# Exploring the Power of Nuxt: Part 2
+
+In the first part of our *Exploring the Power of Nuxt* series ([read it here](https://mariosant.dev/articles/2024-02-13-exploring-nuxt-pt-1)), we introduced Nuxt as a powerful Vue framework designed for performance, flexibility, and developer experience. In this second installment, we’ll dive deeper into how Nuxt empowers developers to build scalable full-stack applications, leverage configurable auto-imports to manage complexity, and solve caching challenges effectively.
+
+## Full-Stack Applications with Nuxt
+
+Nuxt is not just a frontend framework—it’s a full-stack solution. With Nuxt’s powerful Nitro engine, developers can seamlessly build server-side logic alongside their client-side applications. Features like API routes, middleware, and database connectors allow Nuxt to handle backend operations, making it an excellent choice for full-stack development. Some key benefits include:
+
+- **Server-Side Rendering (SSR)**: Improves performance and SEO by rendering pages on the server.
+- **API Routes**: Define backend endpoints within your Nuxt app without needing an external server.
+- **Database Integration**: Connect to databases via Nitro’s built-in support for ORM tools like Prisma or Drizzle.
+- **Edge and Serverless Deployments**: Deploy efficiently to platforms like Vercel, Netlify, or Cloudflare Workers.
+
+This holistic approach enables teams to build and deploy full-stack applications with minimal overhead.
+
+## Scaling with Configurable Auto-Imports
+
+As applications grow, managing imports can become tedious and error-prone. Nuxt’s configurable auto-imports streamline this process by automatically registering commonly used functions and components. This makes the codebase cleaner and easier to maintain. Some advantages include:
+
+- **Reduced Boilerplate**: No need to manually import composables, utilities, or Vue components.
+- **Custom Auto-Imports**: Define project-specific utilities that are auto-registered across the app.
+- **Scoped Imports**: Enable or disable auto-imports for specific directories to maintain structure.
+
+By leveraging auto-imports effectively, teams can introduce new units of functionality without disrupting existing code, making large-scale applications more maintainable.
+
+## Caching Management for Hard Problems
+
+Caching is a crucial aspect of optimizing performance, especially for applications dealing with high traffic or dynamic content. Nuxt provides several mechanisms to handle caching efficiently:
+
+- **Nitro Storage Layer**: Offers built-in key-value storage for caching API responses or computed data.
+- **Middleware Caching**: Cache expensive computations or API calls at the server level to reduce redundant processing.
+- **CDN and Edge Caching**: Deploy Nuxt apps to edge networks to serve content faster.
+- **Fine-Grained Control**: Configure caching policies per route or API to optimize different parts of the application.
+
+By implementing the right caching strategies, developers can significantly improve app performance, reduce load times, and handle scalability challenges more effectively.
+
+## Go out and build something!
+
+Nuxt is more than just a Vue framework—it’s a robust full-stack solution that streamlines development and scalability. From its built-in server-side capabilities to auto-import configurations and advanced caching strategies, Nuxt equips developers with powerful tools to solve complex problems efficiently.
+
+Stay tuned for the next part of our series, where we’ll explore Nuxt’s ecosystem and how it integrates with modern development workflows!

content/services/livechat.md

@@ -0,0 +1,26 @@
+---
+title: LiveChat custom development
+coverImage: https://www.livechat.com/tour/chats--hero_huff715b5b55884afe403ac6f300d757d4_241826_1856x0_resize_q75_h2_catmullrom_3.67a4d4e2301f60ac241dac3fef824ccf731078d93cb323c7d84e75d389670fa1.webp
+---
+
+Testing stands as a formidable pillar, ensuring the reliability and stability of applications. As developers, the choices we make regarding testing methodologies can significantly impact the quality of our code. In this exploration of the differences between unit and integration tests in frontend development, we emphasize that even a modest amount of testing is better than none at all.
+
+## Complex Dependencies in Frontend Components
+
+Frontend components often have intricate dependencies, ranging from external APIs to state management libraries. Unit testing, which aims to isolate and evaluate individual units of code in isolation, can be challenging in this context. Complex dependencies may require extensive mocking, making unit tests harder to write and maintain.
+
+## Simulating Real-world Scenarios with Integration Testing
+
+Integration testing steps in to address the limitations of unit testing in the frontend realm. By testing the collaboration between various components and services, integration tests provide a more holistic view of an application's behavior. This becomes crucial in simulating real-world scenarios, including slow network conditions and delayed user responses, that might not be adequately captured in unit tests.
+
+## The Need for Speed: Unit Tests vs. Integration Tests
+
+When it comes to speed, unit tests take the lead. The isolation of smaller units like utility functions and state management for testing means that unit tests can be executed swiftly. This quick turnaround time is crucial in a development environment where feedback loops need to be fast. For smaller units, where dependencies can be effectively managed, unit tests are the preferred choice.
+
+## Running Unit Tests on a Headless Browser
+
+For frontend unit tests, running them on a headless browser provides a more realistic environment compared to a Node.js simulation. A headless browser environment closely mirrors the conditions a user's browser experiences, ensuring that the tests are more representative of real-world scenarios. This approach contributes to the reliability of unit tests and enhances their value in ensuring frontend functionality.
+
+## Conclusion
+
+In the dynamic landscape of frontend development, the choice between unit and integration testing is not an either-or proposition but rather a strategic decision based on the specific needs of the project. While unit tests excel in speed and precision for smaller units, integration tests provide a more comprehensive evaluation of an application's behavior in complex scenarios. Striking the right balance between these testing methodologies is key to delivering a frontend that not only functions as intended but also performs robustly in diverse real-world conditions.

nuxt.config.ts

@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+
   modules: [
     "@nuxt/ui",
     "@nuxt/image",
@@ -9,9 +10,12 @@ export default defineNuxtConfig({
     "@vueuse/motion/nuxt",
     "@nuxt/content",
   ],
+
   content: {
     markdown: {
       anchorLinks: false,
     },
   },
+
+  compatibilityDate: "2025-03-15",
 });

package.json

@@ -12,7 +12,7 @@
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/image": "latest",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.16.0",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },

pages/articles/index.vue

@@ -16,7 +16,10 @@ definePageMeta({
   >
     <ContentList :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
       <div v-for="article in list" :key="article._path">
-        <ArticleListing :article="article" />
+        <ArticleListing
+          :article="article"
+          v-if="article._path?.startsWith('/articles')"
+        />
       </div>
     </ContentList>
   </UContainer>

pages/services/[...slug].vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { formatDate } from "@vueuse/core";
+
+definePageMeta({
+    layout: "content",
+});
+
+const { path } = useRoute();
+</script>
+
+<template>
+    <ContentDoc>
+        <template v-slot="{ doc }">
+            <UContainer
+                v-motion-fade
+                class="flex flex-col gap-3 prose dark:prose-invert"
+                as="article"
+            >
+                <h1>{{ doc.title }}</h1>
+            </UContainer>
+
+            <UContainer
+                class="hidden md:block"
+                as="figure"
+                v-if="doc.coverImage"
+                v-motion-fade
+                :delay="500"
+            >
+                <NuxtImg
+                    placeholder
+                    :src="doc.coverImage"
+                    :alt="doc.title"
+                    height="1000"
+                    width="1700"
+                    class="rounded-lg"
+                />
+            </UContainer>
+            <UContainer
+                v-motion-fade
+                :delay="500"
+                class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
+                as="article"
+            >
+                <ContentRenderer :value="doc" />
+            </UContainer>
+        </template>
+
+        <template #empty>
+            <h1>Document is empty</h1>
+        </template>
+    </ContentDoc>
+
+    <Footer v-motion-fade :delay="500" />
+</template>

public/livechat-logo.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 356 80" viewBox="0 0 356 80" xmlns="http://www.w3.org/2000/svg"><g fill="#1b1b20"><path d="m79.6 49.7c-.8 9.8-9.1 17.4-19 17.3h-10.5l-20 13v-13l20-13h10.5c3.1.1 5.7-2.2 6.1-5.3.6-10 .6-20-.2-30-.2-2.8-2.5-4.9-5.2-5.1-6.8-.4-14-.7-21.2-.7s-14.4.2-21.2.7c-2.8.2-5 2.3-5.2 5.1-.7 10-.8 20-.2 30 .3 3.1 3 5.3 6.1 5.2h10.5v13h-10.5c-9.9.1-18.2-7.4-19-17.3-.7-10.7-.6-21.3.2-32 .7-9 8-16.3 17.2-16.9 7.1-.5 14.6-.7 22.1-.7s15 .2 22.1.8c9.2.6 16.5 7.8 17.3 17 .7 10.6.8 21.3.1 31.9z"/><path d="m100.1 57.1h31.4v-7.9h-21.9v-39.7h-9.5z"/><path d="m136.1 57.1h9.2v-35.4h-9.2zm-.8-44.6c0 3 2.4 5.4 5.4 5.4s5.4-2.4 5.4-5.4-2.4-5.4-5.4-5.4c-2.9-.1-5.3 2.2-5.4 5z"/><path d="m181.6 21.7h-9.2l-7.6 25.9-7.6-25.9h-9.2l12 35.4h9.6z"/><path d="m198.1 57.9c7.8 0 14.1-4.7 15.4-11.2h-8.1c-.9 2.4-3.3 4.5-7.3 4.5-5.4 0-7.5-3.6-7.5-7.8v-.9h23.1v-6.2c0-8.5-5.3-15.5-15.8-15.5s-16.3 6.8-16.3 16.4v4.8c0 10 6.5 15.9 16.5 15.9zm-7.5-22.2c0-4.8 2-8.3 7.4-8.3 5 0 7.3 3.3 7.3 7.8v.8h-14.6v-.3z"/><path d="m238.3 58c12 0 19.5-8.2 19.9-17.9h-8.8c-.6 5.4-4 10.1-11.1 10.1-8 0-11.4-5.4-11.4-13.1v-7.7c0-7.6 3.4-13.1 11.4-13.1 7.1 0 10.5 4.7 11.1 10.1h8.8c-.5-9.7-7.9-17.9-19.9-17.9-14.4 0-20.8 9.2-20.8 21.3v6.8c0 12.2 6.4 21.4 20.8 21.4z"/><path d="m263.2 57.1h9.2v-21c0-4.8 2.6-7.2 6.8-7.2 4.5 0 6.5 2.9 6.5 7v21.1h9.2v-22.6c0-8.4-4.8-13.5-12.5-13.5-4.6 0-8.2 2-10 5v-18.5h-9.2z"/><path d="m312.6 57.9c4.1 0 8.6-1.7 10.2-4.1v3.3h8.9v-22.6c0-8.2-6-13.6-14.9-13.6-7.6 0-13.1 3.7-15.2 10.5h8.6c1-1.9 2.9-3.3 6.1-3.3 3.8 0 6.1 2.4 6.1 5.7v4.8c-2.6-2-5.7-3.1-9-3-8.5 0-14.3 3.5-14.3 11.2.1 6.9 5.6 11.1 13.5 11.1zm2.4-6.1c-3.9 0-6.8-1.9-6.8-5.2s2.7-5 7.1-5c4.1 0 7.2 1.8 7.2 5s-3.4 5.2-7.5 5.2z"/><path d="m349.1 57.1h6.4v-7.5h-3.8c-2.5 0-3.3-1-3.3-3.3v-17.1h7.5v-7.5h-7.5v-9.7h-9.3v9.7h-5v7.5h5v17.8c0 6.3 3.1 10.1 10 10.1z"/></g></svg>