Call out a summary and thumbnail for wiki pages, for the purpose of using in blog posts.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4665 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/wiki.json

@@ -1,5 +1,5 @@
 {
   "type": "tildefriends-app",
   "emoji": "📝",
-  "previous": "&kjbXfJac0FNZnkr+TlnKjbJOQ/Ktw5C/TWjXu/i6IWs=.sha256"
+  "previous": "&S0BU5A5u3ltu0+QZn+wANrO/sx+nqi4vQLs2t5Rwm/I=.sha256"
 }

apps/wiki/tf-wiki-doc.js

@@ -43,6 +43,29 @@ class TfWikiDocElement extends LitElement {
 		return writer.render(parsed);
 	}
 
+	summary(md) {
+		let lines = (md || '').split('\n');
+		let result = [];
+		let have_content = false;
+		for (let line of lines) {
+			if (have_content && !line.trim().length) {
+				return result.join('\n');
+			}
+			if (!line.startsWith('#') && line.trim().length) {
+				have_content = true;
+			}
+			result.push(line);
+		}
+		return result.join('\n');
+	}
+
+	thumbnail(md) {
+		//let m = md ? md.match(/\!\[image:[^\]]+]\((\&.{44}\.sha256)\)/) : undefined;
+		let m = md ? md.match(/.*\((\&.{44}\.sha256)\).*/) : undefined;
+		console.log('thumb', m);
+		return m ? m[1] : undefined;
+	}
+
 	async load_blob() {
 		let blob = await tfrpc.rpc.get_blob(this.value?.blob);
 		if (blob.endsWith('.box')) {
@@ -171,6 +194,7 @@ class TfWikiDocElement extends LitElement {
 			this.load_blob();
 		}
 		let self = this;
+		let thumbnail_ref = this.thumbnail(this.blob);
 		return html`
 			<div style="display: inline-flex; flex-direction: row">
 				<button ?disabled=${!this.whoami || this.is_editing} @click=${() => self.is_editing = true}>Edit</button>
@@ -187,10 +211,16 @@ class TfWikiDocElement extends LitElement {
 					@input=${this.on_edit}
 					@paste=${this.paste}
 					.value=${this.blob ?? ''}></textarea>
-				<div style="flex: 1 1">${unsafeHTML(this.markdown(this.blob))}</div>
+				<div style="flex: 1 1">
+					<div ?hidden=${!this.is_editing} style="border: 1px solid #fff; border-radius: 1em; padding: 0.5em">
+						<img ?hidden=${!thumbnail_ref} style="max-width: 128px; max-height: 128px; float: right" src="/${thumbnail_ref}/view">
+						${unsafeHTML(this.markdown(this.summary(this.blob)))}
+					</div>
+					${unsafeHTML(this.markdown(this.blob))}
+				</div>
 			</div>
 		`;
 	}
 }
 
-customElements.define('tf-wiki-doc', TfWikiDocElement);
+customElements.define('tf-wiki-doc', TfWikiDocElement);