Render example sections

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

Hide file tree

Showing 2 changed files with 8 additions and 6 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
@@ -54,15 +54,15 @@ function RenderLiveSample({ example }) {
         className="live-sample-frame"
         srcDoc={srcdoc}
         title={example.description.title || "Live sample"}
-        width={example.description.width}
+        width={example.description.width || "100%"}
         height={example.description.height}
         frameBorder={0}
       />
     </>
   );
 }
 
-function RenderExample({ example }) {
+export function Example({ example }) {
   return (
     <>
       {example.description.title && <h3>{example.description.title}</h3>}
@@ -77,7 +77,7 @@ function RenderExample({ example }) {
 
       {/* At the moment the author implicitly signals that an example is live
         by including width and height values for the iframe */}
-      {example.description.width && <RenderLiveSample example={example} />}
+      {example.description.height && <RenderLiveSample example={example} />}
     </>
   );
 }
@@ -87,7 +87,7 @@ export function Examples({ examples }) {
     <>
       <h2>Examples</h2>
       {examples.map((example, i) => (
-        <RenderExample key={i} example={example} />
+        <Example key={i} example={example} />
       ))}
     </>
   );