Run prettier and add precommit hook

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,8 @@
+dist
+assets
+public
+
+.yarn
+.husky
+package-lock.json
+.yarnrc.yml

README.md

@@ -2,7 +2,7 @@
 
 This scaffolding lets you easily get started with using Three.js and TypeScript.
 
-Especially good for rendering scenes which include custom models, textures, and materials.
+![example scene](./assets/docs/example.jpg)
 
 ## Features
 
@@ -99,23 +99,21 @@ export class Demo implements Experience {
   // called on each render
   update() {}
 }
-
 ```
 
-![example scene](./assets/docs/example.jpg)
-
 ### Removing the example scene
 
 To demonstrate how to use the scaffolding, this project includes an example scene. To remove it and start with a blank project, run:
 
 ```bash
 yarn cleanup
 ```
+
 This will also clear the content of this README.md file to just the basic commands for running the project.
 
 ### Serving Resources
 
-Resources loaded through THREE.js loaders need to go in the `/public` directory to avoid being compiled by Vite. This includes textures and models. 
+Resources loaded through THREE.js loaders need to go in the `/public` directory to avoid being compiled by Vite. This includes textures and models.
 
 Shaders are loaded using the [vite-plugin-glsl](https://github.com/UstymUkhman/vite-plugin-glsl) Vite plugin and can be located anywhere within the `/src` directory.
 

package.json

@@ -10,7 +10,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "cleanup": "node ./scripts/cleanup.js"
+    "cleanup": "node ./scripts/cleanup.js",
+    "prepare": "husky install"
   },
   "type": "module",
   "dependencies": {
@@ -19,11 +20,16 @@
   },
   "devDependencies": {
     "@types/three": "^0.141.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
     "prettier": "2.7.1",
     "sass": "^1.52.3",
     "typescript": "^4.7.4",
     "vite": "^2.9.12",
     "vite-plugin-glsl": "^0.1.5"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  }
 }

scripts/cleanup.js

@@ -6,6 +6,8 @@ fs.rm('./src/demo', { recursive: true }, () => {})
 // remove public/space_dog directory
 fs.rm('./public/space_dog', { recursive: true }, () => {})
 
+fs.rm('./assets/docs', { recursive: true }, () => {})
+
 // rewrite src/main.ts to only include the style import
 fs.writeFileSync(
   './src/main.ts',

src/engine/interface/info.scss

@@ -1,60 +1,60 @@
 .info-container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    padding: 16px 20px;
-
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 16px 20px;
+
+  display: flex;
+  flex-direction: column;
+
+  user-select: none;
+  opacity: 40%;
+  transition: opacity 0.3s ease-in-out;
+
+  color: #fff;
+  font-family: 'Helvetica', 'Arial', sans-serif;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+
+  &:hover {
+    opacity: 100%;
+  }
+
+  h1 {
+    margin-bottom: 0;
+    font-weight: normal;
+  }
+
+  .description {
+    width: 250px;
+    max-width: 100%;
+    margin-bottom: 4px;
+  }
+
+  .social-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
 
-    user-select: none;
-    opacity: 40%;
-    transition: opacity 0.3s ease-in-out;
+  .social-button {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    padding: 8px;
+    margin-right: 8px;
+    border-radius: 50px;
+    align-items: center;
 
-    color: #fff;
-    font-family: 'Helvetica', 'Arial', sans-serif;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+    background: #fff;
+    transition: box-shadow 0.3s ease-in-out;
 
     &:hover {
-        opacity: 100%;
-    }
-
-    h1 {
-        margin-bottom: 0;
-        font-weight: normal;
-    }
-
-    .description {
-        width: 250px;
-        max-width: 100%;
-        margin-bottom: 4px;
-    }
-
-    .social-container {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     }
 
-    .social-button {
-        display: flex;
-        width: 24px;
-        height: 24px;
-        padding: 8px;
-        margin-right: 8px;
-        border-radius: 50px;
-        align-items: center;
-
-        background: #fff;
-        transition: box-shadow 0.3s ease-in-out;
-
-        &:hover {
-            box-shadow: 0 0 10px rgba(0,0,0,0.2);
-        }
-
-        img {
-            max-width: 100%;
-        }
+    img {
+      max-width: 100%;
     }
+  }
 }