Treat email and news posts as distinct types on the frontend and backend

Lays ground work for different types of views, i.e. email, news, docs, etc.

server/src/bin/server.rs

@@ -164,7 +164,7 @@ async fn original(
 
 #[rocket::get("/")]
 fn graphiql() -> content::RawHtml<String> {
-    content::RawHtml(GraphiQLSource::build().endpoint("/graphql").finish())
+    content::RawHtml(GraphiQLSource::build().endpoint("/api/graphql").finish())
 }
 
 #[rocket::get("/graphql?<query..>")]

server/src/graphql.rs

@@ -32,8 +32,25 @@ pub struct ThreadSummary {
     pub tags: Vec<String>,
 }
 
+#[derive(Debug, Union)]
+pub enum Thread {
+    Email(EmailThread),
+    News(NewsPost),
+}
+
 #[derive(Debug, SimpleObject)]
-pub struct Thread {
+pub struct NewsPost {
+    pub thread_id: String,
+    pub slug: String,
+    pub site: String,
+    pub title: String,
+    pub body: String,
+    pub url: String,
+    pub timestamp: i64,
+}
+
+#[derive(Debug, SimpleObject)]
+pub struct EmailThread {
     pub thread_id: String,
     pub subject: String,
     pub messages: Vec<Message>,

server/src/newsreader.rs

@@ -14,7 +14,7 @@ const THREAD_PREFIX: &'static str = "news:";
 use crate::{
     compute_offset_limit,
     error::ServerError,
-    graphql::{Body, Email, Html, Message, Tag, Thread, ThreadSummary},
+    graphql::{Body, Email, Html, Message, NewsPost, Tag, Thread, ThreadSummary},
     AddOutlink, EscapeHtml, InlineStyle, SanitizeHtml, SlurpContents, StripHtml, Transformer,
 };
 
@@ -144,32 +144,18 @@ pub async fn tags(pool: &PgPool, _needs_unread: bool) -> Result<Vec<Tag>, Server
 }
 
 pub async fn thread(pool: &PgPool, thread_id: String) -> Result<Thread, ServerError> {
-    let id = thread_id
+    let thread_id = thread_id
         .strip_prefix(THREAD_PREFIX)
         .expect("news thread doesn't start with '{THREAD_PREFIX}'")
         .to_string();
 
-    let r = sqlx::query_file!("sql/thread.sql", id)
+    let r = sqlx::query_file!("sql/thread.sql", thread_id)
         .fetch_one(pool)
         .await?;
 
-    let site = r.site.unwrap_or("NO TAG".to_string());
+    let slug = r.site.unwrap_or("no-slug".to_string());
-    let mut tags = vec![format!("{TAG_PREFIX}{site}")];
+    let site = r.name.unwrap_or("NO SITE".to_string());
-    if r.is_read.unwrap_or(true) {
-        tags.push("unread".to_string());
-    };
     let default_homepage = "http://no-homepage";
-    let homepage = Url::parse(
-        &r.homepage
-            .map(|h| {
-                if h.is_empty() {
-                    default_homepage.to_string()
-                } else {
-                    h
-                }
-            })
-            .unwrap_or(default_homepage.to_string()),
-    )?;
     let link = &r
         .link
         .as_ref()
@@ -182,23 +168,11 @@ pub async fn thread(pool: &PgPool, thread_id: String) -> Result<Thread, ServerEr
         })
         .map(|h| Url::parse(&h).ok())
         .flatten();
-    let addr = r.link.as_ref().map(|link| {
-        if link.contains('@') {
-            link.clone()
-        } else {
-            if let Ok(url) = homepage.join(&link) {
-                url.to_string()
-            } else {
-                link.clone()
-            }
-        }
-    });
     let mut body = r.summary.unwrap_or("NO SUMMARY".to_string());
     // TODO: add site specific cleanups. For example:
     // * Grafana does <div class="image-wrapp"><img class="lazyload>"<img src="/media/...>"</img></div>
     // * Some sites appear to be HTML encoded, unencode them, i.e. imperialviolent
     let body_tranformers: Vec<Box<dyn Transformer>> = vec![
-        // TODO: add a map of urls and selectors
         Box::new(SlurpContents {
             site_selectors: hashmap![
                 "hackaday.com".to_string() => vec![
@@ -213,6 +187,10 @@ pub async fn thread(pool: &PgPool, thread_id: String) -> Result<Thread, ServerEr
                     Selector::parse("span.story-byline").unwrap(),
                     Selector::parse("div.p").unwrap(),
                 ],
+                "www.smbc-comics.com".to_string() => vec![
+                    Selector::parse("img#cc-comic").unwrap(),
+                    Selector::parse("div#aftercomic img").unwrap(),
+                ],
             ],
         }),
         Box::new(AddOutlink),
@@ -228,37 +206,24 @@ pub async fn thread(pool: &PgPool, thread_id: String) -> Result<Thread, ServerEr
             body = t.transform(&link, &body).await?;
         }
     }
