Initial commit from Create Next App

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "next/typescript"]
 }

.gitignore

@@ -3,7 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -24,8 +29,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
+# env files (can opt-in for committing if needed)
-.env*.local
+.env*
 
 # vercel
 .vercel

.idea/.gitignore

@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

.idea/jsLibraryMappings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <includedPredefinedLibrary name="Node.js Core" />
-  </component>
-</project>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/nextts.iml" filepath="$PROJECT_DIR$/.idea/nextts.iml" />
-    </modules>
-  </component>
-</project>

.idea/nextts.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/prettier.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="MANUAL" />
-    <option name="myRunOnReformat" value="true" />
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

README.md

@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
 ## Getting Started
 
@@ -18,7 +18,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
 ## Learn More
 
@@ -27,10 +27,10 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/about/page.tsx

@@ -1,11 +0,0 @@
-import BlogHeader from "@/components/blogHeader";
-import BlogFooter from "@/components/blogFooter";
-
-export default function About() {
-    return(
-        <div>
-            <BlogHeader />
-            <BlogFooter />
-        </div>
-    )
-}

app/blog/page.tsx

@@ -1,11 +0,0 @@
-import BlogHeader from "@/components/blogHeader";
-import BlogFooter from "@/components/blogFooter";
-
-export default function Blog() {
-    return(
-        <div>
-            <BlogHeader />
-            <BlogFooter />
-        </div>
-    )
-}

app/globals.css

@@ -1,4 +1,21 @@
-@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

app/globals.css.orig

@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}

app/layout.tsx

@@ -1,22 +1,35 @@
-import './globals.css'
+import type { Metadata } from "next";
-import type { Metadata } from 'next'
+import localFont from "next/font/local";
-import { Inter } from 'next/font/google'
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: "Create Next App",
-  description: 'Generated by create next app',
+  description: "Generated by create next app",
-}
+};
 
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
-}) {
+}>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
     </html>
-  )
+  );
 }

app/page.tsx

@@ -1,72 +1,101 @@
 import Image from "next/image";
-import Link from "next/link";
-import BlogHeader from "../components/blogHeader";
-import BlogFooter from "@/components/blogFooter";
 
 export default function Home() {
   return (
-    <div className="flex flex-col bg-white">
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <BlogHeader />
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-      <div className="bg-cover bg-center flex flex-col-reverse bg-blog-cover">
+        <Image
-        <div className="bg-neutral-100 bg-opacity-30 flex flex-col py-10">
+          className="dark:invert"
-          <p className="text-white text-center text-7xl font-thin font-blog mb-6">
+          src="/next.svg"
-            SUYONO
+          alt="Next.js logo"
-          </p>
+          width={180}
-          <p className="text-white text-center font-blog font-thin text-xl mb-10">
+          height={38}
-            A Tech Archive
+          priority
-          </p>
+        />
-        </div>
+        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-        <div className="h-64"></div> {/* spacer */}
+          <li className="mb-2">
-        <div className="h-64"></div> {/* spacer */}
+            Get started by editing{" "}
-      </div>
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-      <div className="flex flex-row justify-center my-8">
+              app/page.tsx
-        <div className="border border-slate-100 flex flex-col">
+            </code>
-          <Link
+            .
-            href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
+          </li>
-            className="flex flex-row max-w-4xl items-center"
+          <li>Save and see your changes instantly.</li>
+        </ol>
+
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
           >
             <Image
-              src="/assets/pthumb.webp"
+              className="dark:invert"
-              alt="post thumbnail"
+              src="/vercel.svg"
-              width={454}
+              alt="Vercel logomark"
-              height={341}
+              width={20}
+              height={20}
             />
-            <div className="flex flex-col mx-10">
+            Deploy now
-              <p className="font-blog text-2xl">
+          </a>
-                Nginx + SSL Client Certificate Verification: Manage Access to a
+          <a
-                site
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-              </p>
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              <p className="font-blog line-clamp-3 mt-4">
+            target="_blank"
-                Access control is a fundamental part of security. Most entities
+            rel="noopener noreferrer"
-                rely on the combination of username and password, sometimes with
+          >
-                additional multi-factor authentication to improve security. Some
+            Read our docs
-                entities also use the SSL client certificate verification to
+          </a>
-                manage access to specific resources. One of the use cases where
-                SSL client certificate verification fits perfectly is managing
-                access to internet-facing development or staging servers. In
-                this post, I&apos;ll share how to set up the certificates and
-                configure nginx to verify users based on their certificates.
-              </p>
         </div>
-          </Link>
+      </main>
-        </div>
+      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-      </div>
+        <a
-      <div className="flex flex-row bg-teal-50 justify-center">
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-        <div className="max-w-4xl py-28 px-10">
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          <p className="text-3xl font-blog">Hi There</p>
+          target="_blank"
-          <p className="text-base font-blog my-4">
+          rel="noopener noreferrer"
-            a new take on experience is the best teacher
+        >
-          </p>
+          <Image
-          <p className="font-blog text-sm">
+            aria-hidden
-            I started this blog as an archive of my experiences and knowledge.
+            src="/file.svg"
-            By writing them out, I hope it will help me unlearn and relearn the
+            alt="File icon"
-            various knowledge and skills I&apos;ve accumulated. I hope the
+            width={16}
-            articles, source code examples, and server config examples I wrote
+            height={16}
-            will help you somehow. Read on and enjoy!
+          />
-          </p>
+          Learn
-        </div>
+        </a>
-      </div>
+        <a
-      <BlogFooter />
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/window.svg"
+            alt="Window icon"
+            width={16}
+            height={16}
+          />
+          Examples
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/globe.svg"
+            alt="Globe icon"
+            width={16}
+            height={16}
+          />
+          Go to nextjs.org →
+        </a>
+      </footer>
     </div>
   );
 }

