Dev (#2)

* add picocss

* fix refresh bug

* use main container

    https://picocss.com/docs/containers.html

* add calculators page, better bindings

* fix routing issues in static build (nginx config, separate repository)

    sveltejs/kit#3852

* lang="ts", and allow importing ts ext

* generate sourcemap, can also do 'inline'. see:

    https://vitejs.dev/config/build-options.html#build-sourcemap

* add build:dev npm task

* upgrade deps

.editorconfig

@@ -0,0 +1,2 @@
+[*.{js.ts,html,svelte}]
+indent_style = tab

.github/workflows/ci.yml

@@ -25,9 +25,14 @@ jobs:
       # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       # Deploy as long as it builds
       # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-      - name: Build
+      - name: Build (prod)
+        if: github.ref == 'refs/heads/master'
         run: npm run build
 
+      - name: Build (dev)
+        if: github.ref == 'refs/heads/dev'
+        run: npm run build:dev
+
       # TODO: how to copy over on prod?
       - name: Deploy (dev) [Copy static files over]
         if: github.ref == 'refs/heads/dev'

package.json

@@ -5,6 +5,7 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"build:dev": "vite build --sourcemap true",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -13,10 +14,11 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^2.0.1",
-		"@sveltejs/kit": "^1.15.2",
-		"@typescript-eslint/eslint-plugin": "^5.57.1",
-		"@typescript-eslint/parser": "^5.57.1",
+		"@picocss/pico": "^1.5.9",
+		"@sveltejs/adapter-static": "^2.0.2",
+		"@sveltejs/kit": "^1.15.5",
+		"@typescript-eslint/eslint-plugin": "^5.58.0",
+		"@typescript-eslint/parser": "^5.58.0",
 		"eslint": "^8.38.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte3": "^4.0.0",
@@ -27,7 +29,7 @@
 		"tslib": "^2.5.0",
 		"typescript": "^5.0.4",
 		"vite": "^4.2.1",
-		"vitest": "^0.30.0"
+		"vitest": "^0.30.1"
 	},
 	"type": "module"
 }

src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const trailingSlash = 'always';

src/routes/+page.svelte

@@ -1,9 +1,15 @@
+<script>
+	import '@picocss/pico';
+</script>
+
 <title>Home Page | NutraTech</title>
-<h1>Welcome to NutraTech</h1>
 
-<!--Get environment dynamically: prefix title [DEV]-->
-<p>Visit <a href="/calculators/">/calculators/</a> for the calculators</p>
+<main class="container">
+	<h1>Welcome to NutraTech</h1>
+
+	<p>Visit <a href="/calculators">/calculators</a> for the calculators</p>
 
-<h2>Externals</h2>
-<p>Visit <a rel="external" href="/blog/">/blog/</a> for the blog</p>
-<p>Visit <a rel="external" href="/api/">/api/</a> for API documentation</p>
+	<h2>Externals</h2>
+	<p>Visit <a rel="external" href="/blog/">/blog/</a> for the blog</p>
+	<p>Visit <a rel="external" href="/api/">/api/</a> for API documentation</p>
+</main>