Update tags styling and add to MarkdownLayout

Author: webstackdev

src/components/Layout/Markdown/Tags/index.astro

@@ -58,7 +58,7 @@ const resolveTagMeta = (rawTag: string) => {
             href={href}
             rel="tag"
             itemprop="keywords"
-            class="inline-block px-2 py-0.5 bg-page-active rounded text-xs no-underline transition-colors hover:bg-spotlight hover:text-primary focus:bg-spotlight focus:text-primary"
+            class="uppercase inline-block pr-2 sm:pr-3 py-0.5 text-xs sm:text-sm no-underline transition-colors hover:text-secondary focus:bg-spotlight focus:text-secondary"
           >
             {label}
           </a>

src/content/articles/demo/index.mdx

@@ -6,7 +6,7 @@ coverAlt: "Hero image for Markdown page test fixture"
 author: "kevin-brown"
 publishDate: 2024-01-01
 modifiedDate: 2025-06-29
-tags: ["systems-and-development"]
+tags: ["systems-and-development", "build-and-deploy"]
 isDraft: true
 ---
 import Demo from '@components/Test/Demo.mdx'

src/layouts/MarkdownLayout.astro

@@ -9,6 +9,7 @@ import type { MarkdownHeading } from 'astro'
 import BaseLayout from '@layouts/BaseLayout.astro'
 import Lead from '@components/Layout/Markdown/Lead/index.astro'
 import Subtitle from '@components/Layout/Markdown/Subtitle/index.astro'
+import Tags from '@components/Layout/Markdown/Tags/index.astro'
 import Title from '@components/Layout/Markdown/Title/index.astro'
 import Toc from '@components/Toc/index.astro'
 
@@ -131,6 +132,11 @@ const shouldRenderToc = showToc !== false && tocHeadings.length > 0
     aria-labelledby="article-title"
   >
     <header class="mb-4 sm:mb-6">
+      {tags && tags.length > 0 && (
+        <div class="mb-2">
+          <Tags tags={tags} />
+        </div>
+      )}
       <Title pageTitle={pageTitle} />
       {subtitle && <Subtitle subtitle={subtitle} />}
       {