chore: finish blog post

Author: atanasster

examples/stories/src/blogs/custom-docs-pages.mdx

@@ -81,7 +81,7 @@ the custom page template files must have a default export with the following fie
 
 ## Examples
 
-1. **From component-controls/pages**
+1. **From `component-controls/pages`**
 
 Component-controls comes with a handy selection of page templates that you can use as a starting point. The only requirement is to enclose the pages in a `DocsContainer` context from `@component-controls/storybook`
 
@@ -98,4 +98,125 @@ export default {
     </DocsContainer>
   ): null,
 };
-```
+```
+
+![component-controls page](https://github.com/ccontrols/component-controls/raw/master/misc/storybook-custom-docs/images/custom-page.jpeg)
+
+2. **Custom render the current story**
+
+You can create docs pages from the grounds up and to render the stories, you can use the context.storyFn which is the equivalent of the story decorated CSF export.
+
+```js
+import React, { createElement }  from 'react';
+import { useContext } from '@component-controls/storybook-custom-docs';
+const CustomPage = () => {
+  const context = useContext();
+  return (
+    <div>
+      <h1>Simple docs page</h1>
+      {createElement(context.storyFn)}
+    </div>
+  );
+}
+const page = {
+  key: 'custom',
+  title: 'Simple Page',
+  render: ({ active }) => active ? <CustomPage  /> : null,
+}
+export default page;
+```
+![simple custom page](https://github.com/ccontrols/component-controls/raw/master/misc/storybook-custom-docs/images/simple-page.jpg)
+
+3. **Storybook addon-docs blocks**
+
+In order to embed storybook's addon-docs block elements, you need to import them from `@storybook/addon-docs/blocks` and enclose them in a `DocsContainer` container:
+
+```js
+import React from 'react';import { DocsContainer, Story, Preview, Source, Title } from '@storybook/addon-docs/blocks';
+import { useContext } from '@component-controls/storybook-custom-docs';
+const Page = () => {
+  const context = useContext();
+  return (
+    <DocsContainer context={context}>
+      <Title>Using storybook docs page blocks</Title>
+      <Preview>
+      <Story id="." />
+      </Preview>
+      <Source id="." />
+    </DocsContainer>
+  );
+}
+const page = {
+  key: 'docs-page',
+  title: 'Docs blocks',
+  render: ({ active }) => active ? <Page /> : null}
+export default page;
+```
+![storybook docs blocks](https://github.com/ccontrols/component-controls/raw/master/misc/storybook-custom-docs/images/docs-blocks.jpg)
+
+4. **Component-controls blocks**
+
+In order to embed component-controls own blocks, you need to enclose them in a `DocsContainer` imported from '@component-controls/storybook' and the basic blocks are to be imported from '@component-controls/blocks'
+
+```js
+import React from 'react';
+import { DocsContainer } from '@component-controls/storybook';
+import { Story, Title, Playground  } from '@component-controls/blocks';
+const Page = ({ active }) => (
+  <DocsContainer active={active} >
+    <Title>Component controls blocks</Title>
+    <Playground openTab="source" title=".">
+      <Story id="." />
+    </Playground>
+  </DocsContainer>
+);
+const page = {
+  key: 'component-page',
+  title: 'Controls blocks',
+  render: ({ active }) => active ? <Page /> : null
+}
+export default page;
+```
+![component-controls blocks](https://github.com/ccontrols/component-controls/raw/master/misc/storybook-custom-docs/images/componnet-controls-blocks.jpg)
+
+
+5. **Mixed blocks**
+
+You can even create documentation pages with a mix of storybook and component-controls block components:
+```js
+import React from 'react';
+import { DocsContainer as SBDocsContainer, Preview, Story as SBStory, Title as SBTitle, Props} from '@storybook/addon-docs/blocks';
+import { useContext } from '@component-controls/storybook-custom-docs';
+import { DocsContainer } from '@component-controls/storybook';
+import { Story, Title, Playground, PropsTable  } from '@component-controls/blocks';
+const Page = () => {
+  const context = useContext();
+  return (
+  <>
+    <h1>Mixing storybook docs blocks and component-controls blocks</h1>
+    <SBDocsContainer context={context}>
+      <SBTitle />
+      <Preview >
+        <SBStory id={context.storyId} />
+      </Preview>
+      <Props of='.' />
+    </SBDocsContainer>
+    <DocsContainer storyId={context.storyId}>
+      <Title />
+      <Playground openTab="source" title="." dark={true}>
+        <Story id="." />
+      </Playground>
+      <PropsTable of="." />
+    </DocsContainer>
+  </>
+ );
+}
+const page = {
+  key: 'mixed-page',
+  title: 'Mixed blocks',
+  render: ({ active }) => active ? <Page /> : null,
+}
+export default page;
+```
+![mixed blocks](https://github.com/ccontrols/component-controls/raw/master/misc/storybook-custom-docs/images/mixed-blocks.jpg)
+