Gel (#514)

* refactor: replace EdgeDB with Gel

* Add Gel Get Started, logos and connections

---------

Co-authored-by: Vlad Stohnii <[email protected]>

Author: AndriiSherman

public/svg/gel_dark.svg

@@ -15,6 +15,7 @@
 
   "Connect::",
   ["get-started-postgresql", "PostgreSQL"],
+  ["get-started-gel", "Gel"],
   ["get-started-mysql", "MySQL"],
   ["get-started-sqlite", "SQLite"],
   ["get-started-singlestore", "SingleStore"],

public/svg/gel_light.svg

@@ -0,0 +1,66 @@
+import Tab from '@mdx/Tab.astro';
+import Tabs from '@mdx/Tabs.astro';
+import Npm from "@mdx/Npm.astro";
+import Callout from '@mdx/Callout.astro';
+import Steps from '@mdx/Steps.astro';
+import AnchorCards from '@mdx/AnchorCards.astro';
+import Prerequisites from "@mdx/Prerequisites.astro";
+import CodeTabs from "@mdx/CodeTabs.astro";
+import WhatsNextPostgres from "@mdx/WhatsNextPostgres.astro";
+
+# Drizzle \<\> PostgreSQL
+<Prerequisites>
+- Database [connection basics](/docs/connect-overview) with Drizzle
+- gel-js [basics](https://github.com/geldata/gel-js)
+</Prerequisites>
+
+Drizzle has native support for Gel connections with the `gel-js` client.
+
+#### Step 1 - Install packages
+<Npm>
+drizzle-orm gel
+-D drizzle-kit
+</Npm>
+
+#### Step 2 - Initialize the driver and make a query
+<CodeTabs items={["gel", "gel with config"]}>
+```typescript copy
+// Make sure to install the 'gel' package 
+import { drizzle } from 'drizzle-orm/gel';
+
+const db = drizzle(process.env.DATABASE_URL);
+ 
+const result = await db.execute('select 1');
+```
+```typescript copy
+// Make sure to install the 'gel' package
+import { drizzle } from "drizzle-orm/gel";
+
+// You can specify any property from the gel connection options
+const db = drizzle({
+  connection: {
+    dsn: process.env.DATABASE_URL,
+    tlsSecurity: "default",
+  },
+});
+
+const result = await db.execute("select 1");
+```
+</CodeTabs>
+
+If you need to provide your existing driver:
+
+```typescript copy
+// Make sure to install the 'gel' package 
+import { drizzle } from "drizzle-orm/gel";
+import { createClient } from "gel";
+
+const gelClient = createClient();
+const db = drizzle({ client: gelClient });
+
+const result = await db.execute('select 1');
+```
+
+#### What's next?
+
+<WhatsNextPostgres/>

public/svg/gel_logo_letters.svg

@@ -1,6 +1,8 @@
 [
   ["postgresql-new", "PostgreSQL"],
   ["postgresql-existing", "PostgreSQL"],
+  ["gel-new", "Gel"],
+  ["gel-existing", "Gel"],
   ["singlestore-new", "SingleStore"],
   ["singlestore-existing", "SingleStore"],
   ["neon-new", "PostgreSQL"],

public/svg/gel_transparent.svg

@@ -0,0 +1,155 @@
+import Tab from '@mdx/Tab.astro';
+import Tabs from '@mdx/Tabs.astro';
+import Npm from "@mdx/Npm.astro";
+import Npx from "@mdx/Npx.astro";
+import Callout from '@mdx/Callout.astro';
+import Steps from '@mdx/Steps.astro';
+import AnchorCards from '@mdx/AnchorCards.astro';
+import Breadcrumbs from '@mdx/Breadcrumbs.astro';
+import Prerequisites from "@mdx/Prerequisites.astro";
+import CodeTabs from "@mdx/CodeTabs.astro";
+import FileStructure from '@mdx/get-started/FileStructure.mdx';
+import InstallPackages from '@mdx/get-started/InstallPackages.mdx';
+import ConnectPostgreSQL from '@mdx/get-started/postgresql/ConnectPostgreSQL.mdx'
+import CreateTable from '@mdx/get-started/postgresql/CreateTable.mdx'
+import SetupConfig from '@mdx/get-started/SetupConfig.mdx';
+import ApplyChanges from '@mdx/get-started/ApplyChanges.mdx';
+import RunFile from '@mdx/get-started/RunFile.mdx';
+import QueryDatabase from '@mdx/get-started/QueryDatabase.mdx';
+import SetupEnv from '@mdx/get-started/SetupEnv.mdx';
+
+<Breadcrumbs/>
+
+# Get Started with Drizzle and Gel in existing project
+
+<Prerequisites>
+  - **tsx** - package for running TypeScript files - [read here](https://tsx.is/)
+  - **gel-js** - package for querying your Gel database - [read here](https://github.com/geldata/gel-js)
+  - **gel** - cli tool to manage your Gel database - [read here](https://docs.edgedb.com/get-started/cli)
+</Prerequisites>
+
+Drizzle has native support for Gel connections with the `gel` client.
+
+This is the basic file structure of the project. In the `src` directory, we have table definition in `index.ts`. In `drizzle` folder there are generated Gel to Drizzle schema
+
+```plaintext
+📦 <project root>
+ ├ 📂 drizzle
+ ├ 📂 dbschema
+ │ ├ 📂 migrations
+ │ ├ 📜 default.esdl
+ │ └ 📜 scoping.esdl
+ ├ 📂 src
+ │ └ 📜 index.ts
+ ├ 📜 drizzle.config.ts
+ ├ 📜 edgedb.toml
+ ├ 📜 package.json
+ └ 📜 tsconfig.json
+```
+
+#### Step 4 - Install **gel** package
+<Npm>
+  drizzle-orm gel
+  -D drizzle-kit tsx
+</Npm>
+
+#### Step 5 - Setup Drizzle config file
+
+**Drizzle config** - a configuration file that is used by [Drizzle Kit](/docs/kit-overview) and contains all the information about your database connection, migration folder and schema files.
+
+Create a `drizzle.config.ts` file in the root of your project and add the following content:
+
+```typescript copy filename="drizzle.config.ts"
+import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+  dialect: 'gel',
+});
+```
+
+#### Step 6 - Pull Gel types to Drizzle schema
+
+Pull your database schema:
+<Npx>
+drizzle-kit pull
+</Npx>
+
+Here is an example of the generated schema.ts file:
+
+```ts
+// drizzle/schema.ts
+import { gelTable, uniqueIndex, uuid, smallint, text } from "drizzle-orm/gel-core"
+import { sql } from "drizzle-orm"
+
+export const users = gelTable("users", {
+	id: uuid().default(sql`uuid_generate_v4()`).primaryKey().notNull(),
+	age: smallint(),
+	email: text().notNull(),
+	name: text(),
+}, (table) => [
+	uniqueIndex("a8c6061c-f37f-11ef-9249-0d78f6c1807b;schemaconstr").using("btree", table.id.asc().nullsLast().op("uuid_ops")),
+]);
+```
+
+#### Step 6 - Connect Drizzle ORM to the database
+
+Create a `index.ts` file in the `src` directory and initialize the connection:
+
+```typescript copy
+import { drizzle } from "drizzle-orm/gel";
+import { createClient } from "gel";
+
+const gelClient = createClient();
+const db = drizzle({ client: gelClient });
+```
+
+#### Step 7 - Query the database
+
+```typescript copy filename="src/index.ts"
+import { eq } from "drizzle-orm";
+import { drizzle } from "drizzle-orm/gel";
+import { createClient } from "gel";
+import { users } from "../drizzle/schema";
+
+const gelClient = createClient();
+const db = drizzle({ client: gelClient });
+
+async function main() {
+  const user: typeof users.$inferInsert = {
+    name: "John",
+    age: 30,
+    email: "[email protected]",
+  };
+
+  await db.insert(users).values(user);
+  console.log("New user created!");
+
+  const usersResponse = await db.select().from(users);
+  console.log("Getting all users from the database: ", usersResponse);
+  /*
+  const users: {
+    id: number;
+    name: string;
+    age: number;
+    email: string;
+  }[]
+  */
+
+  await db
+    .update(users)
+    .set({
+      age: 31,
+    })
+    .where(eq(users.email, user.email));
+  console.log("User info updated!");
+
+  await db.delete(users).where(eq(users.email, user.email));
+  console.log("User deleted!");
+}
+
+main();
+```
+
+#### Step 8 - Run index.ts file
+
+<RunFile/>