From f426936c6cf7a06e37f5383abec338fda88dad2c Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Tue, 9 Sep 2025 07:29:30 +0000
Subject: [PATCH] help: Add external link icon as suffix in sidebar for
 external links.

Fixes https://chat.zulip.org/#narrow/channel/19-documentation/topic/left.20sidebar.20icon.20for.20external.20links.3F/with/2257078

These links should also open in a new window.
---
 starlight_help/astro.config.mjs    | 20 ++++++++++++++++++++
 starlight_help/src/styles/main.css | 15 +++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/starlight_help/astro.config.mjs b/starlight_help/astro.config.mjs
index 1f923c5d4b..40bdee92dd 100644
--- a/starlight_help/astro.config.mjs
+++ b/starlight_help/astro.config.mjs
@@ -94,6 +94,11 @@ export default defineConfig({
                 {
                     label: "Zulip homepage",
                     link: "https://zulip.com",
+                    attrs: {
+                        class: "external-icon-sidebar",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                    },
                 },
                 {
                     label: "Help center home",
@@ -109,10 +114,20 @@ export default defineConfig({
                         {
                             label: "Choosing a team chat app",
                             link: "https://blog.zulip.com/2024/11/04/choosing-a-team-chat-app/",
+                            attrs: {
+                                class: "external-icon-sidebar",
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                            },
                         },
                         {
                             label: "Why Zulip",
                             link: "https://zulip.com/why-zulip/",
+                            attrs: {
+                                class: "external-icon-sidebar",
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                            },
                         },
                         "trying-out-zulip",
                         {
@@ -371,6 +386,11 @@ export default defineConfig({
                         {
                             label: "Download apps for every platform",
                             link: "https://zulip.com/apps/",
+                            attrs: {
+                                class: "external-icon-sidebar",
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                            },
                         },
                         {
                             label: "Mobile app installation guides",
diff --git a/starlight_help/src/styles/main.css b/starlight_help/src/styles/main.css
index 639fa14dbb..b61c866de0 100644
--- a/starlight_help/src/styles/main.css
+++ b/starlight_help/src/styles/main.css
@@ -253,3 +253,18 @@
 footer {
     font-size: 0.85em;
 }
+
+.external-icon-sidebar {
+    display: inline-flex;
+    align-items: center;
+}
+
+.external-icon-sidebar::after {
+    content: "";
+    width: 1em;
+    height: 1em;
+    margin-left: 0.4em;
+    background: currentcolor;
+    mask: url("../../../web/shared/icons/external-link.svg") no-repeat center /
+        contain;
+}