Website design tweaks (#3699)

* Style updates for website

* tab styling

Author: jackgerrits

python/packages/autogen-core/docs/src/_static/custom.css

@@ -1,3 +1,76 @@
-.bd-links__title {
-  display: none;
+.bd-footer {
+  font-size: 0.8rem;
 }
+
+html[data-theme="light"] {
+  --pst-color-primary: hsl(222.2 47.4% 11.2%);
+  --pst-color-secondary: #007bff;
+  --pst-color-secondary-bg: #007bff;
+  --pst-color-accent: #007bff;
+  --sd-color-secondary-highlight: #0062cc;
+  --pst-color-shadow: rgba(0, 0, 0, 0.0);
+}
+
+html[data-theme="dark"] {
+  --pst-color-primary: hsl(213 31% 91%);
+  --pst-color-secondary: #007bff;
+  --pst-color-secondary-bg: #007bff;
+  --pst-color-accent: #007bff;
+  --sd-color-secondary-highlight: #0062cc;
+  --pst-color-shadow: rgba(0, 0, 0, 0.0);
+}
+
+.bd-header-announcement {
+  color: white;
+}
+
+.bd-header-announcement a {
+  color: white;
+}
+
+.bd-header-announcement a:hover {
+  color: white;
+  text-shadow: 0.5px 0 0 currentColor;
+}
+
+nav.bd-links .current>a  {
+  box-shadow: inset 1px 0 0 var(--pst-color-primary);
+}
+
+html[data-theme="light"] .bd-header {
+  border-bottom: 1px solid var(--pst-color-border);
+}
+
+.admonition, div.admonition {
+  border: 1px solid var(--pst-color-border);
+}
+
+.api-card {
+  text-align: center;
+  font-size: 1.2rem;
+}
+
+.api-card svg {
+  font-size: 2rem;
+}
+
+.search-button-field {
+  border-radius: var(--bs-btn-border-radius);
+}
+
+.bd-content .sd-tab-set .sd-tab-content {
+  border: none;
+  border-top: 3px solid var(--pst-color-border);
+
+}
+.bd-content .sd-tab-set>input:checked+label {
+  border: none;
+  transform: translateY(0);
+  font-weight: 600;
+  border-bottom: 2px solid var(--pst-color-secondary);
+
+}
+.bd-content .sd-tab-set>label {
+  background-color: transparent;
+  border: none;
+}

python/packages/autogen-core/docs/src/_static/images/logo/favicon-16x16.png

@@ -2,10 +2,10 @@
   {
     "name": "v0.2 (stable)",
     "version": "0.2",
-    "url": "https://microsoft.github.io/autogen/en/0.2/"
+    "url": "https://microsoft.github.io/autogen/0.2/"
   },
   {
     "version": "dev",
-    "url": "https://microsoft.github.io/autogen/en/dev/"
+    "url": "https://microsoft.github.io/autogen/dev/"
   }
 ]

python/packages/autogen-core/docs/src/_static/images/logo/favicon-32x32.png

@@ -0,0 +1 @@
+<p><a href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy Policy</a> | <a href="https://go.microsoft.com/fwlink/?linkid=2259814">Consumer Health Privacy</a> </p>

python/packages/autogen-core/docs/src/_static/images/logo/favicon-512x512.png

@@ -0,0 +1,15 @@
+{# Displays the TOC-subtree for pages nested under the currently active top-level TOCtree element. #}
+<nav class="bd-docs-nav bd-links"
+     aria-label="{{ _('Section Navigation') }}">
+  <div class="bd-toc-item navbar-nav">
+    {{- generate_toctree_html(
+      "sidebar",
+      show_nav_level=theme_show_nav_level | int,
+      maxdepth=theme_navigation_depth | int,
+      collapse=theme_collapse_navigation | tobool,
+      includehidden=theme_sidebar_includehidden | tobool,
+      titles_only=True
+      )
+    -}}
+  </div>
+</nav>

python/packages/autogen-core/docs/src/_static/images/logo/favicon.ico

@@ -0,0 +1,7 @@
+{# Displays an icon to switch between light mode, dark mode, and auto (use browser's setting). #}
+{# As the theme switcher will only work when JavaScript is enabled, we hide it with `pst-js-only`. #}
+<button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" aria-label="{{ _('Color mode') }}" data-bs-title="{{ _('Color mode') }}"  data-bs-placement="bottom" data-bs-toggle="tooltip">
+  <i class="theme-switch fa-solid fa-sun                fa-lg" data-mode="light" title="{{ _('Light') }}"></i>
+  <i class="theme-switch fa-solid fa-moon               fa-lg" data-mode="dark"  title="{{ _('Dark') }}"></i>
+  <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"  title="{{ _('System Settings') }}"></i>
+</button>

python/packages/autogen-core/docs/src/_static/images/logo/logo.svg

@@ -71,6 +71,9 @@
 html_css_files = ["custom.css"]
 html_sidebars = {'packages/index': []}
 
+html_logo = "_static/images/logo/logo.svg"
+html_favicon = "_static/images/logo/favicon-512x512.png"
+
 html_theme_options = {
 
     "header_links_before_dropdown": 4,
@@ -81,7 +84,6 @@
     #     "json_url": "/_static/switcher.json",
     # },
     "show_prev_next": False,
-    ""
     "icon_links": [
         {
             "name": "Twitter",
@@ -90,7 +92,7 @@
         },
         {
             "name": "GitHub",
-            "url": "https://github.com/microsoft/agnext",
+            "url": "https://github.com/microsoft/autogen",
             "icon": "fa-brands fa-github",
         },
         {
@@ -99,19 +101,24 @@
             "icon": "fa-custom fa-pypi",
         },
     ],
-    "announcement": '🚧 AutoGen 0.4 is a work in progress, learn more about what\'s new and different <a href="#">here</a>. To continue using the latest stable version, please visit the <a href="/autogen/0.2/">0.2 documentation</a>. 🚧',
+
+    "announcement": 'AutoGen 0.4 is a work in progress. Go <a href="/autogen/0.2/">here</a> to find the 0.2 documentation.',
+    "footer_start": ["copyright"],
+    "footer_center": ["footer-middle-links"],
+    "footer_end": ["theme-version"],
+    "pygments_light_style": "xcode",
+    "pygments_dark_style": "monokai"
 }
 
 html_js_files = ["custom-icon.js"]
 html_sidebars = {
-    "reference/index": [],
     "packages/index": [],
 }
 
 html_context = {
     'display_github': True,
     "github_user": "microsoft",
-    "github_repo": "agnext",
+    "github_repo": "autogen",
     "github_version": "main",
     "doc_path": "python/packages/autogen-core/docs/src/",
 }
@@ -121,8 +128,6 @@
     "undoc-members": True,
 }
 
-
-
 intersphinx_mapping = {"python": ("https://docs.python.org/3", None)}
 
 

python/packages/autogen-core/docs/src/_static/switcher.json

@@ -18,105 +18,72 @@ sd_hide_title: true
 # AutoGen
 
 <div class="container">
-
 <div class="row text-center">
 <div class="col-sm-12">
 <h1 class="hero-title">
 AutoGen
 </h1>
 <h3>
-A framework for developing applications using AI agents
+A framework for building AI agents and multi-agent applications
 </h3>
 </div>
 </div>
+</div>
 
+<div style="margin-top: 2rem;">
 
-<div class="row">
-
-<div class="col-sm">
-<h2 class="text-center">
-
-{fas}`people-group;pst-color-primary` AgentChat
 
-</h2>
+::::{grid} 1 1 2 2
 
-<p>
-Task driven, high level APIs for building multi-agent systems. Including group chat, pre-built agents, and more.
+:::{grid-item-card} {fas}`people-group;pst-color-primary` AgentChat
+:shadow: none
+:margin: 2 0 0 0
 
-Built with <i>core</i>.
-<p>
+High-level API that includes preset agents and teams for building multi-agent systems.
 
 ```sh
 pip install autogen-agentchat==0.4.0dev0
 ```
 
-<button onclick="location.href='agentchat-user-guide/guides/quickstart.html'" type="button" class="btn btn-primary">Get Started</button>
-<button onclick="location.href='reference/python/autogen_agentchat/autogen_agentchat.html'" type="button" class="btn btn-outline-secondary">API Reference</button>
+💡 *Start here if you are looking for an API similar to AutoGen 0.2*
 
-<div class="versionadded">
-<p>Start here if you are looking for an API similar to AutoGen 0.2</p>
-</div>
++++
 
-</div>
-<div class="col-sm">
-<h2 class="text-center">
+```{button-ref} user-guide/agentchat-user-guide/quickstart
+:color: secondary
 
-{fas}`cube;pst-color-primary` Core
+Get Started
+```
 
-</h2>
+:::
+:::{grid-item-card} {fas}`cube;pst-color-primary` Core
+:shadow: none
+:margin: 2 0 0 0
 
-<p>
-Primitive building blocks for creating asynchronous, event driven multi-agent systems.
-<p>
+Provides building blocks for creating asynchronous, event driven multi-agent systems.
 
 ```sh
 pip install autogen-core==0.4.0dev0
 ```
 
-<button onclick="location.href='core-user-guide/guides/quickstart.html'" type="button" class="btn btn-primary">Get Started</button>
-<button onclick="location.href='reference/python/autogen_core/autogen_core.html'" type="button" class="btn btn-outline-secondary">API Reference</button>
-
-</div>
-
-</div>
-</div>
-
-<!--
-Key features of AutoGen include:
++++
 
-- Asynchronous messaging: Agents communicate with each other through asynchronous messages, enabling event-driven and request/response communication models.
-- Scalable & Distributed: Enable complex scenarios with networks of agents across org boundaries
-- Modular, extensible & highly customizable: E.g. custom agents, memory as a service, tools registry, model library
-- x-lang support: Python & Dotnet interoperating agents today, others coming soon
-- Observable, traceable & debuggable -->
+```{button-ref} user-guide/core-user-guide/quickstart
+:color: secondary
 
-```{toctree}
-:maxdepth: 1
-:hidden:
-
-agentchat-user-guide/index
-core-user-guide/index
+Get Started
 ```
 
-<!-- ## Community
-
-Information about the community that leads, supports, and develops AutoGen.
+:::
+::::
 
-```{toctree}
-:maxdepth: 2
-
-community/index
-``` -->
+</div>
 
 ```{toctree}
-:maxdepth: 2
+:maxdepth: 3
 :hidden:
-packages/index
-```
 
-```{toctree}
-:maxdepth: 1
-:hidden:
+user-guide/index
+packages/index
 reference/index
 ```
-