diff --git a/package.json b/package.json
index fe8d819..3b06516 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"cem": "custom-elements-manifest analyze --config 'lib/custom-elements-manifest.config.js'",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
- "preview-storybook": "storybook preview",
+ "preview-storybook": "storybook dev",
"test-storybook": "test-storybook --coverage",
"predist": "npm run cem && npm run build-storybook",
"dist": "node lib/esbuild.config.js",
diff --git a/src/devto/README.md b/src/devto/README.md
index 9035798..7adda9e 100644
--- a/src/devto/README.md
+++ b/src/devto/README.md
@@ -23,46 +23,6 @@ see README at root of repo for usage details
---
-## Members
-
-
-- DEV-Post-Declarative-Shadow-DOM ⇒
string
-
-- DEV-Declarative-Shadow-DOM ⇒
string
-
-
-
-## Objects
-
-
-- DEVUtils :
object
-Utility functions for fetching and parsing dev.to api data, getting
- styles and generating HTML for dev.to profile UIs
-
-
-
-
-
-## DEV-Post-Declarative-Shadow-DOM ⇒ string
-**Kind**: global variable
-**Returns**: string
- DEV post HTML wrapped in a `template`
-
-| Param | Type | Description |
-| --- | --- | --- |
-| content | ForemPostHTML
| Content about one post by dev.to (or Forem) user |
-| fetch | boolean
| |
-
-
-
-## DEV-Declarative-Shadow-DOM ⇒ string
-**Kind**: global variable
-**Returns**: string
- DEV HTML wrapped in a `template`
-
-| Param | Type | Description |
-| --- | --- | --- |
-| content | ForemUserHTML
| a content object representing a DEV user |
-| fetch | boolean
| |
-
## DEVUtils : object
@@ -74,6 +34,7 @@ Utility functions for fetching and parsing dev.to api data, getting
* [DEVUtils](#DEVUtils) : object
* [.post](#DEVUtils.post) : object
+ * [.dsd](#DEVUtils.post.dsd) ⇒ string
* [.html(content)](#DEVUtils.post.html) ⇒ string
* [.generateContent(content, [fetch])](#DEVUtils.post.generateContent) ⇒ ForemPost
\| ForemError
* [.ForemPost](#DEVUtils.post.ForemPost) : Object
@@ -82,6 +43,7 @@ Utility functions for fetching and parsing dev.to api data, getting
* [.styles](#DEVUtils.user.styles)
* [.html(content)](#DEVUtils.user.html) ⇒ string
* [.generateContent(content, [fetch])](#DEVUtils.user.generateContent) ⇒ ForemUserHTML
+ * [.dsd(content, fetch)](#DEVUtils.user.dsd) ⇒ string
* [.ForemUser](#DEVUtils.user.ForemUser) : Object
* [.ForemUserHTML](#DEVUtils.user.ForemUserHTML) : ForemUser
@@ -91,6 +53,27 @@ Utility functions for fetching and parsing dev.to api data, getting
Utility functions for a post
**Kind**: static namespace of [DEVUtils
](#DEVUtils)
+
+* [.post](#DEVUtils.post) : object
+ * [.dsd](#DEVUtils.post.dsd) ⇒ string
+ * [.html(content)](#DEVUtils.post.html) ⇒ string
+ * [.generateContent(content, [fetch])](#DEVUtils.post.generateContent) ⇒ ForemPost
\| ForemError
+ * [.ForemPost](#DEVUtils.post.ForemPost) : Object
+ * [.ForemPostHTML](#DEVUtils.post.ForemPostHTML) : ForemPost
+
+
+
+#### post.dsd ⇒ string
+Generate a `template` element with a shadowdom with a Post in it
+
+**Kind**: static namespace of [post
](#DEVUtils.post)
+**Returns**: string
- DEV post HTML wrapped in a `template`
+
+| Param | Type | Description |
+| --- | --- | --- |
+| content | ForemPostHTML
| Content about one post by dev.to (or Forem) user |
+| fetch | boolean
| |
+
**Example** *(Server side rendering a post with Declarative Shadow Dom)*
```js
@@ -101,13 +84,6 @@ const dsdHTML = post.dsd({id: '12345'}, true);
document.querySelector('devto-post').innerHTML = dsdHTML;
```
-
-* [.post](#DEVUtils.post) : object
- * [.html(content)](#DEVUtils.post.html) ⇒ string
- * [.generateContent(content, [fetch])](#DEVUtils.post.generateContent) ⇒ ForemPost
\| ForemError
- * [.ForemPost](#DEVUtils.post.ForemPost) : Object
- * [.ForemPostHTML](#DEVUtils.post.ForemPostHTML) : ForemPost
-
#### post.html(content) ⇒ string
@@ -168,21 +144,12 @@ Forem post content, ready for HTML
Utility functions for a user
**Kind**: static namespace of [DEVUtils
](#DEVUtils)
-**Example** *(Server side rendering with Declarative Shadow Dom)*
-```js
-
-
-
-```
* [.user](#DEVUtils.user) : object
* [.styles](#DEVUtils.user.styles)
* [.html(content)](#DEVUtils.user.html) ⇒ string
* [.generateContent(content, [fetch])](#DEVUtils.user.generateContent) ⇒ ForemUserHTML
+ * [.dsd(content, fetch)](#DEVUtils.user.dsd) ⇒ string
* [.ForemUser](#DEVUtils.user.ForemUser) : Object
* [.ForemUserHTML](#DEVUtils.user.ForemUserHTML) : ForemUser
@@ -217,6 +184,29 @@ Generates an object of content for the user HTML
| content | ForemUserHTML
|
| [fetch] | boolean
|
+
+
+#### user.dsd(content, fetch) ⇒ string
+Generate a `template` element with shadowrootmode with a User in it
+
+**Kind**: static method of [user
](#DEVUtils.user)
+**Returns**: string
- DEV HTML wrapped in a `template`
+
+| Param | Type | Description |
+| --- | --- | --- |
+| content | ForemUserHTML
| a content object representing a DEV user |
+| fetch | boolean
| |
+
+**Example** *(Server side rendering with Declarative Shadow Dom)*
+```js
+
+
+
+```
#### user.ForemUser : Object
diff --git a/src/devto/dsd.docs.mdx b/src/devto/dsd.docs.mdx
new file mode 100644
index 0000000..7b52a40
--- /dev/null
+++ b/src/devto/dsd.docs.mdx
@@ -0,0 +1,114 @@
+import { Meta, Title, Source } from '@storybook/blocks';
+
+
+
+
+
+Both DEV components can be implemented via Declarative Shadow DOM using methods exported from the `devto-utils.js` file.
+
+
+## Server Side Rendering HTML in Node.js
+
+