DF-2204 - Creates time macro, breaks apart format macros

CHANGELOG.md

@@ -28,6 +28,7 @@ Given the `MAJOR.MINOR.PATCH` pattern, here is how we decide to increment:
 - Added accessibility complaint form.
 - Added "File an EEO Issue" form.
 - Added `/offices/office-of-civil-rights/` page, tests, and link in footer.
+- Added time macro.
 
 ### Changed
 - Site's "About" text to "About Us".
@@ -42,6 +43,8 @@ Given the `MAJOR.MINOR.PATCH` pattern, here is how we decide to increment:
 - Updated ESLint to v1.0.0.
 - Moved `.meta-header`, `.jump-link`,
   and `.list__links` to `cf-enhancements.less`.
+- Converted time elements to use time template.
+- Broke apart format macros into topical macros.
 
 ### Removed
 - Removed Grunt plugins from package.json

src/_includes/article.html

@@ -61,8 +61,9 @@ <h1 class="post_heading">
                 &ndash;
             </span>
         {% endif %}
-            <span class="post_date date">
-                {{ post.date|date("%b %d, %Y") }}
+            <span class="date">
+                {% import 'macros/time.html' as time %}
+                {{ time.render(post.date, {'date':true}) }}
             </span>
         </div>
         {{ share.render({

src/_includes/leadership-calendar-table.html

@@ -1,6 +1,6 @@
 {% macro render(posts, user_options) %}
 
-{% from 'macros/util/format.html' import format_time as format_time %}
+{% import 'macros/time.html' as time %}
 
 {% set options = {
     'time_col_classes': 'u-w25pct',
@@ -14,7 +14,7 @@
     <thead>
         <tr>
             <th colspan="3">
-                {{ days.grouper|date('%b %d, %Y') }}
+                {{ time.render(days.grouper, {'date':true}) }}
             </th>
         </tr>
     </thead>
@@ -25,9 +25,9 @@
             {%- if event.all_day %}
                 All day
             {%- else %}
-                {{ format_time(event.dtstart) }}
+                {{ time.render(event.dtstart, {'time':true}) }}
                 &ndash;
-                {{ format_time(event.dtend) }}
+                {{ time.render(event.dtend, {'time':true}) }}
             {%- endif %}
             </td>
             <td class="{{ options.name_col_classes }}">

src/_includes/macros/activity-snippets.html

@@ -129,9 +129,11 @@ <h1 class="h4">{{ icon }} {{ header }}</h1>
                 <a class="list_link"
                    href="{{ item.permalink }}">
                     {{ item.title | safe  }}
-                    {%- if item.date and include_date_flag -%}
+                    {%- if include_date_flag and item.date -%}
                         <span class="date">
-                            {{ ' - ' + item.date | date('%b %d, %Y') }}
+                          &ndash;
+                          {% import 'macros/time.html' as time %}
+                          {{ time.render(item.date, {'date':true}) }}
                         </span>
                     {%- endif -%}
                 </a>

src/_includes/macros/contact-layout.html

@@ -1,7 +1,7 @@
 {# Display a contact's data in two column format #}
 {% macro render(contact, classes) %}
 
-{% from 'macros/util/format.html' import format_phone as format_phone %}
+{% from 'macros/util/format/contact.html' import format_phone as format_phone %}
 
 <div class="content-l content-l__large-gutters{{ ' ' + classes if classes else '' }}">
     <div class="content-l_col content-l_col-1-2">

src/_includes/macros/time.html

@@ -0,0 +1,47 @@
+{# ==========================================================================
+
+   time.render()
+
+   ==========================================================================
+
+   Description:
+
+   Renders a time element with a standard datetime format when given:
+
+   datetime:             A date timestamp to format.
+
+   show_only (optional): Object of fields to show.
+                         Default is true for 'date', 'time', and 'timezone'.
+
+   timezone (optional):  Timezone string value. Default is 'America/New_York'.
+
+   ========================================================================== #}
+
+{% macro render(datetime,
+                show_only={'date':true, 'time':true, 'timezone':true},
+                timezone='America/New_York') %}
+{% from 'macros/util/format/datetime.html' import format_datetime as format_datetime %}
+{% from 'macros/util/format/datetime.html' import format_date as format_date %}
+{% from 'macros/util/format/datetime.html' import format_time as format_time %}
+<span class="datetime">
+    {% if show_only.date == true  %}
+    <time class="datetime_date" datetime="{{ format_datetime(datetime) }}">
+      {{ format_date(datetime) }}
+    </time>
+    {% endif %}
+
+    {% if show_only.date == true and show_only.time == true %}
+    <span class="datetime_divider">@</span>
+    {% endif %}
+
+    {% if show_only.time == true %}
+    <time class="datetime_time" datetime="{{ format_datetime(datetime) }}">
+        {% if show_only.timezone == true %}
+        {{ format_time(datetime, timezone) }}
+        {% else %}
+        {{ format_time(datetime) }}
+        {% endif %}
+    </time>
+    {% endif %}
+</span>
+{% endmacro %}

src/_includes/macros/util/format/contact.html

@@ -0,0 +1,54 @@
+{# ==========================================================================
+
+   format_phone()
+
+   ==========================================================================
+
+   Description:
+
+   Formats a phone number to:
+
+       (XXX) XXX-XXXX
+
+   When given:
+
+   number: A ten-digit string, no spaces.
+
+   ========================================================================== #}
+
+{% macro format_phone(number) %}
+    {%- for char in number -%}
+        {{- '(' if loop.index == 1 else '' -}}
+        {{ char }}
+        {{- ') ' if loop.index == 3 else '' -}}
+        {{- '-' if loop.index == 6 else '' -}}
+    {%- endfor %}
+{% endmacro %}
+
+
+{# ==========================================================================
+
+   format_address()
+
+   ==========================================================================
+
+   Description:
+
+   Formats address to:
+
+       Line 1
+       Line 2 City, State Zip
+
+   When given:
+
+   contact: A contact document object.
+
+   ========================================================================== #}
+
+{% macro format_address(contact) %}
+    {{ contact.street if contact.street }}<br>
+    {{ contact.street_2 + '<br>' | safe if contact.street_2 else '' }}
+    {{ contact.city + ',' if contact.city else '' }}
+    {{ (contact.state + '&nbsp;') | safe if contact.state else '' }}
+    {{ contact.zip_code if contact.zip_code else '' }}
+{% endmacro %}

src/_includes/macros/util/format/datetime.html

@@ -0,0 +1,77 @@
+{# ==========================================================================
+
+   format_time()
+
+   ==========================================================================
+
+   Description:
+
+   Format a time for displaying in the format of:
+
+    HH:MM AM ZZZ
+
+   When given:
+
+   datetime: A datetime object.
+
+   timezone (optional): Whether to include the timezone or not.
+                        Provide '' to default to 'US/Eastern',
+                        otherwise provide actual timezone.
+
+   ========================================================================== #}
+
+{% macro format_time(datetime, timezone) %}
+    {% set parse_timezone = 'US/Eastern' if timezone == '' else timezone %}
+    {% if parse_timezone is defined %}
+    {{- datetime | date('%I:%M %p %Z', parse_timezone) -}}
+    {% else %}
+    {{- datetime | date('%I:%M %p') -}}
+    {% endif %}
+{% endmacro %}
+
+
+{# ==========================================================================
+
+   format_date()
+
+   ==========================================================================
+
+   Description:
+
+   Format a date for displaying in the format of:
+
+    MMM DD, YYYY
+
+   When given:
+
+   datetime: A datetime object.
+
+   ========================================================================== #}
+
+{% macro format_date(datetime) %}
+    {{- datetime | date('%b') | upper -}}
+    {{- ' ' + datetime | date('%d, %Y') -}}
+{% endmacro %}
+
+
+{# ==========================================================================
+
+   format_datetime()
+
+   ==========================================================================
+
+   Description:
+
+   Format a date for datetime metadata in the format of:
+
+    YYYY-MM-DDTHH:MM:SS.MMMM
+
+   When given:
+
+   datetime: A datetime object.
+
+   ========================================================================== #}
+
+{% macro format_datetime(datetime) %}
+    {{- datetime | date('%Y-%m-%dT%H:%M:%S.%f%z') -}}
+{% endmacro %}

src/_includes/macros/util/format.html → src/_includes/macros/util/format/url.html

@@ -1,82 +1,3 @@
-{# ==========================================================================
-
-   format_phone()
-
-   ==========================================================================
-
-   Description:
-
-   Formats a phone number to:
-
-       (XXX) XXX-XXXX
-
-   when given:
-
-   number: A ten-digit string, no spaces.
-
-   ========================================================================== #}
-
-{% macro format_phone(number) %}
-    {%- for char in number -%}
-        {{- '(' if loop.index == 1 else '' -}}
-        {{ char }}
-        {{- ') ' if loop.index == 3 else '' -}}
-        {{- '-' if loop.index == 6 else '' -}}
-    {%- endfor %}
-{% endmacro %}
-
-
-{# ==========================================================================
-
-   format_address()
-
-   ==========================================================================
-
-   Description:
-
-   Formats address to:
-
-       Line 1
-       Line 2 City, State Zip
-
-   when given:
-
-   contact: A contact document object.
-
-   ========================================================================== #}
-
-{% macro format_address(contact) %}
-    {{ contact.street if contact.street }}<br>
-    {{ contact.street_2 + '<br>'|safe if contact.street_2 else '' }}
-    {{ contact.city + ',' if contact.city else '' }}
-    {{ (contact.state + '&nbsp;')|safe if contact.state else '' }}
-    {{ contact.zip_code if contact.zip_code else '' }}
-{% endmacro %}
-
-
-{# ==========================================================================
-
-   format_time()
-
-   ==========================================================================
-
-   Description:
-
-   Format time to:
-
-    XX:XX a.m. &ndash; XX:XX p.m.
-
-   when given:
-
-   datetime: A datetime object.
-
-   ========================================================================== #}
-
-{% macro format_time(datetime) %}
-    {{- datetime|date('%I:%M&nbsp;%p')|replace('PM', 'p.m.')|replace('AM', 'a.m.')|safe -}}
-{% endmacro %}
-
-
 {# ==========================================================================
 
    slugify()
@@ -89,7 +10,7 @@
 
        'foo-bar'
 
-   when given:
+   When given:
 
    string: A string, such as 'Foo Bar'.
 

src/_includes/popular-stories.html

@@ -17,11 +17,12 @@ <h4 class='u-mb5'>
                     {{ pop_post.title|safe }}
                 </a>
             </h4>
-            <p class="short-desc u-mb0">
-                <!-- TODO: Use real content description -->
-            </p>
+            {# <p class="short-desc u-mb0">
+                 TODO: Use real content description
+            </p> #}
             <p class="date">
-                {{ pop_post.date| date('%m/%d/%y') }}
+                {% import 'macros/time.html' as time %}
+                {{ time.render(pop_post.date, {'date':true}) }}
             </p>
         </li>
     {% endfor %}

src/_includes/posts-paginated.html

@@ -22,7 +22,8 @@
     <article class="post-preview">
         <div class="meta-header">
             <span class="date meta-header_right">
-                {{ post.date|date('%b %d, %Y') }}
+                {% import 'macros/time.html' as time %}
+                {{ time.render(post.date, {'date':true}) }}
             </span>
             {% if not category %}
                 {{ '&nbsp;'|safe }}