Add Twitter Article rendering

Fixes #646

src/views/article.nim

@@ -0,0 +1,246 @@
+# SPDX-License-Identifier: AGPL-3.0-only
+import strutils, strformat, tables, unicode, bitops, uri
+import karax/[karaxdsl, vdom]
+
+import renderutils, tweet, timeline
+import ".."/[types, utils, formatters]
+
+proc renderAtomicParagraph(paragraph: ArticleParagraph; article: Article;
+                           tweets: Table[int64, Tweet]; path: string;
+                           prefs: Prefs): VNode =
+  if paragraph.entityRanges.len == 0:
+    return text ""
+
+  let er = paragraph.entityRanges[0]
+  if er.key notin article.entities:
+    return text ""
+
+  let entity = article.entities[er.key]
+
+  case entity.kind
+  of "MEDIA":
+    buildHtml(tdiv(class="article-media")):
+      for id in entity.mediaIds:
+        let media = article.media.getOrDefault(id)
+        if media.url.len == 0:
+          continue
+        case media.kind
+        of "ApiGif":
+          video(src=getVidUrl(media.url), controls="", autoplay="", loop="",
+                muted="")
+        of "ApiVideo":
+          video(src=getVidUrl(media.url), controls="")
+        else:
+          a(href=getOrigPicUrl(media.url), target="_blank"):
+            img(src=getSmallPic(media.url), alt="", loading="lazy")
+  of "TWEET":
+    let tweet = tweets.getOrDefault(
+      try: parseBiggestInt(entity.tweetId)
+      except ValueError: 0, nil)
+    if tweet != nil:
+      renderTweet(tweet, prefs, path)
+    else:
+      text ""
+  of "MARKDOWN":
+    var content = entity.markdown
+    if content.startsWith("```"):
+      let firstNl = content.find('\n')
+      if firstNl >= 0: content = content[firstNl + 1 .. ^1]
+      if content.endsWith("```"): content = content[0 .. ^4]
+      content = content.strip
+    buildHtml(pre()):
+      code(): text content
+  of "DIVIDER":
+    buildHtml(hr(class="article-divider"))
+  else:
+    text ""
+
+proc wrapStyle(node: VNode; style: int): VNode =
+  result = node
+  if style.testBit(4): result = buildHtml(code()): result
+  if style.testBit(0): result = buildHtml(strong()): result
+  if style.testBit(1): result = buildHtml(em()): result
+  if style.testBit(2): result = buildHtml(del()): result
+  if style.testBit(3): result = buildHtml(underlined()): result
+
+proc addContent(target: VNode; content: string; style = 0) =
+  var first = true
+  for line in content.split('\n'):
+    if not first:
+      target.add VNode(kind: VNodeKind.br)
+    first = false
+    var pos = 0
+    while pos < line.len:
+      let atPos = line.find('@', pos)
+      if atPos == -1:
+        target.add wrapStyle(text line[pos .. ^1], style)
+        break
+      if atPos > 0 and line[atPos - 1] in Letters + Digits + {'_'}:
+        target.add wrapStyle(text line[pos .. atPos], style)
+        pos = atPos + 1
+        continue
+      var j = atPos + 1
+      while j < line.len and j - atPos - 1 < 15 and
+            line[j] in Letters + Digits + {'_'}:
+        inc j
+      if j == atPos + 1:
+        target.add wrapStyle(text line[pos .. atPos], style)
+        pos = atPos + 1
+        continue
+      if atPos > pos:
+        target.add wrapStyle(text line[pos ..< atPos], style)
+      let username = line[atPos + 1 ..< j]
+      let link = a.newVNode()
+      link.setAttr("href", "/" & username)
+      link.add wrapStyle(text ("@" & username), style)
+      target.add link
+      pos = j
+
+proc applyInlineStyles(target: VNode; runes: seq[Rune]; start, length: int;
+                       styles: seq[ArticleStyle]) =
+  if styles.len == 0:
+    target.addContent($runes[start ..< start + length])
+    return
+
+  var
+    lastStyle = 0
+    lastStart = start
+  let endPos = start + length
+
+  for i in start ..< endPos:
+    var style = 0
+    for sr in styles:
+      let
+        sStart = sr.offset
+        sEnd = sStart + sr.length
+      if sStart <= i and sEnd > i:
+        case sr.style
+        of "Bold": style.setBit(0)
+        of "Italic": style.setBit(1)
+        of "Strikethrough": style.setBit(2)
+        of "Underline": style.setBit(3)
+        of "Code": style.setBit(4)
+        else: discard
+
+    if style != lastStyle:
+      if i > lastStart:
+        addContent(target, $runes[lastStart ..< i], lastStyle)
+      lastStyle = style
+      lastStart = i
+
+  if lastStart < endPos:
+    addContent(target, $runes[lastStart ..< endPos], lastStyle)
+
+proc renderTextParagraph(paragraph: ArticleParagraph; article: Article): VNode =
+  let text = paragraph.text
+
+  result = case paragraph.kind
+    of "header-one": h1.newVNode()
+    of "header-two": h2.newVNode()
+    of "header-three": h3.newVNode()
+    of "ordered-list-item", "unordered-list-item": li.newVNode()
+    of "blockquote": VNode(kind: VNodeKind.blockquote)
+    of "code-block":
+      let pre = pre.newVNode()
+      let code = code.newVNode()
+      code.add text text
+      pre.add code
+      return pre
+    else: p.newVNode()
+
+  let
+    runes = text.toRunes
+    textLen = runes.len
+  var last = 0
+  for er in paragraph.entityRanges:
+    if er.offset > last:
+      applyInlineStyles(result, runes, last, er.offset - last,
+                        paragraph.inlineStyles)
+
+    last = er.offset + er.length
+
+    var target = result
+    if er.key in article.entities:
+      let entity = article.entities[er.key]
+      if entity.kind == "LINK":
+        let parsed = parseUri(entity.url)
+        if parsed.scheme in ["http", "https"]:
+          target = a.newVNode()
+          if parsed.isTwitterUrl:
+            target.setAttr("href", parsed.path)
+          else:
+            target.setAttr("href", entity.url)
+
+    applyInlineStyles(target, runes, er.offset, er.length,
+                      paragraph.inlineStyles)
+    if target != result:
+      result.add target
+
+  if last < textLen:
+    applyInlineStyles(result, runes, last, textLen - last,
+                      paragraph.inlineStyles)
+
+  if paragraph.kind == "blockquote" and result.len > 0:
+    let lastChild = result[result.len - 1]
+    if lastChild.kind == VNodeKind.strong and lastChild.len > 0 and
+       lastChild[0].kind == VNodeKind.text:
+      lastChild.setAttr("class", "blockquote-attribution")
+
+proc renderArticle*(article: Article; tweets: Table[int64, Tweet];
+                    path: string; prefs: Prefs; tweetId=""): VNode =
+  let author = article.user
+
+  let main = buildHtml(article(class="article-body")):
+    h1(class="article-title"): text article.title
+
+    tdiv(class="article-author"):
+      tdiv(class="article-author-row"):
+        a(class="article-avatar", href=("/" & author.username)):
+          genImg(author.getUserPic("_bigger"), class=prefs.getAvatarClass)
+        tdiv(class="article-author-info"):
+          tdiv(class="article-author-name"):
+            linkUser(author, class="fullname")
+            verifiedIcon(author)
+          tdiv(class="article-author-meta"):
+            linkUser(author, class="username")
+            span(class="article-date-sep"): text " · "
+            a(class="article-date",
+              href=("/" & author.username & "/status/" & tweetId)):
+              text article.time.getShortTime
+      if not prefs.hideTweetStats:
+        renderStats(article.stats)
+
+  var listKind = ""
+  var list: VNode = nil
+
+  for paragraph in article.paragraphs:
+    let isListItem = paragraph.kind in [
+      "ordered-list-item", "unordered-list-item"]
+
+    if not isListItem and list != nil:
+      main.add list
+      list = nil
+      listKind = ""
+
+    if paragraph.kind == "atomic":
+      main.add renderAtomicParagraph(paragraph, article, tweets, path, prefs)
+    elif isListItem:
+      if paragraph.kind != listKind:
+        if list != nil:
+          main.add list
+        list = if paragraph.kind == "ordered-list-item": ol.newVNode()
+               else: ul.newVNode()
+        listKind = paragraph.kind
+      list.add renderTextParagraph(paragraph, article)
+    else:
+      main.add renderTextParagraph(paragraph, article)
+
+  if list != nil:
+    main.add list
+
+  buildHtml(tdiv(class="article-page")):
+    if article.coverImage.len > 0:
+      a(href=getOrigPicUrl(article.coverImage), target="_blank"):
+        img(class="article-cover", src=getSmallPic(article.coverImage), alt="")
+    main
+    renderToTop()

