[sea-orm-pro] IMG

sea-orm-pro/docs/01-index.md

@@ -12,14 +12,16 @@
 
     2.2 [Getting Started with Axum](02-install-and-config/02-getting-started-axum.md)
 
+2. Playground
+
+    2.1 [Live Demo](02-playground/01-live-demo.md)
+
 3. Site Config
 
     3.1 [Overview](03-site-config/01-overview.md)
 
     3.2 [Theme](03-site-config/02-theme.md)
 
-AdventureWorks
-
 4. Raw Table Config
 
     4.1 [Overview](04-raw-table-config/01-overview.md)

sea-orm-pro/docs/02-playground/01-live-demo.md

@@ -0,0 +1,24 @@
+# Live Demo
+
+Try SeaORM Pro in your browser, without installing anything!
+
+1. Visit [https://sea-orm-pro-demo.sea-ql.org/admin/](https://sea-orm-pro-demo.sea-ql.org/admin/)
+2. Login with the following credential
+    ```
+    Username: [email protected]
+    Password: [email protected]
+    ```
+
+## Run Locally
+
+Clone the source code from GitHub and follow the instruction on README for installation guide:
+- [SeaORM Pro](https://github.com/SeaQL/sea-orm-pro) with full CRUD support, Rust backend and access to the frontend artifact.
+- [SeaORM Pro Plus](https://github.com/SeaQL/sea-orm-pro-plus) provides additional features and access to the frontend source code.
+
+## Database Schema
+
+We use [`AdventureWorksLT2012`](https://github.com/Microsoft/sql-server-samples/releases/tag/adventureworks2012) database schema for the demo.
+
+<img src="/sea-orm-pro/img/AdventureWorksLT.svg" className="dark-mode" />
+
+In the following section, we will explain the configuration of admin panel in details with `AdventureWorksLT2012` as the sample database.

sea-orm-pro/docs/02-playground/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Playground",
+  "collapsed": false
+}

sea-orm-pro/src/pages/index.js

@@ -27,7 +27,7 @@ function HomepageHeader() {
               <a href="docs/install-and-config/getting-started-loco/" class="inline-flex w-full items-center justify-center rounded-lg border border-transparent bg-gradient-to-br from-green-300 to-blue-green-300 px-6 py-3.5 text-center font-semibold text-gray-900 transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-300/50 sm:w-auto sm:px-8 request-license-btn hover-btn">
                 Getting Started
               </a>
-              <a href="https://github.com/SeaQL/sea-orm-pro" target="_blank" class="inline-flex w-full items-center justify-center rounded-lg border border-transparent bg-gray-900 px-6 py-3.5 text-center font-semibold text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-300/50 sm:w-auto sm:px-8 hover-btn">
+              <a href="docs/playground/live-demo/" class="inline-flex w-full items-center justify-center rounded-lg border border-transparent bg-gray-900 px-6 py-3.5 text-center font-semibold text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-300/50 sm:w-auto sm:px-8 hover-btn">
                 Try the Demo
               </a>
             </div>
@@ -39,8 +39,8 @@ function HomepageHeader() {
           <div class="relative">
             <img class="hidden max-w-none rounded-xl border-2 border-gray-200 md:block dark:md:hidden" width="1008" src="img/01_banner.png" />
             <img class="max-w-none rounded-xl border-2 border-gray-200 dark:hidden md:hidden" width="720" src="img/01_banner.png" />
-            <img class="hidden max-w-none rounded-xl border-2 border-transparent dark:hidden dark:md:block" width="1008" src="img/01_banner.png" />
-            <img class="hidden max-w-none rounded-xl border-2 border-transparent dark:block dark:md:hidden" width="720" src="img/01_banner.png" />
+            <img class="hidden max-w-none rounded-xl border-2 border-transparent dark:hidden dark:md:block" width="1008" src="img/01_banner_dark.png" />
+            <img class="hidden max-w-none rounded-xl border-2 border-transparent dark:block dark:md:hidden" width="720" src="img/01_banner_dark.png" />
           </div>
         </div>
       </div>
@@ -74,13 +74,13 @@ function HomepageSlogan() {
               <img class="dark:hidden object-cover" src="img/02_login.png" />
               <img class="hidden dark:block object-cover" src="img/02_login.png" />
             </div>
-            <div class="absolute right-0 top-56 aspect-[320/198] w-[240px] rounded-xl bg-gray-900 dark:border-gray-900 dark:bg-gray-800 sm:top-64 sm:w-[320px] md:-right-8 lg:top-64 overflow-hidden">
-              <img class="dark:hidden object-cover" src="img/03_toml_config.png" />
-              <img class="hidden dark:block object-cover" src="img/03_toml_config.png" />
+            <div class="absolute right-0 top-56 aspect-[320/179] w-[240px] rounded-xl bg-gray-900 dark:border-gray-900 dark:bg-gray-800 sm:top-64 sm:w-[320px] md:-right-8 lg:top-64 overflow-hidden">
+              <img class="dark:hidden object-cover" src="img/03_filter.png" />
+              <img class="hidden dark:block object-cover" src="img/03_filter_dark.png" />
             </div>
-            <div class="relative ml-4 mt-12 aspect-[4/3] w-[220px] rounded-xl bg-gray-900 dark:border-gray-900 dark:bg-gray-800 sm:ml-12 sm:w-[240px] md:ml-24 overflow-hidden">
+            <div class="relative ml-4 mt-12 aspect-[240/180] w-[320px] rounded-xl bg-gray-900 dark:border-gray-900 dark:bg-gray-800 sm:ml-12 sm:w-[340px] md:ml-24 overflow-hidden">
               <img class="dark:hidden object-cover" src="img/04_table.png" />
-              <img class="hidden dark:block object-cover" src="img/04_table.png" />
+              <img class="hidden dark:block object-cover" src="img/04_table_dark.png" />
             </div>
           </div>
         </div>
@@ -118,7 +118,7 @@ function HomepageFeatures() {
             <div class="relative flex w-full flex-1 items-end pt-12 lg:block lg:!w-[60%] lg:flex-auto lg:shrink-0 lg:pt-0">
               <div class="h-[290px] w-full rounded-t-xl border-l border-r border-t border-gray-400/30 bg-gray-50 dark:border-gray-600/20 flex overflow-hidden lg:h-[616px] lg:rounded-l-xl lg:rounded-tr-none lg:border-b lg:border-r-0 bg-gray-100 dark:bg-gray-800">
                 <img class="dark:hidden object-cover object-top lg:object-left w-full" src="img/05_table_crud.png" />
-                <img class="hidden dark:block object-cover object-top lg:object-left w-full" src="img/05_table_crud.png" />
+                <img class="hidden dark:block object-cover object-top lg:object-left w-full" src="img/05_table_crud_dark.png" />
               </div>
             </div>
           </div>
@@ -138,7 +138,7 @@ function HomepageFeatures() {
             <div class="relative flex w-full flex-1 items-end pt-12">
               <div class="h-[240px] w-full rounded-t-xl border-l border-r border-t border-gray-400/30 bg-gray-50 dark:border-gray-600/20 flex overflow-hidden bg-gray-100 dark:bg-gray-800">
                 <img class="dark:hidden object-cover object-top w-full" src="img/01_banner.png" />
-                <img class="hidden dark:block object-cover object-top w-full" src="img/01_banner.png" />
+                <img class="hidden dark:block object-cover object-top w-full" src="img/01_banner_dark.png" />
               </div>
             </div>
           </div>
@@ -200,7 +200,7 @@ function HomepageFeatures() {
             <div class="relative flex w-full flex-1 items-end pt-12">
               <div class="h-[240px] w-full rounded-t-xl border-l border-r border-t border-gray-400/30 bg-gray-50 dark:border-gray-600/20 flex overflow-hidden lg:mx-auto lg:h-[600px] lg:w-[85%] bg-gray-100 dark:bg-gray-800">
                 <img class="dark:hidden object-cover object-top lg:object-left w-full" src="img/08_low_code.png" />
-                <img class="hidden dark:block object-cover object-top lg:object-left w-full" src="img/08_low_code.png" />
+                <img class="hidden dark:block object-cover object-top lg:object-left w-full" src="img/08_low_code_dark.png" />
               </div>
             </div>
           </div>
@@ -213,7 +213,7 @@ function HomepageFeatures() {
             <a href="docs/install-and-config/getting-started-loco/" class="inline-flex w-full items-center justify-center rounded-lg border border-transparent bg-gradient-to-br from-green-300 to-blue-green-300 px-6 py-3.5 text-center font-semibold text-gray-900 transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-300/50 sm:w-auto sm:px-8 request-license-btn hover-btn">
               Getting Started
             </a>
-            <a href="https://github.com/SeaQL/sea-orm-pro" target="_blank" class="inline-flex w-full items-center justify-center rounded-lg border border-transparent bg-gray-900 px-6 py-3.5 text-center font-semibold text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-300/50 sm:w-auto sm:px-8 hover-btn">
+            <a href="docs/playground/live-demo/" class="inline-flex w-full items-center justify-center rounded-lg border border-transparent bg-gray-900 px-6 py-3.5 text-center font-semibold text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-300/50 sm:w-auto sm:px-8 hover-btn">
               Try the Demo
             </a>
           </div>