From b7e31d4390aa63f730cc7b8b81f7bfc65909959b Mon Sep 17 00:00:00 2001 From: Tw93 Date: Mon, 17 Oct 2022 16:35:14 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=9C=80=E6=96=B0=E7=9A=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 19 +++++++--- README_EN.md | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 116 insertions(+), 6 deletions(-) create mode 100644 README_EN.md diff --git a/README.md b/README.md index e7a7ab6..f8670b3 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,17 @@ -# Pake +

中文 | English

+

+ +

Pake

+
很简单的用 Rust 打包网页生成很小的 Mac App
+

-> 用 Rust 来打包你的 App，底层使用 Tauri，当前支持微信读书、Flomo、WhatsApp、Vercel、Witeboard，有更多想法，欢迎提 Issue，详细小白开发教程可见底部。 +## 概览 + +用 Rust 来打包你的 App，底层使用 Tauri，当前支持微信读书、Flomo、WhatsApp、Vercel、Witeboard，有更多想法，欢迎提 Issue，详细小白开发教程可见底部。 ## 特征 -🏂 **小**：相比传统的 electron 套壳打包，大小要小将近 50 倍，一般不到 2M +🏂 **小**：相比传统的 Electron 套壳打包，大小要小将近 50 倍，一般不到 2M 😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少 🩴 **特**：不是单纯打包，实现了通用快捷键的透传、沉浸式的窗口、拖动、打包样式兼容 🤱🏻 **玩**：只是一个很简单的小玩具，一个用 Rust 替代之前套壳网页老的思路玩法，友好交流勿喷 @@ -66,10 +73,10 @@ npm run build ## 打新包 -1. 修改 `src-tauri` 目录下的 `tauri.conf.json` 中的 productName、icon、title、identifier 这 4 个字段，其中 icon 可以去 [macosicons](https://macosicons.com/#/) 下载并放到 `icons` 目录下即可 +1. 修改 `src-tauri` 目录下的 `tauri.conf.json` 中的 `productName、icon、title、identifier` 这 4 个字段，其中 icon 可以去 [macosicons](https://macosicons.com/#/) 下载并放到 `icons` 目录下即可 2. 修改 `src-tauri/src` 目录下的 `main.rs` 中的 with_url 字段为你需要打包网页的地址 -3. npm run dev 本地调试看看效果，此外可以打开 `main.rs` 中 devtools 两处注释（搜索 `_devtools`）进行容器调试 -4. npm run build 运行即可打包，假如有打开 devtools 模式，记得注释掉 +3. `npm run dev` 本地调试看看效果，此外可以打开 `main.rs` 中 devtools 两处注释（搜索 `_devtools`）进行容器调试 +4. `npm run build` 运行即可打包，假如有打开 devtools 模式，记得注释掉 ## 高级 diff --git a/README_EN.md b/README_EN.md new file mode 100644 index 0000000..a4da969 --- /dev/null +++ b/README_EN.md @@ -0,0 +1,103 @@ +

中文 | English

+

+ +

Pake

+
A simple way to package a web page with Rust to create Mac App
+

+ +## Overview + +Use Rust to package your App, using Tauri as the underlying layer, currently supporting WeRead, Flomo, WhatsApp, Vercel, Witeboard. + +## Features + +🏂 **Small**：Nearly 50 times smaller than the Electron shell package, less than 2M. +😂 **Fast**：Using the Rust Tauri, the performance experience is much lighter and faster than JS. +🩴 **Special**：Not just packaged, with universal shortcut pass-through, immersive windows, drag-and-drop, packaged style compatibility. +🤱🏻 **Happy**：Just a very simple little toy, a way to play with Rust instead of the old idea of shelling the web. + +## Shortcuts + +1. `command + ←`：Return to the previous page +2. `command + →`：Go to the next page +3. `command + ↑`：Auto scroll to top of page +4. `command + ↓`：Auto scroll to bottom of page +5. `command + r`：Refresh Page + +## Effect + +### WeRead + +Download： + +![1](https://cdn.fliggy.com/upic/ffUmdj.png) + +### Flomo + +Download： + +![2](https://cdn.fliggy.com/upic/B49SAc.png) + +### Witeboard + +Download： + +![3](https://cdn.fliggy.com/upic/o5QY4c.png) + +### WhatsApp + +Download： + +![4](https://cdn.fliggy.com/upic/upAJMb.png) + +### Vercel + +Download： + +![5](https://cdn.fliggy.com/upic/CPVRnY.png) + +## Development + +Refer to the [tauri documentation](https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-macos) to quickly configure your environment before you start + +```sh +// Install Dependencies +npm i + +// Local development +npm run dev + +// Pack +npm run build +``` + +## New pack + +1. Modify the `tauri.conf.json` in the `src-tauri` directory to include 4 fields `productName, icon, title, identifier`, where icon can be downloaded from [macosicons](https://macosicons.com/#/) and placed in the `icons` directory. +2. Change the with_url field in `main.rs` in the `src-tauri/src` directory to the address of the page you want to package. +3. `npm run dev` for local debugging, and open the devtools comments in `main.rs` (search for `_devtools`) for container debugging. +4. `npm run build` can be run to package, if you have devtools mode open, remember to comment it out. + +## Advanced + +#### How do I rewrite the style, e.g. to remove ads from the original site, or even redesign it? + +1. first open devtools debug mode, find the name of the style you want to change and verify the effect in devtools first. +2. find the location of the style in `main.rs` (search for `style.innerHTML`) and add the style you need to override, there are some examples you can copy. +3. Remember to remove the devtools comments before packaging. + +#### How to inject JS code, e.g. to implement event listeners, e.g. keyboard shortcuts? + +1. Same preparation as in case 1 above. +2. refer to the event listener in `main.rs` (search for `document.addEventListener`), and write it directly, it's more of a basic front-end technique here. + +#### How to communicate with Pake about events in containers, such as dragging and dropping, scrolling, special clicks on the Web, etc.? + +1. the same preparation as in 1 above. +2. refer to the communication code in `main.rs` (search for `postMessage`), write the event listener and then use `window.ipc.postMessage` to pass the event and its parameters. +3. then refer to the container to receive events (search for `window.drag_window`) and handle them yourself. for more information, refer to tauri and wry's official documentation. + +## Finally + +1. I hope that you will enjoy playing with it and let me know if you have any new ideas. +2. If you find a page that would be great for a Mac App, please let me know and I'll add it to the list.