🔮 start timeline work

workspaces/components/src/timeline/README.md

@@ -0,0 +1,5 @@
+# initial time line setup
+
+* basic: https://codepen.io/havardob/pen/xxPqXdO
+* webc: https://dev.to/keyurparalkar/create-a-timeline-component-with-the-help-of-web-components-4go8
+    * code: https://codesandbox.io/p/sandbox/timeline-prototype-cspvlv

workspaces/components/src/timeline/html.js

@@ -0,0 +1,22 @@
+
+/**
+ * Creates one timeline item
+ * @param {string} color - The color of the stripe
+ * @returns {string} - The HTML for the stripe
+ */
+export const item = (datetime) => {
+  return `<dt><time>${datetime}</time></dt><dd><slot></slot></dd>`
+}
+
+/**
+ * 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 = (items) => {
+  return `<dl>
+    ${Array.isArray(items) && items.length > 0 ? items.map(item).join('') : ''}
+  </dl>`;
+}
+
+export default html;

workspaces/components/src/timeline/index.js

@@ -0,0 +1,19 @@
+<template id="time-line">
+  <dl>
+    <slot></slot>
+  </dl>
+</template>
+/**
+ * @element time-line
+ * @attr {string[]} items - An array of colors to use for the stripes
+ */
+export class TimeLine extends HTMLElement {
+  constructor() {
+    super();
+
+    const template = document.querySelector("#time-line").content;
+    const shadowRoot = this.attachShadow({ mode: "open" });
+    shadowRoot.appendChild(template.cloneNode(true));
+  }
+}
+customElements.define('time-line', TimeLine);

workspaces/components/src/timeline/item.js

@@ -0,0 +1,30 @@
+<template id="timeline-item">
+  <dt></dt>
+  <dd></dd>
+</template>
+/**
+ * @element time-line
+ * @attr {string[]} items - An array of colors to use for the stripes
+ */
+export class TimelineItem extends HTMLElement {
+  static get observedAttributes() {
+    return ["datetime", "content"];
+  }
+  constructor() {
+    super();
+    const template = document.querySelector("#timeline-item").content;
+    const shadowRoot = this.attachShadow({ mode: "open" });
+    shadowRoot.appendChild(template.cloneNode(true));
+  }
+
+  attributeChangedCallback(e, oldValue, newValue) {
+    const termElement = this.shadowRoot.querySelector("dt");
+    const timeElement = document.createElement("time");
+    timeElement.textContent = this.parentElement.getAttribute("datetime");
+    termElement.appendChild(timeElement);
+
+    const definitionElement = this.shadowRoot.querySelector("dd");
+    definitionElement.textContent = this.parentElement.getAttribute("content");
+  }
+}
+customElements.define('timeline-item', TimelineItem);

workspaces/components/src/timeline/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/GitHubUser.astro

@@ -16,7 +16,7 @@ let userHTML = '<style>' + user.styles + '</style>';
 userHTML += user.html(userContent);
 ---
 
-<github-user>
+<github-user data-theme="light_high_contrast">
   <template shadowrootmode="open" set:html={userHTML}>
   </template>
 </github-user>