Skip to content

Commit

Permalink
Merge pull request #20 from cloud-gov/chore-layouts-and-menu
Browse files Browse the repository at this point in the history 
Layouts and menu
  • Loading branch information
@jamesthebrooks
jamesthebrooks authored Nov 6, 2024
2 parents 47f2666 + 7801220 commit c6ecb6a
Show file tree
Hide file tree
Showing 18 changed files with 1,100 additions and 232 deletions.
70 changes: 48 additions & 22 deletions .eleventy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 !== '<ol id="toc" class="section-nav"></ol>';
});


// Add plugins.html
config.addPlugin(pluginRss);
config.addPlugin(pluginNavigation);
Expand Down Expand Up @@ -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 `<code class="${langPrefix}plaintext">${htmlEntities(token.content)}</code>&nbsp;`;
};
})
.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 `<code class="${langPrefix}plaintext">${htmlEntities(token.content)}</code>&nbsp;`;
};
config.setLibrary('md', markdownLibrary);

// Override Browsersync defaults (used only with --serve)
Expand Down
35 changes: 20 additions & 15 deletions _includes/collection-item.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
<li class="usa-collection__item">
<div class="usa-prose padding-right-4">
{% if post.data.image %}
{% assign imagepath="./_img/" | append: post.data.image %}
{% image_with_class imagepath "usa-collection__img" post.data.image_alt_text %}
{% endif %}
<div class="usa-collection__body">
<h3 class="usa-collection__heading">
<a
class="usa-link"
href="{{ post.url | url }}"
>{{ post.data.title }}</a
>
<div class="padding-bottom-5 margin-top-4 usa-prose border-bottom-05 border-base-lightest usa-content">
<h3 class="title">
<a class="usa-link text-no-underline" href="{{ post.url | url }}"
>{{ post.data.title }}</a>
</h3>
<div class="margin-bottom-2">
<div class="margin-top-neg-105 font-family-ui">
<time datetime="{{ post.date | date: '%Y-%m-%dT12:00:00+01:00' }}">
{{ post.date | readableDate }}
</time>
</div>
</div>

<p class="usa-collection__description">
{{ post.templateContent | truncatewords: 10 }}
{%- if post.data.excerpt -%}
{{ post.data.excerpt | truncatewords: 50 }}
{%- else -%}
{{ post.content | striptags | truncatewords: 50 }}
{%- endif -%}
</p>
<ul class="usa-collection__meta" aria-label="More information">
<li class="usa-collection__meta-item">
{{ post.data.author }}
</li>
<li class="usa-collection__meta-item">
<time datetime="{{ post.date | date: '%Y-%m-%dT12:00:00+01:00' }}">
{{ post.date | date: '%B %d, %Y' }}
</time>
</li>
</ul>

</div>
</li>
</div>
197 changes: 136 additions & 61 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,141 @@
<footer class="usa-footer site-footer" role="contentinfo">
<div class="usa-identifier site-identifier">
<section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier">
<div class="usa-identifier__container">
<div class="usa-identifier__logos">
<a href="https://www.gsa.gov">
{% image_with_class "_img/gsa-logo.svg" "usa-identifier__logo" "GSA logo identifier" %}
</a>
</div>
<div class="usa-identifier__identity" aria-label="Agency description">
<p class="usa-identifier__identity-domain">cloud.gov</p>
<p class="usa-identifier__identity-disclaimer">
An official website of the <a class="external_link" href="https://gsa.gov">General Services Administration</a>
</p>

<!-- Helpful Links Section -->
<div class="usa-footer__primary-section bg-accent-warm-light border-top border-accent-warm-dark padding-bottom-4">
<div class="grid-container">
<nav class="usa-footer__nav padding-0" aria-label="Footer navigation">
<div class="grid-row grid-gap-4">
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<h4 class="usa-footer__primary-link">Get in touch</h4>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link">
<a href="{{ '/contact' | url }}">Customer support</a>
</li>
<li class="usa-footer__secondary-link">
<a href="mailto:inquiries@cloud.gov">Business inquiries</a>
</li>
<li class="usa-footer__secondary-link">
<a href="https://join.tts.gsa.gov/" class="usa-link--external" target="_blank">Join our team</a>
</li>
</ul>
</section>
</div>
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<h4 class="usa-footer__primary-link">For developers</h4>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link">
<a href="{{ '/docs/ops/repos/#repositories' | url }}">Repositories</a>
</li>
<li class="usa-footer__secondary-link">
<a href="{{ '/docs/pricing/free-limited-sandbox/' | url }}">Free developer sandbox</a>
</li>
<li class="usa-footer__secondary-link">
<a href="https://cloudgov.statuspage.io/" class="usa-link--external" target="_blank">cloud.gov status</a>
</li>
</ul>
</section>
</div>
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<h4 class="usa-footer__primary-link">Policies</h4>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link">
<a href="https://www.gsa.gov/vulnerability-disclosure-policy" class="usa-link--external" target="_blank">
Vulnerability disclosure policy</a>
</li>
<li class="usa-footer__secondary-link">
<a href="https://18f.gsa.gov/open-source-policy/" class="usa-link--external" target="_blank">Open source policy</a>
</li>
</ul>
</section>
</div>
</div>
</nav>
</div>
</div>

