Skip to content

Commit 0045213

Browse files
invisalinvisal
committed
add mysql landing page
1 parent 8d95d95 commit 0045213

2 files changed

Lines changed: 142 additions & 4 deletions

File tree

‎src/app/(public)/databases/mysql/page.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { MySQLIcon } from "@/components/icons/outerbase-icon";
2+
import WebsiteLayout from "@/components/website-layout";
3+
import { Metadata } from "next";
4+
5+
const siteDescription =
6+
"LibSQL Studio is a fully-featured, lightweight GUI client for managing MySQL databases";
7+
8+
export const metadata: Metadata = {
9+
title: "MySQL - LibSQL Studio",
10+
keywords: ["mysql", "studio", "browser", "editor", "gui", "online", "client"],
11+
description: siteDescription,
12+
openGraph: {
13+
siteName: "LibSQL Studio",
14+
description: siteDescription,
15+
},
16+
};
17+
18+
function HeroSection() {
19+
return (
20+
<div className="mt-32 relative h-[428px]">
21+
<div
22+
className="absolute top-0 bottom-0 left-0 right-0 transform-gpu before:absolute before:top-0 before:z-10 before:h-32 before:w-full before:bg-gradient-to-b before:from-black before:to-black/0 after:absolute after:bottom-0 after:left-0 after:h-full after:w-full after:bg-gradient-to-t after:from-black after:to-black/0"
23+
style={{
24+
background: `url(/hero-banner.jpg)`,
25+
backgroundPosition: "center",
26+
backgroundSize: "cover",
27+
}}
28+
></div>
29+
30+
<div className="absolute top-0 bottom-0 left-0 right-0 -mt-16">
31+
<div className="mx-auto container">
32+
<h2 className="text-4xl flex gap-4 items-center font-bold text-white">
33+
<MySQLIcon />
34+
<span>MySQL Support</span>
35+
</h2>
36+
<p className="max-w-[700px] mt-6 text-lg">
37+
LibSQL Studio is a lightweight, fully-featured GUI client for MySQL
38+
databases. It enables you to manage and view your database, or
39+
expose your database interface externally and much more.
40+
</p>
41+
</div>
42+
</div>
43+
</div>
44+
);
45+
}
46+
47+
export default function DatabaseMySqlPage() {
48+
return (
49+
<WebsiteLayout>
50+
<HeroSection />
51+
52+
<div className="container mx-auto my-24">
53+
<h2 className="text-2xl flex gap-4 items-center font-bold text-white mb-4">
54+
Connecting
55+
</h2>
56+
57+
<p>
58+
You can connect to your MySQL database using our command line
59+
interface.
60+
</p>
61+
62+
<pre className="my-4 p-4 border-2 bg-zinc-900 text-white rounded">
63+
<div>
64+
&gt;&nbsp;npx{" "}
65+
<span className="text-yellow-500 mr-2">@outerbase/studio</span>
66+
<span className="text-green-500">
67+
mysql://root:123@localhost:3306/chinook
68+
</span>
69+
</div>
70+
<div className="border-double border-4 border-gray-400 border-white inline-block mt-4 text-gray-400">
71+
<div>{" "}</div>
72+
<div>{" Serving! "}</div>
73+
<div>{" - Local: http://localhost:4000 "}</div>
74+
<div>{" - Network: http://xxx.xxx.xxx.xxx:4000 "}</div>
75+
<div>{" "}</div>
76+
</div>
77+
</pre>
78+
79+
<p>
80+
You can also configure the port and secure it with authentication.
81+
</p>
82+
83+
<pre className="my-4 p-4 border-2 bg-zinc-900 text-white rounded">
84+
<div>
85+
<div>
86+
&gt;&nbsp;npx{" "}
87+
<span className="text-yellow-500 mr-2">@outerbase/studio</span> \
88+
</div>
89+
<div className="ml-8">--port=5000 \</div>
90+
<div className="ml-8">--user=admin --pass=123 \</div>
91+
<div className="ml-8">
92+
<span className="text-green-500">
93+
mysql://root:123@localhost:3306/chinook
94+
</span>
95+
</div>
96+
</div>
97+
</pre>
98+
99+
<h2 className="text-2xl flex gap-4 items-center font-bold text-white my-4 mt-12">
100+
Configuration File
101+
</h2>
102+
103+
<p>
104+
Tired of typing long connection strings repeatedly? Simply save the
105+
configuration to a file and use it whenever needed. Create{" "}
106+
<span className="font-mono text-white">outerbase.json</span>
107+
</p>
108+
109+
<pre className="my-4 p-4 border-2 bg-zinc-900 text-white rounded">
110+
{`{
111+
"driver": "mysql",
112+
"connection": {
113+
"database": "chinook",
114+
"host": "localhost",
115+
"port": 3306,
116+
"user": "root",
117+
"password": "123456"
118+
}
119+
}
120+
`}
121+
</pre>
122+
123+
<p>
124+
Next, run our command line tool to start the service. By default, it
125+
will search for the{" "}
126+
<span className="font-mono text-white">outerbase.json</span>{" "}
127+
configuration file. Alternatively, you can specify a custom
128+
configuration using the{" "}
129+
<span className="font-mono text-white">--config</span> flag.
130+
</p>
131+
132+
<pre className="my-4 p-4 border-2 bg-zinc-900 text-white rounded">
133+
<div>
134+
&gt;&nbsp;npx{" "}
135+
<span className="text-yellow-500 mr-2">@outerbase/studio</span>
136+
</div>
137+
</pre>
138+
</div>
139+
</WebsiteLayout>
140+
);
141+
}

‎src/app/(public)/page.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,12 +125,9 @@ function SupportDriver() {
125125
</span>
126126
</DatabaseBlock>
127127

128-
<DatabaseBlock center link="#">
128+
<DatabaseBlock center link="/databases/mysql">
129129
<MySQLIcon />
130130
<span>MySQL</span>
131-
<span className="text-xs -mt-2 text-yellow-500">
132-
Coming Soon 15th Sep 2024
133-
</span>
134131
</DatabaseBlock>
135132

136133
<DatabaseBlock center link="#">

0 commit comments

Comments
 (0)