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...
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.