New post Aturan keuangan and adjusting image size (#9)

src/lib/components/blog/Callout.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let title = 'Callout';
+</script>
+
+<aside class="w-full flex bg-gray-1 gap-1 p-2 rounded border">
+  <span
+    ><svg class="w-6 h-6" fill="#fde047" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+      /></svg
+    ></span
+  >
+  <div class="flex flex-col w-full gap-1">
+    <b>{title}</b>
+    <slot />
+  </div>
+</aside>

src/lib/components/blog/Image.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let src;
+  export let caption;
+  export let isFullWidth = false;
+</script>
+
+<figure class="text-center">
+  <img
+    {src}
+    alt="Ini gambar"
+    class="rounded-lg mx-auto {isFullWidth ? 'w-full' : ''}"
+    height="420"
+    width="420"
+    decoding="async"
+    loading="lazy"
+  />
+  <caption class="text-xs inline-flex space-x-1">
+    {@html caption}
+  </caption>
+</figure>

src/lib/components/blog/ToggleList.svelte

@@ -0,0 +1,56 @@
+<script>
+  import { fly } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+
+  let isOpen = false;
+  export let title = 'Toggle List';
+
+  const handleOnClick = () => {
+    isOpen = !isOpen;
+  };
+</script>
+
+<div class="my-2 p-2 bg-gray-1 rounded border">
+  <button class="w-full flex items-center outline-none rounded-t transition gap-2" on:click={handleOnClick}>
+    <span
+      ><svg class="w-6 h-6" fill="#93c5fd" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+        ><path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+        /></svg
+      ></span
+    >
+    <span class="flex-1 text-left">{title}</span>
+    {#if isOpen}
+      <svg
+        in:fly={{ x: 0, y: -15 }}
+        out:fly={{ x: 0, y: -15 }}
+        class="w-5 h-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /></svg
+      >
+    {:else}
+      <svg
+        in:fly={{ x: 0, y: 15 }}
+        out:fly={{ x: 0, y: 15 }}
+        class="w-5 h-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg
+      >
+    {/if}
+  </button>
+
+  {#if isOpen}
+    <p transition:fly={{ y: -10, easing: quintOut }}>
+      <slot />
+    </p>
+  {/if}
+</div>

src/lib/utils/fetch-data.ts

@@ -7,7 +7,6 @@ export interface Post {
   tags: string[];
   layout: string;
   slug: string;
-  draft: boolean;
   type: string;
 }
 
@@ -32,7 +31,5 @@ export const getResourcesAsync = async (): Promise<Post[]> => {
 
   const result = await Promise.all(fileMetadata);
 
-  return result
-    .sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime())
-    .filter(({ draft }) => !draft);
+  return result.sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime());
 };

src/routes/5-tahun-ke-belakang/index.svx

@@ -1,5 +1,4 @@
 ---
-draft: false
 title: 5 tahun ke belakang
 publishedAt: 2022-05-04
 updatedAt: 2022-04-29

src/routes/atur-keuangan/index.svx

@@ -0,0 +1,64 @@
+---
+title: Atur keuangan
+publishedAt: 2022-09-04
+updatedAt: 2022-09-04
+desc: Bagaimana aku mengatur keuanganku dalam bentuk pos-pos yang aku buat dengan menggunakan Bank Jago.
+tags:
+  - tips
+---
+
+<script>
+	import Callout from "$lib/components/blog/Callout.svelte";
+	import Image from "$lib/components/blog/Image.svelte";
+	import ToggleList from "$lib/components/blog/ToggleList.svelte";
+</script>
+
+Salah satu hal yang menjadi penyebab sakit kepala bagi sebagian orang adalah karena masalah keuangan. Selain sakit kepala karena bingung dapat pemasukannya darimana juga sakit kepala karena bingung pengeluarannya ini habis buat apa.
+
+Pernah nggak di **pertengahan bulan**, gitu, bertanya-tanya *ini uang habis dimana aja kok udah segini aja?*
+
+Atau ketika masih di **awal bulan** bingung *uang segini enaknya mau dikemanain ya?*
+
+Nah, kalau ngerasain hal-hal diatas mungkin tips yang akan saya coba bagikan ini semoga bisa bermanfaat buat kamu juga.
+
+<Callout title="Disclaimer">
+Apa yang saya sampaikan adalah murni karena ingin berbagi, tidak ada kepentingan apapun atau kerja sama dengan pihak manapun.
+</Callout>
+
+## Mapping Tujuan
+
+Pada bagian pertama ini kita harus memiliki rencana kedepan ini apa yang mau dicapai. Ada beberapa formula yang bisa kita gunakan dalam hal perencanaan ini, salah satunya adalah [formula 50/30/20](https://www.thewaystowealth.com/money-management/50-30-20-budget/): **50%** untuk kebutuhan sehari-hari (*needs*) **30%** untuk keinginan beli apa gitu (*wants*), **20%** untuk investasi/simpanan (*savings*).
+
+<Image src="/mapping-tujuan.png" isFullWidth caption="Pecah 100% dari pemasukan." />
+
+*Goals* yang mau kita dapatkan dalam hal perencanaan ini nantinya akan berguna sekali ketika kita akan menentukan pos-pos apa saja yang akan kita buat.
+
+## Bikin Pos
+
+Setelah kita sudah membuat rencana apa-apa saja yang akan kita masukkan daftar finansial yang akan kita bikin posnya nanti.
+
+<Image src="/list-pos.png" caption="Daftar pos dan nominalnya." />
+
+Kita bisa membagi pos-pos dengan masing-masing nominal yang dibutuhkan. Kamu bisa juga menambahkan tanggal dan waktu kapan kamu akan menggunakan dana tersebut.
+
+## Membagi Pos
+
+Untuk urusan membagikan isi dari tiap pos-pos tadi yang sudah kita buat saya menggunakan [Bank Jago](https://www.jago.com/). Bank Jago menawarkan kita fitur [Kantong](https://www.jago.com/id/digital/pocket) yang bisa kita manfaatkan untuk menyimpan dana dari masing-masing kantong/post yang sudah kita buat.
+
+<ToggleList title="Untuk kita yang Muslim">
+  Bank Jago juga memiliki versi syariahnya yaitu <a href="https://www.jago.com/public/id/syariah">Bank Jago Syariah</a> yang insyaallah lebih aman dengan tanpa adanya riba.
+</ToggleList>
+
+Sebagai contoh, supaya lebih realistis, saya ada kantong yang namanya “Nikah”. Di kantong ini saya bisa mengatur berapa target dananya dan kapan kira-kira target itu ingin dicapai, misalnya: targetnya xx juta dan mau kita ambil xx tahun lagi.
+
+<Image src="/nikah.png" caption="Contoh prototype pos nikah." />
+
+Selanjutnya kita juga bisa menambahkan fitur **“Auto Save”**. Ini sih yang saya suka banget. Fitur ini memungkinkan kantong ini bisa terisi secara otomatis sesuai dengan rentang waktu yang bisa kita pilih (harian/mingguan/bulanan).
+
+## Kesimpulan
+
+Beberapa poin yang ada kali ini jika direkap kira-kira begini:
+
+- **Mapping tujuan** dulu kira-kira apa saja yang perlu kita perhatikan dan rencanakan dalam urusan mengatur finansial kita dengan **formula 50/30/20 (kebutuhan, keinginan, investasi/simpanan)**.
+- **Bikin pos** berdasarkan apa yang sudah kita rencanakan sebelumnya. Saya sendiri memiliki sebuah kantong “Dana Darurat” yang dimana ini masuk di bagian dana simpanan dengan rumus 5% gaji tiap bulannya.
+- **Membagi pos** dari pos-pos yang sudah kita bikin sebelumnya berdasarkan kemampuan kita masing-masing. Kita bisa memberikan berapa target yang mau dicapai, kapan ingin mencapainya, dan kita juga bisa memilih rentang waktunya.

src/routes/bukan-pertama-kali/index.svx

@@ -1,5 +1,4 @@
 ---
-draft: false
 title: Bukan pertama kali
 publishedAt: 2022-05-04
 updatedAt: 2022-04-29

src/routes/insecure/index.svx

@@ -1,5 +1,4 @@
 ---
-draft: false
 title: Insecure
 publishedAt: 2022-05-05
 updatedAt: 2022-05-05

src/routes/menilai-cover/index.svx

@@ -1,5 +1,4 @@
 ---
-draft: false
 title: Menilai (tidak cukup) dari cover
 publishedAt: 2022-05-04
 updatedAt: 2022-04-29

src/routes/mulai-dari-yang-mudah/index.svx

@@ -1,5 +1,4 @@
 ---
-draft: false
 title: Mulai dari yang mudah
 publishedAt: 2022-05-04
 updatedAt: 2022-05-11
@@ -8,10 +7,6 @@ tags:
   - hidup
 ---
 
-<script>
-	import Image from "$lib/components/blog/image.svelte";
-</script>
-
 Kesalahan saya terdahulu ketika mulai menggeluti bidang *software development* ini adalah tidak memiliki mindset “Mulai dari yang mudah”. Padahal sudah sering diajarkan waktu masih duduk di bangku sekolah ketika ujian berlangsung yaitu “Kerjakan yang paling mudah terlebih dahulu”.
 
 Fungsinya tidak hanya ketika waktu di ujian saja, tetapi bisa dibawa ke dalam konteks pekerjaan, bahkan kehidupan.

src/routes/pesan-dan-perasaan/index.svx

@@ -1,5 +1,4 @@
 ---
-draft: false
 title: Pesan dan perasaan
 publishedAt: 2022-05-04
 updatedAt: 2022-05-04

src/routes/sabar-sama-diri-sendiri/index.svx

@@ -1,5 +1,4 @@
 ---
-draft: false
 title: Sabar sama diri sendiri
 publishedAt: 2022-08-13
 updatedAt: 2022-08-13
@@ -10,7 +9,7 @@ tags:
 ---
 
 <script>
-	import Image from "$lib/components/blog/image.svelte";
+	import Image from "$lib/components/blog/Image.svelte";
 </script>
 
 <Image src="/todo.png" caption="To Do" />

src/routes/sakit-gila-no-29/index.svx

@@ -1,5 +1,4 @@
 ---
-draft: false
 title: Sakit gila no. 29
 publishedAt: 2022-05-11
 updatedAt: 2022-05-11

src/routes/satu-persen/index.svx

@@ -1,5 +1,4 @@
 ---
-draft: false
 title: Satu persen
 publishedAt: 2022-05-11
 updatedAt: 2022-05-11
@@ -9,7 +8,7 @@ tags:
 ---
 
 <script>
-	import Image from "$lib/components/blog/image.svelte";
+	import Image from "$lib/components/blog/Image.svelte";
 </script>
 
 Berikan diri kesempatan untuk mencoba.

uno.config.js

@@ -54,7 +54,7 @@ export default defineConfig({
     [
       /^prose-custom$/,
       (_, { theme }) => ({
-        '--font-heading': '"Poppins", sans-serif',
+        '--font-heading': '"Montserrat", sans-serif',
         '--font-sans': '"Open Sans", sans-serif',
         '--un-prose-headings': theme.colors.gray[700],
         '--un-prose-body': theme.colors.gray[600],