Merge pull request #638 from CodingTrain/showcase-page

Rough draft of showcase page

Author: shiffman

content-testing/content-structure.js

@@ -298,6 +298,13 @@ const contentStructure = {
           isFolderSensitive: true,
           isRequired: true
         },
+        showcase: {
+          folders: {},
+          files: {},
+          isFileSensitive: false,
+          isFolderSensitive: true,
+          isRequired: true
+        },
         404: {
           folders: {},
           files: {},

content-testing/file-formats.js

@@ -8,6 +8,7 @@ const video = {
       videoNumber: { type: 'string' },
       videoId: { isRequired: true, type: 'string' },
       nebulaSlug: { isRequired: false, type: 'string' },
+      canonicalTrack: { type: 'string' },
       date: {
         isRequired: true,
         type: 'string'

content-testing/video-canonical-track.test.js

@@ -0,0 +1,107 @@
+const glob = require('glob');
+const fs = require('fs');
+
+describe('challenge videos should never have a canonicalTrack property', () => {
+  const challengeVideos = getChallengeVideos();
+
+  for (const [path, content] of challengeVideos) {
+    test(`${path}`, () => {
+      expect(content).not.toHaveProperty('canonicalTrack');
+    });
+  }
+});
+
+describe('track videos `canonicalTrack`', () => {
+  const tracks = getTracks();
+  const trackVideos = getTrackVideos();
+
+  describe('track referenced does not exist', () => {
+    for (const [path, _, content] of trackVideos) {
+      if (content.canonicalTrack) {
+        test(`${path}`, () => {
+          expect(tracks.has(content.canonicalTrack)).toEqual(true);
+        });
+      }
+    }
+  });
+
+  describe('video is not used in the referenced track', () => {
+    for (const [videoPath, videoSlug, content] of trackVideos) {
+      if (content.canonicalTrack && tracks.has(content.canonicalTrack)) {
+        const [trackPath, _, trackVideos] = tracks.get(content.canonicalTrack);
+
+        test(`track: ${trackPath} | video: ${videoPath}`, () => {
+          expect(trackVideos).toContain(videoSlug);
+        });
+      }
+    }
+  });
+
+  describe('canonicalTrack requirement', () => {
+    for (const [videoPath, videoSlug, content] of trackVideos) {
+      const trackRefs = getTracksReferingToVideo(tracks, videoSlug);
+
+      if (trackRefs.length > 1) {
+        test(`video is referenced by ${trackRefs.length} tracks but doesn't have a canonicalTrack property ${videoPath} | Tracks: ${trackRefs}`, () => {
+          expect(content).toHaveProperty('canonicalTrack');
+        });
+      } else {
+        test(`video is referenced by at most one track and should not have a canonicalTrack property ${videoPath}`, () => {
+          expect(content).not.toHaveProperty('canonicalTrack');
+        });
+      }
+    }
+  });
+});
+
+// ---
+
+function getChallengeVideos() {
+  return glob.sync('content/videos/challenges/**/index.json').map((file) => {
+    const content = JSON.parse(fs.readFileSync(file));
+    return [file, content];
+  });
+}
+
+function getTrackVideos() {
+  return glob
+    .sync('content/videos/**/index.json', {
+      ignore: 'content/videos/challenges/**'
+    })
+    .map((file) => {
+      const content = JSON.parse(fs.readFileSync(file));
+      const slug = file.split('content/videos/')[1].split('/index.json')[0];
+      return [file, slug, content];
+    });
+}
+
+function getTracks() {
+  const refs = glob.sync('content/tracks/**/index.json').map((file) => {
+    const content = JSON.parse(fs.readFileSync(file));
+
+    // pluck out video slugs from main and side tracks for convenience
+    const videos = [];
+    content.chapters?.forEach((chapter) => videos.push(...chapter.videos));
+    content.videos?.forEach((video) => videos.push(video));
+
+    return [file, content, videos];
+  });
+
+  const m = new Map();
+  for (const ref of refs) {
+    const parts = ref[0].split('/');
+    const slug = parts[parts.length - 2];
+    m.set(slug, ref);
+  }
+  return m;
+}
+
+function getTracksReferingToVideo(tracks, videoSlug) {
+  const res = [];
+  tracks.forEach(([path, content, videoSlugs], trackSlug) => {
+    if (videoSlugs.includes(videoSlug)) {
+      res.push(path);
+    }
+  });
+  return res;
+}

content/pages/homepage/index.json

@@ -60,9 +60,10 @@
       "challenges/112-3d-rendering-with-rotation-and-projection/showcase/contribution5.json",
       "challenges/149-tic-tac-toe/showcase/contribution1.json"
     ],
-    "cta": {
-      "text": "Ready to be inspired?",
-      "buttonText": "Enjoy this showcase highlight"
+    "showcaseCta": {
+      "text": "Want to see more?",
+      "buttonText": "Browse the full showcase",
+      "href": "/showcase"
     }
   },
   "events": {

content/pages/showcase/index.json

@@ -0,0 +1,4 @@
+{
+  "title": "Showcase",
+  "description": "The Coding Train Passenger Showcase is collection of amazing projects created by viewers. Add yours!"
+}

content/videos/code/6-objects/2-classes/index.json

@@ -3,6 +3,7 @@
   "description": "This video introduces Object-Oriented Programming in JavaScript with ES6 classes and the p5.js library.",
   "videoNumber": "6.2",
   "videoId": "T-HGdc8L-7w",
+  "canonicalTrack": "code-programming-with-p5-js",
   "date": "2017-10-06",
   "languages": ["p5.js", "JavaScript"],
   "topics": ["basics", "OOP", "objects"],

content/videos/code/6-objects/3-constructor/index.json

@@ -3,6 +3,7 @@
   "description": "This video covers constructor arguments for ES6 classes and the p5.js library. This is one technique for creating multiple objects from the same class with variation.",
   "videoNumber": "6.3",
   "videoId": "rHiSsgFRgx4",
+  "canonicalTrack": "code-programming-with-p5-js",
   "date": "2017-10-09",
   "languages": ["p5.js", "JavaScript"],
   "topics": ["basics", "constructor", "classes", "objects"],

content/videos/more-p5/github-pages-hosting/index.json

@@ -3,6 +3,7 @@
   "description": "How to host your p5.js sketch with GitHub pages, updated for 2020!",
   "videoNumber": "Video number",
   "videoId": "ZneWjyn18e8",
+  "canonicalTrack": "p5-tips-and-tricks",
   "date": "2020-10-02",
   "languages": ["JavaScript"],
   "topics": ["GitHub"],

content/videos/noc/3-angles/4-polar-coordinates/index.json

@@ -4,6 +4,7 @@
   "languages": ["JavaScript", "p5.js"],
   "topics": ["For beginners"],
   "videoId": "O5wjXoFrau4",
+  "canonicalTrack": "the-nature-of-code-2",
   "canContribute": true,
   "timestamps": [],
   "codeExamples": [

content/videos/workflow/5-node/index.json

@@ -2,6 +2,7 @@
   "title": "Node",
   "description": "In this video, I discuss how I use node.js and global packages (to generate p5 sketches, run a web server) as part of my workflow.",
   "videoId": "FjWbUK2HdCo",
+  "canonicalTrack": "2018-workflow",
   "date": "2018-09-24",
   "languages": ["node.js", "JavaScript"],
   "topics": ["npm", "workflow"],