Revamp "connections panel" with something entirely different

CHANGELOG.md

@@ -8,6 +8,7 @@
     reST, etc.)
 - Switch to GHC 8.6 (for reflex-dom)
 - Raw HTML support (#191)
+- Introduce new "uplink tree" view (#195)
 - Bug fixes
   - Fix 'neuron new' generating invalid Markdown when title contains special characters (#163)
 

guide/2011503.md

@@ -2,13 +2,12 @@
 title: Graph view
 ---
 
-A zettelkasten is a [directed graph](https://en.wikipedia.org/wiki/Directed_graph), and <2017401> is a subset of this graph established using special links.
+A zettelkasten is a [directed graph](https://en.wikipedia.org/wiki/Directed_graph), and <2017401> is a subset of this graph established by having zettels branch off to other zettels.
 
 ## z-index 
 
-The z-index page (at `/z-index.html`; also linked in the footer) displays your Zettelkasten graph. It detects clusters in the graph, and renders each of them as a forest; see <2012301>.
+The z-index page (at `/z-index.html`; also linked in the footer) displays your Zettelkasten graph. Neuron detects if there are any cycles in your Zettelkasten graph (use `cf` to resolve cycles). Then, it detects all <2012301> in the graph, and displays the <2017401> for each cluster.
 
-## Connections
-
-Each zettel has a "connection" pane at the bottom. It shows both the children and the parent connections to other zettels (as defined by <2017401> connections), as well the backlinks not part of the tree. 
+## Uplinks and Backlinks
 
+Uplinks are a kind of backlinks. Specifically an uplink tree of a zettel is the subset of the category tree which branch off to the zettel. Uplink tree is displayed above the zettel; other backlinks are displayed below.

guide/2013101.md

@@ -9,9 +9,6 @@ Here is a list of public Zettelkastens that are managed by neuron:
 - [haskell.zettel.page](https://haskell.zettel.page) ([source](https://github.com/srid/haskell-zettelkasten)): A public Zettekasten for the [Haskell](https://www.haskell.org/) community.
 - [www.srid.ca](https://www.srid.ca/)
   ([source](https://github.com/srid/srid.ca)): Personal homepage of Srid; a demonstration of using Neuron for creating your personal website.
-- [emacs.zettel.page](https://emacs.zettel.page)
-  ([source](https://github.com/srid/emacs.zettel.page)): A public Zettekasten
-  for Emacs (still in its infancy)
 - [rib.srid.ca](https://rib.srid.ca/) ([source](https://github.com/srid/rib/tree/master/guide)): Rib project website.
 
 If you are hosting your own Zettelkasten publicly and would like to include it in this list, edit this page (using the link below) to open a pull request.

guide/2017401.md

@@ -2,9 +2,9 @@
 title: Category Tree
 ---
 
-Neuron allows you to organically build a category tree out of your Zettelkasten graph. This is achieved by <2011504?cf> without the `cf` flag. First, Neuron detects if there are any cycles in your Zettelkasten graph (use `cf` to resolve cycles). Then, it detects all clusters in the graph, and displays a tree view (aka. 'category tree') for each cluster.
+Neuron allows you to organically build a hierarchy out of your Zettelkasten over time. This is achieved by <2011504?cf> *without* the `cf` flag. When a zettel links to another, it "branches of" to that zettel ... unless `cf` is used (in which case it is not a branch off). 
 
-The category tree is displayed in the z-index, as well as the connections panel of each zettel.
+**Uplink trees** are a kind of category tree that display all zettels that branch off to a particular zettel. The uplink tree of a zettel is displayed at the top of each zettel page.
 
 ## See also
 

neuron.cabal

@@ -1,7 +1,7 @@
 cabal-version: 2.4
 name: neuron
 -- This version must be in sync with what's in Default.dhall
-version: 0.5.0.0
+version: 0.5.1.0
 license: AGPL-3.0-only
 copyright: 2020 Sridhar Ratnakumar
 maintainer: srid@srid.ca

src/app/Main.hs

@@ -45,7 +45,7 @@ renderPage config r val = elAttr "html" ("lang" =: "en") $ do
         blank
       _ -> do
         forM_
-          [ "https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css",
+          [ "https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.4/dist/semantic.min.css",
             "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
           ]
           $ \url ->
@@ -55,7 +55,7 @@ renderPage config r val = elAttr "html" ("lang" =: "en") $ do
         when (Config.mathJaxSupport config) $
           elAttr "script" ("id" =: "MathJax-script" <> "src" =: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" <> "async" =: "") blank
   el "body" $ do
-    elAttr "div" ("id" =: "thesite" <> "class" =: "ui text container") $ do
+    elAttr "div" ("id" =: "thesite" <> "class" =: "ui fluid container") $ do
       renderRouteBody config r val
   where
     googleFonts :: DomBuilder t m => [Text] -> m ()
@@ -74,16 +74,19 @@ monoFont :: Text
 monoFont = "DM Mono"
 
 mainStyle :: Config -> Css
-mainStyle cfg = "div#thesite" ? do
-  C.fontFamily [bodyFont] [C.serif]
-  C.paddingTop $ em 1
-  C.paddingBottom $ em 1
-  "p" ? do
-    C.lineHeight $ pct 150
-  "h1, h2, h3, h4, h5, h6, .ui.header, .headerFont" ? do
-    C.fontFamily [headerFont] [C.sansSerif]
-  "img" ? do
-    C.maxWidth $ pct 100 -- Prevents large images from overflowing beyond zettel borders
-  "code, pre, tt, .monoFont" ? do
-    C.fontFamily [monoFont, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New"] [C.monospace]
-  style cfg
+mainStyle cfg = do
+  "body" ? do
+    C.important $ C.backgroundColor "#eee"
+  "div#thesite" ? do
+    C.fontFamily [bodyFont] [C.serif]
+    C.paddingTop $ em 1
+    C.paddingBottom $ em 1
+    "p" ? do
+      C.lineHeight $ pct 150
+    "h1, h2, h3, h4, h5, h6, .ui.header, .headerFont" ? do
+      C.fontFamily [headerFont] [C.sansSerif]
+    "img" ? do
+      C.maxWidth $ pct 100 -- Prevents large images from overflowing beyond zettel borders
+    "code, pre, tt, .monoFont" ? do
+      C.fontFamily [monoFont, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New"] [C.monospace]
+    style cfg