sumup · matoous · Apr 21, 2026 · Apr 21, 2026 · Apr 21, 2026
diff --git a/src/content/docs/terminal-payments/sdks/android-ttp.mdx b/src/content/docs/terminal-payments/sdks/android-ttp.mdx
@@ -13,7 +13,7 @@ The Android Tap-to-Pay SDK enables your mobile app to accept card-present contac
 - Intended for live, customer-facing use.
 - The SDK is not debuggable. Additionally, **Attestation & Monitoring** is enabled. If a device fails to meet our security policies (e.g., debug mode enabled or rooted device), payment operations will be disabled.
 - For testing purposes, use dedicated developer credentials to prevent actual card charges. The more information about testing can be found in the [Testing the SDK](#testing-the-sdk) section.
-- For the latest updates, consult the [Android Tap-to-Pay SDK Changelog](/changelog/android-tap-to-pay-sdk).
+- For the latest updates, consult the [Android Tap-to-Pay SDK Changelog](/changelog/?tag=android-tap-to-pay-sdk).
 - See our [Android Tap-to-Pay SDK sample app](https://github.com/sumup/android-tap-to-pay) to get started. As noted below, credentials to access and use the SDK is restricted pending review and must be requested via our Integration team.
 
 ## Prerequisites

diff --git a/src/pages/changelog/[slug].astro b/src/pages/changelog/[slug].astro
@@ -0,0 +1,83 @@
+---
+import { getCollection } from "astro:content";
+import slugify from "@sindresorhus/slugify";
+import { Anchor, Body } from "@sumup-oss/circuit-ui";
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import MarkdownContent from "@astrojs/starlight/components/MarkdownContent.astro";
+import type { StarlightPageProps } from "@astrojs/starlight/props";
+
+export async function getStaticPaths() {
+  const changelogEntries = await getCollection("changelog");
+
+  return changelogEntries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+const props = {
+  frontmatter: {
+    title: entry.data.title,
+    template: "splash",
+    tableOfContents: false,
+  },
+  custom: true,
+} as StarlightPageProps;
+---
+
+<StarlightPage {...props}>
+  <main data-pagefind-body>
+    <article class="post">
+      <MarkdownContent>
+        <Content />
+      </MarkdownContent>
+    </article>
+    <Body size="s" color="subtle" className="meta">
+      <span class="metaItem">
+        <time
+          data-pagefind-meta="datetime"
+          datetime={entry.data.publishedDate.toISOString()}
+        >
+          {entry.data.publishedDate.toISOString().split("T")[0]}
+        </time>
+      </span>
+      {
+        entry.data.tags.map((tag: string) => (
+          <span class="metaItem">
+            <Anchor size="s" href={`/changelog/?tag=${slugify(tag)}`}>
+              {tag}
+            </Anchor>
+          </span>
+        ))
+      }
+    </Body>
+  </main>
+</StarlightPage>
+
+<style lang="scss">
+  .meta {
+    margin-top: var(--cui-spacings-giga);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .metaItem {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .metaItem:not(:last-child)::after {
+    content: "\00B7";
+    margin: 0 var(--cui-spacings-byte);
+  }
+
+  :global(.expressive-code .frame pre) {
+    overflow: auto;
+    scrollbar-width: thin;
+  }
+</style>
diff --git a/src/pages/changelog/[...tag].astro → src/pages/changelog/index.astro b/src/pages/changelog/[...tag].astro → src/pages/changelog/index.astro
@@ -1,44 +1,32 @@
 ---
 import { getCollection } from "astro:content";
 import slugify from "@sindresorhus/slugify";
-import { Badge, Body, Button, Anchor } from "@sumup-oss/circuit-ui";
+import { Badge, Body, Button, Anchor, Headline } from "@sumup-oss/circuit-ui";
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-import type { StarlightPageProps } from "@astrojs/starlight/props";
-import { Headline } from "@sumup-oss/circuit-ui";
 import MarkdownContent from "@astrojs/starlight/components/MarkdownContent.astro";
+import type { StarlightPageProps } from "@astrojs/starlight/props";
+
+export const prerender = false;
 
-const { tag: currentTag } = Astro.params;
+const currentTag = Astro.url.searchParams.get("tag") ?? undefined;
 
 const changelogDocs = await getCollection("changelog");
 
 const allTags = [
   ...new Set(changelogDocs.flatMap(({ data: { tags } }) => tags)),
 ];
 
-const collectionDocs = (
-  await getCollection(
-    "changelog",
+const getEntryHref = (slug: string) => `/changelog/${slug}/`;
+const getTagHref = (tag: string) => `/changelog/?tag=${slugify(tag)}`;
+
+const collectionDocs = changelogDocs
+  .filter(
     ({ data: { tags } }) =>
       !currentTag || tags.map((tag) => slugify(tag)).includes(currentTag),
   )
-)
   .sort(
     (a, b) => b.data.publishedDate.valueOf() - a.data.publishedDate.valueOf(),
-  )
-  .map((entry) => ({
-    ...entry,
-  }));
-
-export async function getStaticPaths() {
-  const posts = (await getCollection("changelog")).flatMap(
-    ({ data }) => data.tags,
   );
-  const tags = ["", ...new Set(posts)];
-
-  return tags.map((tag) => ({
-    params: { tag: slugify(tag) },
-  }));
-}
 
 const posts = await Promise.all(
   collectionDocs.map(async (page) => {
@@ -47,11 +35,13 @@ const posts = await Promise.all(
   }),
 );
 
-const tagName = posts.at(0)?.data.tags.find((t) => slugify(t) === currentTag);
+const tagName = posts
+  .at(0)
+  ?.data.tags.find((tag) => slugify(tag) === currentTag);
 
 const props = {
   frontmatter: {
-    title: tagName ? `${tagName} Changelog` : `Changelog`,
+    title: tagName ? `${tagName} Changelog` : "Changelog",
     noindex: Boolean(currentTag),
     template: "splash",
     tableOfContents: false,
@@ -71,7 +61,7 @@ const props = {
       {
         allTags.map((tag) => (
           <li>
-            <a href={`/changelog/${slugify(tag)}`}>
+            <a href={getTagHref(tag)}>
               <Badge>{tag}</Badge>
             </a>
           </li>
@@ -113,38 +103,41 @@ const props = {
   <main class="content" data-pagefind-body>
     {
       posts.map(
-        async ({ Content, slug, data: { title, tags, publishedDate } }) => {
-          return (
-            <>
-              <div class="post" id={`entry-${slug}`}>
-                <Headline as="h2" size="s" className="title">
-                  {title}
-                </Headline>
-                <Body size="s" color="subtle" className="meta">
+        async ({ Content, slug, data: { title, tags, publishedDate } }) => (
+          <div class="post" id={`entry-${slug}`}>
+            <Headline as="h2" size="s" className="title">
+              <a class="titleLink" href={getEntryHref(slug)}>
+                {title}
+              </a>
+            </Headline>
+            <Body size="s" color="subtle" className="meta">
+              <span class="metaItem">
+                <time
+                  data-pagefind-meta="datetime"
+                  datetime={publishedDate.toISOString()}
+                >
+                  {publishedDate.toISOString().split("T")[0]}
+                </time>
+              </span>
+              {tags &&
+                tags.map((tag) => (
                   <span class="metaItem">
-                    <time
-                      data-pagefind-meta="datetime"
-                      datetime={publishedDate.toISOString()}
-                    >
-                      {publishedDate.toISOString().split("T")[0]}
-                    </time>
+                    <Anchor size="s" href={getTagHref(tag)}>
+                      {tag}
+                    </Anchor>
                   </span>
-                  {tags &&
-                    tags.map((tag) => (
-                      <span class="metaItem">
-                        <Anchor size="s" href={`./${slugify(tag)}`}>
-                          {tag}
-                        </Anchor>
-                      </span>
-                    ))}
-                </Body>
-                <MarkdownContent>
-                  <Content />
-                </MarkdownContent>
-              </div>
-            </>
-          );
-        },
+                ))}
+              <span class="metaItem">
+                <Anchor size="s" href={getEntryHref(slug)}>
+                  Permalink
+                </Anchor>
+              </span>
+            </Body>
+            <MarkdownContent>
+              <Content />
+            </MarkdownContent>
+          </div>
+        ),
       )
     }
   </main>
@@ -185,6 +178,16 @@ const props = {
     margin-bottom: var(--cui-spacings-bit);
   }
 
+  .titleLink {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .titleLink:hover,
+  .titleLink:focus-visible {
+    text-decoration: underline;
+  }
+
   .post {
     padding-bottom: var(--cui-spacings-tera);
     border-bottom: 1px solid var(--cui-border-divider);

diff --git a/src/pages/changelog/rss.xml.ts b/src/pages/changelog/rss.xml.ts
@@ -23,7 +23,7 @@ export async function GET(context: { site: URL | undefined }) {
       title: entry.data.title,
       pubDate: entry.data.publishedDate,
       description: toDescription(entry.body),
-      link: `/changelog/#entry-${entry.slug}`,
+      link: `/changelog/${entry.slug}/`,
     })),
   });
 }