Improve Surrealist mini embeds (#922)

src/components/SurrealistMini.astro

@@ -1,30 +1,39 @@
 ---
 type Props = {
-    dataset?: 'surreal-deal';
+    url?: string;
+    dataset?: 'surreal-deal-store';
     setup?: string;
     query?: string;
     variables?: string | Record<string, unknown>;
-    theme?: 'automatic' | 'light' | 'dark';
-    url?: string;
+    theme?: 'auto' | 'light' | 'dark';
     height?: string;
+    compact?: boolean;
+    transparent?: boolean;
+};
+
+const { url, height, ...props } = Astro.props;
+const endpoint = new URL(url ?? 'https://surrealist.app/mini');
+const config = new URLSearchParams(endpoint.search);
+
+const values = {
+    compact: true,
+    theme: 'auto',
+    ...props,
 };
 
-const { url: _url, height, ...props } = Astro.props;
+for (const [k, v] of Object.entries(values)) {
+    if (v === false) {
+        config.delete(k);
+    } else {
+        config.set(k, typeof v === 'string' ? v : JSON.stringify(v));
+    }
+}
 
-props.variables =
-    typeof props.variables === 'string'
-        ? props.variables
-        : JSON.stringify(props.variables);
-const stringified = Object.fromEntries(
-    Object.entries(props).map(([k, v]) => [k, (v ?? '').toString()])
-);
-const search = new URLSearchParams(stringified).toString();
-// biome-ignore lint/style/useTemplate: We join here because otherwise it becomes a string literal nesting mess
-const url = (_url ?? `https://surrealist.app/mini?${search}`) + '&compact';
+endpoint.search = config.toString();
 ---
 
 <iframe 
-    src={url} 
+    src={endpoint.toString()} 
     style={{
         width: '100%', 
         height: height ?? '600px', 

src/pages/404.astro

@@ -17,8 +17,9 @@ import BaseLayout from '@components/layout/BaseLayout.astro';
                 While you're here, try some queries on Surrealist
             </p>
             <SurrealistMini
-                url="https://surrealist.app/mini?dataset=surreal-deal&query=%2F%2Fshow+complete+information+for+database+%0AINFO+FOR+DB%3B+%0A%0A%2F%2F+Select+all+from+artist+table+%0ASELECT+*+FROM+artist%3B%0A%0A%2F%2F+Select+specific+field+within+table+%0ASELECT+address.city+FROM+artist+%0A%0A%2F%2F+Add+your+queries+%F0%9F%98%83%0A%0A"
-            />
+                url="https://surrealist.app/mini?query=%2F%2F+Select+all+product+names%0ASELECT+name+FROM+product%3B%0A%0A%2F%2F+Select+most+recently+updated+products%0ASELECT+*+FROM+product+ORDER+BY+time.updated_at+DESC+LIMIT+3%3B%0A%0A%2F%2F+Write+your+own+queries%21+%F0%9F%98%83%0A&dataset=surreal-deal-store"
+				compact={false}
+			/>
         </div>
     </div>
 </BaseLayout>