feat: math and new post

.github/workflows/deploy.yml

@@ -3,7 +3,7 @@ name: Deploy to CyberPanel via FTP
 on:
   push:
     branches:
-      - main  # Replace with your branch name
+      - main 
 
 jobs:
   deploy:
@@ -17,7 +17,7 @@ jobs:
     - name: Set up Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: '18.x'  # Use the Node.js version compatible with your project
+        node-version: '18.x'
 
     - name: Install dependencies
       run: npm install
@@ -26,18 +26,11 @@ jobs:
       run: |
         sed -i 's/output: "hybrid"/output: "static"/' astro.config.mjs
         sed -i 's/adapter: vercel()//' astro.config.mjs
+        sed -i 's#import vercel from "@astrojs/vercel/serverless";##' astro.config.mjs
+        sed -i 's#site: "https://andka.my.id",#site: "https://andka.jamcoder.id",#' astro.config.mjs
 
     - name: Build project
-      run: npm run build  # Ensure your build script is defined in package.json
-
-    - name: Clean Destination Folder on Server
-      uses: SamKirkland/[email protected]
-      with:
-        server: andka.jamcoder.id
-        username: admin_andka
-        password: ${{ secrets.FTP_PASSWORD }}
-        server-dir: ./public-html/
-        dangerous-clean-slate: true 
+      run: npm run build 
 
     - name: Upload via FTP
       uses: SamKirkland/[email protected]
@@ -47,3 +40,5 @@ jobs:
         password: ${{ secrets.FTP_PASSWORD }}
         local-dir: ./dist/
         server-dir: ./public_html/
+        dangerous-clean-slate: true 
+

astro.config.mjs

@@ -9,23 +9,27 @@ import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-s
 import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
 import expressiveCode from "astro-expressive-code";
 import rehypeExternalLinks from "rehype-external-links";
+import remarkMath from "remark-math";
+import rehypeMath from "rehype-katex";
 import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis';
 
 // https://astro.build/config
 export default defineConfig({
-  site: "https://andka.jamcoder.id",
+  site: "https://andka.my.id",
   vite: {
     plugins: [ yaml() ]
   },
   markdown: {
+    remarkPlugins: [ remarkMath ],
     rehypePlugins: [
       rehypeAccessibleEmojis,
       [ rehypeExternalLinks,
         {
           rel: [ 'external', 'nofollow', 'noopener', 'noreferrer' ],
           target: [ "_blank" ]
         }
-      ]
+      ],
+      rehypeMath
     ]
   },
   integrations: [
@@ -45,6 +49,6 @@ export default defineConfig({
     }),
     UnoCss({ injectReset: true }),
   ],
-  output: "hybrid",
-  adapter: vercel()
+  output: "static",
+  // adapter: vercel()
 });

package.json

@@ -28,6 +28,8 @@
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "rehype-accessible-emojis": "^0.3.2",
     "rehype-external-links": "^3.0.0",
+    "rehype-katex": "^7.0.1",
+    "remark-math": "^6.0.0",
     "typescript": "^5.5.2",
     "unocss": "^0.61.0"
   },

src/content/blog/code-with-math-1.md

