diff --git a/doc/source/_static/css/landing_page.css b/doc/source/_static/css/projects_sidebar.css
similarity index 94%
rename from doc/source/_static/css/landing_page.css
rename to doc/source/_static/css/projects_sidebar.css
index 4ec146c5..a0076f88 100644
--- a/doc/source/_static/css/landing_page.css
+++ b/doc/source/_static/css/projects_sidebar.css
@@ -2,13 +2,13 @@ html {
overflow-y: scroll !important;
}
-.landing-page-sidebar {
+.projects-page-sidebar {
margin-top: 2rem;
display: flex;
flex-direction: column;
padding: 0rem 2rem;
}
-.landing-page-sidebar-section {
+.projects-page-sidebar-section {
margin-bottom: 2rem;
font-weight: 700;
display: flex;
@@ -20,7 +20,7 @@ html {
margin-top: 1rem;
}
-.landing-page-sidebar-section span {
+.projects-page-sidebar-section span {
font-size: 0.85rem;
}
@@ -112,7 +112,7 @@ html {
grid-template-columns: 1fr;
}
- .landing-page-sidebar {
+ .projects-page-sidebar {
padding: 1rem;
}
diff --git a/doc/source/_static/css/style.css b/doc/source/_static/css/style.css
new file mode 100644
index 00000000..142832bf
--- /dev/null
+++ b/doc/source/_static/css/style.css
@@ -0,0 +1,58 @@
+/* Remove breadcrumbs */
+.bd-header-article {
+ display: none !important;
+}
+
+/* Maximize the width of the content area */
+.bd-main .bd-content {
+ display: flex !important;
+ height: 100% !important;
+ justify-content: center !important;
+}
+
+.bd-main .bd-content .bd-article-container {
+ width: 100% !important;
+}
+
+.center {
+ margin: 0 auto !important;
+}
+
+#hero-image {
+ transition: opacity 0.5s ease-in-out;
+ opacity: 1;
+}
+
+.fade-out {
+ opacity: 0;
+}
+
+.fade-in {
+ opacity: 1;
+}
+
+.section-divider {
+ display: flex;
+ align-items: center;
+ text-align: center;
+ margin: 40px 0;
+}
+
+.section-divider::before,
+.section-divider::after {
+ content: "";
+ flex: 1;
+ height: 1px;
+ background: linear-gradient(to right, transparent, #000);
+}
+
+.section-divider::after {
+ background: linear-gradient(to left, transparent, #000);
+}
+
+.section-title {
+ padding: 0 20px;
+ font-size: 2.5rem;
+ font-weight: bold;
+ white-space: nowrap;
+}
diff --git a/doc/source/_static/js/blogs_sidebar.js b/doc/source/_static/js/blogs_sidebar.js
new file mode 100644
index 00000000..3a2a8912
--- /dev/null
+++ b/doc/source/_static/js/blogs_sidebar.js
@@ -0,0 +1,253 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const state = {
+ products: new Set(),
+ industries: new Set(),
+ tags: new Set(),
+ };
+ const blogContainer = document.getElementById("blog-container");
+ let allPosts = {};
+
+ function createCheckbox(name, containerId, type) {
+ const id = `${type}-${name}`;
+
+ const wrapper = document.createElement("div");
+ wrapper.className = "checkbox-wrapper";
+
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.id = id;
+ input.value = name;
+ input.style.marginRight = "5px";
+
+ const label = document.createElement("label");
+ label.setAttribute("for", id);
+ label.textContent = name;
+ label.style.cursor = "pointer";
+
+ input.addEventListener("change", () => {
+ if (input.checked) {
+ state[type].add(name);
+ } else {
+ state[type].delete(name);
+ }
+ updateVisiblePosts();
+ updateTagFilter();
+ // updateProductFilter();
+ updateIndustryFilter();
+ });
+
+ wrapper.appendChild(input);
+ wrapper.appendChild(label);
+
+ const container = document.querySelector(
+ `#${containerId} .collapsible-content`,
+ );
+ if (container) container.appendChild(wrapper);
+ }
+
+ function generateFilters(data) {
+ const products = new Set();
+ const industries = new Set();
+ const tags = new Set();
+
+ for (const key in data) {
+ const post = data[key];
+
+ (post.products || "")
+ .split(",")
+ .map((p) => p.trim())
+ .filter(Boolean)
+ .forEach((p) => products.add(p));
+ (post.industries || "")
+ .split(",")
+ .map((c) => c.trim())
+ .filter(Boolean)
+ .forEach((c) => industries.add(c));
+ (post.tags || "")
+ .split(",")
+ .map((t) => t.trim())
+ .filter(Boolean)
+ .forEach((t) => tags.add(t));
+ }
+
+ [...products]
+ .sort()
+ .forEach((p) => createCheckbox(p, "product-filters", "products"));
+ [...industries]
+ .sort()
+ .forEach((i) => createCheckbox(i, "industry-filters", "industries"));
+ [...tags].sort().forEach((t) => createCheckbox(t, "tag-filters", "tags"));
+ }
+
+ function updateTagFilter() {
+ const selectedProducts = [...state.products];
+ const selectedIndustries = [...state.industries];
+
+ for (const label of document.querySelectorAll("#tag-filters label")) {
+ const checkbox = label.querySelector("input[type=checkbox]");
+ const value = checkbox.value;
+
+ let isVisible = false;
+
+ for (const key in allPosts) {
+ const post = allPosts[key];
+ const postTags = (post.tags || "").split(",").map((t) => t.trim());
+ const postProducts = (post.products || "")
+ .split(",")
+ .map((p) => p.trim());
+ const postIndustries = (post.industries || "")
+ .split(",")
+ .map((c) => c.trim());
+
+ const matchProduct =
+ selectedProducts.length === 0 ||
+ postProducts.some((p) => selectedProducts.includes(p));
+ const matchIndustry =
+ selectedIndustries.length === 0 ||
+ postIndustries.some((c) => selectedIndustries.includes(c));
+ const matchTag = postTags.includes(value);
+
+ if (matchProduct && matchIndustry && matchTag) {
+ isVisible = true;
+ break;
+ }
+ }
+
+ label.style.display = isVisible ? "block" : "none";
+ }
+ }
+
+ // function updateProductFilter() {
+ // const selectedTags = [...state.tags];
+ // const selectedIndustries = [...state.industries];
+ // const productSet = new Set();
+
+ // for (const key in allPosts) {
+ // const post = allPosts[key];
+ // const postProducts = (post.products || "").split(",").map(p => p.trim());
+ // const postIndustries = (post.industries || "").split(",").map(c => c.trim());
+ // const matchTag = selectedTags.length === 0 || (post.tags || "").split(",").map(t => t.trim()).some(t => selectedTags.includes(t));
+ // const matchIndustry = selectedIndustries.length === 0 || postIndustries.some(c => selectedIndustries.includes(c));
+
+ // if (matchTag && matchIndustry) {
+ // postProducts.filter(Boolean).forEach(p => productSet.add(p));
+ // }
+ // }
+
+ // const container = document.querySelector("#product-filters .collapsible-content");
+ // if (!container) return;
+
+ // container.innerHTML = "";
+ // [...productSet].sort().forEach(p => createCheckbox(p, "product-filters", "products"));
+ // }
+
+ function updateIndustryFilter() {
+ const selectedTags = [...state.tags];
+ const selectedProducts = [...state.products];
+ const industrySet = new Set();
+
+ for (const key in allPosts) {
+ const post = allPosts[key];
+ const postIndustries = (post.industries || "")
+ .split(",")
+ .map((c) => c.trim());
+ const postProducts = (post.products || "")
+ .split(",")
+ .map((p) => p.trim());
+ const matchTag =
+ selectedTags.length === 0 ||
+ (post.tags || "")
+ .split(",")
+ .map((t) => t.trim())
+ .some((t) => selectedTags.includes(t));
+ const matchProduct =
+ selectedProducts.length === 0 ||
+ postProducts.some((p) => selectedProducts.includes(p));
+
+ if (matchTag && matchProduct) {
+ postIndustries.filter(Boolean).forEach((c) => industrySet.add(c));
+ }
+ }
+
+ const container = document.querySelector(
+ "#industry-filters .collapsible-content",
+ );
+ if (!container) return;
+
+ container.innerHTML = "";
+ [...industrySet]
+ .sort()
+ .forEach((c) => createCheckbox(c, "industry-filters", "industries"));
+ }
+
+ function updateVisiblePosts() {
+ if (!blogContainer) return;
+ blogContainer.innerHTML = "";
+
+ for (const key in allPosts) {
+ const post = allPosts[key];
+ const postProducts = (post.products || "")
+ .split(",")
+ .map((p) => p.trim());
+ const postIndustries = (post.industries || "")
+ .split(",")
+ .map((c) => c.trim());
+ const postTags = (post.tags || "").split(",").map((t) => t.trim());
+
+ const matchProduct =
+ state.products.size === 0 ||
+ postProducts.some((p) => state.products.has(p));
+ const matchIndustry =
+ state.industries.size === 0 ||
+ postIndustries.some((c) => state.industries.has(c));
+ const matchTag =
+ state.tags.size === 0 || postTags.some((t) => state.tags.has(t));
+
+ if (matchProduct && matchIndustry && matchTag) {
+ const postCard = document.createElement("div");
+ postCard.className = "project-card sd-card sd-shadow-sm sd-card-hover";
+ postCard.onclick = () => (window.location.href = `${key}.html`);
+
+ const description = post.description || "";
+ const shortDescription =
+ description.length > 100
+ ? description.slice(0, 100) + "..."
+ : description;
+
+ postCard.innerHTML = `
+ ${post.image ? `` : ""}
+
${post.title || key}
+${shortDescription}
+
+ ${post.author || "PyAnsys Team"}
+ ${post.date || "Unknown Date"}
+
+ {{ post.author or "Unknown" }} • {{ post.date or "No date" }} +
++ {{ post.summary or "No summary available." }} +
+