diff --git a/content/blogs-and-videos/_index.md b/content/blogs-and-videos/_index.md index 4a07c3954ac6c0f18f0ce555898d78216beb558b..bc2af7aba54ea5af095d0a04dc5eaa6f03cb9138 100644 --- a/content/blogs-and-videos/_index.md +++ b/content/blogs-and-videos/_index.md @@ -2,7 +2,7 @@ title: Blogs and Videos hide_page_title: true hide_sidebar: true -container: container-fluid +container: container-fluid blogs-and-videos page_css_file: /public/css/blogs-and-videos.css --- diff --git a/content/home/_index.md b/content/home/_index.md index db1b91fc27a72dddebd131c8aef6e8fa079da7f1..0abe220a5c0dff083b8d02d8a5e268f786c7a0e8 100644 --- a/content/home/_index.md +++ b/content/home/_index.md @@ -1,8 +1,8 @@ --- title: eclipse.org headline: > - The Community for <span class="white">Open Innovation</span> - <br class="visible-md visible-lg"> and Collaboration + The Community for <span class="white">Open Collaboration</span> + <br class="visible-md visible-lg"> and Innovation tagline: The Eclipse Foundation provides our global community of individuals and organizations with a mature, scalable, and business-friendly environment for open source software collaboration and innovation. diff --git a/js/main.js b/js/main.js index ad385b2e1e610add00e417bfabf70c8a60bb78c9..b2d6cf8de38ab5379018fae139dad8cf7ce5e558 100644 --- a/js/main.js +++ b/js/main.js @@ -13,10 +13,12 @@ */ import 'eclipsefdn-solstice-assets/js/astro'; -import './src/eclipsefdn-promo-content' + +import './src/blogs-and-videos'; import eclipsefdnFeaturedProjectCommitter from './src/featured-projects-committer'; +import './src/collaborations/eclipsefdn.rollover-link'; import './src/collaborations/eclipsefdn.weighted-working-groups'; +import './src/eclipsefdn-promo-content' import './src/research/projects-section'; -import './src/collaborations/eclipsefdn.rollover-link'; eclipsefdnFeaturedProjectCommitter.render(); diff --git a/js/src/blogs-and-videos/index.js b/js/src/blogs-and-videos/index.js new file mode 100644 index 0000000000000000000000000000000000000000..87b411460a60fe55164a71394bb8bcd26dbf585c --- /dev/null +++ b/js/src/blogs-and-videos/index.js @@ -0,0 +1,73 @@ +/** + * Format the blog posts in the blog list. + * + * @param {Element} blogListElement - The blog list element. + */ +const formatPosts = (blogListElement) => { + const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + const months = [ + 'January', 'February', 'March', 'April', 'May', 'June', 'July', + 'August', 'September', 'October', 'November', 'December' + ]; + + const postElements = blogListElement.querySelectorAll('.post'); + postElements.forEach((postElement) => { + const titleElement = postElement.querySelector('.post-head-title'); + const subtitleElement = postElement.querySelector('.post-head-subtitle'); + + let title = titleElement.innerText; + let subtitle = subtitleElement.innerText; + + const originalDate = new Date(subtitle); + + // Remove author from title + let author = title.substring(0, title.indexOf(': ')); + title = title.substring(title.indexOf(': ') + 1).trim(); + + // Date format conversion + const dayOfWeek = daysOfWeek[originalDate.getDay()]; + const month = months[originalDate.getMonth()]; + const day = originalDate.getDate(); + const year = originalDate.getFullYear(); + const formattedDate = `${dayOfWeek}, ${month} ${day}, ${year}`; + + // Update subtitle with formatted date and author + subtitle = `${formattedDate} \u2014 by ${author}`; + + // Update the text nodes + titleElement.innerText = title; + subtitleElement.innerText = subtitle; + }); +} + +/** + * Format the blog posts once the blog list has been populated. + */ +const formatPostsOnLoad = () => { + // Constrain the scope of this script to the .blogs-and-videos container class. + const blogListElement = document.querySelector('.blogs-and-videos .solstice-rss-blog-list'); + if (!blogListElement) { + return; + } + + // Observe the blog list for changes. If children are added, we can assume + // the blog list has been populated or the loading spinner appeared. + const observeBlogList = (mutationList, observer) => { + mutationList.forEach((mutation) => { + if (mutation.type === 'childList') { + // If the blog list is still loading, do nothing. + if (blogListElement.querySelector('.solstice-loading')) { + return; + } + // Stop observing the blog list once it's populated. Format the posts. + observer.disconnect(); + formatPosts(blogListElement); + } + }); + }; + + const observer = new MutationObserver(observeBlogList); + observer.observe(blogListElement, { childList: true }); +} + +formatPostsOnLoad(); diff --git a/layouts/shortcodes/pages/blogs-and-videos.html b/layouts/shortcodes/pages/blogs-and-videos.html index 5e45fe8510a21eef7374b8a036110ccd380ba32c..742647d0565964773e79b6946de4827976020c10 100644 --- a/layouts/shortcodes/pages/blogs-and-videos.html +++ b/layouts/shortcodes/pages/blogs-and-videos.html @@ -18,7 +18,7 @@ <h1 class="text-center">Blogs and Videos</h1> </div> -<section class="row bg-neutral padding-top-60 padding-bottom-40"> +<section class="row bg-neutral-flat padding-top-60 padding-bottom-40"> <div class="container"> <h2 class="margin-bottom-40 text-center" id="eclipse-foundation-team">From Eclipse Foundation Team</h2> <div class="rss-blog-list">