@@ -0,0 +1,71 @@
+---
+title: "Memahami Matematika dengan Kode #1 - Aritmatika"
+description: "Belajar matematika kadang berasa melelahkan dan sulit untuk dipahami, apalagi jika sudah masuk ke dalam konsep yang kopleks seperti aljabar abstrak, kalkulus, atau teori bilangan."
+pubDate: "Sep 7 2024"
+heroImage: "/images/screenshot-dark.png"
+idOnly: true
+hasMath: true
+---
+
+Belajar matematika kadang berasa melelahkan dan sulit untuk dipahami, apalagi jika sudah masuk ke dalam konsep yang kopleks seperti aljabar abstrak, kalkulus, atau teori bilangan. Tapi sebenarnya, matematika bisa lebih mudah dipahami kalo kita menggunakan pendekatan yang berbeda sesuai dengan minat masing-masing, dalam kasus ku, aku lebih suka mengerjakan matematika sebagai suatu barisan kode karena programming dan matematika adalah dua hal yang tidak bisa dipisahkan.
+
+Di artikel kali ini aku akan membahas tentang bagaimana kita bisa memahami matematika dengan kode, dan bagaimana kode bisa membantu kita dalam memahami konsep-konsep matematika yang sulit dengan menggunakan javascript. Kita akan mulai dari yang paling sederhana, yaitu penjumlahan dan pengurangan.
+
+## Aritmatika Dasar
+
+Aritmatika sendiri merupakan cabang ilmu matematika, di mana dasar dari operasi aritmatika adalah penjumlahan pengurangan, perkalian, dan pembagian. Aritmatika dipakai di semua cabang matematika seperti geometri, aljabar, kalkulus, dan lain-lain.
+
+Operasi ini juga bisa kita lakukan dengan menggunakan kode, berikut adalah contoh kode untuk penjumlahan, pengurangan, perkalian, dan pembagian.
+
+```javascript title="aritmatikaDasar.js"
+let penjumlahan = 1 + 1;
+let pengurangan = 2 - 1;
+let pembagian = 4 / 2;
+let perkalian = 2 * 2;
+```
+
+Disini hampir semua operator yang digunakan sama dengan apa yang kita pelajari disekolah. seperti, `+` untuk penjumlahan, `-` untuk pengurangan.
+
+Namun di dalam dunia programming, untuk perkalian dan pembagian menggunakan simbol yang berbeda yakni `*` untuk perkalian dan `/` untuk pembagian. Hal ini karena simbol `x` atau `.` sudah digunakan oleh kode dimana `x` yang merupakan huruf biasanya digunakan untuk variabel, sedangkan `.` digunakan untuk menghubungkan sesuatu seperti `app().run()`. Di sisi lain kenapa pembagian tidak menggunakan `:` karena sering kali digunakan untuk hal lain, seperti pemisah di dalam sintaks tertentu.
+
+### Urutan Operasi
+
+Di dalam matematika, kita tahu bahwa urutan operasi adalah perkalian dan pembagian terlebih dahulu, kemudian penjumlahan dan pengurangan. Hal ini juga berlaku di dalam kode, berikut adalah contoh kode yang menunjukkan urutan operasi.
+
+```javascript title="urutanOperasi.js"
+let hasil1 = 1 + 2 * 3; // hasil = 7
+let hasil2 = (1 + 2) * 3; // hasil2 = 9
+```
+
+Di dalam kode diatas, kita bisa melihat bahwa hasil1 dari `1 + 2 * 3` adalah 7, karena perkalian dilakukan terlebih dahulu sebelum penjumlahan. Sedangkan pada `hasil2` kita menggunakan tanda kurung untuk memberikan prioritas operasi, sehingga penjumlahan dilakukan terlebih dahulu sebelum perkalian sehingga hasilnya adalah 9.
+
+### Pangkat dan Akar
+
+Bagaimana dengan pangkat dan akar?, Pangkat sendiri bisa kita lakukan dengan menggunakan operator bintang 2 (`**`) tapi di javascript kita juga bisa menggunakan fungsi `Math.pow()` untuk melakukan pangkat. Berikut adalah contoh kode untuk pangkat dan akar.
+
+```javascript title="pangkat.js"
+let pangkatBiasa = 2 ** 3; // Hasil: 8
+let pangkatFungsi = Math.pow(2, 3); // Hasil: 8
+```
+
+Angka 3 di kode diatas merupakan pangkat dan angka 2 adalah bilangan yang di pangkatkan. Bagaimana dengan akar? untuk akar sendiri kita bisa pakai fungsi `Math.sqrt()` (square root) seperti kode di bawah ini:
+
+```javascript title="akar.js"
+let akar = Math.sqrt(100); // Hasil 10
+```
+
+Kode diatas menujukkan nilai dari $\sqrt{100}$ yang hasilnya adalah 10. Lalu bagaimana jika akarnya bukan 2? misalnya akar pangkat 3, kita bisa menggunakan `Math.cbrt()` (cube root) seperti kode di bawah ini:
+
+```javascript title="akarPangkat3.js"
+let akarPangkat3 = Math.cbrt(27); // Hasil 3
+```
+
+bagaimana jika lebih dari 3? kita bisa menggunakan `Math.pow()` dengan pangkat 1/n, dimana n adalah pangkat akar. Berikut adalah contoh kode untuk akar pangkat 4:
+
+```javascript title="akarPangkat4.js"
+let akarPangkat4 = Math.pow(16, 1 / 4); // Hasil 2
+```
+
+Kode diatas menujukkan nilai dari $\sqrt[4]{16}$ yang hasilnya adalah 2. perlu diingat bahwa akar pangkat $n$ sama dengan $x^{1/n}$ atau nilai dari $x$ pangkat $1/n$.
+
+MUngkin sampai sini saja dulu, karena akan ada cukup banyak materi yang dibahas selanjutnya :3 see you later

src/content/config.ts

@@ -8,6 +8,7 @@ const blog = defineCollection({
 		pubDate: z.coerce.date(),
 		updatedDate: z.coerce.date().optional(),
 		idOnly: z.boolean().optional(),
+		hasMath: z.boolean().optional(),
 		draft: z.boolean().optional(),
 		heroImage: z.string()
 	}),

src/layouts/BlogPost.astro

@@ -7,10 +7,15 @@ import { getImage, Image } from "astro:assets";
 
 type Props = CollectionEntry<"blog">["data"] & { headings: MarkdownHeading[] };
 
-const { title, description, pubDate, updatedDate, heroImage, headings } = Astro.props;
+const { title, description, pubDate, updatedDate, heroImage, headings, hasMath } = Astro.props;
+
+
 ---
 
 <Layout title={title} description={description} image={heroImage || undefined}>
+	{
+		hasMath && <link rel="stylesheet" href="/katex.css" />
+	}
 	<div class="relative" id="top">
 		<div class="px-8">
 			<article class="max-w-3xl m-auto prose slide-enter-content pb32">
@@ -64,4 +69,4 @@ const { title, description, pubDate, updatedDate, heroImage, headings } = Astro.
 		padding: 1rem 1.5rem;
 		font-family: "JetBrains Mono", monospace;
 	}
-</style>
+</style>

src/styles/global.css

@@ -183,6 +183,10 @@
     background-image: linear-gradient(-45deg, #232634 40%, #303446 50%, #232634 60%);
 }
 
+.math-inline svg {
+    display: inline !important;
+}
+
 @keyframes shimmer {
     from {
         background-position-x: -50%;