Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
Chore/courses toc (#4812)
* rough in toc

* rough in styles for side toc

* add gorko. style up the side toc

* Yay ToCs are done.
  • Loading branch information
robdodson committed Mar 5, 2021
1 parent cbcb056 commit fac958f
Show file tree
Hide file tree
Showing 29 changed files with 578 additions and 73 deletions.
9 changes: 9 additions & 0 deletions .eleventy.js
Expand Up @@ -92,6 +92,13 @@ const {responsiveImages} = require(`./${transformsDir}/responsive-images`);
const {purifyCss} = require(`./${transformsDir}/purify-css`);
const {minifyHtml} = require(`./${transformsDir}/minify-html`);

// Shared dependencies between web.dev and developer.chrome.com
const {updateSvgForInclude} = require('webdev-infra/filters/svg');
// TODO: We should migrate all of our ToCs over to using this filter which we
// wrote for d.c.c. Currently we're also using eleventy-plugin-toc on articles
// but this one seems to work better.
const {toc: courseToc} = require('webdev-infra/filters/toc');

module.exports = function (config) {
console.log(chalk.black.bgGreen('Eleventy is building, please wait…'));
const isProd = process.env.ELEVENTY_ENV === 'prod';
Expand Down Expand Up @@ -194,6 +201,8 @@ module.exports = function (config) {
config.addFilter('stripQueryParamsDev', stripQueryParamsDev);
config.addFilter('getPaths', getPaths);
config.addFilter('strip', strip);
config.addFilter('courseToc', courseToc);
config.addFilter('updateSvgForInclude', updateSvgForInclude);

// ----------------------------------------------------------------------------
// SHORTCODES
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/lighthouse-ci-workflow.yml
Expand Up @@ -24,7 +24,7 @@ jobs:
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: '12.x'
node-version: '14.x'
- name: Cache node_modules
uses: actions/cache@v1
with:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/lint-and-test-workflow.yml
Expand Up @@ -13,7 +13,7 @@ jobs:
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: '12.x'
node-version: '14.x'
- name: Cache node_modules
uses: actions/cache@v1
with:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/percy-workflow.yml
Expand Up @@ -31,7 +31,7 @@ jobs:
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: '12.x'
node-version: '14.x'
- name: Cache node_modules
uses: actions/cache@v1
with:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/translation-status-workflow.yml
Expand Up @@ -16,7 +16,7 @@ jobs:
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: '12.x'
node-version: '14.x'

- name: Install
run: npm ci
Expand Down
2 changes: 1 addition & 1 deletion .nvmrc
@@ -1 +1 @@
v10.16.1
v14.15.0
10 changes: 1 addition & 9 deletions .sasslintrc
Expand Up @@ -25,7 +25,6 @@
"final-newline": 2,
"hex-notation": 2,
"indentation": 2,
"leading-zero": 2,
"no-css-comments": 2,
"no-debug": 2,
"no-mergeable-selectors": 2,
Expand All @@ -38,13 +37,6 @@
"shorthand-values": 2,
"single-line-per-selector": 2,
"space-after-comma": 2,
"space-around-operator": 2,
"variable-name-format": [
2,
{
"convention": "^[_A-Z0-9]+$",
"convention-explanation": "Variable names should be in $SCREAMING_SNAKE_CASE"
}
]
"space-around-operator": 2
}
}
34 changes: 34 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
Expand Up @@ -92,6 +92,7 @@
"firebase": "^7.14.6",
"firebase-tools": "^9.3.0",
"glob": "^7.1.6",
"gorko": "^0.2.3",
"gts": "^2.0.2",
"gulp": "^4.0.0",
"gulp-imagemin": "^7.1.0",
Expand Down Expand Up @@ -139,6 +140,7 @@
"sass-lint": "^1.12.1",
"scroll-to-bottomjs": "^1.1.0",
"slugify": "^1.4.5",
"striptags": "^3.1.1",
"through2": "^3.0.1",
"typescript": "^3.9.7",
"unified-lint-rule": "^1.0.5",
Expand All @@ -147,6 +149,7 @@
"unist-util-position": "^3.1.0",
"unist-util-to-list-of-char": "^0.1.2",
"unist-util-visit": "^1.4.1",
"webdev-infra": "github:googlechrome/webdev-infra#semver:^1",
"workbox-build": "^5.1.3",
"workbox-cacheable-response": "^5.1.3",
"workbox-core": "^5.1.3",
Expand All @@ -159,7 +162,7 @@
},
"private": true,
"engines": {
"node": "12.x"
"node": "14.x"
},
"browserslist": [
"last 2 versions",
Expand Down
9 changes: 8 additions & 1 deletion src/site/_data/lib/hash.js
Expand Up @@ -9,6 +9,10 @@ const fs = require('fs');
const hashLength = 8;
const isProduction = process.env.ELEVENTY_ENV === 'prod';

function randomHash() {
return Math.random().toString(16).substring(2);
}

function generateAndValidateHash(c) {
const hash = c.digest('hex').substr(0, hashLength);
if (hash.length !== hashLength) {
Expand Down Expand Up @@ -41,13 +45,15 @@ const hashForProdCache = {};
/**
* Hashes the passed file from within the dist dir if in production mode,
* returning the file with an appended `?v=<hash>`.
* In dev mode it will return the file with an appended `?v=<randomHash>` to
* avoid caching.
*
* @param {string} file
* @return {string}
*/
function hashForProd(file) {
if (!isProduction) {
return file;
return `${file}?v=${randomHash()}`;
}

let hash = hashForProdCache[file];
Expand All @@ -68,4 +74,5 @@ function hashForProd(file) {

module.exports = {
hashForProd,
randomHash,
};
33 changes: 13 additions & 20 deletions src/site/_includes/course.njk
Expand Up @@ -9,6 +9,15 @@ layout: base
{% set navigationToC = courses[projectKey].toc %}
{% set pageNavigation = collections.all | navigation(navigationToC) %}

{#
Grab the ToC contents for headings ToC. This powers the list of headings
that appears on the right-hand side of the page. Unfortunately our use of
the word 'toc' is a bit overloaded :P
#}
{% set tocContents %}
{{- content | courseToc | safe -}}
{% endset %}

<a class="skip-link w-button" href="#main">Skip to main</a>

<div class="course-layout">
Expand Down Expand Up @@ -46,27 +55,11 @@ layout: base
</nav>

<div class="course-content">
<nav class="course-toc scrollbar" aria-label="table of contents">
<ul class="course-toc__list">
{% for i in range(0, 40) -%}
<li class="course-toc__item">
<a href="#">What can you do with a flex layout?</a>
</li>
{%- endfor %}
</ul>
</nav>

{% include 'partials/toc-side.njk' %}

<main id="main">
{# Hide this TOC on desktop and show it on mobile #}
{# <nav class="course-toc" aria-label="table of contents">
<ul class="course-toc__list">
<li class="course-toc__item">
<a href="#">First heading</a>
</li>
<li class="course-toc__item">
<a href="#">Second heading</a>
</li>
</ul>
</nav> #}
{% include 'partials/toc-inner.njk' %}
{{ content | safe }}
</main>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/site/_includes/icons/arrow-right.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/site/_includes/macros/icon.njk
@@ -0,0 +1,10 @@
{#
Finds an icon in the _includes/icons folder.
Adds a class="icon" to the icon, as well as any additional classes passed in.
#}
{% macro icon(name, className = '') %}
{% set svg -%}
{% include 'icons/' + name + '.svg' %}
{%- endset %}
{{ svg | updateSvgForInclude('icon ' + className) | safe }}
{% endmacro %}
3 changes: 2 additions & 1 deletion src/site/_includes/partials/head.njk
Expand Up @@ -5,7 +5,8 @@
{# CSS will be injected by purify-css transform. #}
<!-- __PURGECSS_INJECT -->
{% else %}
<link rel="stylesheet" href="/css/main.css">
{# hashForProd() will cache bust the css in dev with a random string. #}
<link rel="stylesheet" href="{{ helpers.hashForProd('/css/main.css') }}">
{% endif %}

{# We only preload Material Icons because the site can't render properly without them. #}
Expand Down
12 changes: 12 additions & 0 deletions src/site/_includes/partials/toc-inner.njk
@@ -0,0 +1,12 @@
{# This is used inline with body contents as the TOC on small screens. #}
{% if tocContents %}
{% from 'macros/icon.njk' import icon with context %}

<details class="course-toc toc flow display-block lg:display-none" data-type="inner" role="navigation" aria-label="Table of contents">
<summary class="display-inline-flex align-center user-select-none">
<div class="course-toc__heading font-google-sans weight-medium">Table of contents</div>
<span class="toc__icon">{{ icon('arrow-right') }}</span>
</summary>
<div class="toc__wrapper flow-recursive">{{ tocContents | safe }}</div>
</details>
{% endif %}
6 changes: 6 additions & 0 deletions src/site/_includes/partials/toc-side.njk
@@ -0,0 +1,6 @@
<nav class="course-toc toc flow scrollbar display-none lg:display-block" data-type="side" aria-label="table of contents">
<div class="course-toc__heading font-google-sans weight-medium">Table of contents</div>
<div class="toc__wrapper flow-recursive">
{{ tocContents | safe }}
</div>
</nav>
14 changes: 13 additions & 1 deletion src/site/content/en/learn/css/borders/index.md
Expand Up @@ -2,4 +2,16 @@
title: Borders
---

Hey we're talking about borders here!
Hey we're talking about borders here!

## Super centered: place-items: center

### What happens if super center doesn't work

### Here's another heading that's shorter

## OK, back to regular headings

## Yet more headings

### Here's another smol boi
1 change: 1 addition & 0 deletions src/styles/components/_all.scss
Expand Up @@ -16,6 +16,7 @@
@import 'callouts';
@import 'checkbox';
@import 'columns';
@import 'course-toc';
@import 'compare';
@import 'cross-links';
@import 'details';
Expand Down

0 comments on commit fac958f

Please sign in to comment.