angeloanan · angeloanan · Aug 1, 2022 · Jul 30, 2022 · Jul 30, 2022 · Jul 30, 2022
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@next/bundle-analyzer": "^12.1.0",
     "autoprefixer": "^10.4.0",
     "fuse.js": "^6.6.2",
+    "https": "^1.0.0",
     "next": "^12.1.0",
     "next-compose-plugins": "^2.2.1",
     "next-seo": "^5.1.0",

diff --git a/src/_data/sections.tsx b/src/_data/sections.tsx
@@ -0,0 +1,41 @@
+import { devStarterPack, idnStarterPack, linuxStarterPack, websiteListUSA } from './websites'
+
+export const websiteSections = [
+  {
+    title: 'Indonesia Starterpack',
+    description: <p>Situs atau service ini terpopuler dengan orang Indonesia</p>,
+    sites: idnStarterPack
+  },
+  {
+    title: 'Essential Developer Toolkit',
+    description: <p>Service yang ✨ anak bangsa ✨ mungkin akan pakai saat membuat app</p>,
+    sites: devStarterPack
+  },
+  {
+    title: 'Top websites USA',
+    description: (
+      <>
+        <p>
+          2022 Top websites in the USA. Sumber data website diambil dari{' '}
+          <a
+            href='https://www.semrush.com/blog/most-visited-websites/'
+            className='text-blue-700 underline'
+            target='_blank'
+            rel='noreferrer'
+          >
+            semrush.com
+          </a>
+        </p>
+        <p>
+          <em>Catatan: Ada beberapa website ditiadakan karena tidak berhubungan</em>
+        </p>
+      </>
+    ),
+    sites: websiteListUSA
+  },
+  {
+    title: 'Linux Starterpack',
+    description: <p>Service yang sering dipakai Linux user 🐧</p>,
+    sites: linuxStarterPack
+  }
+]
diff --git a/src/components/WebsiteEntry.tsx b/src/components/WebsiteEntry.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import { AlertCircle, Check, HelpCircle, X } from 'react-feather'
 import { SimpleIcon } from 'simple-icons'
 
