From 40a54cc00a524a35c64ccb1edde726213aa6a6f1 Mon Sep 17 00:00:00 2001
From: Scott Nath <github@scottnath.com>
Date: Fri, 8 Dec 2023 12:56:14 -0500
Subject: [PATCH] :crystal_ball: start timeline work

---
 workspaces/components/src/timeline/README.md  |  5 ++
 workspaces/components/src/timeline/html.js    | 22 ++++++++
 workspaces/components/src/timeline/index.js   | 19 +++++++
 workspaces/components/src/timeline/item.js    | 30 ++++++++++
 workspaces/components/src/timeline/style.css  | 55 +++++++++++++++++++
 .../website/src/components/GitHubUser.astro   |  2 +-
 6 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 workspaces/components/src/timeline/README.md
 create mode 100644 workspaces/components/src/timeline/html.js
 create mode 100644 workspaces/components/src/timeline/index.js
 create mode 100644 workspaces/components/src/timeline/item.js
 create mode 100644 workspaces/components/src/timeline/style.css

diff --git a/workspaces/components/src/timeline/README.md b/workspaces/components/src/timeline/README.md
new file mode 100644
index 0000000..80e9929
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/workspaces/components/src/timeline/html.js b/workspaces/components/src/timeline/html.js
new file mode 100644
index 0000000..a0c3bdb
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/workspaces/components/src/timeline/index.js b/workspaces/components/src/timeline/index.js
new file mode 100644
index 0000000..c06630b
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/workspaces/components/src/timeline/item.js b/workspaces/components/src/timeline/item.js
new file mode 100644
index 0000000..7642d85
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/workspaces/components/src/timeline/style.css b/workspaces/components/src/timeline/style.css
new file mode 100644
index 0000000..d1546c9
--- /dev/null
+++ b/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;
+}
diff --git a/workspaces/website/src/components/GitHubUser.astro b/workspaces/website/src/components/GitHubUser.astro
index a603d5c..e434926 100644
--- a/workspaces/website/src/components/GitHubUser.astro
+++ b/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>