~aasg/haunted-blog

fef67bdcac88c14b6ac6affe93e290c1a4fb6ee2 — Aluísio Augusto Silva Gonçalves 10 months ago f2bedc9
Render post tags and relayout post lists
2 files changed, 63 insertions(+), 12 deletions(-)

M haunt.scm
M static/css/site.css
M haunt.scm => haunt.scm +23 -7
@@ 199,20 199,36 @@
            (h1 (@ (class "p-name")) ,(post-ref post 'title))
            (div (@ (class "e-content")) ,(post-sxml post))))

(define (taglist post)
  (define (tag-link tag)
    `(span (@ (class "p-category")
              (aria-label ,(string-append "tagged: " tag))) ,tag))
  (let ((tags (post-ref post 'tags)))
    (if (or (not tags) (null? tags)) '()
        (cdr (reverse (fold (lambda (tag sxml)
                              (cons* (tag-link tag) " " sxml)) '() tags))))))

(define (aasg-collection-template site title posts prefix)
  (define (post-uri post)
    (string-append (or prefix "") (site-post-slug site post) ".html"))
  (define (post-entry post)
    `(article (@ (class "h-entry"))
              (div (@ (class "post-info-card"))
                   (h3 (@ (class "p-name"))
                       (a (@ (class "u-url")
                             (href ,(post-uri post)))
                          ,(post-ref post 'title)))
                   (time (@ (class "dt-published"))
                         ,(date->string (post-date post) "~1"))
                   ,(taglist post))
              (div (@ (class "p-summary"))
                   ,(first-paragraph post))
              ,(link-as "continue…" (post-uri post))))
  (define %preamble
    (post-sxml (read-post html-reader "pages/_index.html")))
  `(,%preamble
     (h2 "Recent posts")
     ,(map (lambda (post)
             `(article
                (h3 ,(link-as (post-ref post 'title) (post-uri post)))
                (time ,(date->string (post-date post) "~1"))
                ,(first-paragraph post)
                ,(link-as "continue…" (post-uri post))))
           posts)))
     ,(map post-entry posts)))

(define aasg-post-theme
  (theme #:name "aasg-posts"

M static/css/site.css => static/css/site.css +40 -5
@@ 111,7 111,7 @@ footer p {
}

/* Display post metadata in a background color. */
.post-info, .post-comments {
.post-info, .post-info-card, .post-comments {
  color: var(--text-secondary);
}



@@ 121,17 121,21 @@ footer p {
  text-align: end;
}

/* Pad headings so they don't go under the header bar.
/* Pad section headings so they don't go under the header bar.
 * Taken from https://css-tricks.com/hash-tag-links-padding/ */
/* TODO: this could really benefit from :matches/:is */
h1, h2, h3, h4, h5, h6 {
h1:not(.p-name),
h2:not(.p-name),
h3:not(.p-name),
h4:not(.p-name),
h5:not(.p-name),
h6:not(.p-name) {
  display: inline-block;
  margin-top: -4rem;
  padding-top: 4rem;
}

/* Except the article title from the above rule.  In fact, apply no
 * padding at all. */
/* Remove all padding from the article title. */
.h-entry h1.p-name {
  margin: 0;
  padding: 0;


@@ 151,3 155,34 @@ article.h-card #identities {
.h-entry .p-category:before {
  content: "#";
}

/* Organize the post title and metadata in the posts list. */
.post-info-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (min-width: 40em) {
  .post-info-card {
    justify-content: flex-start;
  }
}
.post-info-card .dt-published {
  flex-grow: 1;
  break-after: always;
  text-align: end;
  padding-top: 0.5384615em;
}
.post-info-card .p-category {
  padding-right: 0.5384615em;
}

/* Move around the padding in the post list metadata. */
.post-info-card {
  margin: 1.5em 0 0em;
  padding: 0.3em 0;
}
.post-info-card .p-name {
  margin: 0;
  padding: 0;
}