<!-- Cloud.gov Logo & Email -->
<div class="usa-footer__secondary-section bg-accent-warm">
<div class="grid-container">
<div class="usa-footer__logo grid-row grid-gap-2">
<div class="grid-col-auto">
{% image_with_class "./_img/cloud-gov-logo.svg" "width-card-lg height-auto" site.title %}
</div>
<div class="grid-col-auto desktop:margin-left-auto">
<p class="">
<a href="mailto:{{site.email}}">{{site.email}}</a>
</p>
</div>
</div>
</div>
</section>
<nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
<div class="usa-identifier__container">
<ul class="usa-identifier__required-links-list">
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link usa-link">
About GSA
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/website-information/accessibility-aids" class="usa-identifier__required-link usa-link">
Accessibility support
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/reference/freedom-of-information-act-foia" class="usa-identifier__required-link usa-link">
FOIA requests
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002" class="usa-identifier__required-link usa-link">
No FEAR Act data
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsaig.gov/" class="usa-identifier__required-link usa-link">
Office of the Inspector General
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/reference/reports/budget-performance" class="usa-identifier__required-link usa-link">
Performance reports
</div>

<!-- Universal Footer from Pages -->
<div class="usa-identifier site-identifier">
<section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier">
<div class="usa-identifier__container">
<div class="usa-identifier__logos">
<a href="https://www.gsa.gov" class="usa-link--external" target="_blank">
{% image_with_class "_img/gsa-logo.svg" "usa-identifier__logo" "GSA logo identifier" %}
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/website-information/website-policies" class="usa-identifier__required-link usa-link">
Privacy policy
</a>
</li>
</ul>
</div>
</nav>
<section class="usa-identifier__section usa-identifier__section--usagov" aria-label="Government information and services">
<div class="usa-identifier__container">
<div class="usa-identifier__usagov-description">Looking for U.S. government information and services?</div>
<a href="https://www.usa.gov/" class="external_link">Visit USA.gov</a>
</div>
</section>
</div>
</div>
<div class="usa-identifier__identity" aria-label="Agency description">
<p class="usa-identifier__identity-domain">cloud.gov</p>
<p class="usa-identifier__identity-disclaimer">
An official website of the <a href="https://gsa.gov" class="usa-link--external" target="_blank">General Services Administration</a>
</p>
</div>
</div>
</section>
<nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
<div class="usa-identifier__container">
<ul class="usa-identifier__required-links-list">
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link usa-link usa-link--external" target="_blank">
About GSA
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/website-information/accessibility-aids" class="usa-identifier__required-link usa-link usa-link--external" target="_blank">
Accessibility support
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/reference/freedom-of-information-act-foia" class="usa-identifier__required-link usa-link usa-link--external" target="_blank">
FOIA requests
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002 usa-link--external" target="_blank" class="usa-identifier__required-link usa-link">
No FEAR Act data
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsaig.gov/" class="usa-identifier__required-link usa-link usa-link--external" target="_blank">
Office of the Inspector General
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/reference/reports/budget-performance" class="usa-identifier__required-link usa-link usa-link--external" target="_blank">
Performance reports
</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/website-information/website-policies" class="usa-identifier__required-link usa-link usa-link--external" target="_blank">
Privacy policy
</a>
</li>
</ul>
</div>
</nav>
<section class="usa-identifier__section usa-identifier__section--usagov" aria-label="Government information and services">
<div class="usa-identifier__container">
<div class="usa-identifier__usagov-description">Looking for U.S. government information and services?</div>
<a href="https://www.usa.gov/" class="usa-link--external" target="_blank">Visit USA.gov</a>
</div>
</section>
</div>

</footer>
10 changes: 9 additions & 1 deletion _includes/layouts/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,15 @@
<body>
{% 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 }}

Expand Down
2 changes: 1 addition & 1 deletion _includes/layouts/data.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% endcomment %}


<div class="usa-layout-docs usa-section">
<div class="usa-layout-docs usa-section data-layout">
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="usa-layout-docs__main desktop:grid-col-9 usa-prose">
Expand Down
2 changes: 1 addition & 1 deletion _includes/layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
The home page uses wide.html layout, since it extends full width of page
{% endcomment %}

<main id="main-content">
<main id="main-content" class="default-layout">
{{ content }}
</main>
Loading

0 comments on commit c6ecb6a

Please sign in to comment.