show star button on hover

src/build.mts

@@ -10,7 +10,19 @@ const ghClient = new octokit.Octokit({
 
 const md = markdownit()
 
-const starSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="1em" height="1em" stroke="currentColor" fill="currentColor" ><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>`
+function githubBtn(
+  authorName: string,
+  repoName: string,
+  option: { large: boolean },
+): string {
+  const { large } = option
+  return `<iframe src="https://ghbtns.com/github-btn.html?user=${querystring.escape(
+    authorName,
+  )}&repo=${querystring.escape(repoName)}&type=star&count=true${
+    large && '&size=large'
+  }" frameborder="0" scrolling="0" width="115" height="32" title="GitHub">
+  </iframe>`
+}
 
 fs.rmSync('dist', { recursive: true, force: true })
 fs.mkdirSync('dist')
@@ -127,6 +139,12 @@ function renderGameCard(metaInfo: MetaInfo): string {
     : 'default-cover.png'
 
   const teamPath = querystring.escape(metaInfo.teamName)
+  const authorName = metaInfo.prInfo.head.user.login
+  const repoName = metaInfo.prInfo.head.repo?.name
+
+  if (repoName === undefined) {
+    throw new Error(`renderGameCard: repoName is undefined`)
+  }
 
   const footer = metaInfo.title
     ? `<h2>${metaInfo.title}</h2><p>${metaInfo.teamName}</p>`
@@ -135,6 +153,9 @@ function renderGameCard(metaInfo: MetaInfo): string {
   return /*html*/ `
 <div class='game-card'>
   <a href='${teamPath}/index.html'>
+    <div class='game-card__star'>
+      ${githubBtn(authorName, repoName, { large: true })}
+    </div>
     <div class='game-card__cover'>
       <img src='${coverPath}'/>
     </div>
@@ -219,13 +240,14 @@ function indexHtml(metaInfos: MetaInfo[]): string {
 
       .game-cards {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
         gap: 1rem;
       }
 
       .game-card {
         border-radius: 0.5rem;
         background-color: #242526;
+        position: relative;
       }
 
       .game-card a {
@@ -240,6 +262,17 @@ function indexHtml(metaInfos: MetaInfo[]): string {
         color: #f44cd5
       }
 
+      .game-card__star {
+        position: absolute;
+        left: 4px;
+        top: 4px;
+        display: none
+      }
+
+      .game-card a:hover .game-card__star {
+        display: block
+      }
+
       .game-card__cover {
         display: flex;
         align-items: center;
@@ -449,13 +482,8 @@ function gameIndexHtml(metaInfo: MetaInfo): string {
         <iframe class="wasm4-game" src="game.html" frameborder="0"></iframe>
         <p class="control">${control}</p>
         <h1>${title}</h1>
-        <p class="vote">Star仓库，为ta投票
-        <iframe src="https://ghbtns.com/github-btn.html?user=${querystring.escape(
-          authorName,
-        )}&repo=${querystring.escape(
-    repoName,
-  )}&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150" height="32" title="GitHub">
-        </iframe>
+        <p class="vote">Star 仓库，为 ta 投票
+        ${githubBtn(authorName, repoName, { large: true })}
         </p>
         ${avatar}
         <article>