Lots of plane work

tagslice.css

@@ -30,6 +30,7 @@ tag {
 	width: 100%;
 	max-width: 50rem;
 
+  margin-top: 0.5rem;
 	margin-bottom: 2rem;
 }
 
@@ -67,7 +68,7 @@ cardDetail {
 	flex-direction: column;
 }
 
-card.expanded cardDetail {
+card.expanded cardDetail, tagList.expandAll cardDetail {
 	display: flex;
 }
 
@@ -79,10 +80,27 @@ cardSection {
 }
 
 cardSectionTitle {
-	opacity: 0.5;
+	opacity: 0.6;
+  font-size: 85%;
+	margin-bottom: 0.2rem;
 }
 
 cardSectionText {
-	margin-top: 0.2rem;
 	font-size: 90%;
 }
+
+referenceList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  margin-top: 1rem;
+}
+
+referenceList a {
+  color: var(--darkgrey);
+  font-size: 85%;
+
+  margin-right: 1rem;
+  margin-bottom: 0.5rem;
+}

tagslice.js

@@ -3,11 +3,26 @@
 class TagSlice {
 	constructor(container) {
 		this.buildDom_(container);
-		addEventListener('hashchange', () => this.parseHash_());
-		this.parseHash_();
+		addEventListener('hashchange', () => this.parseUrl_());
+		this.parseUrl_();
 		this.loadJson_();
+    this.registerKeys_();
 	}
 
+  registerKeys_() {
+		document.addEventListener('keypress', (e) => {
+      switch (e.key) {
+        case 'r':
+          this.loadJson_();
+          break;
+
+        case 'x':
+				  this.tagList_.classList.toggle('expandAll');
+          break;
+			}
+		});
+  }
+
 	createElement_(container, tagName, text) {
 		let elem = document.createElement(tagName);
 		container.appendChild(elem);
@@ -32,17 +47,35 @@ class TagSlice {
 		let detail = this.createElement_(elem, 'cardDetail');
 		for (let sectionName in object['content']) {
 			let section = this.createElement_(detail, 'cardSection');
-			this.createElement_(section, 'cardSectionTitle', sectionName);
+      if (sectionName) {
+			  this.createElement_(section, 'cardSectionTitle', sectionName);
+      }
 			this.createElement_(section, 'cardSectionText', object['content'][sectionName]);
 		}
+    if (object['references']) {
+      let refList = this.createElement_(detail, 'referenceList');
+      for (let refName in object['references']) {
+        let ref = this.createElement_(refList, 'a', refName);
+        ref.href = object['references'][refName];
+      }
+    }
 	}
 
-	parseHash_() {
+	parseUrl_() {
 		this.tags_ = [];
 		let hash = window.location.hash.substr(1);
-		for (let tag of hash.split(',')) {
-			this.tags_.push(decodeURIComponent(tag));
-		}
+    if (hash) {
+		  for (let tag of hash.split(',')) {
+			  this.tags_.push(decodeURIComponent(tag));
+		  }
+    }
+    let query = window.location.href.split('?', 2)[1];
+    if (query) {
+      query = query.split('#', 1)[0];
+      for (let tag of query.split(',')) {
+			  this.tags_.push(decodeURIComponent(tag));
+      }
+    }
 		document.title = this.tags_.join(', ');
 		this.maybeRender_();
 	}