From 53f9547cc5cf63a33c71e2389a541983c41b4098 Mon Sep 17 00:00:00 2001 From: Tasia Date: Thu, 22 Feb 2024 13:03:21 +0100 Subject: [PATCH 01/77] style(wiki): use core.js --- apps/wiki/core.css | 125 +++++++++++++++++++++++++++++++++++++ apps/wiki/index.html | 3 +- apps/wiki/tf-collection.js | 13 ++-- apps/wiki/tf-id-picker.js | 3 +- apps/wiki/tf-wiki-app.js | 15 +++-- apps/wiki/tf-wiki-doc.js | 5 +- 6 files changed, 149 insertions(+), 15 deletions(-) create mode 100644 apps/wiki/core.css diff --git a/apps/wiki/core.css b/apps/wiki/core.css new file mode 100644 index 00000000..389dcb6c --- /dev/null +++ b/apps/wiki/core.css @@ -0,0 +1,125 @@ +/* + * Tilde Friends core stylesheet + * This is a prototype; things may change based on feedback. + * + * This Software is an external library that is part of + * Tilde Friends and is shared under the MIT license. + * A copy of the license is available at the end of this file. + * + * Inject this file in your app at core.css + * and use this tag to import it: + * + * + * Revision 0 / 2024 M02 19 + */ + +body { + color: white; + font-family: sans-serif; +} + +button, .button { + border: none; + border-radius: 8px; + padding: 8px 12px; + text-align: center; + text-decoration: none; + display: inline-block; + margin: 4px; +} + +button:hover, .button:hover { + filter: brightness(0.75); +} + +button.red, .button.red { + background-color: #bd1e24; + color: white; +} + +button.green, .button.green { + background-color: #18922d; + color: white; +} + +button.blue, .button.blue { + background-color: #0067a7; + color: white; +} + +button.yellow, .button.yellow { + background-color: #ee9600; + color: black; +} + +a:link { + color: #268bd2; +} + +a:visited { + color: #6c71c4; +} + +a:hover { + color: #859900; +} + +a:active { + color: #2aa198; +} + +table { + border-collapse: collapse; + width: 100%; +} + +td, th { + border: 1px solid #ffffff40; + text-align: left; + padding: 8px; +} + +tr:nth-child(even) { + background-color: #ffffff20; +} + +.flex { + display: flex; +} + +.flex-column { + display: flex; + flex-direction: column; +} + +.flex-row { + display: flex; + flex-direction: row; +} + +.inline-flex-row { + display: inline-flex; + flex-direction: row; +} + +/* +Copyright 2024- Cory McWilliams & Tasia Iso + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ \ No newline at end of file diff --git a/apps/wiki/index.html b/apps/wiki/index.html index bfcdec3b..6671b647 100644 --- a/apps/wiki/index.html +++ b/apps/wiki/index.html @@ -2,8 +2,9 @@ + - + diff --git a/apps/wiki/tf-collection.js b/apps/wiki/tf-collection.js index 1337602e..655dfe01 100644 --- a/apps/wiki/tf-collection.js +++ b/apps/wiki/tf-collection.js @@ -65,28 +65,29 @@ class TfCollectionElement extends LitElement { render() { let self = this; return html` - - ${Object.values(this.collection ?? {}).sort((x, y) => x.name.localeCompare(y.name)).map(x => html``)} - + - - + + - + `; } diff --git a/apps/wiki/tf-id-picker.js b/apps/wiki/tf-id-picker.js index ef9748c2..dc668ea2 100644 --- a/apps/wiki/tf-id-picker.js +++ b/apps/wiki/tf-id-picker.js @@ -26,7 +26,8 @@ class TfIdentityPickerElement extends LitElement { render() { return html` - ${(this.ids ?? []).map(id => html``)} `; diff --git a/apps/wiki/tf-wiki-app.js b/apps/wiki/tf-wiki-app.js index 17ca2e30..cd473144 100644 --- a/apps/wiki/tf-wiki-app.js +++ b/apps/wiki/tf-wiki-app.js @@ -240,7 +240,12 @@ class TfCollectionsAppElement extends LitElement { render() { let self = this; return html` + -
+
@@ -248,7 +249,7 @@ class TfWikiDocElement extends LitElement {
🔒 document is private
-
+

Identities

-
    `+ - ids.map(id => `
  • +
      ` + + ids + .map( + (id) => `
    • ${id} -
      • `).join('\n')+ - `
    - `); +
    • ` + ) + .join('\n') + + `
+ ` + ); } main(); diff --git a/apps/issues.json b/apps/issues.json index eefff625..104906de 100644 --- a/apps/issues.json +++ b/apps/issues.json @@ -1,5 +1,5 @@ { - "type": "tildefriends-app", - "emoji": "🦟", - "previous": "&TegdzvFE+im94shygaHkgDYSaSrwY2h0OKUXSRPBQDM=.sha256" -} \ No newline at end of file + "type": "tildefriends-app", + "emoji": "🦟", + "previous": "&TegdzvFE+im94shygaHkgDYSaSrwY2h0OKUXSRPBQDM=.sha256" +} diff --git a/apps/issues/app.js b/apps/issues/app.js index 1a61fe79..2b048e77 100644 --- a/apps/issues/app.js +++ b/apps/issues/app.js @@ -67,7 +67,7 @@ tfrpc.register(function getHash(id, message) { tfrpc.register(function setHash(hash) { return app.setHash(hash); }); -ssb.addEventListener('message', async function(id) { +ssb.addEventListener('message', async function (id) { await tfrpc.rpc.notifyNewMessage(id); }); tfrpc.register(async function store_blob(blob) { @@ -88,18 +88,18 @@ tfrpc.register(function apps() { tfrpc.register(async function try_decrypt(id, content) { return await ssb.privateMessageDecrypt(id, content); }); -ssb.addEventListener('broadcasts', async function() { +ssb.addEventListener('broadcasts', async function () { await tfrpc.rpc.set('broadcasts', await ssb.getBroadcasts()); }); -core.register('onConnectionsChanged', async function() { +core.register('onConnectionsChanged', async function () { await tfrpc.rpc.set('connections', await ssb.connections()); }); async function main() { - if (typeof(database) !== 'undefined') { + if (typeof database !== 'undefined') { g_database = await database('ssb'); } await app.setDocument(utf8Decode(await getFile('index.html'))); } -main(); \ No newline at end of file +main(); diff --git a/apps/issues/index.html b/apps/issues/index.html index fc09cd06..43bc539e 100644 --- a/apps/issues/index.html +++ b/apps/issues/index.html @@ -1,14 +1,16 @@ - + Tilde Friends - + - - + + - \ No newline at end of file + diff --git a/apps/issues/script.js b/apps/issues/script.js index 1c9c2d32..cdb37b91 100644 --- a/apps/issues/script.js +++ b/apps/issues/script.js @@ -31,7 +31,12 @@ class TfIdPickerElement extends LitElement { if (this.ids) { return html` `; } else { @@ -57,13 +62,15 @@ class TfComposeElement extends LitElement { } submit() { - this.dispatchEvent(new CustomEvent('tf-submit', { - bubbles: true, - composed: true, - detail: { - value: this.renderRoot.getElementById('input').value, - }, - })); + this.dispatchEvent( + new CustomEvent('tf-submit', { + bubbles: true, + composed: true, + detail: { + value: this.renderRoot.getElementById('input').value, + }, + }) + ); this.renderRoot.getElementById('input').value = ''; this.input(); } @@ -96,7 +103,8 @@ class TfIssuesAppElement extends LitElement { async load() { let issues = {}; - let messages = await tfrpc.rpc.query(` + let messages = await tfrpc.rpc.query( + ` WITH issues AS (SELECT messages.* FROM messages_refs JOIN messages ON messages.id = messages_refs.message WHERE messages_refs.ref = ? AND json_extract(messages.content, '$.type') = 'issue'), @@ -107,7 +115,9 @@ class TfIssuesAppElement extends LitElement { SELECT * FROM issues UNION SELECT * FROM edits ORDER BY timestamp - `, [k_project]); + `, + [k_project] + ); for (let message of messages) { let content = JSON.parse(message.content); switch (content.type) { @@ -123,7 +133,7 @@ class TfIssuesAppElement extends LitElement { break; case 'issue-edit': case 'post': - for (let issue of (content.issues || [])) { + for (let issue of content.issues || []) { if (issues[issue.link]) { if (issue.open !== undefined) { issues[issue.link].open = issue.open; @@ -136,7 +146,9 @@ class TfIssuesAppElement extends LitElement { break; } } - this.issues = Object.values(issues).sort((x, y) => (y.open - x.open) || (y.created - x.created)); + this.issues = Object.values(issues).sort( + (x, y) => y.open - x.open || y.created - x.created + ); if (this.selected) { for (let issue of this.issues) { if (issue.id == this.selected.id) { @@ -150,11 +162,20 @@ class TfIssuesAppElement extends LitElement { return html` ${issue.open ? '☐ open' : '☑ closed'} - ${issue.author} - this.selected = issue}> + + ${issue.author} + + (this.selected = issue)} + > ${issue.text.split('\n')?.[0]} - ${new Date(issue.updated ?? issue.created).toLocaleDateString()} + + ${new Date(issue.updated ?? issue.created).toLocaleDateString()} + `; } @@ -170,13 +191,21 @@ class TfIssuesAppElement extends LitElement {
${new Date(update.timestamp).toLocaleString()}
${update.author}
${message}
-
${update.open !== undefined ? (update.open ? 'issue opened' : 'issue closed') : undefined}
+
+ ${update.open !== undefined + ? update.open + ? 'issue opened' + : 'issue closed' + : undefined} +
`; } async set_open(id, open) { - if (confirm(`Are you sure you want to ${open ? 'open' : 'close'} this issue?`)) { + if ( + confirm(`Are you sure you want to ${open ? 'open' : 'close'} this issue?`) + ) { let whoami = this.shadowRoot.getElementById('picker').selected; await tfrpc.rpc.appendMessage(whoami, { type: 'issue-edit', @@ -207,7 +236,9 @@ class TfIssuesAppElement extends LitElement { type: 'post', text: event.detail.value, root: this.selected.id, - branch: this.selected.updates.length ? this.selected.updates[this.selected.updates.length - 1].id : this.selected.id, + branch: this.selected.updates.length + ? this.selected.updates[this.selected.updates.length - 1].id + : this.selected.id, issues: [ { link: this.selected.id, @@ -226,16 +257,18 @@ class TfIssuesAppElement extends LitElement { return html` ${header}
- this.selected = undefined}> - ${this.selected.open ? - html` this.set_open(this.selected.id, false)}>` : - html` this.set_open(this.selected.id, true)}>`} + (this.selected = undefined)}> + ${ + this.selected.open + ? html` this.set_open(this.selected.id, false)}>` + : html` this.set_open(this.selected.id, true)}>` + }
${new Date(this.selected.created).toLocaleString()}
${this.selected.author}
${this.selected.id}
${unsafeHTML(tfutils.markdown(this.selected.text))}
- ${this.selected.updates.map(x => this.render_update(x))} + ${this.selected.updates.map((x) => this.render_update(x))} `; } else { @@ -250,11 +283,11 @@ class TfIssuesAppElement extends LitElement { Title Date - ${this.issues.map(x => this.render_issue_table_row(x))} + ${this.issues.map((x) => this.render_issue_table_row(x))} `; } } } -customElements.define('tf-issues-app', TfIssuesAppElement); \ No newline at end of file +customElements.define('tf-issues-app', TfIssuesAppElement); diff --git a/apps/issues/tf-utils.js b/apps/issues/tf-utils.js index a1c7666a..444e2a93 100644 --- a/apps/issues/tf-utils.js +++ b/apps/issues/tf-utils.js @@ -1,20 +1,32 @@ import * as linkify from './commonmark-linkify.js'; function image(node, entering) { - if (node.firstChild?.type === 'text' && - node.firstChild.literal.startsWith('video:')) { + if ( + node.firstChild?.type === 'text' && + node.firstChild.literal.startsWith('video:') + ) { if (entering) { - this.lit('