Skip to content

Commit 7bee9c4

Browse files
committed
Adds simple documentation for prerender_multi_page_bundled().
Refs #1.
1 parent c3c430e commit 7bee9c4

1 file changed

Lines changed: 79 additions & 0 deletions

File tree

README.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,85 @@ generate the application as a directory and upload it to a CDN for production
279279
deployments. They could even make a separate `bazel run //my_site:deploy` target
280280
which performs the upload and run it from CI for easy deployments!
281281

282+
### Generating multiple pages
283+
284+
`prerender_page_bundled()` is only capable of generating a single file.
285+
Generating multiple files would require multiple `prerender_page_bundled()`
286+
rules, which could get excessive in certain circumstances. For instance,
287+
generating a page for every post on a blog, would require a
288+
`prerender_page_bundled()` target for every post, which could get out of hand.
289+
290+
To help with this, we can use `prerender_multi_page_bundled()` which allows us
291+
to generate many files all at once! Take this example where we render HTML files
292+
for a bunch of markdown posts in a blog.
293+
294+
```typescript
295+
// my_blog/posts_prerender.ts
296+
297+
import * as fs from 'fs';
298+
import { PrerenderResource } from 'rules_prerender';
299+
import * as md from 'markdown-it';
300+
301+
export default async function* render(): AsyncIterable<PrerenderResource> {
302+
// List all files in the `posts/` directory.
303+
const posts = await fs.readdir(
304+
`${process.env['RUNFILES']}/__main__/my_blog/posts/`,
305+
{ withFileTypes: true },
306+
);
307+
308+
for (const post of posts) {
309+
// Read the post markdown, convert it to HTML, and then emit the file to
310+
// `rules_prerender` which will write it at
311+
// `/post/${post_file_name_with_html_extension}`.
312+
const postMarkdown = await fs.readFile(post, { encoding: 'utf8' });
313+
const postHtml = md.render(postMarkdown);
314+
const htmlName = post.split('.').slice(0, -1).join('.') + '.html';
315+
yield new PrerenderResource(`/posts/${htmlName}`, postHtml);
316+
}
317+
}
318+
```
319+
320+
We can easily execute this at build time like so:
321+
322+
```python
323+
# my_blog/BUILD.bazel
324+
325+
load(
326+
"@npm//rules_prerender:index.bzl",
327+
"prerender_multi_page_bundled",
328+
"web_resources_devserver",
329+
)
330+
331+
# Renders a page for every `posts/*.md` file. Also performs all the bundling and
332+
# merging like `prerender_page_bundled()`, but applied to every generated HTML
333+
# file.
334+
prerender_multi_page_bundled(
335+
name = "prerendered_posts",
336+
# Script to invoke the default export of to generate the page.
337+
src = "posts_prerender.ts",
338+
# Other files needed to generate all the HTML.
339+
data = glob(["posts/*.md"]),
340+
# Plain TypeScript dependencies used by `posts_prerender.ts`.
341+
lib_deps = [
342+
"@npm//rules_prerender",
343+
"@npm//markdown-it",
344+
"@npm//@types/markdown-it",
345+
"@npm//@types/node",
346+
],
347+
)
348+
349+
# Simple server to test out this page. `bazel run` / `ibazel run` this target to
350+
# check out the posts at `/posts/*.html`.
351+
web_resources_devserver(
352+
name = "devserver",
353+
resources = ":prerendered_posts",
354+
)
355+
```
356+
357+
With this, all markdown posts in the `posts/` directory will get generated into
358+
HTML files. Using this strategy, we can scale static-site generation for a large
359+
number of files with common generation patterns.
360+
282361
### Custom Bundling
283362

284363
The previous example automatically bundled all the JavaScript and CSS for a

0 commit comments

Comments
 (0)