diff --git a/package.json b/package.json index c0b690bf..9dac0a20 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "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", @@ -46,4 +47,4 @@ "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," } -} +} \ No newline at end of file diff --git a/spin.toml b/spin.toml index 3d6fd3eb..f4f16c81 100644 --- 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" } \ No newline at end of file +environment = { DESTINATION = "/deploying", STATUSCODE = "301" } diff --git a/static/js/main.js b/static/js/main.js index 15e008c1..dc5ff156 100644 --- 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 = ''; const svgCheck = ''; 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 = ` + + `; + } +} +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 index bf3ddfc4..25934af6 100644 --- 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),