docs: make code blocks collapsible (#7606)

* added collapsible code feature

* fixed side shadow

* fix build errors

* change design

* make code blocks collapsible

www/apps/book/app/advanced-development/modules/module-relationships/page.mdx

@@ -40,7 +40,7 @@ The Medusa application resolves these relationships while maintaining isolation
 
 Consider you’re creating a data model that adds custom fields associated with a product:
 
-```ts title="src/modules/hello/models/custom-product-data.ts" highlights={[["17"]]}
+```ts title="src/modules/hello/models/custom-product-data.ts" highlights={[["17"]]} collapsibleLines="1-8" expandButtonLabel="Show Imports"
 import { BaseEntity } from "@medusajs/utils"
 import { 
   Entity, 
@@ -83,7 +83,7 @@ export const relationshipsHighlight = [
   ["42", "foreignKey", "The name of the field in your data models referencing the other module’s model."],
 ]
 
-```ts title="src/modules/hello/service.ts" highlights={relationshipsHighlight}
+```ts title="src/modules/hello/service.ts" highlights={relationshipsHighlight} collapsibleLines="1-6" expandButtonLabel="Show Imports"
 // other imports...
 import { MyCustom } from "./models/custom-product-data"
 import { CustomProductData } from "./models/custom-product-data"

www/apps/book/app/advanced-development/modules/remote-link/page.mdx

@@ -12,28 +12,27 @@ The remote link is a class with utility methods to manage links defined by the l
 
 For example:
 
-```ts
+```ts collapsibleLines="1-9" expandButtonLabel="Show Imports"
 import { 
   MedusaRequest, 
   MedusaResponse,
 } from "@medusajs/medusa"
 import { 
-	ModuleRegistrationName, 
-	RemoteLink,
-} from "@medusajs/modules-sdk"
-import { 
-	ContainerRegistrationKeys,
+  ContainerRegistrationKeys,
 } from "@medusajs/utils"
+import { 
+  RemoteLink,
+} from "@medusajs/modules-sdk"
 
 export async function POST(
   req: MedusaRequest,
   res: MedusaResponse
 ): Promise<void> {
-	const remoteLink: RemoteLink = req.scope.resolve(
-	  ContainerRegistrationKeys.REMOTE_LINK
-	)
-	
-	// ...
+  const remoteLink: RemoteLink = req.scope.resolve(
+    ContainerRegistrationKeys.REMOTE_LINK
+  )
+    
+  // ...
 }
 ```
 

www/apps/book/app/advanced-development/modules/remote-query/page.mdx

@@ -28,7 +28,7 @@ export const exampleHighlights = [
   ["27", "remoteQuery", "Run the query using the remote query."]
 ]
 
-```ts title="src/api/store/query/route.ts" highlights={exampleHighlights} apiTesting testApiMethod="GET" testApiUrl="http://localhost:9000/store/query"
+```ts title="src/api/store/query/route.ts" highlights={exampleHighlights} apiTesting testApiMethod="GET" testApiUrl="http://localhost:9000/store/query" collapsibleLines="1-12" expandButtonLabel="Show Imports"
 import { 
   MedusaRequest, 
   MedusaResponse,
@@ -210,7 +210,7 @@ The remote query function alternatively accepts a string with GraphQL syntax as
 
     ### Basic GraphQL usage
 
-    ```ts title="src/api/store/query/route.ts" apiTesting testApiMethod="GET" testApiUrl="http://localhost:9000/store/query"
+    ```ts title="src/api/store/query/route.ts" apiTesting testApiMethod="GET" testApiUrl="http://localhost:9000/store/query" collapsibleLines="1-10" expandButtonLabel="Show Imports"
     import { 
       MedusaRequest, 
       MedusaResponse,

www/apps/book/app/advanced-development/modules/service-factory/page.mdx

@@ -146,7 +146,7 @@ export const typeArgsHighlights = [
   ["27", "AllModelsDTO", "The expected input/output type of the generated methods of every data model."],
 ]
 
-```ts title="src/modules/hello/service.ts" highlights={typeArgsHighlights}
+```ts title="src/modules/hello/service.ts" highlights={typeArgsHighlights} collapsibleLines="1-22" expandButtonLabel="Show More"
 import { ModulesSdkUtils } from "@medusajs/utils"
 import { MyCustom } from "./models/my-custom"