feat(ssr): optimize ssr header

DIYgod · DIYgod · commit 9a90b2cb4d23 · 2025-05-07T21:22:49.000+08:00
diff --git a/apps/desktop/layer/renderer/src/modules/settings/tabs/about.tsx b/apps/desktop/layer/renderer/src/modules/settings/tabs/about.tsx
@@ -2,14 +2,14 @@ import { Logo } from "@follow/components/icons/logo.jsx"
 import { Button } from "@follow/components/ui/button/index.js"
 import { styledButtonVariant } from "@follow/components/ui/button/variants.js"
 import { Divider } from "@follow/components/ui/divider/index.js"
+import { SocialMediaLinks } from "@follow/constants"
 import { MODE, ModeEnum } from "@follow/shared/constants"
 import { getCurrentEnvironment } from "@follow/utils/environment"
 import PKG, { repository } from "@pkg"
 import { useQuery } from "@tanstack/react-query"
 import { Trans, useTranslation } from "react-i18next"
 
 import { CopyButton } from "~/components/ui/button/CopyButton"
-import { SocialMediaLinks } from "~/constants/social"
 import { tipcClient } from "~/lib/client"
 import { getNewIssueUrl } from "~/lib/issues"
 
diff --git a/apps/mobile/src/modules/settings/routes/About.tsx b/apps/mobile/src/modules/settings/routes/About.tsx
@@ -30,7 +30,7 @@ const links = [
   {
     title: "X",
     icon: SocialXCuteReIcon,
-    url: "https://x.com/follow_app_",
+    url: "https://x.com/intent/follow?screen_name=follow_app_",
     iconBackgroundColor: "#000000",
     iconColor: "#FFFFFF",
   },
diff --git a/apps/ssr/client/components/layout/header/index.tsx b/apps/ssr/client/components/layout/header/index.tsx
@@ -2,8 +2,7 @@ import { siteConfig } from "@client/configs"
 import { openInFollowApp } from "@client/lib/helper"
 import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.jsx"
-import { Button } from "@follow/components/ui/button/index.jsx"
-import { Kbd } from "@follow/components/ui/kbd/Kbd.jsx"
+import { SocialMediaLinks } from "@follow/constants"
 import { cn } from "@follow/utils/utils"
 import type { MotionValue } from "motion/react"
 import { useMotionValueEvent, useScroll } from "motion/react"
@@ -78,30 +77,18 @@ export const Header = () => {
               <Folo className="size-10" />
             </a>
           </div>
-          <div className="flex items-center gap-4">
-            <Button
-              className="flex size-9 rounded-full border-neutral-300 bg-transparent hover:border-zinc-400 md:w-auto md:px-2 dark:border-neutral-700 dark:hover:border-zinc-600"
-              variant="outline"
-            >
+          <div className="flex flex-wrap items-center gap-6 text-2xl">
+            {SocialMediaLinks.map((link) => (
               <a
-                href={siteConfig.repoUrl}
-                className="flex items-center gap-2"
+                href={link.url}
+                key={link.url}
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noreferrer"
+                className="flex items-center"
               >
-                <span className="i-simple-icons-github size-4" />
-                <span className="hidden md:inline">Star on GitHub</span>
+                <i className={link.icon} style={{ color: link.color }} />
               </a>
-            </Button>
-            <Button
-              buttonClassName="hidden lg:block cursor-pointer !text-accent-content"
-              onClick={handleToApp}
-            >
-              Open app
-              <Kbd className="!leading-0 !dark:bg-zinc-200 kbd-xs ml-2 size-5 scale-[0.85] rounded-sm !border-transparent !bg-zinc-50 !font-mono text-black">
-                L
-              </Kbd>
-            </Button>
+            ))}
           </div>
         </nav>
       </Container>
diff --git a/apps/ssr/client/pages/(main)/share/feeds/[id]/index.tsx b/apps/ssr/client/pages/(main)/share/feeds/[id]/index.tsx
@@ -99,6 +99,7 @@ export function Component() {
                   fallbackUrl: `/timeline/view-${view}/${id}/pending`,
                 })
               }}
+              size="lg"
             >
               <FollowIcon className="mr-2 size-3" />
               {isSubscribed
diff --git a/apps/ssr/client/pages/(main)/share/lists/[id]/index.tsx b/apps/ssr/client/pages/(main)/share/lists/[id]/index.tsx
@@ -100,6 +100,7 @@ export function Component() {
                   onClick={() => {
                     handleOpenInFollowApp()
                   }}
+                  size="lg"
                 >
                   <FollowIcon className="mr-2 size-3" />
                   {isSubscribed
diff --git a/packages/internal/constants/src/index.ts b/packages/internal/constants/src/index.ts
@@ -2,4 +2,5 @@ export * from "./app"
 export * from "./auth-providers"
 export * from "./enums"
 export * from "./rsshub"
+export * from "./social"
 export * from "./tabs"
diff --git a/packages/internal/constants/src/social.ts b/packages/internal/constants/src/social.ts
@@ -1,19 +1,20 @@
-import { repository } from "@pkg"
-
 export const SocialMediaLinks = [
   {
     icon: "i-mgc-github-cute-fi",
     label: "GitHub",
-    url: repository.url,
+    url: "https://github.com/RSSNext/Folo",
+    color: "#000000",
   },
   {
     icon: "i-mgc-discord-cute-fi",
     label: "Discord",
     url: "https://discord.gg/followapp",
+    color: "#5865F2",
   },
   {
     icon: "i-mgc-social-x-cute-re",
     label: "X",
-    url: "https://x.com/follow_app_",
+    url: "https://x.com/intent/follow?screen_name=follow_app_",
+    color: "#000000",
   },
 ]

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ const links = [`
`30`	`30`	`{`
`31`	`31`	`title: "X",`
`32`	`32`	`icon: SocialXCuteReIcon,`
`33`		`- url: "https://x.com/follow_app_",`
	`33`	`+ url: "https://x.com/intent/follow?screen_name=follow_app_",`
`34`	`34`	`iconBackgroundColor: "#000000",`
`35`	`35`	`iconColor: "#FFFFFF",`
`36`	`36`	`},`
Original file line number	Diff line number	Diff line change
`@@ -99,6 +99,7 @@ export function Component() {`
`99`	`99`	fallbackUrl: `/timeline/view-${view}/${id}/pending`,
`100`	`100`	`})`
`101`	`101`	`}}`
	`102`	`+ size="lg"`
`102`	`103`	`>`
`103`	`104`	`<FollowIcon className="mr-2 size-3" />`
`104`	`105`	`{isSubscribed`
Original file line number	Diff line number	Diff line change
`@@ -100,6 +100,7 @@ export function Component() {`
`100`	`100`	`onClick={() => {`
`101`	`101`	`handleOpenInFollowApp()`
`102`	`102`	`}}`
	`103`	`+ size="lg"`
`103`	`104`	`>`
`104`	`105`	`<FollowIcon className="mr-2 size-3" />`
`105`	`106`	`{isSubscribed`