src/pages/blog/index.astro


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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

---
import BaseHead from "../../components/BaseHead.astro";
import Header from "../../components/Header.astro";
import Footer from "../../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
import { getCollection } from "astro:content";
import FormattedDate from "../../components/FormattedDate.astro";

const blogs = await getCollection("blog");

const posts = blogs.sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);

const events = Object.keys(
  Object.groupBy(
    blogs.map((b) => ({
      id: b.id,
      event: b.id.split("/").at(-2) || "",
    })),
    (b) => b.event
  )
).toSorted((a, b) => +a.split("-").at(-1)!! - +b.split("-").at(-1)!!);
console.log(events);
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
    <style>
      main {
        width: 960px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      ul li {
        width: calc(50% - 1rem);
      }
      ul li * {
        text-decoration: none;
        transition: 0.2s ease;
      }
      ul li:first-child {
        width: 100%;
        margin-bottom: 1rem;
        text-align: center;
      }
      ul li:first-child img {
        width: 100%;
      }
      ul li:first-child .title {
        font-size: 2.369rem;
      }
      ul li img {
        margin-bottom: 0.5rem;
        border-radius: 12px;
      }
      ul li a {
        display: block;
      }
      .title {
        margin: 0;
        color: rgb(var(--black));
        line-height: 1;
      }
      .date {
        margin: 0;
        color: rgb(var(--gray));
      }
      ul li a:hover h4,
      ul li a:hover .date {
        color: rgb(var(--accent));
      }
      ul a:hover img {
        box-shadow: var(--box-shadow);
      }
      @media (max-width: 720px) {
        ul {
          gap: 0.5em;
        }
        ul li {
          width: 100%;
          text-align: center;
        }
        ul li:first-child {
          margin-bottom: 0;
        }
        ul li:first-child .title {
          font-size: 1.563em;
        }
      }
    </style>
  </head>
  <body>
    <Header />
    <main>
      <section>
        <ul>
          {
            events.map((event) => (
              <li>
                <a href={`/astro-blog/blog/${event}/`}>
                  <h4 class="title">{event}</h4>
                </a>
              </li>
            ))
          }
        </ul>
      </section>
    </main>
    <Footer />
  </body>
</html>