Include "Video" and link for video tweets in RSS (#1315)

Fixes #836

src/formatters.nim

@@ -6,7 +6,7 @@ import types, utils, query
 const
   cards = "cards.twitter.com/cards"
   tco = "https://t.co"
-  twitter = parseUri("https://twitter.com")
+  twitter = parseUri("https://x.com")
 
 let
   twRegex = re"(?<=(?<!\S)https:\/\/|(?<=\s))(www\.|mobile\.)?twitter\.com"
@@ -59,25 +59,28 @@ proc replaceUrls*(body: string; prefs: Prefs; absolute=""): string =
   result = body
 
   if prefs.replaceYouTube.len > 0 and "youtu" in result:
-    result = result.replace(ytRegex, prefs.replaceYouTube)
+    let youtubeHost = strip(prefs.replaceYouTube, chars={'/'})
+    result = result.replace(ytRegex, youtubeHost)
 
   if prefs.replaceTwitter.len > 0:
+    let twitterHost = strip(prefs.replaceTwitter, chars={'/'})
     if tco in result:
-      result = result.replace(tco, https & prefs.replaceTwitter & "/t.co")
+      result = result.replace(tco, https & twitterHost & "/t.co")
     if "x.com" in result:
-      result = result.replace(xRegex, prefs.replaceTwitter)
+      result = result.replace(xRegex, twitterHost)
       result = result.replacef(xLinkRegex, a(
-        prefs.replaceTwitter & "$2", href = https & prefs.replaceTwitter & "$1"))
+        twitterHost & "$2", href = https & twitterHost & "$1"))
     if "twitter.com" in result:
-      result = result.replace(cards, prefs.replaceTwitter & "/cards")
-      result = result.replace(twRegex, prefs.replaceTwitter)
+      result = result.replace(cards, twitterHost & "/cards")
+      result = result.replace(twRegex, twitterHost)
       result = result.replacef(twLinkRegex, a(
-        prefs.replaceTwitter & "$2", href = https & prefs.replaceTwitter & "$1"))
+        twitterHost & "$2", href = https & twitterHost & "$1"))
 
   if prefs.replaceReddit.len > 0 and ("reddit.com" in result or "redd.it" in result):
-    result = result.replace(rdShortRegex, prefs.replaceReddit & "/comments/")
-    result = result.replace(rdRegex, prefs.replaceReddit)
-    if prefs.replaceReddit in result and "/gallery/" in result:
+    let redditHost = strip(prefs.replaceReddit, chars={'/'})
+    result = result.replace(rdShortRegex, redditHost & "/comments/")
+    result = result.replace(rdRegex, redditHost)
+    if redditHost in result and "/gallery/" in result:
       result = result.replace("/gallery/", "/comments/")
 
   if absolute.len > 0 and "href" in result:

src/query.nim

@@ -6,10 +6,9 @@ import types
 const
   validFilters* = @[
     "media", "images", "twimg", "videos",
-    "native_video", "consumer_video", "pro_video",
+    "native_video", "consumer_video", "spaces",
     "links", "news", "quote", "mentions",
-    "replies", "retweets", "nativeretweets",
-    "verified", "safe"
+    "replies", "retweets", "nativeretweets"
   ]
 
   emptyQuery* = "include:nativeretweets"
@@ -18,6 +17,11 @@ template `@`(param: string): untyped =
   if param in pms: pms[param]
   else: ""
 
+proc validateNumber(value: string): string =
+  if value.anyIt(not it.isDigit):
+    return ""
+  return value
+
 proc initQuery*(pms: Table[string, string]; name=""): Query =
   result = Query(
     kind: parseEnum[QueryKind](@"f", tweets),
@@ -26,7 +30,7 @@ proc initQuery*(pms: Table[string, string]; name=""): Query =
     excludes: validFilters.filterIt("e-" & it in pms),
     since: @"since",
     until: @"until",
-    near: @"near"
+    minLikes: validateNumber(@"min_faves")
   )
 
   if name.len > 0:
@@ -78,8 +82,8 @@ proc genQueryParam*(query: Query): string =
     result &= " since:" & query.since
   if query.until.len > 0:
     result &= " until:" & query.until
-  if query.near.len > 0:
-    result &= &" near:\"{query.near}\" within:15mi"
+  if query.minLikes.len > 0:
+    result &= " min_faves:" & query.minLikes
   if query.text.len > 0:
     if result.len > 0:
       result &= " " & query.text
