feat: icons and 18n support

package.json

@@ -42,6 +42,7 @@
     "tslib": "^2.5.3",
     "typesafe-i18n": "^5.24.3",
     "typescript": "^5.1.3",
+    "unplugin-icons": "^0.17.0",
     "vite": "^4.3.9"
   },
   "dependencies": {

src/lib/components/Header.svelte

@@ -2,14 +2,47 @@
   import { onMount } from 'svelte';
 
   import LL, { setLocale } from '$i18n/i18n-svelte';
-  import Translate from '$lib/components/icons/Translate.svelte';
-  import Moon from '$lib/components/icons/Moon.svelte';
-  import Sun from '$lib/components/icons/Sun.svelte';
+  import Globe from '~icons/custom/globe';
+  import Home from '~icons/custom/home';
+  import Moon from '~icons/custom/moon';
+  import Repo from '~icons/custom/repo';
+  import Sun from '~icons/custom/sun';
   import { page } from '$app/stores';
   import { replaceLocaleInUrl } from '$lib/utils/locale';
 
   import type { Locales } from '$i18n/i18n-types';
 
+  const LINKS = [
+    {
+      icon: Home,
+      text: $LL.LAYOUT.NAV.HOME(),
+      href: `/${$page.params.lang}`,
+    },
+    {
+      icon: Repo,
+      href: `/${$page.params.lang}/notes`,
+      text: $LL.LAYOUT.NAV.NOTES(),
+    },
+  ];
+
+  const LANGS: {
+    text: string;
+    locale: Locales;
+  }[] = [
+    {
+      text: 'Español',
+      locale: 'es',
+    },
+    {
+      text: 'English',
+      locale: 'en',
+    },
+    {
+      text: 'Magyar',
+      locale: 'hu',
+    },
+  ];
+
   let useDarkMode = false;
   let isLangMenuOpen = false;
 
@@ -40,8 +73,12 @@
     }
   }
 