app/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site/page.tsx

@@ -1,11 +0,0 @@
-import BlogHeader from "@/components/blogHeader";
-import BlogFooter from "@/components/blogFooter";
-
-export default function Post1() {
-    return(
-        <div>
-            <BlogHeader />
-            <BlogFooter />
-        </div>
-    )
-}

components/blogFooter.tsx

@@ -1,11 +0,0 @@
-export default function BlogFooter() {
-    return(
-        <div>
-            <p className="text-center font-blog text-xl my-10">Suyono</p>
-            <p className="text-center font-blog">suyono3484@gmail.com</p>
-            <p className="text-center font-blog mt-20 mb-10">
-                &copy;2023 by Suyono. Built using Next.js
-            </p>
-        </div>
-    )
-}

components/blogHeader.tsx

@@ -1,24 +0,0 @@
-import Link from "next/link";
-
-export default function BlogHeader() {
-    return(
-        <div>
-            <div className="ml-20 py-8">
-                <p className="font-blog text-2xl font-thin">SUYONO</p>
-            </div>
-            <div className="bg-gray-100">
-                <div className="flex flex-row ml-20">
-                    <Link href="/" className="m-2 font-thin text-sm font-blog">
-                        Home
-                    </Link>
-                    <Link href="/about" className="m-2 font-thin text-sm font-blog">
-                        About
-                    </Link>
-                    <Link href="/blog" className="m-2 font-thin text-sm font-blog">
-                        Blog
-                    </Link>
-                </div>
-            </div>
-        </div>
-    )
-}

next.config.js

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nextts",
+  "name": "blogts2",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,20 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@types/node": "20.6.5",
+    "react": "19.0.0-rc-66855b96-20241106",
-    "@types/react": "18.2.22",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
-    "@types/react-dom": "18.2.7",
+    "next": "15.0.3"
-    "autoprefixer": "10.4.16",
-    "eslint": "8.50.0",
-    "eslint-config-next": "13.5.2",
-    "next": "13.5.2",
-    "postcss": "8.4.30",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.2.2"
   },
   "devDependencies": {
-    "prettier": "3.0.3"
+    "typescript": "^5",
-  }
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3"
+  },
+  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
 }

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/vercel.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

tailwind.config.ts

@@ -1,26 +1,18 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
-import { fontFamily } from 'tailwindcss/defaultTheme'
+export default {
-
-const config: Config = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
-      backgroundImage: {
+      colors: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        background: "var(--background)",
-        'gradient-conic':
+        foreground: "var(--foreground)",
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        'blog-cover': "url('/assets/placeholder.webp')"
-      },
-      fontFamily: {
-        'blog': ['Raleway', ...fontFamily.sans],
       },
     },
   },
   plugins: [],
-}
+} satisfies Config;
-export default config

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,