◊(Local Yarn Code "index.html.pp at [831c9996]")

About History Code Code Docs Road Map Issues
File index.html.pp artifact 6ce20187 part of check-in 831c9996

#lang pollen

◊; SPDX-License-Identifier: BlueOak-1.0.0
◊; This file is licensed under the Blue Oak Model License 1.0.0.

◊(require pollen/template db/base racket/list racket/match)

◊(define (fetch-series)
  (define q "SELECT noun_plural, page, title FROM series ORDER BY noun_plural DESC")
  (query-rows cache-conn q))

◊(define (series-item->txpr s)
  (match-define (list n pagenode title) s)
  `(li (a [[href ,pagenode]] (i ,title))))

◊(define (series-grouped-list)
  ;; Produces '((("noun1" "p.html" "Title") ("noun1" "q.html" "Title")) (("noun2" ...) ...))
  (define init-group
    (group-by first (map vector->list (fetch-series)) string-ci=?))
  
  (define series-list-items
    (for/list ([group (in-list init-group)])
      `(div (h2 ,(first (first group))) (ul ,@(map series-item->txpr group)))))
  `(section [[class "series-list"] [style "margin-top: 1.3rem"]] ,@series-list-items))
            

<!DOCTYPE html>
<html lang="en">
◊html$-page-head["The Local Yarn" #f]
<style>
  header#front-page {
    text-align: center;
  }

  header#front-page > div {
    display: inline-block;
    width: auto;
    margin: 0 auto;
    overflow: hidden;
  }

  #front-page h1 {
    font-feature-settings: "smcp" on;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 2.5em;
    /* 24fps slide-in from right edge of text, just like in GRAND BUDAPEST HOTEL */
    animation: slideFromRight 1s steps(24);
  }

  @keyframes slideFromRight {
    0%   { margin-right: -200%; }
    100% { margin-right: 0%; }
  }

  #front-page-logo {
    shape-outside: url(web-extra/mark.svg);
    filter: brightness(0) saturate(100%) invert(20%) sepia(16%) saturate(903%) hue-rotate(153deg) brightness(93%) contrast(90%);
    shape-margin: 1rem;
    float: left;
    margin-left: -20vw;
    margin-right: 1rem;
    z-index: -100;
  }

  main {
    background: transparent;
    font-size: 1.3em;
    line-height: 1.2em;
  }
</style>
</head>

<body style="overflow-x:hidden; hyphens: auto">
 <header id="front-page"><div>
 <h1 class="site-title">The Local Yarn</h1>
 </div></header>

 <img id="front-page-logo" src="/web-extra/mark.svg" style="max-width: 60vw; height: auto;">

◊(define front-page-body ◊root{

is the end of the ◊index{thread} that you can pick or pluck, the forked ribbon tracing into the bookshelf,
your own or someone else’s. ◊em{I’ve seen this before} says the voice on the other end. ¶ Everything
(almost) is ◊link[1]{arranged in time order, newest first}. There are also a few arranged into named
collections:

◊url[1]{/blog-pg1.html}

}) 
◊; stop for now: (crystalize-index-entries! '|index.html| front-page-body)

<main> 
  ◊(->html front-page-body #:splice? #t)
  ◊(->html (series-grouped-list))
</main> 
</body>
</html>