Render example sections

mdn · Oct 1, 2019 · fe0dbb5 · fe0dbb5
1 parent 5f96079
commit fe0dbb5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/client/src/document.js b/client/src/document.js
@@ -4,7 +4,7 @@ import { Link } from "@reach/router";
 import { NoMatch } from "./routing";
 import { InteractiveExample } from "./ingredients/interactive-example";
 import { Attributes } from "./ingredients/attributes";
-import { Examples } from "./ingredients/examples";
+import { Example, Examples } from "./ingredients/examples";
 import { BrowserCompatibilityTable } from "./ingredients/browser-compatibility-table";
 
 export class Document extends React.Component {
@@ -149,7 +149,7 @@ function RenderDocumentBody({ doc }) {
     if (section.type === "prose") {
       // Only exceptional few should use the <Prose/> component,
       // as opposed to <ProseWithHeading/>.
-      if (PROSE_NO_HEADING.includes(section.value.id)) {
+      if (!section.value.id || PROSE_NO_HEADING.includes(section.value.id)) {
         return <Prose key={section.value.id} section={section.value} />;
       } else {
         return (
@@ -180,6 +180,8 @@ function RenderDocumentBody({ doc }) {
       );
     } else if (section.type === "examples") {
       return <Examples key={`examples${i}`} examples={section.value} />;
+    } else if (section.type === "example") {
+      return <Example key={`example${i}`} example={section.value} />;
     } else if (section.type === "info_box") {
       // XXX Unfinished!
       // https://github.com/mdn/stumptown-content/issues/106

diff --git a/client/src/ingredients/examples.js b/client/src/ingredients/examples.js
@@ -92,3 +92,7 @@ export function Examples({ examples }) {
     </>
   );
 }
+
+export function Example({ example }) {
+  return <RenderExample example={example} />;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -92,3 +92,7 @@ export function Examples({ examples }) { @@
         </>
       );
     }
+    export function Example({ example }) {
+      return <RenderExample example={example} />;
+    }