Fix/job template refinements

.eleventy.js

@@ -155,8 +155,38 @@ module.exports = function (config) {
     });
   }
 
-  config.addLiquidShortcode("getStateFromDates", getStateFromDates);
+  // Get Date and Time as Seconds
+  // Datetime format: YYYY-MM-DD HH:
+  config.addLiquidShortcode("getDateTimeinSeconds", getDateTimeinSeconds);
+  function getDateTimeinSeconds(datetime) {
+    // Split the datetime string into date and time parts
+    const dateParts = datetime.split(" ");
+    const date = dateParts[0];
+    const time = dateParts[1];
+
+    // Extract hours, minutes, and AM/PM
+    let hours = parseInt(time.slice(0, time.length - 2).split(":")[0], 10); // Adjusted to capture full hour
+    const minutes = time.length === 6 ? time.slice(2, 4) : time.slice(3, 5);
+    const amPm = time.slice(-2).toLowerCase(); // Handle AM/PM case
+
+    // Convert hours to 24-hour format
+    if (amPm === "pm" && hours !== 12) {
+      hours += 12;
+    } else if (amPm === "am" && hours === 12) {
+      hours = 0;
+    }
+
+    // Format the datetime string for timestamp conversion
+    const formattedDatetime = `${date} ${String(hours).padStart(2, "0")}:${minutes} EST`;
+
+    // Convert to timestamp (in seconds)
+    const timestamp = Math.floor(new Date(formattedDatetime).getTime() / 1000);
 
+    return timestamp;
+  }
+
+  // Get State From Dates
+  config.addLiquidShortcode("getStateFromDates", getStateFromDates);
   function getStateFromDates(opens, closes) {
     if (!opens && !closes) {
       return "unknown";
@@ -187,14 +217,16 @@ module.exports = function (config) {
   config.addFilter("sortByProp", sortByProp);
 
   config.addFilter("readableDate", (dateObj) => {
-    return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(
+    return DateTime.fromJSDate(dateObj, { zone: "America/New_York" }).toFormat(
       "dd LLL yyyy",
     );
   });
 
   // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
   config.addFilter("htmlDateString", (dateObj) => {
-    return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-LL-dd");
+    return DateTime.fromJSDate(dateObj, { zone: "America/New_York" }).toFormat(
+      "yyyy-LL-dd",
+    );
   });
 
   // Get the first `n` elements of a collection.

_data/assetPaths.json

@@ -3,7 +3,6 @@
   "admin.map": "/assets/js/admin-77FHK54G.js.map",
   "app.js": "/assets/js/app-U5OIPSUD.js",
   "app.map": "/assets/js/app-U5OIPSUD.js.map",
-  "uswds.js": "/assets/js/uswds-init.js",
   "styles.css": "/assets/styles/styles-6UNDCLW2.css",
   "styles.map": "/assets/styles/styles-6UNDCLW2.css.map"
 }

_includes/footer.html

@@ -10,9 +10,6 @@
             mobile-lg:grid-col-6 mobile-lg:grid-gap-2
           "
         >
-          <div class="mobile-lg:grid-col-auto">
-            <img class="usa-footer__logo-img" src="/assets/img/logo-img.png" alt="" />
-          </div>
           <div class="mobile-lg:grid-col-auto">
             <p class="usa-footer__logo-heading">Technology Transformation Services</p>
             <p style="font-size: .875rem;"><strong>Built with:</strong> <a href="https://designsystem.digital.gov/whats-new/updates/2022/04/28/introducing-uswds-3-0/">USWDS 3</a> | <a href="https://cloud.gov/pages/">Cloud.gov Pages</a> | <a href="https://digital.gov/guides/dap/">Digital Analytics Program</a></p>

_includes/layouts/jointts/home.html

@@ -27,133 +27,20 @@ <h1>{{ title }}</h1>
     </div>
     <div class="grid-row grid-gap">
       <div class="desktop:grid-col-8 usa-prose">
+        <!-- Open Jobs -->
         <h2 id="open-positions">Open positions</h2>
         <p>We are hiring and will be sharing upcoming jobs and open positions as they are available.</p>
+        {% include "layouts/jointts/open-jobs.html" %}                    
 
-        <ul>
-          {% assign open_job_count = 0 %}
-          {% for pg in collections.jobs %}
-          {% capture state %}{% getStateFromDates pg.data.opens pg.data.closes %}{% endcapture %}
-            {% if state == "open" %}
-              {% unless pg.data.path contains 'template' %}
-                {% unless pg.data.path contains 'performance-profiles' %}
-                  {% assign open_job_count = open_job_count | plus: 1 %}
-                  <li>
-                    {% if pg.data.external_url %}
-                    <a href="{{ pg.data.external_url }}" target="_blank">{{ pg.data.title }}</a>
-                      {% else %}
-                      <a href="{{ pg.url | url }}">{{ pg.data.title }}</a>
-                    {% endif %}
-                   (Open now {% if pg.data.weeks_open %}for {% if pg.data.weeks < 52 %}{{ pg.data.weeks }}{% else %} one year or until all selections have been made{% endif %},{% endif %} through {{ pg.data.closes | date: '%A, %B %e, %Y at 11:59pm' }} ET)
-                   <!-- Info Sessions -->
-                   {% assign now = 'now' | date: "%s" %}
-                   {% assign future_sessions = false %}
-
-                   {% for session in pg.data.info_sessions %}
-                     {% assign session_date = session.date | date: "%s" %}
-                     {% if session_date > now %}
-                       {% assign future_sessions = true %}
-                       {% break %}
-                     {% endif %}
-                   {% endfor %}
-                   {% if future_sessions %}
-                     <aside class="usa-alert usa-alert-info">
-                       <div class="usa-alert-body">
-                         <p>Upcoming info sessions for {{ pg.data.title }}</p>
-                         <ul>
-                           {% for session in pg.data.info_sessions %}
-                             {% assign session_date = session.date | date: "%s" %}
-                             {% if session_date > now %}
-                               <li>
-                                 <p><a href="{{ session.link }}" target="_blank">{{ session.headline }}</a> at {{ session.time }}</p>
-                               </li>
-                             {% endif %}
-                           {% endfor %}
-                         </ul>
-                       </div>
-                     </aside>
-                   {% endif %}
-                  </li>
-                {% endunless %}
-              {% endunless %}
-            {% endif %}
-          {% endfor %}
-        </ul>
-
-        {% if open_job_count == 0 %}
-          <p>No open positions at this time. Sign up for <a href="/join/newsletter/">job alerts!</a></p>
-        {% endif %} 
-
+        <!-- Upcoming Jobs -->
         <h2>Upcoming positions</h2>
-        <ul>
-          {% assign upcoming_job_count = 0 %}
-
-          {% for pg in collections.jobs %}
-            {% capture state %}{% getStateFromDates pg.data.opens pg.data.closes %}{% endcapture %}
-
-            {% assign show_job = false %}
-
-            {% if pg.data.title != "" %}
-              {% if state == "upcoming" %}
-                {% assign show_job = true %}
-              {% elsif state == "unknown" %}
-                {% assign show_job = true %}
-              {% endif %}
-            {% endif %}
-
-            {% if show_job %}
-              {% assign upcoming_job_count = upcoming_job_count | plus: 1 %}
-              {% unless pg.data.path contains 'template' %}
-                {% unless pg.data.path contains 'performance-profiles' %}
-                  <li>
-                    {% if pg.data.external_url %}
-                      <a href="{{ pg.data.external_url }}">{{ pg.data.title }}</a>
-                    {% else %}
-                      <a href="{{ pg.url | url }}">{{ pg.data.title }}</a>
-                    {% endif %}
-
-                    <!-- Info Sessions -->
-                    {% assign now = 'now' | date: "%s" %}
-                    {% assign future_sessions = false %}
-
-                    {% for session in pg.data.info_sessions %}
-                      {% assign session_date = session.date | date: "%s" %}
-                      {% if session_date > now %}
-                        {% assign future_sessions = true %}
-                        {% break %}
-                      {% endif %}
-                    {% endfor %}
-                    {% if future_sessions %}
-                      <aside class="usa-alert usa-alert-info">
-                        <div class="usa-alert-body">
-                          <p>Upcoming info sessions for {{ pg.data.title }}</p>
-                          <ul>
-                            {% for session in pg.data.info_sessions %}
-                              {% assign session_date = session.date | date: "%s" %}
-                              {% if session_date > now %}
-                                <li>
-                                  <p><a href="{{ session.link }}" target="_blank">{{ session.headline }}</a> at {{ session.time }}</p>
-                                </li>
-                              {% endif %}
-                            {% endfor %}
-                          </ul>
-                        </div>
-                      </aside>
-                    {% endif %}
-                  </li>
-                {% endunless %}
-              {% endunless %}
-            {% endif %}
-          {% endfor %}
-        </ul>
-
-        {% if upcoming_job_count == 0 %}
-          <p>No upcoming positions at this time. Sign up for <a href="/join/newsletter/">job alerts!</a></p>
-        {% endif %}                      
+        {% include "layouts/jointts/upcoming-jobs.html" %}
 
+        <!-- Other Opportunities -->
         <h2>Other GSA Opportunities</h2>
         <p>Check out <a href="https://www.gsa.gov/about-us/find-apply-for-and-land-a-job-at-gsa">careers at GSA</a> and more <a href="https://www.usajobs.gov/Search/Results?j=2210&d=GS&p=1">Information Technology opportunities.</a></p>
 
+        <!-- Application Process -->
         <h2>Application process</h2>
         <p>
           We have an amazing recruitment team who will usher you from application to interview to onboarding with TTS.
@@ -164,29 +51,11 @@ <h2>Application process</h2>
           our Talent Team at <a href="mailto:joinTTS@gsa.gov">joinTTS@gsa.gov</a>.
         </p>
       </div>
-      <div class="desktop:grid-col-4 margin-top-4 desktop:margin-top-0">
-        <div class="usa-summary-box">
-          <div class="usa-summary-box__body">
-            <h3 class="usa-summary-box__heading">Find out more</h3>
-            <div class="usa-summary-box__text">
-              <p>Join us at one of our monthly online information sessions. Come learn more about working at TTS, available positions, and our application process. Register for a session below.</p>
-              <ul>
-                {% for session in sorted_info_sessions %}
-                  {% assign session_date = session.date | date: "%s" %}
-                  {% assign now = 'now' | date: "%s" %}
-                  {% if session_date > now %}
-                    <li class="info-session">
-                      <a target="_blank" href="{{ session.link }}" rel="noopener">{{ session.date | date: "%A, %B %d, %Y" }}</a>
-                      <p>{{ session.time-et }}</p>
-                      <p>({{ session.time-pt }})</p>
-                    </li>
-                  {% endif %}
-                {% endfor %}
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
+
+      <!-- General Info Sessions -->
+      {% if sorted_info_sessions.size > 0 %}
+        {% include "layouts/jointts/info-sessions-sidebar.html" %}
+      {% endif %}
     </div>
   </div>
 </section>

_includes/layouts/jointts/info-sessions-sidebar.html

@@ -0,0 +1,37 @@
+<div class="desktop:grid-col-4 margin-top-4 desktop:margin-top-0">
+    <div class="usa-summary-box">
+      <div class="usa-summary-box__body">
+        <h3 class="usa-summary-box__heading">Find out more</h3>
+        <div class="usa-summary-box__text">
+          <p>Join us at one of our monthly online information sessions. Come learn more about working at TTS, available positions, and our application process. Register for a session below.</p>
+          <ul class="info-sessions-list">
+            {% for session in sorted_info_sessions %}
+              <!-- Format the date for comparison -->
+              {% assign session_date = session.date | date: "%Y-%m-%d" %}
+
+              <!-- Extract ET time range from session.time (e.g., "1:00-2:00pm ET") -->
+              {% assign time_et = session.time-et | split: " ET" %}
+
+              <!-- Extract start time and end time (e.g., "1:00pm" and "2:00pm") -->
+              {% assign session_end_time = time_et | split: "-" | last | strip %}
+
+              <!-- Combine the date with the start and end times -->
+              {% assign session_end_str = session_date | append: " " | append: session_end_time %}
+
+              {% capture sessionEndTimestamp %}{% getDateTimeinSeconds session_end_str %}{% endcapture %}
+
+              {% assign now = 'now' | date: "%s" %}
+
+              {% if sessionEndTimestamp > now %}
+                <li class="info-session" data-session-end-timestamp="{{ sessionEndTimestamp }}">
+                  <a target="_blank" href="{{ session.link }}" rel="noopener">{{ session.date | date: "%A, %B %d, %Y" }}</a>
+                  <p>{{ session.time-et }}</p>
+                  <p>({{ session.time-pt }})</p>
+                </li>
+              {% endif %}
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>

_includes/layouts/jointts/job-listing-info-sessions.html

@@ -0,0 +1,57 @@
+<!-- Info Sessions -->
+{% assign now = 'now' | date: "%s" %}
+{% assign future_sessions = false %}
+
+{% for session in pg.data.info_sessions %}
+  <!-- Format the date for comparison -->
+  {% assign session_date = session.date | date: "%Y-%m-%d" %}
+
+  <!-- Extract ET time range from session.time (e.g., "1:00-2:00pm ET") -->
+  {% assign time_et = session.time | split: " ET" | first %}
+
+  <!-- Extract start time and end time (e.g., "1:00pm" and "2:00pm") -->
+  {% assign session_end_time = time_et | split: "-" | last | strip %}
+
+  <!-- Combine the date with the start and end times -->
+  {% assign session_end_str = session_date | append: " " | append: session_end_time %}
+
+  {% capture sessionEndTimestamp %}{% getDateTimeinSeconds session_end_str %}{% endcapture %}
+
+  <!-- Check if session is still upcoming or ongoing -->
+  {% if sessionEndTimestamp > now %}
+    {% assign future_sessions = true %}
+    {% break %}
+  {% endif %}
+{% endfor %}
+
+{% if future_sessions %}
+  <aside class="usa-alert usa-alert-info">
+    <div class="usa-alert-body">
+      <p>Upcoming or ongoing info sessions for {{ pg.data.title }}</p>
+      <ul class="info-sessions-list">
+        {% for session in pg.data.info_sessions %}
+          <!-- Format the date for comparison -->
+          {% assign session_date = session.date | date: "%Y-%m-%d" %}
+
+          <!-- Extract ET time range from session.time (e.g., "1:00-2:00pm ET") -->
+          {% assign time_et = session.time | split: " ET" | first %}
+
+          <!-- Extract start time and end time (e.g., "1:00pm" and "2:00pm") -->
+          {% assign session_end_time = time_et | split: "-" | last | strip %}
+
+          <!-- Combine the date with the start and end times -->
+          {% assign session_end_str = session_date | append: " " | append: session_end_time %}
+
+          {% capture sessionEndTimestamp %}{% getDateTimeinSeconds session_end_str %}{% endcapture %}
+
+          <!-- Show if session is still ongoing or upcoming -->
+          {% if sessionEndTimestamp > now %}
+            <li data-session-end-timestamp="{{ sessionEndTimestamp }}">
+              <p><a href="{{ session.link }}" target="_blank">{{ session.headline }}</a> at {{ session.time }}</p>
+            </li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </div>
+  </aside>
+{% endif %}

_includes/layouts/jointts/open-jobs.html

@@ -0,0 +1,29 @@
+<ul>
+    {% assign open_job_count = 0 %}
+    {% for pg in collections.jobs %}
+    {% capture state %}{% getStateFromDates pg.data.opens pg.data.closes %}{% endcapture %}
+      {% if state == "open" %}
+        {% unless pg.data.path contains 'template' %}
+          {% unless pg.data.path contains 'performance-profiles' %}
+            {% assign open_job_count = open_job_count | plus: 1 %}
+            <li>
+              {% if pg.data.external_url %}
+              <a href="{{ pg.data.external_url }}" target="_blank">{{ pg.data.title }}</a>
+                {% else %}
+                <a href="{{ pg.url | url }}">{{ pg.data.title }}</a>
+              {% endif %}
+             (Open now {% if pg.data.weeks_open %}for {% if pg.data.weeks < 52 %}{{ pg.data.weeks }}{% else %} one year or until all selections have been made{% endif %},{% endif %} through {{ pg.data.closes | date: '%A, %B %e, %Y at 11:59pm' }} ET)
+
+             <!-- Info Sessions -->
+             {% include "layouts/jointts/job-listing-info-sessions.html" %}
+
+            </li>
+          {% endunless %}
+        {% endunless %}
+      {% endif %}
+    {% endfor %}
+  </ul>
+
+  {% if open_job_count == 0 %}
+    <p>No open positions at this time. Sign up for <a href="/join/newsletter/">job alerts!</a></p>
+  {% endif %}