Edit filters to be more readable and easier to define

content/_events/2024-09-05-Introduction-to-Quantum-Computing-2Ed.md

@@ -10,27 +10,10 @@ tags:
   - LUMI
 type: Event
 filters:
-  Availability:
-    - name: "Open to anyone"
-      value: false
-    - name: "Registration needed"
-      value: true
-  Skill level:
-    - name: "Advanced"
-      value: false
-    - name: "Beginner"
-      value: true
-  Pricing:
-    - name: "Free of charge"
-      value: false
-  Type:
-    - name: "Online"
-      value: false
-    - name: "Hybrid"
-      value: false
-    - name: "Onsite"
-      value: true
-  Theme: "course/workshop"
+  Pricing: Free of charge # Free of charge, or empty if paid
+  Skill level: Beginner # Beginner, Advanced
+  Type: Online # Online, Hybrid, Onsite
+  Theme: Course/Workshop # Course/Workshop, Hybrid QC+HPC computing, Programming, Webinar/Lecture
 ---
 25-26 November: Two-day introductory course on quantum computers and the basic quantum algorithms that control them.
 

content/_publications/2024-08-29-Topology.md

@@ -12,19 +12,9 @@ tags:
   - Quantum
 type: 'Blog'
 filters:
-  Skill level:
-    - name: "Advanced"
-      value: false
-    - name: "Beginner"
-      value: true
-  Type:
-    - name: "Blog"
-      value: false
-    - name: "Instructions"
-      value: true
-    - name: "News"
-      value: false
-  Theme: "Technical"
+  Skill level: Beginner # Beginner, Advanced
+  Type: Blog # Blog, Instructions, News
+  Theme: Technical # Technical, Algorithm, Programming, Hybrid QC+HPC computing
 ---
 
 *As quantum computing continues to advance, the architecture of quantum processing units (QPUs) is becoming increasingly critical to the performance of quantum circuits, the backbone of all quantum algorithms. A key factor influencing the design of these circuits is qubit connectivity—how qubits are arranged and interact within a QPU. Different quantum platforms exhibit unique connectivity patterns that directly impact how quantum circuits are implemented and optimized.*

content/site.js.liquid

@@ -13,15 +13,7 @@ permalink: site.js
     "teaser": "{{ publication.header.teaser | absolute_url }}",
     "filters": {
       {%- for category in publication.filters %}
-        {%- if category[0] == "Theme" -%}
-          "Theme": "{{ category[1] }}"
-        {%- else -%}
-          "{{ category[0] }}": {
-            {%- for option in category[1] %}
-              "{{ option.name }}": {{ option.value | jsonify }}{%- unless forloop.last -%},{%- endunless -%}
-            {%- endfor %}
-          }
-        {%- endif -%}
+        "{{ category[0] }}": "{{ category[1] }}"
         {%- unless forloop.last -%},{%- endunless -%}
       {%- endfor %}
     } 
@@ -42,15 +34,7 @@ permalink: site.js
     "content": {{ event_post.content | strip_html | strip_newlines | jsonify }},
     "filters": {
       {%- for category in event_post.filters %}
-        {%- if category[0] == "Theme" -%}
-          "Theme": "{{ category[1] }}"
-        {%- else -%}
-          "{{ category[0] }}": {
-            {%- for option in category[1] %}
-              "{{ option.name }}": {{ option.value | jsonify }}{%- unless forloop.last -%},{%- endunless -%}
-            {%- endfor %}
-          }
-        {%- endif -%}
+        "{{ category[0] }}": "{{ category[1] }}"
         {%- unless forloop.last -%},{%- endunless -%}
       {%- endfor %}
     }

src/components/Blogs.jsx

