Merge pull request #662 from nature-of-code/dev/website-examples-page

[Website] Example Page

content/content.json

@@ -0,0 +1 @@
+[{"title":"Dedication","type":"page","src":"./00_2_dedication.html","slug":"dedication"},{"title":"Acknowledgments","type":"page","src":"./00_4_acknowledgments.html","slug":"acknowledgements"},{"title":"Introduction","type":"page","src":"./00_5_introduction.html","slug":"introduction"},{"title":"0. Randomness","type":"chapter","src":"./00_randomness.html","slug":"random"},{"title":"1. Vectors","type":"chapter","src":"./01_vectors.html","slug":"vectors"},{"title":"2. Forces","type":"chapter","src":"./02_forces.html","slug":"force"},{"title":"3. Oscillation","type":"chapter","src":"./03_oscillation.html","slug":"oscillation"},{"title":"4. Particle Systems","type":"chapter","src":"./04_particles.html","slug":"particles"},{"title":"5. Autonomous Agents","type":"chapter","src":"./05_steering.html","slug":"autonomous-agents"},{"title":"6. Physics Libraries","type":"chapter","src":"./06_libraries.html","slug":"physics-libraries"},{"title":"7. Cellular Automata","type":"chapter","src":"./07_ca.html","slug":"cellular-automata"},{"title":"8. Fractals","type":"chapter","src":"./08_fractals.html","slug":"fractals"},{"title":"9. Evolutionary Computing","type":"chapter","src":"./09_ga.html","slug":"genetic-algorithms"},{"title":"10. Neural Networks","type":"chapter","src":"./10_nn.html","slug":"neural-networks"},{"title":"11. Neuroevolution","type":"chapter","src":"./11_nn_ga.html","slug":"neuroevolution"},{"title":"Appendix: Creature Design ","type":"page","src":"./xx_1_creature_design.html","slug":"appendix-creature"}]

content/examples/11_nn_ga/10_6_neuro_evolution_steering_seek/sketch.js

