Add astro, temporarily

apps/studio/components/interfaces/Home/Connect/Connect.constants.ts

@@ -112,6 +112,20 @@ export const FRAMEWORKS: ConnectionType[] = [
       },
     ],
   },
+  {
+    key: 'astro',
+    label: 'Astro',
+    icon: 'astro',
+    guideLink: 'https://docs.astro.build/en/guides/backend/supabase/',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
   {
     key: 'refine',
     label: 'refine',

apps/studio/components/interfaces/Home/Connect/ConnectionIcon.tsx

@@ -13,7 +13,7 @@ const ConnectionIcon = ({ connection }: ConnectionIconProps) => {
     <Image
       className="transition-all group-hover:scale-110"
       src={`${BASE_PATH}/img/libraries/${connection.toLowerCase()}${
-        ['expo', 'nextjs', 'prisma', 'drizzle'].includes(connection.toLowerCase())
+        ['expo', 'nextjs', 'prisma', 'drizzle', 'astro'].includes(connection.toLowerCase())
           ? resolvedTheme?.includes('dark')
             ? '-dark'
             : ''

apps/studio/components/interfaces/Home/Connect/content/astro/content.tsx

@@ -0,0 +1,67 @@
+import { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+
+import {
+  ConnectTabs,
+  ConnectTabTriggers,
+  ConnectTabTrigger,
+  ConnectTabContent,
+} from 'components/interfaces/Home/Connect/ConnectTabs'
+import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+
+const ContentFile = ({ projectKeys }: ContentFileProps) => {
+  return (
+    <ConnectTabs>
+      <ConnectTabTriggers>
+        <ConnectTabTrigger value=".env.local" />
+        <ConnectTabTrigger value="src/db/supabase.js" />
+        <ConnectTabTrigger value="src/pages/index.astro" />
+      </ConnectTabTriggers>
+
+      <ConnectTabContent value=".env.local">
+        <SimpleCodeBlock className="bash" parentClassName="min-h-72">
+          {`
+SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
+SUPABASE_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
+        `}
+        </SimpleCodeBlock>
+      </ConnectTabContent>
+
+      <ConnectTabContent value="src/db/supabase.js">
+        <SimpleCodeBlock className="js" parentClassName="min-h-72">
+          {`
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = import.meta.env.SUPABASE_URL;
+const supabaseKey = import.meta.env.SUPABASE_KEY;
+
+export const supabase = createClient(supabaseUrl, supabaseKey);
+        `}
+        </SimpleCodeBlock>
+      </ConnectTabContent>
+
+      <ConnectTabContent value="src/pages/index.astro">
+        <SimpleCodeBlock className="html" parentClassName="min-h-72">
+          {`
+---
+import { supabase } from '../db/supabase';
+
+const { data, error } = await supabase.from("todos").select('*');
+---
+
+{
+  (
+    <ul>
+      {data.map((entry) => (
+        <li>{entry.name}</li>
+      ))}
+    </ul>
+  )
+}
+`}
+        </SimpleCodeBlock>
+      </ConnectTabContent>
+    </ConnectTabs>
+  )
+}
+
+export default ContentFile

apps/studio/public/img/libraries/astro-dark-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="100" viewBox="0 0 80 100"><path fill="#FFF" fill-rule="nonzero" d="M25.784 85.175c-4.517-4.13-5.836-12.807-3.954-19.093 3.264 3.963 7.786 5.219 12.47 5.927 7.23 1.094 14.332.685 21.049-2.62.768-.378 1.478-.882 2.318-1.391.63 1.828.794 3.674.574 5.553-.535 4.576-2.812 8.111-6.434 10.79-1.448 1.072-2.98 2.03-4.477 3.041-4.595 3.105-5.838 6.747-4.112 12.045.041.129.078.258.17.573-2.345-1.05-4.06-2.579-5.365-4.589-1.38-2.122-2.035-4.469-2.07-7.008-.017-1.236-.017-2.483-.183-3.701-.406-2.97-1.8-4.3-4.427-4.377-2.696-.078-4.829 1.588-5.394 4.213-.044.201-.106.4-.169.634l.004.003ZM0 65.034s13.377-6.516 26.792-6.516l10.115-31.303c.379-1.513 1.484-2.542 2.732-2.542 1.249 0 2.354 1.029 2.733 2.542l10.114 31.303c15.888 0 26.793 6.516 26.793 6.516L56.511 3.009C55.86 1.179 54.758 0 53.274 0H26.007c-1.484 0-2.54 1.179-3.237 3.009C22.72 3.131 0 65.034 0 65.034Z"/></svg>

apps/studio/public/img/libraries/astro-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="100" viewBox="0 0 80 100"><path fill="#17191E" fill-rule="nonzero" d="M25.784 85.175c-4.517-4.13-5.836-12.807-3.954-19.093 3.264 3.963 7.786 5.219 12.47 5.927 7.23 1.094 14.332.685 21.049-2.62.768-.378 1.478-.882 2.318-1.391.63 1.828.794 3.674.574 5.553-.535 4.576-2.812 8.111-6.434 10.79-1.448 1.072-2.98 2.03-4.477 3.041-4.595 3.105-5.838 6.747-4.112 12.045.041.129.078.258.17.573-2.345-1.05-4.06-2.579-5.365-4.589-1.38-2.122-2.035-4.469-2.07-7.008-.017-1.236-.017-2.483-.183-3.701-.406-2.97-1.8-4.3-4.427-4.377-2.696-.078-4.829 1.588-5.394 4.213-.044.201-.106.4-.169.634l.004.003ZM0 65.034s13.377-6.516 26.792-6.516l10.115-31.303c.379-1.513 1.484-2.542 2.732-2.542 1.249 0 2.354 1.029 2.733 2.542l10.114 31.303c15.888 0 26.793 6.516 26.793 6.516L56.511 3.009C55.86 1.179 54.758 0 53.274 0H26.007c-1.484 0-2.54 1.179-3.237 3.009C22.72 3.131 0 65.034 0 65.034Z"/></svg>