Chore/dont open ports for preview envs (#138)

* 🙈 use experimental-https for dev server

* 🔧 only include workspace symbols in search

* 🚸 prevent double submission with submit-button

* ✨ interpret new lines as `<br>` in markdown

* 💄 some ui fixes

* 🚧 wip

* 🚧 some changes

* 👷 only deploy :dev image for PRs

* 🚧 editor work in progress

* 👷 don't upload build SHA github artifacts

* ✨ undo/redo + tab features

* ✨ add quote/unquote toolbar action + fix preloading markdown

* 🐛 disable toolbar buttons when not visible

* ✨ add link done

* 🎨 always add trailing commas

* ✨ strike through feature

* ✨ handle pasting link into text area

* ⏪ don't always add trailing comma

* 🚧 WIP : add lists

* ⬆️ upgrade next to canary

* 🚧 some changes

* 🔥 remove unused code

* 🐛 fix bug with dropdown not focusing the textarea again.

* ♻️ refactor

* ✨ handle list with selected characters

* 💄 Fix list items styling

* 💄 remove button support

* ♻️ add more unsupported tags

* ♻️ non functionning preview, but no error

* ♻️ pass render markdown action from the root server component down

* ⚡️ fetch user and repository in parallel

* 💄 cut links off by 150 chars max

* 💄 tweak `h-` tags styling

* ♻️ don't put the promise into another transition

* 🐛 correctly format quotes action

* ♻️ don't recreate the promise map on every render

* 🚧 add some fuild font CSS

* ♻️ use `has` instead of `get` (same thing honestly)🤷

* 💄 fix markdown styling

* 🔧 don't open all ports in preview envs

.gitignore

@@ -46,4 +46,5 @@ caddyfile.pr
 pr.caddyfile
 *.bak
 *.log
-notes.md
+notes.md
+certificates

dc-build-local.sh

@@ -2,4 +2,4 @@ while read -r line; do
     build_args="$build_args --build-arg $line"
 done < .env.docker.local
 echo args="'$build_args'"
-docker buildx build --push -t dcr.fredkiss.dev/gh-next:dev -f docker/Dockerfile.dev $build_args .
+docker buildx build -t dcr.fredkiss.dev/gh-next:dev -f docker/Dockerfile.dev $build_args .

docker/docker-stack.prod.yaml

@@ -1,10 +1,8 @@
 version: "3.4"
 
 services:
-  app:
+  gh-next-prod:
     image: dcr.fredkiss.dev/gh-next:latest
-    ports:
-      - "8988:3000"
     deploy:
       replicas: 2
       update_config:

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbo --experimental-https",
     "clean-dev": "rm -rf .next && next dev",
     "build": "next build",
     "start": "next start",
@@ -33,13 +33,15 @@
     "@t3-oss/env-nextjs": "^0.6.1",
     "@tanstack/react-query": "^5.0.0",
     "bright": "^0.8.4",
+    "client-only": "^0.0.1",
     "cmdk": "^0.2.0",
     "dayjs": "^1.11.9",
     "drizzle-orm": "^0.28.6",
     "drizzle-zod": "^0.5.1",
     "eslint": "8.48.0",
     "eslint-config-next": "14.0.0",
     "geist": "^1.0.0",
+    "indent-textarea": "^4.0.0",
     "nanoid": "^4.0.2",
     "next": "14.1.0",
     "nextjs-toploader": "^1.6.4",
@@ -53,12 +55,14 @@
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^5.1.0",
     "remark": "^15.0.1",
+    "remark-breaks": "^4.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.0",
     "remark-github": "^12.0.0",
     "server-only": "^0.0.1",
     "sharp": "^0.32.5",
     "tailwind-merge": "^1.14.0",
+    "text-field-edit": "^4.0.0",
     "vfile": "^6.0.1",
     "zod": "^3.22.2",
     "zod-form-data": "^2.0.1",

pr-preview-workflow/add-caddyfile.ts

@@ -4,9 +4,7 @@ export async function addCaddyfile(
   PR_ID: number,
   PR_BRANCH: string,
   CADDY_CONFIG_FOLDER_PATH: string,
-  shouldReloadCaddy: boolean,
-  MAX_CONFIG_NUMBER: number,
-  STARTING_PORT_RANGE: number
+  shouldReloadCaddy: boolean
 ) {
   await $`echo '[🔄 Caddy] adding preview environment config...'`;
   const caddyfileToAdd = file(
@@ -18,58 +16,18 @@ export async function addCaddyfile(
     return;
   }
 
-  const files =
-    $`ls ${CADDY_CONFIG_FOLDER_PATH} | grep -E '^pull-request\-[0-9]+\.caddy$'`.lines();
-
-  let caddyPRFiles = await Array.fromAsync(files).then((arr) =>
-    arr
-      .filter(Boolean)
-      // sort from the lowest pr number to the highest
-      .sort((a, b) => {
-        // @ts-expect-error
-        const numberA = parseInt(a.match(/pull-request-(\d+)\.caddy/)[1], 10);
-        // @ts-expect-error
-        const numberB = parseInt(b.match(/pull-request-(\d+)\.caddy/)[1], 10);
-        return numberA - numberB;
-      })
-  );
-
-  // don't go over 100 config max
-  if (caddyPRFiles.length === MAX_CONFIG_NUMBER) {
-    const [leastRecentPullRequestFile, ...rest] = caddyPRFiles;
-
-    const leastRecentPullRequestID = parseInt(
-      // @ts-expect-error
-      leastRecentPullRequestFile.match(/pull-request-(\d+)\.caddy/)[1],
-      10
-    );
-
-    await $`echo '[🔄 Caddy] preview environment config for pull request #${leastRecentPullRequestID} is too old, deleting it...'`;
-    await $`echo '[ℹ️ Caddy] you can still redeploy this env by deploying the associated pull request'`;
-
-    // delete the least recent Pull Request
-    await $`rm '${pathWithoutSlash(
-      CADDY_CONFIG_FOLDER_PATH
-    )}/${leastRecentPullRequestFile}'`;
-
-    await $`echo '[✅ Caddy] preview environment config for pull request #${leastRecentPullRequestID} deleted'`;
-
-    caddyPRFiles = rest;
-  }
-
-  const portNumber = STARTING_PORT_RANGE + caddyPRFiles.length;
   const CADDY_TEMPLATE_CONTENT = `gh-${PR_ID}.gh.fredkiss.dev, gh-${PR_BRANCH}.gh.fredkiss.dev {
     route {
-       sablier http://localhost:10000 {
+       sablier {
          group gh-next-${PR_ID}
          session_duration 30m
          dynamic {
             theme ghost
-            display_name preview environment ${PR_BRANCH} (pull request: ${PR_ID})
+            display_name preview environment ${PR_BRANCH} (pull request ID: ${PR_ID})
             refresh_frequency 5s
          }
        }
-      reverse_proxy 127.0.0.1:${portNumber} {
+      reverse_proxy http://gh-next-${PR_ID}:3000 {
         header_up Host {http.request.host}
         # disables buffering
         flush_interval -1

pr-preview-workflow/add-docker-app.ts

@@ -2,9 +2,7 @@ import { $, file, write } from "bun";
 
 export async function addDockerApp(
   PR_ID: number,
-  shouldReloadDockerStack: boolean,
-  MAX_OPEN_PORTS: number,
-  STARTING_PORT_RANGE: number
+  shouldReloadDockerStack: boolean
 ) {
   await $`echo '[🔄 Docker] adding docker stack config...'`;
   const COMPOSE_FILE_PATH = `./docker/docker-stack.pr-${PR_ID}.yaml`;
@@ -27,65 +25,13 @@ export async function addDockerApp(
     return;
   }
 
-  const files =
-    $`ls ./docker | grep -E '^docker-stack\.pr\-[0-9]+\.yaml$'`.lines();
-
-  let stackPRFiles = await Array.fromAsync(files).then((arr) =>
-    arr
-      .filter(Boolean)
-      // sort from the lowest pr number to the highest
-      .sort((a, b) => {
-        const numberA = parseInt(
-          // @ts-expect-error
-          a.match(/^docker-stack\.pr\-(\d+)\.yaml$/)[1],
-          10
-        );
-        const numberB = parseInt(
-          // @ts-expect-error
-          b.match(/^docker-stack\.pr\-(\d+)\.yaml$/)[1],
-          10
-        );
-        return numberA - numberB;
-      })
-  );
-
-  // don't go over 100 config max
-  if (stackPRFiles.length === MAX_OPEN_PORTS) {
-    const [leastRecentPullRequestFile, ...rest] = stackPRFiles;
-
-    const leastRecentPullRequestID = parseInt(
-      // @ts-expect-error
-      leastRecentPullRequestFile.match(/^docker-stack\.pr\-(\d+)\.yaml$/)[1],
-      10
-    );
-
-    await $`echo '[🔄 Docker] docker stack config for pull request #${leastRecentPullRequestID} is too old, deleting it...'`;
-    await $`echo '[ℹ️ Docker] you can still recreate it by deploying the associated pull request'`;
-
-    await $`echo '[🔄 Docker] Removing associated docker stack services...'`;
-    await $`docker stack rm gh-stack-pr-${PR_ID}`;
-    await $`echo '[✅ Docker] associated docker stack services removed succesfully'`;
-
-    // delete the least recent Pull Request
-    await $`rm './docker/${leastRecentPullRequestFile}'`;
-
-    // delete the least recent Pull Request
-    await $`echo '[✅ Docker] docker stack config for pull request #${leastRecentPullRequestID} deleted'`;
-
-    stackPRFiles = rest;
-  }
-
-  const portNumber = STARTING_PORT_RANGE + stackPRFiles.length;
-
   // Placeholder text in the Docker Compose file
   const DOCKER_STACK_TEMPLATE = `# service configuration for pull request #132
 version: "3.4"
 
 services:
   gh-next-${PR_ID}:
     image: dcr.fredkiss.dev/gh-next:pr-${PR_ID}
-    ports:
-      - "${portNumber}:3000"
     deploy:
       replicas: 0
       update_config:

pr-preview-workflow/index.ts

@@ -45,20 +45,10 @@ const {
   "reload-docker": shouldReloadDockerStack
 } = argSchema.parse(values);
 
-const MAX_OPEN_PORTS = 100,
-  STARTING_PORT_RANGE = 9100;
-
-await addDockerApp(
-  PR_ID,
-  shouldReloadDockerStack,
-  MAX_OPEN_PORTS,
-  STARTING_PORT_RANGE
-);
+await addDockerApp(PR_ID, shouldReloadDockerStack);
 await addCaddyfile(
   PR_ID,
   PR_BRANCH,
   CADDY_CONFIG_FOLDER_PATH,
-  shouldReloadCaddy,
-  MAX_OPEN_PORTS,
-  STARTING_PORT_RANGE
+  shouldReloadCaddy
 );

src/actions/markdown.action.tsx

@@ -0,0 +1,13 @@
+"use server";
+
+import { Markdown } from "~/components/markdown/markdown";
+import { renderRSCtoString } from "~/components/custom-rsc-renderer/render-rsc-to-string";
+
+export async function getMarkdownPreview(
+  content: string,
+  repositoryPath: `${string}/${string}`
+) {
+  return await renderRSCtoString(
+    <Markdown content={content} repository={repositoryPath} />
+  );
+}