✨ add github card component (#4)

workspaces/components/src/devto/README.md

@@ -5,14 +5,17 @@ WIP for use on scottnath.com only
 ## @todo
 
 - [ ] Fetch non-key data from api
+- [ ] container queries and nested CSS
+- [ ] move to separate repo
+  - [ ] profile-cards
 - [ ] i18 || configure titles
 - [ ] use `data-thing` for attributes?
 - [ ] re-do `parts`, removing parts that are just for style-sharing
 - [ ] interaction tests
 - [ ] a11y testing
 - [ ] create custom element manifest
   - [ ] need [plugins](https://custom-elements-manifest.open-wc.org/blog/intro/#plugins) to do JSDoc correctly
-- [ ] separate out fetch and data handling from component
+- [x] separate out fetch and data handling from component
 - [ ] alt-option that allows use of api-key
 - [ ] test in plain HTML page
 - [ ] test in Qwik

workspaces/components/src/devto/devto.shared-spec.js

@@ -7,7 +7,8 @@ export const snUserFixture = {
   name: 'Scott Nath',
   summary: "Front-end Architect",
   joined_at: 'Mar 30, 2023',
-  profile_image: 'https://res.cloudinary.com/practicaldev/image/fetch/s--8gi1l6OI--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1055555/8146c5bb-31d3-4023-a216-5cb5c00ecb3b.jpg',
+  // profile_image: 'https://res.cloudinary.com/practicaldev/image/fetch/s--8gi1l6OI--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1055555/8146c5bb-31d3-4023-a216-5cb5c00ecb3b.jpg',
+  profile_image: './multi-face-image.jpeg',
   joined: '2023-03-30',
   post_count: 8
 }

workspaces/components/src/devto/profile-card.js

@@ -1,7 +1,6 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
 import {when} from 'lit/directives/when.js';
 
-// import stylesDep from './style.css'
 import styles from './styles.css?inline'
 
 /**
@@ -49,6 +48,11 @@ export const formatDate = (dt) => {
   return `${year}-${month}-${day}`
 }
 
+/**
+ * Container for the dev.to logo
+ */
+export const logoContainer = html`<div part="logo">${devLogoSvg}</div>`;
+
 /**
  * Content about one post by dev.to (or Forem) user, sourced from the Forem API.
  * @see https://developers.forem.com/api/v1#tag/articles/operation/getLatestArticles
@@ -72,7 +76,7 @@ ${post.title}</a>`;
  * @param {ForemPost} post - Content about a post
  */
 const postDescription = (term, post) => post ? html`
-<dt part="mild">${term}</dt>
+<dt>${term}</dt>
 <dd>${postLink(post)}</dd>
 ` : '';
 
@@ -105,7 +109,7 @@ const profileLink = (user) => html`
  * Render a user's avatar
  * @param {ForemUser} user - Content about a user
  */
-const userAvatar = (user) => html`<img src="${user?.profile_image}" part="avatar" alt="Avatar for ${user?.name}" loading="lazy" />`;
+const avatarImg = (user) => html`<img src="${user?.profile_image}" part="avatar" alt="Avatar for ${user?.name}" loading="lazy" />`;
 
 /**
  * @function Render a user's summary content
@@ -117,7 +121,7 @@ export const userSummary = (summary) => summary ? html`<p class="summary">${summ
  * @function Render a user's joined date
  * @param {string} joined_at - date the user joined
  */
-export const userJoined = (joined_at) => joined_at ? html`<p part="mild">
+export const userJoined = (joined_at) => joined_at ? html`<p>
 ${joinedSvg} 
 <span>Joined on 
   <time datetime="${formatDate(joined_at)}">${joined_at}</time>
@@ -129,7 +133,7 @@ ${joinedSvg}
  * @function Render a user's post count
  * @param {number} post_count - number of posts the user has published
  */
-export const userPostCount = (post_count) => post_count !== undefined ? html`<p part="mild">
+export const userPostCount = (post_count) => post_count !== undefined ? html`<p>
   ${postSvg} 
   <span>${post_count} posts published</span>
 </p>
@@ -187,31 +191,31 @@ export class DevToProfileCard extends LitElement {
   render() {
     if (this.error) {
       return html`
-        <section part="container">
+        <section part="card">
           <header>
-            <div part="logo">${devLogoSvg}</div>
+            ${logoContainer}
             
             <p role="heading">
-              <span part="name bold">${this.error}</span>
+              <span part="name">${this.error}</span>
             </p>
           </header>
         </section>
       `;
     }
 
     return html`
-      <section part="container">
+      <section part="card">
         <header>
-          <div part="logo">${devLogoSvg}</div>
+          ${logoContainer}
           
-          <p role="heading">
+          <address role="heading">
             <a href="https://dev.to/${this.user?.username}">
-              <span part="avatar-container">
-                ${userAvatar(this.user)}
+              <span part="avatar">
+                ${avatarImg(this.user)}
               </span>
-              <span part="name bold">${this.user?.name}</span>
+              <span part="name">${this.user?.name}</span>
             </a>
-          </p>
+          </address>
         </header>
         <div part="main">
           ${userSummary(this.user?.summary)}
@@ -224,7 +228,7 @@ export class DevToProfileCard extends LitElement {
           `)}
         </div>
         <footer>
-          <p>${profileLink(this.user)}</p>
+          ${profileLink(this.user)}
         </footer>
       </section>
     `;

workspaces/components/src/devto/profile-card.stories.js

@@ -1,6 +1,6 @@
 
 import './profile-card';
-import { snUserFixture, meowUserFixture, snPostFixture } from './devto.shared-spec';
+import { snUserFixture, snPostFixture } from './devto.shared-spec';
 
 export default {
   title: 'Profile Card',
@@ -19,4 +19,14 @@ export const UserWithLatestPost = {
     user: snUserFixture,
     latest_post: snPostFixture,
   },
-}
+}
+
+export const NoUser = {};
+export const NoUsername = {
+  args: {
+    user: {
+      ...snUserFixture,
+      username: undefined,
+    },
+  },
+};

workspaces/components/src/devto/styles.css

@@ -13,15 +13,28 @@
   --base-70: #575757;
   --base-90: #242424;
   --radius: 0.375rem;
-  --radius-auto: Max(0px, Min(var(--radius), calc((100vw - 4px - 100%) * 9999))) / var(--radius);
 
   --body-bg: rgb(var(--grey-100));
   --card-bg: rgb(var(--white));
   --card-color: var(--base-70);
   --card-color-bold: var(--base-90);
   --card-shadow-color: rgba(var(--grey-900), 0.05);
-  --fw-bold: 700;
 
+  --color-base: var(--base-70);
+  --color-mild: var(--base-70);
+  --color-bold: var(--base-90);
+
+  --divider: 1px solid var(--body-bg);
+
+  --ff-base: var(--ff-sans-serif);
+
+  --fs-base: 16px;
+  --fs-mild: 0.875em;
+  --fs-bold: 1.25em;
+
+  --fw-base: 500;
+  --fw-bold: 700;
+
   --accent-brand: rgb(var(--indigo-600));
   --accent-brand-darker: rgb(var(--indigo-700));
   --profile-brand-color: rgb(var(--black));
@@ -39,50 +52,58 @@
   --cta-branded-color-hover: rgb(var(--white));
   --cta-branded-border: var(--accent-brand);
   --cta-branded-border-hover: var(--accent-brand-darker);
+
+
+
 }
 :host {
-  color: var(--card-color);
-  font-size: 16px;
   line-height: 1.5;
-  font-family: var(--ff-sans-serif);
+
+  color: var(--color-base);
+  font-family: var(--ff-base);
+  font-size: var(--fs-base);
+  font-weight: var(--fw-base);
 }
 /** root elements cleanup */
+* {
+  padding: 0;
+  margin: 0;
+  margin-inline: 0;
+}
 a {
   text-decoration: none;
 }
-dl, dd, dt {
-  margin: 0;
-  padding: 0;
+address {
+  font-style: normal;
+  margin: 0.5em 0;
+}
+dt {
+  color: var(--color-mild);
+  font-size: var(--fs-mild);
 }
 p {
+  color: var(--color-mild);
+  font-size: var(--fs-mild);
   margin: 0.5em 0;
 }
 p > svg {
   vertical-align: top;
   width: 1.3em;
   height: 1.3em;
 }
-address {
-  font-style: normal;
-}
 .summary {
+  color: var(--color-base);
+  font-size: var(--fs-base);
   font-style: italic;
 }
-
-:host::part(mild) {
-  font-size: .875em;
-  color: var(--base-70);
-}
-:host::part(bold) {
-  font-size: 1.25em;
-  color: var(--card-color-bold);
-  font-weight: var(--fw-bold);
+.summary {
+  font-style: italic;
 }
 
-:host::part(container) {
+:host::part(card) {
   position: relative;
   border-top: 2em solid var(--profile-brand-color);
-  border-radius: var(--radius-auto);
+  border-radius: var(--radius);
   box-shadow: 0 0 0 1px var(--card-shadow-color);
   background: var(--card-bg);
 
@@ -92,13 +113,13 @@ address {
 }
 
 :host header {
-  border-bottom: 1px solid var(--body-bg);
+  border-bottom: var(--divider);
   margin-bottom: 1em;
   padding: 0 1em;
 }
 :host footer {
-  border-top: 1px solid var(--body-bg);
-  margin: 1em 0 0;
+  border-top: var(--divider);
+  margin-top: 1em;
   padding: 1em;
 }
 
@@ -118,7 +139,7 @@ address {
   margin-top: -1em;
 }
 
-:host::part(avatar-container) {
+:host::part(avatar) {
   display: inline-block;
   border-radius: 100%;
   position: relative;
@@ -129,7 +150,7 @@ address {
   flex-shrink: 0;
   margin-right: .5em;
 }
-:host::part(avatar) {
+:host::part(avatar) img {
   border-radius: 100%;
   width: 100%;
   height: 100%;
@@ -139,21 +160,22 @@ address {
 
 :host::part(name) {
   margin-top: 1.25em;
+
+  color: var(--color-bold);
+  font-size: var(--fs-bold);
+  font-weight: var(--fw-bold);
 }
 
 :host::part(main) {
   padding: 0 1em;
 }
 
 :host::part(post) {
-  /* display: flex;
-  gap: .5em; */
   color: var(--card-color-bold);
 }
 :host::part(post-img) {
   width: 100%;
   height: auto;
-  /* object-fit: scale-down; */
 }
 :host::part(cta) {
   border: 1px solid;

workspaces/components/src/github/README.md

@@ -0,0 +1,7 @@
+
+
+## Repo card (@todo)
+
+- repo language colors - https://github.com/github/personal-website/blob/ec99147d789ea3332274857d38aba8c3b5063ae5/_data/colors.json#L1199
+- octicons - https://github.com/primer/octicons/blob/main/package.json
+  - create script to generate local svgs with aria-label