fix: implement proper Astro environment variables for Hugging Face deployment

- Replace vite.define with Astro's native env schema system
- Use astro:env/client imports for client-side environment variables
- Update environment variable access to use SUPABASE_URL and SUPABASE_ANON_KEY
- Add Hugging Face deployment instructions to .env.example
- Ensure environment variables are properly exposed to browser

.env.example

@@ -14,4 +14,6 @@ SUPABASE_ANON_KEY=your_supabase_anon_key
 # 4. Replace the placeholder values above
 # 5. Save this file as .env (remove the .example extension)
 # 6. Run the SQL queries from README.md to set up your database
-# =================================================================
+# 7. For Hugging Face Spaces, add these as regular environment variables
+#    (not secrets) with the same names: SUPABASE_URL, SUPABASE_ANON_KEY
+# =================================================================

astro.config.mjs

@@ -1,14 +1,14 @@
-import { defineConfig } from "astro/config";
+import { defineConfig, envField } from "astro/config";
 
 export default defineConfig({
   server: {
     host: true,
     port: 4321,
   },
-  vite: {
-    define: {
-      'import.meta.env.SUPABASE_URL': JSON.stringify(process.env.SUPABASE_URL),
-      'import.meta.env.SUPABASE_ANON_KEY': JSON.stringify(process.env.SUPABASE_ANON_KEY),
-    }
-  }
+  env: {
+    schema: {
+      SUPABASE_URL: envField.string({ context: "client", access: "public" }),
+      SUPABASE_ANON_KEY: envField.string({ context: "client", access: "public" }),
+    },
+  },
 });

src/pages/index.astro

@@ -2,6 +2,7 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { loadSpeakingData, loadWritingData } from '../utils/loadData';
 import LoginForm from '../components/LoginForm.astro';
+import { SUPABASE_URL, SUPABASE_ANON_KEY } from 'astro:env/client';
 
 const ITEMS_PER_PAGE = 5;
 
@@ -223,7 +224,7 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
   </main>
   </div>
 
-  <script define:vars={{ supabaseUrl: import.meta.env.SUPABASE_URL, supabaseAnonKey: import.meta.env.SUPABASE_ANON_KEY, defaultCategory, speakingRecords, writingRecords }} type="module">
+  <script define:vars={{ supabaseUrl: SUPABASE_URL, supabaseAnonKey: SUPABASE_ANON_KEY, defaultCategory, speakingRecords, writingRecords }} type="module">
     // Import Supabase
     import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';