add shared items, relative dates, tags; CSS fixes

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-post blockquote,
-cohost-wc dl,
+cohost-post dl,
-cohost-wc dd,
+cohost-post dd,
-cohost-wc h1,
+cohost-post h1,
-cohost-wc h2,
+cohost-post h2,
-cohost-wc h3,
+cohost-post h3,
-cohost-wc h4,
+cohost-post h4,
-cohost-wc h5,
+cohost-post h5,
-cohost-wc h6,
+cohost-post h6,
-cohost-wc hr,
+cohost-post hr,
-cohost-wc figure,
+cohost-post figure,
-cohost-wc p,
+cohost-post p,
-cohost-wc pre {
+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
+cohost-post
-  :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;
 }
+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;
+  }
+}

src/cohost-wc.ts

@@ -1,10 +1,44 @@
 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")
+function formatRelativeTime(date: Date) {
-export class CohostWebComponent extends LitElement {
+  const millisecondsPerSecond = 1000;
-  static override styles = css`
+  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,
@@ -41,48 +75,9 @@ export class CohostWebComponent extends LitElement {
   pre {
     margin: 0;
   }
-    .co-post-box {
+  .post-anchor {
-      width: 100%;
+    position: relative;
-      overflow-x: auto;
+    top: -5rem;
-      border-radius: 0.5rem;
-      background-color: light-dark(white, black);
-      box-shadow:
-        0px 4px 5px #00000024,
-        0px 1px 10px #0000001f,
-        0px 2px 4px #0003;
-    }
-    @media (min-width: 1024px) {
-      .co-post-box {
-        max-width: 65ch;
-      }
-    }
-    @media (prefers-color-scheme: dark) {
-      .co-post-box {
-        border-width: 1px;
-        border-color: rgb(74 72 71);
-      }
-    }
-    .co-thread-header {
-      display: flex;
-      width: 100%;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      gap: 0.5rem;
-      border-top-left-radius: 0.5rem;
-      border-top-right-radius: 0.5rem;
-      padding: 0.75rem;
-      background-color: light-dark(rgb(255 249 242), rgb(25 25 25));
-    }
-    .co-thread-header-1 {
-      line-height: 1;
-      gap: 0.5rem;
-      align-items: center;
-      flex-wrap: wrap;
-      flex-direction: row;
-      flex: 1 1 0%;
-      min-width: 0px;
-      display: flex;
   }
   .co-avatar-container {
     width: 2rem;
@@ -145,7 +140,8 @@ export class CohostWebComponent extends LitElement {
   .co-project-handle:hover {
     text-decoration: underline;
   }
-    .co-thread-header time {
+  .co-thread-header time,
+  .co-post-header time {
     display: block;
     flex: none;
     font-size: 0.75rem;
@@ -153,24 +149,25 @@ export class CohostWebComponent extends LitElement {
     font-variant-numeric: tabular-nums;
     color: rgb(130 127 124);
   }
-    .co-thread-header time a:hover {
+  .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-title-container {
+  .post-headline-container {
     display: flex;
     flex-direction: row;
     width: 100%;
     padding: 0.75rem;
   }
-    .post-title-a {
+  .post-headline-a {
     overflow-wrap: break-word;
     align-self: center;
     flex-grow: 1;
   }
-    .post-title-a:hover {
+  .post-headline-a:hover {
     text-decoration: underline;
   }
   .prose {
@@ -194,8 +191,7 @@ export class CohostWebComponent extends LitElement {
     font-size: 1em;
     line-height: 1.75;
   }
-    .prose
+  .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-      :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--tw-prose-headings);
     font-weight: 600;
     font-size: 1.25em;
@@ -222,13 +218,80 @@ export class CohostWebComponent extends LitElement {
     isolation: isolate;
     position: relative;
   }
-    .post-body-section {
+  .co-tags-container {
-      padding-left: 0.75rem;
+    width: 100%;
-      padding-right: 0.75rem;
+    max-width: 100%;
+    padding: 0.75rem;
+  }
+  .co-tags {
+    position: relative;
+    width: 100%;
+    overflow-y: hidden;
     overflow-wrap: break-word;
-      overflow: hidden;
+    line-height: 1;
-      margin-top: 1rem;
+    color: light-dark(rgb(104 102 100), rgb(191 186 181));
-      margin-bottom: 1rem;
+  }
+  .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`
+    ${COMMON_CSS}
+    .co-post-box {
+      width: 100%;
+      overflow-x: auto;
+      border-radius: 0.5rem;
+      background-color: light-dark(white, black);
+      box-shadow:
+        0px 4px 5px #00000024,
+        0px 1px 10px #0000001f,
+        0px 2px 4px #0003;
+    }
+    @media (min-width: 1024px) {
+      .co-post-box {
+        max-width: 65ch;
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      .co-post-box {
+        border-width: 1px;
+        border-color: rgb(74 72 71);
+      }
+    }
+    .co-thread-header {
+      display: flex;
+      width: 100%;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
+      padding: 0.75rem;
+      background-color: light-dark(rgb(255 249 242), rgb(25 25 25));
+    }
+    .co-thread-header-1 {
+      line-height: 1;
+      gap: 0.5rem;
+      align-items: center;
+      flex-wrap: wrap;
+      flex-direction: row;
+      flex: 1 1 0%;
+      min-width: 0px;
+      display: flex;
+    }
+    .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`
       <article
         data-theme="both"
@@ -324,6 +396,9 @@ export class CohostWebComponent extends LitElement {
       >
         <header class="co-thread-header">
           <div class="co-thread-header-1">
+            ${when(
+              this.avatarSrc,
+              () => html`
                 <div class="co-avatar-container mask">
                   <img
                     src="${this.avatarSrc}"
@@ -331,91 +406,176 @@ export class CohostWebComponent extends LitElement {
                     alt="${this.displayName}"
                   />
                 </div>
+              `,
+            )}
+            ${when(
+              this.displayName,
+              () => html`
                 <a
                   rel="author"
-              href="https://cohost.org/${this.username}"
+                  href="https://cohost.org/${this.handle}"
                   class="co-project-display-name"
                   title="${this.displayName}"
                   data-url-popovers=""
                   style="user-select: none;"
                   data-longpress-event="true"
                   >${this.displayName}</a
-            ><a
+                >
-              href="https://cohost.org/${this.username}"
+              `,
+            )}
+            ${when(
+              this.handle,
+              () =>
+                html` <a
+                  href="https://cohost.org/${this.handle}"
                   class="co-project-handle"
                   data-url-popovers=""
                   style="user-select: none;"
                   data-longpress-event="true"
-              >@${this.username}</a
+                  >@${this.handle}</a
-            ><time
+                >`,
-              datetime="${this.iso8601Timestamp}"
+            )}
-              class="block flex-none text-xs tabular-nums text-gray-500"
+            ${when(
-              title="${this._displayTimestamp}"
+              this.publishedAt,
-              ><a href="${this.permalink}" class="hover:underline"
+              () => html`
-                >${this._displayTimestamp}</a
+                <time
+                  datetime="${ifDefined(this.publishedAt)}"
+                  title="${ifDefined(displayTimestamp)}"
+                  ><a
+                    href="${ifDefined(this.permalink)}"
+                    class="hover:underline"
+                    >${relativeTimestamp}</a
                   ></time
                 >
-          </div>
+              `,
-          <!--<button
+            )}
-            id="headlessui-menu-button"
+            ${when(
-            type="button"
+              this.sharedAvatarSrc ||
-            aria-haspopup="menu"
+                this.sharedAvatarShape ||
-            aria-expanded="false"
+                this.sharedDisplayName ||
-            data-headlessui-state=""
+                this.sharedHandle,
-          >
+              () => html`
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-              fill="none"
                   viewBox="0 0 24 24"
-              stroke-width="1.5"
+                  fill="currentColor"
-              stroke="currentColor"
                   aria-hidden="true"
-              class="co-action-button h-6 w-6 transition-transform ui-open:rotate-90"
+                  class="co-project-display-name header-share-icon"
                 >
                   <path
-                stroke-linecap="round"
+                    fill-rule="evenodd"
-                stroke-linejoin="round"
+                    d="M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z"
-                d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+                    clip-rule="evenodd"
                   ></path>
                 </svg>
-          </button>-->
+              `,
+            )}
+            ${when(
+              this.sharedAvatarSrc,
+              () => html`
+                <div class="co-avatar-container mask">
+                  <img
+                    src="${ifDefined(this.sharedAvatarSrc)}"
+                    class="co-avatar mask mask-${this.sharedAvatarShape}"
+                    alt="${ifDefined(this.sharedDisplayName)}"
+                  />
+                </div>
+              `,
+            )}
+            ${when(
+              this.sharedDisplayName,
+              () => html`
+                <a
+                  href="https://cohost.org/${this.sharedHandle}"
+                  class="co-project-display-name"
+                  title="${ifDefined(this.sharedDisplayName)}"
+                  data-url-popovers=""
+                  style="user-select: none;"
+                  data-longpress-event="true"
+                  >${this.sharedDisplayName}</a
+                >
+              `,
+            )}
+            ${when(
+              this.sharedHandle,
+              () =>
+                html` <a
+                  href="https://cohost.org/${this.sharedHandle}"
+                  class="co-project-handle"
+                  data-url-popovers=""
+                  style="user-select: none;"
+                  data-longpress-event="true"
+                  >@${this.sharedHandle}</a
+                >`,
+            )}
+          </div>
         </header>
         <hr class="co-hairline" />
         <div>
           ${when(
             this.postId,
             () => html`
-              <div id="post-${this.postId}" class="relative -top-20"></div>
+              <div id="post-${this.postId}" class="post-anchor"></div>
             `,
           )}
+          ${when(
+            this.sharedItems,
+            () => html`<slot></slot>`,
+            () => html`
               <div class="post-body-container">
                 ${when(
-              this.postTitle,
+                  this.singlePostHeadline,
                   () => html`
-                <div class="post-title-container flex w-full flex-row p-3">
+                    <div
-                  <a href="${this.permalink}" class="post-title-a prose"
+                      class="post-headline-container flex w-full flex-row p-3"
-                    ><h3>${this.postTitle}</h3></a
+                    >
+                      <a
+                        href="${ifDefined(this.permalink)}"
+                        class="post-headline-a prose"
+                        ><h3>${this.singlePostHeadline}</h3></a
                       >
                     </div>
                   `,
                 )}
                 <div
-              class="post-body relative overflow-hidden supports-[overflow:clip]:overflow-clip isolate co-contain-paint"
+                  class="post-body"
                   data-post-body="true"
                   data-testid="post-body"
                 >
-              <div class="post-body-section prose">
                   <slot></slot>
                 </div>
+                ${when(
+                  this.tags && this.tags.length,
+                  () => html`
+                    <div class="co-tags-container">
+                      <div
+                        class="co-tags relative w-full overflow-y-hidden break-words leading-none "
+                      >
+                        <div>
+                          ${(this.tags || "")
+                            .split(",")
+                            .map(
+                              (tag) => html`
+                                <a href="https://cohost.org/tagged/${tag}"
+                                  >#${tag}</a
+                                >
+                              `,
+                            )}
                         </div>
                       </div>
                     </div>
+                  `,
+                )}
+              </div>
+            `,
+          )}
+        </div>
         <hr class="co-hairline" />
         <footer class="co-thread-footer">
           <div class="co-thread-footer-1">
             <div class="comments">
               <a
-                href="${this.permalink}#comments"
+                href="${ifDefined(this.permalink)}#comments"
                 class="text-sm hover:underline"
                 >${this.comments} comment${this.comments == 1 ? "" : "s"}</a
               >
@@ -458,8 +618,136 @@ export class CohostWebComponent extends LitElement {
   }
 }
 
+@customElement("cohost-shared-item")
+export class CohostSharedItem extends LitElement {
+  static override styles = css`
+    ${COMMON_CSS}
+
+    .co-post-header {
+      display: flex;
+      flex-direction: flex-row;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      background-color: light-dark(rgb(255 249 242), rgb(25 25 25));
+    }
+  `;
+
+  @property()
+  avatarSrc =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACuUlEQVRYR9WXPYwpURTHz3QbDdFJdqOxEWJXT7EVsgoRCRK6jSgUZCVb2ZJ2V7ONoBIfpVLUVBoiohAKQie7jejue+e+3HljPnzMWzbvVmbm3vv/nf85Z8bler0e0ev1cHV1BZcc2+0W1us1cNPplOAPk8kEWq32IgxfX18wmUwAA+eWyyXRaDT0xiUgmDhqbTabPwAGgwGED87lhFhjtVr9BUDvzwkht7cE4FwQSoHJAnw3xD5XFQG+C+JQSvcC/CvEIXHc/yCAWohjxI8GOBXiWPGTAI6FOEX8ZIBDEKeKqwJQglAjrhpADIHXar8jR3WB0ueRRY3P1X7E/l8AYc4vngK5grtYEe4TUgOxUwODwQDsdjtfc/1+H+7v7/lrOYHFYgE3Nzf8nM/PT74jdDodf79UKsHT05OkninA29sbeX5+Bo7jYD6fw/X1NbTbbXC73UAIoYuUorPZbFCtVilouVyGVqsFhUIBgsEgJBIJ8Pv9wCDFAfHvgVQqRfL5vIQOgXCR0WhU7HPcHIFxoIORSASGw6EEOBwOg8fjkbhAHajX6wQniAcCjEYjsFqt0Ol0wOFw0ClCp4RrXl9f6WU2m5W4Fo/HIRaLgcvl2pFRfA9gCpLJJFQqFcB/zGgpRoYiDw8POxsJ64ClkKlg6rrdLni9Xj69QgIKYDabyXg85u+zDWu1Gjw+PtKzAgIVi0U6p9FoSNxiKcAiFkNYLBYIhUKQTqcl5w4K8HsxYYuY+MfHB0Sj0Z0FrCaEnSEmwaJ8f3/nHcJrLMSXlxfZOpIAoIicOLMeuwVToTSEAFhXt7e3sjXBzh0UwOfzkWazCYFAAO7u7iRWYXXncjlqPaYC3cKeZm7JtS5rSXG6FA8ms9kMnE6nJDDscWwtYV4xMlbR4pcXm4dOikcmk6FuSI5mP344/enj+S+rBamTP+UGdwAAAABJRU5ErkJggg==";
+
+  @property()
+  avatarShape = "squircle";
+
+  @property()
+  displayName = "Display Name";
+
+  @property()
+  handle = "handle";
+
+  @property()
+  publishedAt: string | undefined;
+
+  @property()
+  permalink: string | undefined;
+
+  @property({ type: Boolean })
+  sharedItems: boolean = false;
+
+  @property()
+  postId: string | undefined;
+
+  @property()
+  headline: string | undefined;
+
+  @property()
+  tags: string | undefined;
+
+  @property({ type: Number })
+  comments = 0;
+
+  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`
+      ${when(
+        this.postId,
+        () => html` <div id="post-${this.postId}" class="post-anchor"></div> `,
+      )}
+      <div class="co-post-header">
+        <div class="co-avatar-container mask">
+          <img
+            src="${this.avatarSrc}"
+            class="co-avatar mask mask-${this.avatarShape}"
+            alt="${this.displayName}"
+          />
+        </div>
+        <a
+          rel="author"
+          href="https://cohost.org/${this.handle}"
+          class="co-project-display-name"
+          title="${this.displayName}"
+          data-url-popovers=""
+          style="user-select: none;"
+          data-longpress-event="true"
+          >${this.displayName}</a
+        ><a
+          rel="author"
+          href="https://cohost.org/${this.handle}"
+          class="co-project-handle"
+          data-url-popovers=""
+          style="user-select: none;"
+          data-longpress-event="true"
+          >@${this.handle}</a
+        >${when(
+          this.publishedAt,
+          () =>
+            html`<time
+              datetime="${ifDefined(this.publishedAt)}"
+              title="${ifDefined(displayTimestamp)}"
+              ><a href="${ifDefined(this.permalink)}"
+                >${relativeTimestamp}</a
+              ></time
+            >`,
+        )}
+      </div>
+      <div class="post-body-container">
+        ${when(
+          this.headline,
+          () => html`
+            <div class="post-headline-container flex w-full flex-row p-3">
+              <a
+                href="${ifDefined(this.permalink)}"
+                class="post-headline-a prose"
+                ><h3>${this.headline}</h3></a
+              >
+            </div>
+          `,
+        )}
+        <div class="post-body" data-post-body="true" data-testid="post-body">
+          <div class="post-body-section">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <hr class="co-hairline" />
+    `;
+  }
+}
+
 declare global {
   interface HTMLElementTagNameMap {
-    "cohost-wc": CohostWebComponent;
+    "cohost-post": CohostPost;
   }
 }