i-rebuilt-my-site-using-sapper.mdx
1 --- 2 title: I rebuilt my site using Sapper from scratch 3 date: 2020-10-20 4 description: A post where I explain why I migrate my website using Svelte/Sapper 5 tags: 6 - svelte 7 - website 8 --- 9 10 import Update from "~/components/Update.astro"; 11 12 # Introduction 13 14 Well, I've been trying out Svelte lately and so far I love it. I finally rebuild my site using Sapper. Previously I was using Gatsby, it was an awesome DX but I want to try something new and fresh. 15 16 # Reasons 17 18 ## Why did I rebuild my site? 19 20 Of course, I want to try this new technology called Svelte. If you read my [previous post](https://elianiva.my.id/posts/my-experience-with-svelte), I said that I want to rebuild my website using [Svelte](https://svelte.dev). Using [Sapper](https://sapper.svelte.dev), to be more specific. 21 22 I only use my previous website as a blog. A place where I put some random post with the main reason of "self-documenting". I also found it useful when you learned something new and you try to explain it to someone else. It makes me understand it even better. 23 24 ## Why did I choose Svelte/Sapper? 25 26 I choose Svelte (or Sapper to be more specific) because it's a unique framework. Actually, [Svelte is a language](https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c32185b61934). Why didn't I choose something like Vue/Nuxt? Because it's kinda similar to React/Next in my opinion. 27 28 They both use Virtual DOM while Svelte does not. Svelte converts our app into ideal JavaScript at _build time_, rather than interpreting our application code at _runtime_. 29 30 > Rethinking Reactivity with Svelte 31 32 # My Experience 33 34 ## How was the development experience? 35 36 Well, I came from Gatsby which has _a lot_ of plugins. This time I made it using Sapper which has no plugins. I have to do stuff by myself. It's still a great experience nonetheless. 37 38 Svelte is a new technology, meaning that nvim-lsp most likely doesn't support it (yet). nvim-lsp is a built-in lsp client for a text editor that I use which is [Neovim](https://neovim.io). Thankfully, adding an LSP config for that is quite easy so I made one and opened [a pull request](https://github.com/neovim/nvim-lspconfig/pull/385) for it. 39 40 Because of this project, I also have a chance to tinker around even more with Lua stuff in Neovim which I'll talk about in a different post. 41 42 ## Issues that I encountered 43 44 Initially, I want to use [SCSS](https://sass-lang.com/) instead of plain CSS. As always, nothing goes smoothly in our life. It conflicts with `svelte-image` which throws a bunch of errors. To be fair, it doesn't affect anything, it's just hurt for me to see those errors whenever I start the dev server. I decided to just use the good ol' plain CSS. 45 46 Another issue that I encountered is the table of content. You see, the table of content has a list of links that has an href of a heading ID. At the time of writing this, Sapper has an issue where if an URL has an href of `#heading-id` (started with a hash) then it will go to `/#heading-id` instead of adding the href to the end of the URL like `/posts/slug#heading-id`. This issue is currently being tracked [here](https://github.com/sveltejs/sapper/issues/331). 47 48 The solution for it was quite simple, I just need to add this piece of code (thanks to [this comment](https://github.com/sveltejs/sapper/issues/331#issuecomment-706627790)) on my post layout, and poof, the problem's solved. 49 50 ```javascript 51 import { onMount } from "svelte"; 52 onMount(() => { 53 document.querySelectorAll("a").forEach((a) => { 54 if (!a.hash || !document.querySelectorAll(a.hash).length) return; 55 a.addEventListener("click", (event) => { 56 event.preventDefault(); 57 window.location.hash = event.target.getAttribute("href"); 58 }); 59 }); 60 }); 61 ``` 62 63 You might want to change `document` to something else because if you use `document` then it will change the `a` behaviour of the entire document. You can see mine [here](https://github.com/elianiva/elianiva.my.id/blob/a0c824de5b372ff210a1e3f44d10ef80e2be4190/src/layouts/post.svelte#L340-L356). 64 I also use `decodeURIComponent` to handle Japanese characters. 65 66 I also couldn't make [shiki](https://shiki.matsu.io) work with MDsveX. There's nothing wrong with the default highlighter of MDsveX (which is [prismjs](https://prismjs.com)) but I want to use Shiki because it has the same syntax grammar as VScode and it looks better in my opinion. Though, MDsveX will use Shiki in the future version according to [pngwn's comment](https://github.com/pngwn/MDsveX/issues/139#issuecomment-688478536). 67 68 # Technologies I Use 69 70 ## The core 71 72 I use Sapper (obviously) for this website. Why did I choose Sapper, you might ask. Well, because Sapper supports SSR. Though at the time of writing this, there has been a Svelte Summit and there's a panel where Rich Harris, the creator of Svelte said that Sapper will be discontinued and Svelte will support SSR instead. 73 74 I am so hyped for this. Svelte will also use [Snowpack](https://snowpack.dev) instead of Rollup so it will support Hot Module Reloading. Couldn't wait for it to be released to the Master branch. As of the time of writing this, it's still in a private repo and quite unstable. 75 76 It looks so cool at a first glance. If you want to see it yourself, [there you go](https://www.youtube.com/watch?v=qSfdtmcZ4d0&t=53s). I found a [good article](https://codechips.me/snowpack-svelte-typescript-tailwindcss/) that you might also want to read. 77 78 I have an intention of moving this site to Svelte in the future once it supports SSR. Rich Harris said that the future version of Svelte will be quite similar to Sapper so it won't be a hassle to migrate. 79 80 ## Post and project pages 81 82 I use [MDsveX](https://mdsvex.com) as a source for my post and project page. It's basically like [MDX](https://mdxjs.com/) but for Svelte. I use Markdown on my previous site. I chose MDsveX because of [this talk](https://www.youtube.com/watch?v=Tr9wJYvnA24). It was a great talk, props to Svelte Indonesia community. The talk convinced me enough to use MDsveX instead of plain Markdown. 83 84 I have two separate layouts which are [post layout](https://github.com/elianiva/elianiva.my.id/blob/master/src/layouts/post.svelte) and [project layout](https://github.com/elianiva/elianiva.me/blob/master/src/layouts/project.svelte). If you want to know the differences, just check it out yourself ツ 85 86 ## Stylings 87 88 As I mentioned earlier, I was going to use SCSS but got canceled. I use PostCSS instead to utilize its rich plugin ecosystem. Currently, I use [autoprefixer](https://github.com/postcss/autoprefixer) to prefix all of my CSS and [cssnano](https://cssnano.co/) to minify my CSS. 89 90 ## Optimisation 91 92 I use [svelte-image](https://github.com/matyunya/svelte-image) to lazy load the image for my site. Though, I'm having some issues right now. There's a warning which says 93 94 ``` 95 Cannot process a dynamic value: MustacheTag 96 ``` 97 98 This is caused by passing a variable to `svelte-image` component like this. 99 100 ```html 101 <image src="{src}" /> 102 103 <script> 104 export let src; 105 </script> 106 ``` 107 108 In other words, `svelte-image` doesn't support a dynamic path. I just use `svelte-waypoint` to lazyload my images until this problem got fixed. 109 110 This issue is currently tracked [here](https://github.com/matyunya/svelte-image/issues/6). At the moment, this issue is not possible to fix because of [this reason](https://github.com/matyunya/svelte-image/issues/31#issuecomment-550711822). I really hope this issue will get fixed soon in the future. 111 112 <Update date="2020-11-12"> 113 114 I no longer use svelte-image because for some reason, [sharp](https://github.com/lovell/sharp) made the image filesize bigger even though the resolution is smaller. 115 116 </Update> 117 118 # Resources 119 120 Here are some resources that helped me make this website. Hope you find this useful ツ 121 122 - https://github.com/iamyuu/iamyuu 123 - https://web.dev/ 124 - https://fatihkalifa.com/dark-mode-web 125 - https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ 126 127 # Conclusion 128 129 All in all, I'm glad that finally decided to rebuild my site using Sapper. It was a great experience. I am really looking forward to `svelte@next` release because man, that thing looks so damn cool.