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
chore: avoid generating subdirectories for each page on new docs site #15967
Changes from 4 commits
ff722ab
1e2a42c
587511f
c5ba8c1
59c867b
8f6793a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,10 +19,10 @@ module.exports = function(eleventyConfig) { | |
* The site is loaded from /docs on eslint.org and so we need to adjust | ||
* the path prefix so URLs are evaluated correctly. | ||
* | ||
* The path prefix is turned off for deploy previews so we can properly | ||
* The path prefix is turned off for `npm start` and deploy previews so we can properly | ||
* see changes before deployed. | ||
*/ | ||
const pathPrefix = process.env.CONTEXT === "deploy-preview" ? "" : "/docs"; | ||
const pathPrefix = ["local-serve", "deploy-preview"].includes(process.env.CONTEXT) ? "" : "/docs"; | ||
|
||
//------------------------------------------------------------------------------ | ||
// Filters | ||
|
@@ -91,6 +91,19 @@ module.exports = function(eleventyConfig) { | |
return markdown.render(value); | ||
}); | ||
|
||
/* | ||
* Removes `.html` suffix from the given url. | ||
* `page.url` will include the `.html` suffix for all documents | ||
* except for those written as `index.html` (their `page.url` ends with a `/`). | ||
*/ | ||
eleventyConfig.addFilter("prettyURL", url => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I’m concerned about this approach. I don’t think it’s at all clear where we should and should not be using this filter, and I fear this will cause more errors in the future. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The rule would be to use this filter in all places where If you have an idea for another approach, I could try it. We could maybe write the files without |
||
if (url.endsWith(".html")) { | ||
return url.slice(0, -".html".length); | ||
} | ||
|
||
return url; | ||
}); | ||
|
||
//------------------------------------------------------------------------------ | ||
// Plugins | ||
//------------------------------------------------------------------------------ | ||
|
@@ -345,6 +358,30 @@ module.exports = function(eleventyConfig) { | |
|
||
// END, eleventy-img | ||
|
||
//------------------------------------------------------------------------------ | ||
// Settings | ||
//------------------------------------------------------------------------------ | ||
|
||
/* | ||
* When we run `eleventy --serve`, Eleventy 1.x uses browser-sync to serve the content. | ||
* By default, browser-sync will not serve `foo/bar.html` when we request `foo/bar`. | ||
* Thus, we need to specify "html" in `server.serveStaticOptions.extensions` so that | ||
* pretty links without `.html` can work in a local development environment. | ||
* | ||
* Note that eleventy is doing a shallow merge into its own browser-sync config, | ||
* so this will unfortunately completely overwrite `server` settings. | ||
* https://github.com/11ty/eleventy/blob/v1.0.1/src/EleventyServe.js#L78-L91 | ||
* Therefore, we also have to specify `baseDir` here. | ||
*/ | ||
eleventyConfig.setBrowserSyncConfig({ | ||
server: { | ||
baseDir: "_site", | ||
serveStaticOptions: { | ||
extensions: ["html"] | ||
} | ||
} | ||
}); | ||
|
||
|
||
return { | ||
passthroughFileCopy: true, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,7 +14,7 @@ | |
"watch:eleventy": "eleventy --serve --port=2023", | ||
"build:sass": "sass --style=compressed src/assets/scss:src/assets/css --no-source-map", | ||
"build:eleventy": "npx @11ty/eleventy", | ||
"start": "npm-run-all build:sass --parallel watch:* --parallel images", | ||
"start": "cross-env CONTEXT=local-serve npm-run-all build:sass --parallel watch:* --parallel images", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As mentioned earlier, let's leave this as-is. |
||
"build": "npm-run-all build:sass --parallel build:* --parallel images" | ||
}, | ||
"devDependencies": { | ||
|
@@ -24,6 +24,7 @@ | |
"@11ty/eleventy-plugin-rss": "^1.1.1", | ||
"@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2", | ||
"algoliasearch": "^4.12.1", | ||
"cross-env": "^7.0.3", | ||
"dom-parser": "^0.1.6", | ||
"eleventy-plugin-nesting-toc": "^1.3.0", | ||
"eleventy-plugin-page-assets": "^0.3.0", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
{ | ||
"layout": "components.html", | ||
"permalink": "/component-library/{{ page.fileSlug }}/index.html" | ||
"permalink": "/component-library/{{ page.fileSlug }}.html" | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"permalink": "{{ page.filePathStem }}.html" | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should use the
pathPrefix
locally too, otherwise, we won't be able to tell when theurl
filter isn't used. The way I set it up was so that these errors would be obvious locally because we won't get them in deploy preview.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I couldn't make it work (see the third point in "What changes did you make" in the original post). I'll see if the browser-sync config override can be done differently.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Huh. I haven’t had any trouble since I first added pathPrefix. Eleventy generates an index.html file at the root that redirects to /docs and then everything works perfectly for me. I’m using the same setup on the playground.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Eleventy's built-in server returns the content of
foo/index.html
when we requestfoo/
, but it doesn't return the content offoo/bar.html
when we requestfoo/bar
, which is what we'll have after this change. It needs some additional configuration.Without pathPrefix, it works well when I add
serveStaticOptions: { extensions: [ 'html' ] }
to the config that eleventy passes into the underlying server.With pathPrefix, for some reason it doesn't work.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried with rewriting URLs instead of configuring the server. That seems to work well so I restored pathPrefix for local development.