Overrides explanation

There are several files (with more coming) that you can override easily. This allows you to define "global imports" easily.

What is a "global import?" This is a file that will be included in all posts page. You can override styles using user.css, but if you want to add functionality, like add a subscribe button, or add contributor badges or an author image, you can do that on all pages by adding an override.

The files are:

Pretitle.svelte
Postroll.svelte
Preroll.svelte

These are used in the src/Page.svelte file (and also similarly in the src/Index.svelte file.

This is the code in src/Page.svelte:

  <div
    transition:fade
    class="svekyll-post">

    <Pretitle/>
    
    <div class="svekyll-post-title">{ metadata.title }</div>

    {#if metadata.date}
      <div class="svekyll-date">
        Written on
        { getFormattedDate( new Date(metadata.date)) }
      </div>
    {/if}

    <Preroll/>

    <svelte:component this={Page}/>

    <Postroll/>

  </div>

These files are all empty by default.

If you create a file with the same name in src in your directory, this will override that empty file. You can use this to define a global preroll svelte component, or a postroll, or a pretitle. These will be included in all posts so this is a good way to add a subscriber link, or a banner, or whatever.

An example src/Postroll.svelte file could look like this:

<script>
  import BlogRoll from '$svekyll/BlogRoll.svelte';
  import Subscribe from '$svekyll/Subscribe.svelte';
</script>

<Subscribe/>
<BlogRoll />

That will import a mailing subscriber button, and a blog roll component. You can put whatever you want in there.

Originally the code copied those exact three files in, but this merge request makes it more generic so that anything in there will be copied. You could then import other scripts that your overrides rely upon.