diff --git a/README.md b/README.md index fe34b0b..64efc8b 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ # Multipage Svelte, Svelte MPA -The purpose of this project is to make [Svelte](//svelte.dev/) that defaults is component-based SPA into an statically-generated MPA (multipage SPA, page+component-based). +The purpose of this project is to make [Svelte](//svelte.dev/) that defaults is component-based SPA into an statically-generated MPA (multi-page SPA, page+component-based). So for deployment you only need to [rsync](//rsync.samba.org/) the `.html`, imported/external `.css`/`.js` and any other assets (images, fonts, non-`.svelte` files). It was originally built for [Z](https://github.com/kokizzu/gotro/tree/master/Z) template engine. Creator: [sameerveda](//github.com/sameerveda) -Specs/sponsored by: [kokizzu](//github.com/kokizzu) +Specs/maintainer/sponsored by: [kokizzu](//github.com/kokizzu) -## Why Svelte? +## 💡 Why Svelte? [Rethinking Reactivity](//www.youtube.com/watch?v=AdNJ3fydeao) `tl;dw` @@ -17,7 +17,7 @@ Specs/sponsored by: [kokizzu](//github.com/kokizzu) - No JSX, so you can just copy paste any html and it should work without have to convert it - compiled, so most likely you can detect problems before running it -## Changelog +## 📰 Changelog - `2023-06-23` feat: upgrade to svelte-4 - `2023-01-07` bugfix: nested component css not outputted after editing @@ -26,7 +26,7 @@ Specs/sponsored by: [kokizzu](//github.com/kokizzu) - `2022-07-07` bugfix: watcher not capturing added/deleted files, feat: optimized watch list - `2022-05-30` initial version -## Specification +## 🉐 Specification For example you have a project with specific structure: @@ -51,11 +51,11 @@ It would automatically generate 3 files: `foo/bar.html`, `subpage/page3.html`, a 2. there no configuration, it should work as-is automatically, anything starts with underscore will not generate `.html`, eg. `foo/_component1.svelte`, or `_components/table.svelte` 3. will look for `_layout.html` in current directory or nearest upper directories as base template 4. can import properly other js, css, or svelte file (relative import) -5. dev mode, eg. `npm run dev`, it would listen to `localhost:5500` then livereload when changed like default svelte template project (will also autogenerate the `.html` files like spec number 1), there's also `npm run watch` if you have reverse proxy or backend that loads html thatt listen on another port +5. dev mode, eg. `npm run dev`, it would listen to `localhost:5500` then livereload when changed like default svelte template project (will also autogenerate the `.html` files like spec number 1), there's also `npm run watch` if you have reverse proxy or backend that loads html that listen on another port 6. using minimal set of npm dependencies and no outdated package (use `./update_deps.sh` to update dependencies) 7. generated html will not remove comments, especially one that used in [Z](https://github.com/kokizzu/gotro/tree/master/Z) template engine, like: `/*! c1 */`, `#{c2}`, `[/* c3 */]`, or `{/* c4 */}` -## Usage +## 🍴 Usage ```shell npm install -g degit # scaffolding helper @@ -71,7 +71,7 @@ npm run build:prod # build project for production ./deploy.sh # example deployment script for single server ``` -## How to update/upgrade from previous version? +## 🏗️ How to update/upgrade from previous version? just copy latest `build.js` to your project directory and then `npm i` or `pnpm i` @@ -89,7 +89,7 @@ npx svelte-migrate svelte-4 . ./update_deps.sh # or npm i # or pnpm i ``` -## Dev Dependencies +## ⌨️ Dev Dependencies - [svelte](//svelte.dev/) - cybernetically enhanced web apps - [esbuild](//esbuild.github.io/) - an extremely fast JavaScript bundler @@ -100,9 +100,9 @@ npx svelte-migrate svelte-4 . - [parse5](//github.com/inikulin/parse5) - html parsing/serialization toolset for node.js - [svelte-preprocess](//github.com/sveltejs/svelte-preprocess) - a svelte preprocessor with sensible defaults and support for: postcss, scss, less, stylus, coffeescript, typescript, pug and much more. -**ZERO** production dependency. +🔥 **ZERO** production dependency. 🔥 -## Why Svelte-MPA? Motivation +## ❓ Why Svelte-MPA? Motivation If you already have existing backend that wasn't written in NodeJS, you can have best of two worlds, multiple page with their own [meta headers](//svelte.dev/repl/ffd783c9b8e54d97b6b7cac6eadace42?version=3.52.0) and content for SEO, and reactivity using Svelte for each page. Also with this you can remove the serialization/transport/hop-cost of default setup: @@ -132,7 +132,7 @@ became: So your existing backend responsibility is to load the generated `.html` then replace the js variable or any template keyword with proper value for initial load/SEO. So not svelte's responsibility to request/preload the initial json content, but backend's responsibility (whatever existing backend langauge/framework you are using). Like SvelteKit, you can also use this as SSG. You can see example [here](//github.com/kokizzu/sveltefiber) -## TODO / Possible Improvement +## 📈 TODO / Possible Improvement - [ ] update `