Bagaimana pipeline Newline bekerja

Newline, platform ini bukanlah starter public Jamstack atau tema WordPress. Ini adalah bentuk perlawanan terhadap perubahan narasi yang dipelintir dan dibelokkan dari hari ke hari.

Kita melihat berbagai tema, starter yang bagus dan menarik. sangat SEO-optimized tapi tidak punya jiwa; dan tidak memiliki keunikan yang memorable. Tetapi semua itu menyisakan satu masalah: “pipeline yang tidak higienis dan ringan, kebanyakan berat dan sangat mahal secara cost to time.”

Newline - Crafted by Purpose, Clean by Design.

Awal mula

Platform tidak dibuat dalam satu malam, tetapi melalui berbagai pengalaman, perjuangan selama bertahun-tahun hingga akhirnya kami berhasil membangun satu platform naratif yang sangat bernuansa, bukan dikontrol framework atau CMS, tetapi kami sendiri yang menentukan kemana platform harus berjalan.

Sebelumnya, selama-bertahun kami menggunakan CMS populer, stack modern dari starter public static site, semuanya tidak menawarkan fleksibilitas dan kontrol yang granular, tetapi memberikan kendali semu, yang dibungkus sebagai “best practice”, padahal kami hanya sedang di dikte sistem CMS dan framework.

Titik balik

Awal tahun 2025 kami merancang strategi untuk menguliti “best practice” di dunia teknologi web yang sebenarnya adalah kontrol terselubung, rencana ini baru direalisasikan melalui proyek Newline yang rampung Juni 2025 lalu. Dengan pengembangan dan penambahan fitur-fitur yang terus berkembang hingga detik ini.

Kami sudah membuat beberapa plugin remark seperti untuk marker URL nofollow dan follow, alt-text otomatis untuk gambar, lazy otomatis pada semua gambar di artikel kecuali gambar utama/hero, card custom untuk info atau warning, dan plugin-plugin lainnya. Sebagian plugin sudah di buka aksesnya ke publik.

Struktur

Newline tidak mengikuti pola terbaik manapun, baik framework atau CMS. Strukturnya sangat tidak umum namun memberikan kendali penuh, juga bertanggung jawab, kami tahu setiap bagian dan kenapa tiap bagian-bagian itu ada disana.

Setiap desain, dari stack apapun harus bisa dijelaskan dengan detail dan apa alasannya tiap-tiap komponen itu harus jadi bagian stack tersebut.

Semua blok pada diagram diatas punya alasan kenapa harus ada disana, misalnya Sharp, kenapa harus di development dan bukannya di production. Begitupula dengan middleware, mengapa harus berada di dekat production dan tidak sebelum CMS, dan sebagainya.

Newline tidak mengikuti pola umum terklasifikasi seperti SSG, SSR, ISR dan lain sebagainya. Newline adalah pembuat pola baru, Adaptive. Kapan SSG harus digunakan atau kapan SSR perlu diaktifkan, begitu juga GraphQL bawaan Tina, tahu kapan harus dibuka dan ditutup.

Remark/Rehype

Dua komponen ini sering dianggap non production-ready, padahal potensi yang dimiliki keduanya sangat efektif dan powerful. Dengan menggunakan Remark/Rehype, kita bisa memanipulasi tampilan frontend melalui Markdown AST (MAST) /HTML AST (HAST) dengan membaca pola dan format dari Markdown.

Seperti plugin alt-text otomatis, kami memanfaatkan MAST untuk menambahkan alt text dari nama file ke gambar di editor TinaCMS secara otomatis, dengan hasil yang presisi. Misalnya, melalui snippet ini:

      if (typeof node.alt === 'string' && node.alt.trim().length > 0) return;

      try {
        const file = basename(node.url);
        const nameWithoutExt = file.replace(extname(file), '');
        const altText = nameWithoutExt.replace(/[-_]+/g, ' ').trim();

Bahkan di Newline, formatting seperti Bold dan Italic pun di manipulasi oleh plugin Remark, tujuannya supaya platform ini agnostik terhadap CMS dan Framework, bisa diterapkan ke framework dan CMS apa saja tanpa takut kehilangan identitas.

Mem-pluginkan formatting Markdown juga bukan tanpa alasan, karena style blockquotes atau blockcodes masih bisa direplikasi dengan baik oleh Tailwind (misal memindahkan code styles dari framework lama ke yang baru). Tetapi formatting, di beberapa framework justru bermasalah.

Plugin-plugin yang dibuat Remark/Rehype memang dirancang untuk memanipulas konten tanpa bisa diintervensi oleh Framework dan CMS. Justru disitu letak asyiknya!

Iklan

Loading advertisement...

Middleware

Di Newline, middleware bukan cuma proksi, tapi sebuah layer yang ditempatkan secara sadar antara CMS dan production, sangat erat dengan editor terutama aset gambar.

Kami membuat dua script yaitu image converter berbasis Sharp dan markdown reference update untuk memperbarui format gambar asli ke hasil konversi.

Snippet dibawah ini, adalah contoh nyata di sebuah script converter yang berjalan di tingkat development.

    await sharp(filePath)
      .toFormat('avif', { quality: 70, lossless: false })
      .toFile(avifPath);

    const mapping = JSON.parse(fs.readFileSync(MAPPING_FILE, 'utf-8'));
    mapping[path.basename(filePath)] = randomName;
    fs.writeFileSync(MAPPING_FILE, JSON.stringify(mapping, null, 2));

Ketika middleware bekerja, script akan segera memerintahkan sharp untuk mengonversi gambar yang diunggah (serta dilihat chokidar).

selanjutnya script kedua, markdown-reference-update:

          Object.entries(mapping).forEach(([originalName, randomName]) => {
            const regex = new RegExp(`(image:\\s*["'])${originalName}(["'])`, 'g');
            content = content.replace(regex, `$1${randomName}$2`);
          });

Akan memperbarui konteks file dari .jpg/png ke .avif seperti contoh berikut:

[0] ✅ ../uploads/lorem-ipsum.png → ../uploads/lorem-ipsum.avif

Build time

Dengan pipeline custom ini, Newline dengan ratusan artikel, belasan kategori dan puluhan tags, beberapa penulis yang semuanya akan dihitung dalam build, hanya memakan waktu 2 menit 29 detik di CloudFlare. Bukan karena CloudFlare-nya, tapi karena memindahkan image processing ke development.

Build log
Initializing build environment
3s
Cloning git repository
2s
Building application
2m 29s
Deploying to Cloudflare's global network
14s

Pada berbagai stack, sharp sering ditempatkan di build yang sangat mengganggu build time bagi SSG, juga berat dan irasional untuk SSR & ISR meskipun itu best practice. Tapi di Newline, sharp hanya diperlukan saat rendering, bukan di build time.

Penutup

Penggunaan komponen dari stack modern tidak harus melalui best practice mereka, kita sebagai pengguna bebas membengkokkan atau memanjangkan (juga memendekkan) tiap komponen sesuai kebutuhan dan keinginan kita. Karena sebenarnya tiap komponen itu tidak memaksakan kehendaknya, dan kita tahu kenapa satu komponen harus ada dan komponen lainnya tidak.

Sebagai platform Newline telah berhasil menghidupkan “dosa” production dari stack modern: Remark/Rehype, yang sering dianggap tidak ideal, tidak konvensional dan merusak build time atau sekedar rendering. Padahal jika digunakan dengan benar, keduanya dapat merubah paradigma pengembangan web modern.