implement rendering on medium-formatted data

2021-10-31 22:26:42 +05:30
parent 63bd10688c
commit f0853a4a64
9 changed files with 333 additions and 68 deletions
--- a/templates/img.html
+++ b/templates/img.html
@ -0,0 +1,9 @@
+<. let metadata = p.metadata.as_ref().unwrap(); .>
+<!-- TODO deal with layouts 
+  height="<.= metadata.original_height.>"
+  width="<.= metadata.original_width.>"
+-->
+<img
+  src="https://miro.medium.com/<.= metadata.id .>"
+  alt="<.= p.text .>"
+/>
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><.= data.title .></title>
+  </head>
+  <body>
+    <main class="container">
+      <h1><.= data.title .></h1>
+      <. use chrono::{TimeZone, Utc}; .> 
+      <. let dt = Utc.timestamp_millis(data.created_at); .>
+      <p class="meta">
+        <a href="https://medium.com/u/<.= data.creator.id .>" rel="noreferrer">
+          <.= data.creator.name .></a
+        >
+        on <.= dt.format("%b %e, %Y").to_string() .>
+      </p>
+      <article>
+        <. let paragraphs = data.content.body_model.paragraphs; .>
+        <. for (pindex, p) in paragraphs.iter().enumerate() {.>
+          <. if pindex == 1 && p.type_ == "H3" {.>
+            <. continue; .>
+          <.}.>
+          <. if p.type_ == "IMG" {.>
+            <. include!("./img.html"); .> 
+          <.} else if p.type_ == "P" {.>
+            <. include!("./p.html"); .>
+          <.}.>
+        <.}.>
+      </article>
+  </main>
+  </body>
+  <style>
+  <. include!("./main.css"); .>
+  </style>
+</html>
--- a/templates/main.css
+++ b/templates/main.css
@ -0,0 +1,27 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  width: 60%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+p {
+  margin: 20px 0;
+}
+
+img {
+  margin: auto;
+  max-width: 80%;
+  /*! display: block; */
+}
--- a/templates/matcher.rs
+++ b/templates/matcher.rs
@ -0,0 +1,15 @@
+match p.type_.as_str() {
+   "IMG" => { 
+        include!("./img.html");
+   },
+   _ => unimplemented!(),
+
+}
+
+//<. match p.type_ { .>
+//          <. "IMG" => { .>
+//            <. include!("./img.html") .>
+//            <. }, .>
+//          <. _ => log::error("Unable to find paragraph render class. Post ID: {}. Paragraph item {:?}", id, p),
+//        <. } .>
+//
--- a/templates/p.html
+++ b/templates/p.html
@ -0,0 +1,44 @@
+<p>
+<. if p.markups.is_empty() {.>
+<.= p.text .>
+<.} else {.>
+  <. let mut cur: usize = 0; .>
+  <. for markup in &p.markups {.>
+    <.= &p.text.substring(cur, (markup.start -1) as usize) .>
+    <. cur = (markup.end + 1) as usize; .>
+    <. let text  =  &p.text.substring(markup.start as usize, markup.end as usize); .>
+    <. if markup.type_ == "A" {.>
+      <. if let Some(anchor_type) = &markup.anchor_type {.>
+        <. if anchor_type == "LINK" {.>
+          <a rel="noreferrer" href="<.= markup.href.as_ref().unwrap() .>"><.= text .></a>
+        <.} else if anchor_type == "USER" {.>
+        <a 
+          rel="noreferrer" 
+          href="https://medium.com/u/<.= markup.user_id.as_ref().unwrap() .>"
+        >
+          <.= text .>
+        </a>
+        <.} else {.>
+          <. log::error!("unknown markup.anchor_type: {:?} post id {}", anchor_type, id); .>
+          <span><.= text .></span>
+        <.}.>
+      <.}.>
+    <.} else if markup.type_ == "EM" {.>
+      <em><.= text .></em>
+    <.} else if markup.type_ == "STRONG" {.>
+      <strong><.= text .></strong>
+    <.} else if markup.type_ == "CODE" {.>
+      <code><.= text .></code>
+    <.} else {.>
+      <. log::error!("unknown markup.type_: {:?} post id {}", markup.type_, id); .>
+      <span><.= text .></span>
+    <.}.>
+
+    <. if cur < p.text.len() {.>
+      <.= p.text.slice(cur..) .>
+    <.}.>
+  <.}.>
+
+<.}.>
+</p>
+<!-- markup.type_ = [ "CODE", "A", "EM", "STRONG" -->