-    let body = Body::Html(Html {
-        html: body,
-        content_tree: "".to_string(),
-    });
     let title = clean_title(&r.title.unwrap_or("NO TITLE".to_string())).await?;
-    let from = Some(Email {
+    let timestamp = r
-        name: r.name,
+        .date
-        addr: addr.map(|a| a.to_string()),
+        .expect("post missing date")
-    });
+        .assume_utc()
-    Ok(Thread {
+        .unix_timestamp();
+    Ok(Thread::News(NewsPost {
         thread_id,
-        subject: title.clone(),
+        slug,
-        messages: vec![Message {
+        site,
-            id,
+        title,
-            from,
+        body,
-            to: Vec::new(),
+        url: link
-            cc: Vec::new(),
+            .as_ref()
-            subject: Some(title),
+            .map(|url| url.to_string())
-            timestamp: Some(
+            .unwrap_or("NO URL".to_string()),
-                r.date
+        timestamp,
-                    .expect("post missing date")
+    }))
-                    .assume_utc()
-                    .unix_timestamp(),
-            ),
-            headers: Vec::new(),
-            body,
-            path: "".to_string(),
-            attachments: Vec::new(),
-            tags,
-        }],
-    })
 }
 pub async fn set_read_status<'ctx>(
     pool: &PgPool,

server/src/nm.rs

@@ -14,8 +14,8 @@ use crate::{
     compute_offset_limit,
     error::ServerError,
     graphql::{
-        Attachment, Body, DispositionType, Email, Header, Html, Message, PlainText, Tag, Thread,
+        Attachment, Body, DispositionType, Email, EmailThread, Header, Html, Message, PlainText,
-        ThreadSummary, UnhandledContentType,
+        Tag, Thread, ThreadSummary, UnhandledContentType,
     },
     linkify_html, sanitize_html,
 };
@@ -246,11 +246,11 @@ pub async fn thread(
         .next()
         .and_then(|m| m.subject.clone())
         .unwrap_or("(NO SUBJECT)".to_string());
-    Ok(Thread {
+    Ok(Thread::Email(EmailThread {
         thread_id,
         subject,
         messages,
-    })
+    }))
 }
 
 fn email_addresses(

web/graphql/schema.json

@@ -290,6 +290,73 @@
           "name": "Email",
           "possibleTypes": null
         },
+        {
+          "description": null,
+          "enumValues": null,
+          "fields": [
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "threadId",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                }
+              }
+            },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "subject",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                }
+              }
+            },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "messages",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "LIST",
+                  "name": null,
+                  "ofType": {
+                    "kind": "NON_NULL",
+                    "name": null,
+                    "ofType": {
+                      "kind": "OBJECT",
+                      "name": "Message",
+                      "ofType": null
+                    }
+                  }
+                }
+              }
+            }
+          ],
+          "inputFields": null,
+          "interfaces": [],
+          "kind": "OBJECT",
+          "name": "EmailThread",
+          "possibleTypes": null
+        },
         {
           "description": "The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point).",
           "enumValues": null,
@@ -791,6 +858,129 @@
           "name": "Mutation",
           "possibleTypes": null
         },
