Blog styling and initial blog post on fast accumulation (#1359)

All blog posts will now require an author field. Subtitle and author_website is optional.

There are some shortcuts in here that we'll have to undo when we have more than one blog post on the website (for example the link to the blog in disqus is hardcoded).

The outer-frame of the blog post with the title/subtitle/date/author and share-sheet/disqus at the bottom is in blog_post.ml

All the blog content styling is in blog.css and can't be done with tachyons since the output is generated by pandoc.

There is a static/blog directory for static assets connected to a particular blogpost (new subdir per post).

Also now we prefer katex to mathjax as it's faster and has more features.

.gitattributes

@@ -3,3 +3,14 @@
 src/lib/snarky/src/camlsnark_c/libsnark-caml/* linguist-vendored
 *.png filter=lfs diff=lfs merge=lfs -text
 docs/res/transition_frontier_diagram.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/merge-tree3.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/better-aprime.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/better-c.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/better-b.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/better-d.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/compress.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/reorganize.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/space-waste.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/succinct.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/better-a.png filter=lfs diff=lfs merge=lfs -text
+src/app/website/static/blog/scans/better-a5.png filter=lfs diff=lfs merge=lfs -text

src/app/website/posts/snarky.markdown

@@ -1,6 +1,7 @@
 ---
 title: Snarky: A high-level language for verifiable computation
 date: 2018-03-11
+author: Izaak Meckler
 ---
 
 Living in the world today requires giving up a lot of control.

src/app/website/src/blog_post.ml

@@ -0,0 +1,158 @@
+open Core
+open Async
+open Stationary
+open Common
+
+let disqus_html name =
+  Printf.sprintf
+    {html|<div id="disqus_thread"></div>
+<script>
+
+/**
+*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
+var disqus_config = function () {
+this.page.url = "https://codaprotocol.com/blog/%s.html";  // Replace PAGE_URL with your page's canonical URL variable
+this.page.identifier = "codaprotocol/blog/%s?1"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+};
+(function() { // DON'T EDIT BELOW THIS LINE
+var d = document, s = d.createElement('script');
+s.src = 'https://codaprotocol-com.disqus.com/embed.js';
+s.setAttribute('data-timestamp', +new Date());
+(d.head || d.body).appendChild(s);
+})();
+</script>
+                        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>|html}
+    name name
+
+let title s =
+  let open Html_concise in
+  h1
+    [Style.just "f2 f1-ns ddinexp tracked-tightish pt2 pt3-m pt4-l mb1"]
+    [text s]
+
+let subtitle s =
+  let open Html_concise in
+  h2 [Style.just "f4 f3-ns ddinexp mt0 mb4 fw4"] [text s]
+
+let author s website =
+  let open Html_concise in
+  h4
+    [Style.just "f7 fw4 tracked-supermega ttu metropolis mt0 mb1"]
+    ( match website with
+    | Some url ->
+        [ a
+            [ Attribute.href url
+            ; Style.just "blueblack no-underline"
+            ; Attribute.create "target" "_blank" ]
+            [ span [Style.just "mr2"] [text ("by " ^ s)]
+            ; literal
+                {literal|<i class="ml-1 ml-2-ns fab f7 fa-twitter mr3 mr2-m mr3-l"></i>|literal}
+            ] ]
+    | None -> [text ("by " ^ s)] )
+
+let date d =
+  let month_day = Date.format d "%B %d" in
+  let year = Date.year d in
+  let s = month_day ^ " " ^ Int.to_string year in
+  let open Html_concise in
+  h4
+    [Style.just "f7 fw4 tracked-supermega ttu o-50 metropolis mt0 mb45"]
+    [text s]
+
+module Share = struct
+  open Html_concise
+
+  let content =
+    let channels =
+      [ ("Twitter", "https://twitter.com/codaprotocol")
+      ; ("Discord", "https://discord.gg/UyqY37F")
+      ; ("Telegram", "https://t.me/codaprotocol")
+      ; ("Hacker News", "https://news.ycombinator.com/item?id=18726110") ]
+    in
+    let channels =
+      List.map channels ~f:(fun (name, link) -> a [href link] [text name])
+    in
+    let channels = List.intersperse channels ~sep:(text "•") in
+    let share =
+      span
+        [Style.just "f7 ttu fw4 ddinexp tracked-mega blueshare"]
+        [text "share:"]
+    in
+    div
+      [Style.just "share flex justify-center items-center mb4"]
+      (share :: channels)
+end
+
+let post name =
+  let open Html_concise in
+  let%map post = Post.load ("posts/" ^ name ^ ".markdown") in
+  let content_chunk =
+    title post.title
+    :: (match post.subtitle with None -> [] | Some s -> [subtitle s])
+    @ [ author post.author post.author_website
+      ; date post.date
+      ; div
+          [Stationary.Attribute.class_ "blog-content lh-copy"]
+          [ post.content
+          ; hr []
+          (* HACK: to reuse styles from blog hr, we can just stick it in blog-content *)
+           ]
+      ; Share.content ]
+  in
+  let regular =
+    div [Style.just "mw65-ns ibmplex f5 center blueblack"] content_chunk
+  in
+  let big =
+    div
+      [Style.just "mw7 center ibmplex blueblack side-footnotes"]
+      [div [Style.just "mw65-ns f5 left blueblack"] content_chunk]
+  in
+  let disqus =
+    div
+      [Style.just "mw65-ns ibmplex f5 center blueblack"]
+      [Html.literal (disqus_html name)]
+  in
+  div
+    [Style.just "ph3 ph4-m ph5-l"]
+    [Huge_switch.create ~regular ~huge:big; disqus]
+
+let content name =
+  let%map p = post name in
+  wrap
+    ~headers:
+      [ Html.literal
+          {html|<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">|html}
+      ; Html.literal
+          {html|<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>|html}
+      ; Html.literal
+          {html|<link rel="stylesheet" href="/static/css/blog.css">|html}
+      ; Html.literal
+          {html|<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"
+    onload="renderMathInElement(document.body);"></script>|html}
+      ; Html.literal
+          {html|<script>
+            document.addEventListener("DOMContentLoaded", function() {
+              var blocks = document.querySelectorAll(".katex-block code");
+              for (var i = 0; i < blocks.length; i++) {
+                var b = blocks[i];
+                katex.render(b.innerText, b);
+              }
+            });
+          </script>|html}
+      ; Html.literal
+          {html|<script>
+            document.addEventListener("DOMContentLoaded", function() {
+              var blocks = document.querySelectorAll(".blog-content a");
+              for (var i = 0; i < blocks.length; i++) {
+                var b = blocks[i];
+                if (b.href.indexOf('#') === -1) {
+                  b.target = '_blank';
+                }
+              }
+            });
+          </script>|html}
+      ]
+    ~tight:true ~fixed_footer:false
+    ~page_label:Links.(label blog)
+    [(fun _ -> p)]

src/app/website/src/common.ml

@@ -72,7 +72,9 @@ module Icon = struct
 end
 
 module Spacing = struct
-  let side_padding = Style.of_class "ph6-l ph5-m ph4 mw9-l"
+  let side_padding ~tight =
+    if tight then Style.of_class "ph6-l ph4-m ph3 mw9-l"
+    else Style.of_class "ph6-l ph5-m ph4 mw9-l"
 end
 
 module Visibility = struct
@@ -81,6 +83,10 @@ module Visibility = struct
   let only_large = Style.of_class "dn db-l"
 
   let only_mobile = Style.of_class "db dn-ns"
+
+  let regular = Style.of_class "db dn-l"
+
+  let huge = Style.of_class "db-l dn"
 end
 
 module Mobile_switch = struct
@@ -91,6 +97,14 @@ module Mobile_switch = struct
       ; div [Style.render Visibility.only_mobile] [small] ]
 end
 
+module Huge_switch = struct
+  let create ~huge ~regular =
+    let open Html_concise in
+    div []
+      [ div [Style.render Visibility.regular] [regular]
+      ; div [Style.render Visibility.huge] [huge] ]
+end
+
 let title_string s = sprintf "Coda - %s" s
 
 let analytics =
@@ -119,24 +133,21 @@ module Links = struct
 
   let reddit = ("Reddit", "https://reddit.com/r/coda", "reddit")
 
-  let blog =
-    ( "Blog"
-    , "https://medium.com/codaprotocol/coda-keeping-cryptocurrency-decentralized-e4b180721f42"
-    , "blog" )
+  let blog = ("Blog", "/blog/scanning_for_scans.html", "blog")
 
   let telegram = ("Telegram", "https://t.me/codaprotocol", "telegram")
 
   let tos = ("Terms of Service", "/tos.html", "tos")
 
   let privacy = ("Privacy Policy", "/privacy.html", "privacy")
 
-  let hiring = ("We're Hiring", "jobs.html", "hiring")
+  let hiring = ("We're Hiring", "/jobs.html", "hiring")
 
-  let jobs = ("Jobs", "jobs.html", "jobs")
+  let jobs = ("Jobs", "/jobs.html", "jobs")
 
-  let testnet = ("Testnet", "testnet.html", "testnet")
+  let testnet = ("Testnet", "/testnet.html", "testnet")
 
-  let code = ("Code", "code.html", "code")
+  let code = ("Code", "/code.html", "code")
 end
 
 module Input_button = struct
@@ -242,7 +253,7 @@ module Navbar = struct
           ; hr [Style.(render (of_class "w-50-ns w-100" + Styles.clean_hr))] ]
       ]
 
-  let navbar current_page =
+  let navbar ?(tight = false) current_page =
     let open Html in
     let open Html_concise in
     let maybe_no_underline label =
@@ -258,15 +269,15 @@ module Navbar = struct
     div
       [ Style.(
           render
-            ( of_class "flex items-center mw9 mb4 mb5-m"
-            + Spacing.side_padding + top_margins )) ]
-      [ div [class_ "w-50"]
-          [anchor [] "./" [coda Style.empty] "coda-home" false]
+            ( of_class "flex items-center mw9 mb5-m"
+            + (if tight then of_class "mb3" else of_class "mb4")
+            + Spacing.side_padding ~tight
+            + top_margins )) ]
+      [ div [class_ "w-50"] [anchor [] "/" [coda Style.empty] "coda-home" false]
       ; div
           [class_ "flex justify-around w-75"]
           [ (let name, url, label = Links.blog in
-             a' ~style:Visibility.no_mobile ~open_new_tab:true url [text name]
-               label)
+             a' ~style:Visibility.no_mobile url [text name] label)
           ; (let name, url, label = Links.testnet in
              a' url [text name] label)
           ; (let name, url, label = Links.code in
@@ -362,7 +373,7 @@ module Section = struct
           ( [ Style.(
                 render
                   ( ["section-wrapper"; "pv4"; "mw9"; "center"; "bxs-bb"]
-                  + Spacing.side_padding )) ]
+                  + Spacing.side_padding ~tight:false )) ]
           @ maybe_id )
           ( match heading with
           | Some heading -> [heading; content]
@@ -655,8 +666,8 @@ let wrap_simple ~navbar ~body_style ?(extra_body = []) ?(headers = [])
   in
   node "html" [] [head; body]
 
-let wrap ?(extra_body = []) ?(headers = []) ?(fixed_footer = false) ?title
-    ~page_label sections =
+let wrap ?(tight = false) ?(extra_body = []) ?(headers = [])
+    ?(fixed_footer = false) ?title ~page_label sections =
   let reified_sections =
     List.mapi
       (sections @ [footer ~fixed:fixed_footer ~show_newsletter:true])
@@ -665,6 +676,6 @@ let wrap ?(extra_body = []) ?(headers = []) ?(fixed_footer = false) ?title
   let open Html_concise in
   wrap_simple
     ~body_style:(Style.of_class "bg-white")
-    ~navbar:(Navbar.navbar page_label) ~extra_body ~headers ~fixed_footer
-    ?title ~page_label ~append_footer:false ~show_newsletter:true
-    (div [] reified_sections)
+    ~navbar:(Navbar.navbar ~tight page_label)
+    ~extra_body ~headers ~fixed_footer ?title ~page_label ~append_footer:false
+    ~show_newsletter:true (div [] reified_sections)

src/app/website/src/main.ml

@@ -367,7 +367,7 @@ let home () =
             ~not_small:(social_list `Horizontal)
             ~small:(social_list `Vertical)
         , Link_list.create ~named:"Articles" ~orientation:`Vertical
-            [ ( `Read "Keeping Cryptocurrency Decentralized"
+            [ ( `Read "Fast Accumulation on Streams"
               , `One
                   (let _, u, _ = Links.blog in
                    u)
@@ -531,7 +531,7 @@ let testnet () =
     ~extra_body:
       [ Html.literal
           {html|
-      <script defer src="https://s3-us-west-2.amazonaws.com/o1labs-snarkette-data/main.bc.js"></script>      
+      <script defer src="/static/main.bc.js"></script>
       |html}
       ]
     ~headers:[Html.link ~href:"https://csshake.surge.sh/csshake.min.css"]
@@ -562,6 +562,7 @@ let load_job_posts jobs =
 let site () : Site.t Deferred.t =
   let open File_system in
   let%bind position_files = load_job_posts positions in
+  let%bind post = Blog_post.content "scanning_for_scans" in
   let%map home = home () in
   Site.create
     ( List.map position_files ~f:file
@@ -571,6 +572,8 @@ let site () : Site.t Deferred.t =
       ; file (File.of_html ~name:"testnet.html" (testnet ()))
       ; file (File.of_html ~name:"privacy.html" Privacy_policy.content)
       ; file (File.of_html ~name:"tos.html" Tos.content)
+        (* TODO: Make some more generalized thing for the blog posts *)
+      ; file (File.of_html_path ~name:"blog/scanning_for_scans.html" post)
       ; file (File.of_path "static/favicon.ico")
       ; copy_directory "static" ] )
 

src/app/website/src/post.ml

@@ -3,7 +3,14 @@ open Async
 open Stationary
 open Util
 
-type t = {date: Date.t; title: string; content: Html.t; basename: string}
+type t =
+  { date: Date.t
+  ; title: string
+  ; subtitle: string option
+  ; author: string
+  ; author_website: string option
+  ; content: Html.t
+  ; basename: string }
 
 let load path =
   let%map markdown = Reader.file_contents path and html = Markdown.load path in
@@ -26,7 +33,15 @@ let load path =
         Date.of_string (List.Assoc.find_exn ~equal:String.equal kvs "date")
       in
       let title = List.Assoc.find_exn ~equal:String.equal kvs "title" in
+      let author = List.Assoc.find_exn ~equal:String.equal kvs "author" in
+      let author_website =
+        List.Assoc.find ~equal:String.equal kvs "author_website"
+      in
+      let subtitle = List.Assoc.find ~equal:String.equal kvs "subtitle" in
       { date
       ; title
+      ; subtitle
+      ; author
+      ; author_website
       ; content= html
       ; basename= Filename.chop_extension (Filename.basename path) }