DEV Community

Create a blog with Sapper & Markdown

Joshua Nussbaum on March 28, 2020

Sapper is a toolkit for creating Svelte apps. It comes with a bunch of conventions baked in to help you get your project up and running quickly. I...
Read full post
Collapse
 
joshnuss profile image
Joshua Nussbaum • • Edited

Bonus: I've added a few branches to the repo

Collapse
 
jssteinberg profile image
Johan •

This helped me! Do you know a way to wrap images from markdown in figure, not p?

Collapse
 
joshnuss profile image
Joshua Nussbaum •

Glad it helped :)

I think the p tag comes from having an empty line before defining the image. It's not the image that causes the p tag.

One workaround is to <figure> tag inside markdown. HTML tags are allowed in markdown.

Otherwise you'll have to look at modifying the markdown parser, or finding one that has a configurable option for this.

Collapse
 
jssteinberg profile image
Johan •

Well the p tag will wrap either only the image, or the image and other inline elements.

Thanks. I was guessing I had to find another parser. markdown-it seems like the most active -- plugin wise ...

Thread Thread
 
joshnuss profile image
Joshua Nussbaum •

Welcome.

Try forking the markdown rollup plugin and switching showdown to markdown-it. That should do it.

Collapse
 
rdricco profile image
renato ricco •

Any suggestion for pagination? Its one of most basic features of a Blog.

Collapse
 
joshnuss profile image
Joshua Nussbaum • • Edited

That is true, pagination is important.

Here's one way to do it:

1) Group posts into pages/chunks inside src/posts.js

// 10 posts per page
export const pages = _.chunk(posts, 10)
Enter fullscreen mode Exit fullscreen mode

2) Inside routes/index.svelte, define a preload function that looks at the query params:

<script context="module">
  import {pages} from '../posts'

  export function preload(page) {
    const index = +(page.query.page || 1)

    return {
      posts: pages[index-1],
      hasMore: pages.length > index + 1,
      page: index
    }
  }
</script>

<script>
  export let posts, hasMore, page
</script>
Enter fullscreen mode Exit fullscreen mode

3) Add conditional next & previous links

{#if page > 1}
  <a href="/?page={page-1}">Previous</a>
{/if}

{#if hasMore}
  <a href="/?page={page+1}">Next</a>
{/if}
Enter fullscreen mode Exit fullscreen mode

Hope that helps!

Collapse
 
rdricco profile image
renato ricco •

Nice! Thank you,

Collapse
 
phonerefer profile image
Irshad Ali •

Can we do this same without sapper.

Collapse
 
joshnuss profile image
Joshua Nussbaum •

Yes. Though sapper and it's replacement svelte-kit make it easier.

One way is to create a vanilla svelte project with a router (tinro?). Then make sure your hosting rewrites routes like /posts/... to /index.html.

Collapse
 
yaldram profile image
Arsalan Ahmed Yaldram •

Thanks subscribed.