@@ -19,7 +19,6 @@ function setup() {
 function draw() {
   background(255);
 
-  glow.update();
   glow.show();
 
   for (let creature of creatures) {
@@ -31,6 +30,7 @@ function draw() {
       creature.seek(glow);
       creature.update(glow);
     }
+    glow.update();
     lifeCounter++;
   }
 

gatsby-config.js

@@ -15,7 +15,12 @@ module.exports = {
     `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
-    `gatsby-transformer-json`,
+    {
+      resolve: `gatsby-transformer-json`,
+      options: {
+        typeName: 'BookSection',
+      },
+    },
     `gatsby-plugin-postcss`,
     `gatsby-plugin-react-helmet`,
   ],

gatsby/create-pages.js

@@ -5,7 +5,7 @@ module.exports = async ({ graphql, actions, reporter }) => {
 
   const result = await graphql(`
     query {
-      allChaptersJson {
+      allBookSection {
         edges {
           previous {
             id
@@ -26,11 +26,11 @@ module.exports = async ({ graphql, actions, reporter }) => {
     reporter.panicOnBuild('🚨  ERROR: Loading "createPages" query');
   }
 
-  // Create a page for each chapter
-  const chapters = result.data.allChaptersJson.edges;
+  // Create a page for each sections
+  const sections = result.data.allBookSection.edges;
 
-  if (chapters.length > 0) {
-    chapters.forEach(({ previous, node, next }) => {
+  if (sections.length > 0) {
+    sections.forEach(({ previous, node, next }) => {
       const previousId = previous === null ? null : previous.id;
       const nextId = next === null ? null : next.id;
 
@@ -45,12 +45,4 @@ module.exports = async ({ graphql, actions, reporter }) => {
       });
     });
   }
-
-  // Create the example page (contains every embedded sketch with screenshot)
-  if (process.env.CREATE_EXAMPLES_PAGE === 'true') {
-    createPage({
-      path: '/examples',
-      component: path.resolve(`./src/layouts/ExamplesPageLayout.js`),
-    });
-  }
 };

gatsby/create-resolvers.js

@@ -1,7 +1,7 @@
-// Add images field to each ChaptersJson node
 module.exports = ({ createResolvers }) => {
+  // Add images field
   const resolvers = {
-    ChaptersJson: {
+    BookSection: {
       images: {
         type: ['File'],
         resolve: async (source, args, context, info) => {
@@ -20,6 +20,26 @@ module.exports = ({ createResolvers }) => {
         },
       },
     },
+
+    Example: {
+      screenshot: {
+        type: 'File',
+        resolve: async (source, args, context, info) => {
+          const screenshot = await context.nodeModel.findOne({
+            type: 'File',
+            query: {
+              filter: {
+                relativeDirectory: {
+                  eq: source.relativeDirectory,
+                },
+                internal: { mediaType: { regex: '/^(image)/' } },
+              },
+            },
+          });
+          return screenshot;
+        },
+      },
+    },
   };
   createResolvers(resolvers);
 };

gatsby/lib/parse-content.mjs

@@ -67,15 +67,6 @@ export function parseContent(html) {
 
   const ast = unified().use(rehypeParse, { fragment: true }).parse(html);
 
-  const transformedAst = unified()
-    .use(replaceMedia)
-    .use(externalLinkInNewTab)
-    .use(rehypeCodesplit)
-    .use(rehypeHighlight)
-    .use(rehypeSlug)
-    .use(rehypeKatex)
-    .runSync(ast);
-
   /**
    * Generate Table of Content
    */
@@ -88,8 +79,46 @@ export function parseContent(html) {
     });
   });
 
+  /**
+   * List all examples
+   */
+  const examples = [];
+  visit(ast, { tagName: 'div' }, (node) => {
+    if (node.properties.dataType !== 'example') {
+      return;
+    }
+
+    // Locate the h3 element within the current node's children
+    const titleNode = node.children.find((child) => child.tagName === 'h3');
+    const slug = titleNode && titleNode.properties.id;
+    const title =
+      titleNode && titleNode.children.length > 0
+        ? titleNode.children[0].value
+        : '';
+
+    visit(node, { tagName: 'div' }, (embedDivNode) => {
+      if (embedDivNode.properties.dataType !== 'embed') return;
+      examples.push({
+        title,
+        slug,
+        relativeDirectory: embedDivNode.properties.dataExamplePath,
+        webEditorURL: embedDivNode.properties.dataP5Editor,
+      });
+    });
+  });
+
+  const transformedAst = unified()
+    .use(replaceMedia)
+    .use(externalLinkInNewTab)
+    .use(rehypeCodesplit)
+    .use(rehypeHighlight)
+    .use(rehypeSlug)
+    .use(rehypeKatex)
+    .runSync(ast);
+
   return {
     ast: transformedAst,
     toc,
+    examples,
   };
 }

gatsby/on-create-node.js

@@ -1,5 +1,11 @@
-module.exports = async ({ node, actions, loadNodeContent }) => {
-  const { createNodeField } = actions;
+module.exports = async ({
+  node,
+  actions,
+  loadNodeContent,
+  createContentDigest,
+  createNodeId,
+}) => {
+  const { createNodeField, createNode, createParentChildLink } = actions;
 
   if (node.internal.mediaType !== `text/html`) {
     return;
@@ -9,7 +15,7 @@ module.exports = async ({ node, actions, loadNodeContent }) => {
 
   // load the html source to every HTML file node
   const content = await loadNodeContent(node);
-  const { ast, toc } = parseContent(content);
+  const { ast, toc, examples } = parseContent(content);
 
   createNodeField({
     node,
@@ -22,4 +28,19 @@ module.exports = async ({ node, actions, loadNodeContent }) => {
     name: 'toc',
     value: JSON.stringify(toc),
   });
+
+  for (let example of examples) {
+    const exampleNode = {
+      id: createNodeId(example.relativeDirectory),
+      parent: node.id,
+      internal: {
+        type: 'Example',
+        contentDigest: createContentDigest(example),
+      },
+      ...example,
+    };
+
+    createNode(exampleNode);
+    createParentChildLink({ parent: node, child: exampleNode });
+  }
 };

src/components/ChapterNav.js

@@ -4,7 +4,7 @@ import { useStaticQuery, graphql, Link } from 'gatsby';
 const ChapterNav = () => {
   const data = useStaticQuery(graphql`
     query QueryChaptersLink {
-      allChaptersJson {
+      allBookSection {
         edges {
           node {
             id
@@ -19,7 +19,7 @@ const ChapterNav = () => {
   return (
     <nav className="py-6">
       <ul className="space-y-1">
-        {data.allChaptersJson.edges.map(({ node }) => {
+        {data.allBookSection.edges.map(({ node }) => {
           return (
             <li key={node.slug}>
               <Link
@@ -32,6 +32,16 @@ const ChapterNav = () => {
             </li>
           );
         })}
+
+        <li key="examples">
+          <Link
+            to={`/examples/`}
+            className="block font-semibold px-3 py-1 hover:underline"
+            activeClassName="bg-gray-100 rounded-l"
+          >
+            Examples
+          </Link>
+        </li>
       </ul>
     </nav>
   );

src/layouts/ChapterLayout.js

@@ -76,7 +76,7 @@ export default function ChapterLayout({ data }) {
 
 export const query = graphql`
   query ChapterById($id: String!, $previousId: String, $nextId: String) {
-    chapter: chaptersJson(id: { eq: $id }) {
+    chapter: bookSection(id: { eq: $id }) {
       id
       slug
       title
@@ -93,11 +93,11 @@ export const query = graphql`
         }
       }
     }
-    previous: chaptersJson(id: { eq: $previousId }) {
+    previous: bookSection(id: { eq: $previousId }) {
       slug
       title
     }
-    next: chaptersJson(id: { eq: $nextId }) {
+    next: bookSection(id: { eq: $nextId }) {
       slug
       title
     }