Alur Form Submit ke Pull Request

Form /submit adalah jalur kontribusi berbasis UI di repository ini. Tautan Submit+ di sidebar menuju halaman itu src/layouts/Sidebar.astro:27¹, dan deskripsi halaman sudah menyatakan janjinya secara eksplisit: Any tools to add? We'll redirect you to github PR's page after submit src/pages/submit.astro:5-6². Tidak ada backend di balik form ini — seluruh kerja terjadi di browser, dan keluarannya adalah satu URL ke halaman "new file" GitHub yang sudah terisi. Karena halaman ini bukan konten publik, Layout dipanggil dengan noIndex={true} src/pages/submit.astro:9-13³.

Siklus satu submission

Seluruh antarmuka terdiri dari tiga input dan satu tombol. input_url bertipe url, input_tags bertipe text, dan input_benefits berupa textarea src/pages/submit.astro:22-30⁴ src/pages/submit.astro:32-44⁵. Tombol Submit memanggil validateSubmission() lewat atribut onclick, dan fungsi itu selalu mengembalikan false untuk mencegah navigasi form biasa src/pages/submit.astro:51-54⁶. Satu input keempat, penjadwalan date, masih dikomentari sehingga tidak pernah dikirim src/pages/submit.astro:46-49⁷.

sequenceDiagram
    autonumber
    actor U as User
    participant P as submit.astro
    participant M as web-meta-scrapper
    participant GH as GitHub
    U->>P: isi input_url input_tags input_benefits
    U->>P: klik Submit
    P->>P: jalankan validateSubmission
    P->>P: status.innerText = 'Loading...'
    P->>M: GET METAFETCH_URL
    alt metadata tersedia
        M-->>P: data.body JSON
        P->>P: generateUrl menyusun frontmatter
        P->>P: status.innerText = 'Redirect..'
        P->>GH: window.open preFilledlink
        GH-->>U: form new file terisi
        U->>GH: commit dan buka pull request
    else fetch gagal
        M--xP: error
        P->>P: status.innerHTML pesan gagal
        U->>GH: link fallback src/content/tools
    end
%% fig: Siklus satu submission dari input sampai berkas baru di GitHub
%% desc: Form memanggil layanan metadata, menyusun frontmatter, lalu membuka halaman new file GitHub; cabang gagal menyediakan tautan template kosong.

validateSubmission() membaca ketiga nilai input, menyetel status.innerText = 'Loading...', lalu memanggil fetch ke METAFETCH_URL yang dibentuk dari "https://web-meta-scrapper.vercel.app/api?url=" + url src/pages/submit.astro:59-69⁸. Setelah response.json() selesai, status berganti menjadi 'Redirect..', generateUrl dipanggil dengan data.body, dan hasilnya dibuka lewat window.open(preFilledlink) src/pages/submit.astro:72-76⁹.

⚠️ window.open dipanggil di dalam then, setelah fetch asynchronous selesai. Browser yang agresif memblokir popup dapat menolak tab baru tanpa pesan apa pun, sehingga status 'Redirect..' terlihat tetapi GitHub tidak pernah terbuka.

GitHub hanya menerima berkas yang sudah terisi; pembuatan commit dan pull request tetap dilakukan pengguna di sisi GitHub. README menyebut perilaku ini sebagai prefill untuk pull request, bukan pengiriman otomatis README.md:26-28¹⁰.

Penyusunan frontmatter dan URL

generateUrl memetakan data eksternal menjadi tujuh potongan teks, lalu merangkainya menjadi satu URL. Thumbnail diambil berurutan dari _info.icon, lalu ditimpa _info.maskIcon, lalu ditimpa elemen terakhir _info.touchIcons — nilai yang terakhir tersedia yang menang src/pages/submit.astro:90-103¹¹. Tag diubah dari daftar berkoma menjadi array JSON dengan _tags.replace(/,/g, '","') src/pages/submit.astro:103-104¹². Judul memakai _info.name || _info.title src/pages/submit.astro:107¹³, sedangkan snippet diambil langsung dari _info.description src/pages/submit.astro:113¹⁴.

