中文 | English
Pake
A simple way to package a web page with Rust to create Mac App, using Tauri as underlying layer, supporting WeRead、Twitter、Youtube、Google Translate、Reference、Flomo、Witeboard、YuQue、RunCode、Vercel、V2EX、Tools, detailed development tutorial can be seen at the bottom.
## Features
🏂 **Small**：Nearly 40 times smaller than the Electron shell package, less than 3M ([Data](https://static.tw93.fun/img/pakedata.png)).
😂 **Fast**：Using the Rust Tauri, the performance experience is much lighter and faster than JS, memory is much smaller.
🩴 **Special**：Not just packaged, with universal shortcut pass-through, immersive windows, drag-and-drop, packaged style compatibility.
🐶 **Toy**：Just a very simple little toy, a way to play with Rust instead of the old idea of shelling the web.
## Download
More common apps can be downloaded from [Release](https://github.com/tw93/Pake/releases), in addition you can go to [Discussions](https://github.com/tw93/Pake/discussions/74) to see the sharing of Pake fans.
## Shortcuts
1. ⌘ + [：Return to the previous page
2. ⌘ + ]：Go to the next page
3. ⌘ + ↑：Auto scroll to top of page
4. ⌘ + ↓：Auto scroll to bottom of page
5. ⌘ + r：Refresh Page
6. ⌘ + w：Hide window, not quite
7. ⌘ + -：Zoom out the page
8. ⌘ + =：Zoom in the Page
9. ⌘ + 0：Reset the page zoom
In addition, it supports double clicking the head to switch to full screen, and dragging the head to move the window
## 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, if you want to package Windows or Linux systems, you can refer to [Building](https://tauri.app/v1/guides/building/) Documentation.
```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 5 fields `url, productName, icon, title, identifier`, icon can be selected from the `icons` directory or downloaded from [macOSicons](https://macosicons.com/#/) to match the product.
2. For window property settings, you can modify the `width/height` of the `windows` property in `tauri.conf.json`, whether it is `fullscreen`, whether it is `resizable`, if you are not good at adapting immersive headers, you can set `transparent` to `true` and you're done.
3. `npm run dev` for local debugging; `npm run dev:debug` to open the devtools for container debugging.
4. `npm run build` can be run to package for production.
## Advanced
#### 1. How do I rewrite the style, e.g. to remove ads from the original site, or even redesign it?
First, open devtools debug mode with `npm run dev:debug`. After that, find the name of the style you want to change and verify the effect in devtools, and find the location of the style in `pake.js` with `style.innerHTML`. Finally, add the style you need to override, there are some examples you can copy.
#### 2. How to inject js code, e.g. to implement event listeners, e.g. keyboard shortcuts?
Refer to the event listener in `pake.js` with `document.addEventListener`, and write it directly, it's more of a basic front-end technique here.
#### 3. How to communicate with Pake about events in containers, such as dragging and dropping, scrolling, special clicks on the Web, etc.?
Refer to the communication code in `pake.js` with `postMessage`, write the event listener and then use `window.ipc.postMessage` to pass the event and its parameters, then refer to the container to receive events `window.drag_window` and handle them yourself, for more information, refer to tauri and wry's official documentation.
## Support
- I have two cats, one is called TangYuan, and one is called Coke, If you think Pake makes your life better, you can give my cats feed canned food 🥩🍤.
- If you like Pake, you can star it in Github. We are more welcome to [recommend Pake](https://twitter.com/intent/tweet?url=https://github.com/tw93/Pake&text=Pake%20-%20A%20simple%20Rust%20packaged%20web%20pages%20to%20generate%20Mac%20App%20tool,%20compared%20to%20traditional%20Electron%20package,%20the%20size%20of%20nearly%2040%20times%20smaller,%20generally%20about%202M,%20the%20underlying%20use%20of%20Tauri,%20performance%20experience%20than%20the%20JS%20framework%20is%20much%20lighter~) to your like-minded friends.
- You can follow my [Twitter](https://twitter.com/HiTw93) to get the latest news of Pake, or join [Telegram](https://t.me/miaoyan) chat group.
## 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.
