Merge pull request #99 from karthik2804/enable_search

vdice · web-flow · commit 1d8984f1e3a4 · 2025-05-08T08:30:12.000-06:00
enable search on docs
diff --git a/package.json b/package.json
@@ -39,11 +39,12 @@
   "scripts": {
     "spin": "nodemon --watch content --watch static --watch templates --watch spin-up-hub --ext html,md,rhai,hbs,css,js --verbose --legacy-watch --signal SIGINT --exec 'npm run build-index && npm run build-hub-index && spin up --file spin.toml --quiet --env PREVIEW_MODE=$PREVIEW_MODE'",
     "bundle-scripts": "parcel watch static/js/src/main.js --dist-dir static/js --no-source-maps",
+    "bundle-scripts-ci": "parcel build static/js/src/main.js --dist-dir static/js --no-source-maps",
     "styles": "parcel watch static/sass/styles.scss --dist-dir static/css",
     "lint-markdown": "npx markdownlint-cli2 content/**/*.md \"#node_modules\"",
     "test": "npm run check-broken-links",
     "build-index": "node md_parser.mjs --dir=content/ --out=./static/data.json --ignore=./content/api/**/*",
     "check-broken-links": ".build/check-broken-links.sh",
     "build-hub-index": "node hub_index_generator.mjs --dir=content/api/hub/ --out=./static/hub-index-data.json --ignore=./content/api/hub/get_list.md,"
   }
-}
+}
diff --git a/spin.toml b/spin.toml
@@ -62,6 +62,8 @@ watch = ["content/**/*", "templates/*"]
 [component.fileserver-static]
 source = "modules/spin_static_fs.wasm"
 files = [{ source = "static/", destination = "/" }]
+[component.fileserver-static.build]
+command = ["npm run bundle-scripts-ci"]
 
 [component.fileserver-downloads]
 source = "modules/spin_static_fs.wasm"
@@ -121,4 +123,4 @@ route = "/kubernetes"
 
 [component.redirect-kubernetes]
 source = "modules/redirect.wasm"
-environment = { DESTINATION = "/deploying", STATUSCODE = "301" }
+environment = { DESTINATION = "/deploying", STATUSCODE = "301" }
diff --git a/static/js/main.js b/static/js/main.js
@@ -601,7 +601,6 @@ var _utils = require("./modules/utils");
 var _multiTab = require("./modules/multiTab");
 var _feedback = require("./modules/feedback");
 const { mount } = redom;
