Merge pull request #326 from oddbird/positioning-update

Positioning update

content/_includes/embed.macros.njk

@@ -49,6 +49,7 @@ params:
   min=none,
   size=none,
   content=none,
+  use_md=false,
   media_attrs={}
 ) %}
   {%- set content = content if (content != none) else caller() -%}
@@ -65,7 +66,15 @@ params:
   } -%}
   <div {{ utility.style_if(style) }} {{ utility.show_attrs(attrs) }}>
     <div {{ utility.show_attrs({'class': 'media-image'} | merge(media_attrs)) }}>{{ media | safe }}</div>
-    <div class="media-content">{{ content | safe }}</div>
+    <div class="media-content">
+      {%- if use_md -%}
+        {%- md -%}
+          {{ content | safe }}
+        {%- endmd -%}
+      {%- else -%}
+        {{ content | safe }}
+      {%- endif -%}
+    </div>
   </div>
 {% endmacro %}
 

content/_includes/layout.macros.njk

@@ -89,3 +89,20 @@ params:
   {%- set content = content if (content != none) else caller() -%}
   <div data-block="{{ name }}" {{ utility.show_attrs(attrs) }}>{{ content | safe }}</div>
 {%- endmacro %}
+
+
+{# @docs
+label: section_link
+note: Section links are call-to-action links at the end of sections
+params:
+  content:
+    type: markdown
+  link:
+    type: url
+#}
+{% macro section_link(
+  content,
+  link
+) %}
+  <a class="section-link" href={{ link }}>{{ content | safe }} »</a>
+{% endmacro %}

content/_includes/page/base.njk

@@ -27,7 +27,7 @@
   {% if content -%}
     {%- set hcontent = 'e-content' if is_entry else ('p-note' if is_bird else none) -%}
     <div data-main data-typeset {{ utility.attr_if('class', hcontent)}}>
-      {{ content | typogr | safe }}
+      {{ content | safe }}
     </div>
   {%- endif %}
 

content/_includes/post.macros.njk

@@ -90,12 +90,13 @@ params:
   {%- if posts | length -%}
     {%- set recents = posts | isType(type) | pageYears | reverse | removePage(page_url) | onlyShow(limit) -%}
     {%- if recents | length -%}
-      {%- set year_title = ['Recent', banner_title] | join(' ') -%}
+      {%- set title = ['Recent', banner_title] | join(' ') -%}
       {{ list(
         recents,
         collections=collections,
-        title=year_title,
-        override_feature=true
+        title=title,
+        override_feature=true,
+        override_large=true
       ) }}
     {%- endif -%}
   {%- endif -%}
@@ -122,13 +123,22 @@ params:
   override_feature:
     type: boolean
     default: 'false'
+  override_large:
+    type: boolean
+    default: 'false'
+  class:
+    type: string
+    note: optional class added to wrapping `<ol>` element
+    default: none
 #}
 {% macro list(
   posts,
   collections=none,
   title='Posts',
   pagination=none,
-  override_feature=false
+  override_feature=false,
+  override_large=false,
+  class=none
 ) %}
 {%- if posts -%}
   {%- set posts = posts if (posts[0].sort) else posts | pageYears -%}
@@ -143,9 +153,15 @@ params:
     {{ layout.title(title) }}
   {% endif %}
 
-  <ol data-grid="cards" reversed>
+  <ol data-grid="cards" {{ utility.attr_if('class', class) }} reversed>
     {%- for post in posts | sort(reverse=true, attribute=sort) -%}
-      {{ item(post, collections, loop, override_feature=override_feature) }}
+      {{ item(
+        post,
+        collections,
+        loop,
+        override_feature=override_feature,
+        override_large=override_large
+      ) }}
     {%- endfor -%}
   </ol>
 {% endif %}
@@ -162,24 +178,27 @@ params:
   collections:
     type: 11ty collections object
     default: none
-  feature:
-    type: boolean | 'large'
+  loop:
+    type: Nunjucks `loop` object -- https://mozilla.github.io/nunjucks/templating.html#for
     default: none
   override_feature:
     type: boolean
     default: 'false'
+  override_large:
+    type: boolean
+    default: 'false'
 #}
 {% macro item(
   post,
   collections=none,
   loop=none,
-  override_feature=false
+  override_feature=false,
+  override_large=false
 ) %}
   {%- set type = post.data.tags | pageType -%}
   {%- set card = post.data.card or none -%}
-  {%- set card = 'feature' if (card == 'feature') else card -%}
-  {%- set card = card or 'feature' if type.feature else card -%}
-  {%- set card = none if override_feature else card -%}
+  {%- set card = 'feature' if (override_large and card === 'large') else card -%}
+  {%- set card = none if (override_feature and card === 'feature') else card -%}
 
   {# Adjust card settings based on the number of posts in a list #}
   {% if loop %}
@@ -462,10 +481,10 @@ label: subtitle
 category: metadata
 note: Generate each post in a list
 params:
-  post:
-    type: 11ty page object
-  collections:
-    type: 11ty collections object
+  sub:
+    type: markdown
+  class:
+    type: string
     default: none
 #}
 {% macro subtitle(
@@ -561,7 +580,7 @@ params:
   {% if adr %}
     <i>in</i>
     <span class="adr">
-      {{ adr | typogr | safe }}
+      {{ adr }}
     </span>
   {% endif %}
 {% endmacro %}
@@ -620,7 +639,7 @@ params:
           {% for item in items | sort(attribute='tag') %}
             <li {% if pill %}class="pill-item p-category"{% endif %}>
               {{- utility.link_if(
-                content=item.tag | typogr,
+                content=item.tag,
                 url=item.url,
                 class='pill' if pill else none
               ) -}}
@@ -739,3 +758,51 @@ params:
   </span>
 {% endif %}
 {% endmacro %}
+
+
+{# @docs
+label: homepage_posts
+category: lists
+note: |
+  Returns a given number of featured
+  posts from a collection for the
+  homepage "featured posts" section
+params:
+  type:
+    type: string
+    note: one of several post "types" to display (types are defined in the `taxonomy.yaml` data file)
+  collections:
+    type: 11ty collections object
+    default: '[]'
+  limit:
+    type: number
+    default: 4
+  banner_title:
+    type: string
+    default: 'Featured Posts'
+  class:
+    type: string
+    note: optional class added to wrapping `<ol>` element
+    default: none
+#}
+{% macro homepage_posts(
+  type,
+  collections=[],
+  limit=4,
+  banner_title='Featured Posts',
+  class=none
+) %}
+  {%- set posts = collections[type] -%}
+  {%- if posts | length -%}
+    {%- set featured = posts | isType(type) | isHome | pageYears | reverse | onlyShow(limit) -%}
+    {%- if featured | length -%}
+      {{ list(
+        featured,
+        collections=collections,
+        title=banner_title,
+        override_large=true,
+        class=class
+      ) }}
+    {%- endif -%}
+  {%- endif -%}
+{% endmacro %}

content/_includes/utility.macros.njk

@@ -235,7 +235,7 @@ params:
       {%- set same = 'same-m' if same and (start_m == end_m) else same -%}
 
       {{ start | getDate(ranges[same].start or 'year') }}
-      {{- '--' | typogr | safe -}}
+      {{- '--' -}}
       {{ end | getDate(ranges[same].end or 'year') }}
     {%- else -%}
       {{ start | getDate('month_year' if format == 'range' else format) }}

content/_layouts/base.njk

@@ -73,10 +73,12 @@
       Skip to main
     </a>
 
+    {% typogr %}
     {% include "site/alert.njk" %}
     {% include "site/banner.njk" %}
     {% include 'page/base.njk' %}
     {% include 'site/footer.njk' %}
+    {% endtypogr %}
 
     <script type="text/javascript" src="/assets/js/scripts.js"></script>
 

content/blog/2017/blocking-analytics-spam.md

@@ -120,7 +120,6 @@ analytics data:
 ```js
 const devHosts = [
   // List your local development servers
-  'oddsite.hexxie.com:3000',
   'localhost:3000',
   '127.0.0.1:3000'
 ];

content/blog/2021/containerqueries.md

@@ -17,6 +17,7 @@ summary: |
   and proposing for years, has finally made its debut in a browser. Well, sort
   of. Here we'll explain what container queries are, how they work, and what
   other features they might come with once fully supported in browsers.
+home: true
 ---
 
 {% import 'embed.macros.njk' as embed %}

content/blog/2022/headed-playwright-in-docker.md

@@ -14,6 +14,7 @@ image:
 summary: |
   Learn how to run Playwright in headed mode to interact with the browser's user
   interface from outside Docker containers.
+home: true
 ---
 
 [Playwright](https://playwright.dev/) is a test runner that uses real browsers

content/blog/2022/platform-tools.md

@@ -47,6 +47,7 @@ summary: |
   > What happens when something goes wrong?
   >
   > ---Jeremy Keith
+home: true
 ---
 
 {% import "embed.macros.njk" as embed %}

content/blog/2023/when-to-choose-a-responsive-web-app.md

@@ -29,6 +29,8 @@ summary: |
   unpacking the reasons to choose
   one platform over another.
   Let's start with responsive web apps.
+card: large
+home: true
 ---
 
 {% import 'embed.macros.njk' as embed %}