add post references panel and move legacy notice to top of post

Remark plugin now collects PEP, docs, PyPI, GitHub refs into
remarkPluginFrontmatter. References display as grouped, color-coded
chips above the post body alongside the Blogger legacy notice.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JacobCoffee

src/assets/styles/global.css

@@ -1415,3 +1415,21 @@ body {
   background-color: rgba(160, 160, 170, 0.14);
   border-color: rgba(160, 160, 170, 0.32);
 }
+
+/* ── Post footer references panel ── */
+
+.post-refs-header {
+  background: linear-gradient(135deg, rgba(48, 105, 152, 0.04) 0%, rgba(255, 212, 59, 0.04) 100%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+.dark .post-refs-header {
+  background: linear-gradient(135deg, rgba(48, 105, 152, 0.08) 0%, rgba(255, 212, 59, 0.05) 100%);
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.post-refs-panel {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+.dark .post-refs-panel {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}

src/layouts/BlogPostLayout.astro

@@ -2,6 +2,12 @@
 import BaseLayout from "./BaseLayout.astro";
 import { formatDate, slugify, withBase } from "../lib/utils";
 
+interface Reference {
+  type: string;
+  label: string;
+  url: string;
+}
+
 interface Props {
   title: string;
   publishDate: string;
@@ -10,10 +16,31 @@ interface Props {
   description?: string | null;
   tags?: readonly string[];
   slug?: string;
+  legacyUrl?: string | null;
+  references?: Reference[];
 }
 
 const isDev = import.meta.env.DEV;
-const { title, publishDate, updatedDate, author, description, tags, slug } = Astro.props;
+const { title, publishDate, updatedDate, author, description, tags, slug, legacyUrl, references = [] } = Astro.props;
+const bloggerUrl = legacyUrl ? `https://pythoninsider.blogspot.com${legacyUrl}` : null;
+
+// Group references by type
+const refGroups = new Map<string, Reference[]>();
+for (const ref of references) {
+  if (!refGroups.has(ref.type)) refGroups.set(ref.type, []);
+  refGroups.get(ref.type)!.push(ref);
+}
+
+const groupMeta: Record<string, { label: string; order: number }> = {
+  "pep": { label: "PEPs", order: 0 },
+  "docs": { label: "Documentation", order: 1 },
+  "gh-repo": { label: "Repositories", order: 2 },
+  "gh-user": { label: "People", order: 3 },
+  "pypi": { label: "Packages", order: 4 },
+};
+
+const sortedGroups = [...refGroups.entries()]
+  .sort((a, b) => (groupMeta[a[0]]?.order ?? 99) - (groupMeta[b[0]]?.order ?? 99));
 ---
 
 <BaseLayout title={`${title} | Python Insider`} description={description ?? undefined}>
@@ -66,12 +93,100 @@ const { title, publishDate, updatedDate, author, description, tags, slug } = Ast
       <div class="mt-8 h-px" style="background: linear-gradient(to right, rgba(48, 105, 152, 0.3), rgba(255, 212, 59, 0.2), transparent);"></div>
     </header>
 
+    <!-- Blogger legacy notice -->
+    {bloggerUrl && (
+      <div class="not-prose mb-6 animate-fade-up stagger-1">
+        <a
+          href={bloggerUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center gap-3 rounded-lg border border-orange-200/60 bg-gradient-to-r from-orange-50 to-amber-50/50 px-4 py-3 transition-colors hover:border-orange-300/80 hover:from-orange-50 hover:to-amber-50 dark:border-orange-800/30 dark:from-orange-950/20 dark:to-amber-950/10 dark:hover:border-orange-700/40 dark:hover:from-orange-950/30 dark:hover:to-amber-950/20"
+        >
+          <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-orange-100 dark:bg-orange-900/30">
+            <svg class="h-4 w-4 text-orange-500 dark:text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 8v4l3 3" />
+              <circle cx="12" cy="12" r="10" />
+            </svg>
+          </div>
+          <div class="min-w-0 flex-1">
+            <p class="text-xs font-medium text-orange-800 dark:text-orange-300">Originally published on Blogger</p>
+            <p class="mt-0.5 truncate text-[11px] text-orange-600/70 dark:text-orange-400/50">{bloggerUrl}</p>
+          </div>
+          <svg class="h-4 w-4 flex-shrink-0 text-orange-400 dark:text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+          </svg>
+        </a>
+      </div>
+    )}
+
+    <!-- References panel -->
+    {sortedGroups.length > 0 && (
+      <div class="not-prose mb-8 animate-fade-up stagger-1">
+        <div class="post-refs-panel overflow-hidden rounded-xl border border-zinc-200/80 dark:border-zinc-700/60">
+          <div class="post-refs-header flex items-center gap-2.5 px-5 py-3">
+            <svg class="h-4 w-4 text-[#306998] dark:text-[#ffd43b]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+            </svg>
+            <span class="text-xs font-bold uppercase tracking-[0.12em] text-zinc-500 dark:text-zinc-400" style="font-family: var(--font-display);">
+              Referenced in this post
+            </span>
+            <span class="ml-auto text-[10px] tabular-nums font-medium text-zinc-400 dark:text-zinc-500">
+              {references.length}
+            </span>
+          </div>
+
+          <div class="space-y-px bg-zinc-100/50 dark:bg-zinc-800/30">
+            {sortedGroups.map(([type, refs]) => (
+              <div class="bg-white px-5 py-3.5 dark:bg-[#0f1117]">
+                <div class="mb-2.5 text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400 dark:text-zinc-500">
+                  {groupMeta[type]?.label ?? type}
+                </div>
+                <div class="flex flex-wrap gap-1.5">
+                  {refs.map((ref) => (
+                    <a
+                      href={ref.url}
+                      class:list={[
+                        "ref-footer-chip group inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-all",
+                        type === "pep" && "bg-amber-50 text-amber-800 hover:bg-amber-100 dark:bg-amber-900/20 dark:text-amber-300 dark:hover:bg-amber-900/40",
+                        type === "docs" && "bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-300 dark:hover:bg-blue-900/40",
+                        type === "gh-repo" && "bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700",
+                        type === "gh-user" && "bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700",
+                        type === "pypi" && "bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-900/20 dark:text-emerald-300 dark:hover:bg-emerald-900/40",
+                      ]}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {type === "pep" && (
+                        <svg class="h-3 w-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
+                      )}
+                      {type === "docs" && (
+                        <svg class="h-3 w-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
+                      )}
+                      {(type === "gh-repo" || type === "gh-user") && (
+                        <svg class="h-3 w-3 opacity-60" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+                      )}
+                      {type === "pypi" && (
+                        <svg class="h-3 w-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" x2="12" y1="22" y2="12"/></svg>
+                      )}
+                      <span class="truncate max-w-[200px]">{ref.label}</span>
+                      <svg class="h-2.5 w-2.5 opacity-0 transition-opacity group-hover:opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    )}
+
     <div class="animate-fade-up stagger-2">
       <slot />
     </div>
 
-    <footer class="not-prose mt-14 border-t border-zinc-200 pt-8 dark:border-zinc-700">
-      <div class="flex items-center justify-between">
+    <footer class="not-prose mt-16">
+      <!-- Navigation -->
+      <div class="flex items-center justify-between border-t border-zinc-200 pt-6 dark:border-zinc-700">
         <a
           href={withBase("/blog")}
           class="group inline-flex items-center gap-2 text-sm font-medium text-[#306998] transition-colors hover:text-[#254f73] dark:text-[#ffd43b] dark:hover:text-[#f0c419]"

src/pages/blog/[slug].astro

@@ -16,9 +16,9 @@ export const getStaticPaths: GetStaticPaths = async () => {
     }));
 };
 
-interface Props { post: CollectionEntry<"posts"> }
-const { post } = Astro.props;
-const { Content } = await render(post);
+const { post } = Astro.props as { post: CollectionEntry<"posts"> };
+const { Content, remarkPluginFrontmatter } = await render(post);
+const references = (remarkPluginFrontmatter?.references ?? []) as Array<{ type: string; label: string; url: string }>;
 ---
 
 <BlogPostLayout
@@ -29,6 +29,8 @@ const { Content } = await render(post);
   description={post.data.description}
   tags={post.data.tags}
   slug={post.id}
+  legacyUrl={post.data.legacyUrl}
+  references={references}
 >
   <Content />
 </BlogPostLayout>

src/plugins/remark-python-refs.ts

@@ -246,7 +246,19 @@ function splitMarkdocTags(value: string): Array<{ type: "text"; value: string }
 // ── Plugin ──────────────────────────────────────────────
 
 export default function remarkPythonRefs() {
-  return (tree: Root) => {
+  return (tree: Root, file: any) => {
+    // Collect unique references for the post footer
+    const seen = new Set<string>();
+    const refs: Array<{ type: RefType; label: string; url: string }> = [];
+
+    function collectRef(type: RefType, label: string, url: string) {
+      const key = `${type}:${url}`;
+      if (!seen.has(key)) {
+        seen.add(key);
+        refs.push({ type, label, url });
+      }
+    }
+
     // Pass 1: Transform matching links → badges
     visit(tree, "link", (node: Link, index, parent) => {
       if (index == null || !parent) return;
@@ -255,6 +267,7 @@ export default function remarkPythonRefs() {
       const info = classify(node.url, label);
       if (!info) return;
 
+      collectRef(info.type, label, node.url);
       const html = buildBadgeHtml({ ...info, label, url: node.url });
 
       // Replace the link node with a raw HTML node
@@ -288,5 +301,10 @@ export default function remarkPythonRefs() {
         node.children = newChildren;
       }
     });
+
+    // Expose collected references via remarkPluginFrontmatter
+    if (!file.data.astro) file.data.astro = {};
+    if (!file.data.astro.frontmatter) file.data.astro.frontmatter = {};
+    file.data.astro.frontmatter.references = refs;
   };
 }