Implement tag filtering.

Author: vgvassilev

_data/openprojectlist.yml

@@ -26,14 +26,14 @@
     As an extended goal, we aim to develop a new plugin for GPU execution,
     leveraging CUDA or OpenMP to support high-performance computing workflows
     within Jupyter.
-
   tasks: |
     * Move the currently implemented magics and reframe using xplugin
     * Complete the on-going work on the Python interoperability magic
     * Implement a test suite for the plugins
     * Extended: To be able to execute on GPU using CUDA or OpenMP
     * Optional: Extend the magics for the wasm use case (xeus-cpp-lite)
     * Present the work at the relevant meetings and conferences
+  tags: ["xeus", "xeus-cpp", "clang", "clang-repl", "jupyter", "gpu", "cuda", "python", "plugins"]
 
 - name: "Enhancing LLM Training with Clad for efficient differentiation"
   description: |
@@ -61,7 +61,6 @@
     has the potential to enhance both research and production-level AI
     applications, aligning with compiler-research.org's broader goal of
     advancing computational techniques for scientific discovery.
-  
   tasks: |
     * Develop a simplified LLM setup in C++
     * Apply Clad to compute gradients for selected layers and loss functions
@@ -71,6 +70,7 @@
     * Develop tests to ensure correctness, numerical stability, and efficiency
     * Document the approach, implementation details, and performance gains
     * Present progress and findings at relevant meetings and conferences
+  tags: ["clad", "llm", "ai", "machine-learning", "automatic-differentiation", "cpp", "optimization"]
 
 - name: "Integrate Clad in PyTorch and compare the gradient execution times"
   description: |
@@ -85,7 +85,6 @@
     computed by PyTorch's native autograd system. Special attention will be
     given to CUDA-enabled gradient computations, as PyTorch also offers GPU
     acceleration capabilities.
-  
   tasks: |
     * Incorporate Clad's API components (such as `clad::array` and `clad::tape`)
     into PyTorch using its C++ API
@@ -96,6 +95,7 @@
     * Document thoroughly the integration process and the benchmark results and identify
     potential bottlenecks in Clad's execution
     * Present the work at the relevant meetings and conferences.
+  tags: ["clad", "pytorch", "python", "cuda", "benchmarking", "automatic-differentiation", "gpu"]
 
 - name: "Enable automatic differentiation of C++ STL concurrency primitives in Clad"
   description: |
@@ -104,14 +104,14 @@
     derivatives of the function. This project focuses on enabling automatic differentiation
     of codes that utilise C++ concurrency features such as `std::thread`, `std::mutex`,
     atomic operations and more. This will allow users to fully utilize their CPU resources.
-  
   tasks: |
     * Explore C++ concurrency primitives and prepare a report detailing the associated challenges
     involved and the features that can be feasibly supported within the given timeframe.
     * Add concurrency primitives support in Clad's forward-mode automatic differentiation.
     * Add concurrency primitives support in Clad's reverse-mode automatic differentiation.
     * Add proper tests and documentation.
     * Present the work at the relevant meetings and conferences.
+  tags: ["clad", "cpp", "stl", "concurrency", "multithreading", "automatic-differentiation"]
 
 - name: "Interactive Differential Debugging - Intelligent Auto-Stepping and Tab-Completion"
   description: |
@@ -131,14 +131,13 @@
     of the system, then drop to the debugger. This may be achieved by introducing new IDD-specific
     commands. IDD should be able to tab complete the underlying GDB/LLDB commands. The contributor
     is also expected to set up the necessary CI infrastructure to automate the testing process of IDD.
-
-  
   tasks: |
     * Enable stream capture
     * Enable IDD-specific commands to execute until diverging stack or variable value.
     * Enable tab completion of commands.
     * Set up CI infrastructure to automate testing IDD.
     * Present the work at the relevant meetings and conferences.
+  tags: ["debugging", "idd", "gdb", "lldb", "regression", "tooling", "ci"]
 
 - name: "Implement CppInterOp API exposing memory, ownership and thread safety information "
   description: |
@@ -166,14 +165,14 @@
     cppyy (Python-C++ language bindings) as an exemplar. If time permits, extend
     the work to persistify this information across translation units and use it on
     code compiled with Clang.
-
   tasks: |
     * Collect and categorize possible exposed interop information kinds
     * Write one or more facilities to extract necessary implementation details
     * Design a language-independent interface to expose this information
     * Integrate the work in clang-repl and Cling
     * Implement and demonstrate its use in cppyy as an exemplar
     * Present the work at the relevant meetings and conferences.
+  tags: ["cppinterop", "cppyy", "clang-repl", "cling", "interoperability", "ast", "jit"]
 
 - name: "Implement and improve an efficient, layered tape with prefetching capabilities"
   description: |
