From 4e6f3380a49f14697b5ab3bf645f27bd52682d03 Mon Sep 17 00:00:00 2001 From: ourongxing Date: Tue, 20 Dec 2022 21:01:55 +0800 Subject: [PATCH] chore(create-printer): support select channel --- packages/create-printer/README.md | 26 ++++- packages/create-printer/package.json | 7 +- packages/create-printer/src/index.ts | 102 ++++++++++++++++-- .../template/javascript-info/package.json | 3 +- .../template/javascript-info/src/index.ts | 3 +- .../template/juejin/package.json | 3 +- .../template/juejin/src/index.ts | 3 +- .../create-printer/template/manual/README.md | 66 ++++++++---- .../template/manual/package.json | 3 +- .../template/manual/src/index.ts | 8 +- .../template/mdbook/package.json | 3 +- .../template/mdbook/src/index.ts | 3 +- .../template/ruanyifeng/package.json | 3 +- .../template/ruanyifeng/src/index.ts | 3 +- .../template/vitepress/package.json | 3 +- .../template/vitepress/src/index.ts | 3 +- .../template/wikipedia/package.json | 3 +- .../template/wikipedia/src/index.ts | 5 +- .../template/xiaobot/package.json | 3 +- .../template/xiaobot/src/index.ts | 7 +- .../template/zhihu/package.json | 3 +- .../template/zhihu/src/index.ts | 9 +- .../template/zhubai/package.json | 3 +- .../template/zhubai/src/index.ts | 27 ++--- 24 files changed, 223 insertions(+), 79 deletions(-) diff --git a/packages/create-printer/README.md b/packages/create-printer/README.md index 0216ed0..5f6cf6f 100644 --- a/packages/create-printer/README.md +++ b/packages/create-printer/README.md @@ -1,15 +1,37 @@ # create-printer -a easy way to create printer. +a easy way to create [printer](https://github.com/busiyiworld/web-printer). ## Usage ```bash pnpm create printer@latest # or complete in one step -pnpm create printer@latest web-printer -p vitepress +pnpm create printer@latest web-printer -t vitepress -c chrome ``` +`-p` means plugin, you can select from: +- vitepress +- mdbook +- juejin +- zhihu +- javascript-info +- xiaobot +- zhubai +- ruanyifeng +- wikipedia + +`-c` means Chromium channel, or version, you can select from: +- chromium +- chrome +- chrome-beta +- chrome-dev +- chrome-canary +- msedge +- msedge-beta +- msedge-dev +- msedge-canary + ## License MIT © diff --git a/packages/create-printer/package.json b/packages/create-printer/package.json index db78824..46799ee 100644 --- a/packages/create-printer/package.json +++ b/packages/create-printer/package.json @@ -26,9 +26,10 @@ "@types/prompts": "^2.4.2" }, "dependencies": { - "minimist": "^1.2.7", - "prompts": "^2.4.2", + "clipboardy": "^3.0.0", "fs-extra": "^11.1.0", - "kolorist": "^1.6.0" + "kolorist": "^1.6.0", + "minimist": "^1.2.7", + "prompts": "^2.4.2" } } \ No newline at end of file diff --git a/packages/create-printer/src/index.ts b/packages/create-printer/src/index.ts index 7e9c9f3..a48a3d9 100644 --- a/packages/create-printer/src/index.ts +++ b/packages/create-printer/src/index.ts @@ -4,11 +4,11 @@ import fs from "fs-extra" import path from "path" import minimist from "minimist" import prompts from "prompts" -import { red, reset } from "kolorist" +import { green, red, reset } from "kolorist" type ColorFunc = (str: string | number) => string -type PluginOption = { +type Option = { name: string display: string color?: ColorFunc @@ -19,7 +19,7 @@ const argv = minimist<{ template?: string }>(process.argv.slice(2), { string: ["_"] }) -const plugins: PluginOption[] = [ +const plugins: Option[] = [ { name: "vitepress", display: "Vitepress" @@ -52,19 +52,65 @@ const plugins: PluginOption[] = [ name: "ruanyifeng", display: "阮一峰的网络日志" }, + { + name: "wikipedia", + display: "Wikipedia" + }, { name: "manual", display: "Manual" } ] +const channels: Option[] = [ + { + name: "chromium", + display: "Chromium" + }, + { + name: "chrome", + display: "Chrome" + }, + { + name: "chrome-beta", + display: "Chrome Beta" + }, + { + name: "chrome-dev", + display: "Chrome Dev" + }, + { + name: "chrome-canary", + display: "Chrome Canary" + }, + { + name: "msedge", + display: "Microsoft Edge" + }, + { + name: "msedge-beta", + display: "Microsoft Edge Beta" + }, + { + name: "msedge-dev", + display: "Microsoft Edge Dev" + }, + { + name: "msedge-canary", + display: "Microsoft Edge Canary" + } +] + const defaultTargetDir = "web-printer" async function init() { const argTargetDir = argv._[0] const argPlugin = argv.plugin || argv.p + const argChannel = argv.channel || argv.c let targetDir = argTargetDir || defaultTargetDir - - let result: prompts.Answers<"projectName" | "overwrite" | "plugin"> + let targetChannelName = "" + let result: prompts.Answers< + "projectName" | "overwrite" | "plugin" | "channel" | "haveInstalled" + > try { result = await prompts( @@ -103,7 +149,7 @@ async function init() { ? null : "select", name: "plugin", - message: reset("Select a plugin template:"), + message: reset("Select a priner template:"), initial: 0, choices: plugins.map(k => { return { @@ -113,6 +159,36 @@ async function init() { value: k.name } }) + }, + { + type: + argChannel && channels.find(k => k.name === argChannel) + ? null + : "select", + name: "channel", + message: reset( + "Select a Chromium channel you have installed or want to install:" + ), + initial: 0, + choices: channels.map(k => { + return { + title: k.color + ? k.color(k.display || k.name) + : reset(k.display || k.name), + value: k.name + } + }), + onState: state => { + targetChannelName = channels.find( + k => k.name === state.value + )!.display + } + }, + { + type: () => (targetChannelName ? "confirm" : null), + name: "haveInstalled", + message: () => reset(`Do you have installed ${targetChannelName} ?`), + initial: true } ], { @@ -125,7 +201,7 @@ async function init() { console.log(cancelled.message) return } - const { plugin, overwrite } = result + const { plugin, overwrite, channel, haveInstalled } = result const root = path.join(cwd, targetDir) if (overwrite) { await fs.remove(targetDir) @@ -138,10 +214,20 @@ async function init() { ) await fs.copy(templateDir, root) + const indexFilePath = path.resolve(root, "src/index.ts") + await fs.writeFile( + indexFilePath, + (await fs.readFile(indexFilePath)) + .toString("utf8") + .replace(/channel: "chrome"/g, `channel: "${channel || argChannel}"`) + ) console.log() console.log("Done. Now Run:") console.log() - console.log(red(`cd ${targetDir} && pnpm i && pnpm pw && code .`)) + if (channel && !haveInstalled) + console.log(green(`> pnpm dlx playwright install ${channel}`)) + console.log(red(`> cd ${targetDir} && pnpm i && code .`)) + console.log() } function isEmpty(path: string) { diff --git a/packages/create-printer/template/javascript-info/package.json b/packages/create-printer/template/javascript-info/package.json index 871d9c6..8934123 100644 --- a/packages/create-printer/template/javascript-info/package.json +++ b/packages/create-printer/template/javascript-info/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/javascript-info/src/index.ts b/packages/create-printer/template/javascript-info/src/index.ts index 20a694e..08f2571 100644 --- a/packages/create-printer/template/javascript-info/src/index.ts +++ b/packages/create-printer/template/javascript-info/src/index.ts @@ -2,7 +2,8 @@ import { Printer } from "@web-printer/core" import javascriptInfo from "@web-printer/javascript-info" new Printer({ - threads: 5 + threads: 5, + channel: "chrome" }) .use( javascriptInfo({ diff --git a/packages/create-printer/template/juejin/package.json b/packages/create-printer/template/juejin/package.json index 4754cea..f4f5fc9 100644 --- a/packages/create-printer/template/juejin/package.json +++ b/packages/create-printer/template/juejin/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/juejin/src/index.ts b/packages/create-printer/template/juejin/src/index.ts index 51908d8..529f162 100644 --- a/packages/create-printer/template/juejin/src/index.ts +++ b/packages/create-printer/template/juejin/src/index.ts @@ -2,7 +2,8 @@ import { Printer } from "@web-printer/core" import juejin from "@web-printer/juejin" new Printer({ - threads: 5 + threads: 5, + channel: "chrome" }) .use( juejin({ diff --git a/packages/create-printer/template/manual/README.md b/packages/create-printer/template/manual/README.md index 33c8449..d801fa8 100644 --- a/packages/create-printer/template/manual/README.md +++ b/packages/create-printer/template/manual/README.md @@ -32,7 +32,8 @@ A printer that can print multiple web pages as one pretty PDF Use [Playwright](https://github.com/microsoft/playwright) to print PDF, just like printing in Chrome, but print multiple web pages as one pretty pdf automatically. - Fully customizable, it's just a nodejs library. -- Universality, supports any websites by plugins. +- Universal, supports any websites by plugins. +- Amazing, can replace website inner links to PDF inner links, supports hash positioning. - Auto generate outlines of PDF, supports different level and collapsed status. - Easy to remove distracting elements. No distractions, only pure knowledge. @@ -46,8 +47,10 @@ If you are not a novice, do what you want to do, just like install a npm package ```bash pnpm i playwright @web-printer/core -pnpm exec playwright install chromium -# plugin you need +# If you have installed Chrome, you can skip it. +# Web Printer use chrome default. Other supported browsers can be viewed in PrinterOption.channel. +pnpm exec playwright install chrome +# install plugin you need pnpm i @web-printer/javascript-info ``` @@ -55,20 +58,25 @@ Then create a `.ts` file, input ```ts import { Printer } from "@web-printer/core" -// import plugin you install -import javascriptInfo from "@web-printer/javascript-info" +// import plugin you have installed +import vitepress from "@web-printer/vitepress" new Printer() .use( - javascriptInfo({ - url: "https://javascript.info/" + vitepress({ + url: { + Guide: "https://vuejs.org/guide/introduction.html", + API: "https://vuejs.org/api/application.html" + } }) ) - .print("The Modern JavaScript Tutorial") + .print("Vue 3.2 Documentation") ``` And run it by [tsx](https://github.com/esbuild-kit/tsx), in other ways may throw errors. I have no time to fix it now. +--- + But if you are a novice, follow me, maybe easier. First you shoud install [pnpm(with node)](https://pnpm.io/installation), [vscode(support typescript)](https://code.visualstudio.com/). @@ -76,8 +84,8 @@ First you shoud install [pnpm(with node)](https://pnpm.io/installation), [vscode ```bash pnpm create printer@latest -# or complete in one step -pnpm create printer@latest web-printer -p vitepress +# or complete in one step. https://github.com/busiyiworld/web-printer/tree/main/packages/create-printer +pnpm create printer@latest web-printer -p vitepress -c chrome ``` And follow the tips. After customizing, use `pnpm print` to print. A pretty PDF will appear in `./output`. @@ -99,8 +107,13 @@ new Printer({} as PrinterOption) ```ts { + /** + * Chromium distribution channel. Choose you have installed. + * @default "chrome" + * */ + channel?: "chromium" | "chrome" | "chrome-beta" | "chrome-dev" | "chrome-canary" | "msedge" | "msedge-beta" | "msedge-dev" | "msedge-canary" /** - * Dir of userdata of Chromium + * Dir of userdata of Chrome. It is not recommended to use your system userData of Chrome. * @default "./userData" */ userDataDir?: string @@ -150,8 +163,8 @@ new Printer({} as PrinterOption) */ continuous?: boolean /** - * Replace website link to PDF link, not support hash url - * @default true + * Replace website link to PDF link + * @default false */ replaceLink?: boolean /** @@ -201,26 +214,23 @@ new Printer({} as PrinterOption) Plugins in Web Printer is only used to adapt to different websites. -A plugin have four methods: +A plugin have five methods: - `fetchPagesInfo`: Used to fetch a list of page url and title, need return the list. - `injectStyle`: Used to remove distracting elements and make web pages more PDF-friendly. - `onPageLoaded`: Run after page loaded. - `onPageWillPrint`: Run before page will be printed. +- `otherParams`: Used to place other useful params. ### Offical plugins - Content Site - - [@web-printer/javascript-info](https://github.com/busiyiworld/web-printer/tree/main/packages/javascript-info) - - [@web-printer/juejin](https://github.com/busiyiworld/web-printer/tree/main/packages/juejin) - - [@web-printer/xiaobot](https://github.com/busiyiworld/web-printer/tree/main/packages/xiaobot) - - [@web-printer/zhihu](https://github.com/busiyiworld/web-printer/tree/main/packages/zhihu) - - [@web-printer/zhubai](https://github.com/busiyiworld/web-printer/tree/main/packages/zhubai) + - [@web-printer/wikipedia](https://github.com/busiyiworld/web-printer/tree/main/packages/wikipedia) - Amazing Blog - [@web-printer/ruanyifeng](https://github.com/busiyiworld/web-printer/tree/main/packages/ruanyifeng) - Documentation Site Generator @@ -309,7 +319,7 @@ type injectStyle = (params: { url: string; printOption: PrinterPrintOption }): M *Let's make some rules*: - Hide all elements but content. -- Make the margin of the content element and it's ancestor elements zero. +- Set the margin of the content element and it's ancestor elements to zero. Therefore, everyone can set the same margin for any website. @@ -319,10 +329,9 @@ But not all websites can do this, sometimes you still need to write CSS yourself When you set `PrinterPrintOption.continuous` to `true`. Web Printer will set the top and bottom margins of all pages except the first page of each artical to zero. -The `titleSelector` is used to mark the title element, The default value is `body`. Most sites don't need to provide the `titleSelector`. +The `titleSelector` is used to mark the title element, and set top margin for it only. The default value is same as `contentSelector` if `contentSelector` is not empty. And If `contentSelector` has `,`, Printer will use the first selector. If `titleSelector` and `contentSelector` are both empty, the default value will be `body`, but sometimes setting margin top for the body may result in extra white space. The `avoidBreakSelector` is used to avoid page breaks in certain elements. The default value is `pre,blockquote,tbody tr` - #### onPageLoades Run after page loaded. Usually used to wait img loaded, especially lazy loaded images. @@ -349,6 +358,19 @@ Run before page will be printed. type onPageWillPrint = (params: { page: Page; pageInfo: PageInfo; printOption: PrinterPrintOption }): MaybePromise ``` +### otherParams + +Used to place other useful params. + +```ts + type otherParams = (params: { page: Page; pageInfo: PageInfo; printOption: PrinterPrintOption }): MaybePromise<{ + hashIDSelector: string + }> +``` + +In some sites, such as Wikipedia or some knowledge base, like to use a hash id to jump to the specified element, is the use of this element's id. If you give the `hashIDSelector` and `PrinterPrintOption.replaceLink` is `true`, Printer could replace the hash of url to PDF position. The default value is `h2[id],h3[id],h4[id],h5[id]`. + + ## Shrink PDF PDF generated by Web Printer maybe need to be shrinked in size by yourself. diff --git a/packages/create-printer/template/manual/package.json b/packages/create-printer/template/manual/package.json index 9118568..673333f 100644 --- a/packages/create-printer/template/manual/package.json +++ b/packages/create-printer/template/manual/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/manual/src/index.ts b/packages/create-printer/template/manual/src/index.ts index 2e839c2..d5f1588 100644 --- a/packages/create-printer/template/manual/src/index.ts +++ b/packages/create-printer/template/manual/src/index.ts @@ -1,5 +1,9 @@ import { Printer, type Plugin } from "@web-printer/core" -new Printer().use({} as Plugin).print("New PDF", { - printBackground: true +new Printer({ + channel: "chrome" }) + .use({} as Plugin) + .print("New PDF", { + printBackground: true + }) diff --git a/packages/create-printer/template/mdbook/package.json b/packages/create-printer/template/mdbook/package.json index 62240be..a954cbd 100644 --- a/packages/create-printer/template/mdbook/package.json +++ b/packages/create-printer/template/mdbook/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/mdbook/src/index.ts b/packages/create-printer/template/mdbook/src/index.ts index e701d6f..61cfc41 100644 --- a/packages/create-printer/template/mdbook/src/index.ts +++ b/packages/create-printer/template/mdbook/src/index.ts @@ -2,7 +2,8 @@ import { Printer } from "@web-printer/core" import mdbook from "@web-printer/mdbook" new Printer({ - threads: 5 + threads: 5, + channel: "chrome" }) .use( mdbook({ diff --git a/packages/create-printer/template/ruanyifeng/package.json b/packages/create-printer/template/ruanyifeng/package.json index c25f009..5611e01 100644 --- a/packages/create-printer/template/ruanyifeng/package.json +++ b/packages/create-printer/template/ruanyifeng/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/ruanyifeng/src/index.ts b/packages/create-printer/template/ruanyifeng/src/index.ts index 5cd3fdf..11c77fd 100644 --- a/packages/create-printer/template/ruanyifeng/src/index.ts +++ b/packages/create-printer/template/ruanyifeng/src/index.ts @@ -2,7 +2,8 @@ import { Printer } from "@web-printer/core" import ruanyifeng from "@web-printer/ruanyifeng" new Printer({ - threads: 5 + threads: 5, + channel: "chrome" }) .use( ruanyifeng({ diff --git a/packages/create-printer/template/vitepress/package.json b/packages/create-printer/template/vitepress/package.json index daafba6..aa07dc8 100644 --- a/packages/create-printer/template/vitepress/package.json +++ b/packages/create-printer/template/vitepress/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/vitepress/src/index.ts b/packages/create-printer/template/vitepress/src/index.ts index 3d2e35b..8f29f23 100644 --- a/packages/create-printer/template/vitepress/src/index.ts +++ b/packages/create-printer/template/vitepress/src/index.ts @@ -2,7 +2,8 @@ import { Printer } from "@web-printer/core" import vitepress from "@web-printer/vitepress" new Printer({ - threads: 5 + threads: 5, + channel: "chrome" }) .use( vitepress({ diff --git a/packages/create-printer/template/wikipedia/package.json b/packages/create-printer/template/wikipedia/package.json index 3bf9561..3571c7c 100644 --- a/packages/create-printer/template/wikipedia/package.json +++ b/packages/create-printer/template/wikipedia/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/wikipedia/src/index.ts b/packages/create-printer/template/wikipedia/src/index.ts index 716077f..99f2cea 100644 --- a/packages/create-printer/template/wikipedia/src/index.ts +++ b/packages/create-printer/template/wikipedia/src/index.ts @@ -1,7 +1,10 @@ import { Printer } from "@web-printer/core" import wikipedia from "@web-printer/wikipedia" -new Printer() +new Printer({ + threads: 2, + channel: "chrome" +}) .use( wikipedia({ urls: [ diff --git a/packages/create-printer/template/xiaobot/package.json b/packages/create-printer/template/xiaobot/package.json index f74efb6..1648148 100644 --- a/packages/create-printer/template/xiaobot/package.json +++ b/packages/create-printer/template/xiaobot/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/xiaobot/src/index.ts b/packages/create-printer/template/xiaobot/src/index.ts index 3e6364a..7572932 100644 --- a/packages/create-printer/template/xiaobot/src/index.ts +++ b/packages/create-printer/template/xiaobot/src/index.ts @@ -2,10 +2,13 @@ import { Printer } from "@web-printer/core" import xiaobot from "@web-printer/xiaobot" // need login before printing -new Printer().login("https://xiaobot.net/") +new Printer({ + channel: "chrome" +}).login("https://xiaobot.net/") // new Printer({ -// threads: 1 +// threads: 1, +// channel: "chrome" // }) // .use( // xiaobot({ diff --git a/packages/create-printer/template/zhihu/package.json b/packages/create-printer/template/zhihu/package.json index e934495..c785846 100644 --- a/packages/create-printer/template/zhihu/package.json +++ b/packages/create-printer/template/zhihu/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/zhihu/src/index.ts b/packages/create-printer/template/zhihu/src/index.ts index 53af8f6..f35d940 100644 --- a/packages/create-printer/template/zhihu/src/index.ts +++ b/packages/create-printer/template/zhihu/src/index.ts @@ -2,9 +2,14 @@ import { Printer } from "@web-printer/core" import zhihu from "@web-printer/zhihu" // need login before printing -new Printer().login("https://www.zhihu.com") +new Printer({ + channel: "chrome" +}).login("https://www.zhihu.com") -// new Printer() +// new Printer({ +// threads: 5, +// channel: "chrome" +// }) // .use( // zhihu({ // url: "https://www.zhihu.com/collection/19561986" diff --git a/packages/create-printer/template/zhubai/package.json b/packages/create-printer/template/zhubai/package.json index 5744a83..daf7077 100644 --- a/packages/create-printer/template/zhubai/package.json +++ b/packages/create-printer/template/zhubai/package.json @@ -1,7 +1,6 @@ { "scripts": { - "print": "tsx src/index.ts", - "pw": "playwright install chromium" + "print": "tsx src/index.ts" }, "devDependencies": { "@web-printer/core": "^0.2.5", diff --git a/packages/create-printer/template/zhubai/src/index.ts b/packages/create-printer/template/zhubai/src/index.ts index 0fc14c2..c13c4e9 100644 --- a/packages/create-printer/template/zhubai/src/index.ts +++ b/packages/create-printer/template/zhubai/src/index.ts @@ -2,16 +2,19 @@ import { Printer } from "@web-printer/core" import zhubai from "@web-printer/zhubai" // maybe you need login before printing -// new Printer().login("https://zhubai.love/") - new Printer({ - threads: 5 -}) - .use( - zhubai({ - url: "https://hsxg.zhubai.love/" - }) - ) - .print("海上星光", { - filter: ({ index }) => index < 10 - }) + channel: "chrome" +}).login("https://zhubai.love/") + +// new Printer({ +// threads: 5, +// channel: "chrome" +// }) +// .use( +// zhubai({ +// url: "https://hsxg.zhubai.love/" +// }) +// ) +// .print("海上星光", { +// filter: ({ index }) => index < 10 +// })