cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

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

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4665 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-12-09 18:35:42 +00:00
parent deb3cfb4b6
commit 817838e522
2 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/wiki.json
View File

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

32
apps/wiki/tf-wiki-doc.js
View File

@ -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,7 +211,13 @@ 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>
`;
}