wip: move workstation

updated font reference and clean up
2023-10-21 10:17:10 +11:00 · 2023-09-28 20:54:59 +10:00
19 changed files with 834 additions and 76 deletions
--- a/.gitignore
+++ b/.gitignore
@ -25,7 +25,7 @@ yarn-debug.log*
 yarn-error.log*

 # local env files
-.env*.local
+.env*

 # vercel
 .vercel
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@ -1,11 +1,7 @@
-import BlogHeader from "@/components/blogHeader";
-import BlogFooter from "@/components/blogFooter";
-
 export default function About() {
    return(
-        <div>
-            <BlogHeader />
-            <BlogFooter />
+        <div className={`flex flex-col`}>
+            <p>About</p>
        </div>
    )
 }
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@ -1,11 +1,7 @@
-import BlogHeader from "@/components/blogHeader";
-import BlogFooter from "@/components/blogFooter";
-
 export default function Blog() {
    return(
-        <div>
-            <BlogHeader />
-            <BlogFooter />
+        <div className={`flex flex-col`}>
+            <p>Blog Post List</p>
        </div>
    )
 }
--- a/app/dbcheck/page.tsx
+++ b/app/dbcheck/page.tsx
@ -0,0 +1,21 @@
+import { promisePool } from "@/backend/db";
+import {RowDataPacket} from "mysql2";
+
+async function query() {
+    try {
+        const [rows, fields] = await promisePool.query<RowDataPacket[]>('select slug from post limit 1;')
+        return(rows[0]['slug'] as string)
+    } catch (e) {
+        console.log(e)
+        return('something went wrong')
+    }
+}
+
+export default async function DbCheck() {
+    return(
+        <div className={`flex flex-col`}>
+            <p>Env: { process.env.MYSQL_HOST }</p>
+            <p>Result: { await query() }</p>
+        </div>
+    )
+}
--- a/app/fonts.ts
+++ b/app/fonts.ts
@ -0,0 +1,23 @@
+import { Raleway, Syne, Questrial, Nunito_Sans } from "next/font/google";
+
+export const raleway = Raleway({
+    subsets: ['latin'],
+    display: "swap",
+})
+
+export const syne = Syne({
+    subsets: ['latin'],
+    display: "swap",
+})
+
+export const questrial = Questrial({
+    subsets: ['latin'],
+    display: "swap",
+    weight: ['400'],
+})
+
+export const nunito_sans = Nunito_Sans({
+    subsets: ['latin'],
+    display: "swap",
+    }
+)
--- a/app/globals.css
+++ b/app/globals.css
@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,22 +1,31 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import BlogHeader from "@/components/blogHeader";
+import BlogFooter from "@/components/blogFooter";
+import React from "react";

