Add long-form article editor (NIP-23)

- ArticleEditor with title, markdown body, summary, cover image, tags
- write/preview toggle with markdown rendering via marked
- Auto-save draft to localStorage
- Publish as kind 30023 with NIP-23 tags (d, title, published_at, etc.)
- 'write article' button in sidebar when logged in
- Article preview prose styles in CSS

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jure
2026-03-08 19:04:43 +01:00
parent 366731f9d7
commit bf1d68bb93
9 changed files with 291 additions and 3 deletions

View File

@@ -38,6 +38,34 @@ body {
overflow: hidden;
}
/* Allow text selection in article editor */
.article-editor textarea,
.article-editor input {
-webkit-user-select: text;
user-select: text;
}
/* Article preview prose styles */
.article-preview {
-webkit-user-select: text;
user-select: text;
}
.article-preview h1 { font-size: 1.6em; font-weight: bold; margin: 1.2em 0 0.5em; }
.article-preview h2 { font-size: 1.3em; font-weight: bold; margin: 1.2em 0 0.5em; }
.article-preview h3 { font-size: 1.1em; font-weight: bold; margin: 1em 0 0.4em; }
.article-preview p { margin: 0.8em 0; line-height: 1.75; }
.article-preview ul { list-style: disc; padding-left: 1.5em; margin: 0.8em 0; }
.article-preview ol { list-style: decimal; padding-left: 1.5em; margin: 0.8em 0; }
.article-preview li { margin: 0.3em 0; line-height: 1.7; }
.article-preview blockquote { border-left: 3px solid var(--color-accent); padding-left: 1em; color: var(--color-text-muted); margin: 1em 0; }
.article-preview code { font-family: var(--font-mono); background: var(--color-bg-raised); padding: 0.1em 0.4em; font-size: 0.9em; border-radius: 2px; }
.article-preview pre { background: var(--color-bg-raised); border: 1px solid var(--color-border); padding: 1em; overflow-x: auto; margin: 1em 0; }
.article-preview pre code { background: none; padding: 0; }
.article-preview a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.article-preview hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5em 0; }
.article-preview strong { color: var(--color-text); font-weight: 600; }
.article-preview img { max-width: 100%; border-radius: 2px; margin: 0.5em 0; }
/* Scrollbar — thin, minimal */
::-webkit-scrollbar {
width: 6px;