src/views/general.nim

@@ -50,7 +50,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
   let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
 
   buildHtml(head):
-    link(rel="stylesheet", type="text/css", href="/css/style.css?v=35")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=38")
     link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=5")
 
     if theme.len > 0:
@@ -122,9 +122,12 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
 
 proc renderMain*(body: VNode; req: Request; cfg: Config; prefs=defaultPrefs;
                  titleText=""; desc=""; ogTitle=""; rss=""; video="";
-                 images: seq[string] = @[]; banner=""): string =
+                 images: seq[string] = @[]; banner="";
+                 twitterLink=""): string =
 
-  let twitterLink = getTwitterLink(req.path, req.params)
+  let twitterLink =
+    if twitterLink.len > 0: twitterLink
+    else: getTwitterLink(req.path, req.params)
 
   let node = buildHtml(html(lang="en")):
     renderHead(prefs, cfg, req, titleText, desc, video, images, banner, ogTitle,

src/views/tweet.nim

@@ -9,9 +9,24 @@ import general
 
 const doctype = "<!DOCTYPE html>\n"
 
-proc renderMiniAvatar(user: User; prefs: Prefs): VNode =
+proc renderMiniAvatar*(user: User; prefs: Prefs): VNode =
   genImg(user.getUserPic("_mini"), class=(prefs.getAvatarClass & " mini"))
 
+proc renderArticleCard(preview: ArticlePreview; prefs: Prefs): VNode =
+  let url = "/i/article/" & $preview.tweetId
+  buildHtml(tdiv(class="article-card card large")):
+    a(class="card-container", href=url):
+      if preview.coverImage.len > 0:
+        tdiv(class="card-image-container"):
+          tdiv(class="card-image"):
+            genImg(preview.coverImage)
+          span(class="article-card-badge"): text "Article"
+      tdiv(class="card-content-container"):
+        tdiv(class="card-content"):
+          h2(class="card-title"): text preview.title
+          if preview.previewText.len > 0:
+            p(class="card-description"): text preview.previewText
+
 proc renderHeader(tweet: Tweet; retweet: string; pinned: bool; prefs: Prefs): VNode =
   buildHtml(tdiv):
     if pinned:
@@ -225,7 +240,7 @@ func formatStat(stat: int): string =
   if stat > 0: insertSep($stat, ',')
   else: ""
 
-proc renderStats(stats: TweetStats): VNode =
+proc renderStats*(stats: TweetStats): VNode =
   buildHtml(tdiv(class="tweet-stats")):
     span(class="tweet-stat"): icon "comment", formatStat(stats.replies)
     span(class="tweet-stat"): icon "retweet", formatStat(stats.retweets)
@@ -308,6 +323,9 @@ proc renderQuote(quote: Tweet; prefs: Prefs; path: string): VNode =
     if quote.media.len > 0:
       renderQuoteMedia(quote, prefs, path)
 
+    if quote.articlePreview.isSome:
+      renderArticleCard(quote.articlePreview.get(), prefs)
+
     if quote.note.len > 0 and not prefs.hideCommunityNotes:
       renderCommunityNote(quote.note, prefs)
 
@@ -392,6 +410,9 @@ proc renderTweet*(tweet: Tweet; prefs: Prefs; path: string; class=""; index=0;
       if tweet.card.isSome and tweet.card.get().kind != hidden:
         renderCard(tweet.card.get(), prefs, path)
 
+      if tweet.articlePreview.isSome:
+        renderArticleCard(tweet.articlePreview.get(), prefs)
+
       if tweet.media.len > 0:
         renderMedia(tweet.media, prefs, path, bigThumb)