Migrate layouts

imacrayon · imacrayon · Feb 3, 2023 · Feb 3, 2023 · Feb 3, 2023 · Feb 3, 2023
commit d71c8db91e837a0d886b83dd6ae123bbcc14a5a0
diff --git a/_components/cantilever.webc b/_components/cantilever.webc
@@ -0,0 +1,83 @@
+<div>
+  <div class="center">
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+</div>
+
+<style>
+  cantilever {
+    position: relative;
+    display: block;
+    padding-block-start: 2rem;
+    padding-block-end: 0;
+  }
+
+  cantilever::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2rem;
+    background: var(--black);
+  }
+
+  cantilever>div {
+    position: relative;
+  }
+
+  cantilever>div::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 50%;
+    background: var(--black);
+    z-index: -1;
+  }
+
+  cantilever>div::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+    height: 100%;
+    background: var(--primary);
+    z-index: -1;
+    border-block-start: 2px solid var(--black);
+    border-block-end: 2px solid var(--black);
+  }
+
+  cantilever .center>* {
+    position: relative;
+    background: var(--primary);
+    color: var(--black);
+    padding: 2rem;
+    border-block-start: 2px solid var(--black);
+    border-block-end: 2px solid var(--black);
+    border-inline-start: 2px solid var(--black);
+  }
+
+  @media screen and (min-width: 920px) {
+    cantilever .center>* {
+      margin-inline-start: -2rem;
+    }
+  }
+
+  cantilever h1,
+  cantilever h2 {
+    color: var(--primary);
+    font-family: var(--font-mono);
+    font-size: .717rem;
+    padding-block: .25rem;
+    border-block-end: 1px solid var(--black);
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+  }
+
+</style>
diff --git a/_components/intro.webc b/_components/intro.webc
@@ -0,0 +1,43 @@
+<figure>
+  <img src="/img/christian-taylor.jpg" alt="Christian Taylor's mug shot" width="64" height="64">
+  <figcaption>
+    <h1>Christian Taylor</h1>
+    <p>Co-Founder of Moonbase Labs</p>
+  </figcaption>
+</figure>
+<p>I’m a full stack developer with an eye for design and an appreciation for practical, accessible solutions.</p>
+
+<style>
+  intro {
+    display: block;
+    padding-block: 2.5vh;
+  }
+
+  intro figure {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  intro figcaption h1 {
+    font-family: var(--font-sans);
+    font-size: 1rem;
+    font-weight: 700;
+  }
+
+  intro figcaption p {
+    font-size: .717rem;
+    font-family: var(--font-mono);
+  }
+
+  intro img {
+    border-radius: 100%;
+  }
+
+  intro>p {
+    margin-block-start: 1em;
+    font-size: 1.717rem;
+    line-height: 1.25;
+  }
+
+</style>
diff --git a/_components/now-playing.webc b/_components/now-playing.webc
@@ -0,0 +1,51 @@
+<div>
+  <img src="" alt="" width="64" height="64">
+  <div>
+    <p>Fetching track...</p>
+    <p>Fetching artist...</p>
+  </div>
+</div>
+
+<style webc:scoped>
+  :host>* {
+    display: flex;
+    text-decoration: none;
+    gap: 1rem;
+  }
+
+  :host>*> :last-child {
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  :host>*> :last-child> :first-child {
+    font-weight: 700;
+  }
+
+  :host>*> :last-child> :last-child {
+    font-size: .717rem;
+    font-family: var(--font-mono);
+  }
+
+  :host img {
+    border: none;
+    background-color: var(--black);
+  }
+
+</style>
+
+<script webc:if="metadata.environment === 'production'">
+  window.customElements.define('now-playing', class extends HTMLElement {
+    connectedCallback() {
+      fetch(`https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/web/fn-0b7427a5-8f26-4ce6-8b1b-0c5197b404ac/default/now-playing`)
+        .then(response => response.text())
+        .then(html => {
+          if (html) {
+            this.innerHTML = html
+          }
+        })
+    }
+  })
+</script>
diff --git a/_components/pagination.webc b/_components/pagination.webc
@@ -0,0 +1,100 @@
+<script webc:type="js" webc:is="template">
+  let links = []
+  let previousPost = helpers.getPreviousCollectionItem(collections[collection], page, 'en')
+  if (previousPost) {
+    links.push(`<li>
+      <a href="${previousPost.url}">
+        <span>Previous</span>
+        ${helpers.widont(previousPost.data.title)}
+      </a>
+    </li>`)
+  } else {
+    links.push(`<li></li>`)
+  }
+  let nextPost = helpers.getNextCollectionItem(collections[collection], page, 'en')
+  if (nextPost) {
+    links.push(`<li>
+      <a href="${nextPost.url}">
+        <span>Next</span>
+        ${helpers.widont(nextPost.data.title)}
+      </a>
+    </li>`)
+  } else {
+    links.push(`<li></li>`)
+  }
+
+  links.length ? `<nav aria-label="${ariaLabel}" class="center"><ul role="list">${links.join('')}</ul></nav>` : ''
+</script>
+
+<style webc:scoped>
+  :host {
+    display: block;
+    position: relative;
+    border-block: 2px solid var(--black);
+  }
+
+  :host:before {
+    content: '';
+    height: 100%;
+    width: 2px;
+    background: var(--black);
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+  }
+
+  :host ul {
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 2rem;
+  }
+
+  :host li {
+    position: relative;
+  }
+
+  :host li:last-child {
+    text-align: right;
+  }
+
+  :host li:last-child span {
+    justify-content: end;
+  }
+
+  :host li:focus-within {
+    outline: 2px solid var(--black);
+    outline-offset: .5rem;
+  }
+
+  :host span {
+    font-size: .717rem;
+    font-family: var(--font-mono);
+    display: block;
+    margin-block-end: .25em;
+    text-decoration: underline;
+  }
+
+  :host a {
+    padding: 0;
+    font-size: 1rem;
+    text-decoration: none;
+    font-weight: 700;
+  }
+
+  :host a::before {
+    content: '';
+    position: absolute;
+    inset: .5rem;
+  }
+
+
+  :host a:focus,
+  :host a:hover {
+    outline: none;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+  }
+
+</style>
diff --git a/_components/responsive-image.webc b/_components/responsive-image.webc
@@ -0,0 +1,3 @@
+<script webc:type="js" webc:is="template">
+  helpers.responsiveImage(src, alt, widths)
+</script>
diff --git a/_components/webmentions.webc b/_components/webmentions.webc
@@ -0,0 +1,50 @@
+<script webc:type="js" webc:is="template">
+  let webmentions = helpers.webmentions(page).map(webmention => {
+    return `<li>
+      <div>
+        <img loading="lazy" src="${webmention.author.photo}" alt="">
+        <h3>
+          <a href="${webmention.author.url}">${webmention.author.name}</a>
+          <a href="${webmention.url}">${webmention.verb}</a>
+          <span>on ${helpers.readableDate(webmention.date)}</span>
+        </h3>
+      </div>
+      ${webmention.text ? `<div class="mt-2">${webmention.text}</div>` : ''}
+    </li>`
+  })
+
+  webmentions.length ? `<ul role="list" class="stack">${webmentions.join('')}</ul>` : '<p><em>No webmentions posted.</em></p>'
+</script>
+
+<style webc:scoped>
+  :host {
+    display: block;
+    margin-block-start: 1.171rem;
+  }
+
+  :host li>div {
+    display: flex;
+    align-items: center;
+  }
+
+  :host img {
+    width: 32px;
+    height: 32px;
+    border-radius: 32px;
+    border: 2px solid var(--black);
+    background: var(--black);
+    color: var(--primary);
+    margin-inline-end: .5rem;
+    flex-shrink: 0;
+  }
+
+  :host h3 {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+
+  :host h3 a:first-child {
+    font-weight: 700;
+  }
+
+</style>
diff --git a/_data/metadata.js b/_data/metadata.js
@@ -0,0 +1,24 @@
+module.exports = function () {
+  return {
+    "environment": process.env.SITE_ENVIRONMENT || "development",
+    "title": "I'm a crayon",
+    "url": "https://imacrayon.com",
+    "language": "en",
+    "description": "Work by Christian Taylor. An artist & full stack developer based in Wichita, KS.",
+    "feed": {
+      "subtitle": "Work by Christian Taylor. An artist & full stack developer based in Wichita, KS.",
+      "filename": "feed.xml",
+      "path": "/feed/feed.xml",
+      "id": "https://imacrayon.com"
+    },
+    "jsonfeed": {
+      "path": "/feed/feed.json",
+      "url": "https://imacrayon.com/feed/feed.json"
+    },
+    "author": {
+      "name": "Christian",
+      "email": "christianbtaylor@gmail.com",
+      "url": "https://imacrayon.com/about/"
+    }
+  }
+}