@@ -205,7 +204,6 @@
 
     This project aims to improve the efficiency of the clad tape and generalize
     it into a tool-agnostic facility that could be used outside of clad as well.
-
   tasks: |
     * Optimize the current tape by avoiding re-allocating on resize in favor of using connected slabs of array
     * Enhance existing benchmarks demonstrating the efficiency of the new tape
@@ -214,6 +212,7 @@
     * [Stretch goal] Support cpu-gpu transfer of the tape
     * [Stretch goal] Add infrastructure to enable checkpointing offload to the new tape
     * [Stretch goal] Performance benchmarks
+  tags: ["clad", "data-structures", "performance", "memory-management", "gpu", "hpc"]
 
 - name: "Enabling CUDA compilation on Cppyy-Numba generated IR"
   description: |
@@ -254,7 +253,7 @@
     the Numba extension.
     * Design and develop a CUDA compilation and execution mechanism.
     * Prepare proper tests and documentation.
-
+  tags: ["cppyy", "numba", "cuda", "llvm", "ir", "gpu", "python"]
 
 - name: "Cppyy STL/Eigen - Automatic conversion and plugins for Python based ML-backends"
   description: |
@@ -278,7 +277,6 @@
     techniques in ML tools like JAX/CUTLASS. This project allows the C++
     infrastructure to be plugged into at service to the users seeking
     high-performance library primitives that are unavailable in Python.
-    
   tasks: |
     * Extend STL support for std::vectors of arbitrary dimensions
     * Improve the initialization approach for Eigen classes
@@ -288,6 +286,7 @@
     operations in frameworks like JAX
     * Work on integrating these plugins with toolkits like CUTLASS that
     utilise the bindings to provide a Python API
+  tags: ["cppyy", "stl", "eigen", "jax", "cutlass", "numpy", "machine-learning"]
 
 - name: "On Demand Parsing in Clang"
   description: |
@@ -401,7 +400,6 @@
       Alternative and more efficient implementation could be to make the lookup tables
       range based but we do not have even a prototype proving this could be a feasible
       approach.   
-
   tasks: |
     * Design and implementation of on-demand compilation for non-templated functions
     * Support non-templated structs and classes
@@ -413,9 +411,9 @@
     meetings, deliver presentations, and contribute blog posts as requested.
     Additionally, they should demonstrate the ability to navigate the
     community process with patience and understanding.
+  tags: ["clang", "compiler", "parsing", "performance", "memory-optimization", "cling"]
 
 - name: "Broaden the Scope for the Floating-Point Error Estimation Framework in Clad"
-
   description: |
       In mathematics and computer algebra, automatic differentiation (AD) is
       a set of techniques to numerically evaluate the derivative of a function 
@@ -473,7 +471,7 @@
         the capabilities of the framework.
       * Solve any general-purpose issues that come up with Clad during the process.
       * Prepare demos and carry out development needed for lossy compression. 
-
+  tags: ["clad", "floating-point", "numerical-stability", "benchmarking", "error-estimation"]
 
 - name: "Improve robustness of dictionary to module lookups in ROOT"
   description: |
@@ -523,6 +521,7 @@
         implementation works.
       * Develop tutorials and documentation.
       * Present the work at the relevant meetings and conferences.
+  tags: ["root", "cern", "cpp-modules", "cmssw", "dictionary", "io"]
 
 - name: "Enhance the incremental compilation error recovery in clang and clang-repl"
   description: |
@@ -554,6 +553,7 @@
       * Find and fix cases where there are bugs
       * Implement template instantiation error recovery support
       * Implement argument-dependent lookup (ADL) recovery support
+  tags: ["clang", "clang-repl", "incremental-compilation", "error-recovery", "jit"]
 
 ################################################################################
 #                                     2025                                     #

_includes/blog-post-card.html

@@ -1,111 +1,36 @@
-<div class="well">
+<div class="well filter-item" data-tags="{{ post.tags | join: ',' }}">
+
   <div class="post-content">
-    <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
+    <h3><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3>
+
     <p>
       {% if post.author %}
