From c04a40c68840493837a1ac7682c8024cdcf6c752 Mon Sep 17 00:00:00 2001 From: liyunze <50455574+liyunze-coding@users.noreply.github.com> Date: Sun, 19 Jul 2026 16:01:00 +1000 Subject: [PATCH] made it more efficient using map function --- src/pages/index.astro | 607 ++++++++++++++++++++---------------------- 1 file changed, 285 insertions(+), 322 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index ecc673c..2c82e6c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -14,6 +14,136 @@ import CodePenIcon from "./_images/codepen.svg"; import LocationIcon from "./_images/location.svg"; import DateTimeIcon from "./_images/date-time.svg"; import DiscordIcon from "./_images/discord.svg"; + +type SocialLink = { + type: "link"; + href: string; + title: string; + subtitle: string; + subtitleHtml?: string; + iconId: string; + iconClass?: string; + Icon?: typeof WebsiteIcon; + variant?: "github"; + imgSrc?: string; + imgAlt?: string; + imgWidth?: number; +}; + +type GridItem = + | { type: "intro" } + | SocialLink + | { type: "schedule" } + | { type: "location" } + | { type: "spacer"; class: string }; + +const gridItems: GridItem[] = [ + { type: "intro" }, + { + type: "link", + href: "https://rython.dev/", + title: "Website", + subtitle: "rython.dev", + iconId: "website-icon", + iconClass: "icon-box h-12 w-12", + Icon: WebsiteIcon, + }, + { + type: "link", + href: "https://twitch.tv/RythonDev/", + title: "Twitch", + subtitle: "RythonDev", + iconId: "twitch-icon", + iconClass: "icon-box", + Icon: TwitchIcon, + }, + { + type: "link", + href: "https://youtube.com/@RythonDev/", + title: "YouTube", + subtitle: "@RythonDev", + iconId: "youtube-icon", + iconClass: "icon-box", + Icon: YouTubeIcon, + }, + { + type: "link", + href: "https://instagram.com/RythonDev", + title: "Instagram", + subtitle: "@RythonDev", + iconId: "instagram-icon", + iconClass: "icon-box", + Icon: InstagramIcon, + }, + { + type: "link", + href: "https://github.com/liyunze-coding", + title: "Github", + subtitle: "liyunze-coding", + iconId: "github-icon", + variant: "github", + Icon: GithubIcon, + }, + { + type: "link", + href: "https://codepen.io/RythonDev", + title: "Codepen", + subtitle: "RythonDev", + iconId: "codepen-icon", + iconClass: "icon-box h-12 w-12 rounded-full", + Icon: CodePenIcon, + }, + { type: "schedule" }, + { type: "location" }, + { + type: "link", + href: "https://ko-fi.com/rython", + title: "Ko-fi", + subtitle: "Rython", + iconId: "kofi-icon", + iconClass: + "icon-box flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-[#00BCF2]", + imgSrc: "/images/socials/kofi_s_logo_nolabel.webp", + imgAlt: "ko-fi logo", + imgWidth: 28, + }, + { + type: "link", + href: "https://rython.dev/discord", + title: "Discord", + subtitle: "rython.dev/discord", + subtitleHtml: "rython.dev/discord", + iconId: "discord-icon", + iconClass: "icon-box", + Icon: DiscordIcon, + }, + { type: "spacer", class: "hidden opacity-0 lg:block" }, + { + type: "link", + href: "https://tiktok.com/@RythonDev", + title: "Tiktok", + subtitle: "@RythonDev", + iconId: "tiktok-icon", + iconClass: + "icon-box flex h-12 w-12 items-center justify-center rounded-full bg-[#111]", + imgSrc: "/images/socials/tiktok.webp", + imgAlt: "tiktok logo", + imgWidth: 24, + }, + { type: "spacer", class: "hidden opacity-0 md:block lg:hidden" }, + { + type: "link", + href: "https://bsky.app/profile/rython.dev", + title: "Bluesky", + subtitle: "@rython.dev", + iconId: "bluesky-icon", + iconClass: + "icon-box flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-[linear-gradient(0deg,rgba(86,183,254,1)_0%,rgba(13,125,253,1)_100%)]", + imgSrc: "/images/socials/bluesky.webp", + imgAlt: "bluesky logo", + imgWidth: 35, + }, +]; --- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- - - - - - - - - - - - - - - - - - - +
+ ); + } + + if (item.type === "schedule") { + return ( +
+ +
+ ); + } + + if (item.type === "location") { + return ( +
+ + ); + } + + if (item.type === "spacer") { + return
; + } + + const Icon = item.Icon; + + return ( + + + + ); + }) + }
- Hover Light effect by + Hover Light effect by{" "}