-
 document.querySelectorAll('.modal-button').forEach(function(el) {
     el.addEventListener('click', function() {
         var target = document.querySelector(el.getAttribute('data-target'));
@@ -628,6 +627,7 @@ document.addEventListener("DOMContentLoaded", function() {
     (0, _utils.header).init();
     hljs.highlightAll();
     if (navigator && navigator.clipboard) (0, _utils.addCopyButtons)(navigator.clipboard);
+    (0, _utils.removeExpiredEvents)();
     (0, _utils.addAnchorLinks)();
     (0, _utils.scrollSideMenu)();
     // changelogFilter()
@@ -638,30 +638,30 @@ document.addEventListener("DOMContentLoaded", function() {
         }, 150);
         (0, _utils.header).unpin();
     }
-    // (async function() {
-    //     try {
-    //         await (0, _search.setupSearch)();
-    //         mount(document.getElementById("search-button-container"), (0, _search.searchButton));
-    //         mount(document.getElementById("search-modal-container"), (0, _search.searchModal));
-    //         document.onkeydown = function(e) {
-    //             if (e.key == "Escape") (0, _search.searchModal).close();
-    //             if ((e.key == "k" || e.key == "K") && (e.metaKey || e.ctrlKey)) {
-    //                 e.preventDefault();
-    //                 e.stopPropagation();
-    //                 (0, _search.searchModal).open();
-    //             }
-    //             if (e.key == "s" || e.key == "S") {
-    //                 let searchBar = document.getElementById("hub-search-input");
-    //                 if (searchBar && document.activeElement != searchBar) {
-    //                     e.preventDefault();
-    //                     searchBar.focus();
-    //                 }
-    //             }
-    //         };
-    //     } catch (err) {
-    //         console.error("Could not setup search");
-    //     }
-    // })();
+    (async function() {
+        try {
+            await (0, _search.setupSearch)();
+            mount(document.getElementById("search-button-container"), (0, _search.searchButton));
+            mount(document.getElementById("search-modal-container"), (0, _search.searchModal));
+            document.onkeydown = function(e) {
+                if (e.key == "Escape") (0, _search.searchModal).close();
+                if ((e.key == "k" || e.key == "K") && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    (0, _search.searchModal).open();
+                }
+                if (e.key == "s" || e.key == "S") {
+                    let searchBar = document.getElementById("hub-search-input");
+                    if (searchBar && document.activeElement != searchBar) {
+                        e.preventDefault();
+                        searchBar.focus();
+                    }
+                }
+            };
+        } catch (err) {
+            console.error("Could not setup search");
+        }
+    })();
     // Init feedback on docs pages
     let feedback = document.getElementById("feedback-wrapper");
     if (feedback) (0, _feedback.createFeedbackElement)(feedback);
@@ -912,25 +912,25 @@ class ModalSuggest {
                 project: "Spin",
                 link1: [
                     "Install",
-                    "/spin/install"
+                    "/install"
                 ],
                 link2: [
                     "Quickstart",
-                    "/spin/quickstart/"
+                    "/quickstart"
                 ],
                 link3: [
                     "Develop",
-                    "/spin/developing"
+                    "/writing-apps"
                 ],
                 link4: [
                     "Deploy",
-                    "/spin/deploying-to-fermyon/"
+                    "/deploying"
                 ]
             }
         ];
         this.projectRecommendations = list("div.result-section", ProjectRecommendations);
         this.projectRecommendations.update(this.projectData);
-        this.el = el("div.result-section-container", "Suggested Projects", this.projectRecommendations);
+        this.el = el("div.result-section-container", this.projectRecommendations);
     }
 }
 class SearchModal {
@@ -939,7 +939,7 @@ class SearchModal {
         this.modalSearchBar = el("input.modal-search-bar", {
             type: "text",
             spellcheck: false,
-            placeholder: "Search Fermyon Developer Home",
+            placeholder: "Search Spin Docs",
             oninput: (function(e) {
                 this.updateSearch();
             }).bind(this)
@@ -1069,15 +1069,18 @@ parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "scrollSideMenu", ()=>scrollSideMenu);
 parcelHelpers.export(exports, "addCopyButtons", ()=>addCopyButtons);
 parcelHelpers.export(exports, "addAnchorLinks", ()=>addAnchorLinks);
+parcelHelpers.export(exports, "changelogFilter", ()=>changelogFilter);
+parcelHelpers.export(exports, "removeExpiredEvents", ()=>removeExpiredEvents);
 parcelHelpers.export(exports, "header", ()=>header);
-
-// init headroom for sticky menu on upscroll
+parcelHelpers.export(exports, "blogAd", ()=>blogAd);
 var header = new Headroom(document.querySelector("#topbar"), {
     tolerance: 5,
     offset: 80
 });
-
-// init side menu accordions
+var blogAd = new Headroom(document.querySelector("#blogSlogan"), {
+    tolerance: 5,
+    offset: 300
+});
 function scrollSideMenu() {
     let sidemenu = document.querySelector("aside.menu");
     if (sidemenu) {
@@ -1095,8 +1098,6 @@ function scrollSideMenu() {
         }
     }
 }
-
-// copy to clipboard
 const svgCopy = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>';
 const svgCheck = '<svg aria-hidden="true" height="24" viewBox="0 0 16 16" version="1.1" width="24" data-view-component="true"><path fill-rule="evenodd" fill="#18d1a5" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
 const addCopyButtons = (clipboard)=>{
@@ -1139,8 +1140,6 @@ const addCopyButtons = (clipboard)=>{
         pre.appendChild(button);
     });
 };
-
-// add clickable #anchors to markdown titles
 const addAnchorLinks = ()=>{
     const elementsToProcess = document.querySelectorAll(".content h1, .content h2, .content h3, .content h4, .content tr");
     elementsToProcess.forEach((element)=>{
@@ -1173,9 +1172,77 @@ const addAnchorLinks = ()=>{
         });
     });
 };
+function removeExpiredEvents() {
+    let events = document.querySelectorAll(".community-highlight .carousel-cell");
+    let eventsNumber = events.length;
+    if (eventsNumber) events.forEach((k)=>{
+        if (k.dataset.expirydate) {
+            let eventExpiryDate = new Date(k.dataset.expirydate);
+            if (eventExpiryDate < Date.now()) {
+                k.remove();
+                eventsNumber--;
+            }
+        }
+    });
+    else return;
+    if (eventsNumber) {
+        var elem = document.querySelector('.main-carousel');
+        var flkty = new Flickity(elem, {
+            // options
+            cellAlign: 'left',
+            contain: true
+        });
+        // element argument can be a selector string
+        //   for an individual element
+        var flkty = new Flickity('.main-carousel', {
+        });
+    } else {
+        let eventsCarousel = document.querySelector(".community-highlight");
+        eventsCarousel.innerHTML = `
+        <article class="community-highlight carousel-cell">
+        <a href="#">
+            <event>
+                <date>
+                </date>
+                <eventtitle>No upcoming Events
+                </eventtitle>
+                <p></p>
+                <img class="event-logo" />
+            </event>
+        </a>
+        </article>
+        `;
+    }
+}
+function changelogFilter() {
+    let changelogItems = Array.from(document.querySelectorAll(".changelog-item-title"));
+    if (changelogItems.length) {
+        let changelogTags = new Set([
+            "all_features"
+        ]);
+        changelogItems.map((k)=>{
+            JSON.parse(k.dataset.tags).forEach((item)=>changelogTags.add(item));
+        });
+        changelogTags = Array.from(changelogTags);
+        let changelogSelect = document.getElementById("changelog-select");
+        changelogTags.map((k)=>{
+            let opt = document.createElement('option');
+            opt.value = k;
+            opt.innerHTML = k;
+            changelogSelect.appendChild(opt);
+        });
+        changelogSelect.addEventListener("change", ()=>{
+            let selected = changelogSelect.value;
+            changelogItems.map((k)=>{
+                if (selected != "all_features" && !k.dataset.tags.includes(selected)) {
+                    console.log(k.parentElement);
+                    k.parentElement.style.display = "none";
+                } else k.parentElement.style.display = "flex";
+            });
+        });
+    }
+}
 
-
-// tabs for multiple languages
 },{"@parcel/transformer-js/src/esmodule-helpers.js":"j7FRh"}],"1bdXi":[function(require,module,exports,__globalThis) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
@@ -1318,8 +1385,6 @@ function filterMultitabQuery() {
     return multitabQuery;
 }
 
-
-// user feedback thumbsup/down vote
 },{"@parcel/transformer-js/src/esmodule-helpers.js":"j7FRh"}],"c5ZDr":[function(require,module,exports,__globalThis) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
diff --git a/static/js/src/modules/search.js b/static/js/src/modules/search.js
@@ -272,10 +272,10 @@ class ModalSuggest {
     this.projectData = [
       {
         project: "Spin",
-        link1: ["Install", "/spin/install"],
-        link2: ["Quickstart", "/spin/quickstart/"],
-        link3: ["Develop", "/spin/developing"],
-        link4: ["Deploy", "/spin/deploying-to-fermyon/"],
+        link1: ["Install", "/install"],
+        link2: ["Quickstart", "/quickstart"],
+        link3: ["Develop", "/writing-apps"],
+        link4: ["Deploy", "/deploying"],
       }
     ];
     this.projectRecommendations = list(
@@ -285,7 +285,6 @@ class ModalSuggest {
     this.projectRecommendations.update(this.projectData);
     this.el = el(
       "div.result-section-container",
-      "Suggested Projects",
       this.projectRecommendations,
     );
   }
@@ -297,7 +296,7 @@ class SearchModal {
     this.modalSearchBar = el("input.modal-search-bar", {
       type: "text",
       spellcheck: false,
-      placeholder: "Search Fermyon Developer Home",
+      placeholder: "Search Spin Docs",
       oninput: function (e) {
         this.updateSearch();
       }.bind(this),
