diff --git a/.eleventy.js b/.eleventy.js index 1649d5b..aba42b5 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -35,6 +35,20 @@ module.exports = function (config) { return striptags(content); }); + // Prepare content for table of contents, at time of writing used on the docs.html layout + config.addFilter("prepTOCContent", (content) => { + const toc = config.getFilter("toc"); + const strip = config.getFilter("strip"); + const strip_newlines = config.getFilter("strip_newlines") + return strip_newlines(strip(toc(content))); + }); + + // Determine if the table of contents should be shown, at time of writing used on the docs.html layout + config.addFilter("shouldShowTOC", (content, showToc) => { + return !!showToc && content !== "" && content !== '
    '; + }); + + // Add plugins.html config.addPlugin(pluginRss); config.addPlugin(pluginNavigation); @@ -140,31 +154,43 @@ module.exports = function (config) { let markdownLibrary = markdownIt({ html: true, breaks: true, - linkify: true - }).use(markdownItAnchor, { - permalink: markdownItAnchor.permalink.ariaHidden({ - placement: 'after', - class: 'direct-link', - symbol: '', - level: [1, 2, 3, 4], - }), - slugify: config.getFilter('slug'), - }).use(markdownItTable); + linkify: true, + typographer: true + }) + .use(function (md) { + // Override the default link rendering rule to add target and rel attributes + const defaultRender = md.renderer.rules.link_open || function (tokens, idx, options, env, self) { + return self.renderToken(tokens, idx, options); + }; + md.renderer.rules.link_open = function (tokens, idx, options, env, self) { + const token = tokens[idx]; + const hrefAttr = token.attrs ? token.attrs.find(attr => attr[0] === 'href') : null; + if (hrefAttr && /^https?:\/\//.test(hrefAttr[1])) { + token.attrSet('target', '_blank'); + token.attrSet('class', 'usa-link--external'); + token.attrSet('rel', 'noopener noreferrer'); + } + return defaultRender(tokens, idx, options, env, self); + }; + md.renderer.rules.code_inline = (tokens, idx, {langPrefix = ''}) => { + const token = tokens[idx]; + return `${htmlEntities(token.content)} `; + }; + }) + .use(markdownItAnchor, { + permalink: markdownItAnchor.permalink.ariaHidden({ + placement: 'after', + class: 'direct-link', + symbol: '', + level: [1, 2, 3, 4], + }), + slugify: config.getFilter('slug'), + }) + .use(markdownItTable); + config.addFilter("markdown", (content) => { return markdownLibrary.render(content); }); - markdownLibrary.renderer.rules.link_open = function (tokens, idx, options, env, self) { - const href = tokens[idx].attrGet("href"); - if (href && href.startsWith("http")) { - tokens[idx].attrPush(["target", "_blank"]); - tokens[idx].attrPush(["rel", "noopener noreferrer"]); - } - return self.renderToken(tokens, idx, options); - }; - markdownLibrary.renderer.rules.code_inline = (tokens, idx, {langPrefix = ''}) => { - const token = tokens[idx]; - return `${htmlEntities(token.content)} `; - }; config.setLibrary('md', markdownLibrary); // Override Browsersync defaults (used only with --serve) diff --git a/_includes/collection-item.html b/_includes/collection-item.html index b495650..6423d1e 100644 --- a/_includes/collection-item.html +++ b/_includes/collection-item.html @@ -1,28 +1,33 @@ -
  1. +
    {% if post.data.image %} {% assign imagepath="./_img/" | append: post.data.image %} {% image_with_class imagepath "usa-collection__img" post.data.image_alt_text %} {% endif %} -
    -

    - {{ post.data.title }} +
    +

    + {{ post.data.title }}

    +
    +
    + +
    +
    +

    - {{ post.templateContent | truncatewords: 10 }} + {%- if post.data.excerpt -%} + {{ post.data.excerpt | truncatewords: 50 }} + {%- else -%} + {{ post.content | striptags | truncatewords: 50 }} + {%- endif -%}

    • {{ post.data.author }}
      • -
    • - -
    +
    -

    2. + diff --git a/_includes/footer.html b/_includes/footer.html index 0729c01..58e0bca 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,66 +1,141 @@ diff --git a/_includes/layouts/base.html b/_includes/layouts/base.html index bb67b0a..7bdb978 100644 --- a/_includes/layouts/base.html +++ b/_includes/layouts/base.html @@ -12,7 +12,15 @@ {% include "header.html" %} - {% include "menu.html" primary_navigation: site.primary_navigation secondary_navigation: site.secondary_navigation %} + {% if assign navigation == "pages" %} + {% assign primary_navigation = pages.navigation.primary %} + {% assign secondary_navigation = pages.navigation.secondary %} + {% else %} + {% assign primary_navigation = site.navigation.primary %} + {% assign secondary_navigation = site.navigation.secondary %} + {% endif %} + {% include "menu.html" primary_navigation: primary_navigation secondary_navigation: secondary_navigation %} + {{ content }} diff --git a/_includes/layouts/data.html b/_includes/layouts/data.html index 4ce260b..dc5e8a7 100644 --- a/_includes/layouts/data.html +++ b/_includes/layouts/data.html @@ -7,7 +7,7 @@ {% endcomment %} -
    +
    diff --git a/_includes/layouts/default.html b/_includes/layouts/default.html index 22e8f3c..7f30f1f 100644 --- a/_includes/layouts/default.html +++ b/_includes/layouts/default.html @@ -7,6 +7,6 @@ The home page uses wide.html layout, since it extends full width of page {% endcomment %} -
    +
    {{ content }}
    diff --git a/_includes/layouts/docs.html b/_includes/layouts/docs.html new file mode 100644 index 0000000..1e7fb92 --- /dev/null +++ b/_includes/layouts/docs.html @@ -0,0 +1,41 @@ +--- +layout: layouts/base +--- + +{% comment %} +This template is for a single page that does not have a date associated with it. For example, an about page. +{% endcomment %} + +
    +
    +
    + {% if sidenav == true %} + {% if navigation == "pages" %} + {% include "pages/sidenav.html" %} + {% else %} + {% include "sidenav.html" %} + {% endif %} + {% endif %} +
    +

    {{ title }}

    + + {% assign toc_content = content | prepTOCContent %} + {% if toc_content | shouldShowTOC: showtoc %} +

    Table of Contents

    +
    + {{ toc_content }} +
    + {% endif %} + + {{ content }} + +
    +
    +

    Suggest edits

    +
    + +
    +
    +
    +
    diff --git a/_includes/layouts/page.html b/_includes/layouts/page.html index be1c31c..156395e 100644 --- a/_includes/layouts/page.html +++ b/_includes/layouts/page.html @@ -6,15 +6,31 @@ This template is for a single page that does not have a date associated with it. For example, an about page. {% endcomment %} -
    +
    {% if sidenav == true %} {% include "sidenav.html" %} {% endif %} -
    -
    - {{ content }} + + {% assign custom_classes = '' %} + {% if page.sidenav == true %} + {% assign custom_classes = custom_classes | append: 'desktop:grid-col-8 ' %} + {% else %} + {% assign custom_classes = custom_classes | append: 'desktop:grid-col-12 ' %} + {% endif %} + +
    + {% if hidetitle != true %} +

    {{ title }}

    + {% endif %} + + {{ content }} + +
    +
    +

    Suggest edits

    diff --git a/_includes/layouts/post.html b/_includes/layouts/post.html index 6593130..be5e094 100644 --- a/_includes/layouts/post.html +++ b/_includes/layouts/post.html @@ -6,17 +6,22 @@ This is used in blog posts. The index page can be found at blog/index.html {% endcomment %} -
    +
    -

    {{title}}

    +

    {{title}}

    - By {{ author }} · {{ date | date: '%B %d, %Y' }} + {{ date | readableDate }}
    {{ content }} + +
    +
    +

    Suggest edits

    +
    diff --git a/_includes/layouts/wide.html b/_includes/layouts/wide.html index 8095bda..548dae7 100644 --- a/_includes/layouts/wide.html +++ b/_includes/layouts/wide.html @@ -6,4 +6,6 @@ This template is used when you want to fill the width of the page. By default, it's only used in the homepage {% endcomment %} -{{ content }} +
    + {{ content }} +
    diff --git a/_includes/logo.html b/_includes/logo.html index 18b59d1..864eb7c 100644 --- a/_includes/logo.html +++ b/_includes/logo.html @@ -1,3 +1,5 @@ diff --git a/_includes/menu.html b/_includes/menu.html index 134ec77..55bb3d2 100644 --- a/_includes/menu.html +++ b/_includes/menu.html @@ -4,7 +4,11 @@