Skip to content

Commit

Permalink
Implement TrustPositif Checking & Refactor Index (#29)
Browse files Browse the repository at this point in the history
* Implement TrustPositif checking

* Moved websiteSections to own file in _data, move TrustPositif fetching to getStaticProps

* Split TP check request to chunks of 100 websites at a time

* Add TP indicator to registered but inaccessible websites

* Added extra explanation for TrustPositive status

* fix: await promise

* fix: grammar error

* feat: implement basic trycatching

Co-authored-by: Christopher Angelo <angelo@angeloanan.xyz>
  • Loading branch information
Meta502 and angeloanan committed Aug 1, 2022
1 parent cbec296 commit c10393f
Show file tree
Hide file tree
Showing 8 changed files with 181 additions and 85 deletions.
1 change: 1 addition & 0 deletions package.json
Expand Up @@ -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",
Expand Down
41 changes: 41 additions & 0 deletions 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
}
]
25 changes: 22 additions & 3 deletions 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'

Expand All @@ -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 = () => (
Expand Down Expand Up @@ -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 ${
Expand Down Expand Up @@ -88,6 +97,11 @@ export const WebsiteEntry = ({
<>
<HelpCircle aria-hidden />
Registered but inaccessible
{trustPositif && (
<small data-tip data-for='blocked'>
TP
</small>
)}
</>
)
) : !blocked ? (
Expand All @@ -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>
Expand Down
56 changes: 56 additions & 0 deletions 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 {}
}
}
21 changes: 16 additions & 5 deletions src/modules/ExplanationSection.tsx
Expand Up @@ -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>

Expand Down
13 changes: 13 additions & 0 deletions 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
104 changes: 27 additions & 77 deletions src/pages/index.tsx
Expand Up @@ -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'
Expand Down Expand Up @@ -34,6 +36,7 @@ const allWebsitesCombined = [
interface IndexPageProps {
PSEData: Record<string, boolean>
blockData: Record<string, boolean>
trustPositifData: Record<string, boolean>
}

export async function getStaticProps(
Expand All @@ -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'>
Expand All @@ -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 />

Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Expand Up @@ -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"
Expand Down

0 comments on commit c10393f

Please sign in to comment.