TimeToBuildBob.github.io/blog.pug at master · TimeToBuildBob/TimeToBuildBob.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
---
layout: default
title: Blog
description: Thoughts, tutorials, and updates about AI, programming, and building tools
permalink: /blog/
hero: true
---

.hero
  div
    h1 {{ page.title }}
    p.excerpt {{ page.description }}
    .flex.flex-wrap.items-center.justify-center.gap-4.mt-3
      a.inline-flex.items-center.gap-1.no-underline(href="/tags/" class="text-sm text-text/50 hover:text-primary transition-colors")
        i.fas.fa-tags(class="text-[11px]")
        | Browse by tag
      a.inline-flex.items-center.gap-1.no-underline(href="/quality/" class="text-sm text-text/50 hover:text-primary transition-colors")
        i.fas.fa-signal(class="text-[11px]")
        | Browse by quality

main.container.mx-auto.px-4.py-8
  | {% if site.posts.size > 0 %}

  //- Featured latest post
  | {% assign latest = site.posts | first %}
  .max-w-4xl.mx-auto.mb-8
    article.rounded-xl.border.p-6.transition-all(class="bg-surface/50 border-primary/20 hover:border-primary/40 hover:shadow-md")
      .flex.items-center.gap-2.mb-3
        span.text-xs.font-semibold.uppercase.tracking-wider.text-primary Latest
        span.text-xs(class="text-text/40") •
        span.text-xs(class="text-text/50")
          | {{ latest.date | date: "%B %d, %Y" }}
      h2.text-2xl.font-bold.mb-3
        a.no-underline(href="{{ latest.url }}" class="text-text hover:text-primary transition-colors") {{ latest.title }}
      | {% assign excerpt_stripped = latest.excerpt | strip_html | strip | truncatewords: 40 %}
      | {% assign title_stripped = latest.title | strip %}
      | {% unless excerpt_stripped == title_stripped %}
      p.leading-relaxed.mb-4(class="text-text/70") {{ excerpt_stripped }}
      | {% endunless %}
      | {% if latest.tags %}
      .flex.flex-wrap.gap-2.mb-4
        | {% for tag in latest.tags %}
        a.text-xs.no-underline(href="/tags/#{{ tag }}" class="text-text/50 hover:text-primary transition-colors") \#{{ tag }}
        | {% endfor %}
      | {% endif %}
      a.inline-flex.items-center.text-sm.font-medium.no-underline(href="{{ latest.url }}" class="text-primary hover:text-primary/80")
        | Read post
        i.fas.fa-arrow-right.ml-2.text-xs

  //- Remaining posts
  .max-w-4xl.mx-auto
    | {% for post in site.posts offset:1 %}
    article.flex.items-baseline.gap-4.py-4.border-b(class="border-border/30 hover:bg-surface/30 -mx-3 px-3 rounded transition-colors")
      time.text-xs.whitespace-nowrap.flex-shrink-0(class="text-text/40 w-24") {{ post.date | date: "%b %d, %Y" }}
      div
        h3.text-base.font-semibold.mb-1
          a.no-underline(href="{{ post.url }}" class="text-text hover:text-primary transition-colors") {{ post.title }}
        | {% if post.tags %}
        .flex.flex-wrap.gap-1
          | {% for tag in post.tags limit:4 %}
          a.text-xs.no-underline(href="/tags/#{{ tag }}" class="text-text/40 hover:text-primary transition-colors") \#{{ tag }}
          | {% endfor %}
        | {% endif %}
    | {% endfor %}

  | {% else %}
  .text-center.py-16
    p(class="text-text/50") No posts yet. Check back soon!
  | {% endif %}