From 5be0a290bda1d5a69001fb8fe748fd85d4cc578d Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 7 Nov 2024 16:04:48 +0100
Subject: [PATCH] Update README, minor type adjustments

---
 README.md                        | 41 +++++++++++++++++---------------
 src/components/SpeckleViewer.vue |  3 ++-
 src/composables/viewer.ts        |  4 ++--
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index fa00f2c..87e7c29 100644
--- a/README.md
+++ b/README.md
@@ -1,39 +1,42 @@
-# insights
 
-This template should help get you started developing with Vue 3 in Vite.
+#  Speckle - Interactive Insights workshop
 
-## Recommended IDE Setup
+This is the repo we will be using for the interactive insights workshop. It is not required to have this project running to follow the workshop. But if you want to follow along, or just play around with the viewer/code, you can clone this repo and run it locally.
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+For the workshop, we will be building a simple app on top of the Speckle Viewer. You can find the documentation [here](https://speckle.guide/viewer/).
 
-## Type Support for `.vue` Imports in TS
+##  Requirements
+This demo project is built with Vue 3/TypeScript/Tailwind, but no tool-specific knowledge is required to follow the workshop. The viewer itself is framework agnostic.
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+#### Node
+In order to run the project you need to have Node (22/LTS) installed.
 
-## Customize configuration
+#### IDE
+You can use whichever IDE you prefer. Recommended is [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (disable Vetur).
 
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
+##  Project Setup
 
+###  Install the dependencies
 ```sh
+
 npm install
+
 ```
 
-### Compile and Hot-Reload for Development
+###  Run the development server
 
 ```sh
-npm run dev
+
+npm run  dev
+
 ```
 
-### Type-Check, Compile and Minify for Production
+###  Build for production
+
+  
 
 ```sh
-npm run build
-```
 
-### Lint with [ESLint](https://eslint.org/)
+npm run  build
 
-```sh
-npm run lint
-```
+```
\ No newline at end of file
diff --git a/src/components/SpeckleViewer.vue b/src/components/SpeckleViewer.vue
index 0bdf538..33c24b3 100644
--- a/src/components/SpeckleViewer.vue
+++ b/src/components/SpeckleViewer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-screen w-screen">
-    <div class="h-screen w-screen" ref="canvas" width="100%" height="100%" />
+    <div class="h-screen w-screen" ref="canvas" />
   </div>
 </template>
 
@@ -12,6 +12,7 @@ const canvas = useTemplateRef('canvas')
 const { init: initViewer, viewer, loadModelFromUrl } = useViewer()
 
 onMounted(async () => {
+  if (!canvas.value) return
   await initViewer(canvas.value)
   await loadModelFromUrl('https://app.speckle.systems/projects/24c98619ac/models/38639656b8')
 })
diff --git a/src/composables/viewer.ts b/src/composables/viewer.ts
index 59252fe..19dffd5 100644
--- a/src/composables/viewer.ts
+++ b/src/composables/viewer.ts
@@ -13,9 +13,9 @@ export default function useViewer() {
 
   /**
    * Initialize the viewer
-   * @param element - HTMLElement to initialize the viewer on
+   * @param element - HTMLDivElement to initialize the viewer on
    */
-  async function init(element: HTMLElement) {
+  async function init(element: HTMLDivElement) {
     // Set the default viewer parameters
     const params = DefaultViewerParams
     params.showStats = false