cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions Releases 26 Wiki Activity

SSB app stylin'.

Browse Source
This commit is contained in:
Cory McWilliams 2024-05-01 12:34:36 -04:00
parent 4edee0f7f6
commit de6c7a4fd4
4 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&wuCG8/3Z93hPcX4PZNNoQnQx9L2QjCKfn/hoVHb2VJo=.sha256" "previous": "&eapETfizGynW7oCLJmlsDwEYHqXWh2usHnDdVPxpXv0=.sha256"
} }

35
apps/ssb/tf-message.js
View File

@ -248,7 +248,7 @@ ${JSON.stringify(mention, null, 2)}</pre
let self = this; let self = this;
return html` return html`
<fieldset <fieldset
style="backdrop-filter: brightness(1.2); padding: 0.5em; border: 1px solid black" style="padding: 0.5em; border: 1px solid black"
> >
<legend>Mentions</legend> <legend>Mentions</legend>
${mentions.map((x) => self.render_mention(x))} ${mentions.map((x) => self.render_mention(x))}
@ -339,6 +339,9 @@ ${JSON.stringify(mention, null, 2)}</pre
if (this.message?.decrypted?.type == 'post') { if (this.message?.decrypted?.type == 'post') {
content = this.message.decrypted; content = this.message.decrypted;
} }
let class_background = this.message?.decrypted
? 'w3-pale-red'
: 'w3-theme-d4';
let self = this; let self = this;
let raw_button; let raw_button;
switch (this.format) { switch (this.format) {
@ -397,8 +400,8 @@ ${JSON.stringify(mention, null, 2)}</pre
let body; let body;
return html` return html`
<div <div
class="w3-card-4" class="w3-card-4 w3-theme-d4 w3-border-theme"
style="backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere" style="margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere"
> >
<tf-user id=${self.message.author} .users=${self.users}></tf-user> <tf-user id=${self.message.author} .users=${self.users}></tf-user>
<span style="padding-right: 8px" <span style="padding-right: 8px"
@ -424,8 +427,8 @@ ${JSON.stringify(mention, null, 2)}</pre
} }
if (this.message?.type === 'contact_group') { if (this.message?.type === 'contact_group') {
return html` <div return html` <div
class="w3-card-4" class="w3-card-4 w3-theme-d4 w3-border-theme"
style="border: 1px solid black; backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px; overflow-wrap: anywhere" style="margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
> >
${this.message.messages.map( ${this.message.messages.map(
(x) => (x) =>
@ -440,8 +443,8 @@ ${JSON.stringify(mention, null, 2)}</pre
</div>`; </div>`;
} else if (this.message.placeholder) { } else if (this.message.placeholder) {
return html` <div return html` <div
class="w3-card-4" class="w3-card-4 w3-theme-d4 w3-border-theme"
style="border: 1px solid black; backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px; overflow-wrap: anywhere" style="margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
> >
<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a> <a target="_top" href=${'#' + this.message.id}>${this.message.id}</a>
(placeholder) (placeholder)
@ -570,9 +573,6 @@ ${JSON.stringify(content, null, 2)}</pre
let is_encrypted = this.message?.decrypted let is_encrypted = this.message?.decrypted
? html`<span style="align-self: center">🔓</span>` ? html`<span style="align-self: center">🔓</span>`
: undefined; : undefined;
let style_background = this.message?.decrypted
? 'background-color: rgba(255, 0, 0, 0.2)'
: 'backdrop-filter: brightness(1.2)';
return html` return html`
<style> <style>
code { code {
@ -589,8 +589,8 @@ ${JSON.stringify(content, null, 2)}</pre
} }
</style> </style>
<div <div
class="w3-card-4" class="w3-card-4 ${class_background} w3-border-theme"
style="border: 1px solid black; ${style_background}; margin-top: 8px; padding: 16px" style="margin-top: 8px; padding: 16px"
> >
<div style="display: flex; flex-direction: row"> <div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user> <tf-user id=${this.message.author} .users=${this.users}></tf-user>
@ -616,9 +616,6 @@ ${JSON.stringify(content, null, 2)}</pre
let is_encrypted = this.message?.decrypted let is_encrypted = this.message?.decrypted
? html`<span style="align-self: center">🔓</span>` ? html`<span style="align-self: center">🔓</span>`
: undefined; : undefined;
let style_background = this.message?.decrypted
? 'background: rgba(255, 0, 0, 0.2)'
: 'backdrop-filter: brightness(1.2)';
return html` return html`
<style> <style>
code { code {
@ -635,8 +632,8 @@ ${JSON.stringify(content, null, 2)}</pre
} }
</style> </style>
<div <div
class="w3-card-4" class="w3-card-4 ${class_background} w3-border-theme"
style="border: 1px solid black; ${style_background}; margin-top: 8px; padding: 16px" style="margin-top: 8px; padding: 16px"
> >
<div style="display: flex; flex-direction: row"> <div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user> <tf-user id=${this.message.author} .users=${this.users}></tf-user>
@ -726,8 +723,8 @@ ${JSON.stringify(content, null, 2)}</pre
} }
</style> </style>
<div <div
class="w3-card-4" class="w3-card-4 w3-theme-d4 w3-border-theme"
style="border: 1px solid black; backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px" style="margin-top: 8px; padding: 16px"
> >
<div style="display: flex; flex-direction: row"> <div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user> <tf-user id=${this.message.author} .users=${this.users}></tf-user>

9
apps/ssb/tf-styles.js
View File

@ -34,12 +34,9 @@ const tf = css`
content: ' ±'; content: ' ±';
} }
code { pre code {
background-color: #444; display: block;
padding-left: 3px; padding: 8px;
padding-right: 3px;
border: 1px dotted #fff;
border-radius: 4px;
} }
blockquote { blockquote {

13
apps/ssb/tf-utils.js
View File

@ -1,5 +1,7 @@
import * as hashtagify from './commonmark-hashtag.js'; import * as hashtagify from './commonmark-hashtag.js';
const k_code_classes = 'w3-theme-l4 w3-theme-border w3-round';
function image(node, entering) { function image(node, entering) {
if ( if (
node.firstChild?.type === 'text' && node.firstChild?.type === 'text' &&
@ -60,10 +62,20 @@ function image(node, entering) {
} }
} }
function code(node) {
let attrs = this.attrs(node);
attrs.push(['class', k_code_classes]);
this.tag('code', attrs);
this.out(node.literal);
this.tag('/code');
}
function attrs(node) { function attrs(node) {
let result = commonmark.HtmlRenderer.prototype.attrs.bind(this)(node); let result = commonmark.HtmlRenderer.prototype.attrs.bind(this)(node);
if (node.type == 'block_quote') { if (node.type == 'block_quote') {
result.push(['class', 'w3-theme-d1']); result.push(['class', 'w3-theme-d1']);
} else if (node.type == 'code_block') {
result.push(['class', k_code_classes]);
} }
return result; return result;
} }
@ -72,6 +84,7 @@ export function markdown(md) {
let reader = new commonmark.Parser({safe: true}); let reader = new commonmark.Parser({safe: true});
let writer = new commonmark.HtmlRenderer(); let writer = new commonmark.HtmlRenderer();
writer.image = image; writer.image = image;
writer.code = code;
writer.attrs = attrs; writer.attrs = attrs;
let parsed = reader.parse(md || ''); let parsed = reader.parse(md || '');
parsed = hashtagify.transform(parsed); parsed = hashtagify.transform(parsed);