feat: handle solution inside exercises

Author: jasongao97

gatsby/lib/exercise-solution.mjs

@@ -0,0 +1,44 @@
+import { visit } from 'unist-util-visit';
+
+export default function rehypeExerciseSolution() {
+  return (tree) => {
+    visit(tree, { tagName: 'div' }, (node) => {
+      if (node.properties.dataType !== 'exercise') {
+        return;
+      }
+
+      let hasSolution = false;
+      let p5EditorUrl = null;
+
+      visit(node, { tagName: 'div' }, (solutionNode, _index, _parent) => {
+        // Look for solution node with a class of 'solution'
+        if (
+          solutionNode.properties?.className &&
+          solutionNode.properties.className.includes('solution')
+        ) {
+          hasSolution = true;
+
+          visit(solutionNode, { tagName: 'embed-example' }, (embedNode) => {
+            if (embedNode.properties?.dataP5Editor) {
+              p5EditorUrl = embedNode.properties.dataP5Editor;
+              // add a class to the solution node to indicate that it is a p5 solution
+              solutionNode.properties.className.push('p5-solution');
+
+              return false;
+            }
+          });
+        }
+      });
+
+      // If we found a solution, render it differently
+      if (hasSolution) {
+        node.tagName = 'exercise-with-solution';
+
+        // If we found a p5 editor URL, add it to the node's properties
+        if (p5EditorUrl) {
+          node.properties.p5EditorUrl = p5EditorUrl;
+        }
+      }
+    });
+  };
+}

gatsby/lib/parse-content.mjs

@@ -13,6 +13,7 @@ import { rehypeCodesplit } from './codesplit.mjs';
 import { preserveCustomSpans, restoreCustomSpans } from './blank-span.mjs';
 import { rehypeVideoLink } from './video-link.mjs';
 import rehypeReplaceBrWithSpace from './br-space.mjs';
+import rehypeExerciseSolution from './exercise-solution.mjs';
 
 export function parseContent(html) {
   const replaceMedia = () => (tree) => {
@@ -191,6 +192,7 @@ export function parseContent(html) {
     })
     .use(replaceMedia)
     .use(rehypeVideoLink)
+    .use(rehypeExerciseSolution)
     .use(externalLinkInNewTab)
     .use(rehypeReplaceBrWithSpace)
     .use(rehypeCodesplit)

src/components/ExerciseWithSolution.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { HiOutlineEye, HiOutlineEyeOff } from 'react-icons/hi';
+import { HiOutlineLink } from 'react-icons/hi';
+
+const ExerciseWithSolution = (props) => {
+  const childrenWithoutP5Solution = props.children.filter(
+    (child) => !child.props?.className?.includes('p5-solution'),
+  );
+  const solutions = childrenWithoutP5Solution.filter((child) => {
+    return child.props?.className?.includes('solution');
+  });
+
+  const [isAnswerVisible, setIsAnswerVisible] = React.useState(false);
+
+  const toggleAnswerHiddenStatus = () => {
+    setIsAnswerVisible((lastState) => !lastState);
+  };
+
+  return (
+    <div
+      className={`callout relative ${isAnswerVisible ? 'is-answer-visible' : ''}`}
+    >
+      {/* bottons group on the top right */}
+      <div className="absolute right-0 top-0 hidden sm:flex">
+        {solutions.length && (
+          <button
+            className="flex items-center rounded px-2.5 py-1.5 text-xs font-semibold hover:bg-gray-300"
+            onClick={toggleAnswerHiddenStatus}
+          >
+            {isAnswerVisible ? (
+              <>
+                <HiOutlineEyeOff className="h-4 w-4" />
+                <span className="ml-1">Hide Answer</span>
+              </>
+            ) : (
+              <>
+                <HiOutlineEye className="h-4 w-4" />
+                <span className="ml-1">Reveal Answer</span>
+              </>
+            )}
+          </button>
+        )}
+
+        {props.p5EditorUrl && (
+          <a
+            className="flex items-center rounded px-2.5 py-1.5 text-xs font-semibold text-gray-700 no-underline hover:bg-gray-300"
+            target="_blank"
+            rel="noopener noreferrer"
+            href={props.p5EditorUrl}
+          >
+            <HiOutlineLink className="h-4 w-4" />
+            <span className="ml-1">Suggested Answer</span>
+          </a>
+        )}
+      </div>
+
+      {childrenWithoutP5Solution}
+    </div>
+  );
+};
+
+export default ExerciseWithSolution;

src/layouts/ChapterLayout.js

@@ -10,6 +10,7 @@ import Image from '../components/Image';
 import Example from '../components/Example';
 import VideoLink from '../components/VideoLink';
 import Codesplit from '../components/Codesplit';
+import ExerciseWithSolution from '../components/ExerciseWithSolution';
 
 const renderAst = ({ ast, images }) => {
   visit(ast, { tagName: 'img' }, (node) => {
@@ -33,6 +34,7 @@ const renderAst = ({ ast, images }) => {
       'embed-example': Example,
       'video-link': VideoLink,
       'codesplit': Codesplit,
+      'exercise-with-solution': ExerciseWithSolution,
     },
   });
 

src/styles/callout.css

@@ -23,6 +23,22 @@
   @apply my-0;
 }
 
+.callout > .solution {
+  @apply my-4 rounded bg-white px-6 py-4 text-transparent;
+
+  :first-child {
+    @apply mt-0;
+  }
+
+  :last-child {
+    @apply mb-0;
+  }
+}
+
+.callout.is-answer-visible > .solution {
+  @apply text-inherit;
+}
+
 .highlight {
   @apply block text-center text-lg font-semibold;
 }