🚀 update deps, add DSD options (#17)

Author: scottnath

.github/workflows/chromatic.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
       - name: Install dependencies
         # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
         run: npm i

.github/workflows/gh-pages.yml

@@ -13,12 +13,12 @@ jobs:
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.github/workflows/release.yml

@@ -19,11 +19,11 @@ jobs:
       id-token: write # to enable use of OIDC for npm provenance
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "lts/*"
       - name: Install dependencies

.github/workflows/ui-tests.yml

@@ -8,10 +8,10 @@ jobs:
   interaction-and-accessibility:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version: '20.x'
       - name: Install dependencies
         run: npm ci
       - name: Install Playwright

.github/workflows/unit-tests.yml

@@ -8,8 +8,8 @@ jobs:
   unit-tests:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '20.x'
       - name: Install dependencies

package-lock.json

@@ -7,6 +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",
     "test-storybook": "test-storybook --coverage",
     "predist": "npm run cem && npm run build-storybook",
     "dist": "node lib/esbuild.config.js",
@@ -43,19 +44,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@chromaui/addon-visual-tests": "^0.0.107",
+    "@chromaui/addon-visual-tests": "^1.0.0",
     "@custom-elements-manifest/analyzer": "^0.9.0",
     "@custom-elements-manifest/to-markdown": "^0.1.0",
     "@primer/octicons": "^19.8.0",
-    "@primer/primitives": "^7.15.0",
-    "commander": "^11.1.0",
-    "esbuild": "^0.19.5",
-    "esbuild-plugin-inline-import": "^1.0.1",
-    "fs-extra": "^11.1.1",
-    "jsdoc-to-markdown": "^8.0.0",
-    "storydocker-storybook": "^0.0.16",
-    "storydocker-utilities": "^0.0.11",
-    "yaml": "^2.3.3"
+    "@primer/primitives": "^7.15.6",
+    "commander": "^12.0.0",
+    "esbuild": "^0.20.0",
+    "esbuild-plugin-inline-import": "^1.0.4",
+    "fs-extra": "^11.2.0",
+    "jsdoc-to-markdown": "^8.0.1",
+    "storydocker-storybook": "^0.0.22",
+    "storydocker-utilities": "^0.0.16",
+    "yaml": "^2.3.4"
   },
   "customElements": "custom-elements.json"
 }

package.json

@@ -23,6 +23,46 @@ see README at root of repo for usage details
 
 ---
 
+## Members
+
+<dl>
+<dt><a href="#DEV-Post-Declarative-Shadow-DOM">DEV-Post-Declarative-Shadow-DOM</a> ⇒ <code>string</code></dt>
+<dd></dd>
+<dt><a href="#DEV-Declarative-Shadow-DOM">DEV-Declarative-Shadow-DOM</a> ⇒ <code>string</code></dt>
+<dd></dd>
+</dl>
+
+## Objects
+
+<dl>
+<dt><a href="#DEVUtils">DEVUtils</a> : <code>object</code></dt>
+<dd><p>Utility functions for fetching and parsing dev.to api data, getting
+ styles and generating HTML for dev.to profile UIs</p>
+</dd>
+</dl>
+
+<a name="DEV-Post-Declarative-Shadow-DOM"></a>
+
+## DEV-Post-Declarative-Shadow-DOM ⇒ <code>string</code>
+**Kind**: global variable  
+**Returns**: <code>string</code> - DEV post HTML wrapped in a `template`  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| content | <code>ForemPostHTML</code> | Content about one post by dev.to (or Forem) user |
+| fetch | <code>boolean</code> |  |
+
+<a name="DEV-Declarative-Shadow-DOM"></a>
+
+## DEV-Declarative-Shadow-DOM ⇒ <code>string</code>
+**Kind**: global variable  
+**Returns**: <code>string</code> - DEV HTML wrapped in a `template`  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| content | <code>ForemUserHTML</code> | a content object representing a DEV user |
+| fetch | <code>boolean</code> |  |
+
 <a name="DEVUtils"></a>
 
 ## DEVUtils : <code>object</code>
