From e8cf7c5a27ba4c86e0c0c52d0aaf50c4b6c5c0f4 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Sat, 20 Jul 2024 15:07:37 +0900
Subject: [PATCH] feat: add cloudflare warning

---
 package-lock.json                    |  4 ++--
 package.json                         |  2 +-
 src/app/connect/quick-connect.tsx    |  3 ++-
 src/app/connect/saved-connection.tsx | 13 +++++++++++++
 src/app/page.tsx                     | 15 +++++++++++----
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c3f9f2f5..fabae454 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@libsqlstudio/studio",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@libsqlstudio/studio",
-      "version": "0.5.1",
+      "version": "0.6.1",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.540.0",
         "@blocknote/core": "^0.12.1",
diff --git a/package.json b/package.json
index 8f19a4e2..d1b8641d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@libsqlstudio/studio",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": false,
   "scripts": {
     "dev": "next dev",
diff --git a/src/app/connect/quick-connect.tsx b/src/app/connect/quick-connect.tsx
index 5afafa59..69102fd3 100644
--- a/src/app/connect/quick-connect.tsx
+++ b/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
diff --git a/src/app/connect/saved-connection.tsx b/src/app/connect/saved-connection.tsx
index 603de2e4..19c460ce 100644
--- a/src/app/connect/saved-connection.tsx
+++ b/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}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6003d753..71c3aa30 100644
--- a/src/app/page.tsx
+++ b/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>