UHF-10341 job page cache problem

public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml

@@ -11,3 +11,11 @@ siteimprove-analytics:
   dependencies:
   - core/drupal
   - eu_cookie_compliance/eu_cookie_compliance
+
+# Turn datetime into text, f.ex "today"
+datetime_comparison:
+  version: 1.0
+  js:
+    dist/js/helfi_datetime_comparison.min.js: {attributes: { defer: true }}
+  dependencies:
+    - core/drupal

public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme

@@ -76,7 +76,7 @@ function hdbt_subtheme_preprocess_organization_information_block(array &$variabl
     $organization_field = $variables['elements']['field_organization_override']['#items'];
   }
   else {
-    $organization_field = $variables["elements"]["field_organization"]["#items"];
+    $organization_field = $variables['elements']['field_organization']['#items'];
   }
 
   // Get organization.
@@ -86,8 +86,8 @@ function hdbt_subtheme_preprocess_organization_information_block(array &$variabl
   }
 
   // Set organization default image variable.
-  if (!empty($organization) && !empty($organization->get("field_default_image")->first())) {
-    $variables['content']['organization_default_image'] = $organization->get("field_default_image")->first()->view([
+  if (!empty($organization) && !empty($organization->get('field_default_image')->first())) {
+    $variables['content']['organization_default_image'] = $organization->get('field_default_image')->first()->view([
       'type' => 'image',
       'label' => 'hidden',
       'settings' => [
@@ -170,6 +170,7 @@ function hdbt_subtheme_preprocess_page(&$variables): void {
     // (job_listing) content type.
     if ($entity->getType() === 'job_listing') {
       $variables['has_sidebar_second'] = TRUE;
+      $variables['#attached']['library'][] = 'hdbt_subtheme/datetime_comparison';
     }
   }
 }
@@ -183,13 +184,6 @@ function hdbt_subtheme_preprocess_node(&$variables): void {
   if ($node->getType() !== 'job_listing') {
     return;
   }
-  // Check if job listing publication starts today.
-  $variables['publication_starts_today'] = FALSE;
-  $publication_starts_value = $node->get('field_publication_starts')->value;
-
-  if ($publication_starts_value && date('Y-m-d', strtotime($publication_starts_value)) == date('Y-m-d')) {
-    $variables['publication_starts_today'] = TRUE;
-  }
 
   if ($task_area_term = $node->get('field_task_area')?->first()?->get('entity')?->getValue()) {
     $langcode = \Drupal::languageManager()->getCurrentLanguage()->getId();

public/themes/custom/hdbt_subtheme/src/js/helfi_datetime_comparison.js

@@ -0,0 +1,18 @@
+// Turn datetime into text (for example "today"), used on a job page.
+((Drupal) => {
+  // Look for all time-elements from all metadata-wrappers.
+  const timeElements = Array.from(document.getElementsByClassName('job-listing__metadata-wrapper'))
+    ?.map(wrapper => wrapper.getElementsByTagName('time'))
+    ?.map(timeElementCollection => Array.from(timeElementCollection))
+    ?.flat()
+  if (!timeElements) return;
+
+  const today = new Date();
+  Array.from(timeElements).forEach((element) => {
+    const originalDate = new Date(element.getAttribute('datetime'));
+    if (originalDate.toDateString() === today.toDateString()) {
+      const minutes = originalDate.getUTCMinutes() < 10 ? `0${originalDate.getMinutes()}` : originalDate.getMinutes();
+      element.innerText = `${Drupal.t('today')} ${originalDate.getHours()}:${minutes}`
+    }
+  });
+})(Drupal);

public/themes/custom/hdbt_subtheme/templates/layout/node--job-listing.html.twig

@@ -62,8 +62,6 @@
  *   current user is a logged-in member.
  * - is_admin: Flag for admin user status. Will be true when the current user
  *   is an administrator.
- * - publication_starts_today: Helper variable for displaying 'today' instead
- *   of the actual timestamp if the job listing is published today.
  * - task_area_name: Task area name for Rekry search link.
  * - task_area_rekry_search_url: Rekry search url with task area url query param.
  *
@@ -140,11 +138,8 @@
           </div>
         {% endif %}
 
-        {% if publication_starts_today == true %}
-          {% set publication_starts = 'today'|t %}
-        {% else %}
-          {% set publication_starts = content.field_publication_starts %}
-        {% endif %}
+        {# The publication time is altered in custom javascript. #}
+        {% set publication_starts = content.field_publication_starts %}
 
         {% set metadata = [
           { label: 'Application period ends'|t, icon: 'clock', content: content.field_publication_ends },