Skip to content

Commit 761a2f5

Browse files
timmywiltimmywil
committed
feat(base): build out desktop nav
1 parent a03645c commit 761a2f5

13 files changed

Lines changed: 1289 additions & 185 deletions

File tree

‎_includes/layouts/base.njk‎

Lines changed: 122 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,124 @@
11
<!doctype html>
22
<html lang="{{ metadata.language }}">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>{{ title or metadata.title }}</title>
7-
<meta name="description" content="{{ description or metadata.description }}">
8-
9-
{#- Atom and JSON feeds included by default #}
10-
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
11-
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
12-
13-
{#-
14-
CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
15-
1. You can add to them using `{% css %}`
16-
2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}`
17-
3. You can do the same for JS: {% js %}{% endjs %} and <script>{% getBundle "js" %}</script>
18-
4. Learn more: https://github.com/11ty/eleventy-plugin-bundle
19-
#}
20-
21-
{#
22-
Hot reload isn't working with the bundle plugin on windows
23-
See https://github.com/11ty/eleventy/issues/2807
24-
#}
25-
{# <link rel="stylesheet" href="/css/index.css" /> #}
26-
{#- Add the contents of a file to the bundle #}
27-
{%- css %}{% include "public/css/index.css" %}{% endcss %}
28-
29-
{#- Add an arbitrary string to the bundle #}
30-
{# {%- css %}* { box-sizing: border-box; }{% endcss %} #}
31-
{#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}
32-
<style>{% getBundle "css" %}</style>
33-
{#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #}
34-
{# <link rel="stylesheet" href="{% getBundleFileUrl "css" %}"> #}
35-
</head>
36-
<body>
37-
<a href="#skip" class="visually-hidden">Skip to main content</a>
38-
39-
<header>
40-
<a href="/" class="home-link">{{ metadata.title }}</a>
41-
42-
{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
43-
<nav>
44-
<h2 class="visually-hidden">Top level navigation menu</h2>
45-
<ul class="nav">
46-
{%- for entry in collections.all | eleventyNavigation %}
47-
<li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
48-
{%- endfor %}
49-
</ul>
50-
</nav>
51-
</header>
52-
53-
<main id="skip">
54-
{{ content | safe }}
55-
</main>
56-
57-
<footer></footer>
58-
59-
<!-- Current page: {{ page.url | htmlBaseUrl }} -->
60-
</body>
61-
</html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{{ title or metadata.title }}</title>
7+
<meta name="description" content="{{ description or metadata.description }}">
8+
{% favicon './favicon.svg' %}
9+
{# Atom and JSON feeds included by default #}
10+
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}"/>
11+
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}"/>
12+
{#
13+
CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
14+
1. You can add to them using `{% css %}`
15+
2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}`
16+
3. You can do the same for JS: {% js %}{% endjs %} and
17+
<script>{% getBundle "js" %}</script>
18+
4. Learn more: https://github.com/11ty/eleventy-plugin-bundle
19+
#}
20+
{#
21+
Hot reload isn't working with the bundle plugin on windows
22+
See https://github.com/11ty/eleventy/issues/2807
23+
#}
24+
<link rel="stylesheet" href="/css/index.css"/>
25+
{# Add the contents of a file to the bundle #}
26+
{%- css %}{% include "public/css/ticket.css" %}{% endcss %}
27+
{# Add an arbitrary string to the bundle #}
28+
{# {%- css %}* { box-sizing: border-box; }{% endcss %} #}
29+
{# Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}
30+
<style>
31+
{% getBundle "css" %}
32+
</style>
33+
{#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #}
34+
{# <link rel="stylesheet" href="{% getBundleFileUrl "css" %}"> #}
35+
</head>
36+
<body>
37+
<div class="container">
38+
<a href="#skip" class="visually-hidden">Skip to main content</a>
39+
<header class="flex-column">
40+
<div class="flex-row flex-between-start">
41+
<a id="jq-siteLogo" href="https://jquery.com/" title="jQuery Home">
42+
<img src="/img/logo.png" width="215" height="53" alt="jQuery: Write Less, Do More."/>
43+
</a>
44+
<div>
45+
<nav id="jq-primaryNavigation">
46+
<h2 class="visually-hidden">jQuery sites navigation menu</h2>
47+
<ul class="nav">
48+
<li class="jq-jquery active">
49+
<a href="https://jquery.com/" title="jQuery Home">jQuery</a>
50+
</li>
51+
<li class="jq-plugins">
52+
<a href="https://plugins.jquery.com/" title="jQuery Plugins">Plugins</a>
53+
</li>
54+
<li class="jq-ui">
55+
<a href="https://jqueryui.com/" title="jQuery UI">UI</a>
56+
</li>
57+
<li class="jq-meetup">
58+
<a href="https://meetups.jquery.com/" title="jQuery Meetups">Meetups</a>
59+
</li>
60+
<li class="jq-forum">
61+
<a href="https://forum.jquery.com/" title="jQuery Forum">Forum</a>
62+
</li>
63+
<li class="jq-blog">
64+
<a href="https://blog.jquery.com/" title="jQuery Blog">Blog</a>
65+
</li>
66+
<li class="jq-about">
67+
<a href="https://openjsf.org" title="About jQuery and OpenJS">About</a>
68+
</li>
69+
<li class="jq-donate">
70+
<a href="https://openjsf.org/about/project-funding-opportunities/" title="Donate to OpenJS">Donate</a>
71+
</li>
72+
</ul>
73+
</nav>
74+
<nav id="jq-secondaryNavigation">
75+
<h2 class="visually-hidden">jQuery Core navigation menu</h2>
76+
<ul class="nav">
77+
<li class="jq-download">
78+
<a href="https://jquery.com/download/">
79+
Download
80+
</a>
81+
</li>
82+
<li class="jq-documentation">
83+
<a href="https://api.jquery.com/">
84+
Documentation
85+
</a>
86+
</li>
87+
<li class="jq-tutorials">
88+
<a href="https://learn.jquery.com/">
89+
Tutorials
90+
</a>
91+
</li>
92+
<li class="jq-bugTracker">
93+
<a href="https://github.com/jquery/jquery/issues">
94+
Bug Tracker
95+
</a>
96+
</li>
97+
<li class="jq-discussion">
98+
<a href="https://forum.jquery.com/">
99+
Discussion
100+
</a>
101+
</li>
102+
</ul>
103+
</nav>
104+
</div>
105+
</div>
106+
<div id="bug-tracker-form" class="flex-row flex-between-center">
107+
<h1>Bug Tracker</h1>
108+
<form class="flex-row flex-start-center" action="/search" method="get">
109+
<label for="jq-primarySearch">Search Tickets</label>
110+
<input type="text" value="" title="Search jQuery" name="q" id="jq-primarySearch">
111+
<button type="submit" name="go" id="jq-searchButton">
112+
<span class="visually-hidden">Search</span>
113+
</button>
114+
</form>
115+
</div>
116+
</header>
117+
<main id="skip">
118+
{{ content | safe }}
119+
</main>
120+
<footer></footer>
121+
</div>
122+
<!-- Current page: {{ page.url | htmlBaseUrl }} -->
123+
</body>
124+
</html>

‎_includes/postslist.njk‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
{%- css %}.postlist { counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }} }{% endcss %}
2+
{%- css %}{% include "public/css/postslist.css" %}{% endcss %}
23
<ol reversed class="postlist">
3-
{% for post in postslist | reverse %}
4-
<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
5-
<a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
6-
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
7-
</li>
8-
{% endfor %}
9-
</ol>
4+
{% for post in postslist | reverse %}
5+
<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
6+
<a href="{{ post.url }}" class="postlist-link">
7+
{% if post.data.title %}{{ post.data.title }}
8+
{% else %}
9+
<code>{{ post.url }}</code>
10+
{% endif %}
11+
</a>
12+
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
13+
</li>
14+
{% endfor %}
15+
</ol>

‎content/ticket.njk‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,10 @@ pagination:
33
data: tickets
44
size: 1
55
alias: ticket
6-
addAllPagesToCollections: true
76
layout: layouts/ticket.njk
87
eleventyComputed:
9-
title: #{{ ticket.id }} ({{ ticket.title }}) - jQuery - Bug Tracker
8+
title: "#{{ ticket.id }} ({{ ticket.summary }}) - jQuery - Bug Tracker"
109
permalink: /ticket/{{ ticket.id }}/
1110
---
1211

13-
14-
15-
<h1>{{ ticket.summary }}</h1>
16-
17-
{% set postslist = tickets %}
18-
{% include "postslist.njk" %}
12+
{{ content | safe }}

‎eleventy.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
66
const pluginBundle = require('@11ty/eleventy-plugin-bundle')
77
const pluginNavigation = require('@11ty/eleventy-navigation')
88
const { EleventyHtmlBasePlugin } = require('@11ty/eleventy')
9+
const pluginFavicon = require('eleventy-favicon')
910
const CleanCSS = require('clean-css')
1011

1112
const pluginDrafts = require('./eleventy.config.drafts.js')
@@ -47,6 +48,7 @@ module.exports = function (eleventyConfig) {
4748
}
4849
]
4950
})
51+
eleventyConfig.addPlugin(pluginFavicon)
5052

5153
// Filters
5254
eleventyConfig.addFilter('readableDate', (dateObj, format, zone) => {

0 commit comments

Comments
 (0)