Skip to content

Commit 230699f

Browse files
YDX-21474836473w36zj6
YDX-2147483647
and
3w36zj6
authored
feat: support general social links and icons (#39)
Co-authored-by: 3w36zj6 <[email protected]>
1 parent dc5ef5c commit 230699f

File tree

14 files changed

+196
-79
lines changed

14 files changed

+196
-79
lines changed

‎.github/workflows/ci.yaml‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,13 @@ jobs:
100100
"typstOfficialUrl": "https://typst.app",
101101
"typstOfficialDocsUrl": "https://typst.app/docs/",
102102
"githubOrganizationUrl": "https://github.com/typst-community",
103-
"githubRepositoryUrl": "https://github.com/typst-community/typst-docs-web",
104-
"discordServerUrl": "https://discord.gg/2uDybryKPe",
103+
"socialLinks": [
104+
{ "url": "https://github.com/typst-community/typst-docs-web" },
105+
{
106+
"title": "Discord (Typst)",
107+
"url": "https://discord.gg/2uDybryKPe"
108+
}
109+
],
105110
"originUrl": "https://example.com/",
106111
"basePath": "${{ matrix.base }}",
107112
"displayTranslationStatus": false

‎README.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,13 @@ Create `/public/metadata.json` and describe the metadata for the documentation w
4949
"typstOfficialUrl": "https://typst.app",
5050
"typstOfficialDocsUrl": "https://typst.app/docs/",
5151
"githubOrganizationUrl": "https://github.com/typst-jp",
52-
"githubRepositoryUrl": "https://github.com/typst-jp/docs",
53-
"discordServerUrl": "https://discord.gg/9xF7k4aAuH",
52+
"socialLinks": [
53+
{ "url": "https://github.com/typst-jp/docs" },
54+
{
55+
"title": "Discord (Kumihan Club)",
56+
"url": "https://discord.gg/9xF7k4aAuH"
57+
}
58+
],
5459
"originUrl": "https://typst-jp.github.io/",
5560
"basePath": "/docs/",
5661
"displayTranslationStatus": true

‎metadata.schema.json‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,43 @@
2626
"format": "uri",
2727
"description": "The GitHub organization URL."
2828
},
29+
"socialLinks": {
30+
"type": "array",
31+
"description": "Social links to show in the header and footer. The order of items will be the display order.",
32+
"items": {
33+
"type": "object",
34+
"properties": {
35+
"url": {
36+
"type": "string",
37+
"format": "uri",
38+
"description": "The social link. For example, a GitHub repository URL, a Discord server invite URL, or a homepage.",
39+
"examples": [
40+
"https://github.com/typst/typst",
41+
"https://discord.gg/2uDybryKPe",
42+
"https://typst-jp.github.io",
43+
"https://qm.qq.com/q/Random1234"
44+
]
45+
},
46+
"title": {
47+
"type": "string",
48+
"description": "A brief title of the social link. If not given, a default title will be generated.",
49+
"examples": ["Discord (Kumihan Club)"]
50+
}
51+
},
52+
"required": ["url"]
53+
}
54+
},
2955
"githubRepositoryUrl": {
3056
"type": "string",
3157
"format": "uri",
32-
"description": "The GitHub repository URL."
58+
"deprecated": true,
59+
"description": "The GitHub repository URL. Deprecated, please use `socialLinks` instead."
3360
},
3461
"discordServerUrl": {
3562
"type": "string",
3663
"format": "uri",
37-
"description": "The Discord server invite URL."
64+
"deprecated": true,
65+
"description": "The Discord server invite URL. Deprecated, please use `socialLinks` instead."
3866
},
3967
"originUrl": {
4068
"type": "string",
@@ -57,8 +85,7 @@
5785
"typstOfficialUrl",
5886
"typstOfficialDocsUrl",
5987
"githubOrganizationUrl",
60-
"githubRepositoryUrl",
61-
"discordServerUrl",
88+
"socialLinks",
6289
"originUrl",
6390
"basePath",
6491
"displayTranslationStatus"

‎src/components/icons/DiscordIcon.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ export const DiscordIcon = () => {
22
return (
33
<svg
44
fill="currentColor"
5-
role="img"
5+
role="graphics-symbol"
66
viewBox="0 0 24 24"
77
xmlns="http://www.w3.org/2000/svg"
88
>
9-
<title>Discord</title>
109
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
1110
</svg>
1211
);

‎src/components/icons/GitHubIcon.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ export const GitHubIcon = () => {
22
return (
33
<svg
44
fill="currentColor"
5-
role="img"
5+
role="graphics-symbol"
66
viewBox="0 0 24 24"
77
xmlns="http://www.w3.org/2000/svg"
88
>
9-
<title>GitHub</title>
109
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
1110
</svg>
1211
);

‎src/components/icons/LinkIcon.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export const LinkIcon = () => {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 16 16"
6+
role="graphics-symbol"
7+
>
8+
<path
9+
fill="currentColor"
10+
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"
11+
/>
12+
</svg>
13+
);
14+
};

‎src/components/icons/QQIcon.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export const QQIcon = () => {
2+
return (
3+
<svg
4+
fill="currentColor"
5+
role="graphics-symbol"
6+
viewBox="0 0 24 24"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path d="M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673" />
10+
</svg>
11+
);
12+
};

‎src/components/icons/index.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,22 @@ export { CaretRightCircleIcon } from "./CaretRightCircleIcon";
66
export { ChevronLeftIcon } from "./ChevronLeftIcon";
77
export { ChevronRightIcon } from "./ChevronRightIcon";
88
export { CloseIcon } from "./CloseIcon";
9-
export { DiscordIcon } from "./DiscordIcon";
10-
// Simple Icons
11-
// https://simpleicons.org/
12-
export { GitHubIcon } from "./GitHubIcon";
139
export { HelpCircleIcon } from "./HelpCircleIcon";
1410
export { HomeIcon } from "./HomeIcon";
1511
export { InfoCircleIcon } from "./InfoCircleIcon";
1612
export { LanguageIcon } from "./LanguageIcon";
1713
export { MenuIcon } from "./MenuIcon";
1814
export { SearchIcon } from "./SearchIcon";
1915
export { WorldIcon } from "./WorldIcon";
16+
17+
// Simple Icons
18+
// https://simpleicons.org/
19+
20+
export { DiscordIcon } from "./DiscordIcon";
21+
export { GitHubIcon } from "./GitHubIcon";
22+
export { QQIcon } from "./QQIcon";
23+
24+
// Octicons
25+
// https://primer.style/octicons/
26+
27+
export { LinkIcon } from "./LinkIcon";

‎src/components/ui/common/Footer.tsx‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { discordServerUrl, githubRepositoryUrl } from "../../../metadata";
21
import { Translation } from "../../../translation/";
3-
import { DiscordIcon, GitHubIcon } from "../../icons";
2+
import { SocialLinkIcons } from "./SocialLinkIcons";
43

54
export const Footer = () => {
65
return (
@@ -9,24 +8,7 @@ export const Footer = () => {
98
<hr class="border-t border-gray-200" />
109
<div class="prose max-w-screen-xl px-4 py-12 mx-auto space-y-8 overflow-hidden sm:px-6 lg:px-8">
1110
<div class="flex justify-center mt-8 space-x-6">
12-
<a
13-
href={discordServerUrl}
14-
class="text-gray-600 hover:text-gray-800 transition-colors"
15-
>
16-
<span class="sr-only">Discord</span>
17-
<div class="w-6 h-6">
18-
<DiscordIcon />
19-
</div>
20-
</a>
21-
<a
22-
href={githubRepositoryUrl}
23-
class="text-gray-600 hover:text-gray-800 transition-colors"
24-
>
25-
<span class="sr-only">GitHub</span>
26-
<div class="w-6 h-6">
27-
<GitHubIcon />
28-
</div>
29-
</a>
11+
<SocialLinkIcons size="md" />
3012
</div>
3113
<p class="mt-8 text-sm leading-6 text-center text-gray-600">
3214
<Translation translationKey="footer" />

‎src/components/ui/common/Header.tsx‎

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
11
import {
2-
discordServerUrl,
32
displayTranslationStatus,
4-
githubRepositoryUrl,
53
typstOfficialDocsUrl,
64
typstOfficialUrl,
75
version,
86
} from "../../../metadata";
97
import { Translation, translation } from "../../../translation/";
108
import { calculateTranslationProgressRate } from "../../../utils/translationStatus";
11-
import {
12-
DiscordIcon,
13-
GitHubIcon,
14-
LanguageIcon,
15-
MenuIcon,
16-
SearchIcon,
17-
} from "../../icons";
9+
import { LanguageIcon, MenuIcon, SearchIcon } from "../../icons";
1810
import { SiteTitle } from "./SiteTitle";
11+
import { SocialLinkIcons } from "./SocialLinkIcons";
1912

2013
const VersionBadge = () => (
2114
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-600">
@@ -78,28 +71,9 @@ export const Header = () => {
7871
</div>
7972

8073
<div class="flex items-center gap-4 flex-shrink-0">
81-
<nav>
82-
<ul class="flex items-center gap-4">
83-
<li class="social">
84-
<a
85-
href={discordServerUrl}
86-
class="text-gray-600 hover:text-gray-800 transition-colors"
87-
>
88-
<div class="w-4 h-4">
89-
<DiscordIcon />
90-
</div>
91-
</a>
92-
</li>
93-
<li class="social">
94-
<a
95-
href={githubRepositoryUrl}
96-
class="text-gray-600 hover:text-gray-800 transition-colors"
97-
>
98-
<div class="w-4 h-4 text-gray-600 hover:text-gray-800 transition-colors">
99-
<GitHubIcon />
100-
</div>
101-
</a>
102-
</li>
74+
<nav class="flex items-center gap-4">
75+
<SocialLinkIcons size="sm" />
76+
<ul class="flex items-center gap-3">
10377
<li class="secondary">
10478
<a
10579
href={typstOfficialUrl}

0 commit comments

Comments
 (0)