this repo has no description
notnite.com
1import {
2 Card,
3 Text,
4 useThemeContext,
5 Button,
6 AngleBracketsIcon,
7 BookCheckIcon,
8 ClydeIcon
9} from "@moonlight-mod/wp/discord/components/common/index";
10import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
11import React from "@moonlight-mod/wp/react";
12import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";
13import AppCardClasses from "@moonlight-mod/wp/discord/modules/guild_settings/web/AppCard.css";
14import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
15
16const wordmark = "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark.png";
17const wordmarkLight =
18 "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark-light.png";
19
20function parse(str: string) {
21 return MarkupUtils.parse(str, true, {
22 allowHeading: true,
23 allowLinks: true,
24 allowList: true
25 });
26}
27
28function Dev({ name, picture, link }: { name: string; picture: string; link: string }) {
29 return (
30 <Card editable={true} className={AppCardClasses.card}>
31 <div className={AppCardClasses.cardHeader + " moonbase-dev"}>
32 <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER}>
33 <img src={picture} alt={name} className="moonbase-dev-avatar" />
34
35 <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>
36 <a href={link} rel="noreferrer noopener" target="_blank" tabIndex={-1}>
37 <Text variant="text-md/semibold">{name}</Text>
38 </a>
39 </Flex>
40 </Flex>
41 </div>
42 </Card>
43 );
44}
45
46function IconButton({
47 text,
48 link,
49 icon,
50 openInClient
51}: {
52 text: string;
53 link: string;
54 icon: React.FC<any>;
55 openInClient?: boolean;
56}) {
57 return (
58 <Button
59 onClick={() => {
60 if (openInClient) {
61 try {
62 const { handleClick } = spacepack.require("discord/utils/MaskedLinkUtils");
63 handleClick({ href: link });
64 } catch {
65 window.open(link);
66 }
67 } else {
68 // Will open externally in the user's browser
69 window.open(link);
70 }
71 }}
72 >
73 <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
74 {React.createElement(icon, {
75 size: "sm",
76 color: "currentColor"
77 })}
78 {text}
79 </Flex>
80 </Button>
81 );
82}
83
84export default function AboutPage() {
85 const darkTheme = useThemeContext()?.theme === "dark";
86
87 return (
88 <div>
89 <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>
90 <img src={darkTheme ? wordmarkLight : wordmark} alt="moonlight wordmark" className="moonbase-wordmark" />
91 <Text variant="heading-lg/medium">created by:</Text>
92 <div className="moonbase-devs">
93 <Dev name="Cynosphere" picture="https://github.com/Cynosphere.png" link="https://github.com/Cynosphere" />
94 <Dev name="NotNite" picture="https://github.com/NotNite.png" link="https://github.com/NotNite" />
95 <Dev name="adryd" picture="https://github.com/adryd325.png" link="https://github.com/adryd325" />
96 <Dev
97 name="redstonekasi"
98 picture="https://github.com/redstonekasi.png"
99 link="https://github.com/redstonekasi"
100 />
101 </div>
102
103 <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
104 <IconButton text="View source" icon={AngleBracketsIcon} link="https://github.com/moonlight-mod/moonlight" />
105 <IconButton text="Open the docs" icon={BookCheckIcon} link="https://moonlight-mod.github.io/" />
106 <IconButton
107 text="Join the server"
108 icon={ClydeIcon}
109 link="https://discord.gg/FdZBTFCP6F"
110 openInClient={true}
111 />
112 </Flex>
113 </Flex>
114
115 <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.START} className="moonbase-about-text">
116 <Text variant="text-sm/normal">
117 {parse(`moonlight \`${window.moonlight.version}\` on \`${window.moonlight.branch}\``)}
118 </Text>
119
120 <Text variant="text-sm/normal">
121 {parse(
122 "moonlight is licensed under the [GNU Lesser General Public License](https://www.gnu.org/licenses/lgpl-3.0.html) (`LGPL-3.0-or-later`)."
123 )}
124 </Text>
125 </Flex>
126 </div>
127 );
128}