feat: add cloudflare warning

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libsqlstudio/studio",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": false,
   "scripts": {
     "dev": "next dev",

src/app/connect/quick-connect.tsx

@@ -9,7 +9,7 @@ import {
   prefillConnectionString,
   validateConnectionString,
 } from "./saved-connection-storage";
-import { RqliteInstruction } from "./saved-connection";
+import { CloudflareWarning, RqliteInstruction } from "./saved-connection";
 import ConnectionStringInput from "./connection-string-input";
 
 export default function QuickConnect({
@@ -45,6 +45,7 @@ export default function QuickConnect({
       onClose={onClose}
     >
       {driver === "rqlite" && <RqliteInstruction />}
+      {driver === "cloudflare-d1" && <CloudflareWarning />}
 
       <ConnectionStringInput
         autoFocus

src/app/connect/saved-connection.tsx

@@ -27,6 +27,16 @@ export function RqliteInstruction() {
   );
 }
 
+export function CloudflareWarning() {
+  return (
+    <div className="bg-secondary p-4 mb-4 text-sm">
+      To bypass CORS (Cross-Origin Resource Sharing) restrictions, we will route
+      your request through our server. If you are fine with this, please
+      proceed.
+    </div>
+  );
+}
+
 export default function SaveConnection({
   user,
   driver,
@@ -95,6 +105,9 @@ export default function SaveConnection({
       {step === "config" && (
         <>
           {driver === "rqlite" && storage === "local" && <RqliteInstruction />}
+          {driver === "cloudflare-d1" && storage === "local" && (
+            <CloudflareWarning />
+          )}
           <SavedConnectionConfig
             driver={driver}
             onClose={onClose}

src/app/page.tsx

@@ -13,6 +13,7 @@ export const metadata: Metadata = {
     "libsql",
     "rqlite",
     "sqlite",
+    "cloudflare d1",
     "studio",
     "browser",
     "editor",
@@ -118,8 +119,9 @@ function HeroSection() {
 
       <p className="text-center max-w-[700px] mx-auto mt-6 text-lg">
         LibSQL Studio is a fully-featured, lightweight GUI client for managing
-        SQLite-based databases like Turso, LibSQL, and rqlite. It runs entirely
-        in your browser, so there&apos;s no need to download anything.
+        SQLite-based databases like Turso, LibSQL, Cloudflare D1 and rqlite. It
+        runs entirely in your browser, so there&apos;s no need to download
+        anything.
       </p>
 
       <div className="flex gap-4 justify-center mt-12">
@@ -147,9 +149,14 @@ function SupportDriver() {
             className="h-16 rounded-xl"
             alt="rqlite"
           />
-          <img src="/turso.jpeg" className="h-16 rounded-xl" alt="rqlite" />
+          <img src="/turso.jpeg" className="h-16 rounded-xl" alt="turso" />
+          <img
+            src="/cloudflare.png"
+            className="h-16 rounded-xl"
+            alt="cloudflare d1"
+          />
           <img src="/rqlite.png" className="h-16 rounded-xl" alt="rqlite" />
-          <img src="/valtown.svg" className="h-16 rounded-xl" alt="rqlite" />
+          <img src="/valtown.svg" className="h-16 rounded-xl" alt="valtown" />
         </div>
       </div>
     </div>