@@ -12,10 +13,15 @@ interface WebsiteEntryProps {
    */
   registered?: boolean
 
+  /**
+   * Blocked in Trust Positif's Network - Checked via https://trustpositif.kominfo.go.id
+   */
+  trustPositif?: boolean
+
   /**
    * Blocked in Indihome's Network - Checked via https://indi.wtf
    */
-  blocked?: boolean
+  indiWtf?: boolean
 }
 
 const LoadingSpinnerIcon = () => (
@@ -45,10 +51,13 @@ const LoadingSpinnerIcon = () => (
 export const WebsiteEntry = ({
   website,
   registered = false,
-  blocked = false
+  indiWtf = false,
+  trustPositif = false
 }: WebsiteEntryProps) => {
   const size = 32
 
+  const blocked = indiWtf || trustPositif
+
   return (
     <li
       className={`flex items-center gap-2 rounded  p-4 outline outline-2 ${
@@ -88,6 +97,11 @@ export const WebsiteEntry = ({
               <>
                 <HelpCircle aria-hidden />
                 Registered but inaccessible
+                {trustPositif && (
+                  <small data-tip data-for='blocked'>
+                    TP
+                  </small>
+                )}
               </>
             )
           ) : !blocked ? (
@@ -96,7 +110,12 @@ export const WebsiteEntry = ({
             </>
           ) : (
             <>
-              <X aria-hidden /> Blocked
+              <X aria-hidden /> Blocked{' '}
+              {trustPositif && (
+                <small data-tip data-for='blocked'>
+                  TP
+                </small>
+              )}
             </>
           )}
         </p>

diff --git a/src/functions/fetchTrustPositif.ts b/src/functions/fetchTrustPositif.ts
@@ -0,0 +1,56 @@
+import https from 'https'
+
+import { devStarterPack, idnStarterPack, linuxStarterPack, websiteListUSA } from '../_data/websites'
+
+const allWebsitesCombined = [
+  devStarterPack,
+  idnStarterPack,
+  linuxStarterPack,
+  websiteListUSA
+].flat()
+
+const httpsAgent = new https.Agent({
+  rejectUnauthorized: false
+})
+
+export const fetchTrustPositif = async () => {
+  try {
+    const requestChunks = Array.from(
+      { length: Math.ceil(allWebsitesCombined.length / 100) },
+      (_, i) => allWebsitesCombined.slice(i * 100, i * 100 + 100)
+    )
+
+    const requests: Promise<Record<string, boolean>>[] = []
+
+    requestChunks.forEach((chunk) => {
+      requests.push(
+        fetch('https://trustpositif.kominfo.go.id/Rest_server/getrecordsname_home', {
+          method: 'POST',
+          header: {},
+          body: new URLSearchParams({
+            name: chunk
+              .map((item) => item.website.replace(/(https?:\/\/)/, '').replace(/www\./, ''))
+              .join('\n')
+          }),
+          agent: httpsAgent
+        } as any)
+          .then((res) => res.json())
+          .then((res) => {
+            let trustPositifStatus: Record<string, boolean> = {}
+            res.values.forEach((item: any) => {
+              trustPositifStatus[item.Domain] = item.Status === 'Ada'
+            })
+            return trustPositifStatus
+          })
+      )
+    })
+
+    const trustPositifData = await Promise.all(requests)
+
+    return Object.assign({}, ...trustPositifData)
+  } catch (e) {
+    console.error(e)
+
+    return {}
+  }
+}
diff --git a/src/modules/ExplanationSection.tsx b/src/modules/ExplanationSection.tsx
@@ -38,21 +38,32 @@ export const ExplanationSection = () => {
 
       <p className='mt-4 max-w-prose'>
         Selain itu, semua situs dibawah akan diperiksa status terblokirnya menggunakan jaringan
-        IndiHome dan Sigma (courtesy of{' '}
+        IndiHome, Sigma (courtesy of{' '}
         <Link href='https://indi.wtf' passHref>
           <a className='text-blue-800 underline'>indi.wtf</a>
         </Link>{' '}
         by{' '}
         <Link href='https://twitter.com/fransallen' passHref>
           <a className='text-blue-800 underline'>Frans Allen</a>
         </Link>
-        ). Jika situs tersebut diblokir dari jaringan IndiHome dan tidak terdaftar di situs PSE,
-        maka status website akan berubah menjadi &quot;
-        <em>BLOCKED</em>&quot;.
+        ) serta melalui pengecekan langsung ke sistem TrustPositif milik Kominfo yang digunakan
+        untuk melakukan pemblokiran.
       </p>
 
       <p className='mt-4 max-w-prose'>
-        Pemilik situs akan mencoba untuk menyajikan data yang terbaru dan terakurat. Jika ada
+        Jika situs tersebut diblokir dari jaringan IndiHome dan tidak terdaftar di situs PSE, maka
+        status website akan berubah menjadi&nbsp;
+        <em className='text-red-700'>BLOCKED</em>.
+      </p>
+
+      <p className='mt-4 max-w-prose'>
+        Situs yang terdaftar pada sistem TrustPositif juga akan memiliki keterangan{' '}
+        <small>TP</small> yang menandakan bahwa website terdaftar pada database pemblokiran resmi
+        miliki Kominfo.
+      </p>
+
+      <p className='mt-4 max-w-prose'>
+        Pemilik situs akan berusaha untuk menyajikan data yang terbaru dan terakurat. Jika ada
         masalah, dimohon untuk mengontak saya melalui link di footer!
       </p>
 

diff --git a/src/pages/api/fetchTrustPositif.ts b/src/pages/api/fetchTrustPositif.ts
@@ -0,0 +1,13 @@
+import { NextApiHandler } from 'next'
+
+import { fetchTrustPositif } from '../../functions/fetchTrustPositif'
+
+const handler: NextApiHandler = async (req, res) => {
+  const trustPositifData = await fetchTrustPositif()
+
+  return res
+    .setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=3600')
+    .json(trustPositifData)
+}
+
+export default handler
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -4,8 +4,10 @@ import { NextSeo } from 'next-seo'
 import * as React from 'react'
 
 import FullPSEData from '../../public/data.json'
+import { websiteSections } from '../_data/sections'
 import { devStarterPack, idnStarterPack, linuxStarterPack, websiteListUSA } from '../_data/websites'
 import { WebsiteEntry } from '../components/WebsiteEntry'
+import { fetchTrustPositif } from '../functions/fetchTrustPositif'
 import { ExplanationSection, ManualSearchSection, WhatIsThisSection } from '../modules'
 import type { PSEData } from '../types/PSEData'
 import { generateBlockList } from './api/fetchBlocked'
@@ -34,6 +36,7 @@ const allWebsitesCombined = [
 interface IndexPageProps {
   PSEData: Record<string, boolean>
   blockData: Record<string, boolean>
+  trustPositifData: Record<string, boolean>
 }
 
 export async function getStaticProps(
@@ -46,18 +49,18 @@ export async function getStaticProps(
   })
 
   const blockData = await generateBlockList()
+  const trustPositifData = await fetchTrustPositif()
 
   return {
-    props: { PSEData: sites, blockData },
+    props: { PSEData: sites, blockData, trustPositifData },
     revalidate: 5 * 60
   }
 }
 
-const IndexPage = ({ PSEData: data, blockData }: IndexPageProps) => {
+const IndexPage = ({ PSEData: data, blockData, trustPositifData }: IndexPageProps) => {
   return (
     <>
       <NextSeo />
-
       <div className='flex w-full justify-center'>
         <div className='w-full max-w-screen-xl p-8'>
           <header className='flex w-full flex-col items-center'>
@@ -69,80 +72,27 @@ const IndexPage = ({ PSEData: data, blockData }: IndexPageProps) => {
 
           <ExplanationSection />
 
-          <section className='mt-8'>
-            <h2 className='text-2xl font-semibold'>Indonesia Starterpack</h2>
-            <p>Situs atau service ini terpopuler dengan orang Indonesia</p>
-            <ul className='mt-4 grid grid-flow-row grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
-              {idnStarterPack.map((website) => (
-                <WebsiteEntry
-                  website={website.icon}
-                  key={website.icon.title}
-                  blocked={blockData?.[website.website] ?? false}
-                  registered={data[website.website]}
-                />
-              ))}
-            </ul>
-          </section>
-
-          <section className='mt-8'>
-            <h2 className='text-2xl font-semibold'>Essential developer toolkit</h2>
-            <p>Service yang ✨ anak bangsa ✨ mungkin akan pakai saat membuat app</p>
-
-            <ul className='mt-4 grid grid-flow-row grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
-              {devStarterPack.map((website) => (
-                <WebsiteEntry
-                  website={website.icon}
-                  key={website.icon.title}
-                  blocked={blockData?.[website.website] ?? false}
-                  registered={data[website.website]}
-                />
-              ))}
-            </ul>
-          </section>
-
-          <section className='mt-8'>
-            <h2 className='text-2xl font-semibold'>Top websites USA</h2>
-            <p>
-              2022 Top websites in the USA. Sumber data website diambil dari{' '}
-              <a
-                href='https://www.semrush.com/blog/most-visited-websites/'
-                className='text-blue-700 underline'
-                target='_blank'
-                rel='noreferrer'
-              >
-                semrush.com
-              </a>
-            </p>
-            <p>
-              <em>Catatan: Ada beberapa website ditiadakan karena tidak berhubungan</em>
-            </p>
-            <ul className='mt-4 grid grid-flow-row grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
-              {websiteListUSA.map((website) => (
-                <WebsiteEntry
-                  website={website.icon}
-                  key={website.icon.title}
-                  blocked={blockData?.[website.website] ?? false}
-                  registered={data[website.website]}
-                />
-              ))}
-            </ul>
-          </section>
-
-          <section className='mt-8'>
-            <h2 className='text-2xl font-semibold'>Linux Starterpack</h2>
-            <p>Service yang sering dipakai Linux user 🐧</p>
-
-            <div className='mt-4 grid grid-flow-row grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
-              {linuxStarterPack.map((website) => (
-                <WebsiteEntry
-                  website={website.icon}
-                  key={website.icon.title}
-                  blocked={blockData?.[website.website] ?? false}
-                  registered={data[website.website]}
-                />
-              ))}
-            </div>
-          </section>
+          {websiteSections.map((item) => (
+            <section className='mt-8' key={item.title}>
+              <h2 className='text-2xl font-semibold'>{item.title}</h2>
+              <div>{item.description}</div>
+              <ul className='mt-4 grid grid-flow-row grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
+                {item.sites.map((website) => (
+                  <WebsiteEntry
+                    website={website.icon}
+                    key={website.icon.title}
+                    trustPositif={
+                      trustPositifData?.[
+                        website.website.replace(/(https?:\/\/)/, '').replace(/www\./, '')
+                      ] ?? false
+                    }
+                    indiWtf={blockData?.[website.website] ?? false}
+                    registered={data[website.website]}
+                  />
+                ))}
+              </ul>
+            </section>
+          ))}
 
           <ManualSearchSection />
 

diff --git a/yarn.lock b/yarn.lock
@@ -1389,6 +1389,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+https@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https/-/https-1.0.0.tgz#3c37c7ae1a8eeb966904a2ad1e975a194b7ed3a4"
+  integrity sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg==
+
 husky@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.1.tgz#511cb3e57de3e3190514ae49ed50f6bc3f50b3e9"