refactor: adopt parcel toolchain

[LeoDog896]

This uses the Parcel toolchain, with the following refactrs:

• Offsets copying the book to parcel
• Moves the favicon images to one, resizable image
• Uses Split.js's npm module instead of browser script

Current known issues with a full move to parcel (thus why partial codemirror src && some image assets are still there):

• Codemirror v5's npm module just acts weird, and doesn't work even if you import it without parcel's bundling feature. It's most likely necessary to make another PR that refactors to codemirror v6.
• when using query resizing (?width=X&height=Y), mstile causes duplicate assets in parcel (https://github.com/parcel-bundler/parcel/issues/8821#issuecomment-1423195983) meaning that not all of the mstile images could be moved (excluding the 310x150 long image)

Note: The CI fails in this PR as I've added an extra action to install PNPM.

I've mostly avoided any script refactors as requested (#21), and will wait to the next PR to refactor scripts.

This also fixes the error that occurred in #24 by installing necessary dependencies using pnpm (@parcel/config-default wasn't being installed)

[LeoDog896]

*I've marked it as a draft so I can make sure that the CI works by changing it to run push on all branches.

[huacnlee]

I am strong to recommend we use Vite.

Vite is a next generation frontend tool. It's simple and fast. Vite builds as ES modules for modern browsers.

https://npmtrends.com/parcel-vs-snowpack-vs-vite

[LeoDog896]

I am strong to recommend we use Vite.

Vite is a next generation frontend tool. It's simple and fast. Vite builds as ES modules for modern browsers.

https://npmtrends.com/parcel-vs-snowpack-vs-vite

Vite is pretty nice! I was actually going to use vite, but I wasn't sure who here was interested in it since it has higher boilerplate and a bit less friendly to web devs, but it does have a much nicer toolchain that we can use. If a thumbs up is given, I absolutely don't mind moving to vite instead.

[nathanielknight]

If we're going by popularity we should clearly use esbuild 😜

I think I prefer this PR to #33; the more tools we adopt, the more things a potential contributor has to know. Grabbing too many tools means we might have trouble finding folks to work on the site in the future, and might be discouraging for folks who aren't as familiar with web technology. I think adopting Parcel or Vite or ESBuild to help us organize the code is probably worthwhile, but I think adopting Tailwind and React might lead to problems down the line.

[LeoDog896]

Agreed - I am also not a big fan of using tailwind for css in open source sites.

(Do want to mention that ESBuild is used in Vite - the main difference between Vite and Parcel is mainly configuration - parcel aims to be "this works with just a package.json" while vite aims to be a standard web build tool).

I do actually want to continue with parcel as to expand on my previous comment I remember why I didn't use Vite, as parcel is more intuitive and feels more like a superset of regular static webpages.

[huacnlee]

I understand what you mean and agree with it. Actually, Parcel or Vite is acceptable to me (much better than none at the moment).

I actually didn't see your discussion until I implemented #33.

So if you both agree that Parcel is your first choice, then make that decision, Parcel is ok for me, and don’t need to care about my PR.

The current problem facing the Pest site is the need to introduce a frontend tool as soon as possible, and refactor the inline JavaScript implementation (use Npm to manage three-party libraries, and independent JS files, introduce TypeScript and ES6 syntax), so as to create more rich features are possible.

That's why I suggest introducing Vite and TypeScript or even React (when I need to implement Playground, these modern tools will be able to build better complex and complete functional details). Tailwind CSS just a recommendation, I don't particularly care whether must to use it or not.

💡 There is a complete TypeScript implementation extracted from HTML in PR #33. If you think this needs to be done, @LeoDog896 can extract it directly from there and quickly promote the Pest site to complete these transformations. Don't mind the contributor info, I don't mind.

In fact, I have observed that the introduction of Parcel seems to have been a long time ago. Until I added the Format function yesterday #31, the Pest site still did not have an efficient front-end packaging tool.

So my suggestion is to complete the merge of this PR as soon as possible. If problems with such tools are found later, we can still improve quickly (actually, do like this things just need about 1-2 hours).

[huacnlee]

CI need to add:

jobs:
  checks:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: pnpm/action-setup@v2
        with:
          version: 6.0.2

https://github.com/pnpm/action-setup

[nathanielknight]

I'm good with adopting Parcel quickly and then focusing on some more improvements (I think migrating to TS before we add more code is a great idea, and it looks like Parcel transpiles it automatically.

[LeoDog896]

Alright, I'll fix the CI and set this as ready to merge. Any quirks in the CI we can try to fix it as we go, as github CI changes in PRs is pretty frusturating.

[LeoDog896]

CI need to add:

jobs:
  checks:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: pnpm/action-setup@v2
        with:
          version: 6.0.2

https://github.com/pnpm/action-setup

Whoops, almost missed this - thanks!

[huacnlee]

I have been running your updates in local, the webpage is looks ok.

You may need update README for new development guide.

# Source code for `https://pest.rs`

This repo contains the source code for https://pest.rs

## Development Guide

This project uses the following tools:

- [Task](https://taskfile.dev/)
- [wasm-pack](https://rustwasm.github.io/wasm-pack/)
- [mdBook](https://rust-lang.github.io/mdBook/)
- [Pnpm](https://pnpm.io)

Install the dependencies first:

```bash
pnpm install

Build the WASM library:

task

Start Parcel development server:

pnpm start

Then visit http://localhost:1234

[LeoDog896]

@huacnlee by the way the taskfile covers dev processes too - I've updated the README accordingly.

[LeoDog896]

There's a few horrors in the merge conflict that I can't do with GH's web editor (I'm currently on mobile as of now), so it'll be a bit before I'm able to resolve them. If anyone else with push perms wants to, feel free to.

[LeoDog896]

Terribly sorry but I'll be out for a bit. Edits can be made by maintainers, so if you want to merge the PR to unblock #18 in the meantime, someone has to fix the merge conflict.

[LeoDog896]

Merge conflict has been resolved - though I do want to make sure that I didn't break any existing functionality. Otherwise, it's ready :+1:

[LeoDog896]

*whoops, almost broke formatting :sweat_smile:

ready to merge!

[tomtau]

@LeoDog896 the deployment seems to work fine now👍 , but clicking on the "wide button" doesn't work

[LeoDog896]

@LeoDog896 the deployment seems to work fine now+1 , but clicking on the "wide button" doesn't work

whoops! I'll make a PR to fix that functionality.