MDN canvas tutorial in Reason and Webpack (#35)

* .gitignore: add emacs *~ files

* Adds a basic canvas with ball bouncing off walls

* MDN tutorial rewritten with webpack-reason-loader

* Temporarily add melange runtime libs

* CI: copy melange runtime lib to node_modules

* Add merlin and dot-merlin-reader

* Ignore .merlin files from VCS

* Split hello.re into two Reason files

.github/workflows/deploy.yml

@@ -19,6 +19,10 @@ jobs:
 
       - name: Install dependencies
         run: npm ci
+
+      - name: Copy melange runtime libs
+        run: cp -R melange-node-modules/* ./node_modules/
+
       - name: Build website
         run: npm run build
 

.github/workflows/test-deploy.yml

@@ -22,6 +22,10 @@ jobs:
 
       - name: Install dependencies
         run: npm ci
+
+      - name: Copy melange runtime libs
+        run: cp -R melange-node-modules/* ./node_modules/
+
       - name: Test build website
         run: npm run build
 

.gitignore

@@ -1,5 +1,5 @@
 # Dependencies
-/node_modules
+node_modules
 
 # Production
 /build
@@ -20,4 +20,13 @@ yarn-debug.log*
 yarn-error.log*
 
 # Emacs
-*~
+*~
+
+# esy
+_esy
+
+# webpack-reason-loader
+.cache
+
+# Merlin
+.merlin

blog/2024-05-19-continuing-dream-webserver-and-whats-next.md

@@ -16,7 +16,7 @@ We were joined by organisers of two other communities, [Anupam](https://function
 
 ## Next meetup: May 26th, 2pm.
 
-We learn how Melange compiler works with a build system to generate JS artifacts. We see how [webpack-reason-loader](https://github.com/DiningPhilosophersCo/reason-loader) was built and try to integrate it with this website [here](/mdn-canvas-tutorial)
+We learn how Melange compiler works with a build system to generate JS artifacts. We see how [webpack-reason-loader](https://github.com/DiningPhilosophersCo/reason-loader) was built and try to integrate it with this website [here](/mdn-game-tutorial)
  You can find the code repository on [Github org](https://github.com/ReasonIndia/reason-bangalore.github.io). You
 can reach out me on X at [@ManasJayanth](https://x.com/ManasJayanth) if you have any trouble. I recommend you set it up and install the dependencies to save time during the call :)
 

docusaurus.config.js

@@ -107,6 +107,8 @@ const config = {
         darkTheme: prismThemes.dracula,
       },
     }),
+
+  plugins: ["./plugins/docusaurus-webpack-plugin"],
 };
 
 export default config;

esy.json

@@ -0,0 +1,15 @@
+{
+  "dependencies": {
+    "ocaml": "5.x",
+    "@opam/dune": "*",
+    "@opam/melange": "*",
+    "@opam/reason": "*"
+  },
+  "devDependencies": {
+    "@opam/merlin": "*",
+    "@opam/dot-merlin-reader": "*",
+    "@opam/ocamlformat": "*",
+    "@opam/ocamlformat-rpc": "*",
+    "@opam/ocaml-lsp-server": "*"
+  }
+}