chore(showcase): add explaining comments

Author: maiieul

apps/website/src/components/code-snippet/code-snippet.tsx

@@ -3,15 +3,20 @@ import { useLocation } from '@builder.io/qwik-city';
 import { isDev } from '@builder.io/qwik/build';
 import { Highlight } from '../highlight/highlight';
 
-type CodeSnippetProps = QwikIntrinsicElements['div'] & {
-  name: string;
-};
+// The below `/src/routes/docs/**/**/snippets/*.tsx` pattern is here so that import.meta.glob works both for fluffy and headless routes.
+// For example:
+// /src/routes/docs/components/fluffy/modal/snippets/building-blocks.tsx
+// /src/routes/docs/components/headless/modal/snippets/building-blocks.tsx
 
 const rawCodeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*', {
   as: 'raw',
   eager: isDev ? false : true,
 });
 
+type CodeSnippetProps = QwikIntrinsicElements['div'] & {
+  name: string;
+};
+
 export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
   const location = useLocation();
 
@@ -26,8 +31,10 @@ export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
   const CodeSnippet = useSignal<string>();
 
   useTask$(async () => {
+    // We need to call `await rawCodeSnippets[snippetPath]()` in development as it is `eager:false`
     if (isDev) {
       CodeSnippet.value = await rawCodeSnippets[snippetPath]();
+      // We need to directly access the `components[componentPath]` expression in preview/production as it is `eager:true`
     } else {
       CodeSnippet.value = rawCodeSnippets[snippetPath];
     }

apps/website/src/components/showcase/showcase.tsx

@@ -13,7 +13,7 @@ import { useLocation } from '@builder.io/qwik-city';
 import { isDev } from '@builder.io/qwik/build';
 import { Highlight } from '../highlight/highlight';
 
-// The below patterns are here so that import.meta.glob works both for fluffy and headless routes.
+// The below `/src/routes/docs/**/**/examples/*.tsx` patterns are here so that import.meta.glob works both for fluffy and headless routes.
 // For example:
 // /src/routes/docs/components/fluffy/modal/examples/hero.tsx
 // /src/routes/docs/components/headless/modal/examples/hero.tsx
@@ -43,9 +43,11 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
   const ComponentRaw = useSignal<string>();
 
   useTask$(async () => {
+    // We need to call `await components[componentPath]()` in development as it is `eager:false`
     if (isDev) {
       Component.value = await components[componentPath]();
       ComponentRaw.value = await componentsRaw[componentPath]();
+      // We need to directly access the `components[componentPath]` expression in preview/production as it is `eager:true`
     } else {
       Component.value = components[componentPath];
       ComponentRaw.value = componentsRaw[componentPath];