+        {
+          "description": null,
+          "enumValues": null,
+          "fields": [
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "threadId",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                }
+              }
+            },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "slug",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                }
+              }
+            },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "site",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                }
+              }
+            },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "title",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                }
+              }
+            },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "body",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                }
+              }
+            },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "url",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                }
+              }
+            },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "timestamp",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "Int",
+                  "ofType": null
+                }
+              }
+            }
+          ],
+          "inputFields": null,
+          "interfaces": [],
+          "kind": "OBJECT",
+          "name": "NewsPost",
+          "possibleTypes": null
+        },
         {
           "description": "Information about pagination in a connection",
           "enumValues": null,
@@ -1056,7 +1246,7 @@
                 "kind": "NON_NULL",
                 "name": null,
                 "ofType": {
-                  "kind": "OBJECT",
+                  "kind": "UNION",
                   "name": "Thread",
                   "ofType": null
                 }
@@ -1157,69 +1347,23 @@
         {
           "description": null,
           "enumValues": null,
-          "fields": [
+          "fields": null,
-            {
-              "args": [],
-              "deprecationReason": null,
-              "description": null,
-              "isDeprecated": false,
-              "name": "threadId",
-              "type": {
-                "kind": "NON_NULL",
-                "name": null,
-                "ofType": {
-                  "kind": "SCALAR",
-                  "name": "String",
-                  "ofType": null
-                }
-              }
-            },
-            {
-              "args": [],
-              "deprecationReason": null,
-              "description": null,
-              "isDeprecated": false,
-              "name": "subject",
-              "type": {
-                "kind": "NON_NULL",
-                "name": null,
-                "ofType": {
-                  "kind": "SCALAR",
-                  "name": "String",
-                  "ofType": null
-                }
-              }
-            },
-            {
-              "args": [],
-              "deprecationReason": null,
-              "description": null,
-              "isDeprecated": false,
-              "name": "messages",
-              "type": {
-                "kind": "NON_NULL",
-                "name": null,
-                "ofType": {
-                  "kind": "LIST",
-                  "name": null,
-                  "ofType": {
-                    "kind": "NON_NULL",
-                    "name": null,
-                    "ofType": {
-                      "kind": "OBJECT",
-                      "name": "Message",
-                      "ofType": null
-                    }
-                  }
-                }
-              }
-            }
-          ],
           "inputFields": null,
-          "interfaces": [],
+          "interfaces": null,
-          "kind": "OBJECT",
+          "kind": "UNION",
           "name": "Thread",
-          "possibleTypes": null
+          "possibleTypes": [
+            {
+              "kind": "OBJECT",
+              "name": "EmailThread",
+              "ofType": null
+            },
+            {
+              "kind": "OBJECT",
+              "name": "NewsPost",
+              "ofType": null
+            }
+          ]
         },
         {
           "description": null,

web/graphql/show_thread.graphql

@@ -1,47 +1,59 @@
 query ShowThreadQuery($threadId: String!) {
   thread(threadId: $threadId) {
-    threadId,
+    __typename ... on NewsPost{
-    subject
+      threadId
-    messages {
+      slug
-      id
+      site
-      subject
+      title
-      tags
+      body
-      from {
+      url
-        name
-        addr
-      }
-      to {
-        name
-        addr
-      }
-      cc {
-        name
-        addr
-      }
       timestamp
-      body {
+      # TODO: unread
-        __typename
+    }
-        ... on UnhandledContentType {
+    __typename ... on EmailThread{
-          contents
+      threadId,
-          contentTree
+      subject
-        }
+      messages {
-        ... on PlainText {
-          contents
-          contentTree
-        }
-        ... on Html {
-          contents
-          contentTree
-        }
-      }
-      path
-      attachments {
         id
-        idx
+        subject
-        filename
+        tags
-        contentType
+        from {
-        contentId
+          name
-        size
+          addr
+        }
+        to {
+          name
+          addr
+        }
+        cc {
+          name
+          addr
+        }
+        timestamp
+        body {
+          __typename
+          ... on UnhandledContentType {
+            contents
+            contentTree
+          }
+          ... on PlainText {
+            contents
+            contentTree
+          }
+          ... on Html {
+            contents
+            contentTree
+          }
+        }
+        path
+        attachments {
+          id
+          idx
+          filename
+          contentType
+          contentId
+          size
+        }
       }
     }
   }

web/graphql/update_schema.sh

@@ -1,4 +1,4 @@
 DEV_HOST=localhost
 DEV_PORT=9345
-graphql-client introspect-schema http://${DEV_HOST:?}:${DEV_PORT:?}/graphql --output schema.json
+graphql-client introspect-schema http://${DEV_HOST:?}:${DEV_PORT:?}/api/graphql --output schema.json
 git diff schema.json

web/index.html

@@ -22,6 +22,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
+  <link data-trunk rel="css" href="static/site-specific.css" />
 </head>
 
 <body>

web/src/state.rs

@@ -341,25 +341,34 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                     })
                     .collect(),
             );
-            let mut open_messages: HashSet<_> = data
+            match &data.thread {
-                .thread
+                graphql::show_thread_query::ShowThreadQueryThread::EmailThread(
-                .messages
+                    ShowThreadQueryThreadOnEmailThread {
-                .iter()
+                        thread_id,
-                .filter(|msg| msg.tags.iter().any(|t| t == "unread"))
+                        subject,
-                .map(|msg| msg.id.clone())
+                        messages,
-                .collect();
+                    },
-            if open_messages.is_empty() {
+                ) => {
-                open_messages = data
+                    let mut open_messages: HashSet<_> = messages
-                    .thread
+                        .iter()
-                    .messages
+                        .filter(|msg| msg.tags.iter().any(|t| t == "unread"))
-                    .iter()
+                        .map(|msg| msg.id.clone())
-                    .map(|msg| msg.id.clone())
+                        .collect();
-                    .collect();
+                    if open_messages.is_empty() {
+                        open_messages = messages.iter().map(|msg| msg.id.clone()).collect();
+                    }
+                    model.context = Context::ThreadResult {
+                        thread: data.thread,
+                        open_messages,
+                    };
+                }
+                graphql::show_thread_query::ShowThreadQueryThread::NewsPost(..) => {
+                    model.context = Context::ThreadResult {
+                        thread: data.thread,
+                        open_messages: HashSet::new(),
+                    };
+                }
             }
-            model.context = Context::ThreadResult {
-                thread: data.thread,
-                open_messages,
-            };
         }
         Msg::ShowThreadResult(bad) => {
             error!("show_thread_query error: {bad:#?}");

web/src/view/desktop.rs

@@ -3,6 +3,7 @@ use seed_hooks::{state_access::CloneState, topo, use_state};
 
 use crate::{
     api::urls,
+    graphql::show_thread_query::*,
     state::{Context, Model, Msg},
     view::{self, view_header, view_search_results, view_tags},
 };
@@ -15,9 +16,13 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
     let content = match &model.context {
         Context::None => div![h1!["Loading"]],
         Context::ThreadResult {
-            thread,
+            thread: ShowThreadQueryThread::EmailThread(thread),
             open_messages,
         } => view::thread(thread, open_messages, show_icon_text),
+        Context::ThreadResult {
+            thread: ShowThreadQueryThread::NewsPost(post),
+            ..
+        } => view::news_post(post, show_icon_text),
         Context::SearchResult {
             query,
             results,

web/src/view/mobile.rs

@@ -4,7 +4,7 @@ use seed::{prelude::*, *};
 
 use crate::{
     api::urls,
-    graphql::front_page_query::*,
+    graphql::{front_page_query::*, show_thread_query::*},
     state::{Context, Model, Msg},
     view::{
         self, human_age, pretty_authors, search_toolbar, set_title, tags_chiclet, view_header,
@@ -13,14 +13,18 @@ use crate::{
 };
 
 pub(super) fn view(model: &Model) -> Node<Msg> {
-    log::info!("tablet::view");
+    log::info!("mobile::view");
     let show_icon_text = false;
     let content = match &model.context {
         Context::None => div![h1!["Loading"]],
         Context::ThreadResult {
-            thread,
+            thread: ShowThreadQueryThread::EmailThread(thread),
             open_messages,
         } => view::thread(thread, open_messages, show_icon_text),
+        Context::ThreadResult {
+            thread: ShowThreadQueryThread::NewsPost(post),
+            ..
+        } => view::news_post(post, show_icon_text),
         Context::SearchResult {
             query,
             results,

web/src/view/mod.rs

@@ -394,9 +394,9 @@ macro_rules! implement_email {
 }
 
 implement_email!(
-    ShowThreadQueryThreadMessagesTo,
+    ShowThreadQueryThreadOnEmailThreadMessagesTo,
-    ShowThreadQueryThreadMessagesCc,
+    ShowThreadQueryThreadOnEmailThreadMessagesCc,
-    ShowThreadQueryThreadMessagesFrom
+    ShowThreadQueryThreadOnEmailThreadMessagesFrom
 );
 
 fn raw_text_message(contents: &str) -> Node<Msg> {
@@ -467,13 +467,13 @@ fn render_avatar(avatar: Option<String>, from: &str) -> Node<Msg> {
     }
 }
 
-fn render_open_header(msg: &ShowThreadQueryThreadMessages) -> Node<Msg> {
+fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<Msg> {
     let (from, from_detail) = match &msg.from {
-        Some(ShowThreadQueryThreadMessagesFrom {
+        Some(ShowThreadQueryThreadOnEmailThreadMessagesFrom {
             name: Some(name),
             addr,
         }) => (name.to_string(), addr.clone()),
-        Some(ShowThreadQueryThreadMessagesFrom {
+        Some(ShowThreadQueryThreadOnEmailThreadMessagesFrom {
             addr: Some(addr), ..
         }) => (addr.to_string(), None),
         _ => (String::from("UNKNOWN"), None),
@@ -516,15 +516,15 @@ fn render_open_header(msg: &ShowThreadQueryThreadMessages) -> Node<Msg> {
                                         if i>0 { ", " }else { "" },
                                         {
                                             let to = match to {
-                                                ShowThreadQueryThreadMessagesTo {
+                                                ShowThreadQueryThreadOnEmailThreadMessagesTo {
                                                     name: Some(name),
                                                     addr:Some(addr),
                                                 } => format!("{name} <{addr}>"),
-                                                ShowThreadQueryThreadMessagesTo {
+                                                ShowThreadQueryThreadOnEmailThreadMessagesTo {
                                                     name: Some(name),
                                                     addr:None
                                                 } => format!("{name}"),
-                                                ShowThreadQueryThreadMessagesTo {
+                                                ShowThreadQueryThreadOnEmailThreadMessagesTo {
                                                     addr: Some(addr), ..
                                                 } => format!("{addr}"),
                                                 _ => String::from("UNKNOWN"),
@@ -553,15 +553,15 @@ fn render_open_header(msg: &ShowThreadQueryThreadMessages) -> Node<Msg> {
                                         if i>0 { ", " }else { "" },
                                         {
                                             let cc = match cc {
-                                                ShowThreadQueryThreadMessagesCc {
+                                                ShowThreadQueryThreadOnEmailThreadMessagesCc {
                                                     name: Some(name),
                                                     addr:Some(addr),
                                                 } => format!("{name} <{addr}>"),
-                                                ShowThreadQueryThreadMessagesCc {
+                                                ShowThreadQueryThreadOnEmailThreadMessagesCc {
                                                     name: Some(name),
                                                     addr:None
                                                 } => format!("{name}"),
-                                                ShowThreadQueryThreadMessagesCc {
+                                                ShowThreadQueryThreadOnEmailThreadMessagesCc {
                                                     addr: Some(addr), ..
                                                 } => format!("<{addr}>"),
                                                 _ => String::from("UNKNOWN"),
@@ -609,12 +609,12 @@ fn render_open_header(msg: &ShowThreadQueryThreadMessages) -> Node<Msg> {
     ]
 }
 
-fn render_closed_header(msg: &ShowThreadQueryThreadMessages) -> Node<Msg> {
+fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<Msg> {
     let from: String = match &msg.from {
-        Some(ShowThreadQueryThreadMessagesFrom {
+        Some(ShowThreadQueryThreadOnEmailThreadMessagesFrom {
             name: Some(name), ..
         }) => name.to_string(),
-        Some(ShowThreadQueryThreadMessagesFrom {
+        Some(ShowThreadQueryThreadOnEmailThreadMessagesFrom {
             addr: Some(addr), ..
         }) => addr.to_string(),
         _ => String::from("UNKNOWN"),
@@ -683,7 +683,7 @@ fn render_closed_header(msg: &ShowThreadQueryThreadMessages) -> Node<Msg> {
     ]
 }
 
-fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg> {
+fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node<Msg> {
     let expand_id = msg.id.clone();
     div![
         C!["message"],
@@ -707,16 +707,16 @@ fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg>
         div![
             C!["body"],
             match &msg.body {
-                ShowThreadQueryThreadMessagesBody::UnhandledContentType(
+                ShowThreadQueryThreadOnEmailThreadMessagesBody::UnhandledContentType(
-                    ShowThreadQueryThreadMessagesBodyOnUnhandledContentType { contents ,content_tree},
+                    ShowThreadQueryThreadOnEmailThreadMessagesBodyOnUnhandledContentType { contents ,content_tree},
                 ) => div![
                     raw_text_message(&contents),
                     div![C!["error"],
                         view_content_tree(&content_tree),
                     ]
                 ],
-                ShowThreadQueryThreadMessagesBody::PlainText(
+                ShowThreadQueryThreadOnEmailThreadMessagesBody::PlainText(
-                    ShowThreadQueryThreadMessagesBodyOnPlainText {
+                    ShowThreadQueryThreadOnEmailThreadMessagesBodyOnPlainText {
                     contents,
                     content_tree,
                 },
@@ -724,8 +724,8 @@ fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg>
                     raw_text_message(&contents),
                     view_content_tree(&content_tree),
                 ],
-                ShowThreadQueryThreadMessagesBody::Html(
+                ShowThreadQueryThreadOnEmailThreadMessagesBody::Html(
-                    ShowThreadQueryThreadMessagesBodyOnHtml {
+                    ShowThreadQueryThreadOnEmailThreadMessagesBodyOnHtml {
                     contents,
                     content_tree,
                 },
@@ -792,7 +792,7 @@ fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg>
 
 #[topo::nested]
 fn thread(
-    thread: &ShowThreadQueryThread,
+    thread: &ShowThreadQueryThreadOnEmailThread,
     open_messages: &HashSet<String>,
     show_icon_text: bool,
 ) -> Node<Msg> {
@@ -1075,3 +1075,107 @@ pub fn view_tags(model: &Model) -> Node<Msg> {
         ]
     ]
 }
+fn news_post(post: &ShowThreadQueryThreadOnNewsPost, show_icon_text: bool) -> Node<Msg> {
+    // TODO(wathiede): show per-message subject if it changes significantly from top-level subject
+    let subject = &post.title;
+    set_title(subject);
+    let read_thread_id = post.thread_id.clone();
+    let unread_thread_id = post.thread_id.clone();
+    div![
+        C!["thread"],
+        h3![C!["is-size-5"], subject],
+        div![
+            C!["level", "is-mobile"],
+            div![
+                C!["level-item"],
+                div![
+                    C!["buttons", "has-addons"],
+                    button![
+                        C!["button", "mark-read"],
+                        attrs! {At::Title => "Mark as read"},
+                        span![C!["icon", "is-small"], i![C!["far", "fa-envelope-open"]]],
+                        IF!(show_icon_text=>span!["Read"]),
+                        ev(Ev::Click, move |_| Msg::SetUnread(read_thread_id, false)),
+                    ],
+                    button![
+                        C!["button", "mark-unread"],
+                        attrs! {At::Title => "Mark as unread"},
+                        span![C!["icon", "is-small"], i![C!["far", "fa-envelope"]]],
+                        IF!(show_icon_text=>span!["Unread"]),
+                        ev(Ev::Click, move |_| Msg::SetUnread(unread_thread_id, true)),
+                    ],
+                ],
+            ],
+            // This would be the holder for spam buttons on emails
+            div![C!["level-item"], div![]]
+        ],
+        div![
+            C!["message"],
+            div![C!["header"], render_news_post_header(&post)],
+            div![C!["body", format!("site-{}", post.slug)], raw![&post.body]]
+        ] /* TODO(wathiede): plumb in orignal id
+          a![
+          attrs! {At::Href=>api::original(&thread_node.0.as_ref().expect("message missing").id)},
+          "Original"
+          ],
+          */
+    ]
+}
+fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg> {
+    let from = &post.site;
+    let from_detail = post.url.clone();
+    let avatar: Option<String> = None;
+    //let avatar: Option<String> = Some(String::from("https://bulma.io/images/placeholders/64x64.png"));
+    let id = post.thread_id.clone();
+    // TODO: plumb this through
+    //let is_unread = has_unread(&msg.tags);
+    let is_unread = true;
+    let img = render_avatar(avatar, &from);
+    article![
+        C!["media"],
+        figure![C!["media-left"], p![C!["image", "is-64x64"], img]],
+        div![
+            C!["media-content"],
+            div![
+                C!["content"],
+                p![
+                    strong![from],
+                    br![],
+                    small![
+                        &from_detail,
+                        " ",
+                        span![
+                            i![C!["far", "fa-clone"]],
+                            ev(Ev::Click, move |e| {
+                                e.stop_propagation();
+                                Msg::CopyToClipboard(from_detail.to_string())
+                            })
+                        ]
+                    ],
+                    table![tr![td![
+                        attrs! {At::ColSpan=>2},
+                        span![C!["header"], human_age(post.timestamp)]
+                    ]]],
+                ],
+            ],
+        ],
+        div![
+            C!["media-right"],
+            span![
+                C!["read-status"],
+                i![C![
+                    "far",
+                    if is_unread {
+                        "fa-envelope"
+                    } else {
+                        "fa-envelope-open"
+                    },
+                ]]
+            ],
+            ev(Ev::Click, move |e| {
+                e.stop_propagation();
+                Msg::SetUnread(id, !is_unread)
+            })
+        ]
+    ]
+}

web/src/view/tablet.rs

@@ -1,6 +1,8 @@
+use log::info;
 use seed::{prelude::*, *};
 
 use crate::{
+    graphql::show_thread_query::*,
     state::{Context, Model, Msg},
     view::{self, view_header, view_search_results, view_tags},
 };
@@ -12,9 +14,13 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
     let content = match &model.context {
         Context::None => div![h1!["Loading"]],
         Context::ThreadResult {
-            thread,
+            thread: ShowThreadQueryThread::EmailThread(thread),
             open_messages,
         } => view::thread(thread, open_messages, show_icon_text),
+        Context::ThreadResult {
+            thread: ShowThreadQueryThread::NewsPost(post),
+            ..
+        } => view::news_post(post, show_icon_text),
         Context::SearchResult {
             query,
             results,

web/static/site-specific.css

@@ -0,0 +1,14 @@
+.body.site-saturday-morning-breakfast-cereal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.body.site-slashdot i {
+  display: block;
+  padding-left: 1em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-left: 2px solid #ddd;
+}