feat: landing page improvements

.gitignore

@@ -164,3 +164,6 @@ cython_debug/
 #.idea/
 
 # End of https://www.toptal.com/developers/gitignore/api/python
+
+# Ignore generated project.json file used by documentation
+doc/source/_static/projects.json

doc/source/_static/css/landing_page.css

@@ -0,0 +1,91 @@
+html {
+    overflow-y: scroll !important;
+}
+
+.landing-page-sidebar {
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: column;
+    padding: 0rem 2rem;
+}
+.landing-page-sidebar-section {
+    margin-bottom: 2rem;
+    font-weight: bold;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.landing-page-sidebar-section span {
+    font-size: 18px;
+    font-weight: bold;
+}
+.family-row, .tag-row {
+    display: flex;
+    align-items: center;
+    margin: 5px 0;
+}
+.family-row input, .tag-row input {
+    margin-right: 10px;
+}
+.family-name {
+    margin-right: 10px;
+}
+.family-count {
+    margin-left: auto;
+    background-color: lightgrey;
+    border-radius: 50%;
+    padding: 0.25rem 0.75rem;
+}
+.selected-families {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+.selected-family {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 5px;
+    background-color: lightgrey;
+}
+.remove-family {
+    cursor: pointer;
+    color: black;
+    font-weight: bold;
+}
+
+.projects {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    margin-bottom: 1.5rem;
+}
+
+.project-card {
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    background-color: white;
+}
+
+.project-thumbnail {
+    padding: 0;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+}
+
+.project-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 0rem;
+    padding: 0.5rem;
+    padding-left: 1rem;
+}
+
+.project-description {
+    margin-top: 1rem;
+    padding: 0.5rem;
+    padding-left: 1rem;
+}

doc/source/_static/js/landing_page.js

@@ -0,0 +1,194 @@
+function collectFamilies(data) {
+    const familyCounts = {};
+
+    if (!data.projects || typeof data.projects !== 'object') {
+        console.error('Invalid projects data structure:', data.projects);
+        return familyCounts;
+    }
+
+    const projects = Object.values(data.projects);
+
+    for (const project of projects) {
+        if (!project || typeof project !== 'object') continue;
+
+        const family = project.family;
+
+        if (family) {
+            familyCounts[family] = (familyCounts[family] || 0) + 1;
+        }
+    }
+
+    return familyCounts;
+}
+
+function collectTags(data) {
+    const tagCounts = {};
+
+    if (!data.projects || typeof data.projects !== 'object') {
+        console.error('Invalid projects data structure:', data.projects);
+        return tagCounts;
+    }
+
+    const projects = Object.values(data.projects);
+
+    for (const project of projects) {
+        if (!project || typeof project !== 'object') continue;
+
+        const tags = project.tags;
+
+        if (Array.isArray(tags)) {
+            tags.forEach(tag => {
+                tagCounts[tag] = (tagCounts[tag] || 0) + 1;
+            });
+        }
+    }
+
+    return tagCounts;
+}
+
+function displayFamilies(familyCounts) {
+    const familiesContainer = document.getElementById('product-families-list');
+    familiesContainer.innerHTML = '';
+
+    const sortedFamilies = Object.keys(familyCounts).sort();
+
+    sortedFamilies.forEach(family => {
+        const familyCount = familyCounts[family];
+
+        const familyRow = document.createElement('div');
+        familyRow.className = 'family-row';
+
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.id = `family-${CSS.escape(family)}`;
+        checkbox.addEventListener('change', handleFamilySelection);
+
+        const familyName = document.createElement('span');
+        familyName.className = 'family-name';
+        familyName.textContent = family;
+
+        const familyCountElem = document.createElement('span');
+        familyCountElem.className = 'family-count';
+        familyCountElem.textContent = `(${familyCount})`;
+
+        familyRow.appendChild(checkbox);
+        familyRow.appendChild(familyName);
+        //familyRow.appendChild(familyCountElem);
+
+        familiesContainer.appendChild(familyRow);
+    });
+}
+
+function displayTags(tagCounts) {
+    const tagsContainer = document.getElementById('product-tags-list');
+    tagsContainer.innerHTML = '';
+
+    const sortedTags = Object.keys(tagCounts).sort();
+
+    sortedTags.forEach(tag => {
+        const tagCount = tagCounts[tag];
+
+        const tagRow = document.createElement('div');
+        tagRow.className = 'tag-row';
+
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.id = `tag-${CSS.escape(tag)}`;
+        checkbox.addEventListener('change', handleTagSelection);
+
+        const tagName = document.createElement('span');
+        tagName.className = 'tag-name';
+        tagName.textContent = tag;
+
+        const tagCountElem = document.createElement('span');
+        tagCountElem.className = 'tag-count';
+        tagCountElem.textContent = `(${tagCount})`;
+
+        tagRow.appendChild(checkbox);
+        tagRow.appendChild(tagName);
+        //tagRow.appendChild(tagCountElem);
+
+        tagsContainer.appendChild(tagRow);
+    });
+}
+
+function handleFamilySelection() {
+    const selectedFamilies = Array.from(
+        document.querySelectorAll('#product-families-list input[type="checkbox"]:checked')
+    ).map(checkbox => checkbox.id.replace('family-', '').toLowerCase());
+
+    console.log('Selected families:', selectedFamilies);
+
+    const projectCards = document.querySelectorAll('.project-card');
+
+    projectCards.forEach(card => {
+        const family = card.getAttribute('data-family').toLowerCase();
+        card.style.display = selectedFamilies.length === 0 || selectedFamilies.includes(family) ? 'flex' : 'none';
+    });
+}
+
+function handleTagSelection() {
+    const selectedTags = Array.from(
+        document.querySelectorAll('#product-tags-list input[type="checkbox"]:checked')
+    ).map(checkbox => checkbox.id.replace('tag-', '').toLowerCase());
+
+    console.log('Selected tags:', selectedTags);
+
+    const projectCards = document.querySelectorAll('.project-card');
+
+    projectCards.forEach(card => {
+        const rawTags = card.getAttribute('data-tags');
+
+        if (!rawTags) {
+            card.style.display = 'none';
+            return;
+        }
+
+        // Parse the data-tags string
+        let cardTags = [];
+        try {
+            cardTags = JSON.parse(rawTags.replace(/'/g, '"'));
+        } catch (error) {
+            console.error('Error parsing data-tags:', rawTags, error);
+            card.style.display = 'none';
+            return;
+        }
+
+        const cardTagsLower = cardTags.map(tag => tag.toLowerCase());
+        const hasMatchingTag = selectedTags.some(tag => cardTagsLower.includes(tag));
+
+        card.style.display = selectedTags.length === 0 || hasMatchingTag ? 'flex' : 'none';
+    });
+}
+
+function initializeAllCards() {
+    const articleElement = document.querySelector('article');
+    const projects = articleElement.querySelectorAll('.project-card');
+    projects.forEach(project => {
+        project.style.display = 'flex';
+    });
+}
+
+fetch('_static/projects.json')
+    .then(response => {
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+    })
+    .then(data => {
+        // Display families
+        const familyCounts = collectFamilies(data);
+        displayFamilies(familyCounts);
+
+        // Display tags
+        const tagCounts = collectTags(data);
+        displayTags(tagCounts);
+
+        // Render all cards
+        initializeAllCards();
+    })
+    .catch(error => {
+        console.error('Error fetching the projects data:', error);
+    });
+

doc/source/_templates/landing_page_sidebar.html

@@ -0,0 +1,19 @@
+<div class="landing-page-sidebar">
+
+    <!-- Product families -->
+    <div class="landing-page-sidebar-section product-families">
+        <span>Product families</span>
+        <div id="product-families-list"></div>
+        <a class="show-more">Show more</a>
+    </div>
+
+    <hr>
+
+    <!-- Tags -->
+    <div class="landing-page-sidebar-section product-tags">
+        <span>Tags</span>
+        <div id="product-tags-list"></div>
+        <a class="show-more">Show more</a>
+    </div>
+
+</div>

doc/source/conf.py

@@ -1,6 +1,7 @@
 """Configuration file for docs.pyansys.com landing page."""
 
 from datetime import datetime
+import json
 import os
 from pathlib import Path
 import subprocess
@@ -61,7 +62,7 @@
 cname = os.getenv("DOCUMENTATION_CNAME", default="nocname.com")
 switcher_version = get_version_match(pyansys_version)
 
-# get the PyAnsys version
+# Get the PyAnsys version
 release = version = pyansys_version
 
 html_theme = "ansys_sphinx_theme"
@@ -70,13 +71,23 @@
 # Favicon
 html_favicon = ansys_favicon
 
+html_sidebars = {
+    "index": ["landing_page_sidebar.html"],
+}
+
 extensions = [
     "sphinx_design",
     "sphinx_copybutton",
     "sphinxcontrib.mermaid",
     "sphinx_jinja",
 ]
 
+# Static files
+templates_path = ["_templates"]
+html_static_path = ["_static"]
+html_css_files = ["css/landing_page.css"]
+html_js_files = ["js/landing_page.js"]
+
 metadata = Path(__file__).parent.parent.parent / "projects.yaml"
 
 jinja_contexts = {
@@ -439,6 +450,32 @@ def package_versions_table(app: sphinx.application.Sphinx):
     )
 
 
+def convert_yaml_to_json(app: sphinx.application.Sphinx):
+    """
+    Convert a YAML file to a JSON file.
+
+    Parameters:
+    yaml_path (Path): Path to the YAML file.
+    json_path (Path): Path to save the JSON file.
+
+    Returns:
+    None
+    """
+    if not metadata.exists() or not metadata.is_file():
+        raise FileNotFoundError(f"The file {metadata} does not exist or is not a file.")
+
+    with metadata.open("r", encoding="utf-8") as yaml_file:
+        try:
+            yaml_content = yaml.safe_load(yaml_file)
+        except yaml.YAMLError as e:
+            raise ValueError(f"Error parsing YAML file: {e}")
+
+    json_path = Path(__file__).parent / "_static" / "projects.json"
+    with json_path.open("w", encoding="utf-8") as json_file:
+        json.dump(yaml_content, json_file, indent=4)
+        print(f"JSON file successfully written to {json_path}")
+
+
 def setup(app: sphinx.application.Sphinx):
     """Run different hook functions during the documentation build.
 
@@ -448,6 +485,7 @@ def setup(app: sphinx.application.Sphinx):
         Sphinx instance containing all the configuration for the documentation build.
     """
     # At the beginning of the build process - update the version in cheatsheet
+    app.connect("builder-inited", convert_yaml_to_json)
     app.connect("builder-inited", resize_thumbnails)
     app.connect("builder-inited", package_versions_table)