refactor: replace puppeteer with astral for screenshot and close #2919 (#2920)

due to resolves the `NotFound: No such file or directory` error in the
`www/utils/screenshot.ts` script, which was caused by improper file path
construction. This error prevented screenshots from being saved
correctly. close #2919

-- update --patch1
## Current Status
- Using npm:puppeteer for webpage screenshots
- npm lifecycle script warnings present
- deno-puppeteer is no longer maintained
- npm:puppeteer still has compatibility issues

## References
- [astral](https://github.com/lino-levan/astral): Browser automation
library designed for Deno
-
[deno-puppeteer#92](lucacasonato/deno-puppeteer#92):
Recent discussion about deno-puppeteer

## Changes Made
1. Dependency Replacement
   - Replaced npm:puppeteer with jsr:@astral/astral
   - Removed npm lifecycle script warnings

2. Dependency Management Optimization
   - Centralized all imports in deno.json
   - Using jsr: and URL imports

## Testing Steps
1. Run screenshot command:
```bash
deno task screenshot https://google.com google
```

2. Check output:
   - Verify no npm warnings
   - Validate generated image files:
     - ./www/static/showcase/google2x.jpg
     - ./www/static/showcase/google1x.jpg
   - Confirm image quality

3. Run complete test suite:
```bash
deno task ok
```
- Ensure all tests pass

4. Verify functionality:
   - Screenshot feature works correctly
   - Image processing (2x/1x) functions properly

---------

Co-authored-by: 李嘉图·M·路 <146103794+Ricardo-M-Zheng@users.noreply.github.com>
Co-authored-by: Asher Gomez <ashersaupingomez@gmail.com>

Author: SisyphusZheng

deno.lock

@@ -21,6 +21,7 @@
     "@std/path": "jsr:@std/path@1",
     "@std/semver": "jsr:@std/semver@1",
     "@opentelemetry/api": "npm:@opentelemetry/api@^1.9.0",
+    "astral": "jsr:@astral/astral",
     "autoprefixer": "npm:autoprefixer@10.4.17",
     "cssnano": "npm:cssnano@6.0.3",
     "esbuild": "npm:esbuild@0.23.1",
@@ -30,6 +31,7 @@
     "fresh/dev": "../src/dev/mod.ts",
     "fresh/runtime": "../src/runtime/shared.ts",
     "github-slugger": "npm:github-slugger@^2.0.0",
+    "imagescript": "https://deno.land/x/imagescript@1.3.0/mod.ts",
     "marked": "npm:marked@^14.1.2",
     "marked-mangle": "npm:marked-mangle@^1.1.9",
     "postcss": "npm:postcss@8.4.35",

www/deno.json

@@ -1,5 +1,5 @@
-import puppeteer from "npm:puppeteer@24.7.2";
-import { Image } from "https://deno.land/x/imagescript@1.3.0/mod.ts";
+import { launch } from "astral";
+import { Image } from "imagescript";
 
 if (Deno.args.length !== 2) {
   throw new Error("Usage: screenshot <url> <id>");
@@ -11,20 +11,22 @@ if (parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:") {
   throw new Error("Invalid URL");
 }
 
-const browser = await puppeteer.launch({
-  defaultViewport: { width: 1200, height: 675 },
-  headless: true,
-});
-const page = await browser.newPage();
-await page.goto(url, { waitUntil: "networkidle2" });
+const browser = await launch();
+const page = await browser.newPage(url);
+await page.waitForNetworkIdle();
 const raw = await page.screenshot();
+
 await browser.close();
 
 // convert to jpeg
 const image2x = await Image.decode(raw);
-const jpeg2x = import.meta.resolve(`../static/showcase/${id}2x.jpg`);
-await Deno.writeFile(jpeg2x, await image2x.encodeJPEG(80));
+await Deno.writeFile(
+  `./www/static/showcase/${id}2x.jpg`,
+  await image2x.encodeJPEG(80),
+);
 
-const jpeg1x = import.meta.resolve(`../static/showcase/${id}1x.jpg`);
 const image1x = image2x.resize(image2x.width / 2, Image.RESIZE_AUTO);
-await Deno.writeFile(jpeg1x, await image1x.encodeJPEG(80));
+await Deno.writeFile(
+  `./www/static/showcase/${id}1x.jpg`,
+  await image1x.encodeJPEG(80),
+);