@@ -51,17 +91,14 @@ Utility functions for fetching and parsing dev.to api data, getting
 Utility functions for a post
 
 **Kind**: static namespace of [<code>DEVUtils</code>](#DEVUtils)  
-**Example** *(Server side rendering trick)*  
+**Example** *(Server side rendering a post with Declarative Shadow Dom)*  
 ```js
-<devto-post>
- <template id="devto-post" shadowrootmode="open"></template>
-</devto-post>
+<devto-post></devto-post>
 
 <script type="module">
 import {post} from 'profile-components/devto-utils';
-const content = post.generateContent({id: '12345'}, true);
-const html = post.html(content);
-document.querySelector('#devto-post').innerHTML = `<style>${post.style}</style>${html}`;
+const dsdHTML = post.dsd({id: '12345'}, true);
+document.querySelector('devto-post').innerHTML = dsdHTML;
 </script>
 ```
 
@@ -131,17 +168,14 @@ Forem post content, ready for HTML
 Utility functions for a user
 
 **Kind**: static namespace of [<code>DEVUtils</code>](#DEVUtils)  
-**Example** *(Server side rendering trick)*  
+**Example** *(Server side rendering with Declarative Shadow Dom)*  
 ```js
-<devto-user>
- <template id="devto-user" shadowrootmode="open"></template>
-</devto-user>
+<devto-user></devto-user>
 
 <script type="module">
-import {user} from 'profile-components/devto-utils';
-const content = user.generateContent({username: 'scottnath'}, true);
-const html = user.html(content);
-document.querySelector('#devto-user').innerHTML = `<style>${user.style}</style>${html}`;
+import {dsd} from 'profile-components/devto-utils';
+const dsdHTML = dsd({username: 'scottnath'}, true);
+document.querySelector('devto-user').innerHTML = dsdHTML;
 </script>
 ```
 

src/devto/README.md

@@ -3,7 +3,7 @@
   "id": 1466138,
   "title": "Bugfix: Multiple Vite Storybooks from Same node_modules",
   "description": "tl;dr   Encountering Failed to fetch dynamically imported module or ENOTEMPTY: directory not...",
-  "readable_publish_date": "May 12",
+  "readable_publish_date": "May 12 2023",
   "slug": "bugfix-multiple-vite-storybooks-from-same-nodemodules-4mg1",
   "path": "/scottnath/bugfix-multiple-vite-storybooks-from-same-nodemodules-4mg1",
   "url": "https://dev.to/scottnath/bugfix-multiple-vite-storybooks-from-same-nodemodules-4mg1",
@@ -12,8 +12,8 @@
   "collection_id": null,
   "published_timestamp": "2023-05-12T17:02:05Z",
   "positive_reactions_count": 0,
-  "cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--AR_lGaEf--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k026dc27vi3hv6n0apyp.png",
-  "social_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--v_uMw7cg--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k026dc27vi3hv6n0apyp.png",
+  "cover_image": "https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk026dc27vi3hv6n0apyp.png",
+  "social_image": "https://media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk026dc27vi3hv6n0apyp.png",
   "canonical_url": "https://scottnath.com/blahg/bug-multiple-vite-storybooks/",
   "created_at": "2023-05-12T17:02:05Z",
   "edited_at": null,
@@ -37,7 +37,7 @@
     "github_username": "scottnath",
     "user_id": 1055555,
     "website_url": "https://scottnath.com",
-    "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--k0ZYTR18--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1055555/99c3a97d-b160-4d6d-96c1-1007d266c024.jpeg",
-    "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--K8yLyVye--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1055555/99c3a97d-b160-4d6d-96c1-1007d266c024.jpeg"
+    "profile_image": "https://media.dev.to/cdn-cgi/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1055555%2F4d0bf90a-bec7-4228-b1ca-d663fa40adeb.jpeg",
+    "profile_image_90": "https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1055555%2F4d0bf90a-bec7-4228-b1ca-d663fa40adeb.jpeg"
   }
-}
+}

src/devto/fixtures/generated/post--bugfix-multi-vite.json

@@ -3,7 +3,7 @@
   "id": 1568661,
   "title": "A crazy-simple way to bulk-update NPM dependencies with GitHub's Dependabot",
   "description": "This is the simplest way I've found to keep your NPM dependencies up-to-date. This will update all...",
-  "readable_publish_date": "Aug 15",
+  "readable_publish_date": "Aug 15 2023",
   "slug": "a-crazy-simple-way-to-bulk-update-npm-dependencies-with-githubs-dependabot-3e2o",
   "path": "/scottnath/a-crazy-simple-way-to-bulk-update-npm-dependencies-with-githubs-dependabot-3e2o",
   "url": "https://dev.to/scottnath/a-crazy-simple-way-to-bulk-update-npm-dependencies-with-githubs-dependabot-3e2o",
@@ -12,8 +12,8 @@
   "collection_id": null,
   "published_timestamp": "2023-08-15T18:00:37Z",
   "positive_reactions_count": 0,
-  "cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--DfcEJZWu--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9sds37k57qzn6j5nbxp.png",
-  "social_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--XDW1Jh5r--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9sds37k57qzn6j5nbxp.png",
+  "cover_image": "https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd9sds37k57qzn6j5nbxp.png",
+  "social_image": "https://media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd9sds37k57qzn6j5nbxp.png",
   "canonical_url": "https://dev.to/scottnath/a-crazy-simple-way-to-bulk-update-npm-dependencies-with-githubs-dependabot-3e2o",
   "created_at": "2023-08-15T00:55:09Z",
   "edited_at": null,
@@ -37,7 +37,7 @@
     "github_username": "scottnath",
     "user_id": 1055555,
     "website_url": "https://scottnath.com",
-    "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--k0ZYTR18--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1055555/99c3a97d-b160-4d6d-96c1-1007d266c024.jpeg",
-    "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--K8yLyVye--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1055555/99c3a97d-b160-4d6d-96c1-1007d266c024.jpeg"
+    "profile_image": "https://media.dev.to/cdn-cgi/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1055555%2F4d0bf90a-bec7-4228-b1ca-d663fa40adeb.jpeg",
+    "profile_image_90": "https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1055555%2F4d0bf90a-bec7-4228-b1ca-d663fa40adeb.jpeg"
   }
-}
+}