├── .gitignore
├── README.md
├── components
    ├── KandidatVaksin.js
    └── Phase.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── api
    │   ├── cekdiri.js
    │   ├── fetch.js
    │   ├── image.js
    │   ├── index.js
    │   ├── kandidat.js
    │   └── penelitian.js
    ├── image.js
    └── index.js
├── postcss.config.js
├── public
    ├── favicon.ico
    ├── robots.txt
    └── vercel.svg
├── styles
    └── globals.css
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | next.config.js
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Indonesia Menuju Herd Immunity
 2 | 
 3 | ![today](https://menujuherdimmunity.id/api/image)
 4 | [menujuherdimmunity.id](https://menujuherdimmunity.id/)
 5 | 
 6 | ## Pengkalkulasian
 7 | 
 8 | Pengkalkulasian kasar ini diambil dari (Total orang yang sembuh + Jumlah orang yang sudah divaksinasi) / Target vaksinasi) X 100%
 9 | 
10 | ## Pengambilan data
11 | 
12 | - Data kasus & sembuh perhari dari [Mathdroid covid-19 API](https://github.com/mathdroid/covid-19-api)
13 | - Data orang yang telah divaksinasi di*scrape* dari [Website resmi Kemenkes](https://www.kemkes.go.id/)
14 | - Penelitian vaksin dunia dikumpulkan dari [Bing.com/covid](https://www.bing.com/covid/local/indonesia?vert=vaccineTracker)
15 | - Data ketersediaan vaksin dikumpulkan dan dikurasi manual dari berbagai sumber
16 | 
17 | ### Teknologi yang digunakan
18 | 
19 | - Next.js
20 | - Tailwindcss
21 | - Cheerio (scraping)
22 | - DATO CMS
23 | 
24 | [Dukung di karyakarsa](https://karyakarsa.com/kikiding)
25 | 
26 | [Reach me on twitter](https://twitter.com/kikiding)
27 | 


--------------------------------------------------------------------------------
/components/KandidatVaksin.js:
--------------------------------------------------------------------------------
 1 | function KandidatVaksin(props) {
 2 | 	const data = props.data;
 3 | 	function color(status) {
 4 | 		if (status === 1) {
 5 | 			return '#898989';
 6 | 		}
 7 | 		if (status === 2) {
 8 | 			return '#FF6B00';
 9 | 		}
10 | 		if (status === 3) {
11 | 			return '#E1D800';
12 | 		}
13 | 		if (status === 4) {
14 | 			return '#0076CB';
15 | 		}
16 | 		if (status === 5) {
17 | 			return '#9900CF';
18 | 		}
19 | 		if (status === 6) {
20 | 			return '#45EE41';
21 | 		}
22 | 	}
23 | 
24 | 	return (
25 | 		<tr className="hover:bg-hoverBg">
26 | 			<td className="px-2 py-4 whitespace-no-wrap border-b    border-gray-500 ">
27 | 				<div className="flex flex-row">
28 | 					<div
29 | 						className="rounded-full h-2 w-2 my-auto mr-2"
30 | 						style={{
31 | 							backgroundColor: color(data.faseStatus),
32 | 						}}
33 | 					></div>
34 | 					{data.fase}
35 | 				</div>
36 | 			</td>
37 | 			<td className="px-2 py-4 whitespace-no-wrap border-b   border-gray-500">
38 | 				{data.dibuatOleh}
39 | 			</td>
40 | 			<td className="px-2 py-4 whitespace-no-wrap border-b   border-gray-500">
41 | 				{data.tipeVaksin}
42 | 			</td>
43 | 		</tr>
44 | 	);
45 | }
46 | 
47 | export default KandidatVaksin;
48 | 


--------------------------------------------------------------------------------
/components/Phase.js:
--------------------------------------------------------------------------------
 1 | function Phase(props) {
 2 | 	return (
 3 | 		<div className="flex-1 text-center ">
 4 | 			<p className="font-bold text-white lg:text-lg md:text-md text-xs md:h-8 h-10">
 5 | 				{props.phase}
 6 | 			</p>
 7 | 			<p className="font-medium text-gray-200 text-xs md:h-8 sm:h-10 h-16 ">
 8 | 				{props.desc}
 9 | 			</p>
10 | 
11 | 			<div
12 | 				className="flex h-1.5 mb-3 "
13 | 				style={{ backgroundColor: `#${props.color}` }}
14 | 			/>
15 | 			<p
16 | 				className="font-bold text-xl md:text-4xl my-3"
17 | 				style={{ color: `#${props.color}` }}
18 | 			>
19 | 				{props.number}
20 | 			</p>
21 | 		</div>
22 | 	);
23 | }
24 | 
25 | export default Phase;
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "menuju-hi-next",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "autoprefixer": "^10.2.3",
12 |     "axios": "^0.21.1",
13 |     "cheerio": "^1.0.0-rc.5",
14 |     "chrome-aws-lambda": "^5.5.0",
15 |     "cors": "^2.8.5",
16 |     "express": "^4.17.1",
17 |     "lodash": "^4.17.20",
18 |     "moment": "^2.29.1",
19 |     "next": "10.0.5",
20 |     "next-absolute-url": "^1.2.2",
21 |     "postcss": "^8.2.4",
22 |     "puppeteer": "^5.5.0",
23 |     "react": "17.0.1",
24 |     "react-anchor-link-smooth-scroll": "^1.0.12",
25 |     "react-dom": "17.0.1",
26 |     "request": "^2.88.2",
27 |     "tailwindcss": "^2.0.2"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 
7 | export default MyApp
8 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document';
 2 | 
 3 | export default class MyDocument extends Document {
 4 | 	render() {
 5 | 		return (
 6 | 			<Html lang="en">
 7 | 				<Head>
 8 | 					<script
 9 | 						async
10 | 						src="https://www.googletagmanager.com/gtag/js?id=G-3EXFY85QF0"
11 | 					></script>
12 | 					<script
13 | 						dangerouslySetInnerHTML={{
14 | 							__html: `window.dataLayer = window.dataLayer || [];
15 |                                         function gtag() {
16 |                                             dataLayer.push(arguments);
17 |                                         }
18 |                                         gtag('js', new Date());
19 |                             
20 |                                         gtag('config', 'G-3EXFY85QF0');
21 |                                     `,
22 | 						}}
23 | 					/>
24 | 				</Head>
25 | 				<body>
26 | 					<Main />
27 | 					<NextScript />
28 | 				</body>
29 | 			</Html>
30 | 		);
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/pages/api/cekdiri.js:
--------------------------------------------------------------------------------
 1 | import { fetchVaksinasiCekdiri } from './fetch';
 2 | import Cors from 'cors';
 3 | const cors = Cors({
 4 | 	methods: ['GET', 'HEAD'],
 5 | 	origin: ['https://kawalcovid19.id', 'https://menujuherdimmunity.id'],
 6 | });
 7 | 
 8 | function runMiddleware(req, res, fn) {
 9 | 	return new Promise((resolve, reject) => {
10 | 		fn(req, res, (result) => {
11 | 			if (result instanceof Error) {
12 | 				return reject(result);
13 | 			}
14 | 			return resolve(result);
15 | 		});
16 | 	});
17 | }
18 | 
19 | export default async function handler(req, res) {
20 | 	const allData = (await fetchVaksinasiCekdiri()) || [];
21 | 	const data = {
22 | 		latest: allData.monitoring[allData.monitoring.length - 1],
23 | 		populasiIndonesia: 271349889,
24 | 		lastUpdate: allData.last_updated,
25 | 	};
26 | 	await runMiddleware(req, res, cors);
27 | 	res.status(200).json(data);
28 | }
29 | 


--------------------------------------------------------------------------------
/pages/api/fetch.js:
--------------------------------------------------------------------------------
  1 | const API_URL = 'https://graphql.datocms.com';
  2 | const API_TOKEN = process.env.DATOCMS_API_TOKEN;
  3 | const prodUrl = 'https://menujuherdimmunity.id';
  4 | 
  5 | async function fetchAPI(query) {
  6 | 	const res = await fetch(API_URL, {
  7 | 		method: 'POST',
  8 | 		headers: {
  9 | 			'Content-Type': 'application/json',
 10 | 			Authorization: `Bearer ${API_TOKEN}`,
 11 | 		},
 12 | 		body: JSON.stringify({
 13 | 			query,
 14 | 		}),
 15 | 	});
 16 | 
 17 | 	const json = await res.json();
 18 | 	if (json.errors) {
 19 | 		console.error(json.errors);
 20 | 		throw new Error('Failed to fetch API');
 21 | 	}
 22 | 	return json.data;
 23 | }
 24 | 
 25 | export async function fetchCovidApi() {
 26 | 	const res = await fetch(`https://covid19.mathdro.id/api/countries/Indonesia`);
 27 | 
 28 | 	const json = await res.json();
 29 | 
 30 | 	if (json.errors) {
 31 | 		console.error(json.errors);
 32 | 		throw new Error('Failed to fetch Covid API');
 33 | 	}
 34 | 	return json;
 35 | }
 36 | 
 37 | export async function fetchCekDiri() {
 38 | 	const res = await fetch(`https://menujuherdimmunity.id/api/cekdiri`);
 39 | 
 40 | 	const json = await res.json();
 41 | 
 42 | 	if (json.errors) {
 43 | 		console.error(json.errors);
 44 | 		throw new Error('Failed to fetch Covid API');
 45 | 	}
 46 | 	return json;
 47 | }
 48 | 
 49 | export async function fetchVaksinasiCekdiri() {
 50 | 	const res = await fetch(`https://cekdiri.id/vaksinasi/`);
 51 | 
 52 | 	const json = await res.json();
 53 | 
 54 | 	if (json.errors) {
 55 | 		console.error(json.errors);
 56 | 		throw new Error('Failed to fetch cekdiri.id');
 57 | 	}
 58 | 	return json;
 59 | }
 60 | 
 61 | export async function fetchFromKemkes() {
 62 | 	const res = await fetch(`${prodUrl}/api`);
 63 | 
 64 | 	const json = await res.json();
 65 | 
 66 | 	if (json.errors) {
 67 | 		console.error(json.errors);
 68 | 		throw new Error('Failed to scrape Kemkes.go.id');
 69 | 	}
 70 | 	return json;
 71 | }
 72 | 
 73 | export async function getAll() {
 74 | 	const data = fetchAPI(`
 75 |      {
 76 |         allVaksins(orderBy: tanggal_ASC) {
 77 |         id
 78 |         jumlah
 79 |         link
 80 |         sumber
 81 |         tanggal
 82 |         deskripsi
 83 |         title
 84 |         }
 85 |         allDistribusiVaksins(orderBy: id_ASC) {
 86 |             id
 87 |             judul
 88 |             jumlah
 89 |             link
 90 |             deskripsi
 91 |             sumber
 92 |             bulan
 93 |           }
 94 |           penelitianVaksin {
 95 |             limitedApproval
 96 |             phase1
 97 |             phase2
 98 |             phase3
 99 |             preclinical
100 |             approved
101 |             lastUpdate
102 |           }
103 |           allKandidatVaksins(orderBy: faseStatus_DESC) {
104 |             id
105 |             tipeVaksin
106 |             dibuatOleh
107 |             fase
108 |             faseStatus
109 |           }
110 |           allTahapanImunisasis(orderBy: _createdAt_ASC) {
111 |             tahap
112 |             id
113 |             dosis
114 |             bulan
115 |           }
116 |     }
117 |     `);
118 | 	return data;
119 | }
120 | 
121 | export async function getPenilitian() {
122 | 	const data = fetchAPI(`
123 |      {
124 | 
125 |           penelitianVaksin {
126 |             limitedApproval
127 |             phase1
128 |             phase2
129 |             phase3
130 |             preclinical
131 |             approved
132 |             lastUpdate
133 |           }
134 | 
135 |     }
136 |     `);
137 | 	return data;
138 | }
139 | 
140 | export async function getKandidat() {
141 | 	const data = fetchAPI(`
142 |      {
143 | 
144 |           allKandidatVaksins(orderBy: faseStatus_DESC) {
145 |             id
146 |             tipeVaksin
147 |             dibuatOleh
148 |             fase
149 |             faseStatus
150 |           }
151 |           penelitianVaksin {
152 |             limitedApproval
153 |             phase1
154 |             phase2
155 |             phase3
156 |             preclinical
157 |             approved
158 |             lastUpdate
159 |           }
160 |     }
161 |     `);
162 | 	return data;
163 | }
164 | 


--------------------------------------------------------------------------------
/pages/api/image.js:
--------------------------------------------------------------------------------
 1 | import chrome from 'chrome-aws-lambda';
 2 | import puppeteer from 'puppeteer';
 3 | import absoluteUrl from 'next-absolute-url';
 4 | 
 5 | const handler = async (req, res) => {
 6 | 	let browser = null;
 7 | 	const { origin } = absoluteUrl(req);
 8 | 	const urlOrigin = `${origin}`;
 9 | 
10 | 	try {
11 | 		// Prod
12 | 		const url = `${urlOrigin}/image`;
13 | 		browser = await chrome.puppeteer.launch({
14 | 			args: chrome.args,
15 | 			defaultViewport: chrome.defaultViewport,
16 | 			executablePath: await chrome.executablePath,
17 | 			headless: chrome.headless,
18 | 			ignoreHTTPSErrors: chrome.headless,
19 | 		});
20 | 		const page = await browser.newPage();
21 | 
22 | 		await page.setViewport({
23 | 			width: 1024,
24 | 			height: 512,
25 | 		});
26 | 
27 | 		await page.goto(url, {
28 | 			waitUntil: 'load',
29 | 		});
30 | 
31 | 		const screenshot = await page.screenshot({
32 | 			encoding: 'binary',
33 | 		});
34 | 
35 | 		res.setHeader('content-type', 'image/png');
36 | 		res.setHeader('cache-control', 'public, max-age=120');
37 | 		res.send(screenshot);
38 | 	} catch (error) {
39 | 		res.status(500).json({ error });
40 | 	} finally {
41 | 		if (browser) {
42 | 			await browser.close();
43 | 		}
44 | 	}
45 | };
46 | 
47 | export default handler;
48 | 


--------------------------------------------------------------------------------
/pages/api/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const request = require('request');
 3 | const axios = require('axios');
 4 | const cheerio = require('cheerio');
 5 | const app = express();
 6 | 
 7 | // const PORT = process.env.PORT || 5000;
 8 | 
 9 | app.use((req, res, next) => {
10 | 	res.header('Access-Control-Allow-Origin', '*');
11 | 	next();
12 | });
13 | 
14 | app.get('/api', (req, res) => {
15 | 	request(
16 | 		{ url: 'https://www.kemkes.go.id/' },
17 | 		async (error, response, body) => {
18 | 			if (error || response.statusCode !== 200) {
19 | 				return res.status(500).json({ type: 'error', message: err.message });
20 | 			}
21 | 			res.setHeader('Content-Type', 'text/html');
22 | 			res.setHeader('Cache-Control', 's-max-age=1, stale-while-revalidate');
23 | 			res.json(await fetchFromKemkes());
24 | 		}
25 | 	);
26 | });
27 | 
28 | async function fetchFromKemkes() {
29 | 	const { data } = await axios.get('https://www.kemkes.go.id/');
30 | 	const $ = cheerio.load(data);
31 | 	let result = [];
32 | 	const date = $('li.info-date').text();
33 | 	const clearDate = date.split('Kondisi ');
34 | 
35 | 	let jsonData = {};
36 | 	let kasus = [];
37 | 	let lastKey = '';
38 | 	let counter = 1;
39 | 
40 | 	$('li.info-case')
41 | 		.find('td')
42 | 		.each(function (i, elem) {
43 | 			if (counter == 1) {
44 | 				lastKey = $(elem).text();
45 | 			}
46 | 			if (counter == 3) {
47 | 				jsonData[lastKey] = parseInt($(elem).text().split('.').join(''));
48 | 				kasus.push($(elem).text());
49 | 				lastKey = '';
50 | 				counter = 0;
51 | 			}
52 | 			counter++;
53 | 		});
54 | 
55 | 	const send = {
56 | 		tanggal: clearDate[1],
57 | 		jumlahDivaksin: jsonData['Vaksinasi-1'] + jsonData['Vaksinasi-2'],
58 | 	};
59 | 	return send;
60 | }
61 | 
62 | module.exports = app;
63 | 


--------------------------------------------------------------------------------
/pages/api/kandidat.js:
--------------------------------------------------------------------------------
 1 | import { getKandidat } from './fetch';
 2 | import Cors from 'cors';
 3 | const cors = Cors({
 4 | 	methods: ['GET', 'HEAD'],
 5 | 	origin: ['https://kawalcovid19.id', 'https://menujuherdimmunity.id'],
 6 | });
 7 | 
 8 | function runMiddleware(req, res, fn) {
 9 | 	return new Promise((resolve, reject) => {
10 | 		fn(req, res, (result) => {
11 | 			if (result instanceof Error) {
12 | 				return reject(result);
13 | 			}
14 | 
15 | 			return resolve(result);
16 | 		});
17 | 	});
18 | }
19 | 
20 | export default async function handler(req, res) {
21 | 	const allData = (await getKandidat()) || [];
22 | 	const data = {
23 | 		allKandidatVaksins: allData.allKandidatVaksins,
24 | 		lastUpdate: allData.penelitianVaksin.lastUpdate,
25 | 	};
26 | 	await runMiddleware(req, res, cors);
27 | 	res.status(200).json(data);
28 | }
29 | 


--------------------------------------------------------------------------------
/pages/api/penelitian.js:
--------------------------------------------------------------------------------
 1 | import { getPenilitian } from './fetch';
 2 | import Cors from 'cors';
 3 | const cors = Cors({
 4 | 	methods: ['GET', 'HEAD'],
 5 | 	origin: ['https://kawalcovid19.id', 'https://menujuherdimmunity.id'],
 6 | });
 7 | 
 8 | function runMiddleware(req, res, fn) {
 9 | 	return new Promise((resolve, reject) => {
10 | 		fn(req, res, (result) => {
11 | 			if (result instanceof Error) {
12 | 				return reject(result);
13 | 			}
14 | 
15 | 			return resolve(result);
16 | 		});
17 | 	});
18 | }
19 | 
20 | export default async function handler(req, res) {
21 | 	const allData = (await getPenilitian()) || [];
22 | 	await runMiddleware(req, res, cors);
23 | 	res.status(200).json(allData);
24 | }
25 | 


--------------------------------------------------------------------------------
/pages/image.js:
--------------------------------------------------------------------------------
  1 | import {
  2 | 	getAll,
  3 | 	fetchCovidApi,
  4 | 	fetchFromKemkes,
  5 | 	fetchCekDiri,
  6 | } from './api/fetch';
  7 | var _ = require('lodash');
  8 | import moment from 'moment';
  9 | 
 10 | export default function SocialImage({ allData, covidData, kemkesData }) {
 11 | 	const dataVax = allData.allVaksins;
 12 | 
 13 | 	const recovered = covidData.recovered.value;
 14 | 	const lastUpdate = covidData.lastUpdate;
 15 | 
 16 | 	const dateDivaksin = kemkesData.lastUpdate;
 17 | 	const totalDivaksin = kemkesData.latest.vaksinasi2;
 18 | 
 19 | 	const targetVaksinasi = 181554465;
 20 | 
 21 | 	const totalVaksin = _.sumBy(dataVax, function (o) {
 22 | 		return o.jumlah;
 23 | 	});
 24 | 
 25 | 	function numberWithCommas(x) {
 26 | 		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 27 | 	}
 28 | 
 29 | 	function countHI() {
 30 | 		const totalImun = recovered + totalDivaksin;
 31 | 		const percentage = totalImun / targetVaksinasi;
 32 | 		return percentage * 100;
 33 | 	}
 34 | 	return (
 35 | 		<div
 36 | 			className="bg-bg flex flex-row px-5"
 37 | 			style={{ width: 1024, height: 512 }}
 38 | 		>
 39 | 			<div className="m-auto text-center p-5 h-auto w-auto">
 40 | 				<h1 className="text-gray-200 text-3xl  font-medium">Indonesia</h1>
 41 | 				<p className="text-6xl font-bold m-1  " style={{ color: '#20BFA9' }}>
 42 | 					{totalDivaksin == 0 ? 'Calculating..' : countHI().toFixed(4) + ' %'}
 43 | 				</p>
 44 | 				<p className="text-gray-200 text-3xl font-medium">
 45 | 					menuju <i>herd immunity</i> covid-19
 46 | 				</p>
 47 | 				<div className="my-4 ">
 48 | 					<div
 49 | 						className="shadow w-full rounded "
 50 | 						style={{ backgroundColor: '#232228' }}
 51 | 					>
 52 | 						<div
 53 | 							className="text-xs leading-none py-1 text-center h-8  rounded"
 54 | 							style={{
 55 | 								width: countHI().toFixed(4) + '%',
 56 | 								backgroundColor: '#20BFA9',
 57 | 							}}
 58 | 						></div>
 59 | 					</div>
 60 | 				</div>
 61 | 				<div className="text-center mx-auto ">
 62 | 					<p className="font-medium text-center text-gray-400 text-xs ">
 63 | 						Catatan: Pengkalkulasian kasar ini diambil dari ((Total orang yang
 64 | 						sembuh + Jumlah orang yang sudah menerima vaksin dosis 2) / Target
 65 | 						vaksinasi) X 100%
 66 | 					</p>
 67 | 					<p className="font-sm text-center text-gray-400 text-xs my-2">
 68 | 						Disclaimer: Penentuan pengkalkulasian diambil tanpa dampingan ahli,
 69 | 						hanya berdasarkan riset.
 70 | 					</p>
 71 | 					<p className="font-medium text-center text-gray-400 text-sm mt-2">
 72 | 						{moment().format('DD MMMM YYYY')}
 73 | 					</p>
 74 | 				</div>
 75 | 			</div>
 76 | 			<div className="my-auto  ">
 77 | 				<div className="grid grid-cols gap-3">
 78 | 					<div className="">
 79 | 						<p className="font-semibold text-xl text-white">
 80 | 							Total orang yang sembuh
 81 | 						</p>
 82 | 						<p className="font-bold text-4xl my-2" style={{ color: '#2DCDE5' }}>
 83 | 							{numberWithCommas(recovered)}
 84 | 						</p>
 85 | 						<p className="text-gray-500">
 86 | 							sumber:{' '}
 87 | 							<a
 88 | 								href="https://github.com/mathdroid/covid-19-api"
 89 | 								className="font-semibold hover:underline"
 90 | 								target="_blank"
 91 | 								rel="noopener noreferrer"
 92 | 							>
 93 | 								Mathdroid covid-19 API
 94 | 							</a>{' '}
 95 | 							({moment(lastUpdate).format('YYYY/MM/d HH:mm')})
 96 | 						</p>
 97 | 					</div>
 98 | 					<div className="">
 99 | 						<p className="font-semibold text-xl text-white">
100 | 							Total orang yang telah divaksinasi
101 | 						</p>
102 | 						<p className="font-bold text-4xl my-2" style={{ color: '#45EE41' }}>
103 | 							{numberWithCommas(totalDivaksin)}
104 | 						</p>
105 | 						<p className="text-gray-500">
106 | 							sumber:{' '}
107 | 							<a
108 | 								className="font-semibold hover:underline"
109 | 								href="https://www.kemkes.go.id/"
110 | 								target="_blank"
111 | 								rel="noopener noreferrer"
112 | 							>
113 | 								Website Resmi Kemenkes (Last scraped: {dateDivaksin})
114 | 							</a>
115 | 						</p>
116 | 					</div>
117 | 					<div className="">
118 | 						<p className="font-semibold text-xl text-white">
119 | 							Total sasaran vaksinasi
120 | 						</p>
121 | 						<p className="font-bold text-4xl my-2" style={{ color: '#FFB800' }}>
122 | 							±{numberWithCommas(targetVaksinasi)}
123 | 						</p>
124 | 						<p className="text-gray-500">
125 | 							sumber:{' '}
126 | 							<a
127 | 								className="font-semibold hover:underline"
128 | 								href="https://www.kemkes.go.id/"
129 | 								target="_blank"
130 | 								rel="noopener noreferrer"
131 | 							>
132 | 								Website Resmi Kemenkes
133 | 							</a>
134 | 						</p>
135 | 					</div>
136 | 				</div>
137 | 			</div>
138 | 		</div>
139 | 	);
140 | }
141 | 
142 | export async function getServerSideProps() {
143 | 	const allData = (await getAll()) || [];
144 | 	const covidData = (await fetchCovidApi()) || [];
145 | 	const kemkesData = (await fetchCekDiri()) || [];
146 | 
147 | 	return {
148 | 		props: { allData, covidData, kemkesData },
149 | 	};
150 | }
151 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import Head from 'next/head';
  2 | import {
  3 | 	getAll,
  4 | 	fetchCovidApi,
  5 | 	fetchFromKemkes,
  6 | 	fetchCekDiri,
  7 | } from './api/fetch';
  8 | import AnchorLink from 'react-anchor-link-smooth-scroll';
  9 | import moment from 'moment';
 10 | import KandidatVaksin from '../components/KandidatVaksin';
 11 | import Phase from '../components/Phase';
 12 | var _ = require('lodash');
 13 | 
 14 | export default function Home({ allData, covidData, kemkesData }) {
 15 | 	const dataVax = allData.allVaksins;
 16 | 	const distribusiVax = allData.allTahapanImunisasis;
 17 | 	const penelitianVax = allData.penelitianVaksin;
 18 | 	const kandidatVax = allData.allKandidatVaksins;
 19 | 
 20 | 	const totalCase = covidData.confirmed.value;
 21 | 	const recovered = covidData.recovered.value;
 22 | 	const lastUpdate = covidData.lastUpdate;
 23 | 
 24 | 	const dateDivaksin = kemkesData.lastUpdate;
 25 | 	const totalDivaksin = kemkesData.latest.vaksinasi2;
 26 | 
 27 | 	const populasiIndonesia = kemkesData.populasiIndonesia;
 28 | 	const targetVaksinasi = 181554465;
 29 | 	// const targetVaksinasi = kemkesData.latest.total_sasaran_vaksinasi;
 30 | 
 31 | 	const totalVaksin = _.sumBy(dataVax, function (o) {
 32 | 		return o.jumlah;
 33 | 	});
 34 | 
 35 | 	function numberWithCommas(x) {
 36 | 		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 37 | 	}
 38 | 
 39 | 	function countHI() {
 40 | 		const totalImun = recovered + totalDivaksin;
 41 | 		const percentage = totalImun / targetVaksinasi;
 42 | 		return percentage * 100;
 43 | 	}
 44 | 	const urlImage = `https://menujuherdimmunity.id/api/image`;
 45 | 	return (
 46 | 		<>
 47 | 			<Head>
 48 | 				<link rel="icon" href="/favicon.ico" />
 49 | 				<title>Indonesia Menuju Herd Immunity</title>
 50 | 				<meta
 51 | 					name="description"
 52 | 					content="Seberapa jauh sih kita menuju herd immunity covid-19?"
 53 | 				/>
 54 | 				<meta property="og:image" content={urlImage} />
 55 | 				<meta name="twitter:card" content="summary_large_image" />
 56 | 				<meta name="twitter:title" content="Indonesia Menuju Herd Immunity" />
 57 | 				<meta name="twitter:image" content={urlImage} />
 58 | 				<meta name="twitter:domain" content="https://menujuherdimmunity.id" />
 59 | 				<meta
 60 | 					name="viewport"
 61 | 					content="initial-scale=1.0, width=device-width"
 62 | 					key="viewport"
 63 | 				/>
 64 | 			</Head>
 65 | 			<div id="home" className="bg-bg flex h-screen flex-col ">
 66 | 				<div className="container max-w-screen-lg m-auto text-center px-5 md:px-20">
 67 | 					<h1 className="text-gray-200 text-xl md:text-4xl  font-medium">
 68 | 						Indonesia
 69 | 					</h1>
 70 | 					<p
 71 | 						className="text-4xl md:text-7xl  font-bold m-1 md:m-3 "
 72 | 						style={{ color: '#20BFA9' }}
 73 | 					>
 74 | 						{totalDivaksin == 0 ? 'Calculating..' : countHI().toFixed(4) + ' %'}
 75 | 					</p>
 76 | 					<p className="text-gray-200 text-xl md:text-4xl  font-medium">
 77 | 						menuju <i>herd immunity</i> covid-19
 78 | 					</p>
 79 | 					<div className="my-4 lg:my-10 ">
 80 | 						<div
 81 | 							className="shadow w-full rounded "
 82 | 							style={{ backgroundColor: '#232228' }}
 83 | 						>
 84 | 							<div
 85 | 								className="text-xs leading-none py-1 text-center h-8 md:h-10 lg:h-12 rounded"
 86 | 								style={{
 87 | 									width: countHI().toFixed(4) + '%',
 88 | 									backgroundColor: '#20BFA9',
 89 | 								}}
 90 | 							></div>
 91 | 						</div>
 92 | 					</div>
 93 | 					<div className="text-center mx-auto ">
 94 | 						<p className="font-medium text-center text-gray-400 text-xs ">
 95 | 							Catatan: Pengkalkulasian kasar ini diambil dari ((Total orang yang
 96 | 							sembuh + Jumlah orang yang sudah menerima vaksin dosis 2) / Target
 97 | 							vaksinasi) X 100%
 98 | 						</p>
 99 | 						<p className="font-sm text-center text-gray-400 text-sm my-2">
100 | 							Disclaimer: Penentuan pengkalkulasian diambil tanpa dampingan
101 | 							ahli, hanya berdasarkan riset.
102 | 						</p>
103 | 						<AnchorLink
104 | 							className="text-lg font-medium "
105 | 							href="#data"
106 | 							style={{ color: '#20BFA9' }}
107 | 						>
108 | 							Lihat datanya
109 | 						</AnchorLink>
110 | 					</div>
111 | 				</div>
112 | 			</div>
113 | 			<div id="data" className="bg-bg flex min-h-screen h-auto  flex-col">
114 | 				<div className="container m-auto max-w-screen-lg  px-5">
115 | 					<div className="mx-auto text-center  m-5  ">
116 | 						<p className="font-semibold text-xl text-white">
117 | 							Total Kasus covid-19 di Indonesia
118 | 						</p>
119 | 						<p
120 | 							className="font-bold text-4xl my-2 "
121 | 							style={{ color: '#C82C2C' }}
122 | 						>
123 | 							±{numberWithCommas(totalCase)}
124 | 						</p>
125 | 						<p className="text-gray-500">
126 | 							sumber:{' '}
127 | 							<a
128 | 								href="https://github.com/mathdroid/covid-19-api"
129 | 								className="font-semibold hover:underline"
130 | 								target="_blank"
131 | 								rel="noopener noreferrer"
132 | 							>
133 | 								Mathdroid covid-19 API
134 | 							</a>{' '}
135 | 							({moment(lastUpdate).format('DD MMM YYYY HH:mm')})
136 | 						</p>
137 | 					</div>
138 | 					<div className="flex gap-6 flex-col  md:flex-row ">
139 | 						<div
140 | 							className="p-6 rounded-xl text-gray-200 flex-1 "
141 | 							style={{ backgroundColor: '#232228' }}
142 | 						>
143 | 							<p className="font-semibold text-xl text-gray-100">
144 | 								Apa itu <i>Herd Immunity</i>
145 | 							</p>
146 | 							<p className="font-normal text-md md:text-lg mt-2 leading-relaxed text-gray-200">
147 | 								<i>Herd Immunity</i> adalah perlindungan tidak langsung dari
148 | 								penyakit menular yang terjadi ketika suatu populasi kebal baik
149 | 								melalui vaksinasi atau kekebalan yang dikembangkan melalui
150 | 								infeksi sebelumnya.
151 | 							</p>
152 | 
153 | 							<p className="font-normal text-md md:text-lg leading-relaxed mt-2">
154 | 								Persentase orang yang perlu memiliki antibodi untuk mencapai
155 | 								<i> herd immunity</i> terhadap suatu penyakit berbeda-beda dari
156 | 								satu penyakit ke penyakit lain. Sebagai contoh, untuk mencapai
157 | 								<i> herd immunity</i> terhadap campak, sekitar <b>95%</b>{' '}
158 | 								populasi harus diimunisasi. 5% penduduk lain akan terlindungi
159 | 								karena campak tidak akan menyebar di antara orang-orang yang
160 | 								diimunisasi. Untuk polio, ambangnya adalah sekitar 80%.
161 | 							</p>
162 | 							<p className="text-gray-400 mt-2 ">
163 | 								sumber:{' '}
164 | 								<a
165 | 									className="font-semibold hover:underline"
166 | 									href="https://www.who.int/indonesia/news/novel-coronavirus/qa/qa-lockdown-and-herd-immunity"
167 | 									target="_blank"
168 | 									rel="noopener noreferrer"
169 | 								>
170 | 									WHO
171 | 								</a>
172 | 							</p>
173 | 							<p className="font-normal text-lg mt-2 leading-relaxed">
174 | 								Indonesia sendiri menargetkan vaksinasi covid-19 ±66,9% dari
175 | 								total populasi yaitu 181,554,465.
176 | 							</p>
177 | 							<p className="text-gray-400 mt-2 ">
178 | 								sumber:{' '}
179 | 								<a
180 | 									className="font-semibold hover:underline"
181 | 									href="https://twitter.com/KemenkesRI/status/1352621085393440771"
182 | 									target="_blank"
183 | 									rel="noopener noreferrer"
184 | 								>
185 | 									@KemenkesRI
186 | 								</a>
187 | 							</p>
188 | 						</div>
189 | 						<div className="flex-1 md:my-auto md:my-10 my-20  ">
190 | 							<div className="grid grid-cols gap-4 px-6">
191 | 								<div className="">
192 | 									<p className="font-semibold text-xl text-white">
193 | 										Total orang yang sembuh dari covid-19
194 | 									</p>
195 | 									<p
196 | 										className="font-bold text-4xl my-2"
197 | 										style={{ color: '#2DCDE5' }}
198 | 									>
199 | 										{numberWithCommas(recovered)}
200 | 									</p>
201 | 									<p className="text-gray-500">
202 | 										sumber:{' '}
203 | 										<a
204 | 											href="https://github.com/mathdroid/covid-19-api"
205 | 											className="font-semibold hover:underline"
206 | 											target="_blank"
207 | 											rel="noopener noreferrer"
208 | 										>
209 | 											Mathdroid covid-19 API
210 | 										</a>{' '}
211 | 										({moment(lastUpdate).format('DD MMM YYYY HH:mm')})
212 | 									</p>
213 | 								</div>
214 | 								<div className="">
215 | 									<p className="font-semibold text-xl text-white">
216 | 										Total dosis vaksin yang dimiliki Indonesia
217 | 									</p>
218 | 									<p
219 | 										className="font-bold text-4xl my-2"
220 | 										style={{ color: '#45EE41' }}
221 | 									>
222 | 										{numberWithCommas(totalVaksin)}
223 | 									</p>
224 | 									<p className="text-gray-500">
225 | 										sumber: Diambil dari berbagai sumber
226 | 									</p>
227 | 								</div>
228 | 								<div className="">
229 | 									<p className="font-semibold text-xl text-white">
230 | 										Total penduduk Indonesia
231 | 									</p>
232 | 									<p
233 | 										className="font-bold text-4xl my-2"
234 | 										style={{ color: '#4186EE' }}
235 | 									>
236 | 										±{numberWithCommas(populasiIndonesia)}
237 | 									</p>
238 | 									<p className="text-gray-500">
239 | 										sumber:{' '}
240 | 										<a
241 | 											className="font-semibold hover:underline"
242 | 											href="https://dukcapil.kemendagri.go.id/berita/baca/642/cetak-sejarah-jumlah-penduduk-2020-versi-bps-dan-kemendagri-sama"
243 | 											target="_blank"
244 | 											rel="noopener noreferrer"
245 | 										>
246 | 											Kemendagri (Desember 2020)
247 | 										</a>
248 | 									</p>
249 | 								</div>
250 | 								<div className="">
251 | 									<p className="font-semibold text-xl text-white">
252 | 										Total sasaran vaksinasi
253 | 									</p>
254 | 									<p
255 | 										className="font-bold text-4xl my-2"
256 | 										style={{ color: '#FFB800' }}
257 | 									>
258 | 										±{numberWithCommas(targetVaksinasi)}
259 | 									</p>
260 | 									<p className="text-gray-500">
261 | 										sumber:{' '}
262 | 										<a
263 | 											className="font-semibold hover:underline"
264 | 											href="https://www.kemkes.go.id/"
265 | 											target="_blank"
266 | 											rel="noopener noreferrer"
267 | 										>
268 | 											Website Resmi Kemenkes
269 | 										</a>
270 | 									</p>
271 | 								</div>
272 | 							</div>
273 | 						</div>
274 | 					</div>
275 | 					<div className="mx-auto text-center m-5">
276 | 						<p className="font-semibold text-xl text-white">
277 | 							Orang yang telah divaksinasi(2 Dosis)
278 | 						</p>
279 | 						<p className="font-bold text-4xl my-2" style={{ color: '#FFF' }}>
280 | 							±
281 | 							{totalDivaksin == 0
282 | 								? 'Getting data..'
283 | 								: numberWithCommas(totalDivaksin)}
284 | 						</p>
285 | 						<p className="text-gray-500">
286 | 							sumber:{' '}
287 | 							<a
288 | 								className="font-semibold hover:underline"
289 | 								href="https://www.kemkes.go.id/"
290 | 								target="_blank"
291 | 								rel="noopener noreferrer"
292 | 							>
293 | 								Website Resmi Kemenkes (
294 | 								{moment(dateDivaksin).format('DD MMM YYYY HH:mm')})
295 | 							</a>
296 | 						</p>
297 | 					</div>
298 | 					<div className="text-center mx-auto ">
299 | 						<AnchorLink
300 | 							className="text-lg font-bold "
301 | 							href="#distribusi"
302 | 							style={{ color: '#20BFA9' }}
303 | 						>
304 | 							Target Tahapan Vaksinasi COVID-19
305 | 						</AnchorLink>
306 | 					</div>
307 | 				</div>
308 | 			</div>
309 | 
310 | 			{/* <div
311 | 				id="vaksin"
312 | 				className="bg-bg flex  h-auto sm:py-20 py-10 flex-col min-h-screen "
313 | 			>
314 | 				<div className="container-small m-auto max-w-screen-lg  px-5">
315 | 					<h1 className="font-bold text-2xl md:text-4xl text-gray-100 text-center">
316 | 						Ketersediaan Vaksin
317 | 					</h1>
318 | 					<p className="text-center text-gray-300 font-medium text-lg mt-2">
319 | 						Jumlah dosis vaksin yang tersedia di Indonesia (diambil dari
320 | 						berbagai sumber)
321 | 					</p>
322 | 
323 | 					<div className="flex flex-col mt-10">
324 | 						{dataVax.map((vax, index) => (
325 | 							<div className="p-1" key={vax.id}>
326 | 								{index !== 0 && (
327 | 									<div className="h-4 w-4 rounded-full w-1 mx-auto bg-gray-700" />
328 | 								)}
329 | 								{index > 0 && (
330 | 									<div
331 | 										className="h-20 w-1 mx-auto rounded"
332 | 										style={{ backgroundColor: '#232228' }}
333 | 									/>
334 | 								)}
335 | 
336 | 								<div className="h-4 w-4 rounded-full w-1 mx-auto bg-gray-700" />
337 | 								<p className="font-semibold text-lg mt-2 text-center text-gray-200">
338 | 									{vax.title}
339 | 								</p>
340 | 								<p className="font-bold sm:text-6xl text-center text-white text-4xl">
341 | 									{numberWithCommas(vax.jumlah)}
342 | 								</p>
343 | 								<p className="font-normal text-lg text-center text-gray-400 mt-2">
344 | 									{moment(vax.tanggal).format('DD MMMM YYYY')}
345 | 								</p>
346 | 								<p className="font-normal text-md text-center text-gray-500">
347 | 									sumber:{' '}
348 | 									<a
349 | 										className="text-lg font-medium "
350 | 										href={vax.link}
351 | 										style={{ color: '#20BFA9' }}
352 | 										target="_blank"
353 | 										rel="noopener noreferrer"
354 | 									>
355 | 										{vax.sumber}
356 | 									</a>
357 | 								</p>
358 | 							</div>
359 | 						))}
360 | 					</div>
361 | 				</div>
362 | 				<div className="text-center mx-auto ">
363 | 					<AnchorLink
364 | 						className="text-lg font-bold "
365 | 						href="#distribusi"
366 | 						style={{ color: '#20BFA9' }}
367 | 					>
368 | 						Target Tahapan Vaksinasi COVID-19
369 | 					</AnchorLink>
370 | 				</div>
371 | 			</div> */}
372 | 			<div
373 | 				id="distribusi"
374 | 				className="bg-bg flex  h-auto sm:py-20 py-10 flex-col min-h-screen "
375 | 			>
376 | 				<div className="container-small m-auto max-w-screen-lg  px-5">
377 | 					<h1 className="font-bold text-2xl md:text-4xl text-gray-100 text-center">
378 | 						Target Tahapan Vaksinasi COVID-19
379 | 					</h1>
380 | 					<p className="text-center text-gray-300 font-medium text-lg mt-2">
381 | 						Pemerintah menargetkan vaksin COVID-19 tersedia secara bertahap
382 | 						mempertimbangkan ketersediaan vaksin, tenaga kesehatan, serta sarana
383 | 						dan prasarana kesehatan.
384 | 					</p>
385 | 					<p className="font-normal text-md text-center text-gray-500">
386 | 						sumber:{' '}
387 | 						<a
388 | 							className="text-lg font-medium "
389 | 							href="http://indonesiabaik.id/infografis/target-tahapan-vaksinasi-covid-19"
390 | 							style={{ color: '#20BFA9' }}
391 | 							target="_blank"
392 | 							rel="noopener noreferrer"
393 | 						>
394 | 							indonesiabaik.id
395 | 						</a>
396 | 					</p>
397 | 
398 | 					<div className="flex flex-col mt-10">
399 | 						{distribusiVax.map((vax, index) => (
400 | 							<div className="p-1" key={vax.id}>
401 | 								{index !== 0 && (
402 | 									<div className="h-4 w-4 rounded-full w-1 mx-auto bg-gray-700" />
403 | 								)}
404 | 								{index > 0 && (
405 | 									<div
406 | 										className="h-20 w-1 mx-auto rounded"
407 | 										style={{ backgroundColor: '#232228' }}
408 | 									/>
409 | 								)}
410 | 
411 | 								<div className="h-4 w-4 rounded-full w-1 mx-auto bg-gray-700" />
412 | 								<p className="font-bold text-lg text-center text-white mt-2">
413 | 									{vax.tahap}
414 | 								</p>
415 | 								<p className="font-normal text-lg text-center text-gray-400 ">
416 | 									{vax.bulan}
417 | 								</p>
418 | 								<p className="font-semibold text-lg text-center text-gray-200">
419 | 									{vax.judul}
420 | 								</p>
421 | 
422 | 								<p className="font-bold sm:text-6xl text-center text-white text-4xl">
423 | 									{numberWithCommas(vax.dosis)}
424 | 								</p>
425 | 								<p className="font-semibold text-lg  text-center text-gray-300">
426 | 									Dosis
427 | 								</p>
428 | 							</div>
429 | 						))}
430 | 					</div>
431 | 				</div>
432 | 				<div className="text-center mx-auto mt-6 ">
433 | 					<AnchorLink
434 | 						className="text-lg font-bold "
435 | 						href="#penelitian"
436 | 						style={{ color: '#20BFA9' }}
437 | 					>
438 | 						Penelitian Vaksin
439 | 					</AnchorLink>
440 | 				</div>
441 | 			</div>
442 | 			<div
443 | 				id="penelitian"
444 | 				className="bg-bg flex h-screen sm:py-20 py-10 flex-col "
445 | 			>
446 | 				<div className="container m-auto max-w-screen-lg  px-5  ">
447 | 					<h1 className="font-bold text-2xl md:text-4xl text-gray-100 text-center">
448 | 						Penelitian Vaksin Dunia
449 | 					</h1>
450 | 					<p className="text-center text-gray-500 font-medium text-lg mt-2">
451 | 						Dikumpulkan dari bing.com/covid (terakhir diupdate pada{' '}
452 | 						{moment(penelitianVax.lastUpdate).format('DD MMM YYYY')})
453 | 					</p>
454 | 					<div className="flex flex-row  my-10">
455 | 						<Phase
456 | 							phase="Preclinical"
457 | 							desc="Not yet in human trials"
458 | 							color="898989"
459 | 							number={penelitianVax.preclinical}
460 | 						/>
461 | 						<Phase
462 | 							phase="Phase I"
463 | 							desc="Not yet in human trials"
464 | 							color="FF6B00"
465 | 							number={penelitianVax.phase1}
466 | 						/>
467 | 						<Phase
468 | 							phase="Phase II"
469 | 							desc="Extended safety trials"
470 | 							color="E1D800"
471 | 							number={penelitianVax.phase2}
472 | 						/>
473 | 						<Phase
474 | 							phase="Phase III"
475 | 							desc="Large-scale trials"
476 | 							color="0076CB"
477 | 							number={penelitianVax.phase3}
478 | 						/>
479 | 						<Phase
480 | 							phase="Limited Approval"
481 | 							desc="Approved for limited use"
482 | 							color="9900CF"
483 | 							number={penelitianVax.limitedApproval}
484 | 						/>
485 | 					</div>
486 | 					<div className="flex flex-row  my-10">
487 | 						<Phase
488 | 							phase="Approved"
489 | 							desc="Approved for human use"
490 | 							color="45EE41"
491 | 							number={penelitianVax.approved}
492 | 						/>
493 | 					</div>
494 | 				</div>
495 | 				<div className="text-center mx-auto ">
496 | 					<AnchorLink
497 | 						className="text-lg font-bold "
498 | 						href="#kandidat"
499 | 						style={{ color: '#20BFA9' }}
500 | 					>
501 | 						Kandidat Vaksin
502 | 					</AnchorLink>
503 | 				</div>
504 | 			</div>
505 | 			<div
506 | 				id="kandidat"
507 | 				className="bg-bg flex min-h-screen h-auto sm:py-20 flex-col"
508 | 			>
509 | 				<div className="container m-auto max-w-screen-lg  px-5  ">
510 | 					<h1 className="font-bold text-2xl md:text-4xl text-gray-100 text-center">
511 | 						Kandidat Vaksin Teratas
512 | 					</h1>
513 | 					<p className="text-center text-gray-500 font-medium text-lg mt-2 mb-10">
514 | 						Dikumpulkan dari bing.com/covid (terakhir diupdate pada{' '}
515 | 						{moment(penelitianVax.lastUpdate).format('DD MMM YYYY')})
516 | 					</p>
517 | 
518 | 					<div
519 | 						className="py-2 px-6 pb-6 rounded-xl text-gray-200 overflow-auto "
520 | 						style={{ backgroundColor: '#232228' }}
521 | 					>
522 | 						<table className="table-auto min-w-full whitespace-nowrap">
523 | 							<thead>
524 | 								<tr>
525 | 									<th className=" text-semibold text-left py-4 whitespace-no-wrap border-b-2 border-gray-200 ">
526 | 										Tahapan
527 | 									</th>
528 | 									<th className=" text-semibold text-left py-4 whitespace-no-wrap border-b-2 border-gray-200 ">
529 | 										Dibuat oleh
530 | 									</th>
531 | 									<th className="text-semibold text-left py-4 whitespace-no-wrap border-b-2 border-gray-200 ">
532 | 										Tipe Vaksin
533 | 									</th>
534 | 								</tr>
535 | 							</thead>
536 | 							<tbody>
537 | 								{kandidatVax.map((item) => (
538 | 									<KandidatVaksin key={item.id} data={item} />
539 | 								))}
540 | 							</tbody>
541 | 						</table>
542 | 					</div>
543 | 				</div>
544 | 			</div>
545 | 			<div className=" bg-bg p-5">
546 | 				<div className="max-w-screen-sm flex md:flex-row flex-col mx-auto gap-2">
547 | 					<div className="text-center mx-auto  ">
548 | 						<AnchorLink
549 | 							className="text-lg font-bold "
550 | 							href="#home"
551 | 							style={{ color: '#20BFA9' }}
552 | 						>
553 | 							Kembali ke atas
554 | 						</AnchorLink>
555 | 					</div>
556 | 					<div className="text-center mx-auto  ">
557 | 						<a
558 | 							className="text-lg font-bold "
559 | 							href="https://twitter.com/intent/tweet?url=https://menujuherdimmunity.id/&text=Seberapa jauh sih kita menuju herd immunity covid-19?"
560 | 							target="_blank"
561 | 							style={{ color: '#20BFA9' }}
562 | 						>
563 | 							Bagikan ini ke twitter
564 | 						</a>
565 | 					</div>
566 | 				</div>
567 | 			</div>
568 | 
569 | 			<div
570 | 				className="  flex flex-col mx-auto p-5"
571 | 				style={{ backgroundColor: '#1e1d20' }}
572 | 			>
573 | 				<p className="font-medium text-center text-gray-400">
574 | 					Semua sumber sudah tertera
575 | 				</p>
576 | 				<p className="font-medium text-center text-gray-400">
577 | 					Dibuat & dikelola oleh{' '}
578 | 					<a
579 | 						className="font-medium text-center "
580 | 						href="https://twitter.com/kikiding"
581 | 						target="_blank"
582 | 						rel="noopener noreferrer"
583 | 						style={{ color: '#20BFA9' }}
584 | 					>
585 | 						@kikiding
586 | 					</a>
587 | 				</p>
588 | 				<a
589 | 					className="font-medium text-center "
590 | 					href="https://karyakarsa.com/kikiding"
591 | 					target="_blank"
592 | 					rel="noopener noreferrer"
593 | 					style={{ color: '#20BFA9' }}
594 | 				>
595 | 					🙌 Dukung!
596 | 				</a>
597 | 			</div>
598 | 		</>
599 | 	);
600 | }
601 | 
602 | export async function getServerSideProps() {
603 | 	const allData = (await getAll()) || [];
604 | 	const covidData = (await fetchCovidApi()) || [];
605 | 	const kemkesData = (await fetchCekDiri()) || [];
606 | 
607 | 	return {
608 | 		props: { allData, covidData, kemkesData },
609 | 	};
610 | }
611 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {},
5 | 	},
6 | };
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingki/menuju-herd-immunity/b693a0631351553d3be8af2ea22c78f3d8c58015/public/favicon.ico


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-Agent: *
2 | Allow: /
3 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | const colors = require('tailwindcss/colors');
  2 | 
  3 | module.exports = {
  4 | 	purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  5 | 	presets: [],
  6 | 	darkMode: false, // or 'media' or 'class'
  7 | 
  8 | 	theme: {
  9 | 		screens: {
 10 | 			sm: '640px',
 11 | 			md: '768px',
 12 | 			lg: '1024px',
 13 | 			xl: '1280px',
 14 | 			'2xl': '1536px',
 15 | 		},
 16 | 		colors: {
 17 | 			transparent: 'transparent',
 18 | 			current: 'currentColor',
 19 | 			bg: '#060508',
 20 | 			hoverBg: '#2E2E32',
 21 | 			black: colors.black,
 22 | 			white: colors.white,
 23 | 			gray: colors.coolGray,
 24 | 			red: colors.red,
 25 | 			yellow: colors.amber,
 26 | 			green: colors.emerald,
 27 | 			blue: colors.blue,
 28 | 			indigo: colors.indigo,
 29 | 			purple: colors.violet,
 30 | 			pink: colors.pink,
 31 | 		},
 32 | 		spacing: {
 33 | 			px: '1px',
 34 | 			0: '0px',
 35 | 			0.5: '0.125rem',
 36 | 			1: '0.25rem',
 37 | 			1.5: '0.375rem',
 38 | 			2: '0.5rem',
 39 | 			2.5: '0.625rem',
 40 | 			3: '0.75rem',
 41 | 			3.5: '0.875rem',
 42 | 			4: '1rem',
 43 | 			5: '1.25rem',
 44 | 			6: '1.5rem',
 45 | 			7: '1.75rem',
 46 | 			8: '2rem',
 47 | 			9: '2.25rem',
 48 | 			10: '2.5rem',
 49 | 			11: '2.75rem',
 50 | 			12: '3rem',
 51 | 			14: '3.5rem',
 52 | 			16: '4rem',
 53 | 			20: '5rem',
 54 | 			24: '6rem',
 55 | 			28: '7rem',
 56 | 			32: '8rem',
 57 | 			36: '9rem',
 58 | 			40: '10rem',
 59 | 			44: '11rem',
 60 | 			48: '12rem',
 61 | 			52: '13rem',
 62 | 			56: '14rem',
 63 | 			60: '15rem',
 64 | 			64: '16rem',
 65 | 			72: '18rem',
 66 | 			80: '20rem',
 67 | 			96: '24rem',
 68 | 		},
 69 | 		animation: {
 70 | 			none: 'none',
 71 | 			spin: 'spin 1s linear infinite',
 72 | 			ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
 73 | 			pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
 74 | 			bounce: 'bounce 1s infinite',
 75 | 		},
 76 | 		backgroundColor: (theme) => theme('colors'),
 77 | 		backgroundImage: {
 78 | 			none: 'none',
 79 | 			'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
 80 | 			'gradient-to-tr':
 81 | 				'linear-gradient(to top right, var(--tw-gradient-stops))',
 82 | 			'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
 83 | 			'gradient-to-br':
 84 | 				'linear-gradient(to bottom right, var(--tw-gradient-stops))',
 85 | 			'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
 86 | 			'gradient-to-bl':
 87 | 				'linear-gradient(to bottom left, var(--tw-gradient-stops))',
 88 | 			'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
 89 | 			'gradient-to-tl':
 90 | 				'linear-gradient(to top left, var(--tw-gradient-stops))',
 91 | 		},
 92 | 		backgroundOpacity: (theme) => theme('opacity'),
 93 | 		backgroundPosition: {
 94 | 			bottom: 'bottom',
 95 | 			center: 'center',
 96 | 			left: 'left',
 97 | 			'left-bottom': 'left bottom',
 98 | 			'left-top': 'left top',
 99 | 			right: 'right',
100 | 			'right-bottom': 'right bottom',
101 | 			'right-top': 'right top',
102 | 			top: 'top',
103 | 		},
104 | 		backgroundSize: {
105 | 			auto: 'auto',
106 | 			cover: 'cover',
107 | 			contain: 'contain',
108 | 		},
109 | 		borderColor: (theme) => ({
110 | 			...theme('colors'),
111 | 			DEFAULT: theme('colors.gray.200', 'currentColor'),
112 | 		}),
113 | 		borderOpacity: (theme) => theme('opacity'),
114 | 		borderRadius: {
115 | 			none: '0px',
116 | 			sm: '0.125rem',
117 | 			DEFAULT: '0.25rem',
118 | 			md: '0.375rem',
119 | 			lg: '0.5rem',
120 | 			xl: '0.75rem',
121 | 			'2xl': '1rem',
122 | 			'3xl': '1.5rem',
123 | 			full: '9999px',
124 | 		},
125 | 		borderWidth: {
126 | 			DEFAULT: '1px',
127 | 			0: '0px',
128 | 			2: '2px',
129 | 			4: '4px',
130 | 			8: '8px',
131 | 		},
132 | 		boxShadow: {
133 | 			sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
134 | 			DEFAULT:
135 | 				'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
136 | 			md:
137 | 				'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
138 | 			lg:
139 | 				'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
140 | 			xl:
141 | 				'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
142 | 			'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
143 | 			inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
144 | 			none: 'none',
145 | 		},
146 | 		container: {},
147 | 		cursor: {
148 | 			auto: 'auto',
149 | 			default: 'default',
150 | 			pointer: 'pointer',
151 | 			wait: 'wait',
152 | 			text: 'text',
153 | 			move: 'move',
154 | 			'not-allowed': 'not-allowed',
155 | 		},
156 | 		divideColor: (theme) => theme('borderColor'),
157 | 		divideOpacity: (theme) => theme('borderOpacity'),
158 | 		divideWidth: (theme) => theme('borderWidth'),
159 | 		fill: { current: 'currentColor' },
160 | 		flex: {
161 | 			1: '1 1 0%',
162 | 			auto: '1 1 auto',
163 | 			initial: '0 1 auto',
164 | 			none: 'none',
165 | 		},
166 | 		flexGrow: {
167 | 			0: '0',
168 | 			DEFAULT: '1',
169 | 		},
170 | 		flexShrink: {
171 | 			0: '0',
172 | 			DEFAULT: '1',
173 | 		},
174 | 		fontFamily: {
175 | 			sans: [
176 | 				'ui-sans-serif',
177 | 				'system-ui',
178 | 				'-apple-system',
179 | 				'BlinkMacSystemFont',
180 | 				'"Segoe UI"',
181 | 				'Roboto',
182 | 				'"Helvetica Neue"',
183 | 				'Arial',
184 | 				'"Noto Sans"',
185 | 				'sans-serif',
186 | 				'"Apple Color Emoji"',
187 | 				'"Segoe UI Emoji"',
188 | 				'"Segoe UI Symbol"',
189 | 				'"Noto Color Emoji"',
190 | 			],
191 | 			serif: [
192 | 				'ui-serif',
193 | 				'Georgia',
194 | 				'Cambria',
195 | 				'"Times New Roman"',
196 | 				'Times',
197 | 				'serif',
198 | 			],
199 | 			mono: [
200 | 				'ui-monospace',
201 | 				'SFMono-Regular',
202 | 				'Menlo',
203 | 				'Monaco',
204 | 				'Consolas',
205 | 				'"Liberation Mono"',
206 | 				'"Courier New"',
207 | 				'monospace',
208 | 			],
209 | 		},
210 | 		fontSize: {
211 | 			xs: ['0.75rem', { lineHeight: '1rem' }],
212 | 			sm: ['0.875rem', { lineHeight: '1.25rem' }],
213 | 			base: ['1rem', { lineHeight: '1.5rem' }],
214 | 			lg: ['1.125rem', { lineHeight: '1.75rem' }],
215 | 			xl: ['1.25rem', { lineHeight: '1.75rem' }],
216 | 			'2xl': ['1.5rem', { lineHeight: '2rem' }],
217 | 			'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
218 | 			'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
219 | 			'5xl': ['3rem', { lineHeight: '1' }],
220 | 			'6xl': ['3.75rem', { lineHeight: '1' }],
221 | 			'7xl': ['4.5rem', { lineHeight: '1' }],
222 | 			'8xl': ['6rem', { lineHeight: '1' }],
223 | 			'9xl': ['8rem', { lineHeight: '1' }],
224 | 		},
225 | 		fontWeight: {
226 | 			thin: '100',
227 | 			extralight: '200',
228 | 			light: '300',
229 | 			normal: '400',
230 | 			medium: '500',
231 | 			semibold: '600',
232 | 			bold: '700',
233 | 			extrabold: '800',
234 | 			black: '900',
235 | 		},
236 | 		gap: (theme) => theme('spacing'),
237 | 		gradientColorStops: (theme) => theme('colors'),
238 | 		gridAutoColumns: {
239 | 			auto: 'auto',
240 | 			min: 'min-content',
241 | 			max: 'max-content',
242 | 			fr: 'minmax(0, 1fr)',
243 | 		},
244 | 		gridAutoRows: {
245 | 			auto: 'auto',
246 | 			min: 'min-content',
247 | 			max: 'max-content',
248 | 			fr: 'minmax(0, 1fr)',
249 | 		},
250 | 		gridColumn: {
251 | 			auto: 'auto',
252 | 			'span-1': 'span 1 / span 1',
253 | 			'span-2': 'span 2 / span 2',
254 | 			'span-3': 'span 3 / span 3',
255 | 			'span-4': 'span 4 / span 4',
256 | 			'span-5': 'span 5 / span 5',
257 | 			'span-6': 'span 6 / span 6',
258 | 			'span-7': 'span 7 / span 7',
259 | 			'span-8': 'span 8 / span 8',
260 | 			'span-9': 'span 9 / span 9',
261 | 			'span-10': 'span 10 / span 10',
262 | 			'span-11': 'span 11 / span 11',
263 | 			'span-12': 'span 12 / span 12',
264 | 			'span-full': '1 / -1',
265 | 		},
266 | 		gridColumnEnd: {
267 | 			auto: 'auto',
268 | 			1: '1',
269 | 			2: '2',
270 | 			3: '3',
271 | 			4: '4',
272 | 			5: '5',
273 | 			6: '6',
274 | 			7: '7',
275 | 			8: '8',
276 | 			9: '9',
277 | 			10: '10',
278 | 			11: '11',
279 | 			12: '12',
280 | 			13: '13',
281 | 		},
282 | 		gridColumnStart: {
283 | 			auto: 'auto',
284 | 			1: '1',
285 | 			2: '2',
286 | 			3: '3',
287 | 			4: '4',
288 | 			5: '5',
289 | 			6: '6',
290 | 			7: '7',
291 | 			8: '8',
292 | 			9: '9',
293 | 			10: '10',
294 | 			11: '11',
295 | 			12: '12',
296 | 			13: '13',
297 | 		},
298 | 		gridRow: {
299 | 			auto: 'auto',
300 | 			'span-1': 'span 1 / span 1',
301 | 			'span-2': 'span 2 / span 2',
302 | 			'span-3': 'span 3 / span 3',
303 | 			'span-4': 'span 4 / span 4',
304 | 			'span-5': 'span 5 / span 5',
305 | 			'span-6': 'span 6 / span 6',
306 | 			'span-full': '1 / -1',
307 | 		},
308 | 		gridRowStart: {
309 | 			auto: 'auto',
310 | 			1: '1',
311 | 			2: '2',
312 | 			3: '3',
313 | 			4: '4',
314 | 			5: '5',
315 | 			6: '6',
316 | 			7: '7',
317 | 		},
318 | 		gridRowEnd: {
319 | 			auto: 'auto',
320 | 			1: '1',
321 | 			2: '2',
322 | 			3: '3',
323 | 			4: '4',
324 | 			5: '5',
325 | 			6: '6',
326 | 			7: '7',
327 | 		},
328 | 		transformOrigin: {
329 | 			center: 'center',
330 | 			top: 'top',
331 | 			'top-right': 'top right',
332 | 			right: 'right',
333 | 			'bottom-right': 'bottom right',
334 | 			bottom: 'bottom',
335 | 			'bottom-left': 'bottom left',
336 | 			left: 'left',
337 | 			'top-left': 'top left',
338 | 		},
339 | 		gridTemplateColumns: {
340 | 			none: 'none',
341 | 			1: 'repeat(1, minmax(0, 1fr))',
342 | 			2: 'repeat(2, minmax(0, 1fr))',
343 | 			3: 'repeat(3, minmax(0, 1fr))',
344 | 			4: 'repeat(4, minmax(0, 1fr))',
345 | 			5: 'repeat(5, minmax(0, 1fr))',
346 | 			6: 'repeat(6, minmax(0, 1fr))',
347 | 			7: 'repeat(7, minmax(0, 1fr))',
348 | 			8: 'repeat(8, minmax(0, 1fr))',
349 | 			9: 'repeat(9, minmax(0, 1fr))',
350 | 			10: 'repeat(10, minmax(0, 1fr))',
351 | 			11: 'repeat(11, minmax(0, 1fr))',
352 | 			12: 'repeat(12, minmax(0, 1fr))',
353 | 		},
354 | 		gridTemplateRows: {
355 | 			none: 'none',
356 | 			1: 'repeat(1, minmax(0, 1fr))',
357 | 			2: 'repeat(2, minmax(0, 1fr))',
358 | 			3: 'repeat(3, minmax(0, 1fr))',
359 | 			4: 'repeat(4, minmax(0, 1fr))',
360 | 			5: 'repeat(5, minmax(0, 1fr))',
361 | 			6: 'repeat(6, minmax(0, 1fr))',
362 | 		},
363 | 		height: (theme) => ({
364 | 			auto: 'auto',
365 | 			...theme('spacing'),
366 | 			'1/2': '50%',
367 | 			'1/3': '33.333333%',
368 | 			'2/3': '66.666667%',
369 | 			'1/4': '25%',
370 | 			'2/4': '50%',
371 | 			'3/4': '75%',
372 | 			'1/5': '20%',
373 | 			'2/5': '40%',
374 | 			'3/5': '60%',
375 | 			'4/5': '80%',
376 | 			'1/6': '16.666667%',
377 | 			'2/6': '33.333333%',
378 | 			'3/6': '50%',
379 | 			'4/6': '66.666667%',
380 | 			'5/6': '83.333333%',
381 | 			full: '100%',
382 | 			screen: '100vh',
383 | 		}),
384 | 		inset: (theme, { negative }) => ({
385 | 			auto: 'auto',
386 | 			...theme('spacing'),
387 | 			...negative(theme('spacing')),
388 | 			'1/2': '50%',
389 | 			'1/3': '33.333333%',
390 | 			'2/3': '66.666667%',
391 | 			'1/4': '25%',
392 | 			'2/4': '50%',
393 | 			'3/4': '75%',
394 | 			full: '100%',
395 | 			'-1/2': '-50%',
396 | 			'-1/3': '-33.333333%',
397 | 			'-2/3': '-66.666667%',
398 | 			'-1/4': '-25%',
399 | 			'-2/4': '-50%',
400 | 			'-3/4': '-75%',
401 | 			'-full': '-100%',
402 | 		}),
403 | 		keyframes: {
404 | 			spin: {
405 | 				to: {
406 | 					transform: 'rotate(360deg)',
407 | 				},
408 | 			},
409 | 			ping: {
410 | 				'75%, 100%': {
411 | 					transform: 'scale(2)',
412 | 					opacity: '0',
413 | 				},
414 | 			},
415 | 			pulse: {
416 | 				'50%': {
417 | 					opacity: '.5',
418 | 				},
419 | 			},
420 | 			bounce: {
421 | 				'0%, 100%': {
422 | 					transform: 'translateY(-25%)',
423 | 					animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
424 | 				},
425 | 				'50%': {
426 | 					transform: 'none',
427 | 					animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
428 | 				},
429 | 			},
430 | 		},
431 | 		letterSpacing: {
432 | 			tighter: '-0.05em',
433 | 			tight: '-0.025em',
434 | 			normal: '0em',
435 | 			wide: '0.025em',
436 | 			wider: '0.05em',
437 | 			widest: '0.1em',
438 | 		},
439 | 		lineHeight: {
440 | 			none: '1',
441 | 			tight: '1.25',
442 | 			snug: '1.375',
443 | 			normal: '1.5',
444 | 			relaxed: '1.625',
445 | 			loose: '2',
446 | 			3: '.75rem',
447 | 			4: '1rem',
448 | 			5: '1.25rem',
449 | 			6: '1.5rem',
450 | 			7: '1.75rem',
451 | 			8: '2rem',
452 | 			9: '2.25rem',
453 | 			10: '2.5rem',
454 | 		},
455 | 		listStyleType: {
456 | 			none: 'none',
457 | 			disc: 'disc',
458 | 			decimal: 'decimal',
459 | 		},
460 | 		margin: (theme, { negative }) => ({
461 | 			auto: 'auto',
462 | 			...theme('spacing'),
463 | 			...negative(theme('spacing')),
464 | 		}),
465 | 		maxHeight: (theme) => ({
466 | 			...theme('spacing'),
467 | 			full: '100%',
468 | 			screen: '100vh',
469 | 		}),
470 | 		maxWidth: (theme, { breakpoints }) => ({
471 | 			none: 'none',
472 | 			0: '0rem',
473 | 			xs: '20rem',
474 | 			sm: '24rem',
475 | 			md: '28rem',
476 | 			lg: '32rem',
477 | 			xl: '36rem',
478 | 			'2xl': '42rem',
479 | 			'3xl': '48rem',
480 | 			'4xl': '56rem',
481 | 			'5xl': '64rem',
482 | 			'6xl': '72rem',
483 | 			'7xl': '80rem',
484 | 			full: '100%',
485 | 			min: 'min-content',
486 | 			max: 'max-content',
487 | 			prose: '65ch',
488 | 			...breakpoints(theme('screens')),
489 | 		}),
490 | 		minHeight: {
491 | 			0: '0px',
492 | 			full: '100%',
493 | 			screen: '100vh',
494 | 		},
495 | 		minWidth: {
496 | 			0: '0px',
497 | 			full: '100%',
498 | 			min: 'min-content',
499 | 			max: 'max-content',
500 | 		},
501 | 		objectPosition: {
502 | 			bottom: 'bottom',
503 | 			center: 'center',
504 | 			left: 'left',
505 | 			'left-bottom': 'left bottom',
506 | 			'left-top': 'left top',
507 | 			right: 'right',
508 | 			'right-bottom': 'right bottom',
509 | 			'right-top': 'right top',
510 | 			top: 'top',
511 | 		},
512 | 		opacity: {
513 | 			0: '0',
514 | 			5: '0.05',
515 | 			10: '0.1',
516 | 			20: '0.2',
517 | 			25: '0.25',
518 | 			30: '0.3',
519 | 			40: '0.4',
520 | 			50: '0.5',
521 | 			60: '0.6',
522 | 			70: '0.7',
523 | 			75: '0.75',
524 | 			80: '0.8',
525 | 			90: '0.9',
526 | 			95: '0.95',
527 | 			100: '1',
528 | 		},
529 | 		order: {
530 | 			first: '-9999',
531 | 			last: '9999',
532 | 			none: '0',
533 | 			1: '1',
534 | 			2: '2',
535 | 			3: '3',
536 | 			4: '4',
537 | 			5: '5',
538 | 			6: '6',
539 | 			7: '7',
540 | 			8: '8',
541 | 			9: '9',
542 | 			10: '10',
543 | 			11: '11',
544 | 			12: '12',
545 | 		},
546 | 		outline: {
547 | 			none: ['2px solid transparent', '2px'],
548 | 			white: ['2px dotted white', '2px'],
549 | 			black: ['2px dotted black', '2px'],
550 | 		},
551 | 		padding: (theme) => theme('spacing'),
552 | 		placeholderColor: (theme) => theme('colors'),
553 | 		placeholderOpacity: (theme) => theme('opacity'),
554 | 		ringColor: (theme) => ({
555 | 			DEFAULT: theme('colors.blue.500', '#3b82f6'),
556 | 			...theme('colors'),
557 | 		}),
558 | 		ringOffsetColor: (theme) => theme('colors'),
559 | 		ringOffsetWidth: {
560 | 			0: '0px',
561 | 			1: '1px',
562 | 			2: '2px',
563 | 			4: '4px',
564 | 			8: '8px',
565 | 		},
566 | 		ringOpacity: (theme) => ({
567 | 			DEFAULT: '0.5',
568 | 			...theme('opacity'),
569 | 		}),
570 | 		ringWidth: {
571 | 			DEFAULT: '3px',
572 | 			0: '0px',
573 | 			1: '1px',
574 | 			2: '2px',
575 | 			4: '4px',
576 | 			8: '8px',
577 | 		},
578 | 		rotate: {
579 | 			'-180': '-180deg',
580 | 			'-90': '-90deg',
581 | 			'-45': '-45deg',
582 | 			'-12': '-12deg',
583 | 			'-6': '-6deg',
584 | 			'-3': '-3deg',
585 | 			'-2': '-2deg',
586 | 			'-1': '-1deg',
587 | 			0: '0deg',
588 | 			1: '1deg',
589 | 			2: '2deg',
590 | 			3: '3deg',
591 | 			6: '6deg',
592 | 			12: '12deg',
593 | 			45: '45deg',
594 | 			90: '90deg',
595 | 			180: '180deg',
596 | 		},
597 | 		scale: {
598 | 			0: '0',
599 | 			50: '.5',
600 | 			75: '.75',
601 | 			90: '.9',
602 | 			95: '.95',
603 | 			100: '1',
604 | 			105: '1.05',
605 | 			110: '1.1',
606 | 			125: '1.25',
607 | 			150: '1.5',
608 | 		},
609 | 		skew: {
610 | 			'-12': '-12deg',
611 | 			'-6': '-6deg',
612 | 			'-3': '-3deg',
613 | 			'-2': '-2deg',
614 | 			'-1': '-1deg',
615 | 			0: '0deg',
616 | 			1: '1deg',
617 | 			2: '2deg',
618 | 			3: '3deg',
619 | 			6: '6deg',
620 | 			12: '12deg',
621 | 		},
622 | 		space: (theme, { negative }) => ({
623 | 			...theme('spacing'),
624 | 			...negative(theme('spacing')),
625 | 		}),
626 | 		stroke: {
627 | 			current: 'currentColor',
628 | 		},
629 | 		strokeWidth: {
630 | 			0: '0',
631 | 			1: '1',
632 | 			2: '2',
633 | 		},
634 | 		textColor: (theme) => theme('colors'),
635 | 		textOpacity: (theme) => theme('opacity'),
636 | 		transitionDuration: {
637 | 			DEFAULT: '150ms',
638 | 			75: '75ms',
639 | 			100: '100ms',
640 | 			150: '150ms',
641 | 			200: '200ms',
642 | 			300: '300ms',
643 | 			500: '500ms',
644 | 			700: '700ms',
645 | 			1000: '1000ms',
646 | 		},
647 | 		transitionDelay: {
648 | 			75: '75ms',
649 | 			100: '100ms',
650 | 			150: '150ms',
651 | 			200: '200ms',
652 | 			300: '300ms',
653 | 			500: '500ms',
654 | 			700: '700ms',
655 | 			1000: '1000ms',
656 | 		},
657 | 		transitionProperty: {
658 | 			none: 'none',
659 | 			all: 'all',
660 | 			DEFAULT:
661 | 				'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
662 | 			colors: 'background-color, border-color, color, fill, stroke',
663 | 			opacity: 'opacity',
664 | 			shadow: 'box-shadow',
665 | 			transform: 'transform',
666 | 		},
667 | 		transitionTimingFunction: {
668 | 			DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
669 | 			linear: 'linear',
670 | 			in: 'cubic-bezier(0.4, 0, 1, 1)',
671 | 			out: 'cubic-bezier(0, 0, 0.2, 1)',
672 | 			'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
673 | 		},
674 | 		translate: (theme, { negative }) => ({
675 | 			...theme('spacing'),
676 | 			...negative(theme('spacing')),
677 | 			'1/2': '50%',
678 | 			'1/3': '33.333333%',
679 | 			'2/3': '66.666667%',
680 | 			'1/4': '25%',
681 | 			'2/4': '50%',
682 | 			'3/4': '75%',
683 | 			full: '100%',
684 | 			'-1/2': '-50%',
685 | 			'-1/3': '-33.333333%',
686 | 			'-2/3': '-66.666667%',
687 | 			'-1/4': '-25%',
688 | 			'-2/4': '-50%',
689 | 			'-3/4': '-75%',
690 | 			'-full': '-100%',
691 | 		}),
692 | 		width: (theme) => ({
693 | 			auto: 'auto',
694 | 			...theme('spacing'),
695 | 			'1/2': '50%',
696 | 			'1/3': '33.333333%',
697 | 			'2/3': '66.666667%',
698 | 			'1/4': '25%',
699 | 			'2/4': '50%',
700 | 			'3/4': '75%',
701 | 			'1/5': '20%',
702 | 			'2/5': '40%',
703 | 			'3/5': '60%',
704 | 			'4/5': '80%',
705 | 			'1/6': '16.666667%',
706 | 			'2/6': '33.333333%',
707 | 			'3/6': '50%',
708 | 			'4/6': '66.666667%',
709 | 			'5/6': '83.333333%',
710 | 			'1/12': '8.333333%',
711 | 			'2/12': '16.666667%',
712 | 			'3/12': '25%',
713 | 			'4/12': '33.333333%',
714 | 			'5/12': '41.666667%',
715 | 			'6/12': '50%',
716 | 			'7/12': '58.333333%',
717 | 			'8/12': '66.666667%',
718 | 			'9/12': '75%',
719 | 			'10/12': '83.333333%',
720 | 			'11/12': '91.666667%',
721 | 			full: '100%',
722 | 			screen: '100vw',
723 | 			min: 'min-content',
724 | 			max: 'max-content',
725 | 		}),
726 | 		zIndex: {
727 | 			auto: 'auto',
728 | 			0: '0',
729 | 			10: '10',
730 | 			20: '20',
731 | 			30: '30',
732 | 			40: '40',
733 | 			50: '50',
734 | 		},
735 | 	},
736 | 	variantOrder: [
737 | 		'first',
738 | 		'last',
739 | 		'odd',
740 | 		'even',
741 | 		'visited',
742 | 		'checked',
743 | 		'group-hover',
744 | 		'group-focus',
745 | 		'focus-within',
746 | 		'hover',
747 | 		'focus',
748 | 		'focus-visible',
749 | 		'active',
750 | 		'disabled',
751 | 	],
752 | 	variants: {
753 | 		accessibility: ['responsive', 'focus-within', 'focus'],
754 | 		alignContent: ['responsive'],
755 | 		alignItems: ['responsive'],
756 | 		alignSelf: ['responsive'],
757 | 		animation: ['responsive'],
758 | 		appearance: ['responsive'],
759 | 		backgroundAttachment: ['responsive'],
760 | 		backgroundClip: ['responsive'],
761 | 		backgroundColor: [
762 | 			'responsive',
763 | 			'dark',
764 | 			'group-hover',
765 | 			'focus-within',
766 | 			'hover',
767 | 			'focus',
768 | 		],
769 | 		backgroundImage: ['responsive'],
770 | 		backgroundOpacity: [
771 | 			'responsive',
772 | 			'group-hover',
773 | 			'focus-within',
774 | 			'hover',
775 | 			'focus',
776 | 		],
777 | 		backgroundPosition: ['responsive'],
778 | 		backgroundRepeat: ['responsive'],
779 | 		backgroundSize: ['responsive'],
780 | 		borderCollapse: ['responsive'],
781 | 		borderColor: [
782 | 			'responsive',
783 | 			'dark',
784 | 			'group-hover',
785 | 			'focus-within',
786 | 			'hover',
787 | 			'focus',
788 | 		],
789 | 		borderOpacity: [
790 | 			'responsive',
791 | 			'group-hover',
792 | 			'focus-within',
793 | 			'hover',
794 | 			'focus',
795 | 		],
796 | 		borderRadius: ['responsive'],
797 | 		borderStyle: ['responsive'],
798 | 		borderWidth: ['responsive'],
799 | 		boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
800 | 		boxSizing: ['responsive'],
801 | 		clear: ['responsive'],
802 | 		container: ['responsive'],
803 | 		cursor: ['responsive'],
804 | 		display: ['responsive'],
805 | 		divideColor: ['responsive', 'dark'],
806 | 		divideOpacity: ['responsive'],
807 | 		divideStyle: ['responsive'],
808 | 		divideWidth: ['responsive'],
809 | 		fill: ['responsive'],
810 | 		flex: ['responsive'],
811 | 		flexDirection: ['responsive'],
812 | 		flexGrow: ['responsive'],
813 | 		flexShrink: ['responsive'],
814 | 		flexWrap: ['responsive'],
815 | 		float: ['responsive'],
816 | 		fontFamily: ['responsive'],
817 | 		fontSize: ['responsive'],
818 | 		fontSmoothing: ['responsive'],
819 | 		fontStyle: ['responsive'],
820 | 		fontVariantNumeric: ['responsive'],
821 | 		fontWeight: ['responsive'],
822 | 		gap: ['responsive'],
823 | 		gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
824 | 		gridAutoColumns: ['responsive'],
825 | 		gridAutoFlow: ['responsive'],
826 | 		gridAutoRows: ['responsive'],
827 | 		gridColumn: ['responsive'],
828 | 		gridColumnEnd: ['responsive'],
829 | 		gridColumnStart: ['responsive'],
830 | 		gridRow: ['responsive'],
831 | 		gridRowEnd: ['responsive'],
832 | 		gridRowStart: ['responsive'],
833 | 		gridTemplateColumns: ['responsive'],
834 | 		gridTemplateRows: ['responsive'],
835 | 		height: ['responsive'],
836 | 		inset: ['responsive'],
837 | 		justifyContent: ['responsive'],
838 | 		justifyItems: ['responsive'],
839 | 		justifySelf: ['responsive'],
840 | 		letterSpacing: ['responsive'],
841 | 		lineHeight: ['responsive'],
842 | 		listStylePosition: ['responsive'],
843 | 		listStyleType: ['responsive'],
844 | 		margin: ['responsive'],
845 | 		maxHeight: ['responsive'],
846 | 		maxWidth: ['responsive'],
847 | 		minHeight: ['responsive'],
848 | 		minWidth: ['responsive'],
849 | 		objectFit: ['responsive'],
850 | 		objectPosition: ['responsive'],
851 | 		opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
852 | 		order: ['responsive'],
853 | 		outline: ['responsive', 'focus-within', 'focus'],
854 | 		overflow: ['responsive'],
855 | 		overscrollBehavior: ['responsive'],
856 | 		padding: ['responsive'],
857 | 		placeContent: ['responsive'],
858 | 		placeItems: ['responsive'],
859 | 		placeSelf: ['responsive'],
860 | 		placeholderColor: ['responsive', 'dark', 'focus'],
861 | 		placeholderOpacity: ['responsive', 'focus'],
862 | 		pointerEvents: ['responsive'],
863 | 		position: ['responsive'],
864 | 		resize: ['responsive'],
865 | 		ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
866 | 		ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
867 | 		ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
868 | 		ringOpacity: ['responsive', 'focus-within', 'focus'],
869 | 		ringWidth: ['responsive', 'focus-within', 'focus'],
870 | 		rotate: ['responsive', 'hover', 'focus'],
871 | 		scale: ['responsive', 'hover', 'focus'],
872 | 		skew: ['responsive', 'hover', 'focus'],
873 | 		space: ['responsive'],
874 | 		stroke: ['responsive'],
875 | 		strokeWidth: ['responsive'],
876 | 		tableLayout: ['responsive'],
877 | 		textAlign: ['responsive'],
878 | 		textColor: [
879 | 			'responsive',
880 | 			'dark',
881 | 			'group-hover',
882 | 			'focus-within',
883 | 			'hover',
884 | 			'focus',
885 | 		],
886 | 		textDecoration: [
887 | 			'responsive',
888 | 			'group-hover',
889 | 			'focus-within',
890 | 			'hover',
891 | 			'focus',
892 | 		],
893 | 		textOpacity: [
894 | 			'responsive',
895 | 			'group-hover',
896 | 			'focus-within',
897 | 			'hover',
898 | 			'focus',
899 | 		],
900 | 		textOverflow: ['responsive'],
901 | 		textTransform: ['responsive'],
902 | 		transform: ['responsive'],
903 | 		transformOrigin: ['responsive'],
904 | 		transitionDelay: ['responsive'],
905 | 		transitionDuration: ['responsive'],
906 | 		transitionProperty: ['responsive'],
907 | 		transitionTimingFunction: ['responsive'],
908 | 		translate: ['responsive', 'hover', 'focus'],
909 | 		userSelect: ['responsive'],
910 | 		verticalAlign: ['responsive'],
911 | 		visibility: ['responsive'],
912 | 		whitespace: ['responsive'],
913 | 		width: ['responsive'],
914 | 		wordBreak: ['responsive'],
915 | 		zIndex: ['responsive', 'focus-within', 'focus'],
916 | 	},
917 | 	plugins: [],
918 | };
919 | 


--------------------------------------------------------------------------------