Merge pull request #34 from luisaph/upgrade-node-magicbook

Upgrade node magicbook

.github/workflows/firebase-hosting-merge.yml

@@ -12,14 +12,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '14.18.0'
+          node-version: '20.0.0'
           cache: 'yarn'
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Install and Build 🔧
         run: |
           yarn install

.github/workflows/firebase-hosting-pull-request.yml

@@ -10,16 +10,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/[email protected]
-        # with:
-        #   ref: master
+        uses: actions/checkout@v4
+        with: 
 
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '14.18.0'
+          node-version: '20.0.0'
           cache: 'yarn'
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Install and Build 🔧
         run: |
           yarn install

.github/workflows/import-notion-docs-PR.yml

@@ -6,14 +6,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '14.18.0'
+          node-version: '20.0.0'
           cache: 'yarn'
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Yarn Install
         run: yarn install
 

.github/workflows/notion-to-github-and-preview-deploy.yml

@@ -6,14 +6,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '14.18.0'
+          node-version: '20.0.0'
           cache: 'yarn'
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Yarn Install
         run: yarn install
 

src/notion-docs/chapters/melody.md

@@ -10,13 +10,11 @@ If rhythm is the element of music that makes us tap our foot and want to dance,
 
 A melody is a sequence of tones that we, as listeners, perceive as a single entity. One of the things we perceive when we listen to a melody is pitch - how high or low each tone is. Here is one example of a melody:
 
-{% p5 melody/melody-0/ %}
+{% p5 melody/melody-1 %}
 
 There are also slight differences in loudness: some tones are louder, some are softer:
 
-[Loudness interactive]
-
-{% p5 melody/melody-1 %}
+<iframe src="https://editor.p5js.org/luisa_NYU/full/vynz3it3_"></iframe>
 
 Tones also have a duration: some are shorter, some are longer. Let's draw the tones in our melody as they occur over time:
 
@@ -64,7 +62,7 @@ _Click and hold to play each. Frequency is measured in Hertz (Hz). One hertz is
 
 </figure><br>
 
-### Pitches in Code
+### Code
 
 With this knowledge - melodies are sequences of tones, tones are oscillations at different amplitudes and frequencies which make them higher, lower, louder and softer - let's create our first pitched digital instrument.
 
@@ -89,10 +87,22 @@ Modify the example above, and create your own [Theremin](https://www.youtube.com
 - What range of frequencies does your instrument offer? What's the range of amplitudes?
 - Applying what you learned in the Elements of Sound chapter, change the volume and frequency mapping so that instead of being linear, it is on a logarithmic scale. Is the difference noticeable?
 - Allow your user to add pitch guides to the interface by clicking at certain Y positions.
-- Connect the circle’s position to the motion of your body
+- Connect the circle’s position to the motion of your body using [ml5 and PoseNet](https://learn.ml5js.org/#/reference/posenet).
 
 References:
 
-Picture of Clara Rockmore, link to [https://en.wikipedia.org/wiki/Theremin](https://en.wikipedia.org/wiki/Theremin)
+- Theremin
+
+<figure>
+
+![Melody-3.png](Melody-3.png)
+_Alexandra Stepanoff playing the theremin on [NBC Radio](https://en.wikipedia.org/wiki/NBC_Red_Network), 1930. Image source: [wikipedia](https://en.wikipedia.org/wiki/Theremin)._
 
-Picture of Pamela Z, link to [https://en.wikipedia.org/wiki/Theremin](https://en.wikipedia.org/wiki/Theremin)
+</figure><br>
+
+<figure>
+
+![Melody-4.png](Melody-4.png)
+_Pamela Z’s [suite for solo voice and electronics](https://www.youtube.com/watch?v=ebxvVJwGWek)_
+
+</figure><br>

src/notion-docs/index.md

@@ -6,6 +6,4 @@ title: index
 
 The Code of Music is an interactive handbook that teaches readers how to create musical systems with code, in the browser. Organized in chapters covering the elements of music (rhythm, melody, timbre, harmony, form), the book includes interactive illustrations, editable code examples, a variety of inspiration projects, and step by step tutorials for example projects. These range from audio-visual theremins and probability drum machines to loop-based interactive songs and generative compositions that respond to the current state of the weather. The book is intended for readers who have taken an introductory course on creative computing or have equivalent coding experience. Aiming to welcome the musically-curious and musicians of varying backgrounds, interests, and skill levels, it does not assume previous knowledge of computer music, music theory or production.
 
-The book is currently under development ––this website contains placeholder content of different media types, and functions as a test of the publishing workflow we are developing to publish it in both web and print formats.
-
-It is based on lectures and examples from a class of the same name, taught at ITP/IMA, at the graduate and undergraduate levels, in New York City and in Shanghai.
+The book is currently under development ––this website contains placeholder content of different media types, and functions as a test of the workflow we are developing to publish it in both web and print formats. It is based on lectures and examples from a class of the same name, taught at ITP/IMA, at the graduate and undergraduate levels, in New York City and in Shanghai.

src/plugins/magicbook-webpack.js

@@ -0,0 +1,84 @@
+const webpack = require("webpack");
+const fs = require('fs');
+const _ = require("lodash");
+const path = require('path');
+const util = require('util');
+const through = require('through2');
+
+const Plugin = function(registry) {
+  registry.before('load', 'webpack:run', this.run);
+  registry.before('liquid', 'webpack:insert', this.insert);
+}
+
+Plugin.prototype = {
+
+  // Run webpack and put the resulting output into a
+  // manifest object
+  run: function(config, extras, callback) {
+
+    // If the configuration file has a webpack property
+    // with a link to the config file
+    if(config.webpack) {
+
+      const that = this;
+      this.manifest = {};
+
+      // Require the config file relative to the process
+      // and make a copy to not mess up between tests.
+      const loadPath = path.join(process.cwd(), config.webpack);
+      const conf = _.cloneDeep(require(loadPath));
+
+      // Entries should be loaded relative to the config file
+      conf.context = path.dirname(loadPath);
+
+      // Output should be relative to the build folder
+      const oldPath = conf.output.path;
+      conf.output.path = path.join(process.cwd(), extras.destination, oldPath);
+
+
+      // Run webpack
+      webpack(conf, function(err, stats) {
+        if(err) return callback(err, config, extras);
+
+        const json = stats.toJson();
+
+        if(json.errors.length > 0)   console.error(json.errors);
+        if(json.warnings.length > 0) console.warn(json.warnings);
+
+
+        // Parse output files into a manifest object
+        _.each(json.assetsByChunkName, function(v, k) {
+          that.manifest[k] = path.join(oldPath, v.toString());
+        });
+
+        callback(null, config, extras);
+      });
+
+    } else {
+      callback(null, config, extras);
+    }
+  },
+
+  // Loop through each file and add the relative link to the
+  // manifest files.
+  insert: function(config, stream, extras, callback) {
+
+    const manifest = this.manifest;
+
+    // add the locals to the files liquidLocals
+    stream = stream.pipe(through.obj(function(file, enc, cb) {
+
+      _.each(manifest, function(filename, k) {
+        const rel = path.relative(path.dirname(file.relative), filename);
+        _.set(file, 'layoutLocals.webpack.' + k, rel);
+        _.set(file, 'pageLocals.webpack.' + k, rel);
+      });
+
+      cb(null, file);
+    }));
+
+    callback(null, config, stream, extras);
+  }
+}
+
+module.exports = Plugin;