Improve report template generation

- Replace the JS build script with Vite - Replace SCSS with PostCSS - Refactor components
GaelGirodon · Apr 16, 2022 · 6d42166 · 6d42166
1 parent a5b6381
commit 6d42166
Show file tree

Hide file tree

Showing 26 changed files with 2,787 additions and 635 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,7 +11,8 @@
 
 # Node.js
 node_modules/
-*.log
+dist/
+*.log*
 
 # IDE
 .idea/

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -17,14 +17,13 @@ Build and run:
 
 - Build the report template ([`report/`](./report)): `npm run build`
   <br>_or_ for report template development:
-  - Create a [`data.js`](./report/src/scripts/data.js) file with some stub data
+  - Create a [`data.js`](./report/public/data.js) file with some stub data
     (e.g. from a real report):
     ```js
     var files = [/* stub data */];
     var pathSeparator = "/";
     ```
-  - Build [`template-dev.html`](./internal/report/template-dev.html):
-    `npm run build:dev`
+  - Run: `npm run dev`
 - Build and run DirStat: `go run "cmd/dirstat.go" [...]`
 
 ## Release

diff --git a/report/build.js b/report/build.js
diff --git a/report/src/template.html → report/index.html b/report/src/template.html → report/index.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>DirStat report</title>
-  <!-- {styles} -->
 </head>
 <body>
 <main>
@@ -46,6 +45,6 @@ <h2 class="subtitle"><!-- {path} --></h2>
   </div>
 </main>
 <!-- {data} -->
-<!-- {scripts} -->
+<script type="module" src="/src/main.jsx"></script>
 </body>
 </html>