initialize gallery

index.html

@@ -57,6 +57,7 @@
           <div id="vignettes">
             <div id="itemSidebar">
                 <h3>Filter by Tags</h3>
+                <p>Select a tag below to see all resources related to it:</p>
                 <ul id="tagList">
                     <!-- Tags will be dynamically added here -->
                 </ul>

scripts/main.js

@@ -28,6 +28,13 @@ const items = [
         link: 'topics.html#Systems',
         description: 'This topic card on the Impact of AI on Social Systems provides descriptions and resources.'
     },
+    {
+        title: '🤗 Policy Writings',
+        tags: ['regulation', 'openness', 'privacy', 'society'],
+        image: 'images/hf-logo.png',
+        link: 'projects.html#Policy',
+        description: 'Policy-relevant writings, including comments on regulation, responses from RFIs, etc.'
+    },
 ];
 
 // Populate the tag list in the sidebar
@@ -44,6 +51,7 @@ uniqueTags.forEach(tag => {
 
 // Function to display items based on selected tag
 function displayItemsByTag(selectedTag) {
+    localStorage.setItem("gallery-tag", selectedTag)
     const itemContainer = document.getElementById('itemGallery');
     itemContainer.innerHTML = '';
     
@@ -73,5 +81,14 @@ function displayItemsByTag(selectedTag) {
     }
 
     const showing = document.getElementById('sidebarShowing');
-    showing.textContent = `Showing projects relevant to: ${selectedTag}`
-}
+    showing.innerHTML = `Showing projects relevant to: <strong>${selectedTag}</strong>`
+}
+
+// Start with society
+if (!localStorage.getItem("gallery-tag")) {
+    displayItemsByTag("society");
+} else {
+    const selectedTag = localStorage.getItem("gallery-tag");
+    displayItemsByTag(selectedTag);
+}
+