Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: refactor social links configuration reference #869

Merged
merged 7 commits into from
Oct 15, 2023
Merged

docs: refactor social links configuration reference #869

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
76fbf54
docs: refactor social links configuration reference
HiDeoo Oct 11, 2023
0057d1b
Merge branch 'main' into hd-docs-social-links
HiDeoo Oct 11, 2023
7f25f55
docs: update supported link icons wording
HiDeoo Oct 12, 2023
236c48f
Merge branch 'main' into hd-docs-social-links
HiDeoo Oct 15, 2023
b701399
chore: add changes from #881
HiDeoo Oct 15, 2023
b5d5843
chore: fix eof newline
HiDeoo Oct 15, 2023
0201469
Merge branch 'main' into hd-docs-social-links
delucis Oct 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/src/components/social-links-type.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
import { socialLinks } from '../../../packages/starlight/schemas/social';

const socials = [...socialLinks].sort((a, b) => a.localeCompare(b, 'en'));
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Relying on localeCompare() in the compare function instead of a basic sort() to ensure a case-insensitive sort so that codeberg appears before codePen in the list for example.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Initially, I wondered if we should sort with the current page’s locale instead of always en, but on second thoughts, given this list’s contents, this makes sense 👍

---

<code>{`Partial<Record<${socials.map((social) => `'${social}'`).join(' | ')}, string>>`}</code>
Copy link
Sponsor Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component is very creative!

2 changes: 1 addition & 1 deletion docs/src/content/docs/guides/customization.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ defineConfig({

Starlight has built-in support for adding links to your social media accounts to the site header via the [`social`](/reference/configuration/#social) option in the Starlight integration.

Currently, links to Bitbucket, Codeberg, CodePen, Discord, Email, Facebook, GitHub, GitLab, Gitter, Instagram, LinkedIn, Mastodon, Microsoft Teams, an RSS feed, Stack Overflow, Telegram, Threads, Twitch, Twitter, X, and Youtube are supported.
You can find a full list of supported social medias in the [Configuration Reference](/reference/configuration/#social).
HiDeoo marked this conversation as resolved.
Show resolved Hide resolved
Let us know on GitHub or Discord if you need support for another service!

```js
Expand Down
6 changes: 4 additions & 2 deletions ...c/content/docs/reference/configuration.md → .../content/docs/reference/configuration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ interface BadgeConfig {

### `locales`

**type:** <code>{ \[dir: string\]: [LocaleConfig](#localeconfig) }</code>
**type:** <code>\{ \[dir: string\]: [LocaleConfig](#localeconfig) \}</code>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change required due to the MDX conversion to avoid interpreting this as an expression.


[Configure internationalization (i18n)](/guides/i18n/) for your site by setting which `locales` are supported.

Expand Down Expand Up @@ -308,7 +308,9 @@ The default locale will be used to provide fallback content where translations a

### `social`

**type:** `Partial<Record<'bitbucket' | 'codeberg' | 'codePen' | 'discord' | 'email' | 'facebook' | 'github' | 'gitlab' | 'gitter' | 'instagram' | 'linkedin' | 'mastodon' | 'microsoftTeams' | 'rss' | 'stackOverflow' | 'telegram' | 'threads' | 'twitch' | 'twitter' | 'x.com' | 'youtube', string>>`
import SocialLinksType from '../../../components/social-links-type.astro';

**type:** <SocialLinksType />

Optional details about the social media accounts for this site. Adding any of these will display them as icon links in the site header.

Expand Down
48 changes: 25 additions & 23 deletions packages/starlight/schemas/social.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
import { z } from 'astro/zod';

export const socialLinks = [
'twitter',
'mastodon',
'github',
'gitlab',
'bitbucket',
'discord',
'gitter',
'codeberg',
'codePen',
'youtube',
'threads',
'linkedin',
'twitch',
'microsoftTeams',
'instagram',
'stackOverflow',
'x.com',
'telegram',
'rss',
'facebook',
'email',
] as const;

export const SocialLinksSchema = () =>
z
.record(
z.enum([
'twitter',
'mastodon',
'github',
'gitlab',
'bitbucket',
'discord',
'gitter',
'codeberg',
'codePen',
'youtube',
'threads',
'linkedin',
'twitch',
'microsoftTeams',
'instagram',
'stackOverflow',
'x.com',
'telegram',
'rss',
'facebook',
'email',
]),
z.enum(socialLinks),
// Link to the respective social profile for this site
z.string().url()
)
Expand Down