Add frame-based navigation

Author: xvw

data/index.md

@@ -14,7 +14,10 @@ interests:
     url: https://ar.al/2020/08/07/what-is-the-small-web/
 ---
 
-Welcome to the [Muhokama](https://github.com/muhokama/) webring. A collection of
-**personal spaces** maintained by people _who share certain ideas or approaches
-to the Internet_. You can also retrieve **the list of RSS/Atom feeds** associated
-with the webring using the [following OPML file](/opml/ring.opml).
+Welcome to the [Muhokama](https://github.com/muhokama/) webring. A
+collection of **personal spaces** maintained by people _who share
+certain ideas or approaches to the Internet_. You can also retrieve
+**the list of RSS/Atom feeds** associated with the webring using the
+[following OPML file](/opml/ring.opml) or browse the various sites in
+[the reader](/u/xvw/frame.html) (making it easy to switch from one
+site to another).

lib/action/chain.ml

@@ -29,13 +29,27 @@ let index (module R : Sigs.RESOLVER) current_member pred succ =
            (module Model.Member_page)
            (R.Source.template "layout.html"))
 
+let frame (module R : Sigs.RESOLVER) curr pred succ =
+  let target = R.Target.frame ~id:(Model.Member.id curr) in
+  Yocaml.Action.Static.write_file_with_metadata target
+    (let open Yocaml.Task in
+     R.track_common_dependencies
+     >>> Yocaml.Pipeline.track_file R.Source.members
+     >>> Model.Frame.init ~current:curr ~predecessor:pred ~successor:succ
+     >>> empty_body ()
+     >>> Yocaml_jingoo.Pipeline.as_template
+           (module Model.Frame)
+           (R.Source.template "frame.html"))
+
 let run (module R : Sigs.RESOLVER) chain =
   let member = member (module R) in
   let index = index (module R) in
+  let frame = frame (module R) in
   Yocaml.Action.batch_list (Model.Chain.to_list chain)
     (fun (curr, (pred, succ)) cache ->
       let open Yocaml.Eff in
       cache
       |> member `Pred curr pred
       >>= member `Succ curr succ
+      >>= frame curr pred succ
       >>= index curr pred succ)

lib/model/frame.ml

@@ -0,0 +1,12 @@
+type t = { current : Member.t; predecessor : Member.t; successor : Member.t }
+
+let init ~current ~predecessor ~successor =
+  Yocaml.Task.const { current; predecessor; successor }
+
+let normalize { current; predecessor; successor } =
+  let open Yocaml.Data in
+  [
+    ("current", record @@ Member.normalize current);
+    ("predecessor", record @@ Member.normalize predecessor);
+    ("successor", record @@ Member.normalize successor);
+  ]

lib/model/frame.mli

@@ -0,0 +1,11 @@
+(** Describe a zipper element of the chain. *)
+
+type t
+
+val init :
+  current:Member.t ->
+  predecessor:Member.t ->
+  successor:Member.t ->
+  (unit, t) Yocaml.Task.t
+
+val normalize : t -> (string * Yocaml.Data.t) list

lib/resolver.ml

@@ -34,6 +34,7 @@ module Make (R : Sigs.RESOLVABLE) = struct
     let index = Path.(R.target / "index.html")
     let images = Path.(R.target / "images")
     let avatars = Path.(images / "avatars")
+    let frame ~id = Path.(members / id / "frame.html")
     let member ~id = Path.(members / id / "index.html")
     let blog = Path.(R.target / "blog.html")
 

lib/sigs.mli

@@ -76,6 +76,7 @@ module type RESOLVER = sig
     val images : Yocaml.Path.t
     val members : Yocaml.Path.t
     val member_redirection : id:string -> [ `Pred | `Succ ] -> Yocaml.Path.t
+    val frame : id:string -> Yocaml.Path.t
     val member : id:string -> Yocaml.Path.t
     val avatars : Yocaml.Path.t
     val blog : Yocaml.Path.t

static/css/style.css

@@ -11,6 +11,7 @@ body {
     display: flex;
     flex-direction: column;
     background-color: var(--main-dark-color);
+    min-height: 100dvh;
 }
 
 a {
@@ -325,3 +326,29 @@ footer nav {
         flex-direction: column;
     }
 }
+
+div.frame {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    & aside {
+        font-family: "Inter";
+        padding: 1.5rem;
+
+        & nav {
+            margin-top: 0.2rem;
+
+            & a {
+                display: inline-block;
+                margin-right: 1rem;
+                font-weight: 700;
+            }
+        }
+    }
+
+    & > iframe {
+        flex: 1;
+        background-color: #fff;
+    }
+}

static/templates/frame.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>ring.muhokama.fun - {{ current.main_link.title}}</title>
+    <link rel="stylesheet" href="/css/style.css" />
+  </head>
+  <body>
+    <div class="frame">
+      <aside class="toolbox">
+        Browsing <a href="/">ring.muhokama.fun</a>
+        <nav>
+          <a href="/u/{{ predecessor.id }}/frame.html">← {{ predecessor.main_link.title}}</a>
+          <a href="/u/{{ current.id }}/frame.html">{{ current.main_link.title}}</a>
+          <a href="/u/{{ successor.id }}/frame.html">{{ successor.main_link.title}} →</a>
+        </nav>
+      </aside>
+      <iframe frameborder="0" src="{{ current.main_link.url.url }}"></iframe>
+    </div>
+  </body>
+</html>

static/templates/index.html

@@ -18,7 +18,7 @@ <h2><a href="/u/{{ m.id }}">{{ m.display_name }}</a></h2>
     </div>
 
     <nav>
-      <a href="{{ m.main_link.url.url }}" title="{{ m.main_link.title }}"
+      <a href="/u/{{ m.id }}/frame.html" title="{{ m.main_link.title }}"
         >www</a
       >
       {%- if m.has_main_feed -%}