diff --git a/src/lib/components/blog/Callout.svelte b/src/lib/components/blog/Callout.svelte new file mode 100644 index 0000000..d23b5d9 --- /dev/null +++ b/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> diff --git a/src/lib/components/blog/Image.svelte b/src/lib/components/blog/Image.svelte new file mode 100644 index 0000000..6a798fd --- /dev/null +++ b/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> diff --git a/src/lib/components/blog/ToggleList.svelte b/src/lib/components/blog/ToggleList.svelte new file mode 100644 index 0000000..bfd0bc0 --- /dev/null +++ b/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> diff --git a/src/lib/components/blog/image.svelte b/src/lib/components/blog/image.svelte deleted file mode 100644 index 73b15c8..0000000 --- a/src/lib/components/blog/image.svelte +++ /dev/null @@ -1,11 +0,0 @@ -<script> - export let src; - export let caption; -</script> - -<figure class="text-center"> - <img {src} alt="Ini gambar" class="rounded-lg w-full" height="100" width="100" decoding="async" loading="lazy" /> - <caption class="text-xs inline-flex space-x-1"> - {@html caption} - </caption> -</figure> diff --git a/src/lib/utils/fetch-data.ts b/src/lib/utils/fetch-data.ts index 5ba8c41..5edf01e 100644 --- a/src/lib/utils/fetch-data.ts +++ b/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()); }; diff --git a/src/routes/5-tahun-ke-belakang/index.svx b/src/routes/5-tahun-ke-belakang/index.svx index d6f6bc8..3d276ec 100644 --- a/src/routes/5-tahun-ke-belakang/index.svx +++ b/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 diff --git a/src/routes/atur-keuangan/index.svx b/src/routes/atur-keuangan/index.svx new file mode 100644 index 0000000..cb35e73 --- /dev/null +++ b/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. diff --git a/src/routes/bukan-pertama-kali/index.svx b/src/routes/bukan-pertama-kali/index.svx index b622abc..32ec808 100644 --- a/src/routes/bukan-pertama-kali/index.svx +++ b/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 diff --git a/src/routes/insecure/index.svx b/src/routes/insecure/index.svx index f79ace1..20e555c 100644 --- a/src/routes/insecure/index.svx +++ b/src/routes/insecure/index.svx @@ -1,5 +1,4 @@ --- -draft: false title: Insecure publishedAt: 2022-05-05 updatedAt: 2022-05-05 diff --git a/src/routes/menilai-cover/index.svx b/src/routes/menilai-cover/index.svx index 8e0c89b..fa0bfd5 100644 --- a/src/routes/menilai-cover/index.svx +++ b/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 diff --git a/src/routes/mulai-dari-yang-mudah/index.svx b/src/routes/mulai-dari-yang-mudah/index.svx index 5357b5c..c0b6dff 100644 --- a/src/routes/mulai-dari-yang-mudah/index.svx +++ b/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. diff --git a/src/routes/pesan-dan-perasaan/index.svx b/src/routes/pesan-dan-perasaan/index.svx index 5c86044..74697a6 100644 --- a/src/routes/pesan-dan-perasaan/index.svx +++ b/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 diff --git a/src/routes/sabar-sama-diri-sendiri/index.svx b/src/routes/sabar-sama-diri-sendiri/index.svx index bd3ca5f..c78d46b 100644 --- a/src/routes/sabar-sama-diri-sendiri/index.svx +++ b/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" /> diff --git a/src/routes/sakit-gila-no-29/index.svx b/src/routes/sakit-gila-no-29/index.svx index 3de72e7..903aab2 100644 --- a/src/routes/sakit-gila-no-29/index.svx +++ b/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 diff --git a/src/routes/satu-persen/index.svx b/src/routes/satu-persen/index.svx index 989b66e..98f24fb 100644 --- a/src/routes/satu-persen/index.svx +++ b/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. diff --git a/static/list-pos.png b/static/list-pos.png new file mode 100644 index 0000000..9a507b8 Binary files /dev/null and b/static/list-pos.png differ diff --git a/static/mapping-tujuan.png b/static/mapping-tujuan.png new file mode 100644 index 0000000..1cd4c9a Binary files /dev/null and b/static/mapping-tujuan.png differ diff --git a/static/nikah.png b/static/nikah.png new file mode 100644 index 0000000..6ad4eef Binary files /dev/null and b/static/nikah.png differ diff --git a/uno.config.js b/uno.config.js index 7588c5c..095db3c 100644 --- a/uno.config.js +++ b/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],