feat(about): update content and add performance reports

refactor(Header): add back button and adjust layout
style(ContentImage): reduce min-height
ci(lighthouse): update reports folder path

Author: gadingnst

.github/workflows/lighthouse.yml

@@ -15,7 +15,7 @@ jobs:
       PSURL: https://pagespeed-insights.herokuapp.com
       PSRDESKTOP: desktop
       PSRMOBILE: mobile
-      RESULTSFOLDER: public/assets/images/reports
+      RESULTSFOLDER: public/media/web-reports/pagespeed
     steps:
     - uses: actions/checkout@v2 # This is a premade github action
       with:

public/media/web-reports/desktop.svg …/media/web-reports/pagespeed/desktop.svgpublic/media/web-reports/desktop.svg renamed to public/media/web-reports/pagespeed/desktop.svg public/media/web-reports/desktop.svg renamed to public/media/web-reports/pagespeed/desktop.svg

@@ -10,10 +10,10 @@ Saya adalah seorang ***Software Engineer*** dengan pengalaman lebih dari 5 tahun
 
 Saya antusias mengeksplorasi teknologi yang sedang naik daun seperti ***AI***, ***Web3***, dan ***blockchain***, sambil terus mendalami teknologi web & mobile modern dengan fokus pada *Developer Experience (DX)*, performa, dan selalu mengikuti perkembangan terbaru.
 
-Saya cepat belajar, senang bekerja sama dalam tim, dan juga telah membuat beberapa proyek sampingan serta *open-source* yang bisa kamu lihat di [GitHub](https://github.com/gadingnst) — mungkin sudah bermanfaat buat developer lain di luar sana.
+Saya cepat belajar, senang bekerja sama dalam tim, dan juga telah membuat beberapa proyek sampingan serta *open-source* yang bisa dilihat di [GitHub](https://github.com/gadingnst) (mungkin sudah bermanfaat buat developer lain di luar sana).
 
 #### Cara menyebut namaku
-Sebelum mengenal seseorang lebih jauh, hal pertama yang harus kamu tahu adalah cara menyebut namanya dengan benar.
+Sebelum mengenal seseorang lebih jauh, hal pertama yang harus diketahui adalah cara menyebut namanya dengan benar.
 
 ✅ ***Benar***:
 - Sutan
@@ -31,8 +31,8 @@ Sebelum mengenal seseorang lebih jauh, hal pertama yang harus kamu tahu adalah c
 #### Cerita di balik “Gading”
 Saya percaya kalau belajar itu seumur hidup. Komunitas online, proyek open source, mentor, rekan kerja, dan teman-teman semuanya berperan besar dalam perjalanan saya. Dari situ juga saya mulai suka berbagi: nulis dokumentasi, bikin blog, open source, dan konten edukatif buat sesama developer.
 
-#### Mau tahu saya lagi ngapain?
-Langsung cek ke halaman [Now](/now), siapa tahu pertanyaan kamu udah kejawab di situ.
+#### Mau tau saya ngapain?
+Langsung cek ke halaman [Now](/now), siapa tau pertanyaan kamu udah kejawab di situ.
 
 ---
 
@@ -41,6 +41,11 @@ Website ini saya bangun pakai teknologi *JAMStack* dengan *Next.js*. Kode sumber
 
 Saya lumayan peduli sama *performance* dan *SEO*, jadi saya tampilkan laporan performa situs ini di halaman ini dan bakal selalu diperbarui. Thanks banget buat [Ankur Parihar](https://github.com/ankurparihar) yang bikin [Readme Pagespeed Insight](https://github.com/ankurparihar/readme-pagespeed-insights) — tool yang otomatis generate laporan performa ini.
 
+<div className="max-w-[720px] flex flex-col gap-0 mx-auto">
+  ![Laporan *Performance* (Desktop)](/media/web-reports/pagespeed/desktop.svg)
+  ![Laporan *Performance* (Mobile)](/media/web-reports/pagespeed/mobile.svg)
+</div>
+
 ---
 
 <div className="text-center italic">

public/media/web-reports/mobile.svg …c/media/web-reports/pagespeed/mobile.svgpublic/media/web-reports/mobile.svg renamed to public/media/web-reports/pagespeed/mobile.svg public/media/web-reports/mobile.svg renamed to public/media/web-reports/pagespeed/mobile.svg

@@ -12,7 +12,7 @@ function ContentImage(props: ContentImageProps) {
   const { src, alt } = props;
   return (
     <ImageWithTools
-      figureClassName="flex flex-col items-center min-h-[300px] w-full justify-center my-4 rounded-lg"
+      figureClassName="flex flex-col items-center min-h-[200px] w-full justify-center my-4 rounded-lg"
       enableZoom
       enableDownload
       src={src}

src/contents/about/id.md

@@ -0,0 +1,28 @@
+'use client';
+
+import { ChevronLeft } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+import cn from '@/designs/utils/cn';
+import useBlogContentLanguages from '@/modules/Blog/hooks/useBlogContentLanguages';
+
+export default function BackButton() {
+  const router = useRouter();
+
+  const { languagesCount } = useBlogContentLanguages();
+
+  if (languagesCount < 1) return null;
+
+  return (
+    <button
+      onClick={router.back}
+      className={cn([
+        'liquid-glass-shadow btn btn-ghost btn-circle',
+        'transition-all duration-300 hover:bg-white/80 hover:text-black hover:scale-105'
+      ])}
+      aria-label="Back"
+    >
+      <ChevronLeft className="w-5 h-5" />
+    </button>
+  );
+}

src/modules/ContentParser/components/ContentImage.tsx

@@ -4,6 +4,7 @@ import cn from '@/designs/utils/cn';
 import NextLink from '@/packages/components/base/Navigations/NextLink';
 
 import AppThemeSelector from './AppThemeSelector';
+import BackButton from './BackButton';
 import LanguageSelector from './LanguageSelector';
 import Menu from './Menu';
 
@@ -15,7 +16,8 @@ export default function Header() {
       ])}
     >
       <div className="base-container flex justify-between items-center">
-        <div className="navbar-start">
+        <div className="navbar-start gap-2">
+          <BackButton />
           <NextLink
             withCurrentLocale
             href="/"