-      {% for author_name in post.author %}
-        {% assign author = site.data.contributors | where: "name", author_name | first %}
-        {% if author %}
-        <a href="{{ author.name | replace: " ", "" | prepend: "/team/" }}">
-          <img
-            src="{% if author.photo %}{{ site.baseurl }}/images/team/{{ author.photo }}{% else %}{{ site.baseurl }}/images/team/defaultDP.png{% endif %}"
-            alt="{{ author.name }}" class="author-image" />
-          {{ author.name }}
-        </a>
-        {% if forloop.last == false %}, {% endif %}
-        {% else %}
-          <img
-            src="{{ post.avatar }}"
-            alt="{{ author.name }}" class="author-image" />
-          {{ author_name | markdownify | remove: '<p>' | remove: '</p>' | strip_newlines}}
-        {% endif %}
-      {% endfor %}
+        {% for author_name in post.author %}
+          {% assign author = site.data.contributors | where: "name", author_name | first %}
+          <span class="author-link">
+            <img src="{% if author.photo %}{{ site.baseurl }}/images/team/{{ author.photo }}{% else %}{{ site.baseurl }}/images/team/defaultDP.png{% endif %}" class="author-image" />
+            {{ author_name }}
+          </span>
+        {% endfor %}
       {% endif %}
-      <span class="text-muted">
-        • {{ post.date | date: "%b %d, %Y" }} • {{ post.content | number_of_words | divided_by: 200 | ceil }} min read
-      </span>
+      <span class="text-muted">• {{ post.date | date: "%b %d, %Y" }}</span>
     </p>
-    <p>{{ post.excerpt | truncatewords: 50 }}</p>
 
-    {% if post.tags and post.tags.size > 0 %}
-    <p>
+    <p>{{ post.excerpt | strip_html | truncatewords: 40 }}</p>
+
+    <div class="post-tags" markdown="0">
       {% for tag in post.tags %}
-      <a href="{{ site.baseurl }}/tags#{{ tag | downcase | slugify }}" class="badge">{{ tag }}</a>
+        <span class="tag-badge" onclick="applyTagFilter('{{ tag }}')">#{{ tag }}</span>
       {% endfor %}
-    </p>
-    {% endif %}
-
+    </div>
   </div>
+
   {% if post.banner_image %}
   <div class="thumbnail-container">
-    <a href="{{ post.url }}">
-       <img src="{{ post.banner_image }}" alt="Post Thumbnail" class="thumbnail-image" />
+    <a href="{{ post.url | prepend: site.baseurl }}">
+       <img src="{{ post.banner_image }}" alt="Thumbnail" class="thumbnail-image" />
     </a>
   </div>
   {% endif %}
-</div>
-
-<style>
-.well {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
 
-.post-content {
-  flex: 1;
-  min-width: 250px;
-  margin-bottom: 1rem;
-}
-
-.author-image {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  object-fit: cover;
-  margin: 0;
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
-.badge {
-  background-color: #999999;
-  padding: 0.5rem;
-}
-
-.thumbnail-container {
-  margin-left: 1rem;
-  flex-shrink: 0;
-  min-width: 100px;
-}
-
-.thumbnail-image {
-  width: 200px;
-  height: 200px;
-  object-fit: cover;
-  border-radius: 5px;
-}
-
-@media (max-width: 700px) {
-  .well {
-    flex-direction: column-reverse;
-    align-items: flex-start;
-  }
-
-  .well > div {
-    margin-left: 0;
-    margin-bottom: 1rem;
-  }
-
-  .well img {
-    margin-bottom: 1rem;
-  }
-
-  .thumbnail-image {
-    width: 100%;
-    height: auto;
-  }
-}
-
-</style>
+</div>

_includes/open-projects.html

@@ -1,14 +1,15 @@
-
 <div class="well">
-<h4><b>Open Projects</b></h4>
-<div style="height: 300px">
-
+  <h4><b>Open Projects</b></h4>
+  <div style="height: 300px">
     {% assign top_articles = site.data.openprojectlist %}
     {% for article in top_articles limit:4 %}
-      <p><a href="{{ site.url }}{{ site.baseurl }}/open_projects#{{ article.name | slugify }}">{{ article.name }}</a><br /></p>
+      <p>
+        <a href="{{ site.baseurl }}/open_projects?tag={{ article.tags[0] }}#{{ article.name | slugify }}">
+          {{ article.name }}
+        </a>
+        <br />
+      </p>
     {% endfor %}
-
-
-</div>
-<h4><a href="{{ site.url }}{{ site.baseurl }}/open_projects">... see details</a></h4>
+  </div>
+  <h4><a href="{{ site.url }}{{ site.baseurl }}/open_projects">... see details</a></h4>
 </div>

_layouts/blog.html

@@ -6,7 +6,11 @@
 <div class="col-sm-12">
   <h2>Latest Posts</h2>
 
-  <div>
-    {% for post in site.posts %} {% include blog-post-card.html %} {% endfor %}
-  </div>
-</div>
+  {% include filter_widget.html items=site.posts label="Topic" %}
+
+  <div class="filterable-list">
+    {% for post in site.posts %}
+      {% include blog-post-card.html %}
+    {% endfor %}
+</div>
+</div>