Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Layouts and menu #20

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Layouts and menu #20

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
291a0a7
layouts and main menu
jamesthebrooks Oct 24, 2024
c6a2f6a
removed unused layout
jamesthebrooks Oct 29, 2024
dacb963
layouts branch revealed code required in app.js previously thought un…
jamesthebrooks Oct 30, 2024
92d76db
verifying footer.html migration from cg-site
jamesthebrooks Oct 30, 2024
1603df2
a cleaner way to handle external urls
jamesthebrooks Oct 30, 2024
b2fb80f
rewrite of base.html to incorporate PR comments
jamesthebrooks Oct 31, 2024
3a8ac86
handling added for external links globally
jamesthebrooks Oct 31, 2024
5501836
simplified template logic for showing the toc
jamesthebrooks Oct 31, 2024
5feeb24
no longer needed |url for external links
jamesthebrooks Oct 31, 2024
a8c0e09
added class usa-link--external to external links processing for md an…
jamesthebrooks Nov 5, 2024
0a202f2
added comments for custom 11ty filters
jamesthebrooks Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 62 additions & 22 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const pluginMermaid = require("@kevingimbel/eleventy-plugin-mermaid");
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const inspect = require("util").inspect;
const striptags = require("striptags");
const {JSDOM} = require('jsdom');


module.exports = function (config) {
// Set pathPrefix for site
Expand All @@ -35,6 +37,18 @@ module.exports = function (config) {
return striptags(content);
});

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)));
});

config.addFilter("shouldShowTOC", (content, showToc) => {
return !!showToc && content !== "" && content !== '<ol id="toc" class="section-nav"></ol>';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For every new function/filter you add to the eleventy config, do me a solid and comment what it's for. I can kinda tell but it's always nice to have a little more what/why <3

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In another comment on the docs.html page, you asked for the template markup to be simpler and so I moved the logic to here. The new docs.html code looks like this now:

            {% assign toc_content = content | prepTOCContent %}
            {% if toc_content | shouldShowTOC: showtoc %}
            <h2>Table of Contents</h2>
            <div id="table-of-contents">
                {{ toc_content }}
            </div>
            {% endif %}

The markup is simpler now, but the logic still needs to exist somewhere.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're going to add custom functions/filters (magic) to eleventy, it needs to be commented in place for other people to understand what it is and how it works. Maybe you thought I meant here on the PR?

});


// Add plugins.html
config.addPlugin(pluginRss);
config.addPlugin(pluginNavigation);
Expand Down Expand Up @@ -140,33 +154,59 @@ 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');
Copy link

@sknep sknep Nov 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is awesome and makes me happy. If you also add a class ("usa-link--external") I think we get the little visual indicator (docs) which would be nice in the article content.

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);

config.addTransform("externalLinks", (content, outputPath) => {
if (outputPath && outputPath.endsWith(".html")) {
const dom = new JSDOM(content);
const links = dom.window.document.querySelectorAll("a[href^='http']");

links.forEach(link => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh maybe this is where to put the external link class? not the above one?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be both. One is for markdown and the other is for html files.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh. I understand the markdown one but I think doing it for HTML templates might be too heavy-handed overall. Rather than dynamically re-parsing the DOM during the build, i'd rather we just added the _blank etc when we code the HTML.

link.setAttribute("target", "_blank");
link.setAttribute("rel", "noopener noreferrer");
});

return dom.serialize();
}
return content;
});

// Override Browsersync defaults (used only with --serve)
config.setBrowserSyncConfig({
callbacks: {
Expand Down
35 changes: 20 additions & 15 deletions _includes/collection-item.html
View file
Open in desktop
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 %}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does the name of this component still make sense if you're pulling the collection item class out? also if these are items in a list, they should still be <li>s

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change was mostly to keep the look and feel of the existing cg-site--I'll defer to you on this--pages way or pre-existing cg-site look? They probably shouldn't be in a list as these are multi-part paginated code blocks. Semantically, it's fine either way.

{% 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
Open in desktop
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:[email protected] | url }}">Business inquiries</a>
</li>
<li class="usa-footer__secondary-link">
<a href="{{ 'https://join.tts.gsa.gov/' | url }}">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/">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">
Vulnerability disclosure policy</a>
</li>
<li class="usa-footer__secondary-link">
<a href="https://18f.gsa.gov/open-source-policy/">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">
{% 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 class="external_link" href="https://gsa.gov">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">
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
</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>

</footer>
10 changes: 9 additions & 1 deletion _includes/layouts/base.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading