Merge pull request #543 from maiieul/fix-free-invalid-size

fix(dev server): fix err: "free(): invalid size"

Author: thejackshelton

apps/website/src/media/astro-cli.webp renamed to apps/website/public/images/astro-cli.webp

@@ -2,7 +2,7 @@
 title: 'Qwik UI | Fluffy (styled) Kit - Introduction'
 ---
 
-import ImgQwikUiFluffyCreatureScreen from '/public/images/qwik-ui-fluffy-creature-screen.webp?jsx';
+import FluffyCreatureScreen from '/images/qwik-ui-fluffy-creature-screen.webp';
 
 # Fluffy (styled) Kit
 
@@ -18,4 +18,4 @@ The Fluffy Kit offers a powerful solution for developers looking to create visua
 
 The Headless Kit is designed to work hand-in-hand with the Qwik framework. This means that, as a developer, you can enjoy the performance benefits and SEO advantages of Qwik while having a beautiful, consistent design out of the box. It's the perfect combination: the cutting-edge technology of Qwik, paired with the modern design aesthetics of Tailwind CSS.
 
-<ImgQwikUiFluffyCreatureScreen />;
+<image src={FluffyCreatureScreen} />;

apps/website/src/media/qwik-city-cli.webp renamed to apps/website/public/images/qwik-city-cli.webp

@@ -4,9 +4,9 @@ title: 'Qwik UI - Installation'
 
 import QwikLogo from '~/components/icons/QwikLogo.tsx';
 import AstroLogo from '~/components/icons/AstroLogo.tsx';
-import QwikCityCLI from '~/media/qwik-city-cli.webp?jsx';
-import AstroCLI from '~/media/astro-cli.webp?jsx';
-import QwikdevAstroCLI from '~/media/qwikdev-astro-cli.webp?jsx';
+import qwikCityCLI from '/images/qwik-city-cli.webp';
+import astroCLI from '/images/astro-cli.webp';
+import qwikdevAstroCLI from '/images/qwikdev-astro-cli.webp';
 import { ConfettiButton } from './confetti-button';
 
 export const packages = {
@@ -78,7 +78,7 @@ Install Qwik UI with your choice of package manager below:
     Let's select the `empty app` option in the CLI to keep it simple. And remember, choosing the dad joke is not optional - it's mandatory! We have a highly sophisticated Dad Joke Detection System (DJDS) in place, so we'll know if you didn't!
 
     <div class="-mx-6 lg:-mx-8">
-        <QwikCityCLI class="block max-w-full rounded-md mb-6 border" />
+        <image src={qwikCityCLI} class="block max-w-full rounded-md mb-6 border" />
     </div>
 
     Below is the Qwik City project structure. Inside of the `src` directory, let's create a new folder called `accordion`. Then, a file named **`accordion.tsx`** inside of `src/components`.
@@ -138,7 +138,7 @@ Install Qwik UI with your choice of package manager below:
     Add a relative path for your project, and select the `empty` option in the CLI.
 
     <div class="-mx-6 lg:-mx-8">
-        <AstroCLI class="block max-w-full rounded-md mb-6 border" />
+        <image src={astroCLI} class="block max-w-full rounded-md mb-6 border" />
     </div>
 
     Next, let's add the [@qwikdev/astro](https://www.npmjs.com/package/@qwikdev/astro) integration. This integration allows us to leverage resumability and Qwik components inside of Astro.
@@ -148,7 +148,7 @@ Install Qwik UI with your choice of package manager below:
     <InstallSnippet packages={qwikAstroCliPackages} />
 
     <div class="-mx-6 lg:-mx-8">
-        <QwikdevAstroCLI class="block max-w-full rounded-md mb-6 border" />
+        <image src={qwikdevAstroCLI} class="block max-w-full rounded-md mb-6 border" />
     </div>
 
     Then, let's make sure we use Qwik as our main **jsxImportSource** in `tsconfig.json`. Otherwise, it will not get the proper Qwik types.

apps/website/src/media/qwikdev-astro-cli.webp renamed to apps/website/public/images/qwikdev-astro-cli.webp

@@ -2,7 +2,7 @@
 title: Qwik UI | Introduction
 ---
 
-import HeadlessArt from '/public/images/qwik-ui-headless-hero.webp?jsx';
+import headlessHero from '/images/qwik-ui-headless-hero.webp';
 import { Note } from '~/components/note/note';
 import {
   AccordionRoot,
@@ -53,11 +53,14 @@ This means that Qwik UI can operate with any meta-framework that supports Qwik,
 
 Qwik values HTML as the source of truth, and this principle extends to Qwik UI components. We appreciate and adopt the excellent work done by the [Open UI Group](https://open-ui.org/) when appropriate.
 
-<div class="mx-[-24px] mx-[-32px]">
-  <HeadlessArt class="dark:shadow-dark-high shadow-dark-low rounded-lg border-2 border-white" />
+<div class="mx-[-24px] lg:mx-[-32px]">
+  <image
+    src={headlessHero}
+    class="dark:shadow-dark-high shadow-dark-low rounded-lg border-2 border-white"
+  />
 </div>
 
-<br />{' '}
+<br />
 
 This approach also encompasses future native APIs. Users of Qwik UI might find themselves using components that can be gradually adopted into the native specification. This implies that, eventually, these custom patterns might not need any JavaScript.
 

apps/website/src/routes/docs/fluffy/(getting-started)/introduction/index.mdx

@@ -2,7 +2,7 @@
 title: Qwik UI | Modal
 ---
 
-import ImgTestImage from '/public/images/test-image.png?jsx';
+import testImage from '/images/test-image.png';
 
 import { statusByComponent } from '~/_state/component-statuses';
 
@@ -99,7 +99,7 @@ Custom signal binds are like a remote control for components, controlling states
 
 ## The Top Layer
 
-<ImgTestImage class="mb-6 rounded-xl" />
+<image src={testImage} class="mb-6 rounded-xl" />
 
 In Chrome and Edge, a `top layer` UI button is shown in the dev tools. This means the element content is placed above any other content on the page, preventing any overflow or style issues.