🎨 add dark styles to dev css

README.hbs

@@ -0,0 +1,12 @@
+# profile-components
+
+Web components which display profile information from various websites
+
+
+* install via npm: `npm i profile-components`
+* play with the components in [Storybook](https://scottnath.github.io/profile-components)
+* [See demos on stackblitz](https://stackblitz.com/edit/profile-components)
+
+## Components
+
+{{>main}}

README.md

@@ -2,13 +2,146 @@
 
 Web components which display profile information from various websites
 
-## @todo
 
-- [ ] docs for unpkg usage
-- [ ] add stackblitz demo
-- [ ] typescript types output from JSDoc
+* install via npm: `npm i profile-components`
+* play with the components in [Storybook](https://scottnath.github.io/profile-components)
+* [See demos on stackblitz](https://stackblitz.com/edit/profile-components)
 
-## Other profile sources
+## Components
 
-* Reddit: https://www.reddit.com/user/scottnath/about/.json
-* LinkedIn: (3rd party) https://help.lix-it.com/en/articles/6674073-what-data-can-i-export-from-linkedin
+## Modules
+
+<dl>
+<dt><a href="#module_GitHubUser">GitHubUser</a></dt>
+<dd><p>GitHub user profile web component</p>
+</dd>
+<dt><a href="#module_GitHubRepository">GitHubRepository</a></dt>
+<dd><p>GitHub repository web component</p>
+</dd>
+<dt><a href="#module_DevtoUser">DevtoUser</a></dt>
+<dd><p>dev.to user profile web component</p>
+</dd>
+<dt><a href="#module_DevtoPost">DevtoPost</a></dt>
+<dd><p>dev.to post web component</p>
+</dd>
+</dl>
+
+<a name="module_GitHubUser"></a>
+
+## GitHubUser
+GitHub user profile web component
+
+**Summary**: Native web component which shows a GitHub user's profile content. Can use local data, 
+ fetch data from the GitHub rest API, or use a combination of both.  
+**Element**: github-user  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| login | <code>string</code> | User's GitHub login |
+| avatar_url | <code>string</code> | URL to user's avatar |
+| name | <code>string</code> | User's name |
+| [fetch] | <code>boolean</code> | when true, fetches user from [GitHub api](https://docs.github.com/en/rest/users/users#get-a-user) |
+| [username] | <code>string</code> | alias for `login` |
+| [bio] | <code>string</code> | User's biography content |
+| [following] | <code>string</code> | number of people user is following |
+| [followers] | <code>string</code> | number of followers |
+| [repos] | <code>string</code> | JSON stringified array of repositories |
+
+**Example**  
+```js
+<!-- import the web component -->
+<script type="module" src="https://unpkg.com/profile-components/dist/github-user.js"></script>
+
+<!-- use the custom element -->
+<github-user login="scottnath" fetch="true"></github-user>
+```
+<a name="module_GitHubRepository"></a>
+
+## GitHubRepository
+GitHub repository web component
+
+**Summary**: Native web component which shows a GitHub repository's content. Can use local data, 
+ fetch data from the GitHub rest API, or use a combination of both.  
+**Element**: github-repository  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| full_name | <code>string</code> | repository org and name, as in `scottnath/profile-components` |
+| [name] | <code>string</code> | repo name |
+| [org] | <code>string</code> | repo owner organization's login, found at `<REST_RESPONSE>.organization.login` |
+| [description] | <code>string</code> | repo description |
+| [language] | <code>string</code> | programming language used in repo |
+| [stargazers_count] | <code>string</code> | number of stars |
+| [forks_count] | <code>string</code> | number of forks |
+| [subscribers_count] | <code>string</code> | number of watchers |
+| [fetch] | <code>boolean</code> | when true, fetches repo from [GitHub api](https://docs.github.com/en/rest/repos/repos#get-a-repository) |
+| [itemprop] | <code>string</code> | Itemprop content to go with a containing component's itemscope |
+| [no_org] | <code>string</code> | Do not include the repo owner or organization |
+
+**Example**  
+```js
+<!-- import the web component -->
+<script type="module" src="https://unpkg.com/profile-components/dist/github-repository.js"></script>
+
+<!-- use the custom element -->
+<github-repository full_name="scottnath/profile-components" fetch="true"></github-repository>
+```
+<a name="module_DevtoUser"></a>
+
+## DevtoUser
+dev.to user profile web component
+
+**Summary**: Native web component which shows a dev.to user's profile content. 
+ Can use local data, or fetch data from the dev.to API, or use a combination of both.  
+**Element**: devto-user  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| username | <code>string</code> | User's dev.to username |
+| [name] | <code>string</code> | The name of the user |
+| [summary] | <code>string</code> | The user's bio |
+| [joined_at] | <code>string</code> | The date the user joined |
+| [profile_image] | <code>string</code> | The URL of the user's profile image |
+| [fetch] | <code>boolean</code> | when true, fetches user and posts from api |
+| [post_count] | <code>number</code> | The number of posts the user has published |
+| [latest_post] | <code>string</code> | User's latest post content, JSON stringified |
+| [popular_post] | <code>string</code> | User's most popular post content, JSON stringified |
+
+**Example**  
+```js
+<!-- import the web component -->
+<script type="module" src="https://unpkg.com/profile-components/dist/devto-user.js"></script>
+
+<!-- use the custom element -->
+<devto-user username="scottnath" fetch="true"></devto-user>
+```
+<a name="module_DevtoPost"></a>
+
+## DevtoPost
+dev.to post web component
+
+**Summary**: Native web component which shows a dev.to (or forem.dev) post. Can use local data,
+ fetch data from the dev.to API, or use a combination of both.  
+**Element**: devto-post  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| id | <code>number</code> | Post ID |
+| title | <code>string</code> | Post title |
+| url | <code>string</code> | Post URL |
+| cover_image | <code>string</code> | Post cover image URL |
+| social_image | <code>string</code> | Post social image URL |
+| [fetch] | <code>boolean</code> | when true, fetches post from api |
+
+**Example**  
+```js
+<!-- import the web component -->
+<script type="module" src="https://unpkg.com/profile-components/dist/devto-post.js"></script>
+
+<!-- use the custom element -->
+<devto-post id="123456" fetch="true"></devto-post>
+```

custom-elements.json

@@ -95,7 +95,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "when true, fetches repo from GitHub api",
+              "description": "when true, fetches repo from [GitHub api](https://docs.github.com/en/rest/repos/repos#get-a-repository)",
               "name": "fetch",
               "kind": "field"
             },
@@ -196,7 +196,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "when true, fetches user from GitHub api",
+              "description": "when true, fetches user from [GitHub api](https://docs.github.com/en/rest/users/users#get-a-user)",
               "name": "fetch",
               "kind": "field"
             },
@@ -391,7 +391,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "dev.to (or forem.dev) post web component",
+          "description": "dev.to post web component",
           "name": "DevtoPost",
           "members": [
             {

lib/esbuild.config.js

@@ -11,6 +11,17 @@ import cem from '../custom-elements.json' assert { type: 'json' };
 
 const { src, dist } = getModulePaths();
 
+const componentUtils = [
+  {
+    name: 'github-utils',
+    entry: './src/github/index.js',
+  },
+  {
+    name: 'devto-utils',
+    entry: './src/devto/index.js',
+  }
+]
+
 /**
  * Entrypoints for esbuild generated from custom elements manifest
  *  which _must_ be generated before this script is triggered
@@ -32,5 +43,23 @@ cem.modules.forEach(elm => {
       }),
     ],
   });
+});
 
+/**
+ * Entrypoints for esbuild generated from component utils
+ */
+componentUtils.forEach(elm => {
+  esbuild.build({
+    entryPoints: [pathFromRoot(elm.entry)],
+    bundle: true,
+    format: 'esm',
+    entryNames: elm.name,
+    outbase: src,
+    outdir: dist,
+    plugins: [
+      inlineImportPlugin({
+        filter: /\?inline$/,
+      }),
+    ],
+  });
 });

lib/jsdoc.js

@@ -1,3 +1,5 @@
+import fs from 'fs';
+import path from 'path';
 import { pathFromRoot } from './utils.js';
 import jsdoc2md from 'jsdoc-to-markdown';
 import { outputFile } from 'fs-extra';
@@ -8,12 +10,15 @@ import { outputFile } from 'fs-extra';
  * @param {string} dir - Directory to read files from, relative from root
  * @returns jsdoc2md config object
  */
-const generateJsdoc2Config = (title, dir, files=[]) => {
-  const template = `# ${title}\n\n{{>main}}`;
+const generateJsdoc2Config = async (title, dir, files=[], filename="README.md") => {
+  let template = `# ${title}\n\n{{>main}}`;
+  if (fs.existsSync(path.join(dir, 'README.hbs'))) {
+    template = fs.readFileSync(path.join(dir, 'README.hbs'), 'utf8');
+  }
   return {
     files,
     'member-index-format': 'list',
-    outputFile: `${dir}/README.md`,
+    outputFile: `${dir}/${filename}`,
     exampleLang: 'js',
     template,
   }
@@ -24,22 +29,34 @@ const generateJsdoc2Config = (title, dir, files=[]) => {
  * @todo set up for other directories
  */
 export const generateDocs = async () => {
-  // const githubUtils = generateJsdoc2Config(`GitHub profile components' utilities`, 'src/github/utils');
-  // const res = await jsdoc2md.render(githubUtils);
   const toDocs = [
+    {
+      title: 'profile-components',
+      dir: pathFromRoot(),
+      files: [
+        pathFromRoot('src/github/user/index.js'),
+        pathFromRoot('src/github/repository/index.js'),
+        pathFromRoot('src/devto/user/index.js'),
+        pathFromRoot('src/devto/post/index.js'),
+      ],
+    },
     {
       title: `GitHub profile components' utilities`,
       dir: pathFromRoot('src/github/utils'),
       files: pathFromRoot('src/github/utils/*.js'),
     },
     {
-      title: 'GitHub user profile component',
-      dir: pathFromRoot('src/github/user'),
+      title: 'GitHub utilities',
+      dir: pathFromRoot('src/github'),
       files: [
-        pathFromRoot('src/github/user/index.js'),
-        pathFromRoot('src/github/user/content.js'),
+        pathFromRoot('src/github/styles/index.js'),
         pathFromRoot('src/github/user/html.js'),
+        pathFromRoot('src/github/user/content.js'),
+        pathFromRoot('src/github/repository/html.js'),
+        pathFromRoot('src/github/repository/content.js'),
+        pathFromRoot('src/github/index.js'),
       ],
+      filename: 'UTILITIES.md',
     },
     {
       title: 'GitHub repository details component',
@@ -65,17 +82,30 @@ export const generateDocs = async () => {
       ],
     },
     {
-      title: 'Dev post component',
+      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'),
       ],
     },
+    {
+      title: 'DEV utilities',
+      dir: pathFromRoot('src/devto'),
+      files: [
+        pathFromRoot('src/devto/styles/index.js'),
+        pathFromRoot('src/devto/user/html.js'),
+        pathFromRoot('src/devto/user/content.js'),
+        pathFromRoot('src/devto/post/html.js'),
+        pathFromRoot('src/devto/post/content.js'),
+        pathFromRoot('src/devto/index.js'),
+      ],
+      filename: 'UTILITIES.md',
+    },
   ]
   for (const toDoc of toDocs) {
-    const githubComp = generateJsdoc2Config(toDoc.title, toDoc.dir, toDoc.files);
+    const githubComp = await generateJsdoc2Config(toDoc.title, toDoc.dir, toDoc.files, toDoc.filename);
     const res = await jsdoc2md.render(githubComp);
     await outputFile(githubComp.outputFile, res);
   }

package.json

@@ -37,14 +37,8 @@
     "LICENSE"
   ],
   "exports": {
-    "./*.js": {
+    "./*": {
       "import": "./dist/*.js"
-    },
-    "./github/*.js": {
-      "import": "./src/github/*.js"
-    },
-    "./github/utils/*.js": {
-      "import": "./src/github/utils/*.js"
     }
   },
   "license": "MIT",