Kunci dan urutan field itu sama dengan template manual di README, sehingga berkas hasil form dan berkas yang ditulis tangan tetap seragam README.md:37-49¹⁵. createdAt yang diterima schema adalah z.date(), sementara thumbnail opsional dan isPaid opsional src/content/config.ts:4-13¹⁶.

graph LR
    IN["input_url + input_tags + input_benefits"]
    META["data.body dari web-meta-scrapper"]
    PICK["pemilihan thumbnail: icon lalu maskIcon lalu touchIcons"]
    FMT["fileText: frontmatter + isi benefits"]
    ENC["encodeURIComponent(fileText)"]
    NAME["generateFileName + .md"]
    OUT["URL GitHub new file src/content/tools"]
    IN --> FMT
    META --> PICK --> FMT
    FMT --> ENC --> OUT
    NAME --> OUT
    style META fill:#8b5cf6,color:#fff
    style PICK fill:#8b5cf6,color:#fff
    style ENC fill:#f59e0b,color:#000
    style NAME fill:#f59e0b,color:#000
    style OUT fill:#2d7d46,color:#fff
%% fig: Perakitan URL dari tiga sumber masukan
%% desc: Nilai form dan metadata eksternal dirangkai menjadi fileText, di-encode, lalu digabung dengan nama berkas menjadi URL new file GitHub.

fileText adalah literal template dengan urutan title, link, thumbnail, snippet, tags, createdAt, lalu isi _benefits di bawah penutup --- src/pages/submit.astro:119-129¹⁷. Seluruh teks itu dilewatkan encodeURIComponent, lalu ditempel ke https://github.com/hilmanski/freeStuffDev/new/main/src/content/tools?value= bersama parameter &filename= src/pages/submit.astro:131-134¹⁸.

Nama berkas dan jebakan encoding

generateFileName menurunkan nama berkas dari judul: spasi dan titik diganti tanda hubung, tanda kutip di-escape, lalu semuanya dijadikan huruf kecil src/pages/submit.astro:137-140¹⁹. Hasilnya dipakai dengan akhiran ".md" src/pages/submit.astro:119-129¹⁷.

⚠️ Hanya fileText yang melalui encodeURIComponent. Nilai filename ditempel langsung ke URL src/pages/submit.astro:131-134¹⁸, sehingga judul dengan karakter di luar huruf, angka, spasi, dan titik dapat menghasilkan nama berkas yang tidak valid di GitHub.

Karena tag hanya dipecah pada koma, penulisan hosting, authentication menyisakan spasi di awal tag kedua src/pages/submit.astro:103-104¹². Tulis tag tanpa spasi setelah koma seperti yang dicontohkan form.

Jalur gagal dan batas form

Bila fetch gagal, blok catch menulis Sorry.. something went wrong. ke status.innerHTML dan menyertakan tautan ke src/content/tools?value= berisi template kosong dengan placeholder seperti createdAt : YYYY-MM-DDT00:00:00+00:00 src/pages/submit.astro:80-85²⁰. Pengguna masih bisa berkontribusi lewat jalur manual tersebut.

⚠️ Markup tidak membungkus input dengan elemen <form> src/pages/submit.astro:20-56²¹. Atribut required dan type="url" karena itu tidak pernah memicu validasi bawaan browser; validateSubmission() adalah satu-satunya pemeriksaan, dan fungsi itu tidak memeriksa apakah input_url benar-benar URL.

Form ini juga tidak pernah menulis isPaid, padahal aturan kontribusi meminta penandaan isPaid: true untuk tool yang hanya menawarkan trial singkat README.md:15²², dan schema menerima field itu sebagai opsional src/content/config.ts:4-13¹⁶. Kontributor yang menambah tool berbayar harus menyunting berkasnya sendiri setelah GitHub membuka editor. Rincian format berkas dan aturan kontribusi dibahas di Format Berkas dan Aturan Kontribusi.