From ea999c4afa0e72da5a5510d30a7bc13380e10a4a Mon Sep 17 00:00:00 2001
From: Chris Swithinbank
Date: Tue, 9 May 2023 23:01:41 +0200
Subject: Show social icon links in header (#35)
---
.changeset/large-planets-think.md | 5 +++
docs/astro.config.mjs | 4 +++
docs/src/content/docs/reference/configuration.md | 8 +++--
packages/starlight/components/Header.astro | 3 ++
packages/starlight/components/Icons.ts | 8 ++++-
packages/starlight/components/SocialIcons.astro | 44 ++++++++++++++++++++++++
packages/starlight/utils/user-config.ts | 14 +++++---
7 files changed, 78 insertions(+), 8 deletions(-)
create mode 100644 .changeset/large-planets-think.md
create mode 100644 packages/starlight/components/SocialIcons.astro
diff --git a/.changeset/large-planets-think.md b/.changeset/large-planets-think.md
new file mode 100644
index 00000000..cb66db5d
--- /dev/null
+++ b/.changeset/large-planets-think.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Add support for social media links in the site header.
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index d7ff460a..41223fe0 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -9,6 +9,10 @@ export default defineConfig({
editLink: {
baseUrl: 'https://github.com/withastro/starlight/edit/main/docs/',
},
+ social: {
+ github: 'https://github.com/withastro/starlight',
+ discord: 'https://astro.build/chat',
+ },
locales: {
root: {
label: 'English',
diff --git a/docs/src/content/docs/reference/configuration.md b/docs/src/content/docs/reference/configuration.md
index 22f84107..d58b6f11 100644
--- a/docs/src/content/docs/reference/configuration.md
+++ b/docs/src/content/docs/reference/configuration.md
@@ -191,13 +191,15 @@ The default locale will be used to provide fallback content where translations a
### `social`
-Optional details about the social media accounts for this site.
+Optional details about the social media accounts for this site. Adding any of these will display them as icon links in the site header.
```js
starlight({
social: {
- // Main Twitter handle for this site
- twitter: 'astrodotbuild',
+ discord: 'https://astro.build/chat',
+ github: 'https://github.com/withastro/starlight',
+ mastodon: 'https://m.webtoo.ls/@astro',
+ twitter: 'https://twitter.com/astrodotbuild',
},
});
```
diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro
index f35e9e79..7547c30e 100644
--- a/packages/starlight/components/Header.astro
+++ b/packages/starlight/components/Header.astro
@@ -3,6 +3,7 @@ import config from 'virtual:starlight/user-config';
import LanguageSelect from './LanguageSelect.astro';
import Search from './Search.astro';
import ThemeSelect from './ThemeSelect.astro';
+import SocialIcons from './SocialIcons.astro';
interface Props {
locale: string | undefined;
@@ -13,6 +14,7 @@ interface Props {
{config.title}
+
@@ -37,6 +39,7 @@ interface Props {
.right-group {
gap: 1rem;
+ align-items: center;
}
@media (min-width: 50rem) {
diff --git a/packages/starlight/components/Icons.ts b/packages/starlight/components/Icons.ts
index 133e6fe6..c85472e4 100644
--- a/packages/starlight/components/Icons.ts
+++ b/packages/starlight/components/Icons.ts
@@ -39,5 +39,11 @@ export const Icons = {
'list-format':
'',
github:
- '',
+ '',
+ discord:
+ '',
+ twitter:
+ '',
+ mastodon:
+ '',
};
diff --git a/packages/starlight/components/SocialIcons.astro b/packages/starlight/components/SocialIcons.astro
new file mode 100644
index 00000000..5e65c8fe
--- /dev/null
+++ b/packages/starlight/components/SocialIcons.astro
@@ -0,0 +1,44 @@
+---
+import config from 'virtual:starlight/user-config';
+import Icon from './Icon.astro';
+
+type Platform = keyof NonNullable;
+
+const labels: Record = {
+ github: 'GitHub',
+ discord: 'Discord',
+ twitter: 'Twitter',
+ mastodon: 'Mastodon',
+};
+
+const links = Object.entries(config.social || {}).filter(([, url]) =>
+ Boolean(url)
+) as [platform: Platform, url: string][];
+---
+
+{
+ links.length > 0 && (
+ <>
+ {links.map(([platform, url]) => (
+
+ {labels[platform]}
+
+
+ ))}
+
+
+ )
+}
+
+
diff --git a/packages/starlight/utils/user-config.ts b/packages/starlight/utils/user-config.ts
index 444a3baa..b5032704 100644
--- a/packages/starlight/utils/user-config.ts
+++ b/packages/starlight/utils/user-config.ts
@@ -84,7 +84,7 @@ const SidebarGroupSchema: z.ZodType<
ManualSidebarGroup | z.infer
> = z.union([ManualSidebarGroupSchema, AutoSidebarGroupSchema]);
-const StarlightUserConfigSchema = z.object({
+const UserConfigSchema = z.object({
/** Title for your website. Will be used in metadata and as browser tab title. */
title: z
.string()
@@ -103,8 +103,14 @@ const StarlightUserConfigSchema = z.object({
/** Optional details about the social media accounts for this site. */
social: z
.object({
- /** Main Twitter handle for this site, e.g. `'astrodotbuild'`. */
- twitter: z.string().optional(),
+ /** Link to the main Twitter profile for this site, e.g. `'https://twitter.com/astrodotbuild'`. */
+ twitter: z.string().url().optional(),
+ /** Link to the main Mastodon profile for this site, e.g. `'https://m.webtoo.ls/@astro'`. */
+ mastodon: z.string().url().optional(),
+ /** Link to the main GitHub org or repo for this site, e.g. `'https://github.com/withastro/starlight'`. */
+ github: z.string().url().optional(),
+ /** Link to the Discord server for this site, e.g. `'https://astro.build/chat'`. */
+ discord: z.string().url().optional(),
})
.optional(),
@@ -202,7 +208,7 @@ const StarlightUserConfigSchema = z.object({
customCss: z.string().array().optional().default([]),
});
-export const StarlightConfigSchema = StarlightUserConfigSchema.strict().transform(
+export const StarlightConfigSchema = UserConfigSchema.strict().transform(
({ locales, defaultLocale, ...config }, ctx) => {
if (locales !== undefined && Object.keys(locales).length > 1) {
// This is a multilingual site (more than one locale configured).
--
cgit