/-  tp=trill-post
/+  sr=sortug, plib=trill-utils, lib=boke, kaji
/=  content  /web/components/post-text
|%
++  abbreviated-post
|=  [cm=content-map:tp button=manx]  ^-  (list manx)
=/  abbreviated  (abbreviate-post:plib cm 1.000)
=/  blocks  (latest-contents:plib cm)
?:  .=(blocks abbreviated)  %+  turn  blocks  block:content
%+  snoc  (turn abbreviated block:content)  button

++  post-snippet
|=  [p=post:tp children=full-graph:tp]  ^-  manx
=/  url  (trip (spat (title-to-path:lib title.p id.p)))  :: TODO check for relative/absolute path
=+  [[a y] m [d h mm s f]]=(yore id.p)
=/  ys  %-  trip  (ud-to-cord:string:sr y)
:: =/  author  (scot %p p.author.p)
=/  count  (houyi:plib children)
=/  comment-count  ?:  .=(count 0)  "No"  "{<count>}"
::
=/  continue-button
;div.continue-button-wrapper
  ;a.continue-button/"{url}":"Continue"
==
=/  comment-div
  ;span
    ;a/"{url}#comments":"{comment-count} comments"
  ==
=/  tag-links
%+  mapi:sr  ~(tap in tags.p)
    |=  [i=@ t=@t]  ^-  manx
    ?.  .=(i (dec ~(wyt in tags.p)))
    ;a/"/tags/{(trip t)}":"{(trip t)}, "
    ;a/"/tags/{(trip t)}":"{(trip t)} "

::
;article
  ;header
    ;h2
      ;a/"{url}":"{(trip title.p)}"
    ==
  ==
  ;main
    ;*  (abbreviated-post contents.p continue-button)
  ==
  ;div.post-metadata
    ;span
      ; Posted on
      ;a/"{ys}":"{ys}"
      ;a/"{ys}/{<m.m>}":"/{<m.m>}"
      ;a/"{ys}/{<m.m>}/{<d.d>}":"/{<d.d>}"
    ==
    :: ;span
    ::   ; by
    ::   ;a/"by/{author}":"{author}"
    :: ==
  ==
  ;+  ?:  .=(0 ~(wyt in tags.p))  ;footer  ;+  comment-div  ==
  ;footer
    ;  Tagged as
    ;span.tags-links
      ;*  tag-links 
    ==
    ;+  comment-div
  ==
==
++  css  ^~  %-  trip
'''
#post-list{
  :: top: 0;
  margin: auto;

  & article{
    margin: 0 0 1.5em;
    margin-top: 40px;
    border-bottom: 1px dotted #dfdfdf;
    padding: 0 2rem;
    padding-bottom: 40px;

  & header h2{
      font-size: 1.8rem;
      text-align: center;
      letter-spacing: 1px;
      text-transform: uppercase;
      line-height: 1.4em;
      font-weight: 500;
    }
  & .post-metadata, article footer{
      font-size: 90%;
      font-style: italic;
      color: #969696;
    }

  & main{
      margin: 1.5em 0 0;
    }
  }
  & .tags-links{
    text-transform: capitalize;
    margin-right: 1ch;
  }

  & .continue-button-wrapper{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  & .continue-button{
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    padding: 0.5rem, 0rem, 0.5rem, 1.25rem;
    line-height: 1.5;
    border-radius: 0.2rem;
  }
  & .cursor{
    text-align: center;
    margin: 1rem;
  }
}


'''
++  test
|=  [p=post:tp children=full-graph:tp]  ^-  manx
=/   pid  [author.p id.p]
=/  pat  /blog/snip/(scot %uw (jam pid))
(fetch:kaji pat)
++  cursor
|=  [cursor=(unit @da) label=tape]
?~  cursor  ;div;
=/  path  "/page/t/blog/{(scow:parsing:sr %uw `@uw`u.cursor)}"
;div.cursor(kaji "iscroll", path path, cont "#post-list", where "bottom")
  ;button:"{label} posts"
==
++  html  
|=  p=page:tp
^-  manx
;div#post-list
  ;style:"{css}"
  ;+  (cursor newer.p "Newer")
  ;*  (turn p.p post-snippet)
  ;+  (cursor older.p "Older")
==
--