make links in the app more flexible

rsbuild.config.ts

@@ -63,6 +63,7 @@ export default defineConfig({
         // ],
         define: {
             'process.env.BUILD_VERSION': JSON.stringify(!dev ? buildingVersion : 'undefined'),
+            'process.env.MAIN_MENU_LINKS': process.env.MAIN_MENU_LINKS,
             'process.platform': '"browser"',
             'process.env.GITHUB_URL':
                 JSON.stringify(`https://github.com/${process.env.GITHUB_REPOSITORY || `${process.env.VERCEL_GIT_REPO_OWNER}/${process.env.VERCEL_GIT_REPO_SLUG}`}`),

src/react/MainMenu.tsx

@@ -20,6 +20,7 @@ interface Props {
   versionStatus?: string
   versionTitle?: string
   onVersionClick?: () => void
+  bottomRightLinks?: string
 }
 
 const httpsRegex = /^https?:\/\//
@@ -34,8 +35,11 @@ export default ({
   openFileAction,
   versionStatus,
   versionTitle,
-  onVersionClick
+  onVersionClick,
+  bottomRightLinks
 }: Props) => {
+  const linksParsed = (bottomRightLinks ?? '').split(';').map(l => l.split(':')) as Array<[string, string]>
+
   return (
     <div className={styles.root}>
       <div className={styles['game-title']}>
@@ -108,13 +112,24 @@ export default ({
           Prismarine Web Client {versionStatus}
         </span>
         <span className={styles['product-description']}>
-          <a
-            style={{
-              color: 'lightgray',
-              fontSize: 9,
-            }} href='https://privacy.mcraft.fun'
-          >Privacy Policy
-          </a>
+          <div className={styles['product-link']}>
+            {linksParsed.map(([name, link], i, arr) => {
+              if (!link.startsWith('http')) link = `https://${link}`
+              return <div style={{
+                color: 'lightgray',
+                fontSize: 8,
+              }}>
+                <a
+                  key={name}
+                  style={{
+                    whiteSpace: 'nowrap',
+                  }} href={link}
+                >{name}
+                </a>
+                {i < arr.length - 1 && <span style={{ marginLeft: 2 }}>·</span>}
+              </div>
+            })}
+          </div>
           <span>A Minecraft client in the browser!</span>
         </span>
       </div>

src/react/MainMenuRenderApp.tsx

@@ -99,6 +99,7 @@ export default () => {
         githubAction={() => openGithub()}
         optionsAction={() => openOptionsMenu('main')}
         linksButton={<DiscordButton />}
+        bottomRightLinks={process.env.MAIN_MENU_LINKS}
         openFileAction={e => {
           if (!!window.showDirectoryPicker && !e.shiftKey) {
             void openWorldDirectory()

src/react/mainMenu.module.css

@@ -114,6 +114,12 @@
     padding-right: calc(env(safe-area-inset-right) / 2);
 }
 
+.product-link {
+    display: flex;
+    gap: 2;
+    justify-content: flex-end;
+}
+
 @media only screen and (max-height: 420px) {
     .root {
         --top-offset: 10px

src/react/mainMenu.module.css.d.ts

@@ -15,8 +15,10 @@ interface CssExports {
   minecraft: string;
   'product-description': string;
   'product-info': string;
+  'product-link': string;
   productDescription: string;
   productInfo: string;
+  productLink: string;
   raft: string;
   root: string;
   splash: string;