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.

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

Replace Jekyll with Eleventy #3652

Merged
merged 21 commits into from Jan 18, 2019
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
69cc9a8
Add eleventy as a static site generator
Munter Jan 3, 2019
6b5c6fb
Code syntax highlighting, header anchors and fix fragment id links
Munter Jan 4, 2019
88beb32
Disable line breaks in paragraphs
Munter Jan 4, 2019
6f82c84
Make date in footer work
Munter Jan 4, 2019
2fef2bf
Remove jekyll completely and describe how to use eleventy
Munter Jan 4, 2019
1d2d0d7
Include missing favicon
Munter Jan 4, 2019
c3d173c
Unify heading fragment identifier slug generation
Munter Jan 4, 2019
e89e5e7
Eliminate default layout partials
Munter Jan 4, 2019
e918a60
Autoformat style.css
Munter Jan 4, 2019
de6cf65
Remove left over jekyll config
Munter Jan 4, 2019
4e184bc
Rework build pipeline to speed things up
Munter Jan 4, 2019
7fbb3b0
Fixed broken fragment identifier link in docs
Munter Jan 4, 2019
caacea9
Add .js extension dotfiles to linting setup. Addresses https://github…
Munter Jan 5, 2019
75c1ed1
Performance improvements. Prefetch google analytics and lazyload images
Munter Jan 5, 2019
a9ddc49
Performance improvements. Preload opencollective fallback avatar
Munter Jan 5, 2019
e46e528
Update docs/api/index.html
outsideris Jan 7, 2019
d615050
Correct docs readme
Munter Jan 9, 2019
4f3ce5a
Fix wrong syntax in Strict-Transport-Security header and added Referr…
Munter Jan 9, 2019
a9ec6fe
Add image type to ppreload of opencollective fallback avatar
Munter Jan 9, 2019
c7840cd
Stop preloading tracking scripts. They mess with the loading order an…
Munter Jan 9, 2019
166317e
Merge branch 'master' into remove-jekyll
boneskull Jan 18, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
44 changes: 44 additions & 0 deletions .eleventy.js
@@ -0,0 +1,44 @@
'use strict';

module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy('docs/css');
eleventyConfig.addPassthroughCopy('docs/js');
eleventyConfig.addPassthroughCopy('docs/images');
eleventyConfig.addPassthroughCopy('docs/CNAME');
eleventyConfig.addPassthroughCopy('docs/_headers');
eleventyConfig.addPassthroughCopy('docs/favicon.ico');

eleventyConfig.addPassthroughCopy('docs/example');
Copy link
Contributor

Choose a reason for hiding this comment

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

Why not just chain these?

  eleventyConfig
    .addPassthroughCopy('docs/css')
    .addPassthroughCopy('docs/js')
    .addPassthroughCopy('docs/images')
    .addPassthroughCopy('docs/CNAME')
    .addPassthroughCopy('docs/_headers')
    .addPassthroughCopy('docs/favicon.ico')
    .addPassthroughCopy('docs/example');

Copy link
Member Author

Choose a reason for hiding this comment

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

I've come to prefer verbosity and ability to easily delete or comment out sections over DRY

Copy link
Member

Choose a reason for hiding this comment

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

maybe an array of filepaths, one per line, then iterate over it? dunno, whatever, not important.

Copy link
Contributor

Choose a reason for hiding this comment

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

Then how about invert them?

[
  'docs/css',
  'docs/js',
  'docs/images',
  'docs/CNAME',
  'docs/_headers',
  'docs/favicon.ico',
  'docs/example'
].forEach(fsEntry => {
  eleventyConfig.addPassthroughCopy(fsEntry);
});

Copy link
Contributor

Choose a reason for hiding this comment

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

Why is "doc/example" not named "doc/examples"?

Copy link
Member Author

Choose a reason for hiding this comment

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

Good question. My best guess is because there's only one

Copy link
Contributor

Choose a reason for hiding this comment

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

No, there are multiple examples...

Copy link
Member