@@ -79,8 +79,7 @@ const FilterModal = ({ isModalOpen, setIsModalOpen, filters, handleFilterChange
     return (
         <CModal
             key={isModalOpen ? 'open' : 'closed'}
-            style={{ overflow: 'scroll' }}
-            className='overflow-scroll'
+            className=''
             value={isModalOpen}
             dismissable
             onChangeValue={event => setIsModalOpen(event.detail)}
@@ -165,24 +164,27 @@ export const Blogs = () => {
         };
     }, [isModalOpen]);
 
-    useEffect(() => { //set filteredBlogs everytime filters changes
+    useEffect(() => {
         const applyFilters = (blog) => {
-            if (filters.Theme && blog?.filters?.Theme !== filters.Theme) {
+            const themeOptions = blog.filters?.Theme?.split(',').map(opt => opt.trim().toLowerCase()) || [];
+            if (filters.Theme && !themeOptions.includes(filters.Theme?.toLowerCase())) {
                 return false;
             }
-            // For every other filter category...
+
             return Object.entries(filters).every(([category, options]) => {
-                // Skip the "Theme" category here
                 if (category === "Theme") return true;
 
                 // Create an array of only the options that are checked (active)
-                const activeOptions = Object.entries(options).filter(([_, checked]) => checked);
+                const activeOptions = Object.entries(options)
+                    .filter(([_, checked]) => checked)
+                    .map(([option, _]) => option);
 
-                // If no options are active in this category, do not filter out the event:
+                // If no options are active in this category, do not filter out the blog:
                 if (activeOptions.length === 0) return true;
 
-                // Otherwise, require that at least one active option is true in the event:
-                return activeOptions.some(([option]) => blog?.filters?.[category]?.[option]);
+                // Otherwise, check if the category value of the blog is in the active options array:
+                const blogOptions = blog.filters?.[category]?.split(',').map(opt => opt.trim()) || [];
+                return activeOptions.some(opt => blogOptions.includes(opt));
             });
         };
 

src/components/Events.jsx

@@ -93,8 +93,6 @@ const FilterModal = ({ isModalOpen, setIsModalOpen, filters, handleFilterChange
     return (
         <CModal
             key={isModalOpen ? 'open' : 'closed'}
-            style={{ 'overflow': 'scroll' }}
-            className='overflow-scroll'
             value={isModalOpen}
             dismissable
             onChangeValue={event => setIsModalOpen(event.detail)}
@@ -158,7 +156,6 @@ export const Events = () => {
     const events_dict = SplitEvents(); //get events
     const [isModalOpen, setIsModalOpen] = useState(false); //modal control
     const [filters, setFilters] = useState({
-        "Availability": { "Open to anyone": false, "Registration needed": false },
         "Skill level": { "Advanced": false, "Beginner": false },
         "Pricing": { "Free of charge": false },
         "Type": { "Online": false, "Hybrid": false, "Onsite": false },
@@ -192,26 +189,28 @@ export const Events = () => {
         };
     }, [isModalOpen]);
 
-    useEffect(() => { //set filteredEvents everytime filters changes
+    useEffect(() => {
         const applyFilters = (event) => {
-            // First, check the Theme filter separately:
-            if (filters.Theme && event?.filters?.Theme !== filters.Theme) {
+
+            const themeOptions = event.filters?.Theme?.split(',').map(opt => opt.trim().toLowerCase()) || [];
+            if (filters.Theme && !themeOptions.includes(filters.Theme?.toLowerCase())) {
                 return false;
             }
 
-            // For every other filter category...
             return Object.entries(filters).every(([category, options]) => {
-                // Skip the "Theme" category here
                 if (category === "Theme") return true;
 
                 // Create an array of only the options that are checked (active)
-                const activeOptions = Object.entries(options).filter(([_, checked]) => checked);
+                const activeOptions = Object.entries(options)
+                    .filter(([_, checked]) => checked)
+                    .map(([option, _]) => option);
 
                 // If no options are active in this category, do not filter out the event:
                 if (activeOptions.length === 0) return true;
 
-                // Otherwise, require that at least one active option is true in the event:
-                return activeOptions.some(([option]) => event?.filters?.[category]?.[option]);
+                // Otherwise, check if the category value of the event is in the active options array:
+                const eventOptions = event.filters?.[category]?.split(',').map(opt => opt.trim()) || [];
+                return activeOptions.some(opt => eventOptions.includes(opt));
             });
         };