The next milestone for Phantomake is to use it to generate my own personal site, which was previously using Lektor as its generator.
One of my major goals with Phantomake is that you can run it on an existing static site and get the same site back as output, unchanged. This is so you can progressively introduce it to your site instead of having to port everything over before seeing proper output.
To support this, Phantomake detects how to process a file based on it's file name and path:
- Anything with dot directories (a directory with
.as the first letter in its name) is not output. - Anything with an
.mdextension will be parsed as markdown, transformed into HTML, and output as the same file with a.htmlextension. - Anything with an
.ejsextension will be parsed as an EJS template, rendered, and output without the.ejsextension (i.e. if you want to generate an HTML file, you'd name itfilename.html.ejs). In particular, this will allow you to generate non-HTML files like an atom or RSS feed using EJS. - Any text files with YAML frontmatter will have the frontmatter parsed and removed. This allows non-EJS and non-Markdown files to have templates applied to them.
- Anything not covered by the above is copied to the output without modification.
My blog directory has an index.html.ejs file for the blog listing page, and directories with index.md files within them for each post. The listing looks like this:
---
title: Blog
template: default
---
<% const paginator = ctx.paginate(ctx.getFiles('./*/index.md', {sort: {attribute: 'date', type: 'date', order: 'desc'}}), {itemsPerPage: 5}) %>
<% for (const file of paginator.items) { %>
<div class="blog-post">
<%- include('../.templates/blog-header.ejs', { url: file.url, attributes: file.attributes }) %>
<%- ctx.renderMarkdown(file.body) %>
</div>
<% } %>
<p>Pages</p>
<div>
<% for (const page of paginator.pages) { %>
<% if (paginator.currentPage === page.number) { %>
<span class="page-number selected"><%- page.number %></span>
<% } else { %>
<a class="page-number" href="<%- page.url %>"><%- page.number %></a>
<% } %>
</span>
<% } %>
</div>
- The
ctx(context) object has some helper functions on it, notablyctx.paginate. When you usectx.paginatein a file, it will split the list of items you pass to it into pages and generate a separate file for each page by appending a page number to the filename. For example, if the file above was namedblogposts.html.ejsand there were 11 blog posts, the output would beblogposts.html,blogposts2.html, andblogposts3.html.
With the blog posts ported over, all I have left is to port over my music pages. Once that's done, the only blockers to having other folks test Phantomake is automating builds, making a small download page, and writing some bare-minimum docs on how to use it. So close!