@@ -103,8 +107,8 @@ proc genQueryUrl*(query: Query): string =
     params.add "since=" & query.since
   if query.until.len > 0:
     params.add "until=" & query.until
-  if query.near.len > 0:
-    params.add "near=" & query.near
+  if query.minLikes.len > 0:
+    params.add "min_faves=" & query.minLikes
 
   if params.len > 0:
     result &= params.join("&")

src/routes/timeline.nim

@@ -105,6 +105,12 @@ proc createTimelineRouter*(cfg: Config) =
     get "/intent/user":
       respUserId()
 
+    get "/intent/follow/?":
+      let username = request.params.getOrDefault("screen_name")
+      if username.len == 0:
+        resp Http400, showError("Missing screen_name parameter", cfg)
+      redirect("/" & username)
+
     get "/@name/?@tab?/?":
       cond '.' notin @"name"
       cond @"name" notin ["pic", "gif", "video", "search", "settings", "login", "intent", "i"]

src/routes/unsupported.nim

@@ -17,7 +17,7 @@ proc createUnsupportedRouter*(cfg: Config) =
     get "/@name/lists/?": feature()
 
     get "/intent/?@i?": 
-      cond @"i" notin ["user"]
+      cond @"i" notin ["user", "follow"]
       feature()
 
     get "/i/@i?/?@j?":

src/sass/include/_mixins.css

@@ -66,18 +66,7 @@
         }
 
         #search-panel-toggle:checked ~ .search-panel {
-            @if $rows == 6 {
-                max-height: 200px !important;
-            }
-            @if $rows == 5 {
-                max-height: 300px !important;
-            }
-            @if $rows == 4 {
-                max-height: 300px !important;
-            }
-            @if $rows == 3 {
-                max-height: 365px !important;
-            }
+            max-height: 380px !important;
         }
     }
 }

src/sass/index.scss

@@ -51,7 +51,7 @@ body {
     background-color: var(--bg_color);
     color: var(--fg_color);
     font-family: $font_0, $font_1, $font_2, $font_3;
-    font-size: 14px;
+    font-size: 15px;
     line-height: 1.3;
     margin: 0;
 }

src/sass/inputs.scss

@@ -14,6 +14,7 @@ button {
 
 input[type="text"],
 input[type="date"],
+input[type="number"],
 select {
     @include input-colors;
     background-color: var(--bg_elements);
@@ -24,7 +25,12 @@ select {
     font-size: 14px;
 }
 
-input[type="text"] {
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="text"],
+input[type="number"] {
     height: 16px;
 }
 
@@ -38,6 +44,17 @@ input[type="date"]::-webkit-inner-spin-button {
     display: none;
 }
 
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    display: none;
+    -webkit-appearance: none;
+    margin: 0;
+}
+
 input[type="date"]::-webkit-clear-button {
     margin-left: 17px;
     filter: grayscale(100%);
@@ -164,7 +181,8 @@ input::-webkit-datetime-edit-year-field:focus {
         appearance: none;
     }
 
-    input[type="text"] {
+    input[type="text"],
+    input[type="number"] {
         position: absolute;
         right: 0;
         max-width: 140px;

src/sass/search.scss

@@ -24,7 +24,8 @@
         height: 23px;
     }
 
-    input[type="text"] {
+    input[type="text"],
+    input[type="number"] {
         height: calc(100% - 4px);
         width: calc(100% - 8px);
     }
@@ -42,7 +43,7 @@
         @include input-colors;
     }
 
-    @include create-toggle(search-panel, 200px);
+    @include create-toggle(search-panel, 380px);
 }
 
 .search-panel {
@@ -104,19 +105,18 @@
 .search-toggles {
     flex-grow: 1;
     display: grid;
-    grid-template-columns: repeat(6, auto);
+    grid-template-columns: repeat(5, auto);
     grid-column-gap: 10px;
 }
 
 .profile-tabs {
     @include search-resize(820px, 5);
-    @include search-resize(725px, 4);
-    @include search-resize(600px, 6);
-    @include search-resize(560px, 5);
-    @include search-resize(480px, 4);
+    @include search-resize(715px, 4);
+    @include search-resize(700px, 5);
+    @include search-resize(485px, 4);
     @include search-resize(410px, 3);
 }
 
-@include search-resize(560px, 5);
-@include search-resize(480px, 4);
+@include search-resize(700px, 5);
+@include search-resize(485px, 4);
 @include search-resize(410px, 3);

src/types.nim

@@ -140,7 +140,7 @@ type
     fromUser*: seq[string]
     since*: string
     until*: string
-    near*: string
+    minLikes*: string
     sep*: string
 
   Gif* = object

src/views/general.nim

@@ -31,14 +31,14 @@ proc renderNavbar(cfg: Config; req: Request; rss, canonical: string): VNode =
         icon "search", title="Search", href="/search"
         if cfg.enableRss and rss.len > 0:
           icon "rss", title="RSS Feed", href=rss
-        icon "bird", title="Open in Twitter", href=canonical
+        icon "bird", title="Open in X", href=canonical
         a(href="https://liberapay.com/zedeus"): verbatim lp
         icon "info", title="About", href="/about"
         icon "cog", title="Preferences", href=("/settings?referer=" & encodeUrl(path))
 
 proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
                  video=""; images: seq[string] = @[]; banner=""; ogTitle="";
-                 rss=""; canonical=""): VNode =
+                 rss=""; alternate=""): VNode =
   var theme = prefs.theme.toTheme
   if "theme" in req.params:
     theme = req.params["theme"].toTheme
@@ -52,7 +52,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=19")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=21")
     link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=3")
 
     if theme.len > 0:
