From a31ab6b8eae47e6550636700f4bf1df0bd63fcc7 Mon Sep 17 00:00:00 2001 From: ashastral Date: Wed, 18 Sep 2024 17:42:45 -0700 Subject: [PATCH] add shared items, relative dates, tags; CSS fixes --- cohost-wc.css | 207 +++++++++--- src/cohost-wc.ts | 840 +++++++++++++++++++++++++++++++---------------- 2 files changed, 732 insertions(+), 315 deletions(-) diff --git a/cohost-wc.css b/cohost-wc.css index a06877d..229a0c1 100644 --- a/cohost-wc.css +++ b/cohost-wc.css @@ -1,42 +1,40 @@ -/* atkinson-hyperlegible-regular - latin_latin-ext */ +/* Atkinson Hyperlegible */ + @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-display: swap; font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; src: url("../fonts/atkinson-hyperlegible-v11-latin_latin-ext-regular.woff2") - format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + format("woff2"); } - -/* atkinson-hyperlegible-italic - latin_latin-ext */ @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-display: swap; font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; src: url("../fonts/atkinson-hyperlegible-v11-latin_latin-ext-italic.woff2") - format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + format("woff2"); } - -/* atkinson-hyperlegible-700 - latin_latin-ext */ @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-display: swap; font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; src: url("../fonts/atkinson-hyperlegible-v11-latin_latin-ext-700.woff2") - format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + format("woff2"); } - -/* atkinson-hyperlegible-700italic - latin_latin-ext */ @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-display: swap; font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; src: url("./fonts/atkinson-hyperlegible-v11-latin_latin-ext-700italic.woff2") - format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + format("woff2"); } + +/* Keyframes */ + @keyframes bounce { 0%, 100% { @@ -111,35 +109,37 @@ } } -cohost-wc * { +/* Cohost post content styling */ + +cohost-post * { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #ded9d3; } -cohost-wc a { +cohost-post a { color: inherit; text-decoration: inherit; } -cohost-wc hr { +cohost-post hr { height: 0; color: inherit; border-top-width: 1px; } -cohost-wc blockquote, -cohost-wc dl, -cohost-wc dd, -cohost-wc h1, -cohost-wc h2, -cohost-wc h3, -cohost-wc h4, -cohost-wc h5, -cohost-wc h6, -cohost-wc hr, -cohost-wc figure, -cohost-wc p, -cohost-wc pre { +cohost-post blockquote, +cohost-post dl, +cohost-post dd, +cohost-post h1, +cohost-post h2, +cohost-post h3, +cohost-post h4, +cohost-post h5, +cohost-post h6, +cohost-post hr, +cohost-post figure, +cohost-post p, +cohost-post pre { margin: 0; } .prose { @@ -163,7 +163,9 @@ cohost-wc pre { font-size: 1em; line-height: 1.75; } -.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { +cohost-post + .prose + :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; @@ -171,15 +173,142 @@ cohost-wc pre { margin-bottom: 0.6em; line-height: 1.6; } -.prose - :where(.prose > :last-child):not( - :where([class~="not-prose"], [class~="not-prose"] *) - ) { - margin-bottom: 0; -} -.prose +cohost-post + .prose :where(.prose > :first-child):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { margin-top: 0; } +cohost-post + .prose + :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; +} +cohost-post + .prose + :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + border-color: var(--tw-prose-hr); + border-top-width: 1px; + margin-top: 1em; + margin-bottom: 1em; +} +cohost-post + .prose + :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + text-decoration: underline; + font-weight: 500; +} +cohost-post + .prose + :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + list-style-type: disc; +} +cohost-post + .prose + :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + padding-inline-start: 0.375em; +} +cohost-post + .prose + :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + margin-top: 0.5em; + margin-bottom: 0.5em; +} +cohost-post + .prose + :where(.prose > :last-child):not( + :where([class~="not-prose"], [class~="not-prose"] *) + ) { + margin-bottom: 0; +} +cohost-post + .prose + :where(.prose > :first-child):not( + :where([class~="not-prose"], [class~="not-prose"] *) + ) { + margin-top: 0; +} +cohost-post .co-embed { + background-color: light-dark(rgb(255 241 223), rgb(25 25 25)); +} +cohost-post .co-ui-text { + color: light-dark(rgb(25 25 25), rgb(255 249 242)); +} + +/* Hide interactive UI */ +cohost-post button.co-link-button { + display: none; +} + +/* Tailwind properties */ + +cohost-post .text-right { + text-align: right; +} +cohost-post .p-3 { + padding: 0.75rem; +} +cohost-post .mt-0 { + margin-top: 0px; +} +cohost-post .my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} +cohost-post .overflow-hidden { + overflow: hidden; +} +cohost-post .break-words { + overflow-wrap: break-word; +} +cohost-post .px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +/* TODO: light */ +@media (prefers-color-scheme: dark) { + cohost-post { + --color-notWhite: 255 249 242; + --color-notBlack: 25 25 25; + --color-cherry: 131 37 79; + --color-strawberry: 229 107 111; + --color-mango: 255 171 92; + --color-longan: 255 216 168; + --color-tertiary: var(--color-longan); + --color-tertiary-200: 255 229 196; + --color-tertiary-300: 255 216 168; + --color-tertiary-400: 255 202 122; + --color-tertiary-500: 183 133 61; + --color-tertiary-600: 183 133 61; + --color-tertiary-700: 132 94 38; + --color-text: var(--color-notWhite); + --color-bg-text: var(--color-notWhite); + --color-foreground-100: 253 206 224; + --color-foreground-200: 238 173 199; + --color-foreground-300: 211 116 155; + --color-foreground-400: 174 68 115; + --color-foreground-500: 131 37 79; + --color-foreground-600: 103 26 61; + --color-foreground-700: 81 17 46; + --color-foreground-800: 59 9 32; + --color-foreground: var(--color-cherry); + --color-secondary-200: 255 208 172; + --color-secondary-300: 255 191 131; + --color-secondary-400: 255 171 92; + --color-secondary-600: 188 109 40; + --color-secondary-700: 147 74 21; + --color-secondary: var(--color-mango); + --color-accent: var(--color-mango); + --color-background: var(--color-notBlack); + --color-sidebar-bg: var(--color-notBlack); + --color-sidebar-text: var(--color-notWhite); + --color-sidebar-accent: var(--color-mango); + --color-compose-button: var(--color-foreground); + --color-compose-button-400: var(--color-foreground-400); + --color-compose-button-600: var(--color-foreground-600); + --emoji-scale: 1.25em; + } +} diff --git a/src/cohost-wc.ts b/src/cohost-wc.ts index 345e82e..6e4c414 100644 --- a/src/cohost-wc.ts +++ b/src/cohost-wc.ts @@ -1,46 +1,251 @@ import { LitElement, html, css } from "lit"; -import { customElement, property, state } from "lit/decorators.js"; +import { customElement, property } from "lit/decorators.js"; import { when } from "lit/directives/when.js"; +import { ifDefined } from "lit/directives/if-defined.js"; -@customElement("cohost-wc") -export class CohostWebComponent extends LitElement { +function formatRelativeTime(date: Date) { + const millisecondsPerSecond = 1000; + const secondsPerMinute = 60; + const minutesPerHour = 60; + const hoursPerDay = 24; + const daysPerMonth = 30; // JS date handling moment + const intervals = { + month: + millisecondsPerSecond * + secondsPerMinute * + minutesPerHour * + hoursPerDay * + daysPerMonth, + day: + millisecondsPerSecond * secondsPerMinute * minutesPerHour * hoursPerDay, + hour: millisecondsPerSecond * secondsPerMinute * minutesPerHour, + minute: millisecondsPerSecond * secondsPerMinute, + second: millisecondsPerSecond, + } as const; + const relativeDateFormat = new Intl.RelativeTimeFormat("en", { + style: "short", + }); + const diff = date.getTime() - new Date().getTime(); + for (const interval in intervals) { + const _interval = interval as keyof typeof intervals; + if (intervals[_interval] <= Math.abs(diff)) { + return relativeDateFormat.format( + Math.trunc(diff / intervals[_interval]), + _interval, + ); + } + } + return relativeDateFormat.format(diff / 1000, "second"); +} + +const COMMON_CSS = css` + :host { + color-scheme: light dark; + font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji"; + } + * { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: #ded9d3; + } + a { + color: inherit; + text-decoration: inherit; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + blockquote, + dl, + dd, + h1, + h2, + h3, + h4, + h5, + h6, + hr, + figure, + p, + pre { + margin: 0; + } + .post-anchor { + position: relative; + top: -5rem; + } + .co-avatar-container { + width: 2rem; + height: 2rem; + aspect-ratio: 1 / 1; + display: inline-block; + position: relative; + } + .mask { + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + } + .mask-squircle { + -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==); + mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==); + } + .mask-roundrect { + border-radius: 12.5%; + } + .mask-circle { + border-radius: 9999px; + } + /* .mask-egg { + -webkit-mask-image: url(/static/de7a6730ae8672a12406.svg); + mask-image: url(/static/de7a6730ae8672a12406.svg); + } + .mask-capsule-big { + -webkit-mask-image: url(/static/3e2b26f2f1e719024296.svg); + mask-image: url(/static/3e2b26f2f1e719024296.svg); + } + .mask-capsule-small { + -webkit-mask-image: url(/static/8ff201350af3c70fb5b8.svg); + mask-image: url(/static/8ff201350af3c70fb5b8.svg); + } */ + .co-avatar { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + } + .co-project-display-name { + max-width: 100%; + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 700; + color: light-dark(rgb(25 25 25), rgb(255 249 242)); + } + .co-project-display-name:hover { + text-decoration: underline; + } + .co-project-handle { + color: light-dark(rgb(74 72 71), rgb(222 217 211)); + } + .co-project-handle:hover { + text-decoration: underline; + } + .co-thread-header time, + .co-post-header time { + display: block; + flex: none; + font-size: 0.75rem; + line-height: 1rem; + font-variant-numeric: tabular-nums; + color: rgb(130 127 124); + } + .co-thread-header time a:hover, + .co-post-header time a:hover { + text-decoration: underline; + } + .co-hairline { + border-color: light-dark(rgb(191 186 181), rgb(74 72 71)); + } + .post-headline-container { + display: flex; + flex-direction: row; + width: 100%; + padding: 0.75rem; + } + .post-headline-a { + overflow-wrap: break-word; + align-self: center; + flex-grow: 1; + } + .post-headline-a:hover { + text-decoration: underline; + } + .prose { + color: light-dark(#191919, #fff9f2); + --tw-prose-body: light-dark(#374151, #fff9f2); + --tw-prose-headings: light-dark(#111827, #fff9f2); + --tw-prose-lead: light-dark(#4b5563, #fff9f2); + --tw-prose-links: light-dark(#111827, #fff9f2); + --tw-prose-bold: light-dark(#111827, #fff9f2); + --tw-prose-counters: light-dark(#6b7280, #fff9f2); + --tw-prose-bullets: light-dark(#d1d5db, #fff9f2); + --tw-prose-hr: light-dark(#e5e7eb, #bfbab5); + --tw-prose-quotes: light-dark(#111827, #fff9f2); + --tw-prose-quote-borders: light-dark(#e5e7eb, #bfbab5); + --tw-prose-captions: light-dark(#6b7280, #fff9f2); + --tw-prose-code: light-dark(#111827, #fff9f2); + --tw-prose-pre-code: light-dark(#e5e7eb, #fff9f2); + --tw-prose-pre-bg: light-dark(#1f2937, #191919); + --tw-prose-th-borders: light-dark(#d1d5db, #bfbab5); + --tw-prose-td-borders: light-dark(#e5e7eb, #bfbab5); + font-size: 1em; + line-height: 1.75; + } + .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + .prose + :where(.prose > :last-child):not( + :where([class~="not-prose"], [class~="not-prose"] *) + ) { + margin-bottom: 0; + } + .prose + :where(.prose > :first-child):not( + :where([class~="not-prose"], [class~="not-prose"] *) + ) { + margin-top: 0; + } + .post-body { + overflow: clip; + contain: paint; + overflow: hidden; + isolation: isolate; + position: relative; + } + .co-tags-container { + width: 100%; + max-width: 100%; + padding: 0.75rem; + } + .co-tags { + position: relative; + width: 100%; + overflow-y: hidden; + overflow-wrap: break-word; + line-height: 1; + color: light-dark(rgb(104 102 100), rgb(191 186 181)); + } + .co-tags a { + display: inline-block; + margin-right: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + } + .co-tags a:hover { + text-decoration: underline; + } +`; + +@customElement("cohost-post") +export class CohostPost extends LitElement { static override styles = css` - :host { - color-scheme: light dark; - font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", - "Noto Color Emoji"; - } - * { - box-sizing: border-box; - border-width: 0; - border-style: solid; - border-color: #ded9d3; - } - a { - color: inherit; - text-decoration: inherit; - } - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - blockquote, - dl, - dd, - h1, - h2, - h3, - h4, - h5, - h6, - hr, - figure, - p, - pre { - margin: 0; - } + ${COMMON_CSS} .co-post-box { width: 100%; overflow-x: auto; @@ -84,151 +289,9 @@ export class CohostWebComponent extends LitElement { min-width: 0px; display: flex; } - .co-avatar-container { - width: 2rem; - height: 2rem; - aspect-ratio: 1 / 1; - display: inline-block; - position: relative; - } - .mask { - -webkit-mask-size: contain; - mask-size: contain; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-position: center; - mask-position: center; - } - .mask-squircle { - -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==); - mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==); - } - .mask-roundrect { - border-radius: 12.5%; - } - .mask-circle { - border-radius: 9999px; - } - /* .mask-egg { - -webkit-mask-image: url(/static/de7a6730ae8672a12406.svg); - mask-image: url(/static/de7a6730ae8672a12406.svg); - } - .mask-capsule-big { - -webkit-mask-image: url(/static/3e2b26f2f1e719024296.svg); - mask-image: url(/static/3e2b26f2f1e719024296.svg); - } - .mask-capsule-small { - -webkit-mask-image: url(/static/8ff201350af3c70fb5b8.svg); - mask-image: url(/static/8ff201350af3c70fb5b8.svg); - } */ - .co-avatar { - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; - } - .co-project-display-name { - max-width: 100%; - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: 700; - color: light-dark(rgb(25 25 25), rgb(255 249 242)); - } - .co-project-display-name:hover { - text-decoration: underline; - } - .co-project-handle { - color: light-dark(rgb(74 72 71), rgb(222 217 211)); - } - .co-project-handle:hover { - text-decoration: underline; - } - .co-thread-header time { - display: block; - flex: none; - font-size: 0.75rem; - line-height: 1rem; - font-variant-numeric: tabular-nums; - color: rgb(130 127 124); - } - .co-thread-header time a:hover { - text-decoration: underline; - } - .co-hairline { - border-color: light-dark(rgb(191 186 181), rgb(74 72 71)); - } - .post-title-container { - display: flex; - flex-direction: row; - width: 100%; - padding: 0.75rem; - } - .post-title-a { - overflow-wrap: break-word; - align-self: center; - flex-grow: 1; - } - .post-title-a:hover { - text-decoration: underline; - } - .prose { - color: light-dark(#191919, #fff9f2); - --tw-prose-body: light-dark(#374151, #fff9f2); - --tw-prose-headings: light-dark(#111827, #fff9f2); - --tw-prose-lead: light-dark(#4b5563, #fff9f2); - --tw-prose-links: light-dark(#111827, #fff9f2); - --tw-prose-bold: light-dark(#111827, #fff9f2); - --tw-prose-counters: light-dark(#6b7280, #fff9f2); - --tw-prose-bullets: light-dark(#d1d5db, #fff9f2); - --tw-prose-hr: light-dark(#e5e7eb, #bfbab5); - --tw-prose-quotes: light-dark(#111827, #fff9f2); - --tw-prose-quote-borders: light-dark(#e5e7eb, #bfbab5); - --tw-prose-captions: light-dark(#6b7280, #fff9f2); - --tw-prose-code: light-dark(#111827, #fff9f2); - --tw-prose-pre-code: light-dark(#e5e7eb, #fff9f2); - --tw-prose-pre-bg: light-dark(#1f2937, #191919); - --tw-prose-th-borders: light-dark(#d1d5db, #bfbab5); - --tw-prose-td-borders: light-dark(#e5e7eb, #bfbab5); - font-size: 1em; - line-height: 1.75; - } - .prose - :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - font-size: 1.25em; - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; - } - .prose - :where(.prose > :last-child):not( - :where([class~="not-prose"], [class~="not-prose"] *) - ) { - margin-bottom: 0; - } - .prose - :where(.prose > :first-child):not( - :where([class~="not-prose"], [class~="not-prose"] *) - ) { - margin-top: 0; - } - .post-body { - overflow: clip; - contain: paint; - overflow: hidden; - isolation: isolate; - position: relative; - } - .post-body-section { - padding-left: 0.75rem; - padding-right: 0.75rem; - overflow-wrap: break-word; - overflow: hidden; - margin-top: 1rem; - margin-bottom: 1rem; + .header-share-icon { + width: 1.25rem; + height: 1.25rem; } .co-thread-footer { width: 100%; @@ -281,41 +344,50 @@ export class CohostWebComponent extends LitElement { displayName = "Display Name"; @property() - username = "username"; + handle = "handle"; @property() - iso8601Timestamp = "2022-06-28T18:03:00Z"; + publishedAt: string | undefined; @property() - permalink = "https://cohost.org/"; + permalink: string | undefined; + + @property({ type: Boolean }) + sharedItems: boolean = false; @property() - postId: string | undefined = undefined; + postId: string | undefined; @property() - postTitle: string | undefined = undefined; + singlePostHeadline: string | undefined; @property() - sharedAvatarSrc: string | undefined = undefined; + sharedAvatarSrc: string | undefined; @property() - sharedDisplayName: string | undefined = undefined; + sharedAvatarShape: string | undefined; @property() - sharedUsername: string | undefined = undefined; + sharedDisplayName: string | undefined; @property() - tags: string | undefined = undefined; + sharedHandle: string | undefined; + + @property() + tags: string | undefined; @property({ type: Number }) comments = 0; - @state() - protected _displayTimestamp = new Date( - this.iso8601Timestamp, - ).toLocaleString(); - override render() { + let displayTimestamp = undefined; + let relativeTimestamp = undefined; + if (this.publishedAt) { + let date = new Date(this.publishedAt); + displayTimestamp = date.toLocaleString(); + relativeTimestamp = formatRelativeTime(date); + } + return html`
-
- ${this.displayName} -
- @${this.username} + ${when( + this.avatarSrc, + () => html` +
+ ${this.displayName} +
+ `, + )} + ${when( + this.displayName, + () => html` + + `, + )} + ${when( + this.handle, + () => + html` @${this.handle}`, + )} + ${when( + this.publishedAt, + () => html` + + `, + )} + ${when( + this.sharedAvatarSrc || + this.sharedAvatarShape || + this.sharedDisplayName || + this.sharedHandle, + () => html` + + `, + )} + ${when( + this.sharedAvatarSrc, + () => html` +
+ ${ifDefined(this.sharedDisplayName)} +
+ `, + )} + ${when( + this.sharedDisplayName, + () => html` + ${this.sharedDisplayName} + `, + )} + ${when( + this.sharedHandle, + () => + html` @${this.sharedHandle}`, + )}
-
${when( this.postId, () => html` -
+
`, )} -
- ${when( - this.postTitle, - () => html` -
-

${this.postTitle}

 + ${when( + this.sharedItems, + () => html``, + () => html` +
+ ${when( + this.singlePostHeadline, + () => html` +
+

${this.singlePostHeadline}

 +
+ `, + )} +
+
- `, - )} -
-
- + ${when( + this.tags && this.tags.length, + () => html` +
+
+
+ ${(this.tags || "") + .split(",") + .map( + (tag) => html` + #${tag} + `, + )} +
+
+
+ `, + )}
-
-
+ `, + )}