src-routes-blog-[slug].svelte

<script context="module">
  export async function preload({ params, query }) {
    // the `slug` parameter is available because
    // this file is called [slug].svelte
    const res = await this.fetch(`_posts/${params.slug}.md`);

    if (res.status === 200) {
      return { postMd: await res.text() };
    } else {
      this.error(res.status, data.message);
    }
  }
</script>

<script>
  import fm from "front-matter";
  import MarkdownIt from "markdown-it";
  import SvelteMonetization from "svelte-monetization";

  export let postMd;

  const md = new MarkdownIt();

  $: frontMatter = fm(postMd);
  $: post = {
    ...frontMatter.attributes,
    html: md.render(frontMatter.body),
  };

  let isMonetizedGlobal = false;

  function handleProgress(event) {
    console.log(event.detail);
    isMonetizedGlobal = true;
  }

  function handleStart(event) {
    console.log("start event:", event);
  }

  function reloadMe(event) {
    window.location.reload();
  }
</script>

<style>
  /*
		By default, CSS is locally scoped to the component,
		and any unused styles are dead-code-eliminated.
		In this page, Svelte can't know which elements are
		going to appear inside the {{{post.html}}} block,
		so we have to use the :global(...) modifier to target
		all elements inside .content
	*/
  .content :global(h2) {
    font-size: 1.4em;
    font-weight: 500;
  }

  .content :global(pre) {
    background-color: #f9f9f9;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
    padding: 0.5em;
    border-radius: 2px;
    overflow-x: auto;
  }

  .content :global(pre) :global(code) {
    background-color: transparent;
    padding: 0;
  }

  .content :global(ul) {
    line-height: 1.5;
  }

  .content :global(li) {
    margin: 0 0 0.5em 0;
  }
  .virtual-link {
    cursor: pointer;
    font-weight: bold;
  }
</style>

<svelte:head>
  <title>{post.title}</title>
</svelte:head>

<h1>{post.title}</h1>

<SvelteMonetization
  let:isMonetized
  let:isLoading
  on:progress={handleProgress}
  on:start={handleStart}>
  {#if isLoading && !isMonetizedGlobal}
    <div>
      Loading ... if this seems to be taking too long, please <span class="virtual-link" on:click={reloadMe}> reload</span>
    </div>
  {:else if isMonetizedGlobal}
    <div class="content">
      {@html post.html}
    </div>
  {:else}
    <div>
      Web Monetization is not detected! You may only view this content if you
      are web monetized. Please visit <a
        href="https://webmonetization.org/">webmonetization.org</a> to learn more.
      (Such as getting the Coil extension or using a certain browser.)
    </div>
  {/if}
</SvelteMonetization>