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; +}