@@ -66,8 +66,8 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
     link(rel="search", type="application/opensearchdescription+xml", title=cfg.title,
                             href=opensearchUrl)
 
-    if canonical.len > 0:
-      link(rel="canonical", href=canonical)
+    if alternate.len > 0:
+      link(rel="alternate", href=alternate, title="View on X")
 
     if cfg.enableRss and rss.len > 0:
       link(rel="alternate", type="application/rss+xml", href=rss, title="RSS feed")
@@ -125,14 +125,14 @@ proc renderMain*(body: VNode; req: Request; cfg: Config; prefs=defaultPrefs;
                  titleText=""; desc=""; ogTitle=""; rss=""; video="";
                  images: seq[string] = @[]; banner=""): string =
 
-  let canonical = getTwitterLink(req.path, req.params)
+  let twitterLink = getTwitterLink(req.path, req.params)
 
   let node = buildHtml(html(lang="en")):
     renderHead(prefs, cfg, req, titleText, desc, video, images, banner, ogTitle,
-               rss, canonical)
+               rss, twitterLink)
 
     body:
-      renderNavbar(cfg, req, rss, canonical)
+      renderNavbar(cfg, req, rss, twitterLink)
 
       tdiv(class="container"):
         body

src/views/renderutils.nim

@@ -89,6 +89,13 @@ proc genDate*(pref, state: string): VNode =
     input(name=pref, `type`="date", value=state)
     icon "calendar"
 
+proc genNumberInput*(pref, label, state, placeholder: string; class=""; autofocus=true; min="0"): VNode =
+  let p = placeholder
+  buildHtml(tdiv(class=("pref-group pref-input " & class))):
+    if label.len > 0:
+      label(`for`=pref): text label
+    input(name=pref, `type`="number", placeholder=p, value=state, autofocus=(autofocus and state.len == 0), min=min, step="1")
+
 proc genImg*(url: string; class=""): VNode =
   buildHtml():
     img(src=getPicUrl(url), class=class, alt="", loading="lazy")

src/views/rss.nimf

@@ -25,7 +25,7 @@
 #end proc
 #
 #proc getDescription(desc: string; cfg: Config): string =
-Twitter feed for: ${desc}. Generated by ${cfg.hostname}
+Twitter feed for: ${desc}. Generated by ${getUrlPrefix(cfg)}
 #end proc
 #
 #proc getTweetsWithPinned(profile: Profile): seq[Tweets] =
@@ -51,16 +51,15 @@ Twitter feed for: ${desc}. Generated by ${cfg.hostname}
 #let urlPrefix = getUrlPrefix(cfg)
 #let text = replaceUrls(tweet.text, defaultPrefs, absolute=urlPrefix)
 <p>${text.replace("\n", "<br>\n")}</p>
-#if tweet.quote.isSome and get(tweet.quote).available:
-#  let quoteLink = getLink(get(tweet.quote))
-<p><a href="${urlPrefix}${quoteLink}">${cfg.hostname}${quoteLink}</a></p>
-#end if
 #if tweet.photos.len > 0:
 #  for photo in tweet.photos:
 <img src="${urlPrefix}${getPicUrl(photo)}" style="max-width:250px;" />
 #  end for
 #elif tweet.video.isSome:
