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

Rework site and guide navigation #37

Merged
merged 4 commits into from
Jan 5, 2021
Merged

Rework site and guide navigation #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5449dde
Major rework of site and guide navigation
aomarks Dec 16, 2020
2253a82
Address comments from PR#37
aomarks Dec 17, 2020
886e2cd
Fix minor TOC jank, and TOC hover color
aomarks Dec 18, 2020
a36f370
Remove h2 scroll margin
aomarks Dec 18, 2020
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
2 changes: 2 additions & 0 deletions packages/lit-dev-content/.eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ const {playgroundPlugin} = require('./playground-plugin/plugin.js');
const slugify = (s) => slugifyLib(s, {lower: true});

module.exports = function (eleventyConfig) {
// https://github.com/JordanShurmer/eleventy-plugin-toc#readme
eleventyConfig.addPlugin(pluginTOC, {
tags: ['h2', 'h3'],
wrapper: 'div',
wrapperClass: '',
});
eleventyConfig.addPlugin(eleventyNavigationPlugin);
eleventyConfig.addPlugin(playgroundPlugin);
Expand Down
7,895 changes: 7,885 additions & 10 deletions packages/lit-dev-content/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions packages/lit-dev-content/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@
"typedoc": "^0.19.2"
},
"dependencies": {
"@material/mwc-drawer": "^0.20.0",
"@material/mwc-icon": "^0.19.1",
"@material/mwc-icon-button": "^0.19.0-canary.615d861d.0",
"code-sample-editor": "=0.1.0-pre.4",
"lit-element": "^2.3.1",
"lit-html": "^1.2.1"
Expand Down
31 changes: 16 additions & 15 deletions packages/lit-dev-content/site/_includes/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{site.baseurl}}/css/main.css">
<link rel="stylesheet" href="{{site.baseurl}}/css/theme.css">
<link rel="stylesheet" href="{{site.baseurl}}/css/codemirror.css">
{# This is a hack so I can read the pages.
ToDo: add some kind of user-visible theme switch. #}
Expand All @@ -22,26 +21,28 @@
{% block head %}{% endblock %}
</head>
<body>
{% include 'topnav.html' %}
<mwc-drawer type="modal" id="nav-drawer" class="hidden">
<nav class="site-nav">
<ol>
<li>
<span class="section-head">Site</span>
<ol>{% include 'nav-items.html' %}</ol>
</li>
{% block drawer %}{{ content | safe }}{% endblock %}
</ol>
</nav>
</mwc-drawer>

<header>
{% include 'header.html' %}
</header>

<main>
{% block content %}{{ content | safe }}{% endblock %}
</main>

<footer>
<div class="wrapper">
<div class="social-links">
<a target="_blank" href="https://github.com/Polymer/lit-html" rel="noopener" aria-label="Github"><img src="/images/logos/logo_github.svg"></a>
<a target="_blank" href="https://twitter.com/polymer" rel="noopener" aria-label="Twitter"><img src="/images/logos/logo_twitter.svg"></a>
<a target="_blank" href="https://www.polymer-project.org/slack-invite" rel="noopener" aria-label="Slack"><img src="/images/logos/logo_slack.svg"></a>
</div>
<div class="attribution">
Brought to you by <a href="https://www.polymer-project.org">The Polymer Project</a>.<br>
Copyright 2017–2020 The Polymer Project Authors. Code licensed under the
<a target="_blank" href="http://polymer.github.io/LICENSE.txt">BSD License</a>.
Documentation licensed under CC BY 3.0.
</div>
</div>
{% include 'footer.html' %}
</footer>
</body>
</html>
21 changes: 21 additions & 0 deletions packages/lit-dev-content/site/_includes/eleventy-nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{% set navSection = eleventyNavigation.parent or eleventyNavigation.key %}
{%- set navSections = collections.guide | eleventyNavigation -%}

{%- for entry in navSections %}
<li>
{%- if entry.children | length %}
<span class="section-head{% if entry.url == page.url %} active{% endif %}">
{{ entry.title }}</span>
{% set navPages = entry.children %}
<ol>
{%- for entry in navPages %}
<li{% if entry.url == page.url %} class="active"{% endif %}>
<a href="{{ entry.url | url }}">{{ entry.title }}</a>
</li>
{%- endfor %}
</ol>
{%- else %}
<a href="{{ entry.url | url }}">{{ entry.title }}</a>
{%- endif %}
</li>
{%- endfor %}
13 changes: 13 additions & 0 deletions packages/lit-dev-content/site/_includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="social-links">
<a target="_blank" href="https://github.com/Polymer/lit-html" rel="noopener" aria-label="Github"><img src="/images/logos/logo_github.svg" width="24" height="24"></a>
<a target="_blank" href="https://twitter.com/polymer" rel="noopener" aria-label="Twitter"><img src="/images/logos/logo_twitter.svg" width="24" height="24"></a>
<a target="_blank" href="https://www.polymer-project.org/slack-invite" rel="noopener" aria-label="Slack"><img src="/images/logos/logo_slack.svg" width="24" height="24"></a>
</div>
<div class="attribution">
Brought to you by <a href="https://www.polymer-project.org">The Polymer Project</a>.
<br>Copyright 2017–2020 The Polymer Project Authors.
<br>Code licensed under the
<a target="_blank" href="http://polymer.github.io/LICENSE.txt">BSD License</a>.
Documentation licensed under
<a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</div>
25 changes: 25 additions & 0 deletions packages/lit-dev-content/site/_includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<nav>
<div class="menu-button-and-title">
<mwc-icon-button class="menu-button" icon="menu"></mwc-icon-button>
<a class="title" href="{{ site.baseurl }}/">Lit</a>
</div>

<ol class="top-nav">
{% include 'nav-items.html' %}
</ol>

<div class="action-buttons">
<a class="icon" href="https://github.com/polymer/lit-html" title="GitHub">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentcolor">
<path d="M12,2C6.48,2,2,6.59,2,12.25c0,4.53,2.87,8.37,6.84,9.73c0.5,0.09,0.68-0.22,0.68-0.49c0-0.24-0.01-0.89-0.01-1.74c-2.78,0.62-3.37-1.37-3.37-1.37c-0.45-1.18-1.11-1.5-1.11-1.5c-0.91-0.64,0.07-0.62,0.07-0.62c1,0.07,1.53,1.06,1.53,1.06c0.89,1.57,2.34,1.11,2.91,0.85c0.09-0.66,0.35-1.11,0.63-1.37c-2.22-0.26-4.56-1.14-4.56-5.07c0-1.12,0.39-2.03,1.03-2.75c-0.1-0.26-0.45-1.3,0.1-2.71c0,0,0.84-0.28,2.75,1.05c0.8-0.23,1.65-0.34,2.5-0.34c0.85,0,1.7,0.12,2.5,0.34c1.91-1.33,2.75-1.05,2.75-1.05c0.55,1.41,0.2,2.45,0.1,2.71c0.64,0.72,1.03,1.63,1.03,2.75c0,3.94-2.34,4.81-4.57,5.06c0.36,0.32,0.68,0.94,0.68,1.9c0,1.37-0.01,2.48-0.01,2.81c0,0.27,0.18,0.59,0.69,0.49c3.97-1.36,6.83-5.2,6.83-9.73C22,6.59,17.52,2,12,2"/>
</svg>
</a>

<a class="icon" href="javascript:searchBox.focus()" title="Search">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentcolor">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</a>
<input class="search-box" type="search" class="search-box" placeholder="Search" aria-label="Search">
</div>
</nav>
14 changes: 14 additions & 0 deletions packages/lit-dev-content/site/_includes/nav-items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<li class="nav-item{% if page.url == '/' %} active{% endif %}">
<a href="{{ site.baseurl }}/">Features</a></li>
<li class="nav-item{% if page.url.includes('/guide') %} active{% endif %}">
<a href="{{ site.baseurl }}/guide/">Guide</a></li>
<li class="nav-item{% if page.url.includes('/tutorial') %} active{% endif %}">
<a href="{{ site.baseurl }}/tutorial/">Tutorial</a></li>
<li class="nav-item{% if page.url.includes('/examples') %} active{% endif %}">
<a href="{{ site.baseurl }}/examples/">Examples</a></li>
<li class="nav-item{% if page.url.includes('/playground') %} active{% endif %}">
<a href="{{ site.baseurl }}/playground/">Playground</a></li>
<li class="nav-item{% if page.url.includes('/api') %} active{% endif %}">
<a href="{{ site.baseurl }}/api/">API</a></li>
<li class="nav-item{% if page.url.includes('/blog') %} active{% endif %}">
<a href="{{ site.baseurl }}/blog/">Blog</a></li>
61 changes: 21 additions & 40 deletions packages/lit-dev-content/site/_includes/post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,33 @@
{% extends 'default.html' %}
{% include 'topnav.html' %}

{% block head %}
<link rel="stylesheet" href="{{site.baseurl}}/css/guide.css">
{% endblock %}

{% block drawer %}
{% include 'eleventy-nav.html' %}
{% endblock %}

{% block content %}
{% set navSection = eleventyNavigation.parent or eleventyNavigation.key %}
<main class="wrapper">
<div class="side">
<side-nav>
{%- set navSections = collections.guide | eleventyNavigation -%}
{# Uncomment to use prebuilt nav
{{ navSections | eleventyNavigationToHtml | safe }}
#}
<ul>
{%- for entry in navSections %}
<li{% if entry.url == page.url %} class="my-active-class"{% endif %}>
{%- if entry.children | length %}
<span class="sectionHead">{{ entry.title }}</span>
{% set navPages = entry.children %}
<ul>
{%- for entry in navPages %}
<li{% if entry.url == page.url %} class="my-active-class"{% endif %}>
<a href="{{ entry.url | url }}">{{ entry.title }}</a>
</li>
{%- endfor %}
</ul>
{%- else %}
<a href="{{ entry.url | url }}">{{ entry.title }}</a>
{%- endif %}
</li>
{%- endfor %}
</ul>
</side-nav>
</div>
<nav class="site-nav lhs-nav">
<ol>{% include 'eleventy-nav.html' %}</ol>
</nav>

<article>
<h1>{{ title }}</h1>
{{ content | safe }}
</article>
<article>
<h1>{{ title }}</h1>

<div class="side">
<nav class="toc">
<h2>Contents</h2>
<nav class="inline-toc">
<details>
<summary><h2>Contents</h2></summary>
{{ content | toc | safe }}
</nav>
</div>
</details>
</nav>

{{ content | safe }}
</article>

</main>
<nav class="rhs-toc hidden">
<h2>Contents</h2>
{{ content | toc | safe }}
</nav>
{% endblock %}
4 changes: 2 additions & 2 deletions packages/lit-dev-content/site/_includes/release-notes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: default
---
{% include 'topnav.html' %}
{% include 'header.html' %}

<main class="wrapper">
<nav class="side-nav">
Expand All @@ -17,7 +17,7 @@

<article>
<h1>{{ title }}</h1>

{{ content }}
</article>
</main>
Expand Down
23 changes: 0 additions & 23 deletions packages/lit-dev-content/site/_includes/topnav.html
View file
Open in desktop

This file was deleted.

Loading