;; template-ey things and style things

(load "libs.scm")

;; The date format we're using is {year:04}-{month:02}-{day:02}.
(define (date->string date)
  (strftime "%Y-%m-%d" date))

(define (date->tz date)
  (strftime "%Y-%m-%dT%TZ" date))

(define (post-url post)
  (let ((date (date->string (post-time post)))
        (slug (post-slug post)))
    (format #f "/~a/~a/" date slug)))

(define (atom-element post)
  (let ((url (++ "https://what.happens.when.computer" (post-url post))))
    `(entry
      (title ,(post-title post))
      (link (@ (href ,url)))
      (id ,url)
      (updated ,(date->tz (post-time post)))
      (author
       (name "Getty Ritter")
       (email "gettyritter@gmail.com"))
      (content
       (@ (type "html"))
       ,(++ "<![CDATA[" (serialize-sxml (post-content post)) "]]>")))))

(define (atom-feed posts)
  (let ((updated (date->tz (post-time (car posts)))))
    `(feed (@ (xmlns "https://www.w3.org/2005/Atom"))
           (title "what happens when computer")
           (link (@ (href "https://what.happens.when.computer/feed.xml")
                    (rel "self")))
           (link (@ (href "https://what.happens.when.computer/")))
           (updated ,updated)
           (id "https://what.happens.when.computer/")
           ,(map (lambda (post) (atom-element post)) posts))))

;; the scss stylesheet
(define stylesheet
  '((body
     (font-family "Palatino, \"Palatino Linotype\", \"Palatino LT STD\", \"Book Antiqua\", Georgia, serif")
     (font-size 15pt)
     (background-color "#eeeeee")
     (counter-reset sidenote-counter))

    (a:link
     (color "#336699"))

    (a:visited
     (color "#104070"))

    ((&& table td th)
     (padding 5px)
     (border "1px solid black")
     (border-collapse collapse))

    (table (width 100%))

    (td (padding 6px))

    ((= class all)
     (width        1000px)
     (margin-left  auto)
     (margin-right auto)
     (text-align   center))

    ((= class menu)
     (color "#0f0f0f"))

    ((= class main)
     (padding-right 25%)
     (text-align justify)
     (line-height 150%))

    ((= class menu-index:before)
     (font-family "fira, \"Arial\", \"Helvetica\", sans-serif")
     (content "\"/ \""))
    ((= class menu-archive:before)
     (font-family "fira, \"Arial\", \"Helvetica\", sans-serif")
     (content "\"^ \""))
    ((= class menu-tags:before)
     (font-family "fira, \"Arial\", \"Helvetica\", sans-serif")
     (content "\"# \""))
    ((= class menu-about:before)
     (font-family "fira, \"Arial\", \"Helvetica\", sans-serif")
     (content "\"@ \""))

    ((// (= class navlist) li)
     (display inline)
     (list-style-type none)
     (padding-left 10px)
     (padding-right 20px))

    ((// (= class navlist) ul)
     (padding-left  100px)
     (padding-right 100px))

    ((// (= class archive-list) ul)
     (padding-left 100px)
     (padding-right 100px))

    ((// (= class archive-list) li)
     (list-style-type none))

    ((= class tag-entry:before)
     (content "\"#\""))

    ((// (= class tags) ul)
     (display inline))

    ((= class svgimage)
     (display float)
     (width 100%)
     (margin-left auto)
     (margin-right auto))

    ((= class para)
     (padding-top 20px))

    ((= class tag:before)
     (content "\"#\""))

    ((= class tag)
     (font-style italic))

    ((= class word)
     (position relative)
     (padding "2px 4px 2px 4px")
     (border-radius "5px")
     (color "#993366"))

    ((// (= class word) span)
     (display none))

    ((= class word:hover)
     (background-color "white"))

    ((// (= class word:hover) span)
     (display block)
     (background-color "#cccccc")
     (border-radius "5px")
     (color "black")
     (position absolute)
     (padding "5px")
     (top "1.3em")
     (left "0px")
     (max-width "400px")
     (white-space "nowrap")
     (z-index "50"))

    ((= class sidenote)
     (float right)
     (clear right)
     (margin-right -60%)
     (font-size 12pt)
     (line-height 130%)
     (width 50%))

    ((= class sidenote-number)
     (counter-increment sidenote-counter))

    ((&& (= class sidenote-number:after) (= class sidenote:before))
     (content "counter(sidenote-counter) \" \"")
     (position relative)
     (color "#3366bb"))

    ((= class sidenote-number:after)
     (content "counter(sidenote-counter) \" \"")
     (top -0.5rem)
     (left -0.1rem)
     (vertical-align super)
     (font-size 70%)
     (color "#3366bb")
     (font-size: 0.9rem))

    ((= class sidenote:before)
     (content "counter(sidenote-counter) \". \"")
     (position absolute)
     (-webkit-transform "translateX(-100%) translateX(-0.25rem)")
     (-ms-transform "translateX(-100%) translateX(-0.25rem)")
     (transform "translateX(-100%) translateX(-0.25rem)"))

    ((= class constr)  (color "#993366"))
    ((= class string)  (color "#339966"))
    ((= class comment) (color "#666666"))
    ((= class keyword) (color "#336699"))))

;; the SXML chunk representing the navigation menu
(define menu
  (let ((menu-item
         (lambda (name url)
           `(li (@ (class ,(string-append "menu-" name)))
                (a (@ (href ,url)) ,name)))))
    `(ul (@ (class navlist))
          ,(menu-item "index" "/")
          ,(menu-item "archive" "/archive/")
          ,(menu-item "tags" "/tags/")
          ,(menu-item "about" "/about/"))))

;; The SXML chunk representing a page on the site
(define (page url title content)
  `(html
    (head
     (meta (@ (http-equiv "Content-Type")
              (content "application/xhtml+xml; charset=utf-8;")))
     (meta (@ (property "og:title")
              (content ,(++ "what happens when computer: " title))))
     (meta (@ (property "og:url")
              (content ,(++ "https://what.happens.when.computer" url))))
     (meta (@ (property "og:image")
              (content "https://what.happens.when.computer/static/when-computer.png")))
     (meta (@ (property "og:type")
              (content "website")))
     (link (@ (href "/feed.xml")
              (type "application/atom+xml")
              (rel "alternate")
              (title "what happens when computer atom feed")))
     (link (@ (rel "icon")
              (type "image/png")
              (href "https://what.happens.when.computer/static/when-computer-icon.png")))
     (style (@ (type "text/css")) ,(scss->css stylesheet))
     (script (@ (type "text/javascript")
                (src "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML")) "")
     (title ,(string-append "what happens when computer: " title)))
    (div (@ (class "all"))
         (div (@ (class "header"))
              (h1 "what happens when computer"))
         (div (@ (class "nav")) ,menu)
         (div (@ (class "main")) ,content)
         (div (@ (class "footer")) "&copy; 2021 getty ritter"))))

;; if a page has tags, add those tags to the end of the page
(define (add-tags chunk tags)
  (define (tag->link tag)
    `(a (@ (href ,(format #f "/tag/~a/" tag))
           (class tag)) ,tag))
  (if (null? tags)
      chunk
      (append chunk
              `((div (@ (class "tags"))
                     (ul ,(map tag->link tags)))))))