this site
Written on 2022-01-01 by yours truly
So I redid this site again, (and again before that, but that iteration never got anywhere). Thus, the information in this post is outdated.
Not all information in this article belongs to the current website, which is why I this article is called v1. I now use graphcms and vercel instead of just files and github pages, but I think I'll write a new blog post for the current site.
Let's talk about this site for a bit.
It was made using Svelte, Svelte's in-house router SvelteKit, TailwindCSS and its Typography plugin and SvelteMarkdown, a Markdown "converter" for Svelte.
I'm using GitHub Pages to host the site, and as of the time of writing, just including articles in the standard repo. Where I want to go however, is using either a CMS like Graph CMS or Ghost CMS, or just another GitHub repo with the files. I would then use a slug in SvelteKit, but I'm simply not experienced enough with APIs and async JS.
Svelte is awesome. Just writing blocks of HTML, CSS and JavaScript (or HTML + TailwindCSS classes and TypeScript in this site's case) is very natural. React and Vue are more convoluted, and I'm not ready for them yet. I've been doing a lot with web development for a while now, but barely know anything when it comes to async and other intermediate level JavaScript concepts.
SvelteKit is Sapper's successor. They're both pretty simple routers for Svelte. It uses Vite under the hood and makes the development expierence incredibly quick and nice.
A markdown compiler for Svelte. It does what the name suggests: you give it a markdown source string, and it compiles it to HTML and does this with a Svelte component. Example:
<script>
import SvelteMarkdown from 'svelte-markdown';
const source = '# This is a title! This article is about the title.';
</script>
<section class="prose">
<SvelteMarkdown {source} />
</section>
You simply cannot talk about quick and nice developer experience without name-dropping Tailwind; I don't know how I could stand writing websites with CSS before. Even with SASS, CSS is a nightmare. Powerful yet simple, yes, but once Tailwind's got ya hooked, you cannot go back. Since I'm 15 and this schoolyear's my first year of being in computer sience class, I get to help people making websites for the first time. That's lovely, but actually writing CSS again is "even wennen" as we say here in the Netherlands (which means that it took a while to get used to).
Besides vanilla Tailwind, I'm using the Typography plugin. This means I have access to prose classes.
These deliver sane defaults for HTML blocks. It might look like this for example (with using SvelteMarkdown):
<script>
import SvelteMarkdown from "svelte-markdown"
const source = "# This is a title!"
</script>
<section class="prose prose-sm prose-a:text-emerald-500">
<SvelteMarkdown {source} />
</section>
Markdown is rather simple: it's plain text with some symbols for markup. For instance, you make some text a heading by putting a # in front of it, or make a list using - for all the elements, like this (but you can do more than this!):
# A markdown example
This is some **markdown**.
You can do a lot with it!
- ordered and unordered lists
- **bold text**
- _italic text_
- headings with #
- hr elements with ---
- [hyperlinks](https://tristanlukens.github.io)
- 
Pretty cool right?
## Readability
You don't need a markdown processor for the text to be readable, which
is where markdown really shines. This is perfectly readable!
I'm planning to do a whole article on markdown one day!
GitHub Pages is a service which you can use to host a website for free #notsponsored. I'm building my SvelteKit app and pushing it to GitHub (like how [this](https://blog.stranianelli.com/sveltekit-et-github pages-english/) article says) and it's pretty much flawless.
This might be the second version, but it will definately not be the last iteration. I'm still not using slugs and want to fully understand Svelte and JS before I try again, but I'm pretty happy with how I did things this time around.
As you can see on GitHub I now have a Svelte Store with an array of objects with data about blog articles, but everytime I'm writing a new one I'm create a new object in the array and creating a new page with Article component in src/routes/blog/post/ which is an inefficient way of doing things. I want to use [slugs], which have to do with dynamic routing. I took a good look at the SvelteKit docs about dynamic routing and came to the conclusion I just need to stick to how I was doing things before for now :)
Thank you for reading!
I just decided I'm going to put an emoji of the article at the bottom of every one from now on, so see if you can collect 'em all.
Happy new year btw.
š„°