DEV Community

Discussion on: Svelte + Sapper + Netlify CMS

View post

Replies for: Hi, thnx for your elaborate explaination, it very insightfull for a beginner like me. Do you have a code snippet for this proposed solution ? I can...

 
jayswaan profile image
JaySwaan •

For sure, here's the exact code I use to avoid the JSON error in a live Netlify + Sapper project. In this code I'm pulling in all posts through the prefetch and filtering, for me the filter was preventing Sapper from rendering any blog routes that were not loaded somewhere else. I put this code in the same file where my filter is but it can go in any .svelte file.

<div class="sr-only">
<!--You can iterate over the links from your preload fetch of posts-->
  {#each posts as { slug, title }}
      <a rel="prefetch" href="blog/{ slug }">{title}</a>
  {/each}
<!--And manually put any links that are breaking as well (it means Sapper doesn't think you're using them)-->
<a rel="prefetch" href="/someotherpage">Some page name for screen readers (nobody else sees it)</a>
</div>
Enter fullscreen mode Exit fullscreen mode

I'm using the class sr-only to hide from everyone but screen readers, there are plenty options for this class but the flavor I use in my global css is this.

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
Enter fullscreen mode Exit fullscreen mode

You might also want to put a heading on top of that list of links so it's not confusing for screen readers.