Render article drafts when opened directly

assets/css/layout.css

@@ -80,6 +80,14 @@ main header {
   margin-bottom: 3rem;
 }
 
+main header .draft-label {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border: 1px solid;
+  border-radius: 5px;
+  font-weight: bold;
+}
+
 main header h1 {
   margin-bottom: 1.6rem;
 }
@@ -105,7 +113,11 @@ main .article-list .item {
 }
 
 main .article-list .item h3 {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+main .article-list p {
+  margin-top: 0.5rem;
 }
 
 main article footer {

assets/css/themes/default-light.css

@@ -34,6 +34,11 @@ dl dt {
   color: #888;
 }
 
+main header .draft-label {
+  color: #770202;
+  border-color: #770202;
+}
+
 main header .meta .date {
   color: #888;
 }

html.ts

@@ -40,10 +40,16 @@ export function errorPageHtml(statusCode: number, title: string): string {
 
 export function articleHtml(article: Article, profile: Profile): string {
   const publishedAtFormatted = localizeDate(article.publishedAt);
+  const pageTitle = article.isDraft ? `Draft: ${article.title}` : article.title;
+  let draftLabel = ``;
+  if (article.isDraft) {
+    draftLabel = `<p class="draft-label">Draft version</p>`;
+  }
 
   const body = `
     <main>
       <header>
+        ${draftLabel}
         <h1>${article.title}</h1>
         <div class="meta">
           <img class="avatar" src="${profile.picture}" alt="User Avatar" />
@@ -62,7 +68,7 @@ export function articleHtml(article: Article, profile: Profile): string {
     </main>
   `;
 
-  return htmlLayout(article.title, body, profile);
+  return htmlLayout(pageTitle, body, profile);
 }
 
 function articleListItemHtml(article: Article): string {
@@ -78,9 +84,10 @@ function articleListItemHtml(article: Article): string {
 
 export function articleListHtml(articles: Article[]): string {
   if (articles.length === 0) return "";
+  const sortedArticles = articles.sort((a, b) => b.publishedAt - a.publishedAt);
   let html = "";
 
-  for (const article of articles) {
+  for (const article of sortedArticles) {
     html += articleListItemHtml(article);
   }
 

nostr.ts

@@ -17,15 +17,26 @@ export async function fetchReplaceableEvent(
   pubkey: string,
   identifier: string,
 ) {
-  const events = await relay.query([{
+  let events = await relay.query([{
     authors: [pubkey],
     kinds: [30023],
     "#d": [identifier],
     limit: 1,
   }]);
 
+  if (events.length > 0) {
+    return events[0];
+  } else {
+    events = await relay.query([{
+      authors: [pubkey],
+      kinds: [30024],
+      "#d": [identifier],
+      limit: 1,
+    }]);
+
     return events.length > 0 ? events[0] : null;
   }
+}
 
 export async function fetchArticlesByAuthor(pubkey: string) {
   const events = await relay.query([{