✨ new design with dope stripes!

workspaces/components/.storybook/preview.js

@@ -1,7 +1,12 @@
-import { setCustomElementsManifest } from '@storybook/web-components';
-import customElements from '../src/custom-elements.json';
+// import { setCustomElementsManifest } from '@storybook/web-components';
+// import customElements from '../src/custom-elements.json';
 
-setCustomElementsManifest(customElements);
+global.attrGen = (args) => Object.entries(args)
+.filter(([key, value]) => value)
+.map(([key, value]) => `\n  ${key}="${value}"`)
+.join(' ');
+
+// setCustomElementsManifest(customElements);
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {
   parameters: {

workspaces/components/src/custom-elements.json

@@ -0,0 +1 @@
+{}

workspaces/components/src/dope-stripes/dope-stripes.stories.js

@@ -0,0 +1,39 @@
+
+import './index.js';
+
+export default {
+  title: 'Dope stripes',
+  component: 'dope-stripes',
+  tags: ['autodocs'],
+  render: (args) => {
+
+    return `
+      <style>
+        dope-stripes::part(stripes) {
+          ${args.styles}
+        }
+      </style>
+
+      <dope-stripes stripes="${args.stripes}"></dope-stripes>
+    `;
+  }
+};
+
+export const Stripes = {
+  args: {
+    stripes: [
+      'red', 'blue', 'yellow', 'green'
+    ],
+  },
+}
+
+export const ColorScheme = {
+  args: {
+    styles: `--left-width: 7em;
+    --angle-width: 73px;
+    --stripe-height: 16px;
+    --stripe-angle: 20deg;
+    `,
+    stripes: ['#ffd273', '#ffbf57', '#ffa43b', '#ff8920', '#ff6e05'],
+  }
+}

workspaces/components/src/dope-stripes/html.js

@@ -0,0 +1,22 @@
+
+/**
+ * Creates one stripe
+ * @param {string} color - The color of the stripe
+ * @returns {string} - The HTML for the stripe
+ */
+export const stripe = (color) => {
+  return `<div class="stripe" style="--stripe-color: ${color}"><span></span></div>`
+}
+
+/**
+ * Creates a set of stripes
+ * @param {string[]} stripes - An array of colors to use for the stripes
+ * @returns {string} - The HTML for the stripes
+ */
+const html = (stripes) => {
+  return `<div class="stripes" part="stripes">
+    ${Array.isArray(stripes) && stripes.length > 0 ? stripes.map(stripe).join('') : ''}
+  </div>`;
+}
+
+export default html;

workspaces/components/src/dope-stripes/index.js

@@ -0,0 +1,39 @@
+import styles from './style.css?inline';
+import html from './html.js';
+
+/**
+ * @element dope-stripes
+ * @attr {string[]} stripes - An array of colors to use for the stripes
+ */
+export class DopeStripes extends HTMLElement {
+  constructor() {
+    super();
+    this.attrs = {};
+    this.attachShadow({ mode: "open" });
+    this._getAttributes();
+  }
+
+  /**
+   * Generate variables at `this.[attribute-name]` for each attribute on the element
+   * @ignore
+   */
+  _getAttributes() {
+    for (let name of this.getAttributeNames()) {
+      if (this.getAttribute(name)) {
+        this.attrs[name] = this.getAttribute(name);
+      }
+    }
+    if (this.attrs.stripes && typeof this.attrs.stripes === 'string') {
+      this.attrs.stripes = this.attrs.stripes.split(',');
+    }
+  }
+
+  async connectedCallback() {
+    this.setAttribute( 'exportparts', ['stripes'] );
+    let view = `<style>${styles}</style>`;
+    view += html(this.attrs.stripes);
+    this.shadowRoot.innerHTML = view;
+  }
+}
+
+customElements.define('dope-stripes', DopeStripes);

workspaces/components/src/dope-stripes/style.css

@@ -0,0 +1,55 @@
+.stripes {
+  width: 100%;
+  --left-width: 20%;
+  --angle-width: 50px;
+  --stripe-height: 20px;
+  --stripe-angle: 39deg;
+}
+
+.stripe {
+  display: flex;
+  align-items: left;
+  margin: 0 0 -1px;
+  width: 100%;
+  --stripe-color: #ffe27a;
+
+  & span,
+  &::before,
+  &::after {
+    content: " ";
+    height: var(--stripe-height);
+    display: block;
+    background-color: var(--stripe-color);
+    --rotated-height: calc(var(--angle-width) * tan(var(--stripe-angle)));
+  }
+}
+
+.stripe span {
+  transform: skewY(var(--stripe-angle));
+  transform-origin: 0% 0%;
+  flex: 0 0 auto;
+  width: calc(var(--angle-width));
+  height: var(--stripe-height);
+}
+.stripe::before {
+  width: var(--left-width);
+  flex: 0 0 auto;
+}
+.stripe::after {
+  flex: 1 1 auto;
+  transform: translate(0, var(--rotated-height));
+}
+.blue {
+  --stripe-color: rgb(0, 0, 255);
+}
+.yellow {
+  --stripe-color: #ffe27a;
+}
+
+.orange {
+  --stripe-color: #ffa64d;
+}
+
+.dark-orange {
+  --stripe-color: #ff7f1a;
+}

workspaces/website/src/components/DevToUser.astro

@@ -3,17 +3,26 @@
 // @see https://github.com/withastro/astro/issues/8660
 // @future-feature: import { user } from 'profile-components/devto-utils';
 import devto from 'profile-components/devto-utils';
+import profilePic from '~/assets/scott-nath-profile-photo.jpeg';
 const user = devto.user;
 
+const popularPost = {
+  "title": "Running a local multi-framework composition Storybook",
+  "url": "https://dev.to/scottnath/running-a-local-multi-framework-composition-storybook-506l",
+  "cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--vyFzl9Ml--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jv4luam96ya9sxsjotjx.png",
+  "social_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--HJA-rw9l--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jv4luam96ya9sxsjotjx.png",
+}
+
 const userContent = await user.generateContent({
   username: 'scottnath',
-  profile_image: '/scott-nath-profile-pic.jpeg'
+  profile_image: profilePic.src,
+  popular_post: popularPost,
 },true);
 let userHTML = '<style>' + user.styles + '</style>';
 userHTML += user.html(userContent);
 ---
 
-<devto-user>
+<devto-user data-theme="dark">
   <template shadowrootmode="open" set:html={userHTML}>
   </template>
 </devto-user>

workspaces/website/src/components/GitHubUser.astro

@@ -3,12 +3,13 @@
 // @see https://github.com/withastro/astro/issues/8660
 // @future-feature: import { user } from 'profile-components/github-utils';
 import github from 'profile-components/github-utils';
+import profilePic from '~/assets/scott-nath-profile-photo.jpeg';
 const user = github.user;
 
 const repos = JSON.stringify(['scottnath/profile-components', 'storydocker/storydocker']);
 const userContent = await user.generateContent({
   login: 'scottnath',
-  avatar_url: '/scott-nath-profile-pic.jpeg',
+  avatar_url: profilePic.src,
   repos
 },true);
 let userHTML = '<style>' + user.styles + '</style>';

workspaces/website/src/components/Header.astro

@@ -1,23 +1,156 @@
 ---
+import DopeStripesHTML from 'scottnath-components/src/dope-stripes/html.js';
+import DopeStripesStyles from 'scottnath-components/src/dope-stripes/style.css?inline';
 import HeaderLink from './HeaderLink.astro';
-import { SITE_TITLE } from '../consts';
+import { SITE_TITLE, SITE_SUBTITLE } from '../consts';
+import profilePic from '~/assets/scott-nath-profile-photo.jpeg';
+import devLogo from '~/assets/logos/dev.svg';
+import githubLogo from '~/assets/logos/github-inverse.svg';
+import linkedinLogo from '~/assets/logos/linkedin.svg';
+import mastodonLogo from '~/assets/logos/Mastodon.svg';
+
+let stripesHTML = '<style>' + DopeStripesStyles + '</style>';
+stripesHTML += DopeStripesHTML(['#ffd273', '#ffbf57', '#ffa43b', '#ff8920', '#ff6e05']);
 ---
 
 <header>
-	<h2>
-		{SITE_TITLE}
-	</h2>
-	<nav>
-		<HeaderLink href="/">Home</HeaderLink>
-		<HeaderLink href="/blahg">Blahg</HeaderLink>
-		<HeaderLink href="/resume">Resume</HeaderLink>
-	</nav>
+  <dope-stripes>
+    <template shadowrootmode="open" set:html={stripesHTML}>
+    </template>
+  </dope-stripes>
+  <div class="content">
+    <h2>
+      {SITE_TITLE}
+    </h2>
+    <h3>{SITE_SUBTITLE}</h3>
+    <img src={profilePic.src} alt="Scott Nath picture" width="400" height="400" class="avatar" />
+    <nav>
+      <HeaderLink href="/">Home</HeaderLink>
+      <HeaderLink href="/blahg">Blahg</HeaderLink>
+      <HeaderLink href="/resume">Resume</HeaderLink>
+    </nav>        
+
+    <address class="socials" aria-label="Also find me on these sites">
+      <a rel="me" href="https://dev.to/scottnath"><img src={devLogo.src} alt="DEV logo" /><span>DEV</span></a>
+      <a rel="me" href="https://github.com/scottnath"><img src={githubLogo.src} alt="GitHub logo" /><span>GitHub</span></a>
+      <a rel="me" href="https://www.linkedin.com/in/scottnath"><img src={linkedinLogo.src} alt="LinkedIn logo" /><span>LinkedIn</span></a>
+      <a rel="me" href="https://mastodon.social/@scottnath"><img src={mastodonLogo.src} alt="Mastodon logo" /><span>Mastodon</span></a>
+    </address>
+  </div>
 </header>
 <style>
 	header {
-		margin: 0em 0 2em;
+    --spacing: .5em;
+		margin: .5em 0 1em;
+    height: 9em;
+
+    & .content {
+      padding: 0 var(--spacing);
+      position: relative;
+      height: 100%;
+    }
 	}
+
+  dope-stripes {
+    position: absolute;
+    width: 100%;
+  }
+  dope-stripes::part(stripes) {
+    --left-width: 7em;
+    --angle-width: 73px;
+    --stripe-height: 16px;
+    --stripe-angle: 20deg;
+  }
 	h2 {
-		margin: 0.5em 0;
+		margin: 0;
+    padding-top: 3.3em;
 	}
+  h3 {
+    position: absolute;
+    top: 0;
+    right: var(--spacing);
+    padding: 0;
+    margin: 0;
+    font-size: 1em;
+  }
+  nav {
+    position: absolute;
+    left: var(--spacing);
+    bottom: var(--spacing);
+  }
+  @media (min-width: 500px) {
+    nav {
+      top: 0;
+      left: 11.5em;
+      bottom: auto;
+    }
+  }
+  address.socials {
+    font-style: normal;
+    position: absolute;
+    right: var(--spacing);
+    bottom: 1em;
+
+    & a {
+      display: inline-block;
+      text-decoration: none;
+      color: var(--color-link);
+      & img {
+        margin-right: .3em;
+        width: 1em;
+        height: 1em;
+        vertical-align: text-top;
+      }
+      & span {
+        clip: rect(0px, 0px, 0px, 0px);
+        clip-path: inset(50%);
+        height: 1px;
+        width: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        white-space: nowrap;
+      }
+      @media (min-width: 500px) {
+        & span {
+          position: relative;
+          margin: auto;
+          width: auto;
+          height: auto;
+          clip-path: none;
+          clip:auto;
+          font-size: var(--font-size-light);
+          padding-right: .75em;
+          color: #fff;
+        }
+      }
+    }
+  }
+  ul.socials li {
+    margin-left: 10px;
+    margin: .6em 1em;
+  }
+  ul.socials li a,
+  ul.socials li a:visited {
+    text-decoration: none;
+  }
+  ul.socials li a img {
+    margin-right: .2em;
+    width: 1em;
+    height: 1em;
+    vertical-align: text-top;
+  }
+  .avatar {
+    width: 100%;
+    max-width: 66px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+    margin: 0 auto;
+    display: block;
+    position: absolute;
+    top: 0.3em;
+    left: 2em;
+    box-shadow: 0px 0px 2px 2px #fff;
+  }
 </style>