diff --git a/codeweek.html b/codeweek.html index 976eb37..d8165a0 100644 --- a/codeweek.html +++ b/codeweek.html @@ -113,10 +113,10 @@

Building and Supporting ML GeoScience Communities

- +

- There is a hackweek event happening Oct 23-27th! + There is happening in ! Click to learn more.

@@ -140,6 +140,7 @@

Building and Supporting ML GeoScience Communities

+ \ No newline at end of file diff --git a/js/blog.js b/js/blog.js index a06be6e..9a155f3 100644 --- a/js/blog.js +++ b/js/blog.js @@ -1,6 +1,5 @@ -import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js" -import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js" import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js"; +import { db } from "./firebase.js"; "use strict"; (function () { @@ -14,17 +13,6 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f // Otherwise, the autoscroll feature will break. // PRE INIT SETUP - const firebaseConfig = { - apiKey: "AIzaSyDtv_mjLaZQImF4KoKy6s-moer6TtOVJiI", - authDomain: "geosmart-uw.firebaseapp.com", - projectId: "geosmart-uw", - storageBucket: "geosmart-uw.appspot.com", - messagingSenderId: "244030791746", - appId: "1:244030791746:web:f6c34ef4b145ab7d1a8ddb", - measurementId: "G-9L9TCCS7HD" - }; - const app = initializeApp(firebaseConfig); - const cachedPosts = localStorage.getItem("cachedPosts"); if (cachedPosts) { blogPosts = JSON.parse(cachedPosts); @@ -35,8 +23,10 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f if (cachedTime && timeDifferenceInHours(new Date(cachedTime)) > 1) localStorage.clear(); } else loadPosts(); - // This function handles everything that needs to occur after the window - // has fully loaded, meaning in this case event listeners. + /** + * This function handles everything that needs to occur after the window + * has fully loaded, meaning in this case event listeners. + */ function init() { addAccessibleClickListener(document.getElementById("blog-post-return"), showBlogList); @@ -66,11 +56,12 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f addEventListener("posts-loaded", onPostsLoaded); } - // Querys the firebase backend for all documents in the posts collection, - // stores them to local storage and broadcasts a "posts-loaded" event. + /** + * Querys the firebase backend for all documents in the posts collection, + * stores them to local storage and broadcasts a "posts-loaded" event. + */ async function loadPosts() { console.log("Loading posts from server..."); - const db = getFirestore(app); const querySnapshot = await getDocs(collection(db, "posts")); const posts = []; @@ -86,8 +77,10 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f console.log(`Loaded ${blogPosts.length} posts from server.`); } - // Helper function for hiding the loader, populating the blog list and - // loading from hash given the global blogPosts variable contains data. + /** + * Helper function for hiding the loader, populating the blog list and + * loading from hash given the global blogPosts variable contains data. + */ function onPostsLoaded() { console.log("Populating with loaded posts..."); const loader = document.getElementById("blog-loader"); @@ -100,8 +93,8 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f /** * Takes a list of post objects, of the form described below, and * creates from the template in the html a node for each of them. - * Interface "post" format: - * { + * + * interface post { * title: string * body: string * link: string @@ -169,8 +162,13 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f document.getElementById("blog-post").classList.toggle("hidden"); } - // In firefox there is a bug and scrolling immediately after modifying - // the dom (in a way that affects document height) won't work. + /** + * In firefox there is a bug and scrolling immediately after modifying + * the dom (in a way that affects document height) won't work. + * + * @param {number} scrollY + * @param {"smooth" | "instant"} scrollBehavior + */ function scrollToWithDelay(scrollY, scrollBehavior) { scrollBehavior = scrollBehavior || "instant"; setTimeout(() => { @@ -178,8 +176,11 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f }, 1); } - // Creates an intersection observer which triggers animations for - // some elements when they scroll onto the page by modifying their class. + /** + * Creates an intersection observer which triggers animations for + * some elements when they scroll onto the page by modifying their class. + * @param {Element[]} animated_items + */ function addAnimationObserver(animated_items) { const options = { root: null, @@ -198,8 +199,12 @@ import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/f animated_items.forEach((element) => observer.observe(element)); } - // Adds the given function as both a click event listener - // and a keydown event listener for accessiblity reasons. + /** + * Adds the given function as both a click event listener + * and a keydown event listener for accessiblity reasons. + * @param {Element} elem + * @param {(event) => void} func + */ function addAccessibleClickListener(elem, func) { elem.addEventListener("click", func); elem.addEventListener("keydown", function (event) { diff --git a/js/events.js b/js/events.js new file mode 100644 index 0000000..a9af371 --- /dev/null +++ b/js/events.js @@ -0,0 +1,49 @@ +import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js"; +import { db } from "./firebase.js"; + +"use strict"; +(function () { + + window.addEventListener("load", init); + + /** + * Initialization function that should handle anything that needs to occur + * on page load (include changing from one page to another). + */ + function init() { + setUpToastContent(); + setUpToastOnClick(); + } + + function setUpToastOnClick() { + const toast = document.getElementById("toast"); + if (!toast) return; + + toast.addEventListener("click", (evt) => { + evt.preventDefault(); + toast.classList.add("hide"); + setTimeout(() => { + const link = toast.getAttribute("href"); + window.open(link, "_blank"); + }, 500); // match to toast hide animation + }); + } + + async function getEventContent() { + console.log("Loading event from server..."); + const querySnapshot = await getDocs(collection(db, "posts")); + + const posts = []; + querySnapshot.forEach((doc) => { + posts.push(doc.data()); // doc.data() is never undefined for query doc snapshots + }); + posts.reverse(); + blogPosts = posts; + + localStorage.setItem("cachedPosts", JSON.stringify(posts)); + localStorage.setItem("cachedTime", new Date().toISOString()); + window.dispatchEvent(new Event("posts-loaded")); + console.log(`Loaded ${blogPosts.length} posts from server.`); + } + +})(); \ No newline at end of file diff --git a/js/firebase.js b/js/firebase.js new file mode 100644 index 0000000..46d8ebf --- /dev/null +++ b/js/firebase.js @@ -0,0 +1,15 @@ +import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js" +import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js" + +export const firebaseConfig = { + apiKey: "AIzaSyDtv_mjLaZQImF4KoKy6s-moer6TtOVJiI", + authDomain: "geosmart-uw.firebaseapp.com", + projectId: "geosmart-uw", + storageBucket: "geosmart-uw.appspot.com", + messagingSenderId: "244030791746", + appId: "1:244030791746:web:f6c34ef4b145ab7d1a8ddb", + measurementId: "G-9L9TCCS7HD" +} + +export const app = initializeApp(firebaseConfig); +export const db = getFirestore(app); \ No newline at end of file diff --git a/js/index.js b/js/index.js index 79c5cb6..7fd27aa 100644 --- a/js/index.js +++ b/js/index.js @@ -11,7 +11,6 @@ setNavbarHighlight(document.URL); constructPageNavigation(); addAnimationObserver(); - setUpToast(); const menu_btn = document.getElementById("menu-button"); const menu = document.getElementById("w-nav-overlay-0"); @@ -232,18 +231,4 @@ animated_items.forEach((element) => mobileObserver.observe(element)); } - function setUpToast() { - const toast = document.getElementById("toast"); - if (!toast) return; - - toast.addEventListener("click", (evt) => { - evt.preventDefault(); - toast.classList.add("hide"); - setTimeout(() => { - const link = toast.getAttribute("href"); - window.open(link, "_blank"); - }, 500); // match to toast hide animation - }); - } - })(); \ No newline at end of file