Tweak stories

Author: microbit-grace

docs/vanilla.md

@@ -8,7 +8,7 @@ title: VanillaJS Usage
 
 ## Blocks rendering
 
-Use {@link vanilla.createMakeCodeRenderBlocks | createMakeCodeRenderBlocks} to create a MakeCode block renderer. Initialise the renderer before calling `renderBlocks` with a {@link vanilla.RenderBlocksRequest | RenderBlocksRequest}, which includes a MakeCode project ([see examples](../src/vanilla/examples.ts)). The function will return a {@link vanilla.RenderBlocksResponse | RenderBlocksResponse}.
+Use {@link vanilla.createMakeCodeRenderBlocks | createMakeCodeRenderBlocks} to create a MakeCode block renderer. Initialise the renderer before calling `renderBlocks` with a {@link vanilla.RenderBlocksRequest | RenderBlocksRequest}, which includes a MakeCode project ([see examples](../src/stories/fixtures.ts)). The function will return a {@link vanilla.RenderBlocksResponse | RenderBlocksResponse}.
 
 ```js
 import { createMakeCodeRenderBlocks } from "@microbit/makecode-embed/vanilla";

src/stories/createMakeCodeRenderBlocks.stories.tsx

@@ -21,7 +21,7 @@ interface StoryArgs {
 }
 
 const meta: Meta<StoryArgs> = {
-  title: 'createMakeCodeRenderBlocks',
+  title: 'stories/createMakeCodeRenderBlocks',
 };
 
 export default meta;
@@ -49,7 +49,11 @@ const renderBlocks = (args: StoryArgs) => {
     });
   };
   waitForElementLoaded();
-  return <div id={elementId}></div>;
+  return (
+    <div id={elementId}>
+      <p>Loading...</p>
+    </div>
+  );
 };
 
 export const Simple: Story = {

src/stories/makeCodeFrameDriver.stories.tsx

@@ -19,7 +19,7 @@ interface StoryArgs {
 }
 
 const meta: Meta<StoryArgs> = {
-  title: 'makeCodeFrameDriver',
+  title: 'stories/makeCodeFrameDriver',
 };
 
 export default meta;
@@ -272,7 +272,9 @@ const renderEditor = (args: StoryArgs) => {
           width: '100%',
           height: 700,
         }}
-      />
+      >
+        <p>Loading...</p>
+      </div>
     </>
   );
 };