From 4bcdd9f107a2727f286e49733b2236a956bf6c61 Mon Sep 17 00:00:00 2001
From: cydia2001 <cydia2001@duck.com>
Date: Wed, 11 Mar 2026 01:45:39 +0000
Subject: [PATCH] fix: restyle homepage language switch button

Move the homepage language switch below the GitHub star button and restyle it to match the same button family on both the English and Chinese homepages.
---
 en_chapters/frontpage.html      |  1 +
 static/frontpage.html           |  2 +-
 tests/test_prepare_mdbook.py    |  9 +++++-
 tests/test_prepare_mdbook_zh.py |  7 +++++
 tools/prepare_mdbook.py         | 54 ++++++++++++++++++---------------
 5 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/en_chapters/frontpage.html b/en_chapters/frontpage.html
index 98e4e02..eb357b7 100644
--- a/en_chapters/frontpage.html
+++ b/en_chapters/frontpage.html
@@ -216,6 +216,7 @@ a {
     <h2 class="mdl-color-text--primary">Machine Learning Systems: Design and Implementation</h2>
     <p>The first open-source book to comprehensively cover machine learning systems</p>
     <p><a class="github-button" href="https://github.com/openmlsys/openmlsys-zh" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star openmlsys/openmlsys-zh on GitHub">Star</a></p>
+    <!-- OPENMLSYS_LANGUAGE_SWITCH -->
   </div>
 </div>
 
diff --git a/static/frontpage.html b/static/frontpage.html
index 2db5ba9..53094ea 100644
--- a/static/frontpage.html
+++ b/static/frontpage.html
@@ -201,6 +201,7 @@ a {
     <h2 class="mdl-color-text--primary">《机器学习系统：设计和实现》</h2>
     <p>做世界上第一本全面讲述机器学习系统知识的开源书籍</p>
     <p><a class="github-button" href="https://github.com/openmlsys/openmlsys-zh" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star openmlsys/openmlsys-zh on GitHub">Star</a></p>
+    <!-- OPENMLSYS_LANGUAGE_SWITCH -->
   </div>
 </div>
 
@@ -477,4 +478,3 @@ for (i = 0; i < coll.length; i++) {
 </script>
 
 <script async defer src="https://buttons.github.io/buttons.js"></script>
-
diff --git a/tests/test_prepare_mdbook.py b/tests/test_prepare_mdbook.py
index cbdadcf..69973df 100644
--- a/tests/test_prepare_mdbook.py
+++ b/tests/test_prepare_mdbook.py
@@ -131,7 +131,7 @@ Reference :cite:`smith2024`.
                 encoding="utf-8",
             )
             (static_dir / "frontpage.html").write_text(
-                "<div class=\"hero\">frontpage</div>\n",
+                "<p class=\"star-slot\">STAR</p>\n<!-- OPENMLSYS_LANGUAGE_SWITCH -->\n<div class=\"hero\">frontpage</div>\n",
                 encoding="utf-8",
             )
 
@@ -143,9 +143,14 @@ Reference :cite:`smith2024`.
                 frontpage_switch_href="cn/",
             )
 
+            self.assertIn('class="openmlsys-frontpage-switch-row"', rewritten)
             self.assertIn('class="openmlsys-frontpage-switch"', rewritten)
             self.assertIn('href="cn/"', rewritten)
             self.assertIn(">中文</a>", rewritten)
+            self.assertLess(
+                rewritten.index('class="star-slot"'),
+                rewritten.index('class="openmlsys-frontpage-switch-row"'),
+            )
 
     def test_rewrite_markdown_prefers_book_local_frontpage_file(self) -> None:
         with tempfile.TemporaryDirectory() as tmpdir:
@@ -185,6 +190,8 @@ Reference :cite:`smith2024`.
             self.assertNotIn("Chinese fallback", rewritten)
             self.assertIn("background: transparent !important;", rewritten)
             self.assertIn("padding: 0 !important;", rewritten)
+            self.assertIn("border-radius: 6px;", rewritten)
+            self.assertIn("background: #f6f8fa;", rewritten)
 
     def test_regular_page_does_not_render_frontpage_switch(self) -> None:
         with tempfile.TemporaryDirectory() as tmpdir:
diff --git a/tests/test_prepare_mdbook_zh.py b/tests/test_prepare_mdbook_zh.py
index e6a7e4c..bad32d2 100644
--- a/tests/test_prepare_mdbook_zh.py
+++ b/tests/test_prepare_mdbook_zh.py
@@ -202,6 +202,8 @@ missing
 .other { color: blue; }
 </style>
 </head>
+<p class="star-slot">STAR</p>
+<!-- OPENMLSYS_LANGUAGE_SWITCH -->
 <div class="hero">
   <img src="_images/logo.png" />
   <img src="./_images/jinxuefeng.png" />
@@ -221,9 +223,14 @@ missing
             self.assertIn("static/image/logo.png", rewritten)
             self.assertIn("static/image/jinxuefeng.png", rewritten)
             self.assertIn("console.log('frontpage')", rewritten)
+            self.assertIn('class="openmlsys-frontpage-switch-row"', rewritten)
             self.assertIn('class="openmlsys-frontpage-switch"', rewritten)
             self.assertIn('href="../"', rewritten)
             self.assertIn(">English</a>", rewritten)
+            self.assertLess(
+                rewritten.index('class="star-slot"'),
+                rewritten.index('class="openmlsys-frontpage-switch-row"'),
+            )
 
 
 if __name__ == "__main__":
diff --git a/tools/prepare_mdbook.py b/tools/prepare_mdbook.py
index a90b4a7..894a4c3 100644
--- a/tools/prepare_mdbook.py
+++ b/tools/prepare_mdbook.py
@@ -21,36 +21,37 @@ TOC_PART_RE = re.compile(r"^#+\s+(.+?)\s*$")
 HEAD_TAG_RE = re.compile(r"</?head>", re.IGNORECASE)
 STYLE_BLOCK_RE = re.compile(r"<style>(.*?)</style>", re.IGNORECASE | re.DOTALL)
 DEFAULT_BIBLIOGRAPHY_TITLE = "References"
+FRONTPAGE_SWITCH_PLACEHOLDER = "<!-- OPENMLSYS_LANGUAGE_SWITCH -->"
 FRONTPAGE_LAYOUT_CSS = """
 <style>
 .openmlsys-frontpage {
   width: 100%;
   margin: 0 auto 3rem;
-  position: relative;
+}
+.openmlsys-frontpage-switch-row {
+  margin: 12px 0 0;
+  display: flex;
+  justify-content: center;
 }
 .openmlsys-frontpage-switch {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 88px;
-  padding: 10px 16px;
-  border-radius: 999px;
-  border: 1px solid rgba(11, 107, 203, 0.25);
-  background: rgba(255, 255, 255, 0.92);
-  color: var(--links, #0b6bcb);
-  font-size: 14px;
+  min-width: 82px;
+  height: 28px;
+  padding: 0 14px;
+  border-radius: 6px;
+  border: 1px solid rgba(31, 35, 40, 0.15);
+  background: #f6f8fa;
+  color: #24292f;
+  font-size: 13px;
   font-weight: 600;
   text-decoration: none;
-  box-shadow: 0 12px 30px rgba(11, 107, 203, 0.12);
-  backdrop-filter: blur(10px);
+  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04);
 }
 .openmlsys-frontpage-switch:hover {
-  background: #fff;
-  border-color: rgba(11, 107, 203, 0.4);
+  background: #f3f4f6;
+  border-color: rgba(31, 35, 40, 0.2);
 }
 .openmlsys-frontpage .mdl-grid {
   display: flex;
@@ -106,10 +107,6 @@ FRONTPAGE_LAYOUT_CSS = """
   max-width: 960px;
 }
 @media (max-width: 1000px) {
-  .openmlsys-frontpage-switch {
-    top: 12px;
-    right: 12px;
-  }
   .openmlsys-frontpage .mdl-cell,
   .openmlsys-frontpage .mdl-cell--1-col,
   .openmlsys-frontpage .mdl-cell--3-col,
@@ -405,7 +402,11 @@ def _minify_style_block(match: re.Match[str]) -> str:
 
 
 def render_frontpage_switch(label: str, href: str) -> str:
-    return f'<a class="openmlsys-frontpage-switch" href="{href}">{label}</a>'
+    return (
+        '<p class="openmlsys-frontpage-switch-row">'
+        f'<a class="openmlsys-frontpage-switch" href="{href}">{label}</a>'
+        "</p>"
+    )
 
 
 def wrap_frontpage_html(
@@ -413,10 +414,15 @@ def wrap_frontpage_html(
     frontpage_switch_label: str | None = None,
     frontpage_switch_href: str | None = None,
 ) -> str:
-    parts = [FRONTPAGE_LAYOUT_CSS, '<div class="openmlsys-frontpage">']
+    rendered_html = html.strip()
     if frontpage_switch_label and frontpage_switch_href:
-        parts.append(render_frontpage_switch(frontpage_switch_label, frontpage_switch_href))
-    parts.extend([html.strip(), "</div>"])
+        switch_html = render_frontpage_switch(frontpage_switch_label, frontpage_switch_href)
+        if FRONTPAGE_SWITCH_PLACEHOLDER in rendered_html:
+            rendered_html = rendered_html.replace(FRONTPAGE_SWITCH_PLACEHOLDER, switch_html)
+        else:
+            rendered_html = "\n".join([switch_html, rendered_html])
+
+    parts = [FRONTPAGE_LAYOUT_CSS, '<div class="openmlsys-frontpage">', rendered_html, "</div>"]
     return "\n".join(parts)