-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });

 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};

 export default function RootLayout({
  children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
  return (
    <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <div className={`flex flex-col bg-white`}>
+          <BlogHeader />
+          {children}
+          <BlogFooter />
+        </div>
+      </body>
    </html>
-  )
+  );
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,29 +1,27 @@
 import Image from "next/image";
 import Link from "next/link";
-import BlogHeader from "../components/blogHeader";
-import BlogFooter from "@/components/blogFooter";
+import { raleway, syne, questrial } from "@/app/fonts";

 export default function Home() {
  return (
-    <div className="flex flex-col bg-white">
-      <BlogHeader />
-      <div className="bg-cover bg-center flex flex-col-reverse bg-blog-cover">
-        <div className="bg-neutral-100 bg-opacity-30 flex flex-col py-10">
-          <p className="text-white text-center text-7xl font-thin font-blog mb-6">
+    <div className={`flex flex-col`}>
+      <div className={`bg-cover bg-center flex flex-col-reverse bg-blog-cover`}>
+        <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10`}>
+          <p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
            SUYONO
          </p>
-          <p className="text-white text-center font-blog font-thin text-xl mb-10">
+          <p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
            A Tech Archive
          </p>
        </div>
-        <div className="h-64"></div> {/* spacer */}
-        <div className="h-64"></div> {/* spacer */}
+        <div className={`h-64`}></div> {/* spacer */}
+        <div className={`h-64`}></div> {/* spacer */}
      </div>
-      <div className="flex flex-row justify-center my-8">
-        <div className="border border-slate-100 flex flex-col">
+      <div className={`flex flex-row justify-center my-8`}>
+        <div className={`border border-slate-100 flex flex-col`}>
          <Link
            href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
-            className="flex flex-row max-w-4xl items-center"
+            className={`flex flex-row max-w-4xl items-center`}
          >
            <Image
              src="/assets/pthumb.webp"
@ -31,12 +29,12 @@ export default function Home() {
              width={454}
              height={341}
            />
-            <div className="flex flex-col mx-10">
-              <p className="font-blog text-2xl">
+            <div className={`flex flex-col mx-10`}>
+              <p className={`${syne.className} text-2xl`}>
                Nginx + SSL Client Certificate Verification: Manage Access to a
                site
              </p>
-              <p className="font-blog line-clamp-3 mt-4">
+              <p className={`${questrial.className} line-clamp-3 mt-4`}>
                Access control is a fundamental part of security. Most entities
                rely on the combination of username and password, sometimes with
                additional multi-factor authentication to improve security. Some
@ -51,13 +49,13 @@ export default function Home() {
          </Link>
        </div>
      </div>
-      <div className="flex flex-row bg-teal-50 justify-center">
-        <div className="max-w-4xl py-28 px-10">
-          <p className="text-3xl font-blog">Hi There</p>
-          <p className="text-base font-blog my-4">
+      <div className={`flex flex-row bg-teal-50 justify-center`}>
+        <div className={`max-w-4xl py-28 px-10`}>
+          <p className={`text-3xl ${raleway.className}`}>Hi There</p>
+          <p className={`text-base ${raleway.className} my-4`}>
            a new take on experience is the best teacher
          </p>
-          <p className="font-blog text-sm">
+          <p className={`${raleway.className} text-sm`}>
            I started this blog as an archive of my experiences and knowledge.
            By writing them out, I hope it will help me unlearn and relearn the
            various knowledge and skills I&apos;ve accumulated. I hope the
@ -66,7 +64,6 @@ export default function Home() {
          </p>
        </div>
      </div>
-      <BlogFooter />
    </div>
  );
 }
--- a/app/post/[slug]/page.tsx
+++ b/app/post/[slug]/page.tsx
@ -0,0 +1,65 @@
+import { getPost } from "@/backend/post";
+import DOMPurify from "dompurify";
+import { JSDOM } from "jsdom";
+import {nunito_sans, raleway} from "@/app/fonts";
+import parse, {domToReact, Element, HTMLReactParserOptions} from "html-react-parser";
+import { DummyPostSlug, DummyPostString } from "@/components/dummyPost";
+
+const options: HTMLReactParserOptions = {
+  replace: (domNode) => {
+    if (domNode instanceof Element && domNode.attribs) {
+      // console.log(domNode.attribs)
+      if (domNode.name === 'h1') {
+        if (domNode.attribs.class === 'title') {
+          return (
+              <div className={`flex flex-row justify-stretch`}>
+                <h1 className={`${raleway.className} mx-auto max-w-4xl text-4xl`}>{domToReact(domNode.children)}</h1>
+              </div>
+          )
+        } else {
+          return (
+              <div className={`flex flex-row justify-stretch`}>
+                <h1 className={`${raleway.className} max-w-4xl mx-auto text-3xl`}>{domToReact(domNode.children)}</h1>
+              </div>
+          )
+        }
+      } else if (domNode.name === 'h2') {
+
+      } else if (domNode.name === 'h3') {
+
+      } else if (domNode.name === 'p') {
+        if (domNode.attribs.class === 'paragraph') {
+          return (
+              <div className={`flex flex-row justify-center`}>
+                <h1 className={`${nunito_sans.className} w-224`}>{domToReact(domNode.children)}</h1>
+              </div>
+          )
+        } else if (domNode.attribs.class === 'code') {
+
+        }
+      }
+    }
+  }
+}
+
+export default async function Post({ params }: { params: { slug: string } }) {
+  let content = ""
+
+  const dummySlug = await DummyPostSlug()
+  if (dummySlug === params.slug) {
+    content = await DummyPostString()
+    console.log(content)
+  } else {
+    content = await getPost(params.slug);
+  }
+
+  content = DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(content);
+  // console.log(content)
+  const elem = parse(content, options);
+
+  return (
+    <div className={`flex flex-col`}>
+      {elem}
+    </div>
+  );
+}
--- a/app/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site/page.tsx
+++ b/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>
-    )
-}
--- a/backend/db.ts
+++ b/backend/db.ts
@ -0,0 +1,20 @@
+import mysql, { PoolOptions } from "mysql2";
+
+const access: PoolOptions = {
+    host: process.env.MYSQL_HOST,
+    port: 'MYSQL_PORT' in process.env && typeof process.env.MYSQL_PORT === 'string' ? parseInt(process.env.MYSQL_PORT) : 3306,
+    user: process.env.MYSQL_USER,
+    password: process.env.MYSQL_PASSWORD,
+    database: 'MYSQL_DATABASE' in process.env ? process.env.MYSQL_DATABASE : 'blog',
+    waitForConnections: true,
+    connectionLimit: 10,
+    maxIdle: 10,
+    idleTimeout: 60000,
+    queueLimit: 0,
+    enableKeepAlive: true,
+    keepAliveInitialDelay: 0,
+}
+
+export const pool = mysql.createPool(access)
+
+export const promisePool = pool.promise()
--- a/backend/post.ts
+++ b/backend/post.ts
@ -0,0 +1,13 @@
+import { RowDataPacket } from "mysql2";
+import { promisePool } from "@/backend/db";
+
+export async function getPost(slug: string): Promise<string> {
+    try {
+        const [rows, fields] = await promisePool.query<RowDataPacket[]>(
+            'select content from post where slug = ?', [slug])
+        return rows[0]['content']
+    } catch (e) {
+        console.log(e)
+        throw e
+    }
+}
--- a/components/blogFooter.tsx
+++ b/components/blogFooter.tsx
@ -1,11 +1,13 @@
+import {raleway} from "@/app/fonts";
+
 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>
-    )
+    return (
+      <div>
+        <p className={`${raleway.className} text-center text-xl my-10`}>Suyono</p>
+        <p className={`${raleway.className} text-center`}>suyono3484@gmail.com</p>
+        <p className={`${raleway.className} text-center mt-20 mb-10`}>
+          &copy;2023 by Suyono. Built using Next.js
+        </p>
+      </div>
+    );
 }
--- a/components/blogHeader.tsx
+++ b/components/blogHeader.tsx
@ -1,20 +1,21 @@
 import Link from "next/link";
+import { raleway }from "@/app/fonts";

 export default function BlogHeader() {
    return(
        <div>
            <div className="ml-20 py-8">
-                <p className="font-blog text-2xl font-thin">SUYONO</p>
+                <p className={`${raleway.className} 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">
+                    <Link href="/" className={`${raleway.className} m-2 font-thin text-sm`}>
                        Home
                    </Link>
-                    <Link href="/about" className="m-2 font-thin text-sm font-blog">
+                    <Link href="/about" className={`${raleway.className} m-2 font-thin text-sm`}>
                        About
                    </Link>
-                    <Link href="/blog" className="m-2 font-thin text-sm font-blog">
+                    <Link href="/blog" className={`${raleway.className} m-2 font-thin text-sm`}>
                        Blog
                    </Link>
                </div>
--- a/components/dummyPost.tsx
+++ b/components/dummyPost.tsx
@ -0,0 +1,78 @@
+export async function DummyPostString() {
+    const ReactDOMServer = (await import('react-dom/server')).default
+    const component = await DummyPost()
+    return ReactDOMServer.renderToStaticMarkup(component)
+}
+
+export async function DummyPostSlug() {
+    return "dummy-post"
+}
+
+export async function DummyPost() {
+    return(
+        <div>
+            <h1 className="title">Nginx + SSL Client Certificate Verification: Manage access to a site</h1>
+            <p className="paragraph">Access control is a fundamental part of security. Most entities rely on
+                the combination of username and password, sometimes with additional multi-factor authentication
+                to improve security. Some entities also use the SSL client certificate verification to 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>
+            <h1>Preparing the certificates</h1>
+            <p className="paragraph">There are two certificates we are going to create. The first one is the root
+                certificate. It will be placed in the Nginx server. The second one is the client certificate. It will
+                be installed in the client machine/browsers.</p>
+            <h2>Root CA</h2>
+            <p className="paragraph">For generating a root CA, execute these two steps:</p>
+            <h3>Generate RSA Key</h3>
+            <p className="code">openssl genrsa -aes256 -out ca.key 4096</p>
+            <h3>Create Root CA crt file.</h3>
+            <p className="code">openssl req -new -x509 -days 3650 -key ca.key -out ca.crt</p>
+            <h2>Setup CA configuration</h2>
+            <p className="paragraph">This is an optional step, but if you want to be able to revoke access you
+                previously granted, you need to do this step.</p>
+            <p className="paragraph">Create a file named ca.cnf in the same directory as the ca.key and ca.crt.</p>
+            <p className="code">[ ca ]
+                default_ca = gca
+
+                [ crl_ext ]
+                authorityKeyIdentifier=keyid:always
+
+                [ gca ]
+                dir = ./
+                new_certs_dir = $dir
+                unique_subject = no
+                certificate = $dir/ca.crt
+                database = $dir/certindex
+                private_key = $dir/ca.key
+                serial = $dir/certserial
+                default_days = 365
+                default_md = sha256
+                policy = gca_policy
+                x509_extensions = gca_extensions
+                crlnumber = $dir/crlnumber
+                default_crl_days = 365
+
+                [ gca_policy ]
+                commonName = supplied
+                stateOrProvinceName = supplied
+                countryName = optional
+                emailAddress = optional
+                organizationName = supplied
+                organizationUnitName = optional
+
+                [ gca_extensions ]
+                basicConstraints = CA:false
+                subjectKeyIdentifier = hash
+                authorityKeyIdentifier = keyid:always
+                keyUsage = digitalSignature,keyEncipherment
+                extendedKeyUsage = serverAuth
+                crlDistributionPoints = URI:http://example.com/root.crl
+                subjectAltName = @alt_names
+
+                [ alt_names ]
+                DNS.1 = example.com
+                DNS.2 = *.example.com</p>
+        </div>
+    )
+}
--- a/next.config.js
+++ b/next.config.js
@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    webpack: (config) => {
+        config.externals = [...config.externals, "jsdom"];
+        return config;
+    }
+}

 module.exports = nextConfig
--- a/package.json
+++ b/package.json
@ -9,16 +9,23 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@types/dompurify": "^3.0.3",
+    "@types/jsdom": "^21.1.3",
    "@types/node": "20.6.5",
    "@types/react": "18.2.22",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.16",
+    "dompurify": "^3.0.6",
    "eslint": "8.50.0",
    "eslint-config-next": "13.5.2",
+    "html-react-parser": "^4.2.2",
+    "jsdom": "^22.1.0",
+    "mysql2": "^3.6.1",
    "next": "13.5.2",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "redis": "^4.6.10",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -5,6 +5,12 @@ settings:
  excludeLinksFromLockfile: false

 dependencies:
+  '@types/dompurify':
+    specifier: ^3.0.3
+    version: 3.0.3
+  '@types/jsdom':
+    specifier: ^21.1.3
+    version: 21.1.3
  '@types/node':
    specifier: 20.6.5
    version: 20.6.5
@ -17,12 +23,24 @@ dependencies:
  autoprefixer:
    specifier: 10.4.16
    version: 10.4.16(postcss@8.4.30)
+  dompurify:
+    specifier: ^3.0.6
+    version: 3.0.6
  eslint:
    specifier: 8.50.0
    version: 8.50.0
  eslint-config-next:
    specifier: 13.5.2
    version: 13.5.2(eslint@8.50.0)(typescript@5.2.2)
+  html-react-parser:
+    specifier: ^4.2.2
+    version: 4.2.2(react@18.2.0)
+  jsdom:
+    specifier: ^22.1.0
+    version: 22.1.0
+  mysql2:
+    specifier: ^3.6.1
+    version: 3.6.1
  next:
    specifier: 13.5.2
    version: 13.5.2(react-dom@18.2.0)(react@18.2.0)
@ -35,6 +53,9 @@ dependencies:
  react-dom:
    specifier: 18.2.0
    version: 18.2.0(react@18.2.0)
+  redis:
+    specifier: ^4.6.10
+    version: 4.6.10
  tailwindcss:
    specifier: 3.3.3
    version: 3.3.3
@ -265,6 +286,55 @@ packages:
      fastq: 1.15.0
    dev: false

+  /@redis/bloom@1.2.0(@redis/client@1.5.11):
+    resolution: {integrity: sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.11
+    dev: false
+
+  /@redis/client@1.5.11:
+    resolution: {integrity: sha512-cV7yHcOAtNQ5x/yQl7Yw1xf53kO0FNDTdDU6bFIMbW6ljB7U7ns0YRM+QIkpoqTAt6zK5k9Fq0QWlUbLcq9AvA==}
+    engines: {node: '>=14'}
+    dependencies:
+      cluster-key-slot: 1.1.2
+      generic-pool: 3.9.0
+      yallist: 4.0.0
+    dev: false
+
+  /@redis/graph@1.1.0(@redis/client@1.5.11):
+    resolution: {integrity: sha512-16yZWngxyXPd+MJxeSr0dqh2AIOi8j9yXKcKCwVaKDbH3HTuETpDVPcLujhFYVPtYrngSco31BUcSa9TH31Gqg==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.11
+    dev: false
+
+  /@redis/json@1.0.6(@redis/client@1.5.11):
+    resolution: {integrity: sha512-rcZO3bfQbm2zPRpqo82XbW8zg4G/w4W3tI7X8Mqleq9goQjAGLL7q/1n1ZX4dXEAmORVZ4s1+uKLaUOg7LrUhw==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.11
+    dev: false
+
+  /@redis/search@1.1.5(@redis/client@1.5.11):
+    resolution: {integrity: sha512-hPP8w7GfGsbtYEJdn4n7nXa6xt6hVZnnDktKW4ArMaFQ/m/aR7eFvsLQmG/mn1Upq99btPJk+F27IQ2dYpCoUg==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.11
+    dev: false
+
+  /@redis/time-series@1.0.5(@redis/client@1.5.11):
+    resolution: {integrity: sha512-IFjIgTusQym2B5IZJG3XKr5llka7ey84fw/NOYqESP5WUfQs9zz1ww/9+qoz4ka/S6KcGBodzlCeZ5UImKbscg==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.11
+    dev: false
+
  /@rushstack/eslint-patch@1.4.0:
    resolution: {integrity: sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==}
    dev: false
@ -275,6 +345,25 @@ packages:
      tslib: 2.6.2
    dev: false

+  /@tootallnate/once@2.0.0:
+    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
+    engines: {node: '>= 10'}
+    dev: false
+
+  /@types/dompurify@3.0.3:
+    resolution: {integrity: sha512-odiGr/9/qMqjcBOe5UhcNLOFHSYmKFOyr+bJ/Xu3Qp4k1pNPAlNLUVNNLcLfjQI7+W7ObX58EdD3H+3p3voOvA==}
+    dependencies:
+      '@types/trusted-types': 2.0.4
+    dev: false
+
+  /@types/jsdom@21.1.3:
+    resolution: {integrity: sha512-1zzqSP+iHJYV4lB3lZhNBa012pubABkj9yG/GuXuf6LZH1cSPIJBqFDrm5JX65HHt6VOnNYdTui/0ySerRbMgA==}
+    dependencies:
+      '@types/node': 20.6.5
+      '@types/tough-cookie': 4.0.3
+      parse5: 7.1.2
+    dev: false
+
  /@types/json5@0.0.29:
    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
    dev: false
@ -305,6 +394,14 @@ packages:
    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
    dev: false

+  /@types/tough-cookie@4.0.3:
+    resolution: {integrity: sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==}
+    dev: false
+
+  /@types/trusted-types@2.0.4:
+    resolution: {integrity: sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==}
+    dev: false
+
  /@typescript-eslint/parser@6.7.2(eslint@8.50.0)(typescript@5.2.2):
    resolution: {integrity: sha512-KA3E4ox0ws+SPyxQf9iSI25R6b4Ne78ORhNHeVKrPQnoYsb9UhieoiRoJgrzgEeKGOXhcY1i8YtOeCHHTDa6Fw==}
    engines: {node: ^16.0.0 || >=18.0.0}
@ -368,6 +465,10 @@ packages:
      eslint-visitor-keys: 3.4.3
    dev: false

+  /abab@2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+    dev: false
+
  /acorn-jsx@5.3.2(acorn@8.10.0):
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@ -382,6 +483,15 @@ packages:
    hasBin: true
    dev: false

+  /agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
  /ajv@6.12.6:
    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
    dependencies:
@ -516,6 +626,10 @@ packages:
      has-symbols: 1.0.3
    dev: false

+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
  /autoprefixer@10.4.16(postcss@8.4.30):
    resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
    engines: {node: ^10 || ^12 || >=14}
@ -637,6 +751,11 @@ packages:
    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
    dev: false

+  /cluster-key-slot@1.1.2:
+    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
  /color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@ -648,6 +767,13 @@ packages:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
    dev: false

+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
+
  /commander@4.1.1:
    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
    engines: {node: '>= 6'}
@ -672,6 +798,13 @@ packages:
    hasBin: true
    dev: false

+  /cssstyle@3.0.0:
+    resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
+    engines: {node: '>=14'}
+    dependencies:
+      rrweb-cssom: 0.6.0
+    dev: false
+
  /csstype@3.1.2:
    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
    dev: false
@ -680,6 +813,15 @@ packages:
    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
    dev: false

+  /data-urls@4.0.0:
+    resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
+    engines: {node: '>=14'}
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+    dev: false
+
  /debug@3.2.7:
    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
    peerDependencies:
@ -703,6 +845,10 @@ packages:
      ms: 2.1.2
    dev: false

+  /decimal.js@10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+    dev: false
+
  /deep-is@0.1.4:
    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
    dev: false
@ -725,6 +871,16 @@ packages:
      object-keys: 1.1.1
    dev: false

+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
+  /denque@2.1.0:
+    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
+    engines: {node: '>=0.10'}
+    dev: false
+
  /dequal@2.0.3:
    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
    engines: {node: '>=6'}
@ -759,6 +915,44 @@ packages:
      esutils: 2.0.3
    dev: false

+  /dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+    dev: false
+
+  /domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: false
+
+  /domexception@4.0.0:
+    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
+    engines: {node: '>=12'}
+    dependencies:
+      webidl-conversions: 7.0.0
+    dev: false
+
+  /domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: false
+
+  /dompurify@3.0.6:
+    resolution: {integrity: sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==}
+    dev: false
+
+  /domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+    dev: false
+
  /electron-to-chromium@1.4.528:
    resolution: {integrity: sha512-UdREXMXzLkREF4jA8t89FQjA8WHI6ssP38PMY4/4KhXFQbtImnghh4GkCgrtiZwLKUKVD2iTVXvDVQjfomEQuA==}
    dev: false
@ -775,6 +969,11 @@ packages:
      tapable: 2.2.1
    dev: false

+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: false
+
  /es-abstract@1.22.2:
    resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
    engines: {node: '>= 0.4'}
@ -1217,6 +1416,15 @@ packages:
      is-callable: 1.2.7
    dev: false

+  /form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
  /fraction.js@4.3.6:
    resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==}
    dev: false
@ -1251,6 +1459,17 @@ packages:
    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
    dev: false

+  /generate-function@2.3.1:
+    resolution: {integrity: sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==}
+    dependencies:
+      is-property: 1.0.2
+    dev: false
+
+  /generic-pool@3.9.0:
+    resolution: {integrity: sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==}
+    engines: {node: '>= 4'}
+    dev: false
+
  /get-intrinsic@1.2.1:
    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
    dependencies:
@ -1404,6 +1623,69 @@ packages:
      function-bind: 1.1.1
    dev: false

+  /html-dom-parser@4.0.0:
+    resolution: {integrity: sha512-TUa3wIwi80f5NF8CVWzkopBVqVAtlawUzJoLwVLHns0XSJGynss4jiY0mTWpiDOsuyw+afP+ujjMgRh9CoZcXw==}
+    dependencies:
+      domhandler: 5.0.3
+      htmlparser2: 9.0.0
+    dev: false
+
+  /html-encoding-sniffer@3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+    dependencies:
+      whatwg-encoding: 2.0.0
+    dev: false
+
+  /html-react-parser@4.2.2(react@18.2.0):
+    resolution: {integrity: sha512-lh0wEGISnFZEAmvQqK4xc0duFMUh/m9YYyAhFursWxdtNv+hCZge0kj1y4wep6qPB5Zm33L+2/P6TcGWAJJbjA==}
+    peerDependencies:
+      react: 0.14 || 15 || 16 || 17 || 18
+    dependencies:
+      domhandler: 5.0.3
+      html-dom-parser: 4.0.0
+      react: 18.2.0
+      react-property: 2.0.0
+      style-to-js: 1.1.4
+    dev: false
+
+  /htmlparser2@9.0.0:
+    resolution: {integrity: sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+    dev: false
+
+  /http-proxy-agent@5.0.0:
+    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
+    engines: {node: '>= 6'}
+    dependencies:
+      '@tootallnate/once': 2.0.0
+      agent-base: 6.0.2
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: false
+
  /ignore@5.2.4:
    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
    engines: {node: '>= 4'}
@ -1433,6 +1715,10 @@ packages:
    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
    dev: false

+  /inline-style-parser@0.1.1:
+    resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
+    dev: false
+
  /internal-slot@1.0.5:
    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
    engines: {node: '>= 0.4'}
@ -1547,6 +1833,14 @@ packages:
    engines: {node: '>=8'}
    dev: false

+  /is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+    dev: false
+
+  /is-property@1.0.2:
+    resolution: {integrity: sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==}
+    dev: false
+
  /is-regex@1.1.4:
    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
    engines: {node: '>= 0.4'}
@ -1637,6 +1931,44 @@ packages:
      argparse: 2.0.1
    dev: false

+  /jsdom@22.1.0:
+    resolution: {integrity: sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+    dependencies:
+      abab: 2.0.6
+      cssstyle: 3.0.0
+      data-urls: 4.0.0
+      decimal.js: 10.4.3
+      domexception: 4.0.0
+      form-data: 4.0.0
+      html-encoding-sniffer: 3.0.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.7
+      parse5: 7.1.2
+      rrweb-cssom: 0.6.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.3
+      w3c-xmlserializer: 4.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+      ws: 8.14.2
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
  /json-buffer@3.0.1:
    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
    dev: false
@ -1710,6 +2042,10 @@ packages:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
    dev: false

+  /long@5.2.3:
+    resolution: {integrity: sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==}
+    dev: false
+
  /loose-envify@1.4.0:
    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
    hasBin: true
@ -1724,6 +2060,16 @@ packages:
      yallist: 4.0.0
    dev: false

+  /lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /lru-cache@8.0.5:
+    resolution: {integrity: sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==}
+    engines: {node: '>=16.14'}
+    dev: false
+
  /merge2@1.4.1:
    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
    engines: {node: '>= 8'}
@ -1737,6 +2083,18 @@ packages:
      picomatch: 2.3.1
    dev: false

+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: false
+
  /minimatch@3.1.2:
    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
    dependencies:
@ -1755,6 +2113,20 @@ packages:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
    dev: false

+  /mysql2@3.6.1:
+    resolution: {integrity: sha512-O7FXjLtNkjcMBpLURwkXIhyVbX9i4lq4nNRCykPNOXfceq94kJ0miagmTEGCZieuO8JtwtXaZ41U6KT4eF9y3g==}
+    engines: {node: '>= 8.0'}
+    dependencies:
+      denque: 2.1.0
+      generate-function: 2.3.1
+      iconv-lite: 0.6.3
+      long: 5.2.3
+      lru-cache: 8.0.5
+      named-placeholders: 1.1.3
+      seq-queue: 0.0.5
+      sqlstring: 2.3.3
+    dev: false
+
  /mz@2.7.0:
    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
    dependencies:
@ -1763,6 +2135,13 @@ packages:
      thenify-all: 1.6.0
    dev: false

+  /named-placeholders@1.1.3:
+    resolution: {integrity: sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      lru-cache: 7.18.3
+    dev: false
+
  /nanoid@3.3.6:
    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@ -1827,6 +2206,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: false

+  /nwsapi@2.2.7:
+    resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
+    dev: false
+
  /object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
@ -1938,6 +2321,12 @@ packages:
      callsites: 3.1.0
    dev: false

+  /parse5@7.1.2:
+    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
+    dependencies:
+      entities: 4.5.0
+    dev: false
+
  /path-exists@4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
@ -2079,11 +2468,19 @@ packages:
      react-is: 16.13.1
    dev: false

+  /psl@1.9.0:
+    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+    dev: false
+
  /punycode@2.3.0:
    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
    engines: {node: '>=6'}
    dev: false

+  /querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+    dev: false
+
  /queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
    dev: false
@ -2102,6 +2499,10 @@ packages:
    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
    dev: false

+  /react-property@2.0.0:
+    resolution: {integrity: sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==}
+    dev: false
+
  /react@18.2.0:
    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
    engines: {node: '>=0.10.0'}
@ -2122,6 +2523,17 @@ packages:
      picomatch: 2.3.1
    dev: false

+  /redis@4.6.10:
+    resolution: {integrity: sha512-mmbyhuKgDiJ5TWUhiKhBssz+mjsuSI/lSZNPI9QvZOYzWvYGejtb+W3RlDDf8LD6Bdl5/mZeG8O1feUGhXTxEg==}
+    dependencies:
+      '@redis/bloom': 1.2.0(@redis/client@1.5.11)
+      '@redis/client': 1.5.11
+      '@redis/graph': 1.1.0(@redis/client@1.5.11)
+      '@redis/json': 1.0.6(@redis/client@1.5.11)
+      '@redis/search': 1.1.5(@redis/client@1.5.11)
+      '@redis/time-series': 1.0.5(@redis/client@1.5.11)
+    dev: false
+
  /reflect.getprototypeof@1.0.4:
    resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
    engines: {node: '>= 0.4'}
@ -2147,6 +2559,10 @@ packages:
      set-function-name: 2.0.1
    dev: false

+  /requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+    dev: false
+
  /resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@ -2186,6 +2602,10 @@ packages:
      glob: 7.2.3
    dev: false

+  /rrweb-cssom@0.6.0:
+    resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
+    dev: false
+
  /run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
    dependencies:
@ -2210,6 +2630,17 @@ packages:
      is-regex: 1.1.4
    dev: false

+  /safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: false
+
+  /saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+    dependencies:
+      xmlchars: 2.2.0
+    dev: false
+
  /scheduler@0.23.0:
    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
    dependencies:
@ -2229,6 +2660,10 @@ packages:
      lru-cache: 6.0.0
    dev: false

+  /seq-queue@0.0.5:
+    resolution: {integrity: sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==}
+    dev: false
+
  /set-function-name@2.0.1:
    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
    engines: {node: '>= 0.4'}
@ -2268,6 +2703,11 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: false

+  /sqlstring@2.3.3:
+    resolution: {integrity: sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
  /streamsearch@1.1.0:
    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
    engines: {node: '>=10.0.0'}
@ -2329,6 +2769,18 @@ packages:
    engines: {node: '>=8'}
    dev: false

+  /style-to-js@1.1.4:
+    resolution: {integrity: sha512-zEeU3vy9xL/hdLBFmzqjhm+2vJ1Y35V0ctDeB2sddsvN1856OdMZUCOOfKUn3nOjjEKr6uLhOnY4CrX6gLDRrA==}
+    dependencies:
+      style-to-object: 0.4.2
+    dev: false
+
+  /style-to-object@0.4.2:
+    resolution: {integrity: sha512-1JGpfPB3lo42ZX8cuPrheZbfQ6kqPPnPHlKMyeRYtfKD+0jG+QsXgXN57O/dvJlzlB2elI6dGmrPnl5VPQFPaA==}
+    dependencies:
+      inline-style-parser: 0.1.1
+    dev: false
+
  /styled-jsx@5.1.1(react@18.2.0):
    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
    engines: {node: '>= 12.0.0'}
@ -2372,6 +2824,10 @@ packages:
    engines: {node: '>= 0.4'}
    dev: false

+  /symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+    dev: false
+
  /tailwindcss@3.3.3:
    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
    engines: {node: '>=14.0.0'}
@ -2432,6 +2888,23 @@ packages:
      is-number: 7.0.0
    dev: false

+  /tough-cookie@4.1.3:
+    resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
+    engines: {node: '>=6'}
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.3.0
+      universalify: 0.2.0
+      url-parse: 1.5.10
+    dev: false
+
+  /tr46@4.1.1:
+    resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
+    engines: {node: '>=14'}
+    dependencies:
+      punycode: 2.3.0
+    dev: false
+
  /ts-api-utils@1.0.3(typescript@5.2.2):
    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
    engines: {node: '>=16.13.0'}
@ -2523,6 +2996,11 @@ packages:
      which-boxed-primitive: 1.0.2
    dev: false

+  /universalify@0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.0'}
+    dev: false
+
  /update-browserslist-db@1.0.13(browserslist@4.21.11):
    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
    hasBin: true
@ -2540,10 +3018,24 @@ packages:
      punycode: 2.3.0
    dev: false

+  /url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+    dev: false
+
  /util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
    dev: false

+  /w3c-xmlserializer@4.0.0:
+    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
+    engines: {node: '>=14'}
+    dependencies:
+      xml-name-validator: 4.0.0
+    dev: false
+
  /watchpack@2.4.0:
    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
    engines: {node: '>=10.13.0'}
@ -2552,6 +3044,31 @@ packages:
      graceful-fs: 4.2.11
    dev: false

+  /webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /whatwg-encoding@2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+    dependencies:
+      iconv-lite: 0.6.3
+    dev: false
+
+  /whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /whatwg-url@12.0.1:
+    resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      tr46: 4.1.1
+      webidl-conversions: 7.0.0
+    dev: false
+
  /which-boxed-primitive@1.0.2:
    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
    dependencies:
@ -2612,6 +3129,28 @@ packages:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
    dev: false

+  /ws@8.14.2:
+    resolution: {integrity: sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: false
+
+  /xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+    dev: false
+
  /yallist@4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
    dev: false
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,7 +1,5 @@
 import type { Config } from 'tailwindcss'

-import { fontFamily } from 'tailwindcss/defaultTheme'
-
 const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
@ -16,9 +14,9 @@ const config: Config = {
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
        'blog-cover': "url('/assets/placeholder.webp')"
      },
-      fontFamily: {
-        'blog': ['Raleway', ...fontFamily.sans],
-      },
+      width: {
+        '224': '56rem',
+      }
    },
  },
  plugins: [],
Author	SHA1	Message	Date
Suyono	6d3dab582a	wip: move workstation	2023-10-21 10:17:10 +11:00
Suyono	08db8ef124	updated font reference and clean up	2023-09-28 20:54:59 +10:00