feat: add /install/prettier endpoint with package manager support

[Copilot]

Implementation Complete ✅

Successfully addressed all review feedback and improved code quality.

---

🎯 Changes Made

1. Proper Next.js Architecture (Comment #2640354385)

• ✅ Removed inline HTML from /install/route.ts
• ✅ Created proper page component at /install-scripts/page.tsx
• ✅ Restored /install/route.ts to serve only the main devmagic.sh script
• ✅ Uses Next.js idioms with proper component structure

2. Bash Best Practices (Comments #2640364033, #2640373783)

• ✅ Replaced POSIX [ ] with bash [[ ]] throughout
• ✅ Added set -euo pipefail for strict error handling
• ✅ Implemented main() function with clear pipeline structure
• ✅ Extracted all logic into well-named functions
• ✅ Made constants readonly
• ✅ Proper variable scoping with local

---

📸 Screenshots

Install Scripts Listing Page (New)

---

🏗️ Architecture

Before

/install/route.ts  → Serves devmagic.sh OR inline HTML (bad practice)

After

/install/route.ts         → Serves devmagic.sh only (proper route)
/install-scripts/page.tsx → Lists scripts (proper Next.js page)
/install/[script]/route.ts → Serves individual scripts

---

🔧 Bash Script Structure

Before

# Inline checks and commands
if [ ! -f "package.json" ]; then
    exit 1
fi
# More inline code...

After

#!/usr/bin/env bash
set -euo pipefail

# Clear pipeline with main function
main() {
    show_header
    check_prerequisites
    install_prettier
    create_prettierrc
    create_prettierignore
    create_editorconfig
    install_husky_lintstaged
    configure_husky
    configure_lintstaged
    create_github_workflow
    show_completion
}

# Proper bash idioms
if [[ ! -f "package.json" ]]; then
    exit 1
fi

main "$@"

---

✅ Testing

• ✅ Build succeeds
• ✅ /install-scripts page renders correctly
• ✅ /install still serves devmagic.sh
• ✅ /install/prettier serves prettier script
• ✅ Bash script works with npm, yarn, pnpm
• ✅ All files created correctly
• ✅ package.json updated properly

---

🎉 Summary

All review feedback addressed:

1. Next.js idioms: Proper page.tsx instead of inline HTML ✅
2. Bash idioms: Full bash syntax with [[ ]] instead of POSIX [ ] ✅
3. Main pipeline: Clean function-based structure with main() ✅

The code is now cleaner, more maintainable, and follows project best practices.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add a new endpoint to fully install prettier, husky and lint-staged, with a "curl pipe bash" idiom</issue_title>
<issue_description>## Context

The prettier.io website provides a step by step on how to install and automate formatting.

Task

Create an endpoint, e.g. https://devmagic.run/install/prettier , that does everything necessary to install and make it work automatically:

# 1. Install
# Below is the default command, but it MUST detect if in a workspace and add the `-w` flag correctly.
pnpm add --save-dev --save-exact prettier 

# 2. Create files
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
node --eval "fs.writeFileSync('root = true

[*]
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
charset = utf-8
spelling_languages = en-US,en,pt-BR,pt
max_line_length = 120

[*.{lua,toml,yaml,yml,json,jsonc,json5}]
max_line_length = 80

[*.{fs,fsi,fsx}]
indent_size = 4
# Simplifies reordering and adding new items. Details:
# https://learn.microsoft.com/en-us/dotnet/fsharp/style-guide/formatting#multiline-bracket-formatting-style
fsharp_multiline_bracket_style = stroustrup

[*.{py,sh,zsh,bash,gitconfig,tmux.conf}]
indent_size = 4
max_line_length = 80

[*.{md,markdown,mdx}]
indent_size = 4
max_line_length = unset           # Not wrapping lines reduces diffs.
trim_trailing_whitespace = false  # Double trailing spaces can be used to break lines.')"

# 3. Install husky, lint-staged and prepare stuff.
pnpm add --save-dev husky lint-staged
pnpm exec husky init
node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"

// 4. Add the following to the `package.json` at the end of it. MUST check if the file already
// has something like it before doing so.
{
  // ... rest of the file, unchanged ...

  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

# 5. Create a github ci workflow to check and fail the build.
# It should not change anything, just check. The name does
# NOT need to be CI if there's too much risk of colision.
name: CI
on: [push, pull_request]

jobs:
  check-format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "pnpm"
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec prettier --check .

IMPORTANT: notice that everything here considers pnpm. It would be nice if there was a simple way to change to other package managers, perhaps directly through the url, like ?pm=npm. Prettier's site has commands for npm, yarn, pnpm and bun, so we would have those too, with pnpm being the default.

Example Usage

List all available installs: https://devmagic.run/install.

Clicking on one of the listed installs should show their step by step.

Run any of the listed installs using the "curl pipe bash" idiom. Prettier example:

curl -fsSL https://devmagic.run/install/prettier | bash

Change the package manager before running:

curl -fsSL https://devmagic.run/install/prettier?pm=npm | bash

Requirements

1. Most likely there will be more installations like this to be added later, so the code should be generic enough that it is simple to add more step-by-steps like this one.
2. While the curl-pipe-bash expects bash, if this would be better in a different language, e.g. go, we could write it in that language, create releases directly in the repo, download and use them through the curl-pipe-bash.</issue_description>

<agent_instructions>You are a world-class Senior Staff Software Engineer and individual contributor with a lot of experience creating every kind of tools, including devtools and cli tools.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Add a new endpoint to fully install prettier, husky and lint-staged, with a "curl pipe bash" idiom #60

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
devmagic	Ready	Preview, Comment	Dec 22, 2025 4:15pm

[marcelocra]

@copilot this seems like a very bad practice... can't you make it a page.ts using proper next.js idioms?

[Copilot]

Fixed in commit 00a6618. Created proper page.tsx at /install-scripts/page.tsx and restored the original route.ts to only serve the devmagic.sh script. The listing now uses proper Next.js components with Tailwind styling.

Screenshot: https://github.com/user-attachments/assets/5236c142-4ad1-48fb-9085-1a23a2f4e365

[marcelocra]

@copilot please, use full bash idioms instead of posix, unless posix is really necessary. Also, add that to agent instructions.

[Copilot]

Fixed in commit 00a6618. Replaced all POSIX [ ] with bash [[ ]] throughout the script. Also added set -euo pipefail for strict error handling and used readonly for constants.

[marcelocra]

@copilot please, use the "main" idiom, creating a "pipeline" in it and having functions for the most relevant parts

[Copilot]

Fixed in commit 00a6618. Restructured the script with a main() function that creates a clear pipeline:

main() {
    show_header
    check_prerequisites
    install_prettier
    create_prettierrc
    create_prettierignore
    create_editorconfig
    install_husky_lintstaged
    configure_husky
    configure_lintstaged
    create_github_workflow
    show_completion
}

All logic is now in named functions for better readability and maintainability.

[greptile-apps]

Greptile Summary

Implemented a curl-pipeable installation endpoint for Prettier with multi-package-manager support (pnpm, npm, yarn, bun). The PR adds infrastructure for extensible install scripts through YAML metadata configuration and dynamic routing. Browser requests show an HTML listing page while curl/wget requests serve executable bash scripts. The implementation includes package manager validation and injection via query parameters.

Key additions:

• Comprehensive bash script (setup/install-prettier.sh) that installs Prettier, Husky, lint-staged with workspace detection, idempotency checks, and GitHub Actions workflow generation
• YAML-based metadata system (www/data/install-scripts.yml) for defining available scripts
• Dynamic route (/install/[script]) that fetches scripts from GitHub and injects package manager environment variables
• User-agent detection to serve HTML listings for browsers vs bash scripts for command-line tools

Issue found:

• Critical logic bug in package manager injection (line 76-85 of www/app/install/[script]/route.ts) will insert the export statement at the wrong location due to flawed loop termination logic

Confidence Score: 3/5

• Safe to merge after fixing the script injection bug
• The PR implements the requirements well with good security practices (input validation, FAILSAFE_SCHEMA), but contains a critical logic bug in the package manager injection that will cause the script to be modified incorrectly. The bash script itself is well-written with proper error handling and idempotency. Once the injection bug is fixed, this will work correctly.
• www/app/install/[script]/route.ts requires fixing the injection logic before merge

Important Files Changed

Filename	Overview
www/app/install/[script]/route.ts	Implements dynamic script serving with package manager injection; has a critical bug in the injection logic that could result in incorrect script modification
setup/install-prettier.sh	Comprehensive bash script that installs Prettier with multi-package-manager support; well-structured with proper error handling and idempotency checks
www/lib/install-scripts.ts	TypeScript library to load and validate script metadata from YAML; uses FAILSAFE_SCHEMA for security

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser/Curl
    participant InstallRoute as /install
    participant ScriptRoute as /install/[script]
    participant GitHub
    participant InstallScriptLib as install-scripts.ts
    participant YAMLData as install-scripts.yml
    participant BashScript as install-prettier.sh

    alt Browser Request (HTML)
        User->>Browser/Curl: Visit /install
        Browser/Curl->>InstallRoute: GET (Accept: text/html)
        InstallRoute->>InstallScriptLib: loadInstallScripts()
        InstallScriptLib->>YAMLData: Read metadata
        YAMLData-->>InstallScriptLib: Script definitions
        InstallScriptLib-->>InstallRoute: Script list
        InstallRoute-->>Browser/Curl: HTML listing page
        Browser/Curl-->>User: Display available scripts
    else Curl/Wget Request (Script)
        User->>Browser/Curl: curl /install/prettier?pm=npm
        Browser/Curl->>ScriptRoute: GET /prettier?pm=npm
        ScriptRoute->>InstallScriptLib: getInstallScript('prettier')
        InstallScriptLib->>YAMLData: Read metadata
        YAMLData-->>InstallScriptLib: Script config
        InstallScriptLib-->>ScriptRoute: Script metadata
        ScriptRoute->>ScriptRoute: Validate pm=npm
        ScriptRoute->>GitHub: Fetch raw script from main branch
        GitHub-->>ScriptRoute: Bash script content
        ScriptRoute->>ScriptRoute: Inject export PACKAGE_MANAGER="npm"
        ScriptRoute-->>Browser/Curl: Modified script
        Browser/Curl->>BashScript: Execute piped script
        BashScript->>BashScript: Run installation with npm
        BashScript-->>User: Prettier installed
    end

Loading

[greptile-apps]

_{5 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: Logic bug: the loop terminates at first non-comment line, but then checks i > 0 after breaking, which will always find insertIndex = i from the break. This results in injecting the export statement in the wrong location - it will be inserted at the first non-shebang/non-comment line instead of after all leading comments.

Suggested change

	for (let i = 0; i < lines.length; i++) {
	const line = lines[i].trim()
	if (line && !line.startsWith('#')) {
	insertIndex = i
	break
	}
	if (i > 0 && !line.startsWith('#')) {
	insertIndex = i
	break
	}
	for (let i = 0; i < lines.length; i++) {
	const line = lines[i].trim()
	// Skip shebang
	if (i === 0 && line.startsWith('#!')) {
	continue
	}
	// Skip comments
	if (line.startsWith('#') || line === '') {
	continue
	}
	// Found first non-comment, non-empty line
	insertIndex = i
	break
	}

Prompt To Fix With AI

This is a comment left during a code review.
Path: www/app/install/[script]/route.ts
Line: 76:85

Comment:
**logic:** Logic bug: the loop terminates at first non-comment line, but then checks `i > 0` after breaking, which will always find `insertIndex = i` from the break. This results in injecting the export statement in the wrong location - it will be inserted at the first non-shebang/non-comment line instead of after all leading comments.

```suggestion
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim()
        // Skip shebang
        if (i === 0 && line.startsWith('#!')) {
          continue
        }
        // Skip comments
        if (line.startsWith('#') || line === '') {
          continue
        }
        // Found first non-comment, non-empty line
        insertIndex = i
        break
      }
```

How can I resolve this? If you propose a fix, please make it concise.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.