From 55e22c0ac19b72eba73a018bb19ea3786016bf28 Mon Sep 17 00:00:00 2001
From: nathalie-ckc <nathalie-ckc@linaro.org>
Date: Wed, 19 Aug 2026 09:42:54 -0700
Subject: [PATCH 1/2] Update WGNews.astro
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The links are showing up left-justified whereas the rest of the text in the news component is showing up center justified.

Following GitHub Copilot's guidance to add centering classes to the links container.

Why don't I see "justify-center" on any of the "headline" or "body" containers?
Copilot's answer: because those elements are being centered by text alignment, not by flex alignment.

headline (<h3>) and body (<p>) are plain block/text elements.
They’re centered via a parent with text-center (or inherited centering), which affects inline text.
justify-center only works on flex/grid containers to align child items along the main axis.
So for your links:

The <ul> is flex, so it needs justify-center.
Without it, flex defaults to justify-start, which is why links sit left.
In short:

Text elements → text-center
Flex item rows → justify-center
---
 src/components/WGNews.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WGNews.astro b/src/components/WGNews.astro
index 168eed8..65df980 100644
--- a/src/components/WGNews.astro
+++ b/src/components/WGNews.astro
@@ -19,7 +19,7 @@ const { items, heading = 'Latest News' } = Astro.props;
           <h3 class="text-cc-cyan mb-2 text-lg font-semibold">{item.headline}</h3>
           <p class="text-gray-200">{item.body}</p>
           {item.links && item.links.length > 0 && (
-            <ul class="mt-3 flex flex-wrap gap-4">
+            <ul class="mt-3 flex flex-wrap justify-center gap-4">
               {item.links.map((link) => (
                 <li>
                   <a

From 1da2e38bddd15626865426d0a54d04b758313c1d Mon Sep 17 00:00:00 2001
From: nathalie-ckc <nathalie-ckc@linaro.org>
Date: Thu, 20 Aug 2026 08:36:58 -0700
Subject: [PATCH 2/2] Update WGNews.astro

Make some of the changes discussed with Don:
* News headline larger (lg -> xl)
* have the link open in a new tab
* have the link appear underlined so that it's obvious it's a link without having to hover
---
 src/components/WGNews.astro | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/WGNews.astro b/src/components/WGNews.astro
index 65df980..50d2ffb 100644
--- a/src/components/WGNews.astro
+++ b/src/components/WGNews.astro
@@ -16,7 +16,7 @@ const { items, heading = 'Latest News' } = Astro.props;
     <div class="space-y-6">
       {items.map((item) => (
         <div class="border-b border-gray-700 pb-6 last:border-b-0 last:pb-0">
-          <h3 class="text-cc-cyan mb-2 text-lg font-semibold">{item.headline}</h3>
+          <h3 class="text-cc-cyan mb-2 text-xl font-semibold">{item.headline}</h3>
           <p class="text-gray-200">{item.body}</p>
           {item.links && item.links.length > 0 && (
             <ul class="mt-3 flex flex-wrap justify-center gap-4">
@@ -24,7 +24,9 @@ const { items, heading = 'Latest News' } = Astro.props;
                 <li>
                   <a
                     href={link.href}
-                    class="text-cc-cyan underline decoration-transparent transition-colors hover:decoration-current focus:outline-none focus:ring-2 focus:ring-cc-cyan focus:ring-offset-2 focus:ring-offset-gray-900 rounded"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-cc-cyan underline decoration-current transition-colors hover:decoration-current focus:outline-none focus:ring-2 focus:ring-cc-cyan focus:ring-offset-2 focus:ring-offset-gray-900 rounded"
                   >
                     {link.label}
                   </a>