-  function toggleLanguageMenu(): void {
-    isLangMenuOpen = !isLangMenuOpen;
+  function openLanguageMenu(): void {
+    isLangMenuOpen = true;
+  }
+
+  function closeLanguageMenu(): void {
+    isLangMenuOpen = false;
   }
 
   function changeLanguage(locale: Locales): void {
@@ -54,6 +91,7 @@
 
     const next = replaceLocaleInUrl($page.url, locale);
     setLocale(locale);
+    closeLanguageMenu();
     window.location.href = next;
   }
 </script>
@@ -72,16 +110,69 @@
           style="color: transparent;"
         />
       </a>
-      <nav>
-        <ul class="flex items-center space-x-4">
+      <div class="flex items-center space-x-4">
+        <nav>
+          <ul class="flex items-center space-x-4">
+            {#each LINKS as { href, text, icon }}
+              <li>
+                <a class="flex items-center justify-center" {href}>
+                  <figure class="mr-2">
+                    <svelte:component this={icon} class="w-4 h-4" />
+                  </figure>
+                  {text}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </nav>
+        <ul class="flex items-center space-x-2">
           <li>
-            <a href="/{$page.params.lang}"> {$LL.LAYOUT.NAV.HOME()} </a>
+            <button
+              class="p-2 rounded-md"
+              type="button"
+              on:click={toggleDarkMode}
+            >
+              {#if useDarkMode}
+                <Sun class="w-5 h-5" />
+              {:else}
+                <Moon class="w-5 h-5" />
+              {/if}
+            </button>
           </li>
           <li>
-            <a href="/{$page.params.lang}/notes"> {$LL.LAYOUT.NAV.NOTES()} </a>
+            <button
+              class="p-2 rounded-md"
+              type="button"
+              on:click={openLanguageMenu}
+            >
+              <Globe class="w-5 h-5" />
+            </button>
           </li>
         </ul>
-      </nav>
+      </div>
     </div>
   </div>
 </header>
+
+{#if isLangMenuOpen}
+  <div
+    class="bg-gray-600/80 flex justify-center items-center h-screen w-screen fixed top-0 left-0"
+  >
+    <div class="text-white bg-gray-800 rounded-md p-4 w-[300px] space-y-4">
+      <span class="block text-center text-lg">Choose language</span>
+      <ul class="space-y-4">
+        {#each LANGS as { locale, text }}
+          <li>
+            <button
+              class="p-4 hover:bg-gray-400 bg-gray-600 w-full rounded-md"
+              type="button"
+              on:click={() => changeLanguage(locale)}
+            >
+              {text}
+            </button>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+{/if}

src/lib/components/Tag.svelte

@@ -5,5 +5,5 @@
 <span
   class="inline-block border border-2 rounded-full text-xs py-1 px-4 text-center dark:text-white"
 >
-  <span class="capitalize">{title}</span>
+  <span class="lowercase">{title}</span>
 </span>

src/mdsvex/moving-into-orbstack/en.svx

@@ -0,0 +1,110 @@
+---
+title: "Moving into OrbStack after a year using Rancher Desktop"
+description: "A primer on Git repositories, commits & branches"
+categories: [kubernetes, docker, rancher, orbstack, client, macos]
+icon: docker
+date: 2023-08-29
+preview_image_url: "https://images.unsplash.com/photo-1598056036946-3cfa8493bfdf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=1"
+published: true
+---
+
+Almost a year ago I started using Rancher Desktop as my Docker and Kubernetes
+client. I enjoy the fact that I didn't need to know a lot about Kubernetes to
+easily jump into spinning up clusters, configure port fowarding and manage pods.
+
+## Uninstalling Rancher Desktop on macOS
+
+Clean up any remaining Docker Containers and Volumes using the `system prune`
+subcommand.
+
+```bash
+docker system prune --all --volumes --force
+```
+
+```bash
+# -- snip --
+pog7t3hmzcyurdvypx2fgoq7u
+w8t2eav93yh12w0p9qaghdg5u
+uh5vhr6tjhv73boiqo8d7bvur
+nsm2ohhywv95uqk9bx2hcgpwb
+yyt452o7gjp9xxmwu7djd1efc
+n3ni6ght2y7pd011modusutep
+
+Total reclaimed space: 21.376GB
+```
+
+> This command cleaned up around 20 GBs of disk from my system.
+
+Then, make sure Rancher Desktop is not running anymore, you can do this by
+clicking on the Rancher Desktop icon on the status bar and then clicking on
+the `Quit Rancher Desktop` option.
+
+After making sure we dont have more Docker Containers running, we are good to
+go and its time to delete the application from the `~/Applications` directory.
+
+![Move Application to Trash](/images/notes/010-applications.png)
+
+After deleting the Application Package, you will also want to delete remaining
+files, most macOS applications store files in other system directories, such as
+caches, logs, preferences and other user data.
+
+These files lives on `~/Library` directory, search for relevant files with a
+path starting with `rancher-desktop`.
+
+If you attempt to find any file containing `rancher-desktop` like this:
+
+```bash
+find ~/Library -name "rancher-desktop"
+```
+
+You will encounter lots of `Operation not permitted` messages:
+
+```bash
+find: ~/Library/Application Support/CallHistoryTransactions: Operation not permitted
+find: ~/Library/Application Support/com.apple.sharedfilelist: Operation not permitted
+find: ~/Library/Application Support/Knowledge: Operation not permitted
+```
+
+Instead you can use `open ~/Library` and navigate from there using the macOS
+Finder.
+
+![Application Support](/images/notes/010-app-support.png)
+
+Also check for the `Caches` directory under `~/Library/Application Support/Caches`
+
+![Caches](/images/notes/010-app-support-caches.png)
+
+Another directory you should clean is `~/Library/Preferences`, there you will
+find a directory and a `plist` file.
+
+![Preferences](/images/notes/010-preferences.png)
+
+Logs is another place to search as well.
+
+![Logs](/images/notes/010-logs.png)
+
+## Enter OrbStack
+
+You can download OrbStack from the official website visiting [docs.orbstack.dev/quick-start][1],
+or using Homebrew!
+
+```bash
+brew install orbstack
+```
+
+And here is when the fun begins, OrbStack will allow you to spin up Linux
+Machines or Docker. But the great thing is that you can do both and you won't
+need a Linux machine to run containers!
+
+![OrbStack Linux](/images/notes/010-orbstack-linux.png)
+
+> Back in Rancher Desktop, I had a [QEMU][2] instance running, eating 40%-60% of
+> my CPU, sometimes just to spin up a PostgreSQL instance.
+
+You can list running containers and manage Linux VMs just by clicking a couple
+buttons, its super fast and easy to use, that without mentioning the native macOS GUI.
+
+![OrbStack Home](/images/notes/010-orbstack-home.png)
+
+[1]: https://docs.orbstack.dev/quick-start
+[2]: https://www.qemu.org

static/db/notes_index.json

@@ -11,6 +11,25 @@
     },
     "slug": "http-server-with-rust"
   },
+  {
+    "meta": {
+      "title": "Moving into OrbStack after a year using Rancher Desktop",
+      "description": "A primer on Git repositories, commits & branches",
+      "icon": "docker",
+      "date": "2023-08-29",
+      "preview_image_url": "https://images.unsplash.com/photo-1598056036946-3cfa8493bfdf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=1",
+      "published": true,
+      "categories": [
+        "kubernetes",
+        "docker",
+        "rancher",
+        "orbstack",
+        "client",
+        "macos"
+      ]
+    },
+    "slug": "moving-into-orbstack"
+  },
   {
     "meta": {
       "title": "Rust and its General Purpose Nature",

static/icons/source.txt

@@ -0,0 +1 @@
+https://primer.style/design/foundations/icons

tsconfig.json

@@ -24,6 +24,8 @@
     "allowJs": true,
     "checkJs": true,
     "paths": {
+      "unplugin-icons/loaders": ["./node_modules/unplugin-icons/dist/loaders"],
+      "unplugin-icons/vite": ["./node_modules/unplugin-icons/dist/vite"],
       "$lib": ["src/lib"],
       "$lib/*": ["src/lib/*"],
       "$i18n": ["src/i18n"],

vite.config.js

@@ -1,10 +1,19 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { execSync } from 'child_process';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import Icons from 'unplugin-icons/vite';
 
 const COMMIT_SHA =
   process.env.VITE_COMMIT_SHA ||
   execSync('git describe --always').toString().trim();
 
+export const UnpluginIconsPlugin = Icons({
+  compiler: 'svelte',
+  customCollections: {
+    custom: FileSystemIconLoader('./static/icons'),
+  },
+});
+
 /** @type {import('vite').UserConfig} */
 const config = {
   build: {
@@ -18,7 +27,7 @@ const config = {
   server: {
     port: 3000,
   },
-  plugins: [sveltekit()],
+  plugins: [sveltekit(), UnpluginIconsPlugin],
 };
 
 export default config;