Add devcontainer setup

.devcontainer/devcontainer.json

@@ -0,0 +1,127 @@
+{
+  // See the docs at https://containers.dev/implementors/json_reference/
+
+  // We are using docker-compose to reuse the devcontainer definition in our
+  // scripts in case if they are invoked from host. They can spin up their own
+  // devcontainer to get access to the external dependencies they require unless
+  // they are already running inside a devcontainer.
+  "dockerComposeFile": "./docker-compose.yml",
+  "service": "devcontainer",
+
+  // Make sure our custom `init-container.sh` script is run at startup
+  "overrideCommand": false,
+
+  "workspaceFolder": "/home/philomena/philomena",
+
+  // The devcontainer is on the same network as our main app docker compose
+  // services, which means that that other containers are available by their
+  // service names.
+  "forwardPorts": [8080, 5173],
+  "portsAttributes": {
+    "5173": {
+      "label": "Frotnend HMR"
+    },
+    "8080": {
+      "label": "Frontend Main"
+    }
+  },
+  "otherPortsAttributes": {
+    // Don't rely on auto-inference for forwarded ports, make it reliable.
+    "onAutoForward": "ignore"
+  },
+
+  "customizations": {
+    "vscode": {
+      "settings": {
+        // Listen on `0.0.0.0` on the host machine to allow accessing the site
+        // via the local network, e.g. with a phone connected to the same WiFi
+        "remote.localPortHost": "allInterfaces",
+
+        // Rust Analyzer struggles to discover the cargo workspace unless there
+        // is a `Cargo.toml` in the repo root. So, we give it a small hint.
+        "rust-analyzer.linkedProjects": ["./native/philomena/Cargo.toml"],
+
+        // This notification is too noisy. It pops up on every devcontainer
+        // rebuild
+        "lexical.notifyOnServerAutoUpdate": false,
+
+        "dbcode.connections": [
+          {
+            "connectionId": "philomena_dev",
+            "name": "philomena_dev",
+            "driver": "postgres",
+            "connectionType": "host",
+            "host": "localhost",
+            "port": 5400,
+            "ssl": false,
+            "username": "postgres",
+            "password": "postgres",
+            "database": "philomena_dev"
+          }
+        ],
+
+        "github.copilot.enable": {
+          // https://dbcode.io/docs/query/inline-completion#provide-schema-to-copilot-for-sql-files
+          "sql": false
+        },
+
+        "dbcode.resultLocation": "panel",
+        "dbcode.orderByPrimaryKey": "Descending",
+
+        "[dockercompose]": {
+          // Prettier is the source of truth for YAML formatting
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        }
+      },
+      "extensions": [
+        // Elixir LSP
+        "lexical-lsp.lexical",
+
+        // DB explorer
+        "dbcode.dbcode",
+
+        // Rust LSP
+        "rust-lang.rust-analyzer",
+
+        // TOML LSP
+        "tamasfe.even-better-toml",
+
+        // Container management extension by Microsoft
+        "ms-azuretools.vscode-docker",
+
+        // Dockerfile LSP by Docker Inc.
+        "docker.docker",
+
+        // Github Actions LSP
+        "github.vscode-github-actions",
+
+        // Bash LSP
+        "mads-hartmann.bash-ide-vscode",
+
+        // Caddyfile LSP
+        "matthewpi.caddyfile-support",
+
+        // `.slime` syntax highlighting
+        "xolan.slime",
+
+        // `.js`, `.ts` linter
+        "dbaeumer.vscode-eslint",
+
+        // `.css` linter
+        "stylelint.vscode-stylelint",
+
+        // `.js`, `.ts`. `.css`, `.json`, `.yaml`, `.md` formatter
+        "esbenp.prettier-vscode",
+
+        // Spell checker enforced on CI
+        "tekumara.typos-vscode",
+
+        // `.toMatchInlineSnapshot()` syntax highlighting
+        "tlent.jest-snapshot-language-support",
+
+        // Inline git blame annotations
+        "eamodio.gitlens"
+      ]
+    }
+  }
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,56 @@
+# A persistent container that hosts our development tooling.
+#
+# This is meant to work in conjunction with the `devcontainer` spec:
+# https://containers.dev. If your IDE supports it, you can develop directly
+# inside of the container. This way you have all the dependencies and as other
+# developers making it easier for us to maintain a shared development
+# environment configuration.
+#
+# Alternatively, if you aren't running your IDE in a devcontainer, then our
+# scripts detect this and they automatically start the devcontainer for you and
+# run inside of it even if you are running them directly from the host.
+
+name: philomena-devcontainer
+
+services:
+  devcontainer:
+    # Give a human-readable name to our devcontainer in `docker ps` output
+    container_name: philomena-devcontainer
+
+    build:
+      context: ..
+      dockerfile: docker/app/Dockerfile
+      target: devcontainer
+
+    environment:
+      HOST_WORKSPACE: $PWD
+      CI:
+
+    # While technically optional, `init` enables an init process to properly
+    # handle signals and ensure Zombie Processes are cleaned up.
+    init: true
+
+    # Use host networking to get access to containers spawned by the
+    # devcontainer. We could instead define a custom docker network for the
+    # devcontainer and reuse it our docker-compose stack, but that is a bit more
+    # cumbersome since we need to make sure the network is created before the
+    # devcontainer and we need docker compose to depend on it (external: true).
+    # This would make it more annoying to run the docker compose stack outside
+    # of the devcontainer, because the developer would need to create the docker
+    # network manually.
+    network_mode: host
+
+    volumes:
+      # Mount the repository
+      - ..:/home/philomena/philomena:cached
+
+      # Persist shell history between container restarts
+      - shell-history:/shell-history
+
+      # Use a "docker outside of docker" setup where we reuse the host's docker
+      # daemon:
+      # https://github.com/microsoft/vscode-dev-containers/tree/main/containers/docker-from-docker
+      - /var/run/docker.sock:/var/run/docker.sock
+
+volumes:
+  shell-history:

.devcontainer/init-container.sh

@@ -0,0 +1,62 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+. "$(dirname "${BASH_SOURCE[0]}")/../scripts/lib.sh"
+
+function setup_rootless_docker {
+  # Add the current user to the docker group to allow running docker commands
+  # without sudo. We have to do this right at the start of the container instead
+  # of the build time because the docker socket is mounted only at runtime.
+  docker_gid=$(stat -c '%g' /var/run/docker.sock || true)
+
+  if [[ "${docker_gid}" == '' ]]; then
+    # Docker socket was not mounted, so nothing to do.
+    return 0
+  fi
+
+  # This should never realistically happen, thus we don't bother handling this
+  # situation. Handling it would require running a `socat` proxy for the socket
+  if [[ "${docker_gid}" == '0' ]]; then
+    warn "Can't configure rootless docker. The docker socket is owned by root"
+    return 0
+  fi
+
+  # This is really annoying, but to provide sudo-less access to the docker
+  # socket, we need to add the current user to the group that owns the socket.
+  # Because we mount it from the host the group may have arbitrary ID that we
+  # can't easily control.
+  #
+  # There can also be an existing group in the container with the ID of the host
+  # docker socket group, which is very likely to happen given that the usual
+  # docker group has ID 999 and Alpine Linux uses this GID for the `ping` group:
+  # https://github.com/alpinelinux/docker-alpine/issues/323
+  existing_group=$(getent group "${docker_gid}" || true)
+
+  if [ "$existing_group" = '' ]; then
+    step sudo groupadd --gid "${docker_gid}" docker-host
+  else
+    info "Group with the host docker socket GID already exists: ${existing_group}. Reusing it."
+  fi
+
+  user=$(whoami)
+
+  if [ "$(id "$user" | grep -E "groups=.*(=|,)${docker_gid}\\(")" = '' ]; then
+    step sudo usermod --append --groups "${docker_gid}" "$user"
+  else
+    info "User ${user} is already in the group ${docker_gid}. No need to add it again."
+  fi
+}
+
+setup_rootless_docker
+
+philomena init
+
+step npm ci --ignore-scripts
+
+# Create an empty file which indicates to the healthcheck that the container
+# finished initializing. This precents race conditions with `docker exec` commands
+# if the caller waits for the healtheck to pass before running them.
+step touch "$HOME/.initialized"
+
+step exec "$@"

.devcontainer/shell/.zshrc

@@ -0,0 +1,84 @@
+# Ignore lints about referencing unknown variables and unused variables.
+# shellcheck disable=SC2034 disable=SC2154
+
+# Available themes: https://github.com/ohmyzsh/ohmyzsh/wiki/themes
+ZSH_THEME="simple"
+
+# For some reason zsh overwrites the `HISTFILE` variable set in the Dockerfile
+# so we have to force it here again.
+HISTFILE="$HOME/shell-history/history"
+
+plugins=(
+  command-time
+  fzf
+  git
+  mix
+  npm
+  rust
+  zsh-autosuggestions
+  zsh-syntax-highlighting
+)
+
+# === zsh-autosuggestions ===
+
+# The default is just `history`. Include default completion suggestions too.
+ZSH_AUTOSUGGEST_STRATEGY=(history completion)
+
+# === fzf ===
+FZF_DEFAULT_OPTS='--height 40% --layout=reverse'
+
+# === zsh-syntax-highlighting ===
+# Docs: https://github.com/zsh-users/zsh-syntax-highlighting/blob/master/docs/highlighters/main.md
+
+typeset -A ZSH_HIGHLIGHT_STYLES
+
+ZSH_HIGHLIGHT_STYLES['reserved-word']='fg=#08dc92'
+
+ZSH_HIGHLIGHT_STYLES[assign]='fg=#9cdcfe,bold'
+ZSH_HIGHLIGHT_STYLES['dollar-double-quoted-argument']='fg=#9cdcfe,bold'
+ZSH_HIGHLIGHT_STYLES[alias]='fg=#dfff6d,bold'
+ZSH_HIGHLIGHT_STYLES[command]='fg=#dfff6d,bold'
+ZSH_HIGHLIGHT_STYLES[builtin]='fg=#dfff6d,bold'
+ZSH_HIGHLIGHT_STYLES[function]='fg=#dfff6d,bold'
+ZSH_HIGHLIGHT_STYLES[path]="fg=#ce9178"
+ZSH_HIGHLIGHT_STYLES['single-quoted-argument']='fg=#ce9178'
+ZSH_HIGHLIGHT_STYLES['double-quoted-argument']='fg=#ce9178'
+ZSH_HIGHLIGHT_STYLES['double-hyphen-option']='fg=#dfad40,bold'
+ZSH_HIGHLIGHT_STYLES['single-hyphen-option']='fg=#dfad40,bold'
+ZSH_HIGHLIGHT_STYLES[commandseparator]='fg=#e81e31,bold'
+ZSH_HIGHLIGHT_STYLES[default]='fg=#ffffff'
+
+### ====================
+
+# Shellcheck can't dive into this file, that's expected.
+# shellcheck disable=SC1091
+. "$HOME/.oh-my-zsh/oh-my-zsh.sh"
+
+# Based on this example:
+# https://github.com/popstas/zsh-command-time#configuration
+#
+# This version looks a bit better because it humanizes the duration
+function zsh_command_time {
+  if [ -z "$ZSH_COMMAND_TIME" ]; then
+    return 0
+  fi
+
+  hours=$((ZSH_COMMAND_TIME / 3600))
+  min=$((ZSH_COMMAND_TIME / 60))
+  sec=$((ZSH_COMMAND_TIME % 60))
+  if [ "$ZSH_COMMAND_TIME" -le 60 ]; then
+    timer_show="${fg[green]}${ZSH_COMMAND_TIME}s"
+  elif [ "$ZSH_COMMAND_TIME" -gt 60 ] && [ "$ZSH_COMMAND_TIME" -le 180 ]; then
+    timer_show="${fg[yellow]}$min min. $sec s."
+  elif [ "$hours" -gt 0 ]; then
+    min=$((min % 60))
+    timer_show="${fg[red]}${hours}h ${min}m ${sec}s"
+  else
+    timer_show="${fg[red]}${min}m ${sec}s"
+  fi
+
+  echo "${fg_bold[white]}Took $timer_show$reset_color"
+}
+
+# Short alias for the philomena dev tool
+alias p=philomena

.devcontainer/shell/oh-my-zsh.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+. "$(dirname "${BASH_SOURCE[0]}")/../../scripts/lib.sh"
+
+fetch https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh | sh
+
+function install_plugin {
+    local repo="$1"
+    local plugin="${2:-$(basename "$repo")}"
+    step git clone --depth 1 --branch master "$repo.git" "$HOME/.oh-my-zsh/custom/plugins/$plugin"
+}
+
+install_plugin https://github.com/popstas/zsh-command-time command-time
+install_plugin https://github.com/zsh-users/zsh-syntax-highlighting
+install_plugin https://github.com/zsh-users/zsh-autosuggestions