-
diff --git a/src/lib/components/posts/code.svelte b/src/lib/components/posts/code.svelte
deleted file mode 100644
index ca9e2d4..0000000
--- a/src/lib/components/posts/code.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-{#if $$props["data-mdx-pretty-code"]}
-
-{:else}
-
-{/if}
diff --git a/src/lib/components/posts/span.svelte b/src/lib/components/posts/span.svelte
deleted file mode 100644
index fd3b614..0000000
--- a/src/lib/components/posts/span.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-{#if $$props["data-mdx-pretty-code"]}
-
-{:else}
-
-{/if}
\ No newline at end of file
diff --git a/src/lib/components/split.svelte b/src/lib/components/split.svelte
deleted file mode 100644
index fece042..0000000
--- a/src/lib/components/split.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/src/lib/layouts/post.svelte b/src/lib/layouts/post.svelte
index 1fe5a77..9e2b483 100644
--- a/src/lib/layouts/post.svelte
+++ b/src/lib/layouts/post.svelte
@@ -1,14 +1,11 @@
-{#if browser}
- *I seem to like storytelling a bit too much.*
-
-
-
-
-{/if}
-
> I really do enjoy reading blog posts like these, so I figured I'd try writing few of my own as well. I hope you'll enjoy it, if so, leave a comment below.
-{#if story}
- I first started programming with PHP. Some of it's syntax felt clunky and unnatural, sometimes plainly annoying (why do I have to prefix each variable with `$` when it understands constants without `$` just fine?). I don't really like the language now after learning other languages, but I do like some parts of it, like how it's easy to loop over an array or that it has multiple programming paradigms, from functional to OOP to traits (which I learnt about much later after I stopped using PHP).
+I first started programming with PHP. Some of it's syntax felt clunky and unnatural, sometimes plainly annoying (why do I have to prefix each variable with `$` when it understands constants without `$` just fine?). I don't really like the language now after learning other languages, but I do like some parts of it, like how it's easy to loop over an array or that it has multiple programming paradigms, from functional to OOP to traits (which I learnt about much later after I stopped using PHP).
- I later moved to JS which looked a lot like C, which I saw everywhere.
+I later moved to JS which looked a lot like C, which I saw everywhere.
- I also did few projects with Java and C#, but I always returned to JS afterwards.
+I also did few projects with Java and C#, but I always returned to JS afterwards.
- I also tried learning C (and C++), and although I did have a certificate about both of them on Sololearn (I no longer have the C++ one as they added new lessons), I never really used them outside, as everything seemed way to complicated.
+I also tried learning C (and C++), and although I did have a certificate about both of them on Sololearn (I no longer have the C++ one as they added new lessons), I never really used them outside, as everything seemed way to complicated.
- Fast RAM access is cool and all, but why do I have to use `free`? Why can't it know that if I go outside the scope it should free the memory?
+Fast RAM access is cool and all, but why do I have to use `free{:c}`? Why can't it know that if I go outside the scope it should free the memory?
- So I always went just back to programming in JS where I didn't have to think about memory. And IO-bound stuff isn't really slowed down by V8 now anyway.
-
-{/if}
+So I always went just back to programming in JS where I didn't have to think about memory. And IO-bound stuff isn't really slowed down by V8 now anyway.
## Actually learning Rust
-{#if story}
- Then I heard about this small language developed by Mozilla, which won StackOverflow's most loved language for multiple years, even surpassing Typescript which I loved for it's type-safety (`Hello undefined! Goodbye null`). So I figured I'd give it a try.
-
-{/if}
+Then I heard about this small language developed by Mozilla, which won StackOverflow's most loved language for multiple years, even surpassing Typescript which I loved for it's type-safety (`Hello undefined! Goodbye null`). So I figured I'd give it a try.
### Resources
-{#if story}
- One of the things I had problems with was finding good resources that are easy to understand and short. I don't like youtube videos, I'd much rather read a content I can quickly skim, or read on my way without eating up my limited data plan.
-
-{/if}
+One of the things I had problems with was finding good resources that are easy to understand and short. I don't like youtube videos, I'd much rather read a content I can quickly skim, or read on my way without eating up my limited data plan.
Here's a list of resources I found useful:
- [rust book](https://doc.rust-lang.org/book/) - an online book with short chapters about common things people want to do with Rust
@@ -245,14 +226,14 @@ An interesting quirk is that you can use `(){:rust}` (empty tuple) to return "vo
#### Common structs
-##### Option<T>
+##### Option<T>
Is an enum (we'll get to how `enum{:rust}`s work later. They're kind of different from other languages) with either **`Some(T){:rust}` or `None{:rust}`** values.
To get the value, you can use **[`match{:rust}`](#match)** like with other enums, or use **`.unwrap(){:rust}`** (which will panic if it's `None{:rust}`).
See also [Declaring enums](#declaring-enums).
-##### Result<T, E>
+##### Result<T, E>
Similar to `Option{:rust}`, but used to handle errors (commonly returned by
IO methods).
It's values are either `Ok(T){:rust}` or `Err(E){:rust}`.
@@ -269,7 +250,7 @@ fn example() -> Result<(), Error> { // An Error type. For simplicity, you can us
If a function can error out, use `Result{:rust}` instead of `panic{:rust}`s - `panic{:rust}` cannot be easily handled and should only be used for catastrophic irrecoverable errors (or when your too lazy to implement proper error handling using `Result{:rust}` for pet projects).
-##### Vec<T>
+##### Vec<T>
`Vec{:rust}`tors are growable arrays whose values are stored on the heap.
@@ -279,7 +260,7 @@ Javascript arrays behave sort of like `Vec{:rust}` - they have a set limit, and
`Vec` stores it's current size, it's reserved size, and an array of pointers to `Box{:rust}`ed values. Meaning, there's no need (and in fact hurts performance) to do `Vec
>{:rust}`.
-##### Box<T>
+##### Box<T>
Stores `T` on heap. Useful for using [`enum`s](#declaring-enums) in structs, or to free up stack space.
@@ -312,7 +293,7 @@ struct Something = u8; // a single value
```
As stated earlier, `struct` **sizes are static**. This means you cannot use [`enum{:rust}`s](#declaring-enums) with self-referencing (recursive) values directly in `struct{:rust}`s.
-One of possible ``workarounds'' is to use the [heap](#heap-vs-stack) for actually storing the values, for example by using [Box<T>](#boxlttgt).
+One of possible ``workarounds'' is to use the [heap](#heap-vs-stack) for actually storing the values, for example by using [Box<T>](#boxlttgt).
```rust
struct Something {
@@ -331,10 +312,7 @@ struct MaybeRecursive {
}
```
-{#if story}
- This is something I hit when trying to create an abstract syntax tree for my shell.
-
-{/if}
+This is something I hit when trying to create an abstract syntax tree for my shell.
To instantiate the struct, use the following notation (kind of similar to defining arrays in C#):
@@ -782,6 +760,6 @@ let var = "something";
---
-Thanks for reading this {story ? "little story (with some documentation)" : "post"}. Hope that you learned something (which I did, even during writing of this post).
+Thanks for reading this post. Hope that you learned something (which I did, even during writing of this post).
*no crabs were harmed in the making of this post. I'm not affiliated with any of the mentioned products or companies.*
diff --git a/src/routes/posts/writing-personal-home-page/+page.md b/src/routes/posts/writing-personal-home-page/+page.md
index 7e8e3f2..718c1a7 100644
--- a/src/routes/posts/writing-personal-home-page/+page.md
+++ b/src/routes/posts/writing-personal-home-page/+page.md
@@ -47,15 +47,16 @@ pnpm init svelte@next
```
-
+
- *(side note: I'm using [pnpm](https://pnpm.io) as it's a faster alternative to npm which also saves disk space)*
-
-
+*(side note: I'm using [pnpm](https://pnpm.io) as it's a faster alternative to npm which also saves disk space)*
+
+
+
+[pnpm](https://pnpm.io) uses [symlinks](https://en.wikipedia.org/wiki/Symbolic_link) to store each dependency exactly once on disk
+(symlinks, symbolic links, are a sort of alias to files), which makes it use less storage. In addition, it's faster and has better
+monorepo support.
- [pnpm](https://pnpm.io) uses [symlinks](https://en.wikipedia.org/wiki/Symbolic_link) to store each dependency exactly once on disk
- (symlinks, symbolic links, are a sort of alias to files), which makes it use less storage. In addition, it's faster and has better
- monorepo support.
This creates a new [Svelte Kit](https://kit.svelte.dev) project, by first asking for configuration (i.e. if you want typescript, ESLint and/or prettifier) and then initalizing from a template.
@@ -98,7 +99,7 @@ An example component:
As you can see, little code is needed to achieve simple synchronization between text input, variable and title.
-The `bind:` feels almost like magic. Coming from React's `onValueChanged={(value) => this.setState({ value })}`, I immediately fell in love and stopped using React. Now React feels kind of clunky in comparison to me.
+The `bind:` feels almost like magic. Coming from React's `onValueChanged={(value) => this.setState({ value })}{:js}`, I immediately fell in love and stopped using React. Now React feels kind of clunky in comparison.
Another part of the `bind:` directive is that it's bi-directional - `input` doesn't have sole ownership of it, and will change it's contents when `name` changes outside of it, like so:
@@ -120,7 +121,7 @@ I personally always prefer dark mode, but I know many people that like light mod
You can try toggling to {$darkmode ? "light" : "dark"} mode using the button on the navigation bar in top right, or using this:
-
+
Instead of writing how to use Svelte here, **I'd recommend trying their excellent interactive tutorial [here](https://svelte.dev/tutorial)**.
diff --git a/static/global.css b/static/global.css
index 9706b7c..34b171e 100644
--- a/static/global.css
+++ b/static/global.css
@@ -10,16 +10,15 @@ html, body {
}
body {
- color: #333;
+ /* color: #333; */
margin: 0;
box-sizing: border-box;
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
- transition: color .3s, background-color .3s;
+ background-color: #110F1A;
+ color: rgb(191, 191, 191) !important;
}
body.dark {
- background-color: #1f1f1f;
- color: rgb(191, 191, 191);
}
h1 {
diff --git a/static/screenshots/haxagon.png b/static/screenshots/haxagon.png
new file mode 100644
index 0000000..2c6a556
Binary files /dev/null and b/static/screenshots/haxagon.png differ
diff --git a/static/screenshots/haxagon.webp b/static/screenshots/haxagon.webp
new file mode 100644
index 0000000..a2b9648
Binary files /dev/null and b/static/screenshots/haxagon.webp differ
diff --git a/svelte.config.js b/svelte.config.js
index 1453e7e..3790684 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,14 +1,5 @@
import adapter from '@sveltejs/adapter-static';
-import { mdsvex } from 'mdsvex';
-import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypeSlug from 'rehype-slug';
-import remarkMath from 'remark-math';
-import remarkTwemoji from 'remark-twemoji';
-import remarkGfm from 'remark-gfm';
-import remarkExtendedTable from 'remark-extended-table';
-import rehypeKatexSvelte from "rehype-katex-svelte";
-import { prettyCode } from './remark/code.js';
-import { rehypeEscapeHighlight, remarkEscapeInlineCode, remarkUnescapeHighlight } from './remark/unescapehighlight.js';
+import { mdsvexrs } from 'mdsvexrs'
/** @type {import('@sveltejs/kit').Config} */
const config = {
@@ -24,32 +15,7 @@ const config = {
extensions: ['.svelte', '.md'],
preprocess: [
- mdsvex({
- extensions: ['.md'],
- layout: {
- _: "./src/lib/layouts/post.svelte"
- },
- smartypants: {
- quotes: false,
- backticks: "all"
- },
- highlight: false,
- rehypePlugins: [
- rehypeSlug,
- rehypeAutolinkHeadings,
- rehypeKatexSvelte,
- rehypeEscapeHighlight
- ],
- remarkPlugins: [
- remarkGfm,
- remarkMath,
- remarkTwemoji,
- remarkExtendedTable,
- remarkUnescapeHighlight,
- prettyCode,
- remarkEscapeInlineCode
- ]
- })
+ mdsvexrs({ layout: "$lib/layouts/post.svelte", customTags: ['a'] })
]
};
diff --git a/windi.config.js b/windi.config.js
index 54afaa2..c9b29ea 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -7,7 +7,15 @@ export default defineConfig({
extend: {
colors: {
github: "#fafafa",
- discord: "#7289da"
+ discord: "#7289da",
+ 'primary-dark': '#242038',
+ primary: '#9067C6',
+ bg: '#110F1A',
+ 'bg-code': '#100d11',
+ success: '#7CEEC8'
+ },
+ fontFamily: {
+ mono: "'Fira Code VF', 'Fira Code', monospace"
}
}
},