fix : remove profile pic in og image

.agents/skills/git-commit/SKILL.md

@@ -0,0 +1,30 @@
+---
+name: git-commit
+description: Simple commit message format using type(target) : message.
+---
+
+# Git Commit
+
+Use this exact format for commit messages:
+
+type(target) : message
+
+Examples:
+- feat(auth) : add login flow
+- fix(api) : handle missing user id
+- docs(readme) : update setup steps
+- chore(ui) : polish button spacing
+
+## Rules
+
+- Use a short type such as feat, fix, docs, chore, refactor, test, perf, build, ci, or revert.
+- Use a compact target in parentheses if the change is scoped to a part of the app.
+- Keep the message clear and action-oriented.
+- Prefer present tense and a concise summary.
+- If no clear target exists, keep it simple: fix : handle null state
+
+## Output
+
+When creating a commit message, return only:
+
+type(target) : message

components/public/team-search.tsx

@@ -100,9 +100,13 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                           </div>
                           <div className="grid min-w-0 grid-cols-2 gap-2 sm:col-span-1 sm:row-span-2 sm:flex sm:flex-col">
                             {member.weapon ? (
-                              <div
+                              <a
+                                href={`https://lunaris.moe/weapon/${encodeURIComponent(member.weapon.key)}`}
+                                target="_blank"
+                                rel="noreferrer"
+                                aria-label={`เปิดข้อมูลอาวุธ ${member.weapon.name} บน Lunaris`}
                                 className={cn(
-                                  "relative aspect-square overflow-hidden rounded-md bg-muted",
+                                  "relative aspect-square overflow-hidden rounded-md bg-muted outline-none transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring",
                                   rarityGradientClass(member.weapon.rarity),
                                 )}
                               >
@@ -115,14 +119,18 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                                 <Kbd className="absolute top-0 left-0 h-4 min-w-4 whitespace-nowrap bg-transparent px-0.5 text-[9px] text-white">
                                   R{member.refinement}
                                 </Kbd>
-                              </div>
+                              </a>
                             ) : (
                               <div className="aspect-square rounded-md border bg-muted" />
                             )}
                             {member.artifact ? (
-                              <div
+                              <a
+                                href={`https://lunaris.moe/artifact/${encodeURIComponent(member.artifact.key)}`}
+                                target="_blank"
+                                rel="noreferrer"
+                                aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.artifact.name} บน Lunaris`}
                                 className={cn(
-                                  "relative aspect-square overflow-hidden rounded-md bg-muted",
+                                  "relative aspect-square overflow-hidden rounded-md bg-muted outline-none transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring",
                                   rarityGradientClass(member.artifact.rarity),
                                 )}
                               >
@@ -132,7 +140,7 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                                   fill
                                   className="object-contain p-1"
                                 />
-                              </div>
+                              </a>
                             ) : (
                               <div className="aspect-square rounded-md border bg-muted" />
                             )}

lib/og-image.tsx

@@ -172,7 +172,11 @@ export async function generateOgImage({
       <div
         style={{
           position: "absolute",
-          top: characterCard ? "52px" : "160px",
+          top: characterCard
+            ? recommendedWeapon || recommendedArtifact
+              ? "36px"
+              : "52px"
+            : "160px",
           left: "60px",
           display: "flex",
           flexDirection: "column",
@@ -220,16 +224,16 @@ export async function generateOgImage({
                 borderBottomRightRadius: "48px",
                 background: rarityGradient(recommendedWeapon.rarity),
                 color: "#fff",
-                padding: "6px 28px 6px 10px",
+                padding: "2px 28px 2px 6px",
               }}
             >
               {weaponArtSrc ? (
                 <img
                   src={weaponArtSrc}
                   alt=""
-                  width={60}
-                  height={60}
-                  style={{ width: "60px", height: "60px", objectFit: "contain" }}
+                  width={68}
+                  height={68}
+                  style={{ width: "68px", height: "68px", objectFit: "contain" }}
                 />
               ) : null}
               <div style={{ display: "flex", fontSize: 20 }}>
@@ -249,14 +253,14 @@ export async function generateOgImage({
               >
                 {recommendedWeapon.overallPercent ? (
                   <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
-                    <div style={{ display: "flex", fontSize: 19 }}>{metric(recommendedWeapon.overallPercent)}</div>
-                    <div style={{ display: "flex", fontSize: 9 }}>ทั้งทีม</div>
+                    <div style={{ display: "flex", fontSize: 16 }}>{metric(recommendedWeapon.overallPercent)}</div>
+                    <div style={{ display: "flex", fontSize: 8 }}>ทั้งทีม</div>
                   </div>
                 ) : null}
                 {recommendedWeapon.personalPercent ? (
                   <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
-                    <div style={{ display: "flex", fontSize: 19 }}>{metric(recommendedWeapon.personalPercent)}</div>
-                    <div style={{ display: "flex", fontSize: 9 }}>ส่วนตัว</div>
+                    <div style={{ display: "flex", fontSize: 16 }}>{metric(recommendedWeapon.personalPercent)}</div>
+                    <div style={{ display: "flex", fontSize: 8 }}>ส่วนตัว</div>
                   </div>
                 ) : null}
               </div>
@@ -271,23 +275,23 @@ export async function generateOgImage({
               height: "72px",
               marginTop: recommendedWeapon ? "10px" : "14px",
               alignItems: "center",
-              gap: "12px",
+              gap: "10px",
               overflow: "hidden",
               border: "1px solid #ffffff1f",
               borderRadius: "12px",
               background: "#34343d",
-              padding: "6px 12px",
+              padding: "2px 8px",
             }}
           >
-            <div style={{ display: "flex", width: recommendedArtifact.second ? "94px" : "60px" }}>
+            <div style={{ display: "flex", width: recommendedArtifact.second ? "108px" : "68px" }}>
               {firstArtifactArtSrc ? (
-                <div style={{ display: "flex", width: "60px", height: "60px", overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: "10px", background: rarityGradient(recommendedArtifact.first.rarity) }}>
-                  <img src={firstArtifactArtSrc} alt="" width={60} height={60} style={{ objectFit: "contain" }} />
+                <div style={{ display: "flex", width: "68px", height: "68px", overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: "10px", background: rarityGradient(recommendedArtifact.first.rarity) }}>
+                  <img src={firstArtifactArtSrc} alt="" width={68} height={68} style={{ objectFit: "contain" }} />
                 </div>
               ) : null}
               {recommendedArtifact.second && secondArtifactArtSrc ? (
-                <div style={{ display: "flex", width: "60px", height: "60px", overflow: "hidden", marginLeft: "-24px", border: "1px solid #ffffff2a", borderRadius: "10px", background: rarityGradient(recommendedArtifact.second.rarity) }}>
-                  <img src={secondArtifactArtSrc} alt="" width={60} height={60} style={{ objectFit: "contain" }} />
+                <div style={{ display: "flex", width: "68px", height: "68px", overflow: "hidden", marginLeft: "-28px", border: "1px solid #ffffff2a", borderRadius: "10px", background: rarityGradient(recommendedArtifact.second.rarity) }}>
+                  <img src={secondArtifactArtSrc} alt="" width={68} height={68} style={{ objectFit: "contain" }} />
                 </div>
               ) : null}
             </div>