Maintainance (2024-11-27)

.env

@@ -56,6 +56,9 @@ OPENAI_API_KEY=!ChangeMe!
 MESSENGER_TRANSPORT_DSN=doctrine://default?auto_setup=0
 ###< symfony/messenger ###
 
+# SQL Runner
+SQLRUNNER_URL=http://sqlrunner.app-sf.orb.local:8080
+
 ###> symfony/line-notify-notifier ###
 # LINE_NOTIFY_DSN=linenotify://TOKEN@default
 ###< symfony/line-notify-notifier ###

Dockerfile

@@ -23,6 +23,7 @@ RUN set -eux; \
 	install-php-extensions \
 		@composer \
 		apcu \
+		curl \
 		intl \
 		opcache \
 		zip \
@@ -89,9 +90,11 @@ RUN set -eux; \
 	composer run-script --no-dev post-install-cmd; \
 	chmod +x bin/console; sync;
 
-# build sass and asset maps
+# build route cache, sass and asset maps
 RUN set -eux; \
     chmod +x bin/console; sync; \
+    ./bin/console cache:clear; \
+    ./bin/console cache:warmup; \
     ./bin/console sass:build; \
     ./bin/console typescript:build; \
     ./bin/console asset-map:compile;

README.md

@@ -40,8 +40,10 @@ The Database Playground is a platform designed to enhance your SQL skills throug
 ### Zeabur
 
 1. Deploy Redis, PostgreSQL, Meilisearch, and Umami (for statistics) on Zeabur.
