Eric Daniels - Home  Blog  About

More Basic Site

Back to basics. This site is now being generated by sgs. I'm finding it simpler to use than my previous site which was based on hugo. Of course this is heavily biased since I just created this tool for creating this exact site; it may work terribly in every other context! Feel free to check the source of this site out at https://github.com/edaniels/erdanielsdotcom. In general, you point sgs at a project directory that will have a config file that contains an entry point, or source file. Using that source file (likely your index.html), sgs will read in the content and allow you to run code in <script>s that contain a compile attribute. These scripts have access to a small sandbox that can instruct sgs where other files live whereby referencing them causes them to be compiled and output to another destination.

Writing a framework in this way allowed me to write the following to get the most recent blog posts for the front page:

<ul id="recent_posts">
<script type="text/javascript" compile>
  content('blog/posts')
    .mostRecent(config.home.blogPostLimit)
    .map(post =>
      $(`<li><a href="${post.baseFileName}.html" compile-ref="${post.relPath}">${post.title}</a> (${new Date(post.date).toLocaleDateString('en-US', {'timeZone': 'UTC'})})</li>`)
    );
</script>
</ul>

The last expression of these scripts replaces the script itself. So in this case, we call content asking for all the content underneath blog/posts. We then get the most recent posts and map them out to list items. The compile-ref attribute in the a instructs sgs that the value of the attribute points to a file that should also be compiled. I admit some of it feels clunky so far but it feels like a decent starting point.