Choose a reason for hiding this comment

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

lol


/* Markdown Plugins */
const markdown = require('markdown-it')({
html: true,
linkify: true
});

markdown.use(require('markdown-it-anchor'), {
slugify: require('uslug'),
permalink: true,
permalinkBefore: true,
permalinkClass: 'direct-link',
permalinkSymbol: '#'
});

markdown.use(require('markdown-it-attrs'), {
leftDelimiter: '{:',
rightDelimiter: '}'
});

markdown.use(require('markdown-it-prism'));

eleventyConfig.setLibrary('md', markdown);

return {
passthroughFileCopy: true,
dir: {
input: 'docs',
includes: '_includes',
output: 'docs/_site'
}
};
};
1 change: 1 addition & 0 deletions .eslintignore
Expand Up @@ -4,3 +4,4 @@ mocha.js
docs/
out/
!lib/mocha.js
!.*.js
5 changes: 3 additions & 2 deletions .eslintrc.yml
Expand Up @@ -21,6 +21,7 @@ overrides:
- package-scripts.js
- karma.conf.js
- .wallaby.js
- .eleventy.js
- bin/*
- lib/cli/**/*.js
- test/node-unit/**/*.js
Expand All @@ -37,8 +38,8 @@ overrides:
globals:
expect: no
- files:
- bin/*
- lib/**/*.js
- bin/*
- lib/**/*.js
plroebuck marked this conversation as resolved.
Show resolved Hide resolved
rules:
no-restricted-globals:
- error
Expand Down
1 change: 0 additions & 1 deletion .gitignore
Expand Up @@ -21,6 +21,5 @@ yarn.lock
*_REMOTE_*
docs/_site
docs/_dist
docs/api
plroebuck marked this conversation as resolved.
Show resolved Hide resolved
out/
.vscode/
1 change: 0 additions & 1 deletion .ruby-version

This file was deleted.

