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

@@ -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>
 

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>
-

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:

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__":

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)