-2. Deploy the application in Git mode on Zeabur.
-3. Add the following environment variables to the application:
+2. Deploy [SQL runner](https://github.com/database-playground/sqlrunner-v2) on Zeabur, and rename the service host to
+   `sqlrunner`.
+3. Deploy the application in Git mode on Zeabur.
+4. Add the following environment variables to the application:
    ```env
    DATABASE_URL=postgresql://${POSTGRES_USERNAME}:${POSTGRES_PASSWORD}@postgresql.zeabur.internal:5432/${POSTGRES_DATABASE}?serverVersion=16&charset=utf8
    REDIS_URI=${REDIS_CONNECTION_STRING}
@@ -53,12 +55,9 @@ The Database Playground is a platform designed to enhance your SQL skills throug
    UMAMI_WEBSITE_ID=your-website-id
    OPENAI_API_KEY=your-openai-api-key
    LINE_NOTIFY_DSN=linenotify://line-notify-token@default
+   SQLRUNNER_URL=http://sqlrunner.zeabur.internal:8080
    ```
-4. Create an index in Meilisearch by running:
-   ```bash
-   php bin/console meili:create --update-settings
-   ```
-5. Bind your domain, and the application will be ready for use.
+5. Bind your domain, and the application will be ready for use. The Meilisearch index will be automatically created on start up.
 
 ### Docker
 

assets/app/index.ts

@@ -1,5 +1,5 @@
 import * as bootstrap from "bootstrap";
-import "./bootstrap.ts";
+import "./stimulus.ts";
 
 /**
  * Initialize tooltips of Bootstrap

assets/controllers.json

@@ -3,7 +3,7 @@
     "@symfony/ux-chartjs": {
       "chart": {
         "enabled": true,
-        "fetch": "eager"
+        "fetch": "lazy"
       }
     },
     "@symfony/ux-live-component": {

assets/controllers/challenge_comment_controller.ts

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 import { Component, getComponent } from "@symfony/ux-live-component";
-import * as bootstrap from "bootstrap";
+import type * as bootstrap from "bootstrap";
 
 export default class extends Controller<HTMLElement> {
   #component: Component | undefined;
@@ -24,7 +24,8 @@ export default class extends Controller<HTMLElement> {
 
     const $confirmModal = this.element.querySelector<HTMLElement>(".app-challenge-comment__deletion_confirm");
     if ($confirmModal) {
-      this.#modal = new bootstrap.Modal($confirmModal);
+      const bs = await import("bootstrap");
+      this.#modal = new bs.Modal($confirmModal);
     }
   }
 

assets/controllers/challenge_executor_controller.ts

@@ -1,7 +1,7 @@
 import { sql } from "@codemirror/lang-sql";
 import { Controller } from "@hotwired/stimulus";
 import { getComponent } from "@symfony/ux-live-component";
-import { basicSetup, EditorView } from "codemirror";
+import type { EditorView } from "codemirror";
 
 export default class extends Controller<HTMLElement> {
   static values = {
@@ -15,6 +15,8 @@ export default class extends Controller<HTMLElement> {
   #editorView: EditorView | undefined;
 
   async connect() {
+    const { basicSetup, EditorView } = await import("codemirror");
+
     const component = await getComponent(this.element);
     let lastQuery = this.element.dataset["lastQuery"];
 

assets/controllers/challenge_instruction_modal_controller.ts

@@ -1,17 +1,18 @@
 import { Controller } from "@hotwired/stimulus";
 import { Component, getComponent } from "@symfony/ux-live-component";
-import * as bootstrap from "bootstrap";
+import type * as bootstrap from "bootstrap";
 
 export default class extends Controller<HTMLElement> {
   #component: Component | undefined;
   #modal: bootstrap.Modal | undefined;
 
-  async initialize(): Promise<void> {
+  async initialize() {
     this.#component = await getComponent(this.element);
   }
 
-  connect(): void {
-    this.#modal = new bootstrap.Modal(this.element);
+  async connect() {
+    const bs = await import("bootstrap");
+    this.#modal = new bs.Modal(this.element);
   }
 
   async open() {

assets/controllers/challenge_solution_video_modal_controller.ts

@@ -1,12 +1,13 @@
 import { Controller } from "@hotwired/stimulus";
-import * as bootstrap from "bootstrap";
+import type * as bootstrap from "bootstrap";
 
 export default class extends Controller<HTMLElement> {
   #modal: bootstrap.Modal | undefined;
   #videoUrl: string | undefined;
 
-  connect(): void {
-    this.#modal = new bootstrap.Modal(this.element);
+  async connect() {
+    const bs = await import("bootstrap");
+    this.#modal = new bs.Modal(this.element);
     this.#videoUrl = this.element.dataset.videoUrl;
   }
 

assets/styles/app.scss

@@ -1,29 +1,5 @@
-@use "sass:list";
 @use "sass:map";
-@import "../../vendor/twbs/bootstrap/scss/functions";
-
-// Variables
-$prefix: bs-;
-$spacer: 0.8rem;
-$primary: #4154f1;
-$navbar-padding-x: 2rem;
-$navbar-padding-y: $spacer * 0.85;
-$input-btn-border-width: var(--#{$prefix}border-width);
-$input-border-width: $input-btn-border-width;
-$input-height-border: calc(#{$input-border-width} * 2);
-$form-floating-height: add(3.5rem * 0.8, $input-height-border);
-$form-floating-padding-y: 0.65rem;
-
-$timeline-color: #808080;
-$timeline-width: 2px;
-
-@import "../../vendor/twbs/bootstrap/scss/bootstrap-reboot";
-$font-family-sans-serif: list.join(
-  ("LXGW WenKai TC", cursive),
-  $font-family-sans-serif
-);
-
-@import "../../vendor/twbs/bootstrap/scss/bootstrap";
+@import "./bootstrap";
 
 // global
 html {

assets/styles/bootstrap.scss

@@ -0,0 +1,61 @@
+@use "sass:list";
+@import "../../vendor/twbs/bootstrap/scss/functions";
+
+// Variables
+$prefix: bs-;
+$spacer: 0.8rem;
+$primary: #4154f1;
+$navbar-padding-x: 2rem;
+$navbar-padding-y: $spacer * 0.85;
+$input-btn-border-width: var(--#{$prefix}border-width);
+$input-border-width: $input-btn-border-width;
+$input-height-border: calc(#{$input-border-width} * 2);
+$form-floating-height: add(3.5rem * 0.8, $input-height-border);
+$form-floating-padding-y: 0.65rem;
+
+$timeline-color: #808080;
+$timeline-width: 2px;
+
+@import "../../vendor/twbs/bootstrap/scss/variables";
+
+$font-family-sans-serif: list.join(
+  ("LXGW WenKai TC", cursive),
+  $font-family-sans-serif
+);
+
+// required parts
+@import "../../vendor/twbs/bootstrap/scss/maps";
+@import "../../vendor/twbs/bootstrap/scss/mixins";
+@import "../../vendor/twbs/bootstrap/scss/root";
+@import "../../vendor/twbs/bootstrap/scss/utilities";
+
+// other components
+@import "../../vendor/twbs/bootstrap/scss/reboot";
+@import "../../vendor/twbs/bootstrap/scss/type";
+@import "../../vendor/twbs/bootstrap/scss/images";
+@import "../../vendor/twbs/bootstrap/scss/containers";
+@import "../../vendor/twbs/bootstrap/scss/grid";
+@import "../../vendor/twbs/bootstrap/scss/tables";
+@import "../../vendor/twbs/bootstrap/scss/forms";
+@import "../../vendor/twbs/bootstrap/scss/buttons";
+@import "../../vendor/twbs/bootstrap/scss/transitions";
+@import "../../vendor/twbs/bootstrap/scss/dropdown";
+@import "../../vendor/twbs/bootstrap/scss/button-group";
+@import "../../vendor/twbs/bootstrap/scss/nav";
+@import "../../vendor/twbs/bootstrap/scss/navbar";
+@import "../../vendor/twbs/bootstrap/scss/card";
+@import "../../vendor/twbs/bootstrap/scss/breadcrumb";
+@import "../../vendor/twbs/bootstrap/scss/pagination";
+@import "../../vendor/twbs/bootstrap/scss/badge";
+@import "../../vendor/twbs/bootstrap/scss/alert";
+@import "../../vendor/twbs/bootstrap/scss/list-group";
+@import "../../vendor/twbs/bootstrap/scss/close";
+@import "../../vendor/twbs/bootstrap/scss/modal";
+@import "../../vendor/twbs/bootstrap/scss/tooltip";
+@import "../../vendor/twbs/bootstrap/scss/spinners";
+
+// Helpers
+@import "../../vendor/twbs/bootstrap/scss/helpers";
+
+// Utilities
+@import "../../vendor/twbs/bootstrap/scss/utilities/api";

compose.yaml

@@ -43,6 +43,8 @@ services:
       test: set -o pipefail;curl -fsS http://localhost:7700/health | grep -q '{"status":"available"}'
       retries: 3
       timeout: 5s
+  sqlrunner:
+    image: ghcr.io/database-playground/sqlrunner-v2:main
   php:
     image: ${IMAGES_PREFIX:-}app-php
     restart: unless-stopped
@@ -52,6 +54,7 @@ services:
       REDIS_URI: "redis://redis:6379"
       MEILISEARCH_URL: "http://meilisearch:7700"
       MEILISEARCH_API_KEY: ${MEILI_MASTER_KEY:-!MasterChangeMe!}
+      SQLRUNNER_URL: "http://sqlrunner:8080"
     volumes:
       - caddy_data:/data
       - caddy_config:/config