2 changes: 1 addition & 1 deletion .wallaby.js
Expand Up @@ -18,7 +18,7 @@ module.exports = () => {
'package.json',
'test/opts/mocha.opts',
'mocharc.yml',
'!lib/browser/**/*.js',
'!lib/browser/**/*.js'
],
filesWithNoCoverageCalculated: [
'test/**/*.fixture.js',
Expand Down
3 changes: 0 additions & 3 deletions Gemfile

This file was deleted.

63 changes: 0 additions & 63 deletions Gemfile.lock

This file was deleted.

6 changes: 6 additions & 0 deletions docs/.eleventyignore
@@ -0,0 +1,6 @@
README.md
API.md
LICENSE*
.*
_dist/
example/
14 changes: 5 additions & 9 deletions docs/README.md
@@ -1,28 +1,24 @@
# mochajs.org

*So you wanna build the site?*
_So you wanna build the site?_

[mochajs.org](https://mochajs.org) is built using [Jekyll](http://jekyllrb.com), the popular static site generator.
[mochajs.org](https://mochajs.org) is built using [Eleventy](https://www.11ty.io/), a simple static site generator.

## Prerequisites

- Ruby
- RubyGems
- Bundler (`gem install bundler`)
plroebuck marked this conversation as resolved.
Show resolved Hide resolved
- Node.js v6.x or greater

## Development

1. Run `npm install` from working copy root to get Node.js deps.
1. Run `bundle install` to install Jekyll and its dependencies. This may or may not require elevated privileges, depending on your system.
1. To serve the site and rebuild as changes are made, execute `npm start docs.watch`.
1. To rebuild the site *once*, execute `npm start docs`.
1. To rebuild the site _once_, execute `npm start docs`.

### Notes

- The content lives in `docs/index.md`; everything else is markup, scripts, assets, etc.
- This file (`docs/README.md`) should *not* be included in the build.
- `docs/_dist` and `docs/api` are where the deployed site lives. `docs/_site` is essentially a build step. These three directories are *not* under version control.
- This file (`docs/README.md`) should _not_ be included in the build.
- `docs/_dist` and `docs/api` are where the deployed site lives. `docs/_site` is essentially a build step. These three directories are _not_ under version control.
- See `package-scripts.js` for details on what the builds are actually doing; especially see [markdown-magic](https://npm.im/markdown-magic) for how we're dynamically inserting information into `docs/index.md`.

## License
Expand Down
9 changes: 0 additions & 9 deletions docs/_config.yml

This file was deleted.

58 changes: 58 additions & 0 deletions docs/_includes/default.html
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>{{ page.title }}</title>
<link
rel="preload"
href="https://opencollective.com/static/images/user.svg"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="https://www.google-analytics.com/analytics.js"
crossorigin="anonymous"
/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Why are we tracking?

Copy link
Member

Choose a reason for hiding this comment

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

it's useful to have some metrics, otherwise we have no idea how many hits we're getting or where people are from (where to focus future i18n efforts..)

<link rel="preconnect" href="https://stats.g.doubleclick.net" />
Copy link
Contributor

@plroebuck plroebuck Jan 7, 2019

Choose a reason for hiding this comment

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

Why is this here? Are Advertising Features enabled for GA?

Copy link
Contributor

Choose a reason for hiding this comment

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

"stats.g.doubleclick.net" Is one of DoubleClick subdomains used for loading tracking pixels or as an alternative for loading Google Analytics, collecting statistics and data that google uses to analyze and display advertisments.

https://tonnygaric.com/blog/prevent-google-analytics-from-making-requests-to-stats-g-doubleclick-net

Copy link
Member

Choose a reason for hiding this comment

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

no idea, but that can be removed.

we could also drop GA for something like Matomo. It's €9/mo which we could pay for out of the fund. I use it on my personal site and it's bomb.

<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/prism.css" />
<link rel="shortcut icon" href="favicon.ico" />

<!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]-->
</head>

<body>
<header id="_header">
<h1>
<a href="/">
<img
src="/images/mocha-logo.svg"
alt="Mocha"
width="192"
height="192"
/>
</a>
</h1>

<p id="tag"><em>simple</em>, <em>flexible</em>, <em>fun</em></p>
</header>

<main id="content">{{ content }}</main>

<footer>
<span>
<a href="https://mochajs.org">mochajs.org</a> is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
>Creative Commons Attribution 4.0 International License</a
Copy link
Member

Choose a reason for hiding this comment

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

odd formatting

Copy link
Member Author

Choose a reason for hiding this comment

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

I think we have vscode to thank for that one. I'm not entirely converted to vscode yet, so I still get surprised by these weird things and wonder how I can configure it not to do this

Copy link
Member

Choose a reason for hiding this comment

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

formatting is a head-scratcher. various plugins insert themselves as formatters for various languages and/or contexts. I find it helpful to explicitly disable plugins I'm not going to use in the project I'm working on. For example, the cpplint extension decided it wanted to format my JS and wouldn't let the prettier extension do it...

That said, once you get it working, it works well.

>.
<p>
<em>Last updated: {{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}</em>
</p></span
>
</footer>

<script src="js/ga.js" async></script>
Copy link
Contributor

@plroebuck plroebuck Jan 10, 2019

Choose a reason for hiding this comment

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

Tracking still? Who can see the reports?
Think script's supposed to be loaded in "<head>" to be most effective.

Copy link
Member

Choose a reason for hiding this comment

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

It discussed in #3349

</body>
</html>
16 changes: 0 additions & 16 deletions docs/_includes/footer.html

This file was deleted.

17 changes: 0 additions & 17 deletions docs/_includes/head.html

This file was deleted.

11 changes: 0 additions & 11 deletions docs/_includes/header.html

This file was deleted.

17 changes: 0 additions & 17 deletions docs/_layouts/default.html

This file was deleted.

14 changes: 14 additions & 0 deletions docs/api/index.html
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h1>
The JSDoc API dopcumentation will be placed here by the build system
Munter marked this conversation as resolved.
Show resolved Hide resolved
</h1>
</body>
</html>