python-insider-blog/src/pages/index.astro at d9ce30a391432d3bf1bb1f86ccda605c132208c5 · python/python-insider-blog · 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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
---
export const prerender = true;

import BaseLayout from "../layouts/BaseLayout.astro";
import PythonLogo from "../components/PythonLogo.astro";
import { formatDate, postUrl, withBase, renderDescriptionLinks } from "../lib/utils";
import { getCollection } from "astro:content";

const allPosts = await getCollection("posts");
const posts = allPosts
  .filter((p) => p.data.published)
  .sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime());

const featured = posts[0];
const recent = posts.slice(1, 9);
const totalPosts = posts.length;
const authors = new Set(posts.map((p) => p.data.author));
---

<BaseLayout title="Python Insider" image={withBase("/og/index.png")} fullWidth>
  <!-- Compact editorial strip -->
  <div class="border-b border-zinc-200 dark:border-zinc-800">
    <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-2.5">
      <p class="text-sm text-zinc-500 dark:text-zinc-400">
        News & updates from the <span class="font-medium text-zinc-700 dark:text-zinc-300">Python core team</span>
      </p>
      <div class="hidden items-center gap-4 text-xs text-zinc-400 dark:text-zinc-500 sm:flex">
        <span><strong class="font-semibold text-zinc-600 dark:text-zinc-300">{totalPosts}</strong> posts</span>
        <span class="text-zinc-300 dark:text-zinc-700">/</span>
        <span><strong class="font-semibold text-zinc-600 dark:text-zinc-300">{authors.size}</strong> authors</span>
        <span class="text-zinc-300 dark:text-zinc-700">/</span>
        <span>since <strong class="font-semibold text-zinc-600 dark:text-zinc-300">2011</strong></span>
        <a
          href={withBase("/rss.xml")}
          class="ml-1 inline-flex items-center gap-1 rounded-md bg-orange-50 px-2 py-0.5 font-medium text-orange-600 transition-colors hover:bg-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:hover:bg-orange-900/30"
        >
          <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24"><path d="M6.18 15.64a2.18 2.18 0 012.18 2.18C8.36 19 7.38 20 6.18 20 5 20 4 19 4 17.82a2.18 2.18 0 012.18-2.18zM4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44zM4 10.1a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z"/></svg>
          RSS
        </a>
      </div>
    </div>
  </div>

  <!-- Featured post — THE hero -->
  {featured && (
    <section class="mx-auto max-w-6xl px-6 pt-10 pb-8 sm:pt-14 sm:pb-10">
      <div class="animate-fade-up grid items-center gap-8 lg:grid-cols-[1fr_auto]">
        <div>
          <div class="mb-5 inline-flex items-center gap-2">
            <span class="latest-pulse h-2 w-2 rounded-full bg-green-500"></span>
            <span class="text-xs font-bold uppercase tracking-[0.15em] text-[#306998] dark:text-[#ffd43b]">Latest</span>
          </div>

          <a href={withBase(postUrl(featured.id, featured.data.publishDate))} class="group block">
            <h1
              class="max-w-4xl text-3xl font-extrabold leading-[1.15] tracking-tight text-zinc-900 transition-colors group-hover:text-[#306998] dark:text-zinc-100 dark:group-hover:text-[#ffd43b] sm:text-4xl lg:text-5xl"
              style="font-family: var(--font-display); letter-spacing: -0.02em;"
            >
              {featured.data.title}
            </h1>

            <div class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
              <span class="font-medium text-zinc-700 dark:text-zinc-300">{featured.data.author}</span>
              <span class="text-zinc-300 dark:text-zinc-600">&middot;</span>
              <time datetime={featured.data.publishDate.toISOString()}>{formatDate(featured.data.publishDate.toISOString())}</time>
            </div>

            {featured.data.description && (
              <p class="mt-3 max-w-2xl text-base leading-relaxed text-zinc-600 dark:text-zinc-400 sm:text-lg" set:html={renderDescriptionLinks(featured.data.description)} />
            )}
          </a>

          {featured.data.tags && featured.data.tags.length > 0 && (
            <div class="mt-4 flex flex-wrap gap-1.5">
              {featured.data.tags.slice(0, 5).map((tag) => (
                <a
                  href={withBase(`/tags/${tag}`)}
                  class="tag-pill rounded-md bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
                >
                  {tag}
                </a>
              ))}
            </div>
          )}
        </div>

        <!-- Python Logo -->
        <div class="hidden lg:block">
          <div class="relative">
            <div class="absolute -inset-6 rounded-full bg-gradient-to-br from-[#306998]/8 to-[#ffd43b]/8 blur-2xl dark:from-[#306998]/15 dark:to-[#ffd43b]/15"></div>
            <PythonLogo width={140} height={140} class="relative opacity-80 dark:opacity-60" />
          </div>
        </div>
      </div>
    </section>
  )}

  <!-- Divider -->
  <div class="mx-auto max-w-6xl px-6">
    <div class="h-px bg-zinc-200 dark:bg-zinc-800"></div>
  </div>

  <!-- Recent Posts — dense grid -->
  <section class="mx-auto max-w-6xl px-6 pt-8 pb-16 sm:pt-10">
    <div class="animate-fade-up stagger-2">
      <div class="mb-6 flex items-center justify-between">
        <h2 class="text-sm font-bold uppercase tracking-[0.1em] text-zinc-400 dark:text-zinc-500" style="font-family: var(--font-display);">Recent</h2>
        <a
          href={withBase("/blog")}
          class="group inline-flex items-center gap-1.5 text-sm font-medium text-[#306998] transition-colors hover:text-[#254f73] dark:text-[#ffd43b] dark:hover:text-[#f0c419]"
        >
          All posts
          <svg class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </a>
      </div>

      <div class="grid gap-px overflow-hidden rounded-xl border border-zinc-200 bg-zinc-200 dark:border-zinc-800 dark:bg-zinc-800 sm:grid-cols-2">
        {recent.map((post) => (
          <article class="post-card group relative bg-white p-5 dark:bg-[#0f1117]">
            <a href={withBase(postUrl(post.id, post.data.publishDate))} class="block">
              <h3 class="text-[0.9375rem] font-semibold leading-snug text-zinc-900 transition-colors group-hover:text-[#306998] dark:text-zinc-100 dark:group-hover:text-[#ffd43b]" style="font-family: var(--font-display);">
                {post.data.title}
              </h3>
            </a>
            <div class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-zinc-400 dark:text-zinc-500">
              <span class="font-medium text-zinc-500 dark:text-zinc-400">{post.data.author}</span>
              <span class="text-zinc-300 dark:text-zinc-700">&middot;</span>
              <time datetime={post.data.publishDate.toISOString()}>{formatDate(post.data.publishDate.toISOString())}</time>
            </div>
            {post.data.description && (
              <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400" set:html={renderDescriptionLinks(post.data.description)} />
            )}
          </article>
        ))}
      </div>

      <div class="mt-8 text-center">
        <a
          href={withBase("/blog")}
          class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 px-6 py-2.5 text-sm font-medium text-zinc-700 transition-all hover:border-zinc-400 hover:bg-zinc-50 dark:border-zinc-600 dark:text-zinc-300 dark:hover:border-zinc-500 dark:hover:bg-zinc-800"
        >
          Browse all {totalPosts} posts
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </a>
      </div>
    </div>
  </section>
</BaseLayout>