Vite integration

.gitignore

@@ -1,5 +1,7 @@
 /node_modules/
 /dist/
+/dist-ssr/
 /.idea/
 /.cache
 .DS_Store
+*.local

README.md

@@ -1,49 +1,58 @@
-# Introduction
+# 🏁 Introduction
+
 This is the a quick starter project made and used by Benjamin Code to quickly experiment stuffs when he's trying to replicate cool effects he sees on the web.
 
+## 💻 Installation & Runnig
+
+To install dependencies all you need to do is run this command:
 
-# Installation
-``` 
+```shell
 npm install
-npm run start
 ```
 
-And then go to `localhost:1234`
+### Dev server
 
-# Handling changes
-If you need to change things such as navbar for example, you will find all the reusable component througout the pages in the folder : `/src/partials`.
-Change the html here and modifiy the css in the good file in `/src/scss`.
-That is almost everything you need to know.
+```shell
+npm run dev
+```
 
-If you have run : `npm run start`, parcels has an excellent hot reload except if you are on another page than index.html. There is a bug with parcels that requires you to manually refresh the page when you are not working on `index.html`.
+Run the above command to launch dev server and then go to `localhost:3000`
 
+### Build
 
-# Rollback to parcel v1
-I use this quick start kit to quickly launch new project for my livestreams on Twitch. At the end, the goal is to publish on codesandbox the result.
+```shell
+npm run build
+```
 
-Unfortunately, parcel v2 is not well handled by codesandbox. When rolling back, I also had to remove the posthtlm feature which where buggy.
-Finally it is a very basing project where scss and typescript works out of the box but don't expect to do something really fancy with posthtml.
-For a bigger project with parcel v2 and many good features, use the main branch.
+To compile codes & build for production. That will create a **"./dist"** directory in the root (more details [here](https://vitejs.dev/guide/build.html)).
 
-# Alias to quickly upload the code on Codesandbox
-You must install codesandbox command line on your computer. Then add this alias to your `.zshrc`:
+## 🚧 Handling changes
 
+Change the html and modify the css in the good file in `./src/scss`.
+That is almost everything you need to know.
+
+## ⚡ Alias to quickly upload the code on **codesandbox**
+
+You must install [codesandbox command line](https://codesandbox.io/docs/environment) on your computer. Then add this alias to your `.zshrc`:
+
+```shell
+alias share_code='rm -rf dist && codesandbox ./'
 ```
-alias share_code='rm -rf dist .cache && codesandbox ./'
-```
 
-# Benjamin Code
+## 📍 Note
+
+I use this quick start kit to quickly launch new project for my live-streams on Twitch. At the end, the goal is to publish on **[codesandbox](https://codesandbox.io/)** the result.
+
+This version uses **ViteJS** [as the development environment. This version is an alternative to the one using **Parcel** (see [codesandbox](https://github.com/bdebon/quick-parcel-project) & [main](https://github.com/bdebon/quick-parcel-project/tree/main) branches).
+
+## Benjamin Code
 
 It's also the project he uses for his Twitch livestreams.
 
 A real project was made with this quick starter:
 
-https://benjamincode.tv
+[benjamincode.tv](https://benjamincode.tv)
 
 To support Benjamin Code, you can follow him on:
 
-YouTube: https://www.youtube.com/channel/UCLOAPb7ATQUs_nDs9ViLcMw
-
-Twitter: https://twitter.com/benjamincodeYT
-
-Twitch: https://www.twitch.tv/benjamincode
+[<image src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/2560px-YouTube_full-color_icon_%282017%29.svg.png" height="12" /> YouTube](https://www.youtube.com/channel/UCLOAPb7ATQUs_nDs9ViLcMw) [<image src="https://upload.wikimedia.org/wikipedia/fr/thumb/c/c8/Twitter_Bird.svg/1200px-Twitter_Bird.svg.png" height="12" style="margin-left: 10px" /> Twitter](https://twitter.com/benjamincodeYT) [<image src="https://upload.wikimedia.org/wikipedia/commons/d/dd/LOGO_TWITCH_CAR_JE_LIVE_SUR_TWITCH_ET_J%27AI_60_000_ABONEE.png" height="12" style="margin-left: 10px" /> Twitch](https://www.twitch.tv/benjamincode)

index.html

@@ -1,8 +1,7 @@
 <html>
 <head>
-    <title>Parcel Sandbox</title>
     <meta charset="UTF-8"/>
-    <link rel="stylesheet" type="text/css" href="src/styles.scss"/>
+    <link rel="stylesheet" type="text/css" href="./src/styles.scss"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <!-- Canonical -->
     <link rel="canonical" href="https://www.example.com">
@@ -19,13 +18,13 @@
     <!-- Social -->
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="Quick Parcel Project — Home">
+    <meta name="twitter:title" content="Quick Vite Project — Home">
     <meta name="twitter:description" content="Home description.">
     <meta name="twitter:image" content="#">
     <!-- Facebook -->
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://www.example.com">
-    <meta property="og:title" content="Quick Parcel Project — Home">
+    <meta property="og:title" content="Quick Vite Project — Home">
     <meta property="og:description" content="Home description.">
     <meta property="og:image" content="#">
     <meta property="og:image:width" content="1200">
@@ -40,15 +39,15 @@
 <body>
 
 <div class="hero">
-    <h1>Quick Parcel Project by Benjamin Code</h1>
+    <h1>Quick ViteJs Project by Benjamin Code</h1>
     <p class="description">
-        This is Benjamin Code's <a href="https://github.com/bdebon/quick-parcel-project" target="_blank">quick starter project</a> running on Parcel.js v1 to maximise compatibilities with codesandbox.
+        This is Benjamin Code's <a href="https://github.com/bdebon/quick-parcel-project" target="_blank">quick starter project</a> running on ViteJs to maximise compatibilities with codesandbox.
     </p>
 
 </div>
 
 
-<script type="module" src="src/index.ts"></script>
+<script type="module" src="./src/index.ts"></script>
 
 </body>
 </html>