Cara Menghitung Waktu Baca artikel

Fungsi readingTime.ts ini membantu menghitung estimasi waktu yang dibutuhkan untuk membaca sebuah konten. Mari kita bedah cara kerjanya dan contoh implementasi di Svelte.

Bagaimana Fungsi Ini Bekerja?

1. calculateReadingTime(text)

• Input: Teks string (bisa mengandung HTML)

• Output: Angka bulat (menit)

• Proses:

  1. Membersihkan tag HTML (jika ada)

  2. Menghitung jumlah kata

  3. Mengkonversi ke menit berdasarkan kecepatan baca 230 kata/menit

2. formatReadingTime(text)

• Input: Teks string

• Output: String format “X min read” atau string kosong

• Proses:

  1. Memanggil calculateReadingTime

  2. Memformat angka ke dalam teks yang user-friendly

Contoh Implementasi di Svelte

1. Komponen Artikel Sederhana

<script lang="ts">
  import { formatReadingTime } from '$lib/utils/readingTime';
  
  export let content = '';
</script>

<article>
  <header>
    {@html content}
    <div class="meta">
      <span>📖 {formatReadingTime(content)}</span>
    </div>
  </header>
</article>

2. Blog Post dengan Markdown

<!-- BlogPost.svelte -->
<script lang="ts">
  import { formatReadingTime } from '$lib/utils/readingTime';
  import { page } from '$app/stores';
  
  // Ambil konten dari CMS atau markdown
  $: readingTime = formatReadingTime($page.data?.content);
</script>

<div class="post-header">
  <h1>{$page.data.title}</h1>
  {#if readingTime}
    <small class="reading-time">{readingTime}</small>
  {/if}
</div>

Handle Kasus Khusus

1. Text Kosong

Fungsi ini sudah otomatis membersihkan tag HTML:

<!-- Contoh teks dengan HTML -->
{formatReadingTime('<p>Hello <strong>World</strong></p>')} 
<!-- Output: "1 min read" -->

2. Teks Kosong

Tidak akan menampilkan apa-apa jika teks kosong:

{formatReadingTime('')} <!-- Output: "" -->

Customisasi

1. Ubah Kecepatan Baca

Modifikasi konstanta WORDS_PER_MINUTE:

// Untuk pembaca cepat (300 kata/menit)

const WORDS_PER_MINUTE = 300;

2. Format Alternatif

Tambahkan format berbeda di formatReadingTime:

return ${minutes} menit membaca; // Versi Bahasa Indonesia

// atau

return ⏱️ ${minutes}m;

Alhamdulillah, Siap Digunakan! 🚀

Best Practices:

- Gunakan untuk konten blog, artikel, atau dokumentasi

- Kombinasikan dengan meta tag SEO

- Tambahkan animasi jika diperlukan:

<span in:fade>{{readingTime}}</span>

Tips Performa:

- Precompute di server jika menggunakan SvelteKit

- Cache hasil perhitungan untuk konten statis

- Gunakan Web Worker untuk konten sangat panjang

Contoh Live Demo:

<script>

  import { formatReadingTime } from '$lib/utils/readingTime';

  let content = '';

</script>

<textarea bind:value={content} placeholder="Ketik konten disini..." />

<div class="result">

  {formatReadingTime(content) || 'Mulai mengetik...'}

</div>

---

Q: Kenapa pakai 230 kata/menit?

A: Ini standar umum, tapi bisa disesuaikan dengan audiens target!

Q: Apakah fungsi ini aman untuk XSS?

A: Ya, karena menggunakan replace untuk membersihkan HTML sebelum diproses

Selamat mencoba