-<img src="${urlPrefix}${getPicUrl(get(tweet.video).thumb)}" style="max-width:250px;" />
+<a href="${urlPrefix}${tweet.getLink}">
+<br>Video<br>
+  <img src="${urlPrefix}${getPicUrl(get(tweet.video).thumb)}" style="max-width:250px;" />
+</a>
 #elif tweet.gif.isSome:
 #  let thumb = &"{urlPrefix}{getPicUrl(get(tweet.gif).thumb)}"
 #  let url = &"{urlPrefix}{getPicUrl(get(tweet.gif).url)}"
@@ -72,6 +71,20 @@ Twitter feed for: ${desc}. Generated by ${cfg.hostname}
 <img src="${urlPrefix}${getPicUrl(card.image)}" style="max-width:250px;" />
 #  end if
 #end if
+#if tweet.quote.isSome and get(tweet.quote).available:
+#  let quoteTweet = get(tweet.quote)
+#  let quoteLink = urlPrefix & getLink(quoteTweet)
+<hr/>
+<blockquote>
+<b>${quoteTweet.user.fullname} (@${quoteTweet.user.username})</b>
+<p>
+${renderRssTweet(quoteTweet, cfg)}
+</p>
+<footer>
+— <cite><a href="${quoteLink}">${quoteLink}</a>
+</footer>
+</blockquote>
+#end if
 #end proc
 #
 #proc renderRssTweets(tweets: seq[Tweets]; cfg: Config; userId=""): string =

src/views/search.nim

@@ -10,14 +10,12 @@ const toggles = {
   "media": "Media",
   "videos": "Videos",
   "news": "News",
-  "verified": "Verified",
   "native_video": "Native videos",
   "replies": "Replies",
   "links": "Links",
   "images": "Images",
-  "safe": "Safe",
   "quote": "Quotes",
-  "pro_video": "Pro videos"
+  "spaces": "Spaces"
 }.toOrderedTable
 
 proc renderSearch*(): VNode =
@@ -53,7 +51,7 @@ proc renderSearchTabs*(query: Query): VNode =
 
 proc isPanelOpen(q: Query): bool =
   q.fromUser.len == 0 and (q.filters.len > 0 or q.excludes.len > 0 or
-  @[q.near, q.until, q.since].anyIt(it.len > 0))
+  @[q.minLikes, q.until, q.since].anyIt(it.len > 0))
 
 proc renderSearchPanel*(query: Query): VNode =
   let user = query.fromUser.join(",")
@@ -85,8 +83,8 @@ proc renderSearchPanel*(query: Query): VNode =
             span(class="search-title"): text "-"
             genDate("until", query.until)
         tdiv:
-          span(class="search-title"): text "Near"
-          genInput("near", "", query.near, "Location...", autofocus=false)
+          span(class="search-title"): text "Minimum likes"
+          genNumberInput("min_faves", "", query.minLikes, "Number...", autofocus=false)
 
 proc renderTweetSearch*(results: Timeline; prefs: Prefs; path: string;
                         pinned=none(Tweet)): VNode =

src/views/timeline.nim

@@ -56,7 +56,7 @@ proc renderThread(thread: Tweets; prefs: Prefs; path: string): VNode =
                   index=i, last=(i == thread.high), showThread=show)
 
 proc renderUser(user: User; prefs: Prefs): VNode =
-  buildHtml(tdiv(class="timeline-item")):
+  buildHtml(tdiv(class="timeline-item", data-username=user.username)):
     a(class="tweet-link", href=("/" & user.username))
     tdiv(class="tweet-body profile-result"):
       tdiv(class="tweet-header"):

src/views/tweet.nim

@@ -272,7 +272,7 @@ proc renderTweet*(tweet: Tweet; prefs: Prefs; path: string; class=""; index=0;
     divClass = "thread-last " & class
 
   if not tweet.available:
-    return buildHtml(tdiv(class=divClass & "unavailable timeline-item")):
+    return buildHtml(tdiv(class=divClass & "unavailable timeline-item", data-username=tweet.user.username)):
       tdiv(class="unavailable-box"):
         if tweet.tombstone.len > 0:
           text tweet.tombstone
@@ -294,7 +294,7 @@ proc renderTweet*(tweet: Tweet; prefs: Prefs; path: string; class=""; index=0;
     tweet = tweet.retweet.get
     retweet = fullTweet.user.fullname
 
-  buildHtml(tdiv(class=("timeline-item " & divClass))):
+  buildHtml(tdiv(class=("timeline-item " & divClass), data-username=tweet.user.username)):
     if not mainTweet:
       a(class="tweet-link", href=getLink(tweet))