Merge pull request #3 from harishmohanraj/add-home-and-blog-pages

Add home and blog pages

.github/workflows/deploy-website-mintlify.yml

@@ -23,7 +23,7 @@ jobs:
         run: |
           # Create a temporary directory for filtered content
           mkdir -p temp_website
-          
+
           # Copy all files except .ipynb and node_modules
           find website -type f -not -path "*/node_modules/*" -not -name "*.ipynb" -exec cp --parents {} temp_website/ \;
 
@@ -32,4 +32,4 @@ jobs:
         with:
           branch: mintlify-pages
           folder: temp_website/website
-          clean: true # Automatically remove deleted files from the deploy branch
+          clean: true # Automatically remove deleted files from the deploy branch

notebook/agentchat_custom_model.ipynb

@@ -441,7 +441,7 @@
  ],
  "metadata": {
   "front_matter": {
-   "description": "Define and laod a custom model",
+   "description": "Define and load a custom model",
    "tags": [
     "integration",
     "custom model"

website/.gitignore

@@ -9,7 +9,7 @@ package-lock.json
 .docusaurus
 .cache-loader
 docs/reference
-/docs/notebooks
+/notebooks
 
 docs/tutorial/*.mdx
 docs/tutorial/**/*.png

website/blog/2024-03-03-AutoGen-Update/index.mdx

@@ -38,7 +38,7 @@ Many users have deep understanding of the value in different dimensions, such as
 
 > The same reason autogen is significant is the same reason OOP is a good idea. Autogen packages up all that complexity into an agent I can create in one line, or modify with another.
 
-{/* 
+{/*
 I had lots of ideas I wanted to implement, but it needed a framework like this
 and I am just not the guy to make such a robust and intelligent framework.
 */}

website/docs/Examples.mdx

@@ -1,4 +1,6 @@
-# Examples
+---
+title: Examples by Category
+---
 
 ## Automated Multi Agent Chat
 

website/docs/FAQ.mdx

@@ -284,4 +284,4 @@ RUN apt-get clean && \
     apt-get install sudo git npm # and whatever packages need to be installed in this specific version of the devcontainer
 ```
 
-This is a combination of StackOverflow suggestions [here](https://stackoverflow.com/a/48777773/2114580) and [here](https://stackoverflow.com/a/76092743/2114580).
+This is a combination of StackOverflow suggestions [here](https://stackoverflow.com/a/48777773/2114580) and [here](https://stackoverflow.com/a/76092743/2114580).

website/docs/Gallery.mdx

@@ -1,18 +1,18 @@
 ---
-hide_table_of_contents: true
+title: Application Gallery
+mode: "wide"
 ---
 
-import GalleryPage from "/snippets/components/GalleryPage.js";
-import galleryData from "/snippets/data/gallery.json";
-
-# Gallery
+import { GalleryPage } from "/snippets/components/GalleryPage.mdx";
+import { galleryItems } from "/snippets/data/GalleryItems.mdx";
+import { ClientSideComponent } from "/snippets/components/ClientSideComponent.mdx";
 
 This page contains a list of demos that use AutoGen in various applications from the community.
 
 **Contribution guide:**
 Built something interesting with AutoGen? Submit a PR to add it to the list! See the [Contribution Guide below](#contributing) for more details.
 
-<GalleryPage items={galleryData} />
+<ClientSideComponent Component={GalleryPage} componentProps={{galleryItems: galleryItems}} />
 
 ## Contributing
 

website/docs/Home.mdx

@@ -0,0 +1,26 @@
+---
+title: "Home"
+mode: "wide"
+---
+
+import { PopularResources } from '/snippets/components/PopularResources.mdx';
+import { KeyFeatures } from '/snippets/components/KeyFeatures.mdx';
+import { ExploreContent } from '/snippets/components/ExploreContent.mdx';
+
+<div class="homepage-hero-section">
+  <div class="hero-content">
+    <img class="hero-logo" noZoom src="/static/img/ag2.svg" width="400em" />
+    <h2 class="hero-title">AG2</h2>
+    <p class="hero-subtitle">The Open Source Agent OS</p>
+    <a class="hero-btn" href="/docs/Getting-Started">Getting Started - 3min ⏱️</a>
+  </div>
+</div>
+
+### Popular resources
+<PopularResources />
+
+### Key Features
+<KeyFeatures />
+
+### Explore content
+<ExploreContent />

website/docs/Notebooks.mdx

@@ -0,0 +1,15 @@
+---
+title: Notebooks
+mode: "wide"
+---
+
+import { GalleryPage } from '/snippets/components/GalleryPage.mdx';
+import { ClientSideComponent } from "/snippets/components/ClientSideComponent.mdx";
+import { notebooksMetadata } from "/snippets/data/NotebooksMetadata.mdx";
+
+This page contains a collection of notebooks that demonstrate how to use
+AutoGen. The notebooks are tagged with the topics they cover.
+For example, a notebook that demonstrates how to use function calling will
+be tagged with `tool/function`.
+
+<ClientSideComponent Component={GalleryPage} componentProps={{galleryItems: notebooksMetadata, target: "_self", allowDefaultImage: false}} />

website/mint-app-gallery-deps.js

@@ -0,0 +1,106 @@
+// Load jQuery if not present
+if (typeof jQuery === "undefined") {
+  const jqueryScript = document.createElement("script");
+  jqueryScript.src =
+    "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js";
+  document.head.appendChild(jqueryScript);
+
+  jqueryScript.onload = function () {
+    // Load Chosen after jQuery
+    const chosenScript = document.createElement("script");
+    chosenScript.src =
+      "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js";
+    document.head.appendChild(chosenScript);
+
+    // Add Chosen CSS
+    const chosenStyles = document.createElement("link");
+    chosenStyles.rel = "stylesheet";
+    chosenStyles.href =
+      "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css";
+    document.head.appendChild(chosenStyles);
+
+    // Initialize Chosen when everything is loaded
+    chosenScript.onload = function () {
+      initializeGallerySelect();
+    };
+  };
+}
+
+function getTagsFromURL() {
+  const searchParams = new URLSearchParams(window.location.search);
+  const tags = searchParams.get("tags");
+  return tags ? tags.split(",") : [];
+}
+
+// Function to initialize Chosen on gallery select
+function initializeGallerySelect() {
+  // Add flag to check if already initialized
+  const selectElement = $(".examples-gallery-container .tag-filter");
+  if (selectElement.length && !selectElement.data("chosen-initialized")) {
+    selectElement
+      .chosen({
+        width: "100%",
+        placeholder_text_multiple: "Filter by tags",
+      })
+      .data("chosen-initialized", true);
+
+    // Get tags from URL and update chosen
+    const urlTags = getTagsFromURL();
+    if (urlTags.length > 0) {
+      selectElement.val(urlTags);
+      selectElement.trigger("chosen:updated");
+
+      // Trigger the gallery:tagChange event with URL tags
+      const customEvent = new CustomEvent("gallery:tagChange", {
+        detail: urlTags,
+      });
+      document.dispatchEvent(customEvent);
+    }
+
+    // Set up change handler
+    selectElement.on("change", function (evt, params) {
+      const selectedValues = $(this).val() || [];
+      const customEvent = new CustomEvent("gallery:tagChange", {
+        detail: selectedValues,
+      });
+      document.dispatchEvent(customEvent);
+    });
+  }
+}
+
+// Debounce function
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+// Debounced version of initialize
+const debouncedInitialize = debounce(initializeGallerySelect, 100);
+
+// Watch for URL changes using MutationObserver
+const observer = new MutationObserver((mutations) => {
+  if (window.location.pathname.includes("/notebooks")) {
+    debouncedInitialize();
+  }
+});
+
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: false,
+  characterData: false,
+});
+
+// Initialize on page load
+document.addEventListener("DOMContentLoaded", function () {
+  if (window.jQuery && window.jQuery.fn.chosen) {
+    initializeGallerySelect();
+  }
+});