Enhance dev container

.devcontainer/devcontainer.json

@@ -1,28 +1,69 @@
 {
   "name": "Jekyll",
   "image": "mcr.microsoft.com/devcontainers/jekyll:2-bullseye",
-  "onCreateCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
-  "postCreateCommand": "bash .devcontainer/post-create.sh",
+
+  // Command to set Git configuration upon container creation
+  "onCreateCommand": "git config --global --add safe.directory ${containerWorkspaceFolder} && git config --global user.name 'Your Name' && git config --global user.email '[email protected]'",
+
+  // Command to execute after the container is created
+  "postCreateCommand": "bash .devcontainer/post-create.sh && gem install jekyll bundler",
+
+  // Customizing VSCode settings for a better developer experience
   "customizations": {
     "vscode": {
       "settings": {
-        "terminal.integrated.defaultProfile.linux": "zsh"
+        // Set the default terminal profile to Zsh for better shell experience
+        "terminal.integrated.defaultProfile.linux": "zsh",
+
+        // Enable auto-save of files when the window focus changes
+        "files.autoSave": "onWindowChange",
+
+        // Enable auto-format on save for consistent code formatting
+        "editor.formatOnSave": true,
+
+        // Use Dark theme for the VSCode editor
+        "workbench.colorTheme": "Dark+ (default dark)",
+
+        // Ruby path for proper integration with Ruby-based tools
+        "ruby.rubyPath": "/usr/local/bin/ruby"
       },
+
       "extensions": [
-        // Liquid tags auto-complete
+        // Liquid tags auto-completion for Jekyll theme development
         "killalau.vscode-liquid-snippets",
-        // Liquid syntax highlighting and formatting
+
+        // Shopify theme check for liquid file validation in Jekyll
         "Shopify.theme-check-vscode",
-        // Shell
+
+        // Shell script linting to improve shell script quality
         "timonwong.shellcheck",
+
+        // Shell formatting for better readability of shell scripts
         "mkhl.shfmt",
-        // Common formatter
+
+        // Ensures consistent editor configuration across different environments
         "EditorConfig.EditorConfig",
+
+        // Prettier extension for code formatting (JavaScript, CSS, HTML)
         "esbenp.prettier-vscode",
+
+        // Linting for CSS/SCSS to enforce style guidelines
         "stylelint.vscode-stylelint",
+
+        // Markdown support with enhanced features such as TOC and preview
         "yzhang.markdown-all-in-one",
-        // Git
-        "mhutchie.git-graph"
+
+        // Git graph extension for easy visualization of Git commits and branches
+        "mhutchie.git-graph",
+
+        // Ruby syntax, linting, and formatting support for Jekyll development
+        "rebornix.ruby",
+
+        // YAML syntax support for better editing of _config.yml files
+        "redhat.vscode-yaml",
+
+        // Enhanced Git functionality with GitLens for better repository insights
+        "eamodio.gitlens"
       ]
     }
   }

.devcontainer/post-create.sh

@@ -1,18 +1,59 @@
 #!/usr/bin/env bash
 
+# Ensure nvm is sourced in this script
+export NVM_DIR="/usr/local/share/nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"                   # This loads nvm
+[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads bash_completion for nvm
+
+# Check if package.json exists, indicating a Node.js project
 if [ -f package.json ]; then
-  bash -i -c "nvm install --lts && nvm install-latest-npm"
-  npm i
+  # Install Node.js LTS version if not already installed
+  if ! nvm ls | grep -q "v16.0.0"; then
+    echo "Installing Node.js LTS..."
+    nvm install --lts
+  fi
+  # Install the latest npm version
+  nvm install-latest-npm
+  # Install project dependencies
+  npm install
+  # Run the build script
   npm run build
 fi
 
-# Install dependencies for shfmt extension
-curl -sS https://webi.sh/shfmt | sh &>/dev/null
+# Install shfmt for shell script formatting if not already installed
+echo "Installing shfmt..."
+if ! command -v shfmt &>/dev/null; then
+  curl -sS https://webi.sh/shfmt | sh -s -- --force &>/dev/null
+fi
+
+# Install Oh My Zsh if not already installed
+if [ ! -d "$HOME/.oh-my-zsh" ]; then
+  echo "Installing Oh My Zsh..."
+  sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" "" --unattended
+fi
+
+# Function to install Zsh plugins if missing
+install_zsh_plugin() {
+  local plugin_url=$1
+  local plugin_name=$2
+  if [ ! -d "$OMZ_CUSTOM/$plugin_name" ]; then
+    echo "Installing plugin: $plugin_name"
+    git clone "$plugin_url" "$OMZ_CUSTOM/$plugin_name"
+  fi
+}
+
+# Define OMZ plugins directory
+OMZ_CUSTOM="$HOME/.oh-my-zsh/custom/plugins"
+mkdir -p "$OMZ_CUSTOM"
+
+# Install Zsh plugins if missing
+install_zsh_plugin "https://github.com/zsh-users/zsh-syntax-highlighting.git" "zsh-syntax-highlighting"
+install_zsh_plugin "https://github.com/zsh-users/zsh-autosuggestions" "zsh-autosuggestions"
 
-# Add OMZ plugins
-git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting
-git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions
+# Update ~/.zshrc to enable the plugins
+echo "Enabling Zsh plugins in ~/.zshrc..."
 sed -i -E "s/^(plugins=\()(git)(\))/\1\2 zsh-syntax-highlighting zsh-autosuggestions\3/" ~/.zshrc
 
-# Avoid git log use less
-echo -e "\nunset LESS" >>~/.zshrc
+# Prevent git log from using less
+echo "Disabling 'less' for git log..."
+grep -qxF "unset LESS" ~/.zshrc || echo "unset LESS" >>~/.zshrc