Initial commit for Cilium theme

This is re-design of built-in readthedocs theme, to be more inline with cilium.io design - Use white colors - Use different font - Use cilium website navigation [ Rebase notes: - Removed non-related indent changes - Squashed the following commits: - c639db2 ("Initial commit for Cilium theme") - 31d738e ("Fixes for menu & content width") - Address conflicts from: - 5e80b2b ("Sphinx 6: Use logo_url instead of logo (readthedocs#1405)") ] Signed-off-by: Sergey Generalov <sergey@genbit.ru> Signed-off-by: Alex Solovev <alex.solovev.work@gmail.com> Signed-off-by: Quentin Monnet <quentin@isovalent.com>
qmonnet · Sep 14, 2023 · d7ef65c · d7ef65c
1 parent 8ce23ce
commit d7ef65c
Show file tree

Hide file tree

Showing 13 changed files with 351 additions and 80 deletions.
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
@@ -12,8 +12,8 @@
   {%- if not READTHEDOCS %}
     <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}">
       <span class="rst-current-version" data-toggle="rst-current-version">
-        <span class="fa fa-book"> Read the Docs</span>
-        v: latest
+        <span class="rst-current-version-label"> Read the Docs</span>
+        version: latest
         <span class="fa fa-caret-down"></span>
       </span>
       <div class="rst-other-versions">
@@ -45,10 +45,19 @@
               <a href="#">{{ _('Builds') }}</a>
             </dd>
         </dl>
-        <dl>
+        <!-- <dl>
           <dt>Debug</dt>
           <dd><a href="#" data-toggle="rst-debug-badge">Swap badge position</a></dd>
+        </dl> -->
+        <dl>
+          <dt>Search</dt>
+          <dd>
+            <div class="wy-side-nav-search bottom">
+              {% include "searchbox.html" %}
+            </div>
+          </dd>
         </dl>
+        <small>Hosted by <a href="#">Read te Docs</a> · <a href="#">Privacy Policy</a></small>
       </div>
     </div>
   {%- endif %}

diff --git a/docs/conf.py b/docs/conf.py
@@ -13,7 +13,7 @@
 from sphinx_rtd_theme import __version_full__ as theme_version_full
 from sphinx.locale import _
 
-project = u'Read the Docs Sphinx Theme'
+project = u'Cilium Docs'
 slug = re.sub(r'\W+', '-', project.lower())
 version = theme_version
 release = theme_version_full
@@ -28,6 +28,7 @@
     'sphinx.ext.mathjax',
     'sphinx.ext.viewcode',
     'sphinx_rtd_theme',
+    'sphinx_copybutton',
 ]
 
 templates_path = ['_templates']
@@ -68,7 +69,7 @@
         range(1, 100)
     ))
 
-html_logo = "demo/static/logo-wordmark-light.svg"
+html_logo = "demo/static/cilium-logo.svg"
 html_show_sourcelink = True
 html_favicon = "demo/static/favicon.ico"
 

diff --git a/docs/demo/static/cilium-logo.svg b/docs/demo/static/cilium-logo.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "bourbon-neat": "~1.9",
     "copy-webpack-plugin": "^5.1.2",
     "css-loader": "^3.6.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^3.0.1",
     "font-awesome": "^4.7.0",
     "html5shiv": "^3.7.3",

diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html
@@ -120,36 +120,55 @@
 </head>
 
 <body class="wy-body-for-nav">
