Fix the nav bar and announcement bar when reducing size above/below 996px (#134)

petecheslock · web-flow · commit 7d852ada6a09 · 2025-12-11T15:41:27.000-05:00
* Enhance navbar with GitHub stars and Slack button

- Added GitHub stars iframe and Slack button to the right side of the navbar.
- Introduced CSS styles to improve spacing and responsiveness for these navbar items.
- Adjusted visibility of GitHub stars on smaller screens and styled them for mobile sidebar display.

Signed-off-by: Pete Cheslock &lt;pete.cheslock@redhat.com&gt;

* Add canonical URL to KV Caching blog post

- Added a canonical URL to the blog post on KV Caching with vLLM, LMCache, and Ceph to improve SEO and content discoverability.

Signed-off-by: Pete Cheslock &lt;pete.cheslock@redhat.com&gt;

* Enhance announcement bar styling

- Adjusted CSS for the announcement bar to allow dynamic height on desktop, ensuring better visibility and usability.
- Updated content styling to enable text wrapping, improving readability.

Signed-off-by: Pete Cheslock &lt;pete.cheslock@redhat.com&gt;
diff --git a/blog/2025-12-10_kv-caching-vllm-lmcache-ceph.md b/blog/2025-12-10_kv-caching-vllm-lmcache-ceph.md
@@ -11,6 +11,12 @@ authors:
 tags: [blog, ceph, rgw, s3, kv-cache]
 ---
 
+import Head from '@docusaurus/Head';
+
+<Head>
+  <link rel="canonical" href="https://ceph.io/en/news/blog/2025/vllm-kv-caching/" />
+</Head>
+
 Inference accounts for [90% of the machine learning
 costs](https://www.sciencedirect.com/science/article/pii/S2210537923000124) for deployed AI
 systems, and it is no surprise that inference optimization is a burgeoning topic
@@ -622,4 +628,3 @@ scenarios like PD disaggregation and cache blending.
 Finally, we'd like to thank Supermicro for providing the environment for these
 testing efforts. If you have any questions about Data or AI workloads for Ceph,
 please [reach out](mailto:kbader@ibm.com).
-
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -154,11 +154,13 @@ const config = {
           {
             type: 'html',
             position: 'right',
+            className: 'navbar-github-stars',
             value: '<iframe src="https://ghbtns.com/github-btn.html?user=llm-d&repo=llm-d&type=star&count=true&size=large" frameborder="0" scrolling="0" width="170" height="30" title="GitHub Star" style="vertical-align: middle;"></iframe>',
           },
           {
             type: 'html',
             position: 'right',
+            className: 'navbar-slack-item',
             value: '<a href="/slack" class="navbar-slack-button"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"></path></svg>Join Slack</a>',
           },
         ],
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -113,6 +113,23 @@ display: none !important;
   transform: scale(1.05);
 }
 
+/* Tighten spacing for right-side navbar items */
+.navbar-github-stars,
+.navbar-slack-item {
+  padding: 0 !important;
+  margin: 0 2px !important;
+}
+
+/* Make GitHub stars iframe fit tightly */
+.navbar-github-stars {
+  display: flex !important;
+  align-items: center;
+}
+
+.navbar-github-stars iframe {
+  width: 150px !important;
+}
+
 /* Navbar Slack button */
 .navbar-slack-button {
   display: inline-flex;
@@ -127,7 +144,7 @@ display: none !important;
   font-size: 1rem;
   font-weight: var(--ifm-font-weight-semibold);
   vertical-align: middle;
-  margin-left: 8px;
+  margin-left: 0;
   transition: background-color 0.2s ease;
 }
 
@@ -141,6 +158,24 @@ display: none !important;
   background-color: #3a3a3a;
 }
 
+/* Hide GitHub stars in top navbar below 1105px (they appear in hamburger menu instead) */
+@media screen and (max-width: 1105px) {
+  .navbar__inner .navbar-github-stars {
+    display: none !important;
+  }
+}
+
+/* Style GitHub stars in mobile sidebar */
+.navbar-sidebar .navbar-github-stars {
+  display: flex !important;
+  padding: 8px 16px;
+  margin-bottom: 8px;
+}
+
+.navbar-sidebar .navbar-github-stars iframe {
+  width: 150px !important;
+}
+
 .header {
   display: flex;
   align-content: center;
@@ -518,6 +553,27 @@ img.llm-d-logo {
   --ifm-footer-background-color: #262626 !important;
 }
 
+/* ----------------------------- Announcement Bar ---------------------------- */
+
+/* Override Docusaurus fixed height on desktop */
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: auto !important;
+  }
+}
+
+/* Main announcement bar container - allow height to grow */
+.theme-announcement-bar {
+  height: auto !important;
+  min-height: 30px;
+  padding: 8px 16px;
+}
+
+/* Content styling - allow wrapping */
+[class*="announcementBarContent"] {
+  white-space: normal !important;
+}
+
 /* Improved YAML syntax highlighting site-wide */
 /* Fix YAML code blocks to avoid red/green diff-like appearance */
 

Original file line number	Diff line number	Diff line change
`@@ -154,11 +154,13 @@ const config = {`
`154`	`154`	`{`
`155`	`155`	`type: 'html',`
`156`	`156`	`position: 'right',`
	`157`	`+ className: 'navbar-github-stars',`
`157`	`158`	`value: '<iframe src="https://ghbtns.com/github-btn.html?user=llm-d&repo=llm-d&type=star&count=true&size=large" frameborder="0" scrolling="0" width="170" height="30" title="GitHub Star" style="vertical-align: middle;"></iframe>',`
`158`	`159`	`},`
`159`	`160`	`{`
`160`	`161`	`type: 'html',`
`161`	`162`	`position: 'right',`
	`163`	`+ className: 'navbar-slack-item',`
`162`	`164`	value: '<a href="/slack" class="navbar-slack-button"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"></path></svg>Join Slack</a>',
`163`	`165`	`},`
`164`	`166`	`],`