v2 start

components/d-title.js

@@ -0,0 +1,36 @@
+import {Template} from "../mixins/template";
+import {body} from "./layout";
+
+const T = Template("d-title", `
+<style>
+d-title {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  background-color: hsl(200, 0%, 95%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+d-title h1 {
+  padding-top: 100px;
+  padding-bottom: 36px;
+  margin: 0;
+  line-height: 1em;
+  font-size: 60px;
+  font-weight: 400;
+}
+${body("d-title h1")}
+</style>
+`, false);
+
+export default class Title extends T(HTMLElement) {
+  static get is() { return "d-title"; }
+  connectedCallback() {
+    super.connectedCallback();
+    this.byline = document.createElement("d-byline");
+    let frontMatter = document.querySelector("d-front-matter");
+    this.byline.render(frontMatter.data);
+    this.appendChild(this.byline);
+  }
+}
+
+customElements.define(Title.is, Title);