-
-  {%- block extrabody %} {% endblock %}
-  <div class="wy-grid-for-nav">
-    {#- SIDE NAV, TOGGLES ON MOBILE #}
-    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
-      <div class="wy-side-scroll">
-        <div class="wy-side-nav-search" {% if theme_style_nav_header_background %} style="background: {{theme_style_nav_header_background}}" {% endif %}>
-          {%- block sidebartitle %}
-
+  <header class="wy-header">
+      <div class="wy-header-left">
           {# the logo helper function was removed in Sphinx 6 and deprecated since Sphinx 4 #}
           {# the master_doc variable was renamed to root_doc in Sphinx 4 (master_doc still exists in later Sphinx versions) #}
           {%- set _logo_url = logo_url|default(pathto('_static/' + (logo or ""), 1)) %}
           {%- set _root_doc = root_doc|default(master_doc) %}
-          <a href="{{ pathto(_root_doc) }}"{% if not theme_logo_only %} class="icon icon-home"{% endif %}>
+          <a href="{{ pathto(_root_doc) }}"{% if not theme_logo_only %} class="wy-header-logo-wrapper icon icon-home"{% else %} class="wy-header-logo-wrapper"{% endif %}>
             {% if not theme_logo_only %}{{ project }}{% endif %}
             {%- if logo or logo_url %}
               <img src="{{ _logo_url }}" class="logo" alt="{{ _('Logo') }}"/>
             {%- endif %}
           </a>
 
+        <span class="wy-github-stars">
+          <iframe src="https://ghbtns.com/github-btn.html?user=cilium&repo=cilium&type=star&count=true&size=large"
+            frameborder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
+        </span>
+    </div>
+
+    <nav class="wy-main-nav">
+      <input name="wy-main-nav-checkbox" id="wy-main-nav-checkbox" class="wy-main-nav-checkbox" type="checkbox">
+      <label for="wy-main-nav-checkbox" class="wy-main-nav-toggle">Menu</label>
+      <ul id="#wy-main-nav-menu" class="wy-main-nav-menu">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Documentation</a></li>
+        <li><a href="#">Contact Us</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  {%- block extrabody %} {% endblock %}
+  <div class="wy-grid-for-nav">
+    {#- SIDE NAV, TOGGLES ON MOBILE #}
+    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
+      <div class="wy-side-scroll">
+        <div class="wy-side-nav-search" {% if theme_style_nav_header_background %} style="background: {{theme_style_nav_header_background}}" {% endif %}>
+          {%- block sidebartitle %}
+
           {%- if theme_display_version %}
             {%- set nav_version = version %}
             {%- if READTHEDOCS and current_version %}
               {%- set nav_version = current_version %}
             {%- endif %}
-            {%- if nav_version %}
+            <!-- {%- if nav_version %}
               <div class="version">
                 {{ nav_version }}
               </div>
-            {%- endif %}
+            {%- endif %} -->
           {%- endif %}
 
           {%- include "searchbox.html" %}

diff --git a/sphinx_rtd_theme/versions.html b/sphinx_rtd_theme/versions.html
@@ -2,8 +2,8 @@
 {# Add rst-badge after rst-versions for small badge style. #}
   <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}">
     <span class="rst-current-version" data-toggle="rst-current-version">
-      <span class="fa fa-book"> Read the Docs</span>
-      v: {{ current_version }}
+      <span class="ret-current-version-label"> Read the Docs</span>
+      version: {{ current_version }}
       <span class="fa fa-caret-down"></span>
     </span>
     <div class="rst-other-versions">
@@ -29,6 +29,15 @@
             <a href="//{{ PRODUCTION_DOMAIN }}/builds/{{ slug }}/?fromdocs={{ slug }}">{{ _('Builds') }}</a>
           </dd>
       </dl>
+      <dl>
+        <dt>Search</dt>
+        <dd>
+          <div class="wy-side-nav-search bottom">
+            {% include "searchbox.html" %}
+          </div>
+        </dd>
+      </dl>
+      <small>Hosted by <a href="#">Read te Docs</a> · <a href="#">Privacy Policy</a></small>
     </div>
   </div>
 {% endif %}
diff --git a/src/sass/_theme_badge.sass b/src/sass/_theme_badge.sass
@@ -3,36 +3,44 @@
   bottom: 0
   left: 0
   width: $nav-desktop-width
-  color: $section-background-color
-  background: darken($menu-background-color, 8%)
+  color: $text-color
+  background: #F7F7F7
   font-family: $base-font-family
   z-index: $z-index-tray
+
+  small
+    color: $text-color
+    font-size: 95%
+    a
+      color: $nav-link-color
+
   a
-    color: $link_color
+    color: $text-color
     text-decoration: none
   .rst-badge-small
     display: none
   .rst-current-version
-    padding: $base-line-height / 2
-    background-color: darken($menu-background-color, 5%)
+    padding: $base-line-height / 1.5
     display: block
     text-align: right
     font-size: 90%
     cursor: pointer
     color: $green
     +clearfix
     .fa
-      color: $section-background-color
-    .fa-book
-      float: left
-    .icon-book
+      color: #868686
+    .rst-current-version-label
+      color: $text-color
+      font-weight: 600
       float: left
     &.rst-out-of-date
       background-color: $red
       color: $white
     &.rst-active-old-version
       background-color: $yellow
       color: $black
+    span
+      color: $text-color
   &.shift-up
     height: auto
     max-height: 100%
@@ -51,13 +59,17 @@
       margin: 20px 0
       padding: 0
       border-top: solid 1px lighten($menu-background-color, 5%)
+    dt
+      color: #868686
+      padding: 0.25rem 0
     dd
       display: inline-block
       margin: 0
+      line-height: 1.4rem
       a
         display: inline-block
         padding: $base-line-height / 4
-        color: $section-background-color
+        color: $text-color
   &.rst-badge
     width: auto
     bottom: 20px

diff --git a/src/sass/_theme_font_local.sass b/src/sass/_theme_font_local.sass
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap')
+
 $lato-font-path: "~lato-font/fonts"
 $roboto-font-path: "~roboto-fontface/fonts/roboto-slab"