✨ add dev.to profile components (#7)

* ✨ add dev.to profile components * 🎨 get style variables from forem repo * 📝 docs and ce manifest * Update primer-preview.js * 🎨 style and a11y cleanup
scottnath · Oct 6, 2023 · 4d85920 · 4d85920
1 parent 1cbbcfb
commit 4d85920
Show file tree

Hide file tree

Showing 36 changed files with 2,403 additions and 15 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,7 +1,7 @@
 import path from 'path';
 /** @type { import('@storybook/web-components-vite').StorybookConfig } */
 const config = {
-  stories: ['../src/github/*.mdx', '../src/github/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/github/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',

diff --git a/.storybook/primer-preview.js b/.storybook/primer-preview.js
@@ -3,6 +3,10 @@
  * @see https://github.com/primer/css/blob/main/docs/.storybook/preview.js
  */
 
+/**
+ * Primer themes
+ * 
+ */
 export const primerThemes = [
   {value: 'light', left: '☀️', title: 'Light'},
   {value: 'light_colorblind', left: '☀️', title: 'Light Protanopia & Deuteranopia'},
@@ -13,8 +17,11 @@ export const primerThemes = [
   {value: 'dark_colorblind', left: '🌗', title: 'Dark Protanopia & Deuteranopia'},
   {value: 'dark_tritanopia', left: '🌗', title: 'Dark Tritanopia'},
   {value: 'dark_high_contrast', left: '🌗', title: 'Dark High Contrast'},
-]
+];
 
+/**
+ * Toolbar configuration to add Primer themes to Storybook
+ */
 export const globalTypesPrimer = {
   theme: {
     name: 'Theme',
@@ -29,7 +36,9 @@ export const globalTypesPrimer = {
   },
 }
 
-
+/**
+ * Adds current theme to the `args` in Storybook
+ */
 export const decoratorsPrimer = [
   (Story, context) => {
     const theme = context.globals.theme;

diff --git a/custom-elements.json b/custom-elements.json
@@ -267,6 +267,216 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/devto/user/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "dev.to user profile web component",
+          "name": "DevtoUser",
+          "members": [
+            {
+              "kind": "field",
+              "name": "attrs",
+              "type": {
+                "text": "object"
+              },
+              "default": "{}"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "User's dev.to username",
+              "name": "username",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The name of the user",
+              "name": "name",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The user's bio",
+              "name": "summary",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The date the user joined",
+              "name": "joined_at",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The URL of the user's profile image",
+              "name": "profile_image",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "when true, fetches user and posts from api",
+              "name": "fetch",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "description": "The number of posts the user has published",
+              "name": "post_count",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "User's latest post content, JSON stringified",
+              "name": "latest_post",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "User's most popular post content, JSON stringified",
+              "name": "popular_post",
+              "kind": "field"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "devto-user",
+          "summary": "Native web component which shows a dev.to user's profile content. \nCan use local data, or fetch data from the dev.to API, or use a combination of both.",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DevtoUser",
+          "declaration": {
+            "name": "DevtoUser",
+            "module": "src/devto/user/index.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "devto-user",
+          "declaration": {
+            "name": "DevtoUser",
+            "module": "src/devto/user/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/devto/post/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "dev.to (or forem.dev) post web component",
+          "name": "DevtoPost",
+          "members": [
+            {
+              "kind": "field",
+              "name": "attrs",
+              "type": {
+                "text": "object"
+              },
+              "default": "{}"
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "description": "Post ID",
+              "name": "id",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Post title",
+              "name": "title",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Post URL",
+              "name": "url",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Post cover image URL",
+              "name": "cover_image",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Post social image URL",
+              "name": "social_image",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "when true, fetches post from api",
+              "name": "fetch",
+              "kind": "field"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "devto-post",
+          "summary": "Native web component which shows a dev.to (or forem.dev) post. Can use local data,\nfetch data from the dev.to API, or use a combination of both.",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DevtoPost",
+          "declaration": {
+            "name": "DevtoPost",
+            "module": "src/devto/post/index.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "devto-post",
+          "declaration": {
+            "name": "DevtoPost",
+            "module": "src/devto/post/index.js"
+          }
+        }
+      ]
     }
   ]
 }
diff --git a/lib/cli.js b/lib/cli.js
@@ -2,8 +2,10 @@
 
 import { Command } from 'commander';
 
+import { writeDevCssFile } from '../src/devto/utils/forem.js';
 import { writePrimerCssFile } from '../src/github/utils/primer.js';
-import { generateFixtures } from '../src/github/utils/fixtures.js';
+import { generateFixtures as genFixGitHub } from '../src/github/utils/fixtures.js';
+import { generateFixtures as genFixDevTo } from '../src/devto/fixtures/utils.js';
 import { generateDocs } from './jsdoc.js';
 
 const program = new Command();
@@ -14,10 +16,22 @@ program.command('generate-vars-primer')
     writePrimerCssFile();
   });
 
+program.command('generate-vars-devto')
+  .description('Generate CSS variables for dev.to/forem')
+  .action(() => {
+    writeDevCssFile();
+  });
+
 program.command('generate-fixtures-github')
   .description('Generate fixtures for GitHub repositories and users')
   .action(() => {
-    generateFixtures();
+    genFixGitHub();
+  });
+
+program.command('generate-fixtures-devto')
+  .description('Generate fixtures for dev.to')
+  .action(() => {
+    genFixDevTo();
   });
 
 program.command('generate-docs')

diff --git a/lib/custom-elements-manifest.config.js b/lib/custom-elements-manifest.config.js
@@ -6,7 +6,12 @@ import { readmePlugin } from "./cem-readme-plugin.js"
 import { getModulePaths } from './utils.js';
 
 export default {
-  globs: ['src/github/repository/index.js', 'src/github/user/index.js'], 
+  globs: [
+    'src/github/repository/index.js',
+    'src/github/user/index.js',
+    'src/devto/user/index.js',
+    'src/devto/post/index.js',
+  ], 
   exclude: [],
   dependencies: false,
   dev: false,

diff --git a/lib/jsdoc.js b/lib/jsdoc.js
@@ -50,6 +50,29 @@ export const generateDocs = async () => {
         pathFromRoot('src/github/repository/html.js'),
       ],
     },
+    {
+      title: `DEV profile components' utilities`,
+      dir: pathFromRoot('src/devto/utils'),
+      files: pathFromRoot('src/devto/utils/*.js'),
+    },
+    {
+      title: 'Dev user profile component',
+      dir: pathFromRoot('src/devto/user'),
+      files: [
+        pathFromRoot('src/devto/user/index.js'),
+        pathFromRoot('src/devto/user/content.js'),
+        pathFromRoot('src/devto/user/html.js'),
+      ],
+    },
+    {
+      title: 'Dev post component',
+      dir: pathFromRoot('src/devto/post'),
+      files: [
+        pathFromRoot('src/devto/post/index.js'),
+        pathFromRoot('src/devto/post/content.js'),
+        pathFromRoot('src/devto/post/html.js'),
+      ],
+    },
   ]
   for (const toDoc of toDocs) {
     const githubComp = generateJsdoc2Config(toDoc.title, toDoc.dir, toDoc.files);

diff --git a/package.json b/package.json
@@ -13,8 +13,9 @@
     "prerelease": "npm run dist",
     "release": "semantic-release --debug=true",
     "test:unit": "node --test --experimental-test-coverage",
+    "generate:devto": "node lib/cli.js generate-vars-devto",
     "generate:primer": "node lib/cli.js generate-vars-primer",
-    "generate:fixtures": "node lib/cli.js generate-fixtures-github",
+    "generate:fixtures": "node lib/cli.js generate-fixtures-devto && node lib/cli.js generate-fixtures-github",
     "generate:docs": "node lib/cli.js generate-docs",
     "generate": "npm run generate:docs && npm run generate:primer && npm run generate:fixtures && npm run cem"
   },