Skip to content

Commit 99a1eb5

Browse files
scottnathscottnath
authored
🎨 add dark styles to dev css (#11)
* 🎨 clean up github files * 📝 update devto for docs * 🎨 add dark styles to dev css * 🎨 fixtures and styling * ✅ add tests to story * Update user.css * 🎨 cat-1000 * 🎨 more viewed examples
1 parent 4d85920 commit 99a1eb5

36 files changed

+1173
-464
lines changed

‎README.hbs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# profile-components
2+
3+
Web components which display profile information from various websites
4+
5+
6+
* install via npm: `npm i profile-components`
7+
* play with the components in [Storybook](https://scottnath.github.io/profile-components)
8+
* [See demos on stackblitz](https://stackblitz.com/edit/profile-components)
9+
10+
## Components
11+
12+
{{>main}}

‎README.md‎

Lines changed: 140 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,146 @@
22

33
Web components which display profile information from various websites
44

5-
## @todo
65

7-
- [ ] docs for unpkg usage
8-
- [ ] add stackblitz demo
9-
- [ ] typescript types output from JSDoc
6+
* install via npm: `npm i profile-components`
7+
* play with the components in [Storybook](https://scottnath.github.io/profile-components)
8+
* [See demos on stackblitz](https://stackblitz.com/edit/profile-components)
109

11-
## Other profile sources
10+
## Components
1211

13-
* Reddit: https://www.reddit.com/user/scottnath/about/.json
14-
* LinkedIn: (3rd party) https://help.lix-it.com/en/articles/6674073-what-data-can-i-export-from-linkedin
12+
## Modules
13+
14+
<dl>
15+
<dt><a href="#module_GitHubUser">GitHubUser</a></dt>
16+
<dd><p>GitHub user profile web component</p>
17+
</dd>
18+
<dt><a href="#module_GitHubRepository">GitHubRepository</a></dt>
19+
<dd><p>GitHub repository web component</p>
20+
</dd>
21+
<dt><a href="#module_DevtoUser">DevtoUser</a></dt>
22+
<dd><p>dev.to user profile web component</p>
23+
</dd>
24+
<dt><a href="#module_DevtoPost">DevtoPost</a></dt>
25+
<dd><p>dev.to post web component</p>
26+
</dd>
27+
</dl>
28+
29+
<a name="module_GitHubUser"></a>
30+
31+
## GitHubUser
32+
GitHub user profile web component
33+
34+
**Summary**: Native web component which shows a GitHub user's profile content. Can use local data,
35+
fetch data from the GitHub rest API, or use a combination of both.
36+
**Element**: github-user
37+
**Properties**
38+
39+
| Name | Type | Description |
40+
| --- | --- | --- |
41+
| login | <code>string</code> | User's GitHub login |
42+
| avatar_url | <code>string</code> | URL to user's avatar |
43+
| name | <code>string</code> | User's name |
44+
| [fetch] | <code>boolean</code> | when true, fetches user from [GitHub api](https://docs.github.com/en/rest/users/users#get-a-user) |
45+
| [username] | <code>string</code> | alias for `login` |
46+
| [bio] | <code>string</code> | User's biography content |
47+
| [following] | <code>string</code> | number of people user is following |
48+
| [followers] | <code>string</code> | number of followers |
49+
| [repos] | <code>string</code> | JSON stringified array of repositories |
50+
51+
**Example**
52+
```js
53+
<!-- import the web component -->
54+
<script type="module" src="https://unpkg.com/profile-components/dist/github-user.js"></script>
55+
56+
<!-- use the custom element -->
57+
<github-user login="scottnath" fetch="true"></github-user>
58+
```
59+
<a name="module_GitHubRepository"></a>
60+
61+
## GitHubRepository
62+
GitHub repository web component
63+
64+
**Summary**: Native web component which shows a GitHub repository's content. Can use local data,
65+
fetch data from the GitHub rest API, or use a combination of both.
66+
**Element**: github-repository
67+
**Properties**
68+
69+
| Name | Type | Description |
70+
| --- | --- | --- |
71+
| full_name | <code>string</code> | repository org and name, as in `scottnath/profile-components` |
72+
| [name] | <code>string</code> | repo name |
73+
| [org] | <code>string</code> | repo owner organization's login, found at `<REST_RESPONSE>.organization.login` |
74+
| [description] | <code>string</code> | repo description |
75+
| [language] | <code>string</code> | programming language used in repo |
76+
| [stargazers_count] | <code>string</code> | number of stars |
77+
| [forks_count] | <code>string</code> | number of forks |
78+
| [subscribers_count] | <code>string</code> | number of watchers |
79+
| [fetch] | <code>boolean</code> | when true, fetches repo from [GitHub api](https://docs.github.com/en/rest/repos/repos#get-a-repository) |
80+
| [itemprop] | <code>string</code> | Itemprop content to go with a containing component's itemscope |
81+
| [no_org] | <code>string</code> | Do not include the repo owner or organization |
82+
83+
**Example**
84+
```js
85+
<!-- import the web component -->
86+
<script type="module" src="https://unpkg.com/profile-components/dist/github-repository.js"></script>
87+
88+
<!-- use the custom element -->
89+
<github-repository full_name="scottnath/profile-components" fetch="true"></github-repository>
90+
```
91+
<a name="module_DevtoUser"></a>
92+
93+
## DevtoUser
94+
dev.to user profile web component
95+
96+
**Summary**: Native web component which shows a dev.to user's profile content.
97+
Can use local data, or fetch data from the dev.to API, or use a combination of both.
98+
**Element**: devto-user
99+
**Properties**
100+
101+
| Name | Type | Description |
102+
| --- | --- | --- |
103+
| username | <code>string</code> | User's dev.to username |
104+
| [name] | <code>string</code> | The name of the user |
105+
| [summary] | <code>string</code> | The user's bio |
106+
| [joined_at] | <code>string</code> | The date the user joined |
107+
| [profile_image] | <code>string</code> | The URL of the user's profile image |
108+
| [fetch] | <code>boolean</code> | when true, fetches user and posts from api |
109+
| [post_count] | <code>number</code> | The number of posts the user has published |
110+
| [latest_post] | <code>string</code> | User's latest post content, JSON stringified |
111+
| [popular_post] | <code>string</code> | User's most popular post content, JSON stringified |
112+
113+
**Example**
114+
```js
115+
<!-- import the web component -->
116+
<script type="module" src="https://unpkg.com/profile-components/dist/devto-user.js"></script>
117+
118+
<!-- use the custom element -->
119+
<devto-user username="scottnath" fetch="true"></devto-user>
120+
```
121+
<a name="module_DevtoPost"></a>
122+
123+
## DevtoPost
124+
dev.to post web component
125+
126+
**Summary**: Native web component which shows a dev.to (or forem.dev) post. Can use local data,
127+
fetch data from the dev.to API, or use a combination of both.
128+
**Element**: devto-post
129+
**Properties**
130+
131+
| Name | Type | Description |
132+
| --- | --- | --- |
133+
| id | <code>number</code> | Post ID |
134+
| title | <code>string</code> | Post title |
135+
| url | <code>string</code> | Post URL |
136+
| cover_image | <code>string</code> | Post cover image URL |
137+
| social_image | <code>string</code> | Post social image URL |
138+
| [fetch] | <code>boolean</code> | when true, fetches post from api |
139+
140+
**Example**
141+
```js
142+
<!-- import the web component -->
143+
<script type="module" src="https://unpkg.com/profile-components/dist/devto-post.js"></script>
144+
145+
<!-- use the custom element -->
146+
<devto-post id="123456" fetch="true"></devto-post>
147+
```

‎custom-elements.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
"type": {
9696
"text": "boolean"
9797
},
98-
"description": "when true, fetches repo from GitHub api",
98+
"description": "when true, fetches repo from [GitHub api](https://docs.github.com/en/rest/repos/repos#get-a-repository)",
9999
"name": "fetch",
100100
"kind": "field"
101101
},
@@ -196,7 +196,7 @@
196196
"type": {
197197
"text": "boolean"
198198
},
199-
"description": "when true, fetches user from GitHub api",
199+
"description": "when true, fetches user from [GitHub api](https://docs.github.com/en/rest/users/users#get-a-user)",
200200
"name": "fetch",
201201
"kind": "field"
202202
},
@@ -391,7 +391,7 @@
391391
"declarations": [
392392
{
393393
"kind": "class",
394-
"description": "dev.to (or forem.dev) post web component",
394+
"description": "dev.to post web component",
395395
"name": "DevtoPost",
396396
"members": [
397397
{

‎lib/esbuild.config.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,17 @@ import cem from '../custom-elements.json' assert { type: 'json' };
1111

1212
const { src, dist } = getModulePaths();
1313

14+
const componentUtils = [
15+
{
16+
name: 'github-utils',
17+
entry: './src/github/index.js',
18+
},
19+
{
20+
name: 'devto-utils',
21+
entry: './src/devto/index.js',
22+
}
23+
]
24+
1425
/**
1526
* Entrypoints for esbuild generated from custom elements manifest
1627
* which _must_ be generated before this script is triggered
@@ -32,5 +43,23 @@ cem.modules.forEach(elm => {
3243
}),
3344
],
3445
});
46+
});
3547

48+
/**
49+
* Entrypoints for esbuild generated from component utils
50+
*/
51+
componentUtils.forEach(elm => {
52+
esbuild.build({
53+
entryPoints: [pathFromRoot(elm.entry)],
54+
bundle: true,
55+
format: 'esm',
56+
entryNames: elm.name,
57+
outbase: src,
58+
outdir: dist,
59+
plugins: [
60+
inlineImportPlugin({
61+
filter: /\?inline$/,
62+
}),
63+
],
64+
});
3665
});

‎lib/jsdoc.js‎

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import fs from 'fs';
2+
import path from 'path';
13
import { pathFromRoot } from './utils.js';
24
import jsdoc2md from 'jsdoc-to-markdown';
35
import { outputFile } from 'fs-extra';
@@ -8,12 +10,15 @@ import { outputFile } from 'fs-extra';
810
* @param {string} dir - Directory to read files from, relative from root
911
* @returns jsdoc2md config object
1012
*/
11-
const generateJsdoc2Config = (title, dir, files=[]) => {
12-
const template = `# ${title}\n\n{{>main}}`;
13+
const generateJsdoc2Config = async (title, dir, files=[], filename="README.md") => {
14+
let template = `# ${title}\n\n{{>main}}`;
15+
if (fs.existsSync(path.join(dir, 'README.hbs'))) {
16+
template = fs.readFileSync(path.join(dir, 'README.hbs'), 'utf8');
17+
}
1318
return {
1419
files,
1520
'member-index-format': 'list',
16-
outputFile: `${dir}/README.md`,
21+
outputFile: `${dir}/${filename}`,
1722
exampleLang: 'js',
1823
template,
1924
}
@@ -24,22 +29,34 @@ const generateJsdoc2Config = (title, dir, files=[]) => {
2429
* @todo set up for other directories
2530
*/
2631
export const generateDocs = async () => {
27-
// const githubUtils = generateJsdoc2Config(`GitHub profile components' utilities`, 'src/github/utils');
28-
// const res = await jsdoc2md.render(githubUtils);
2932
const toDocs = [
33+
{
34+
title: 'profile-components',
35+
dir: pathFromRoot(),
36+
files: [
37+
pathFromRoot('src/github/user/index.js'),
38+
pathFromRoot('src/github/repository/index.js'),
39+
pathFromRoot('src/devto/user/index.js'),
40+
pathFromRoot('src/devto/post/index.js'),
41+
],
42+
},
3043
{
3144
title: `GitHub profile components' utilities`,
3245
dir: pathFromRoot('src/github/utils'),
3346
files: pathFromRoot('src/github/utils/*.js'),
3447
},
3548
{
36-
title: 'GitHub user profile component',
37-
dir: pathFromRoot('src/github/user'),
49+
title: 'GitHub utilities',
50+
dir: pathFromRoot('src/github'),
3851
files: [
39-
pathFromRoot('src/github/user/index.js'),
40-
pathFromRoot('src/github/user/content.js'),
52+
pathFromRoot('src/github/styles/index.js'),
4153
pathFromRoot('src/github/user/html.js'),
54+
pathFromRoot('src/github/user/content.js'),
55+
pathFromRoot('src/github/repository/html.js'),
56+
pathFromRoot('src/github/repository/content.js'),
57+
pathFromRoot('src/github/index.js'),
4258
],
59+
filename: 'UTILITIES.md',
4360
},
4461
{
4562
title: 'GitHub repository details component',
@@ -65,17 +82,30 @@ export const generateDocs = async () => {
6582
],
6683
},
6784
{
68-
title: 'Dev post component',
85+
title: 'DEV post component',
6986
dir: pathFromRoot('src/devto/post'),
7087
files: [
7188
pathFromRoot('src/devto/post/index.js'),
7289
pathFromRoot('src/devto/post/content.js'),
7390
pathFromRoot('src/devto/post/html.js'),
7491
],
7592
},
93+
{
94+
title: 'DEV utilities',
95+
dir: pathFromRoot('src/devto'),
96+
files: [
97+
pathFromRoot('src/devto/styles/index.js'),
98+
pathFromRoot('src/devto/user/html.js'),
99+
pathFromRoot('src/devto/user/content.js'),
100+
pathFromRoot('src/devto/post/html.js'),
101+
pathFromRoot('src/devto/post/content.js'),
102+
pathFromRoot('src/devto/index.js'),
103+
],
104+
filename: 'UTILITIES.md',
105+
},
76106
]
77107
for (const toDoc of toDocs) {
78-
const githubComp = generateJsdoc2Config(toDoc.title, toDoc.dir, toDoc.files);
108+
const githubComp = await generateJsdoc2Config(toDoc.title, toDoc.dir, toDoc.files, toDoc.filename);
79109
const res = await jsdoc2md.render(githubComp);
80110
await outputFile(githubComp.outputFile, res);
81111
}

‎package.json‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,8 @@
3737
"LICENSE"
3838
],
3939
"exports": {
40-
"./*.js": {
40+
"./*": {
4141
"import": "./dist/*.js"
42-
},
43-
"./github/*.js": {
44-
"import": "./src/github/*.js"
45-
},
46-
"./github/utils/*.js": {
47-
"import": "./src/github/utils/*.js"
4842
}
4943
},
5044
"license": "MIT",

‎public/cat-1000-420.jpeg‎

42.6 KB
Loading

‎public/cat-square.jpeg‎

17.8 KB
Loading

0 commit comments

Comments
 (0)