diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000000000000000000000000000000000000..541cab696e7a92aefdfb8a72b5c196c8a61d9bab
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,47 @@
+module.exports = {
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    sourceType: "module",
+  },
+  plugins: ["vue", "@typescript-eslint", "prettier"],
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "@vue/typescript/recommended",
+    "plugin:prettier/recommended",
+  ],
+  rules: {
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto",
+      },
+    ],
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "vue/no-v-html": "off",
+    "vue/multi-word-component-names": "off",
+    "vue/one-component-per-file": "off",
+    "vue/require-default-prop": "off",
+  },
+  ignorePatterns: ["node_modules", "dist", "public"],
+  overrides: [
+    {
+      files: ["./**/*.js"],
+      env: {
+        node: true,
+      },
+      rules: {
+        "no-undef": "off",
+      },
+    },
+    {
+      files: ["*.vue"],
+      rules: {
+        "no-undef": "off",
+      },
+    },
+  ],
+};
diff --git a/.gitattributes b/.gitattributes
index c7d9f3332a950355d5a77d85000f05e6f45435ea..eddb745d78257ab47befff98b110a693ab51741c 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -4,6 +4,7 @@
 *.bz2 filter=lfs diff=lfs merge=lfs -text
 *.ckpt filter=lfs diff=lfs merge=lfs -text
 *.ftz filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
 *.gz filter=lfs diff=lfs merge=lfs -text
 *.h5 filter=lfs diff=lfs merge=lfs -text
 *.joblib filter=lfs diff=lfs merge=lfs -text
@@ -17,6 +18,7 @@
 *.ot filter=lfs diff=lfs merge=lfs -text
 *.parquet filter=lfs diff=lfs merge=lfs -text
 *.pb filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
 *.pickle filter=lfs diff=lfs merge=lfs -text
 *.pkl filter=lfs diff=lfs merge=lfs -text
 *.pt filter=lfs diff=lfs merge=lfs -text
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000000000000000000000000000000000000..637dd6f7d38032790ef7b90e27e31ce4b8db8191
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: [star-history]
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..746a44ac79baa1a2860ffbc447a4af04ba22146a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+*.env
+.pnpm-debug.log
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..e610ad28ffe699c9682fa1cf19364ef936839c75
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "semi": true,
+  "printWidth": 80
+}
diff --git a/CODEOWNERS b/CODEOWNERS
new file mode 100644
index 0000000000000000000000000000000000000000..cba1105eee8f8c126c61c2b41ec3f8765818fdfd
--- /dev/null
+++ b/CODEOWNERS
@@ -0,0 +1,2 @@
+# These owners will be the default owners for everything in the repo.
+*                            @boojack @d-bytebase
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..c7303f1253c7c7ad097d6bfaa1b68a7b0e3f404c
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Bytebase (Hong Kong) Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/common/api.ts b/common/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bddd2b925e9a9d72b82d442ace61e08923e00214
--- /dev/null
+++ b/common/api.ts
@@ -0,0 +1,90 @@
+import axios from "axios";
+import utils from "./utils";
+
+const DEFAULT_PER_PAGE = 30;
+
+namespace api {
+  export async function getRepoStargazers(
+    repo: string,
+    token?: string,
+  ) {
+    let url = `https://huggingface.co/api/spaces/${repo}/likers?expand=True`;
+
+    return axios.get(url, {
+      headers: {
+        Accept: "application/vnd.github.v3.star+json",
+        Authorization: token ? `token ${token}` : "",
+      },
+    });
+  }
+
+  export async function getRepoStargazersCount(repo: string, token?: string) {
+    const { data } = await axios.get(`https://huggingface.co/api/spaces/${repo}`, {
+      headers: {
+        Accept: "application/vnd.github.v3.star+json",
+        Authorization: token ? `token ${token}` : "",
+      },
+    });
+
+    return data.likes;
+  }
+
+  export async function getRepoStarRecords(
+    repo: string,
+    token: string,
+    maxRequestAmount: number
+  ) {
+    const requestPages = await getRepoStargazers(repo, token);
+
+    // const resArray: string[] = []
+    // for (let i = 0; i < requestPages.data.length; ) {
+    //   resArray.push(requestPages.data[i].likedAt);
+    // }
+    const resArray: string[] = requestPages.data.map((item: any) => item.likedAt);
+
+    resArray.sort((a, b) => Date.parse(a) - Date.parse(b));
+    const starRecordsMap: Map<string, number> = new Map();
+
+    for (let i = 0; i < resArray.length; ) {
+      starRecordsMap.set(
+        utils.getDateString(resArray[i]),
+        i + 1
+      );
+      i += Math.floor(resArray.length / maxRequestAmount) || 1;
+    }
+
+    const starAmount = await getRepoStargazersCount(repo, token);
+    starRecordsMap.set(utils.getDateString(Date.now()), starAmount);
+
+    const starRecords: {
+      date: string;
+      count: number;
+    }[] = [];
+
+    starRecordsMap.forEach((v, k) => {
+      starRecords.push({
+        date: k,
+        count: v,
+      });
+    });
+
+    return starRecords;
+  }
+
+  export async function getRepoLogoUrl(
+    repo: string,
+    token?: string
+  ): Promise<string> {
+    const owner = repo.split("/")[0];
+    // const { data } = await axios.get(`https://api.github.com/users/${owner}`, {
+    //   headers: {
+    //     Accept: "application/vnd.github.v3.star+json",
+    //     Authorization: token ? `token ${token}` : "",
+    //   },
+    // });
+
+    return ""; // data.avatar_url;
+  }
+}
+
+export default api;
diff --git a/common/api_github.ts b/common/api_github.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2eb15c507be79d1cc2b4fa31c2ea17ca37636cb
--- /dev/null
+++ b/common/api_github.ts
@@ -0,0 +1,142 @@
+import axios from "axios";
+import utils from "./utils";
+
+const DEFAULT_PER_PAGE = 30;
+
+namespace api {
+  export async function getRepoStargazers(
+    repo: string,
+    token?: string,
+    page?: number
+  ) {
+    let url = `https://api.github.com/repos/${repo}/stargazers?per_page=${DEFAULT_PER_PAGE}`;
+
+    if (page !== undefined) {
+      url = `${url}&page=${page}`;
+    }
+    return axios.get(url, {
+      headers: {
+        Accept: "application/vnd.github.v3.star+json",
+        Authorization: token ? `token ${token}` : "",
+      },
+    });
+  }
+
+  export async function getRepoStargazersCount(repo: string, token?: string) {
+    const { data } = await axios.get(`https://api.github.com/repos/${repo}`, {
+      headers: {
+        Accept: "application/vnd.github.v3.star+json",
+        Authorization: token ? `token ${token}` : "",
+      },
+    });
+
+    return data.stargazers_count;
+  }
+
+  export async function getRepoStarRecords(
+    repo: string,
+    token: string,
+    maxRequestAmount: number
+  ) {
+    const patchRes = await getRepoStargazers(repo, token);
+
+    const headerLink = patchRes.headers["link"] || "";
+
+    let pageCount = 1;
+    const regResult = /next.*&page=(\d*).*last/.exec(headerLink);
+
+    if (regResult) {
+      if (regResult[1] && Number.isInteger(Number(regResult[1]))) {
+        pageCount = Number(regResult[1]);
+      }
+    }
+
+    if (pageCount === 1 && patchRes?.data?.length === 0) {
+      throw {
+        status: patchRes.status,
+        data: [],
+      };
+    }
+
+    const requestPages: number[] = [];
+    if (pageCount < maxRequestAmount) {
+      requestPages.push(...utils.range(1, pageCount));
+    } else {
+      utils.range(1, maxRequestAmount).map((i) => {
+        requestPages.push(Math.round((i * pageCount) / maxRequestAmount) - 1);
+      });
+      if (!requestPages.includes(1)) {
+        requestPages.unshift(1);
+      }
+    }
+
+    const resArray = await Promise.all(
+      requestPages.map((page) => {
+        return getRepoStargazers(repo, token, page);
+      })
+    );
+
+    const starRecordsMap: Map<string, number> = new Map();
+
+    if (requestPages.length < maxRequestAmount) {
+      const starRecordsData: {
+        starred_at: string;
+      }[] = [];
+      resArray.map((res) => {
+        const { data } = res;
+        starRecordsData.push(...data);
+      });
+      for (let i = 0; i < starRecordsData.length; ) {
+        starRecordsMap.set(
+          utils.getDateString(starRecordsData[i].starred_at),
+          i + 1
+        );
+        i += Math.floor(starRecordsData.length / maxRequestAmount) || 1;
+      }
+    } else {
+      resArray.map(({ data }, index) => {
+        if (data.length > 0) {
+          const starRecord = data[0];
+          starRecordsMap.set(
+            utils.getDateString(starRecord.starred_at),
+            DEFAULT_PER_PAGE * (requestPages[index] - 1)
+          );
+        }
+      });
+    }
+
+    const starAmount = await getRepoStargazersCount(repo, token);
+    starRecordsMap.set(utils.getDateString(Date.now()), starAmount);
+
+    const starRecords: {
+      date: string;
+      count: number;
+    }[] = [];
+
+    starRecordsMap.forEach((v, k) => {
+      starRecords.push({
+        date: k,
+        count: v,
+      });
+    });
+
+    return starRecords;
+  }
+
+  export async function getRepoLogoUrl(
+    repo: string,
+    token?: string
+  ): Promise<string> {
+    const owner = repo.split("/")[0];
+    const { data } = await axios.get(`https://api.github.com/users/${owner}`, {
+      headers: {
+        Accept: "application/vnd.github.v3.star+json",
+        Authorization: token ? `token ${token}` : "",
+      },
+    });
+
+    return data.avatar_url;
+  }
+}
+
+export default api;
diff --git a/common/chart.ts b/common/chart.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1207119e15e2489fc0d29f17eeeb54e7849d4078
--- /dev/null
+++ b/common/chart.ts
@@ -0,0 +1,229 @@
+import { XYChartData, XYData } from "../packages/xy-chart";
+import { ChartMode, RepoStarData, RepoData } from "../types/chart";
+import api from "./api";
+import utils from "./utils";
+
+export const DEFAULT_MAX_REQUEST_AMOUNT = 15;
+
+export const getReposStarData = async (
+  repos: string[],
+  token = "",
+  maxRequestAmount = DEFAULT_MAX_REQUEST_AMOUNT
+): Promise<RepoStarData[]> => {
+  const repoStarDataCacheMap = new Map();
+
+  for (const repo of repos) {
+    try {
+      const starRecords = await api.getRepoStarRecords(
+        repo,
+        token,
+        maxRequestAmount
+      );
+      repoStarDataCacheMap.set(repo, starRecords);
+    } catch (error: any) {
+      let message = "";
+      let status = 500;
+
+      if (error?.response?.status === 404) {
+        message = `Repo ${repo} not found`;
+        status = 404;
+      } else if (error?.response?.status === 403) {
+        message = "GitHub API rate limit exceeded";
+        status = 403;
+      } else if (error?.response?.status === 401) {
+        message = "Access Token Unauthorized";
+        status = 401;
+      } else if (Array.isArray(error?.data) && error.data?.length === 0) {
+        message = `Repo ${repo} has no star history`;
+        status = 501;
+      } else {
+        message = "Some unexpected error happened, try again later";
+      }
+
+      return Promise.reject({
+        message,
+        status,
+        repo,
+      });
+    }
+  }
+
+  const reposStarData: RepoStarData[] = [];
+  for (const repo of repos) {
+    const records = repoStarDataCacheMap.get(repo);
+    if (records) {
+      reposStarData.push({
+        repo,
+        starRecords: records,
+      });
+    }
+  }
+
+  return reposStarData.sort((d1, d2) => {
+    return (
+      Math.max(...d2.starRecords.map((s) => s.count)) -
+      Math.max(...d1.starRecords.map((s) => s.count))
+    );
+  });
+};
+
+export const getRepoData = async (
+  repos: string[],
+  token = "",
+  maxRequestAmount = DEFAULT_MAX_REQUEST_AMOUNT
+): Promise<RepoData[]> => {
+  const repoDataCacheMap: Map<
+    string,
+    {
+      star: {
+        date: string;
+        count: number;
+      }[];
+      logo: string;
+    }
+  > = new Map();
+
+  for (const repo of repos) {
+    try {
+      const starRecords = await api.getRepoStarRecords(
+        repo,
+        token,
+        maxRequestAmount
+      );
+      const logo = await api.getRepoLogoUrl(repo, token);
+      repoDataCacheMap.set(repo, { star: starRecords, logo });
+    } catch (error: any) {
+      let message = "";
+      let status = 500;
+
+      if (error?.response?.status === 404) {
+        message = `Repo ${repo} not found`;
+        status = 404;
+      } else if (error?.response?.status === 403) {
+        message = "GitHub API rate limit exceeded";
+        status = 403;
+      } else if (error?.response?.status === 401) {
+        message = "Access Token Unauthorized";
+        status = 401;
+      } else if (Array.isArray(error?.data) && error.data?.length === 0) {
+        message = `Repo ${repo} has no star history`;
+        status = 501;
+      } else {
+        message = "Some unexpected error happened, try again later";
+      }
+
+      return Promise.reject({
+        message,
+        status,
+        repo,
+      });
+    }
+  }
+
+  const reposStarData: RepoData[] = [];
+  for (const repo of repos) {
+    const records = repoDataCacheMap.get(repo);
+    if (records) {
+      reposStarData.push({
+        repo,
+        starRecords: records.star,
+        logoUrl: records.logo,
+      });
+    }
+  }
+
+  return reposStarData.sort((d1, d2) => {
+    return (
+      Math.max(...d2.starRecords.map((s) => s.count)) -
+      Math.max(...d1.starRecords.map((s) => s.count))
+    );
+  });
+};
+
+export const convertStarDataToChartData = (
+  reposStarData: RepoStarData[],
+  chartMode: ChartMode
+): XYChartData => {
+  if (chartMode === "Date") {
+    const datasets: XYData[] = reposStarData.map((item) => {
+      const { repo, starRecords } = item;
+
+      return {
+        label: repo,
+        logo: "",
+        data: starRecords.map((item) => {
+          return {
+            x: new Date(item.date),
+            y: Number(item.count),
+          };
+        }),
+      };
+    });
+
+    return {
+      datasets,
+    };
+  } else {
+    const datasets: XYData[] = reposStarData.map((item) => {
+      const { repo, starRecords } = item;
+
+      const started = starRecords[0].date;
+
+      return {
+        label: repo,
+        logo: "",
+        data: starRecords.map((item) => {
+          return {
+            x:
+              utils.getTimeStampByDate(new Date(item.date)) -
+              utils.getTimeStampByDate(new Date(started)),
+            y: Number(item.count),
+          };
+        }),
+      };
+    });
+
+    return {
+      datasets,
+    };
+  }
+};
+
+export const convertDataToChartData = (
+  repoData: RepoData[],
+  chartMode: ChartMode
+): XYChartData => {
+  if (chartMode === "Date") {
+    const datasets: XYData[] = repoData.map(
+      ({ repo, starRecords, logoUrl }) => ({
+        label: repo,
+        logo: logoUrl,
+        data: starRecords.map((item) => {
+          return {
+            x: new Date(item.date),
+            y: Number(item.count),
+          };
+        }),
+      })
+    );
+
+    return { datasets };
+  } else {
+    const datasets: XYData[] = repoData.map(
+      ({ repo, starRecords, logoUrl }) => ({
+        label: repo,
+        logo: logoUrl,
+        data: starRecords.map((item) => {
+          return {
+            x:
+              utils.getTimeStampByDate(new Date(item.date)) -
+              utils.getTimeStampByDate(new Date(starRecords[0].date)),
+            y: Number(item.count),
+          };
+        }),
+      })
+    );
+
+    return { datasets };
+  }
+};
diff --git a/common/utils.ts b/common/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f4e99a8558479e9d58f12a041fcc44f53866529
--- /dev/null
+++ b/common/utils.ts
@@ -0,0 +1,142 @@
+namespace utils {
+  export function range(from: number, to: number): number[] {
+    const r: number[] = [];
+    for (let i = from; i <= to; i++) {
+      r.push(i);
+    }
+    return r;
+  }
+
+  export function getTimeStampByDate(t: Date | number | string): number {
+    const d = new Date(t);
+
+    return d.getTime();
+  }
+
+  export function getDateString(
+    t: Date | number | string,
+    format = "yyyy/MM/dd hh:mm:ss"
+  ): string {
+    const d = new Date(getTimeStampByDate(t));
+
+    const year = d.getFullYear();
+    const month = d.getMonth() + 1;
+    const date = d.getDate();
+    const hours = d.getHours();
+    const minutes = d.getMinutes();
+    const seconds = d.getSeconds();
+
+    const formatedString = format
+      .replace("yyyy", String(year))
+      .replace("MM", String(month))
+      .replace("dd", String(date))
+      .replace("hh", String(hours))
+      .replace("mm", String(minutes))
+      .replace("ss", String(seconds));
+
+    return formatedString;
+  }
+
+  export async function copyTextToClipboard(text: string) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch (error: unknown) {
+        console.warn("Copy to clipboard failed.", error);
+      }
+    } else {
+      console.warn("Copy to clipboard failed, methods not supports.");
+    }
+  }
+
+  export function convertSVGToDataURL(svgElement: SVGSVGElement) {
+    const xml = new XMLSerializer().serializeToString(svgElement);
+    const encodedData = window.btoa(xml);
+    return `data:image/svg+xml;base64,${encodedData}`;
+  }
+
+  export function waitImageLoaded(image: HTMLImageElement): Promise<void> {
+    image.loading = "eager";
+
+    return new Promise((resolve, reject) => {
+      image.onload = () => {
+        // NOTE: There is image loading problem in Safari, fix it with some trick
+        setTimeout(() => {
+          resolve();
+        }, 200);
+      };
+      image.onerror = () => {
+        reject("Image load failed");
+      };
+    });
+  }
+
+  export function calcBytes(d: any): number {
+    let bytes = 0;
+
+    if (typeof d === "number") {
+      bytes += 8;
+    } else if (typeof d === "string") {
+      bytes += d.length * 2;
+    } else if (typeof d === "boolean") {
+      bytes += 1;
+    } else if (typeof d === "object") {
+      if (Array.isArray(d)) {
+        for (const i of d) {
+          bytes += calcBytes(i);
+        }
+      } else {
+        for (const k in d) {
+          bytes += calcBytes(d[k]);
+        }
+      }
+    }
+
+    return bytes;
+  }
+
+  export function calcReadingTime(content: string): string {
+    const wordsPerMinute = 200;
+    const wordAmount = content.split(" ").length;
+    if (wordAmount <= 200) {
+      return "less than 1 min read";
+    }
+
+    const count = Math.ceil(wordAmount / wordsPerMinute);
+    return `${count} min read`;
+  }
+
+  export function getBase64Image(url: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.src = url;
+      img.setAttribute("crossOrigin", "anonymous");
+
+      img.onload = () => {
+        const canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject("Get canvas context failed.");
+          return;
+        }
+        ctx.drawImage(img, 0, 0);
+        const dataURL = canvas.toDataURL("image/png");
+        resolve(dataURL);
+      };
+
+      img.onerror = function () {
+        reject("The image could not be loaded.");
+      };
+    });
+  }
+
+  export function absolutifyLink(rel: string): string {
+    const anchor = document.createElement("a");
+    anchor.setAttribute("href", rel);
+    return anchor.href;
+  }
+}
+
+export default utils;
diff --git a/index.html b/index.html
index 58275de3b1c343a98420342baa076b9baaafa157..156ac4c01f3c5eda46e6b77581522245cb1a81d6 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,110 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="View and compare GitHub star history graph of open source projects"
+    />
+    <meta
+      name="google-site-verification"
+      content="gWDCNMCQeEt3snNQ8J4NCOmVkz4axYeIp5fH4umVaAs"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="star-history.com" />
+    <meta name="twitter:creator" content="bytebase" />
+    <meta name="twitter:title" content="Star History" />
+    <meta
+      name="twitter:description"
+      content="The missing GitHub star history graph."
+    />
+    <!-- use static image -->
+    <meta
+      name="twitter:image"
+      content="https://star-history.com/star-history.webp"
+    />
+    <link rel="icon" href="/icon.png" />
+    <link rel="apple-touch-icon" href="/icon.png" />
+    <link rel="bookmark" href="/icon.png" />
+    <link rel="shortcut icon" href="/icon.png" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      crossorigin
+    />
+    <title>GitHub Star History</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap"
+      rel="stylesheet"
+      crossorigin
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-ZDH3P2WZ6W"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "G-ZDH3P2WZ6W");
+    </script>
+    <script
+      defer
+      data-domain="star-history.com"
+      src="https://plausible.io/js/plausible.js"
+    ></script>
+    <script>
+      !(function () {
+        var analytics = (window.analytics = window.analytics || []);
+        if (!analytics.initialize)
+          if (analytics.invoked)
+            window.console &&
+              console.error &&
+              console.error("Segment snippet included twice.");
+          else {
+            analytics.invoked = !0;
+            // NOTE: we only need the identify method to save subscriber's email.
+            analytics.methods = ["identify"];
+            analytics.factory = function (e) {
+              return function () {
+                var t = Array.prototype.slice.call(arguments);
+                t.unshift(e);
+                analytics.push(t);
+                return analytics;
+              };
+            };
+            for (var e = 0; e < analytics.methods.length; e++) {
+              var key = analytics.methods[e];
+              analytics[key] = analytics.factory(key);
+            }
+            analytics.load = function (key, e) {
+              var t = document.createElement("script");
+              t.type = "text/javascript";
+              t.async = !0;
+              t.src =
+                "https://cdn.segment.com/analytics.js/v1/" +
+                key +
+                "/analytics.min.js";
+              var n = document.getElementsByTagName("script")[0];
+              n.parentNode.insertBefore(t, n);
+              analytics._loadOptions = e;
+            };
+            analytics._writeKey = "CVXXNXv3EzfQPYqHoYvlDDDOXmKa9XOj";
+            analytics.SNIPPET_VERSION = "4.15.3";
+            analytics.load("CVXXNXv3EzfQPYqHoYvlDDDOXmKa9XOj");
+          }
+      })();
+    </script>
+  </body>
 </html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..2398c157bb29ca7aeb9ee60e6910846dbd526e9a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "star_history",
+  "version": "1.0.0",
+  "description": "The missing GitHub star history graph of GitHub projects",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:server": "pnpm i && cd server && pnpm i && pnpm build",
+    "build:extension": "vite build --mode extension"
+  },
+  "dependencies": {
+    "@tailwindcss/line-clamp": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.1",
+    "@vueuse/head": "^1.0.25",
+    "axios": "^1.0.0",
+    "d3-axis": "^1.0.12",
+    "d3-scale": "^3.2.0",
+    "d3-selection": "^1.4.1",
+    "d3-shape": "^1.3.7",
+    "dayjs": "^1.10.7",
+    "lodash": "^4.17.21",
+    "marked": "^4.0.16",
+    "pinia": "^2.0.11",
+    "tailwindcss": "^3.0.19",
+    "typescript": "^4.4.4",
+    "vite": "^2.8.0",
+    "vue": "^3.2.47",
+    "vue-router": "4",
+    "vue-tsc": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/chrome": "0.0.210",
+    "@types/d3-axis": "3.0.2",
+    "@types/d3-scale": "4.0.3",
+    "@types/d3-selection": "1.4.3",
+    "@types/d3-shape": "3.1.0",
+    "@types/lodash": "4.14.191",
+    "@types/marked": "4.0.7",
+    "@types/node": "18.11.10",
+    "@typescript-eslint/eslint-plugin": "5.42.0",
+    "@typescript-eslint/parser": "5.42.0",
+    "@vitejs/plugin-vue": "2.3.4",
+    "@vue/eslint-config-typescript": "11.0.2",
+    "autoprefixer": "10.4.13",
+    "eslint": "8.26.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "9.7.0",
+    "postcss": "8.4.19",
+    "prettier": "2.7.1"
+  }
+}
diff --git a/packages/xy-chart/components/ToolTip.ts b/packages/xy-chart/components/ToolTip.ts
new file mode 100644
index 0000000000000000000000000000000000000000..407cbd1dea72d78b8ebb956f732a1b9a8d5ab987
--- /dev/null
+++ b/packages/xy-chart/components/ToolTip.ts
@@ -0,0 +1,218 @@
+import { D3Selection } from "../types";
+
+interface ToolTipConfig {
+  selection: D3Selection;
+  title: string;
+  items: {
+    color: string;
+    text: string;
+  }[];
+  position: {
+    x: number;
+    y: number;
+    type: "down_right" | "down_left" | "up_right" | "up_left";
+  };
+  backgroundColor: string;
+  strokeColor: string;
+}
+
+class ToolTip {
+  public title: string;
+  public items: {
+    color: string;
+    text: string;
+  }[];
+  public position: {
+    x: number;
+    y: number;
+    type: "down_right" | "down_left" | "up_right" | "up_left";
+  };
+  public backgroundColor: string;
+  public strokeColor: string;
+  public filter = "url(#xkcdify)";
+  svg: any;
+  tipTitle: any;
+  tipItems: any;
+  tipBackground: any;
+
+  /**
+   *
+   * @param {String} parent
+   * @param {String} title
+   * @param {Array} items
+   * @param {Object} position
+   * @example
+   * {
+   *    parent: {}, // a d3 selection component
+   *    title: 'tooltip title',
+   *    items:[{
+   *      color: 'red',
+   *      text: 'tim: 13'
+   *    }],
+   *    position: {
+   *      type: 'upleft'
+   *      x: 100,
+   *      y: 230,
+   *    }
+   * }
+   */
+  constructor({
+    selection,
+    title,
+    items,
+    position,
+    backgroundColor,
+    strokeColor,
+  }: ToolTipConfig) {
+    this.title = title;
+    this.items = items;
+    this.position = position;
+    this.backgroundColor = backgroundColor;
+    this.strokeColor = strokeColor;
+
+    this.svg = selection
+      .append("svg")
+      .attr("x", this._getUpLeftX())
+      .attr("y", this._getUpLeftY())
+      .style("visibility", "hidden");
+
+    this.tipBackground = this.svg
+      .append("rect")
+      .style("fill", this.backgroundColor)
+      .attr("fill-opacity", 0.9)
+      .attr("stroke", strokeColor)
+      .attr("stroke-width", 2)
+      .attr("rx", 5)
+      .attr("ry", 5)
+      .attr("filter", this.filter)
+      .attr("width", this._getBackgroundWidth())
+      .attr("height", this._getBackgroundHeight())
+      .attr("x", 5)
+      .attr("y", 5);
+
+    this.tipTitle = this.svg
+      .append("text")
+      .style("font-size", "15px")
+      .style("font-weight", "bold")
+      .style("fill", this.strokeColor)
+      .attr("x", 15)
+      .attr("y", 25)
+      .text(title);
+
+    this.tipItems = items.map((item, i) => {
+      const g = this._generateTipItem(item, i);
+      return g;
+    });
+  }
+
+  show() {
+    this.svg.style("visibility", "visible");
+  }
+
+  hide() {
+    this.svg.style("visibility", "hidden");
+  }
+
+  // update tooltip position / content
+  update({ title, items, position }) {
+    if (title && title !== this.title) {
+      this.title = title;
+      this.tipTitle.text(title);
+    }
+
+    if (items && JSON.stringify(items) !== JSON.stringify(this.items)) {
+      this.items = items;
+
+      this.tipItems.forEach((g) => g.svg.remove());
+
+      this.tipItems = this.items.map((item, i) => {
+        const g = this._generateTipItem(item, i);
+        return g;
+      });
+
+      const maxWidth = Math.max(
+        ...this.tipItems.map((item) => item.width),
+        this.tipTitle.node().getBBox().width
+      );
+
+      this.tipBackground
+        .attr("width", maxWidth + 15)
+        .attr("height", this._getBackgroundHeight());
+    }
+
+    if (position) {
+      this.position = position;
+      this.svg.attr("x", this._getUpLeftX());
+      this.svg.attr("y", this._getUpLeftY());
+    }
+  }
+
+  _generateTipItem(item, i) {
+    const svg = this.svg.append("svg");
+
+    svg
+      .append("rect")
+      .style("fill", item.color)
+      .attr("width", 8)
+      .attr("height", 8)
+      .attr("rx", 2)
+      .attr("ry", 2)
+      .attr("filter", this.filter)
+      .attr("x", 15)
+      .attr("y", 37 + 20 * i);
+
+    svg
+      .append("text")
+      .style("font-size", "15px")
+      .style("fill", this.strokeColor)
+      .attr("x", 15 + 12)
+      .attr("y", 37 + 20 * i + 8)
+      .text(item.text);
+
+    const bbox = svg.node().getBBox();
+    const width = bbox.width + 15;
+    const height = bbox.height + 10;
+    return {
+      svg,
+      width,
+      height,
+    };
+  }
+
+  _getBackgroundWidth() {
+    const maxItemLength = this.items.reduce(
+      (pre, cur) => (pre > cur.text.length ? pre : cur.text.length),
+      0
+    );
+    const maxLength = Math.max(maxItemLength, this.title.length);
+
+    return maxLength * 7.4 + 25;
+  }
+
+  _getBackgroundHeight() {
+    const rows = this.items.length + 1;
+    return rows * 20 + 10;
+  }
+
+  _getUpLeftX() {
+    if (
+      this.position.type === "up_right" ||
+      this.position.type === "down_right"
+    ) {
+      return this.position.x;
+    }
+    return this.position.x - this._getBackgroundWidth() - 20;
+  }
+
+  _getUpLeftY() {
+    if (
+      this.position.type === "down_left" ||
+      this.position.type === "down_right"
+    ) {
+      return this.position.y;
+    }
+    return this.position.y - this._getBackgroundHeight() - 20;
+  }
+}
+
+export default ToolTip;
diff --git a/packages/xy-chart/index.ts b/packages/xy-chart/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d777b84d35e303272422dce8b79b8874d7f25375
--- /dev/null
+++ b/packages/xy-chart/index.ts
@@ -0,0 +1,399 @@
+import { scaleLinear, scaleTime } from "d3-scale";
+import { select } from "d3-selection";
+import { line, curveMonotoneX } from "d3-shape";
+import { AxisScale } from "d3-axis";
+import dayjs from "dayjs";
+import { uniq } from "lodash";
+import ToolTip from "./components/ToolTip";
+import { drawXAxis, drawYAxis } from "./utils/drawAxis";
+import addFilter from "./utils/addFilter";
+import addFont from "./utils/addFont";
+import { drawTitle, drawXLabel, drawYLabel } from "./utils/drawLabels";
+import drawLegend from "./utils/drawLegend";
+import { drawWatermark } from "./utils/drawWatermark";
+import getFormatTimeline, {
+  getTimestampFormatUnit,
+} from "./utils/getFormatTimeline";
+import { D3Selection } from "./types";
+
+const colors = [
+  "#dd4528",
+  "#28a3dd",
+  "#f3db52",
+  "#ed84b5",
+  "#4ab74e",
+  "#9179c0",
+  "#8e6d5a",
+  "#f19839",
+  "#949494",
+];
+
+const darkColors = [
+  "#ff6b6b",
+  "#48dbfb",
+  "#feca57",
+  "#ff9ff3",
+  "#1dd1a1",
+  "#f368e0",
+  "#ff9f43",
+  "#a4b0be",
+  "#576574",
+];
+
+const margin = {
+  top: 50,
+  right: 30,
+  bottom: 50,
+  left: 50,
+};
+
+interface XYPoint {
+  x: Date | number;
+  y: number;
+}
+
+export interface XYData {
+  label: string;
+  logo: string;
+  data: XYPoint[];
+}
+
+export interface XYChartData {
+  datasets: XYData[];
+}
+
+export interface XYChartConfig {
+  title: string;
+  xLabel: string;
+  yLabel: string;
+  data: XYChartData;
+  showDots: boolean;
+  theme?: "light" | "dark";
+}
+
+type XTickLabelType = "Date" | "Number";
+
+export interface XYChartOptions {
+  envType: "browser" | "node";
+  xTickLabelType: XTickLabelType;
+  dateFormat?: string;
+
+  xTickCount: number;
+  yTickCount: number;
+  showLine: boolean;
+  dotSize: number;
+  dataColors: string[];
+  fontFamily: string;
+  backgroundColor: string;
+  strokeColor: string;
+  chartWidth?: number;
+}
+
+const getDefaultOptions = (): XYChartOptions => {
+  return {
+    envType: "node",
+    xTickLabelType: "Date",
+    dateFormat: "MMM DD, YYYY",
+    xTickCount: 5,
+    yTickCount: 5,
+    showLine: true,
+    dotSize: 0.5,
+    dataColors: colors,
+    fontFamily: "xkcd",
+    backgroundColor: "white",
+    strokeColor: "black",
+  };
+};
+
+const getDarkThemeDefaultOptions = (): XYChartOptions => {
+  return {
+    ...getDefaultOptions(),
+    dataColors: darkColors,
+    backgroundColor: "#0d1117",
+    strokeColor: "white",
+  };
+};
+
+const XYChart = (
+  svg: SVGSVGElement,
+  { title, xLabel, yLabel, data: { datasets }, showDots, theme }: XYChartConfig,
+  initialOptions: Partial<XYChartOptions>
+) => {
+  const options: XYChartOptions = {
+    ...(theme === 'dark' ? getDarkThemeDefaultOptions() : getDefaultOptions()),
+    ...initialOptions,
+  };
+
+  if (title) {
+    margin.top = 60;
+  }
+  if (xLabel) {
+    margin.bottom = 50;
+  }
+  if (yLabel) {
+    margin.left = 70;
+  }
+
+  const data = {
+    datasets,
+  };
+
+  const filter = "url(#xkcdify)";
+  const fontFamily = options.fontFamily || "xkcd";
+  const clientWidth =
+    Number(svg.clientWidth || svg.getAttribute("width") || "") || 600;
+  const clientHeight = (clientWidth * 2) / 3;
+
+  const d3Selection = select(svg)
+    .style("stroke-width", 3)
+    .style("font-family", fontFamily)
+    .style("background", options.backgroundColor)
+    .attr("width", clientWidth)
+    .attr("height", clientHeight)
+    .attr("preserveAspectRatio", "xMidYMid meet") as D3Selection;
+  if (options.envType === "browser") {
+    // If in browser, be more responsive.
+    d3Selection
+      .attr("width", clientWidth <= 600 ? 600 : "100%")
+      .attr(
+        "viewBox",
+        `0 0 ${clientWidth <= 600 ? 600 : clientWidth} ${clientHeight}`
+      );
+  }
+  d3Selection.selectAll("*").remove();
+
+  addFont(d3Selection);
+  addFilter(d3Selection);
+
+  const chart = d3Selection
+    .append("g")
+    .attr("transform", `translate(${margin.left},${margin.top})`);
+
+  const tooltip = new ToolTip({
+    selection: d3Selection,
+    title: "",
+    items: [],
+    position: { x: 60, y: 60, type: "up_left" },
+    strokeColor: options.strokeColor,
+    backgroundColor: options.backgroundColor,
+  });
+
+  if (options.xTickLabelType === "Date") {
+    data.datasets.forEach((dataset) => {
+      dataset.data.forEach((d) => {
+        d.x = dayjs(d.x) as any;
+      });
+    });
+  }
+
+  const allData: XYPoint[] = [];
+  data.datasets.map((d) => allData.push(...d.data));
+
+  const allXData = allData.map((d) => d.x);
+  const allYData = allData.map((d) => d.y);
+
+  const chartWidth = clientWidth - margin.left - margin.right;
+  const chartHeight = clientHeight - margin.top - margin.bottom;
+
+  // NOTE: Xaxis with date type(default)
+  let xScale: AxisScale<number | Date> = scaleTime()
+    .domain([
+      Math.min(...allXData.map((d) => Number(d))),
+      Math.max(...allXData.map((d) => Number(d))),
+    ])
+    .range([0, chartWidth]);
+
+  if (options.xTickLabelType === "Number") {
+    xScale = scaleLinear()
+      .domain([0, Math.max(...allXData.map((d) => Number(d)))])
+      .range([0, chartWidth]);
+  }
+
+  const yScale = scaleLinear()
+    .domain([Math.min(...allYData), Math.max(...allYData)])
+    .range([chartHeight, 0]);
+
+  const svgChart = chart.append("g").attr("pointer-events", "all");
+
+  drawWatermark(svgChart, chartWidth, chartHeight);
+
+  if (title) {
+    if (uniq(datasets.map((d) => d.label.split("/")[0])).length === 1) {
+      // If all repos have only one unique owner, show logo before graph title.
+      drawTitle(
+        d3Selection,
+        title,
+        datasets[0].logo,
+        options.strokeColor,
+        options.chartWidth
+      );
+    } else {
+      drawTitle(
+        d3Selection,
+        title,
+        "",
+        options.strokeColor,
+        options.chartWidth
+      );
+    }
+  }
+  if (xLabel) {
+    drawXLabel(d3Selection, xLabel, options.strokeColor);
+  }
+  if (yLabel) {
+    const maxYData = Math.max(...allYData);
+    let offsetY = 24;
+    // dynamic offset Y label
+    if (maxYData > 100000) {
+      offsetY = 2;
+    } else if (maxYData > 10000) {
+      offsetY = 8;
+    } else if (maxYData > 1000) {
+      offsetY = 12;
+    } else if (maxYData > 100) {
+      offsetY = 20;
+    }
+    drawYLabel(d3Selection, yLabel, options.strokeColor, offsetY);
+  }
+
+  // draw axis
+  drawXAxis(svgChart, {
+    xScale,
+    tickCount: options.xTickCount,
+    moveDown: chartHeight,
+    fontFamily: fontFamily,
+    stroke: options.strokeColor,
+    type: options.xTickLabelType,
+  });
+  drawYAxis(svgChart, {
+    yScale,
+    tickCount: options.yTickCount,
+    fontFamily: fontFamily,
+    stroke: options.strokeColor,
+  });
+
+  // draw lines
+  if (options.showLine) {
+    const drawLine = line<XYPoint>()
+      .x((d) => xScale(d.x) || 0)
+      .y((d) => yScale(d.y))
+      .curve(curveMonotoneX);
+
+    svgChart
+      .selectAll(".xkcd-chart-xyline")
+      .data(data.datasets)
+      .enter()
+      .append("path")
+      .attr("class", "xkcd-chart-xyline")
+      .attr("d", (d) => drawLine(d.data))
+      .attr("fill", "none")
+      .attr("stroke", (_, i) => options.dataColors[i])
+      .attr("filter", filter);
+  }
+
+  if (showDots) {
+    // draw dots
+    const dotInitSize =
+      3.5 * (options.dotSize === undefined ? 1 : options.dotSize);
+    const dotHoverSize =
+      6 * (options.dotSize === undefined ? 1 : options.dotSize);
+    svgChart
+      .selectAll(".xkcd-chart-xycircle-group")
+      .data(data.datasets)
+      .enter()
+      .append("g")
+      .attr("class", "xkcd-chart-xycircle-group")
+      .attr("filter", filter)
+      .attr("xy-group-index", (_, i) => i)
+      .selectAll(".xkcd-chart-xycircle-circle")
+      .data((dataset) => dataset.data)
+      .enter()
+      .append("circle")
+      .attr("class", "chart-tooltip-dot")
+      .style("stroke", (_, i, nodes) => {
+        const xyGroupIndex = Number(
+          select(nodes[i].parentElement).attr("xy-group-index")
+        );
+        return options.dataColors[xyGroupIndex];
+      })
+      .style("fill", (_, i, nodes) => {
+        const xyGroupIndex = Number(
+          select(nodes[i].parentElement).attr("xy-group-index")
+        );
+        return options.dataColors[xyGroupIndex];
+      })
+      .attr("r", dotInitSize)
+      .attr("cx", (d) => xScale(d.x) || 0)
+      .attr("cy", (d) => yScale(d.y))
+      .attr("pointer-events", "all")
+      .on("mouseover", (d, i, nodes) => {
+        const xyGroupIndex = Number(
+          select(nodes[i].parentElement).attr("xy-group-index")
+        );
+        select(nodes[i]).attr("r", dotHoverSize);
+
+        const tipX = (xScale(d.x) || 0) + margin.left + 5;
+        const tipY = yScale(d.y) + margin.top + 5;
+        let tooltipPositionType = "down_right";
+        if (tipX > chartWidth / 2 && tipY < chartHeight / 2) {
+          tooltipPositionType = "down_left";
+        } else if (tipX > chartWidth / 2 && tipY > chartHeight / 2) {
+          tooltipPositionType = "up_left";
+        } else if (tipX < chartWidth / 2 && tipY > chartHeight / 2) {
+          tooltipPositionType = "up_right";
+        }
+
+        // NOTE: tooltip title with date type(default)
+        let title = dayjs(data.datasets[xyGroupIndex].data[i].x).format(
+          options.dateFormat
+        );
+        if (options.xTickLabelType === "Number") {
+          const type = getTimestampFormatUnit(
+            Number(
+              data.datasets[xyGroupIndex].data[1].x ||
+                data.datasets[xyGroupIndex].data[i].x
+            )
+          );
+          title = getFormatTimeline(
+            Number(data.datasets[xyGroupIndex].data[i].x),
+            type
+          );
+        }
+
+        tooltip.update({
+          title,
+          items: [
+            {
+              color: options.dataColors[xyGroupIndex],
+              text: `${data.datasets[xyGroupIndex].label || ""}: ${d.y}`,
+            },
+          ],
+          position: {
+            x: tipX,
+            y: tipY,
+            type: tooltipPositionType,
+          },
+        });
+        tooltip.show();
+      })
+      .on("mouseout", (_, i, nodes) => {
+        select(nodes[i]).attr("r", dotInitSize);
+        tooltip.hide();
+      });
+  }
+
+  // draw legend
+  const legendItems = data.datasets.map((dataset, i) => ({
+    color: options.dataColors[i] || "",
+    text: dataset.label,
+    logo: dataset.logo,
+  }));
+
+  drawLegend(svgChart, {
+    items: legendItems,
+    strokeColor: options.strokeColor,
+    backgroundColor: options.backgroundColor,
+  });
+};
+
+export default XYChart;
diff --git a/packages/xy-chart/types.ts b/packages/xy-chart/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5e64b830537432ccec33603d6f8140615f817f46
--- /dev/null
+++ b/packages/xy-chart/types.ts
@@ -0,0 +1,8 @@
+import { Selection } from "d3-selection";
+
+export type D3Selection = Selection<
+  SVGSVGElement | SVGGElement,
+  unknown,
+  null,
+  undefined
+>;
diff --git a/packages/xy-chart/utils/addFilter.ts b/packages/xy-chart/utils/addFilter.ts
new file mode 100644
index 0000000000000000000000000000000000000000..92881c37ad1fa4e87c47999f4c406ce8e6f46e6a
--- /dev/null
+++ b/packages/xy-chart/utils/addFilter.ts
@@ -0,0 +1,26 @@
+import { D3Selection } from "../types";
+
+const addFilter = (selection: D3Selection) => {
+  selection
+    .append("filter")
+    .attr("id", "xkcdify")
+    .attr("filterUnits", "userSpaceOnUse")
+    .attr("x", -5)
+    .attr("y", -5)
+    .attr("width", "100%")
+    .attr("height", "100%")
+    .call((f) => {
+      f.append("feTurbulence")
+        .attr("type", "fractalNoise")
+        .attr("baseFrequency", "0.05")
+        .attr("result", "noise");
+      f.append("feDisplacementMap")
+        .attr("scale", "5")
+        .attr("xChannelSelector", "R")
+        .attr("yChannelSelector", "G")
+        .attr("in", "SourceGraphic")
+        .attr("in2", "noise");
+    });
+};
+
+export default addFilter;
diff --git a/packages/xy-chart/utils/addFont.ts b/packages/xy-chart/utils/addFont.ts
new file mode 100644
index 0000000000000000000000000000000000000000..519572a8aa3e761d5ab7d00d260e16524b4266b7
--- /dev/null
+++ b/packages/xy-chart/utils/addFont.ts
@@ -0,0 +1,11 @@
+import { D3Selection } from "../types";
+
+const addFont = (selection: D3Selection) => {
+  selection.append("defs").append("style").attr("type", "text/css")
+    .text(`@font-face {
+      font-family: "xkcd";
+      src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAJx4AAsAAAAAxwwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAFGAAAlcwAAL0RC0F+QkZGVE0AAJsAAAAAGgAAABw+UK5QR0RFRgAAmuQAAAAcAAAAHgAnAJFPUy8yAAABZAAAAFUAAABgWJzhv2NtYXAAAAM4AAABywAAAyqDxHFiaGVhZAAAAQgAAAAxAAAANsz4KqBoaGVhAAABPAAAAB4AAAAkCEQESmhtdHgAAJscAAABXAAAAiwGQwpzbWF4cAAAAVwAAAAGAAAABgCLUABuYW1lAAABvAAAAXkAAALBbi7owXBvc3QAAAUEAAAAEwAAACD/gwAzeJxjYGRgYADiynnODfH8Nl8ZuJkjgCIMWyZ9YYDTwv++sSxgDgVyORiYQKIAPLQLYwAAAHicY2BkYGAO/feNwZflBAMQsCxgYGRABd0AbW8ElwAAAABQAACLAAB4nGNgZlzLOIGBlYGBSYcpnIGBoRxCM85i0GK4y8DAzMDKzAAGDQwM7UwMDA4MUBCQ5poCpBT+/2eK+M/A4MscysgF5DOC5BjXMgUwKAAhIwBQMwyLAAAAeJyNkE1OAkEQhV8D/hs3GuOyVwYTBjSewMzCDWEhCfuhaaADTJOexsjaA3gTt17B6Dm8gCfwTdMo0Y1MQn1Vr6rrB8ARniGw+g3wFlngQNxGrmBHqMhVxh8j13AsXiJv4VB8RN7GfmWXmaK2R+81VJUscCpakSs4Et3IVcYnkWs4F0+Rt3Am3iNv40R8IoXFHEs4GIwwhodEHQoXtCYonlGLHC08YEJlgATDEClzVaSyvo8FyZILNKilJI2MMYN7kgzdZvzKmoL+DbXNWhOUBJ1g19maGYpahilrrtHEJW2bEUWtfEkDqZ0vnRmNvayrC2nmSz+2eethogbJ0OZeKv45019464qGTJ3OvLnXMrWzmc0LeeNXqrF50rF5GdZOmWwqr5uXsm2Uzgt2WZ9Aokvrwok8w2wju8qZOZ07jjPiOlMO7Ojq0WKauf/V/px4Myf5/WZYa1WTfL/fC4cq4hElruKh0NOu4F7yipv8tPgzRJzhC2aqiNgAAAB4nI3RW08TQRgG4HdpOYggUBHb0uo4nNSWgwfkoBVBhXLSgoooAuVQjED4CSCnBLjzksQ7Em4Jl/4AErjlGjbwGyThBjK8u7MEDWCc5Nmv8+10951ZAMkAXBQmNx3A4BVJhewadt+FdLvvxqY9F/yVgX5MYhXr2MAWtrGDQ8NjxFwrwieCIiL9MiSjMi4Tckwp/ktg4MLVXhH4Y/WwHFVK7as99UutqZ9qWf1QC2pCdav8o10r1V7YTJhdZq1ZYIrdY530wpGLvHO9JSxiHCPMzmFUOF2vnQ7cD+znDdAk1dOqw7q37ojThsNau+UYpG3HEO04hunQkeArPBpGWWMaxvgJVjR8ZxyvxsQQPo3ZIQIadwER1LgfiIiGb4D0a5hiDWmYZo1qmGGNa5hlZT7JXJhjZSbJLPgK4/eMDVhgxhT846j1MJJc7uSU1LQr6VczMq9lZed4rufeyLvp9fnzA8Fbt8UdWVBYVFxy9979ULi0rLziwcNHjyufVFXX1D59Fnle9wL1DS9fvW5sija3tLa1v3kb6+h89/5D18fuT597vvT2WWc9qA/zP8as9Z3m5vVk+rQ7Ze39bIyPLC0mLn/G0N/TE5rzdrgAeJxjYGYAg/8NDMYMWAAAKBQBtgB4nDx8CYBkVXlutWPDiZpRp+2X5CUCmmhMosY9xriAiIKgICr70MzSM9PTe3d111516+5nvXvtW+/brDDADLuggKKRTYEBFWNekpdoFvN81b7OS95/irxUTfdUd1Xduvec//+W//yn+2Kvf32sr6/vjcnRAwe/emBmZCoe63tdrC924/YnY9uf6tv+9Ou2P7Nr+7dff9FPX7f8H2/addFXFv/jTa+/6A2xtx55539Q+l8P3nRha6f9e69f+PXf9789Fnvdm98M32Oxt8D3XX/wVvn4A/DtAXVP7F3y4Cj25th/i7099sex98U+EPt87KrYNbFrY1+L3Ri7JbY3dkfsQOxQbCQ2FpuMzcTmYtlYMYZjYawRW4mdjj0Q+2bsO7Hv9X2w73N9185NjHzoQx+77LX/Piv/+8CHP3fF+L4DM5MT1x6Zmzi8b2ZufGzfXPzA0OTk0ORVQ0dSU0eGJ4amhmaGJocm4GtuaOKKocsuH7r28qHrrx26fOjKK4au+NrQ164Z+uwVQ9dfP3T9NUOXXTN0zbVDX7586LLrhr76taFrZ/YdHDmwb+yrI4fH941MxIcPz+wb2zc1NTOZHJ6e2zc2MRnv/T82PDvbe3B4ZnhffHim93j/vpmh//xZPj8EP8998PMf/viHPvj+D1w+OZWaGTl8JH7Jew780SUjU6n4kcmJP5Xz8r5DkxPxSw7At5mR/XPxyZnZ915yuTzKyPzwJZdPjo9PTsxecln8tWdHJife9+XJCfnr4ZkDI/vGLvnw+z9wyTUjB4YnZod7R3ttmt93/fDhubF9M/JXl/znzMOtL/a62K7Y62P9sQtiF8aOxH4j9obYG2Nviv1mbDdM2ltib43tiQ3E3hYbhAn8rdhvx34n9t9jvxv7PZjMi2IXxy6JvSP2ztjvx/4g9q7Yu2N/GHtP7I9gkv8k9l6Y6PfH/hQm+4OxD8U+HPtI7KOxj8X+LPbx2J/HPhH7i9gnY5+KfTr2mdilsc/GLo99LnYFBMUXYldCYHwxdjUEx5diX4YAuS72ldj1sa9CoHw9dgMEy02xmyFgbo3dBkFze2wo1oEQORm7M/ZQ7LFYO5bos/rsPtxH+mhspI/18T7R5/S5fV6f3xf0hX1RX6mv3Ffpq/bV+up9jb5mX6uv3dfpW+hb7FvqW+5b6VvtW4NQvSxGZczuggF5vG9uF7vg9y984Tdu+I0H3jD+xve9qf2b2m/+y+4bdp9587m3Drz14MAlb8ODZ37ra789+zvp/779e+/+vb98+3MX8Yv1Sz71Dvb7Y3+gv/vGP5x4z11//LY/6Xtv+X1b73vy/c//6f/6QP1Df/Lhz3/kwEdbf/auj9/75//3E+f+4gef/NdPK59xLt132eHPTlyufc684tor7v78v1z5m1f+3y/uuvqt17z9S9/88qPXWl/54vWzX33v1/Z//aYbbr5x+eY33Hz3LU/d+tJt5/YWb39m6Bf7bt3/y4PewROH3nnonw5/f+TS0bePKeM/nvzc1JHp52Y/Hl+ff3fipdR9mWtzuwpvV/Lahw1qX0VfEDX3j/xM9JXK9bVP11eb/95542Jn+aaVq9dm1s9vXr4VP0aOt068cGrPvcP3Pn72c3O7d27YvdO494UvvDKg/GD7lcHDCraCo1zlo0JDA5cKg16Ld/rxR1je01x9PR+ygAUudSgXnLPI4w5tI3oneYG9jAYU+g/MyJ012qavOcgQNk0ZaP3ftEFCMSecCIvpVKWYZgrJnGUWk1oGz3lJL+mrLkWMurZje5YgFVqGT3AdweEfFTQKo3JQqpftBsJVXFZD07UFHJOml22Kdu9c13nlM+cHYt2P/vq6wSnVs42EmYd35rhCbP2r2tVkwteQZ/R7etledhpCiNBHzQtpzTnrf4P53GeMcxJxJvjc44aHdF+jcxraebMyaNu2QSwYCZy1U3QerpEcwioewjfzYkNxbU7roiUCEpRcn3J2D7ySLbNjrMmXaYQjq+OHuYrpYjpP5yilhoF2v/Kv35195Znn93S//sS1T9XPD8S3/6D7rkGPNlmDbcGweiXHJ8etQK/a7AhN0zlShLtGKEWElV9ljIq/1NdqZS+o6FXsYpdy6pohpvAKGGOEA41N4zzJEoMi5QJe5WV3vfJT6owHKO1qZn9O1UeNuD5BSvowMkZncX+eFIhNihZlrIIGjjGfdXjTucdOkNPkJK5aMDGYpagiJ49YRFOogaiNFaxYCWvUStk5+yZsEWxilejEJHAqcDxMkUkz1pyhwYjZ1KKqlS0WNEUj8mZQgxQZCRQU5j275JVcx647NfFQ4FCP5v8U3qNyetictHx7zkQpy7A11dApYQrPCj0yGoW7wkWGKqwfF2gBT+Mjdsoy4cgmNalGia87lmPCqWBh+yaCa4CwiqgHk82YjN6AOx6P3A4P4YnQ/ykNEHXu9xx4nlK4TJvOkmmyl2DHCLOhXiIR8XDgIc9teMLnHg0xt4XzcwcO6TCI4DINnApFO+h7gxQftXSSsTFhgnHqQ5QtwMUtI7G4zPqrrMI5hDglMFxW/hPUQruD1kt7um+9b//qo984fPbo3Q+/PPBo96rtfxy0DDNBkiSDTZsadFY1LMu2SW+ICYO7BU8gxRCWBrfkKFaIaSTglRhmgNiY3+BkRD7MBiqCk7XlcLTzApKqVXTgpJiN5+A+YSWwwlK2iuTsFUtKWQ+LLUhGH3PL1apwrr7J00baNBnJIDtuB9GYm3PyHHMMaW2H8ROHF7OoorIj/WyWKhyjgUVGuAFzkWesjEPCqOOige+EFVHjW6i1eOFS2UtdTDXHdlRXCUxeYDpgAGngYtsrccEC0iSLFDAAcbgxCPPQWa94InQ9txJtHKcuZfCs45eqZ0QHiRZ5DDesZWUp1VajVEV1UoArMzgJIcEc7oktUkIkatr9j2iClxb9OmPYt0OjlzqYyskcCgoUDTyuUMJZXZwkTsbJCQyAYmsYwhbbLGvCS3UGqVWkZKWfdogvh4kwjSGNwaCb6NzORwdp3MjSOLVtbNhINflaP1tzynQBRcGFPfgkApt5WkSf2z9o30JNC9LDcqzQdokPONBmImj6db8kADSs/SSLupe+d9AxhSXnnRVZgR+yx7UZM01wNqsoqq4BSPkFg5b7yZPsfghhh30TBsgPnRavcccu5dDOhTvvG6QzdJ5hbtg4yVCK9Yum2PSe8Z4guOS4gObyxpJw6nFykM6g3b/afsd3b/vRFwGu7vruX70wcFO3f9satCE7MOSvDjGOBioaTqbNIrYwRJxhpffitHpZ59aHlAivuZHXLi20mouoUgcYX6psRCu5DdvDHmWUySE3PJcaDhr4eLqcL48zlGB5XDDRtz41iJV+feSGL2UDQ1CHLJEGDUXJXeAihAsTDOLC9xteBDntGJ4J59FdOzOIqc1sboqM0OF0sgWbQtqoxCDm4eHrrpuZmZ21DGQZBgxA0dh7w/6vDd9USNAchdns5CoaoIREv069g6qtu+6pNCuNv//HcoXS8y/VG37gewzi4ybHK/kXU4fBPCJWNpZzFF2zk4DP1qlObjUnrtG/bicp9kYpZjbEi1mbLxVPjjzSOrmGji0zUW+Wy9UVtkBdJmPYzzeTdd0brQBjcXiHiwCyBIaQSFVMih7biQGe5DJKQVGShaxZtBnEiumRGm+Klt8WmBEX7qiCH9QAmXc/duer2xe82NdNvLir+yfb3x+cxkmrqFu2BbBh08SMntdyRLen7FF3sn7YVVrjvo5CGAFFNyx4HS6aU+OQuBDwBCeG7b31a0pD7am74mg5S2kdQMHrpcx9FNKSBSLk58rnTp5+BFWUft8oF1w9yvlWRH16ekl4TkBKpod5aq2HPjDlqBgV/UJJieDa3aDh3WMuIDvKOf1JzwL0wrZpWpamMtNUkK2lav2JRrydrKFCFEX9ruf5QpTry6cEZAkTlAmXtUjHfPILD+z1M9zhMwS1PjlYtyOzmqvmQcIkgbksU9UyuXShoMB1GiLjj99vriBzLViucZA0HI5DPeIR9OLOtwY9q6yEKmqmDbXfNnO5QmF6WtFnzKxNaEHknHhZC3XfKpsr+WcbrXuXEER5pr+TXpxt5UCPPLq9t0v7ll7e9dCvvzaYxoQUgb3gyhOQtlmqkXeTWQ6YKb+YXsn5NoqsJeEEkLU9WmCehGa3AqMmSImepM8ER5SXkblFfEtYIs2SNnzKx9rd5K5u9pODoMUkCka0VgxStYkNtZpdTG4VN+zAaJi1yVfI82t/h/wF4TZOdO459XDFc7jjcOGGPnNLSITFdn96UxdjmaJZ0GyrWEzNQpgQyGecLwxflT1kFU0Fmwh+IcEPYgICA+dvtuaAbObIYXK5n6rcFo74hWgGRbOrt1QTtfmlmYVUuegQj1ZpqwbUunvnM3f9+q2DOvCqkbRyBAuDW57umvXsPTfJYBOaq0XpxgE3g4Tijbuq0MWUuFXcoivGPuXK1B37b9XVomIZSibLzQTCGgCoTg1fKamB7tCI3xflWGth69TKydpKUGvdTR0EpAEh6ji1p7BDJCg6wYL4pXHS3LJ89bi+VlzW2khbHH1odt0ItMh2bRde+J98YDmHShpkoQk8inY/1Z359tef2dMdeWmg053frg0aJhBCyk6DjDnM4ixOLaYBWgP4FGAeUjXFS1dQpmyQXK4IQcd0XvRzUS4obEx0Uq2M7ozjSXyZmteBIEAfpWma65EeaU+BdkTH6KHh/sR8KiVPhsp0gwmxLQvUKIibArc7uUahxOt15IBQlif82CPwyHMw1s0Z6yNO2kn79iZugURwXVSKsM+3xGPiNKshXukvZz2zmq6lO0mQMSRirgBFJCGZRHUnCOq+n6ihoj+/nFhCLdx/0j4tqIcG7pAhepFH/YhXmIddO9BrdjsuFR4Zh/hOcwA7trC2uYkq1UoF0juyg3wrvWSIhKpZupFOzc0aejaFcK2fVPF9VolAjDCXl9R10DB83AdmJRSuFEL8kW7m/BfP7+keeeUTPxm4rnv82UEqtRtEL1tlj9JVtgZupArTS3z8qH2cnMV1168jDgSLI1yhdd03XUaG+K38DpES6MyFA3fQBbxKSvaSsWK6lpNl8xYkNdGSaOA6swC0n+NZ/jEMEZ6DCdlPbzZsIFYXeI2oWMOKbWEFrtYo6DlP8QpewbFB8Q1c9whvRN/g6AQjn+snd+BxkGWQ8Y7m54RbUgI1sj0XTh2EJSVA6gwCswqGAbIit/PJl/q6l/zdoIqnVPhcApduWhqE3yyfJBl1rjgzfRh4hRYy3EDMMORjneFaxtMrhuAubwmALnbilAhYTw+hcm35AWfDWRWV4jGzYcEg6B5mGsTwVnf+J5e+smfg0q7oPj04oGTwBP4oHiYzkiaJaRs4oSmQxqWJ0D7jBWyRt+HqLj3JzosNvsK+zdY40Bfz3Aj0L2nhZSIM3/AIBTExy3Zej+clMq1lun19S7/a9eDfD2ayYBiyMHJF+AAbm3JcGHYKwSy3F/SyVcIlH7mAX4wGLCpXVvwKaekV+zVb44DVg9g3hOGi+aZhJFJod/edf7X3+QGl+7G/GaQOkKjDvNICgxAqL0pZ4FaqWw5QEsSyU1pmICwupaK2IUO7eUwK5vo6HJg1j0uh0zrBeRRufUcHY+lpgcUI1bkmJkt5y4pjVc1ZKhDgGPgqqoNxQcW872p5mB4drI559IsStmwQQUrSTubHwRxamq31zI9u60rcmC7Ow290KdOzo/IDUyOgHyidu91QtLxwjGxu1E6HmpD+Cj7EtwOrqgOlchSIeom5MNIVuBoQZgTed/x75CLaOM4u3n1sO/fLvvZPuuGPd3UfWh0Ek8zkLXAjtxZ4TrlaqYalsOQ4nePyakH+Oog7ftNrlo5BDm2wBq1D4gHNUJe3M3+t1YBpXOIgHCVPFsuFmhJlQ1OYjqTruTAn5l2bGZ7lGBxsqIiXjIvA0MF12WKCKbZJiqZhwR1L4Jzp0Qf4FgMVi5kJvVCYn7oUJJYFSWSpE9YhupcOB4drR7nJYQAR1VtTjuKox45W1Yq2qDSNyPLoEu3QEvMgvl0geeTShTJYrHdvjwx6BqHL5Dhpmm2lpXh6abI55N9Gv4Lofj3eXxjOTE3PHhk9oB4sx/3pjcJSfolxa0E/Tu52jot2+RtOiID9yk45XCivAJKJzqojg9IUMngfWX9517e3nxqcMSFydVOjafExNk1vJxNkL965wdyPU4w4OpCDKQgKrZMAMWDvfCHvz4ruR51umk/kXrRaphgHMRbN/vgTP5EZl97+p8EEntXGsiOZRG5+fnLKNPSEVQAm1ITOSUUPrNAE4+RanAkhbaqE/kcfKkdh0PZLXiM6EzTtKu6Yrg12NsxJImZSRNhOEbhlQhvV5s1CcuQ1tsA2MrXRQ8DiRNXU4vTk4UOqmskVsunMxNT1X5FzVIhzguQswg9qMC8ds2+BNsc+ZiAqwdzJOgwRoHJZSCMWsTL3eEm8Qlq0RCsQMZF9t1vGLjmFGeCkAoqe1vzI9Xwa0lKlWowMT5e5KFTQYRrhjoqRRXrnzKb5UQkut7FrgD1tSeVgJpQijsL+WuWZZ8tV149C36tVFldLpUYjKstQFkI4nh9VvQgC2nGAtgS4FshuMIzA88GiqDKYiV461FgD8XXcAZIRRBIH15e0uhVaPqUiHF4ueCa3BGGI8JEAhDbGEqEZubiIR0iBoN3r6fPb177S1/0/53d1/1f3Q4PUtgqmUpyfHlWMojlnTRI0RWaD/skoBXpQ96ce1NtERgZHqpO2+4/o2nx9f2nCrtSnQB3lAq2ZKhtPJE8o69ay23HuEaWoZ25hnNlKJ4jC0tIJOXvyZJsL5XvI3b1RZ0Dy6jf1RaMlrGxDLemuLkxuODL/5nxbaN5NJSATylUYVj/0wnr74e8BtLmBA68Bk1H2ABtB/nCBgoq1XgA6sDl4Vl8VGabSrJAKQ+bnYevjxjRBt5O8MQnBCYitgXS1nJQbd/E6rbMAzmFRHOOnGDoGYwWCxJg5It8NtAU3rWio+QSmhbSah3lOI3OG2p1kM+0Fq/C+CB8rrBdbRUd3dO92CsbLSFAF7SbdlX/88x91pxN72i/f/kr38p985i+vfOEzPxlYj/399v8YTMOImKamanESJypRQAjp2l57Hg2ciZnDSpEMkSmnEGXqMxuZM+CHzpaFLPEwTst0q1QSaOBgrOrcy4UNAA9yDn3mwoF9MXoZv91LcYMrPUItMJVnGQk11/RNTj26CBCBQgFB5iHzTD8cw16wNnHNvJf9jfe3oIUUtuD8M1tgdRIaq2hgf8xqmi3sGGWLjRs5O48BKgemFMotfJFKg9uYwpPkg3ge4Wz/wKlY6oIROm0dUIaVOUOxFTsD00696Am36a+5i6wiOY1zBGMAV+PQdXSfX7v1ot3PNX+4/bEXbvzhnn/9UfcPnxk4u33l9v8eHHjxtvzO7xpftEy4PsBsbrAEyZGCLNeBWCEFexZ/iEwhfBvLhakg6xoefBgkBfaM034Qul4jbAcnKseM5jyqZpw0388mqGWM6sMsKMaNXGJS1TCMOyGKMqtO2wjmmM76WSfvGY4BAS9lquEafrFUrKstMzIpraEKmJWLchSDWyAmLtqaNks1pwBnp0mBDcFKHIsWHQvJOpIUsStT5aJrAQJK4U4lKJfB9Di4YpYsdE/uGW+r5fCVSq/0A+bT5ce3qHgNFcr1pYfAOhPmlJ0oaDm/1BeJa/RMpzwUdYotENflTLUQIBNsVE/lQxoYAkyzyPv7xYyZtidVbAOf+WwTsbOUBsLjp9waXWYPiw5MxtnjzjfcTlj1ym0ztMHcmI7uCl91kObYNG8B3nf/x0/AlsGkaHgkQeDjyWu2G2zkXGLqcOJIfi45bMVBbRXsItLj2k04g3Ps6zzpjPk5bz48un776nyor+bq2sOz36vcvYQC1wOBxKjvhX6z2mr3khmuv1Kt3yUWGeQ+XUC0WtjQAhu0BKCdO7UqS0WKo3gH2yPshsK8eUsmXkQqSBdpJ1gL9MX3fLdxtn6mvnh8Y3M18ktwWBfgFPlu0+QluDchRBxLSBLIlXQ26SrMwOgX//bxQQ9kDkuzBFa1bG4mn5/NDc8dYoeWMqViqNbURu4USC/mNMON0nrJJCeiB6pn7KUJtFvd5uc/+/LVj+3pnvtb0PSf3P7ZYDLD2MUAJeCzQGrP2zkyY86DljBMRcWmk/CPcrzOFpkJ5wNS2wNZEMjTY6ukRU6QJZAK7V4pFJu2aRRHPk8xkvrDUi3VLNi6ngDxNlrYa8xCABvpy4lCTTtr55A+bhwtzKopbAB/Gp65UKjoFQsUQa/cyOQah0Dl1XAxvNs/UTlXethbCxb9VX+Fan6ntNW+r7Ja21i4E+wV8IYU9QMfYJUFdhFoJAa40CRM9cCwQ/BJkgUeZuwib+ed9PMX7Z7Ybr7c13Wf3dX90jZIf3ooXShOzWeU5MjUrf5tp4Zr2VKxpqLI0I3+TGHkSDFjqHq2d0UgSW07f4Ro1gTf60LmwchhKaIOB5pjgU6TdGs79pmxH5jPdhquzatexVtZDMvI8TyfA222z4qSW3NOSU+MfUiwJX2p0MAC95yJGN3KlVRf65XofDf0Qz8qOW6lybVw1WsxTloIRp6AxwrVdVtgnl+kFir4/dRJbtigHORqj+0koryTd4osDUjELYWih/9s0DUh4eGwIC5I78wtqnIDRIeUMHGeVo2ihgrFMYAXk379mBYUI70hArextbVY9kRFlGgA7w9UpO3og45dViN1Y9ovODNOnKRMRU+nZotaAlTnPr6PF93iCjKqznJ/8M1j992/2a5g2syh3Ub3DIz+3u2dQYXM6UVD1tBtQKiJpKaPjs9NFsZBwGsEZ0fZbbWjqDq5Fj+ulu0zxAFegSRhdf5oe6mKCnf0U9NI2KZtpa8zZsyEEsdxUrQytgF8mLdySJvpFwAwwkDLWv+yRiSgCFAy8iIczoUDWN8Rtdb3omPlu/y10ikUHXPXq6tOUDkJstJzvR7UebKMBiagRJrUzvmo4JFKPwFBpAM4aqHpZZoAkr3aMAyrWxCyrjpezQikclVgcDWzpk7QqU8NbhorM9VhoVOaS2eS89nx7HAyrk+TeVJ0jEituif8Gmrcdeb0neUKuLKalMQb3z7fTXcv6Ot0d+16Yjs1mFYmrvQVRgIj1BugJUrC564bgOTzItf1vNIyB4ldJqEVYMfuAS3p2RvFL5A8KYR5DeV3fjZomaYlCVmZBVaPl9J1w7c9M6IoKIH+haG+mMsKo5D1LcFDN4icklvBC4YrbYlcUNScjIfiQUFXCnCe8z/+lz/+EVjDy7YvGOwtDbiuzwWN6KIZqSXLyXngyamsvGmOygFtDDyVkDrYtnp3k9hy2Up6GDsF3KOTCU+uSwqbm26R45LdMao8DDlfKINcpNUmu/jGna3BpAUBVAQpa+nEpGPkZiOTPqLECaSobttAwBikkKyZUfgRWXDBruIWQpANoKYA1AVvlQBjgWqk13Fc4SI/Wjjn1kBsy+UqHhzjZQrDANfkko65ZFdwScpWOdkCe0VXVqlkfQLtvrH70Pa5waJ5y03JWSnI5ODnlXzu8OGDR6aTeTVXsOSw25igHDg0nCFFzDnYh0ZyaW4lvjHmqdW5lWx9vppcnK6nkK8FmgBCAb1pcSvQPKNaKFkVR65MVJqVFvPVCNkCXAOgB5B/NL3s2zOr45tlPHw8W73lkWxF9wxfQqBYX5C6amP95Zd//gvb0qsYQlcN5xdAJ2po96vdq+8cee6fXv7is3sGLum+sn3N4PvpzkVqQlft2zDJIlCLqUDvd+XiL3A+wA5w0+P8Hu9eb5Z0PypAnfIlpyEakKRo4C0gDpggPo4cH+iTedYKrsFVuFqQZFMmOmoUrSFpP360c+XguHmYHXRu8nYuV22Vyqq3rDqAdFKtKYOqctUXbhfZJBiWSuK1chzHgLK91eqALvMF/g33+26bopCu4EX8mHmCrftw+JKo85AtcM8Dz+SxACRL1TKtCBUXDxbGQS/cePf2yUEVHBq29Jzt/PyPzv/F5oRUZ+tzYIqIoetGNn/LDdkcSqbzWduw9SOHpNUePmLr2LYM21aLTK8kKylKSzZIrpJTLXteAHAhM0CADg4CP6g3F1eqrXp7pV5dQF64sbmyuLTQaPEIpCX4J7PDgmQAJk7IsliunA/RdOvgicMn89V8ScYQ6AqRXLrloaKbDogzP4d2z010f7Ov/e1d3T8FBiM4bxbtAoCQoivG2GzPT8BN19Kzet4G8YdTyJrqD8BzLeAqHNHzQLSJHhdIUHX9Enf9uuM2m2h5uR5u+Bt+m3X0Rc0HccYMbkkEsSasopGZOQyjkc3NZ/fPjCbnMpZWiINvS7OZYM5LCMXBEM96SfExEiTiVbftwyh4pXbimLGAI0I8Vwjfcfhi6d6NpTZqVDeOQZ71FFUQNu/02m6LL9htXNEWTIAaLAmcOrmGCbgxX9eYXMXA3HCPhHkaZ1cUTQPV/00MGnYyoQEUGXkYxiR1FubLSkllAOAejUQoOG+2UWuBRv00AmlQUqPptTwzqQ6gg3b/tP5CX/d9z+3qjm//7iDIxXghnZ4pzNDbaIJYrhqmLNbKVYsCMr9GGm5doCXv9CmOpQmDu1ZJRQbkBNh2YVWtOq1RwcoAJAIuHhJl45TrLS6V/zF1mjJtvae1QSVapdy6UkXZ9vi6JiwG5MxVf94rgOjS6TTZb48qo2nNOjyqFdHwrXs/VRwu3A6SdoruZ5qbcFP+rNOrAsk1rvqU6IEl2N8oD/pFL4GoCEFiOJKS7E3cYfez71bPtVDTb5bB3UhAA4YjgenbDu6ZeEC01xbsHaRHKo1r+7LX5kfxJBl1Ct5Ebfpu407jpDgVrTbvP/fc1hpq1GqgyNaC01pHCay1iTAvTD/nFmoHnaHijJkvZGwBMIl9GuAHcFgsGT6QWhkUM9MD2dYgVV6mZsuasw22qRAMuVkjqZt2b329J9wzOXj6Z/sGZceJoQCiqwDmICTB1WBDN/ViIVdIa6Zc/JSQDNo0FBXuhbXqImXNUi0MRAgsyrvixT0Lz3ULz3/u5YGnu1Pbfz+YxnP5dPrA/ukvJm9QJowksKCFdThoMvdnxrB6PR5xhhCobAtkHfipDl2joSNqogxsUKdV8PdbvMa3RBWUtn+XzCV4ht3p/NK800Rstn/gVT6Mb8AJcz+hS/nIKJsCsKoaOMCKAAuAkk9z7q2ysvMt/CPzXhLiOimZZ5N/o3awa0Z2oLVMUawjrTwBbgL3RggVohEnbqG7PjoYGqWUn3YLIFDAPHvT8Cyu/AWMGdWoygy280G5PgpEHIjAa2E3qAvfq4iodGLxdKtRLpVJRUW7k13/V923v7Jn6cUbXuxe/8OBv+v+fPvUIKZKb1lefiQIUay4WX8UkLvIitRmGreNIkd5vh/sk02mdekmFcugOWoXQH6BoJOky0wGztJgs7RIdWdSpJ2kc6ssQvIx9zY08CLL8ZvZ7fz9PAViV3dAW4EFAlyvKOfmW7ZHQrkeWMWPsrIoi43QE2VvoSPRUlbZgxIWbsNrYiHqSCzajxolKzTKtmsFySV56jBrjhYkItUj7I5ObyQEc2AwNpuOw3r21ROLi6VKY6G0xFtS7b1W6Dkna94quEsCwoNQZFMjwBTtxA4OljB8quyIsiKzogMRmsIA+aJoE3sPjRemlKQBusSgM1nLALkhV6NnKCsXItU370yenTuWrCqO7ekgR90iM9xZZ07dq6g28JxqZ01Cx1gK4s2GgTmwQF0ky3Y2Q3ipH1iuQYHHrO9a95rnyMv6KviGECDGV+ueKDlnQ3DHJwSni0BpzWd+3td+aVfX2P73QRXPaXl9Oj98x+gNmanEMFaJDXODLVOdAYkvu1QwwrY+ZaWMWXuWpmkR/BmGrzEA/XiUcrPNr58+cF8arRUfwcuBz8HBQBQ/tRH6rrtYleb02JYXhVUnxAHCAaWZSiEymCrrtyC5LALGKZ9M3TEzpcwUbzFmyijrp1pa1faMilXWO+BnjpMT3hMhOBuY0Ebtvub60klU7axvVvx6WLdrakXfmg3+q0r/GkZFtsMQZ77jOSU4JRbySrYNSeOlm6pf9ONVE8YRvjjSvTEnAwjw4OoPttXEnsWffO7Zgae3+7YbEOWJhjxY0VX8+YrKUuFk9Y5gH0vTDMNEw/OmbqOkKkqZueS0bbAs1ZmUejt92s7r7PeQm60KvQUNvEonISWkQJNsQF8rCDdIxQztNVIRsqPBoWiR/mzFDxmLvJK3WetU15YatVOnpA8Lwl6BBDgULmjhFPdBhFbdqt+Bi2qxiteyuMRQEuAGRFVZDjLJbBWWKEu3wDYHuNcF1IvUTENG6p7sYMUoWxQidS1RUjvJjdloJkj7eTyBU+pBPZMdueWmqRRK5IcTKWNOH8pMU50SIUo88P6KPcwf9/7BfBDcTpX4CLcKdNU/FjyeWQWRv9Q98dPuHYk9x1+66jzA6APbTw9miGencMZO2VkyaRf0GX1CJyRhgB6xTarSAgheZJnKvIw3rgkduQX6qX56HRmzD8LoFXf+G4mLSZaX/XmmKde2iUQwmxulnERVaTWQb91lNAB2v1MugahaCzaDx2tn/DW+xiseXQe6Za91DjqqXOmi8Db3KjMDFzeLJ/WE+d4p05NLsdhB2AOcvk9816nwbyC29SDtf4y1cVV3MYgNUAvLZcd1Xb5scYR5v/DyPXo0edYtijzYZ4DtafEFc9JEpy6kbdKBtwRMql3AqZJzrrbgPhCc9VeZb3pW5AQ2ahgN7oZy3dQBFyVKti8rRNRhjaIAI+Il+SGGEnSeGaBD7tku/Kxv6Qe7uh/afmFw3ppIGjlsy94eQzVnTFCp6pg5k/oATxV33ojj1qS+H1kzZjzIOqqLF+wqXIIvIhCRHuQnrYjQqTiLrIz4ggMgisTWPaJ/ia+CKN50tkStLuCkYIipL6WxryyBiGEK4Dya5FU2asftr1nzGKmEtfv5RvRkeNpbwE7YiJo2+aEakSWzROswZaukRldxi6AWacDRSry2addwZER2bylfKts5dql3iwNoytG89wkvbcv10Mb57kdf7Dv+N13jhV3dm7dfGjSo3utwkP2LGh2aymTTmb2ftFPE1BK0105IJMRaX8JZnGAZnuKHhfCmnLlw0jUZqUz3UhAzDBB76lDJCC1fj+yaadJFbUVds1edEqSVbJxxgYWRx0GtE59873uyJiBcB+5+1FtMcmWbYvkEryB3kwWkQhp2vZeJ8hOqaacInFXgoNnErJinaPRqDUwmwRcD5gG+AhvaLM9nHLukeuYPwiapk6pkcUMbtjWkzeXnEnPx6XxxXlcsm2b5USdRirfTNcyVBa1uRSRE9rKxiLfwKnVEg0fSg7Jy9S4vZL1rpLzU8iPkeEJWisTSQuiW/Q2naTWtZd23Xbtu3lmoWhUTssfBJVnNZm7oRqUlWo2HadCls2HeTfiKMx0JPOWjpDvOZ8HDprrK+S+/vOf+l7qXvnrF+YGp7uPdnw7GWf/AqVvETt8skfW1Cqu5Pya/kGsgEMxweMzm6BzMHShVy8B56+PmToyMgWGY0i7p1ZZ1kFeqnSQZe4piR0UcuJP3BLPUehGMbxukquyDgLmRJU+gGuR16CmxJU7RkjiF+Gq/LwIegZ6vgsRDA1PfKZ1y6hhFBB/pJ0maobJF8F0854wyq55xjRKWBWSHtyIQXZ5VQWaTnGaPo4Ej/KeV7jvIX8MxyF2ipJTB1bIER3O8f+BIJocL+Ms0h8fwLJ4lCQppuXPfyvz2N4E9nvvCCwOv3rP9xOAlbxh4+h1vGHj1nW/Y/c8P/Wv3uRcO/3BPd+0FAMXnt58dvC4/b37BmJBFd90AjYAzeI7akVFVT5ptZ8Hd8ECtcwqDkC1/2c+TS+nX09flpooJ00yn5uIGnjJQyswG/dmgUNaqlq9EJrcBIfL2vGnbEPwZppbnhLEyyaXs9yzfqoPUaRgLWgfEUsPdqDkygoXDfffYcSYQ8wJyEaEAQ2613TkLYqvn0R3fv7cnmb9vg/giEY0QbRt3qqfsil2SgbUgpKE/5bkve5tkiYBkdXyHUt4USxTCzIwstp+hK5mFP59Du1vr37/phQGl+8z2zwZ1MpWW9R1VLSi3DF1+aX7eUPM5WXiUK2yMQd4FiAR2k5TtRZuwFvOA5HyjQwBBaAfeztMQ6EAfhbx9jZsTujNGJQkrTJfe/pPuR8jOG8k+qgrDy3p4mS9xh3ll7rKI3ofoL+l9/YG1AmbKMe8dldphGUw9w4EWqcfH7rmxMsNtqjED8UxQkCTs9OzbquzP6kUhpyGILF6lHaOClKXEcd0zvPSizL6RE5OrqWaijimln31Ya5gRJYaDbHhbWG4t/8OvakHJ21p2y6UFLia3EBYFpkEgkfp838kXdp3dPjdoWKSIryUz+DBOWLfTOXvIuJR92J/wpqqTZcU3CPWAK411JaBtuslrXtNb9Rb8Bxpn/FW8Cp9UWgzqjGPg6NCM/qv86Ohs2p12EqDp5m1w/8Zk/spMRiBD9nt6xbb5mHiMn6LfcDfdTed/4uP4LPEMV9YvExTNU8xUHe3+y+7fvdSNPb+n/eJVL1/zRPfe8wN/vX3h9i8GZf95r1lWNk/juQy4EjoxpuYzs4TNjSYmJkZM2Xaeris1I1SqRmCAvZRRNLolm2vkOgF2cq5sjScZYPtsBufZzhvp1/hNLMtyIL1kf02GF9DA87zAxtgMu4E2nWGe5Rm5JeK7ICBkFZFwS2DXYrQBOPDXIYuYDNLvchbViezyYdJePe+U2QP2Ci6TsuzItR4EZgqMvyUuvAVCbIMcR+TJqNBfyruysYK64PPCYgjGy7Hbdg0YYSXy3dWFUmXzLNo4e/qcrAv5KZFxJ8S7ZK87VUnRvsn4NNasjH0bPYjoCDWcnJNlGHyHEVhCijZH9MhYajxZFEICBsQODNAy3jn3OF10TgbPsS3yMHnIOm2W7KC4SgWi7sSa6qCiM8ZNYEpn+5XEns7Ll//o8093D54fqHT/8dd9g6qWH7NmjFH8GXEVO8pvpTOI7TX8fpCfZS1MLA49ET8xezJ1bOZs4rQRyiUS0lsZsEEcI4vnKzANhQsG1ousYORySpGP0kk08CTZeQubZkfRwDrf5+2lB+it3pddBQ1UIFtMmG/dU71exaDKF0UoZJmXnbFOwOsJeEqA7mX7JNmSBzpnb+J7EN6sT/ev3n78luN3VFP1uUqukjtzrYC8C21w1lYVAoTTBY9SRLHnuUFQFlW+7txHuv3mE3iTPes8wOrhcSeUnWWyidzT/GyAklGB5EGS3tl+sbv24q7udds/GJxRhD8zPzU3OTx7m5bVc6AjbG2aaEQxUrhgZ+wrWR6BscmxghijxE248/UDUaI+ujSzno3MkgHCDE6+zFGZ191QnKjcfezYGc/3fNnd0DreONY8Hi75W06D300XEFlnFWWtsJU4nqmB+Oy33OnFnvcEY6h541XV1cWYq4m0P+/Pqah22aCrtXJl33d90jDr5lK2kark2hNyvwB4PdXLwvDGER0yRvLjynRqVMmkp2+8KW9JN6LZaSNDc77iguwvo2I7dxeuEhAmOLAW7Pt5y3uifvfJR0uN9a1eXQVyDe0Ou9ZLe06/eNWL3aM/BNfz4e23DcpGBLC/DrsfTEOvdRnkUUP2I2CYVKuUK5lg5GR9t7dCS7jpH1zL+jbThS4yvkXSbtIdFTmMxs1pTbWSxYO5XE5KHtPOqVQzs/q8D+mPQpuk+kmRjpJJ/Amb0/cDi9D387HwgJNhYP8cywPUgQPTpteWBcEKD/G6Ddn5NJzHSXzOfoI1ZWdVCeJq03pGdLwz5U55uRH5x44TjgiT7Seu79dkd1a4wC7euaL7zsEt467petxXfLljxgQPSFxTmcwlconb4qNW3L6W5QQqcOmp1/lD/JtkQTISkXVYuZOEn6ie9O5R0e7u2xZe6D7y3K7uHds/H5RLVJikjBuG5iYO700OZ65Xx+0b3cMiTufDpKv6c5AhSzdF6ZX48tzDU01ZdZQqn6yJlttwNltVL3Q6jXIZhWFk9h9Pt/P1bCNDeRWGYGnZEb4nN3QhFiVa/UqpGMpVkOFFCCWWlCzMvAjC0XFrInDrtdO4jogj28rcyFoBZdkAJ1ql7dyG3lKXZs4q9Ww72UqXUD4crcjqjAXaIeelXZXm6ZSmmegHHx+UFBMWI6XsBV4l0xypHKkOOyl6Kx2lppU35q2ckkRqZqbenwszJd3NRxNNGRIA/qRIKC1kiwWCmcZUYQYGEtjXQGor6/MlDXS43Gdmx7MpbSJnsbg76yh+ooNyNSNQG1MPWjXyTXIKUmrBW2s/WGmVaqub1UopotTDKLRqTiWshi4tK2i3tb3y3J72Tz/x9Bef/+zLA52ut/3Pg4RkSZpca92YH0vpVrxg6eCRbIw1TT3sJtGA7aRtW0yjgY67F++8Rf9znCTDBH5+hNzWD7/M9vsJz1ihIUB8T0qDFhESeyJ4SSRLEmv4UXPMeYotsS3ZxbTR34qXC8cmTo5uTgQKt2TBqpxrjjeP+Dk/z7GnR6RX73ZZyVssg5OoM+fwC7KRlcjju2P3qYFMMNtBRnjHPZj0amvwY7aWraCppf6Kd7rVjE60GrWVpU5Lt6vNUpXgUBZARFAD7OvwMmKuVpZdlr21W663TVl7DqXfNQPJy9nApgh8E1cFqPk7PNtGOx/euWCQ1lcqj0dl/rgIiKzeBBAyvt3UUAkMej9NJsfGJo6OfenQqK7hPNYxjGDOps3+AZd2rG/ZVYhjHz63BJIkRLsb+ktd94W+7r+8tOve7sAgwKju6p7uqsDJej3VTh0bf3h6laLFC+6mdy622+fOLpyIzvqbrEa2yKbe0JbV9dG18QaaqYzT/iOsgG8tJM20aQOdTqgYF4tkETK+Salfbd35wLkHXdTiS1ZLrekN3ZH9JjaMAZVtxiUL8iwsN3mkO8Botmx4d3T5LE9VMmE6HC1pMDpYyg6xD/wH0u05U7eL5qFsKpPJTUyaxdSR2dHwqyLJzF4VxuIm4kVfrWcjFcw6yNs1ZyOqOOcXTlLw+riZbie9ND2EyBWFzNHh5LxpKWYBRiYF/sOgRWcqSlcPnzl6ivBcGSUbFk1lcnmSKyeFxXtlXA8mDO0+sa2/MPuDPd33/QiC+gfb/z44ht+XG9V0nLHz9pSRMKbwDDZ0PI5I2jf6I3VNa4tl0fEXHPSeC+nOG72dXfa7SY5Zsu+gbLjMoas2yF/u9XY4yT12SAjmk6fpGfw42bCfZd13SWdrl2E2PcIC9kiYI895qM1bQAdo4A4HdFRAKzB8jhMEQLZAcZ1+0zU900WjpP8QVfE4OERn4YfXPt+Ny3T8/varg7KKCBaWajP+pCj6hR79mMwIDke3OMPOAfewsReZR1L7pofzSVWZn5+a2jc8eqdSyZy0a9pp40l6jJ52zjvH4RREm3d6jTAeuHHIT75Oe6uwwtX9RIgSUX/eMAx1XksQk+hEsWXV2QCGh6DtWKp2FRm13s9u9/a7h4LR1rCrAOYBlnamXXMpWdVOWagFkr0BYBo5AqxMpyS3uC53opLrBYHjbB2795nK3Yh73GccwHaLb/B18hCWRtejnn2X+kjhDJBWQDnCnlWFtC/PLWpyM5fGMIzN7Pbzib72X+0CB/TUIMZmShvPXq9PYQOkSBEX9bH0NXbCni9m5P40uS6NMLYz1iQuyF2gKH97P6VGzWhkztqs8LjVURfMjl2d/y5wvafWZflbqxRrKLXanwWvkVLSRWwBqgMccMst8jlP5a/FmRWOgvPnpDwMqs2sfQ2y0wgmQF0Dk3MjPOrm3ZxTgIHNIT/RHPVNsA4mHEMVuGk0jSUwlXKxVZbEWgt+BXmlynEMMpnIfcFB4yW+4D24/HL0sLvMTH9VlP01bxF5i05bvkWrWHJflMwoV2dZOg+KXQE0737m3Kvd//nM3hc+++LAI9uz278aBDrJgaFTvJxrcSLyPO3dBiP/JTTg8q+zuAmiv0NgHKXw1I/Iba62ZqvZW2+75tBsPKv62mlzwVplHDFuBnI3A+FyJ4NsLDWiWZxWVMMy5w4cuXp+pKghA4wLFoavL1pLuIorvT4YiW0eXsGr2v/mD2qvIBAMNQojPfaIyYrCwOmiahRNgi2TT7gFPx1cKa5EbArcSZHNelfKZTN3HzxWvYRsbOCy9cuqTnpAirYLJxMVlrUWa/Nm2G61mk6weAYctNdrFDIcHTm6pwlL2L334cV8ybozf6K21Ar9wJMedH3D9REXS5u9tQ+QPH7QOe23opXAF6C64dy5z+WS6j04wGX8V6RsrVmnrQ5wmV3Nrxqe6UxHYMsGXAAfuS3YJrm83LndfrEzyC8A7X08ajmBX3G8zrHHfyXnzFOC/OrepfFjQ63p1tEojuRWgBJ2QXSAXHACp9cgyIXnhNLLYBf7BMwvTLpeLnRy7dmtsTOp5bGH43dih4P9aW16pbBx9rnN+9DKnbJSyioYtLHNbAHEW5p2M2paNVSgdWv2YHIS6UpmOj+P4gfTm/2z90ZzM/dPP1joyJ3n86uGAVOIAUOJbuumogHJ6gig3XL0lRscqzbRGq7Ey0m/4CnSEnuKp6DS/JHr+pNHEyNmMR/PJwpxJRkf9RLMOhGXZBGBOUO7n91+zwu7tq/b/vagRXr7HljeNCF4wOkWaNFQ912fnI6PaQWtoBYhbS17+CuyuPmp7oDmYX7oIa1s+kbZ8ottw1NdpDlZs1+1ValLdCsvCqJw/BofNO9LOxd0DoXZ2lwIgolRDGdvEZVo1jDJmvvNO6gb3Mi0QPOpT0/IvWhChLSD6Kb7fcD2OlkSbdGhPKxtPFSrrp1ZvXPzTGe1ueSV/XXEI8qMitbURdpCux8/8cPtN8+ffr6v+w/bL4FqMuG6cjSFDxqXKl/SprAOtiKjzRZydv1oaY6ROkV1Grgt3oY467AmK4tlZ811yDF3y33Ec8EwYDufR+nUl69Opw8duu5q2Z+cS2tqLjc1nE/Hx5OjxanCOLPbsygqPOVvsFPslDjBjrGKOGY/a1TpZlASQcBDHmnHTOBs8IFfYh/kX6WHrUPWftmD6zzwl+0F16vWo/Lyxr3nHnoYnX+52S7VvdCVreyyO1B4vqjZEXGwJ4WA5RsAxqyntHjGBa7nY0GB2WwfxAbavfOWD53f/tb5PYuvXvriwKsL278YZLP94HUT+LPkBpoVU+4QiI1b6SE6Rw7RNCtyHSyI0ECOjJFbrDK5HQ28CnpzDqvagaCwVFgsPFhZAwF7rywzMMkfQJjccZDvw2evk4ZsDNPhcREEgQaKQnX2M0Aukun9FQGF5i8aeHp2/QJal9unuCC/lE6M3kcflYtJ5+kilkrmx/xxxM9UcX8bdwc8JpvvZfmBipAtsw4RtqOFNruejlMAdYJkjwychzfXW7edZXOQ7RrRLZTWcFH2Z22/kNjTfdtzt/80+fyA272/u3sQxI5vhcWOp6rtYsdcURYBa23f8nsl9MAK9FrhOOT1wCOUZ1ckrI9+V/7FA8u3AeA9q1jRSnpJ4oXtmj4qVo1Ir6l13ppnBh1XZNeVLtfT01vXRKoDiChMRJsj5GKKGxOyGtQ8KruDq6NUkjezyjNgLohQHa066uSlqi3Hwb8Z5TlmAHoxqzpNLUTqI5ScuIrKWiYYbUdz88xgZk0JAIgYqfqAT0KeFCClQGGAG7mt3o5nuNku+M4wfj9MA0sfpxfvftf7X7n0O9tPnt/TnX3pU68MrD+3/R+DKWnHMUQ6kTuKwfnppk4Vd95N+Na9uEUiUCdIbtb2ARAXyCJFZwjX+nle7PwWvYp9wIzTd9Kb6V5iIKxkaL9KCzBBs/b1JM50WrRBlQ9MvbbCYVNLsVJWGk7M4GAIXmvVk3c4YRtFpkNatNwr1YJ5dvjd/D66QCsEcN4OmVzHBniVy+Yur7OS062AhRxYd+4yu3P4B+Q4DvTAdrB4TddavV7rafpnQHdZgWaceXOCod1T7b/7yD93P//iwB3dge3fGWRh85hcj/QqftWvBTXuIadUzfQHWiUHDk8L9Nc6XLkNst9cnK1lfUDYIBvokQ0GKBQVdyVyHKsOTOxCggizrNb1sunuvf/L30mDMUZidhmunbGLIFhFzpoxXKOQzSbU5OSX4jdirKqycQnsnKnqFAIG1CVk8UAHpkTuUikyWs80UxzXvEAc25SbTEW1TgXa/eRXXrny2T0Dl25ftjlokxF8QO5neS8eNnYucD7NQRCN29MUe1qUC/Ej5Pu4+y7uCgbJtEnRwwwsjtyt5sjfQZZ5rgeSp6K1+/WGLQzRazDXQbdPdP/m6T2dH179VPf6nw083f3Y9jsGAVQLFlb0sfFiLjmdT2cPFKeUeX6EqqwopYsz7RZg+v5TGcidtsUgVU+G5r2zDfKtmsuWapEfBaFXKUO8+rl+RxO6fKVjukYjsZwr8xJ3vbBVWgA68xU/27DKCPKwYdfMTVYPFktb3n29BU6HuLiBxQzoKIuaNrIwxv+/lwYeeDjCwOw2+EYOB1dlhZIjImbCIpN/tcMkSCdZzaDoyY8Pctl1CHdPc81QhakFAIIjWRC5OjFwzs7RLKKF4qSSTE9+8pOHv21E9gJdoVV/02+GnaXTrY7rnVgUFAXUTbjAR3++/dHEnruev/qpgc43AIZtEw42Bcg6jxV7ThTthHToBp0hc+SreM4esQ5af2jPG3eIRC0faY5e8yHt5BY4GETwNzBTvd0Jbm8jw5JawlV7i1ZF2z3VrlZgKNfuka363BOuX8XUbTrgxkTV6ajnlVM4KLYBtIwgW5N5aPrWa32FYBTjIgU0OakbJiambWJUNDNFEI+6yWr9YJsWWEOcw93XWaGsGKYpSlMTGyrqXr5TGizr0YTY715tTs8fVXOGWdBH0/Ps0ApKVWjQT12n6TSj+yzRPlNZabSWy8tll5V1tPuL23/wVF/369sjg5akCsCgw1OF/MzUxL78mK2ZmtxRVpjAgB7qkDWL9L3Rre1Rv7A67fa6B6Tk7GhVvGWeFQ1PyL+NQFGJPFmXILHY6yWXa0H1gFWVjlGyHVNojkn2KWhKv12bNm/XEm3jpLHlfiuqAyX5svfVr7rl5Yfvf6RDkUdBJsMbooJf9IuBKmVzvVdZ8inwslxpCpFbAy6Wm+blh4vCgloygEJ0z3Dzr3UTATEj3dvPCwbaPbf5zJ7uPecPPwom8qe/ftMglc2/RDdyO33mR0iKZCRez4aYqc5hMmvOWzpPwRTYcpOjTafSujk+O7kvf8hIGwVrCvzTiMg7iepkpKGNqZOFc7RNH3AduSuNuKzCloIIZCsFB+faJ5nPIdIC4bfZKluk/0Jq9lb4PDvD7hRn2D3sHtHhJyUjdfrlQmqBFbjuwPxahsWphq7aeWwwMsOEGxcZNmdfJ4N2jsxLrNIKRn/OyFqH9DnLIDPsdpb2zVPWhr9ZPwXif70cVkvLUcdBi84K9yEjUsce6qLv3PLkntVvA5i8rnvboOyo4biqPsbPOneKDbZaAugAO9xbpV9YDsqlplthi+KMujy1mqsebWedtDsdxA1kkWkT4oBNKwVjtjA0bIKfBP1qZTO56eJk+hbtK8FRxDWuSgcYzZey1cRKcj1/MvMP7t0t0C+9T4gC7qLe3+dhLmehUdGrtlBZBmJs1pw2rjJzIisUL1v7f4S9Z5Rd13UmKC66pLPGFuxGqXqmZ7pJtdwaW3K7bUvuWSPJpqhAkxRFiaKYwASCABErp5ffu/nek26+L6fKhUIhEAAJkAIYQIqkJMqSSDFJVLAcJGs5Ta9pv+Iqz5rZ+xbl/jn1FkGQVa/eveees/f37fBtUq5Tz647kRNzsA3eKZkAk3GtmJPBJwfXjVTtXgH7zESZlZhCHVPXVcYP0Sm2/RtFOLSytVpvk/5qE07AZmvBXdDIrvpW8uZVg19/4+qBsfUXI9gSB4iVlW3FnCqram7MMrR5DNgBncbi6gk2Sfh0gQ3lWYnOWQXHdowK1v7LChbkgJ3w7KHYWLCwPqSeljcKAF/ykGzI/fIg7IoxMRE+xI4QPueP13UwAbwvF11Jg3rc0t6mifG4NbjaWSYsromhb/sej2MShawzxHo2AHQLeMMXbZJNqyM2hAiWwhVGq81GO3ZP0iXm8q7eMgP40Uj3WMhIjbphgu0ziRe7YK9tIKA7xT+2b/uZpfu7+yNCb/XNa3c9t629svvr7kuvDb7w9AM/HP7FYG3r4yNZu2KVdeAkDh6CqRlKpzPlmcqoYwCWB8RiTtI5Yh9wx+KpoFAf941q/uyREAWV0EDQJpDyxOyxZUke807WgWJGYMjL2uembxk9Oj93rDTJ9/G7O+PAQTOLVpVYNaCmsGPiCAtxGf4OR1EcLDDUbRWluWSZyIxfaeSS8onJht5Vzmfx8McAxVb1Fj/ptmGtsfocbvMajy8AOKv66x28Z0BnbrXW6kT1Rr//hKwL3626CQk63gmv49bY15zH6Angtk1vlV2wIsfPY3HT8D/pwmKwin0ZoqAU+ChEHlU9NIOZhiM0oaGGAfYZgLFRwn1y2iRXPjeS0Jrt09iuq9gTBt+1YVeXaYVp4GbBJgA2VAk1AKrN84Oiqs+oY4Y+lqnoNis4R82sl+vM95Xj/Azhb5288mK76zO+YJFdf7D148zuxR9e/+LgY98bPnN+6+2Riulk5I3iEK8giGT4SVln+8P29UAqnAf4lDfjZgRtKjXNpYHAuqBQtjx/GVG9103Okfql+mZvI2k20VC0vKHIDG2hRLdZHxJ3kofex0qu09fbYMPhuPIAGyQxdxCLhJ8D8tDlSwAC3fPmE+qG0WNUq8PW8hyAyOXEBIw642KVyiiYUWLac6ZlwUECkwq2NoMiQo6NF01T2QveY6tgfOi3rSfsK4T1jWAIxQbKnOhALbBqentm6z++cNVzr1/9D1vFkQo9UtINh5qWTYs6K1XngoqLml20FWGKz8OCm8gLnMhLgMrVDHCevA6uhkosmKeBX/UiCrCawHEA/1RMfD4VK57G5xxybPuzI3rFuJ/dyb4K+2SvzEjVK0UzkbkA2wB78zzPx0oFQAgxYFarOmTFAIb69KRxOjjjLdGLZhX7NTBwAYZLWq4tCpxk37vrD7a/+MLW6cH7dw/2vXLzz774/O2v3vLifd8EcxxvnRjJW/PFFLaloiTWLLXU0fYjm7DYXlo5jwEaAoa5B5y04TG5TIZfEg3YrC3HtXwAV05Y9HSH3PT/7AW+5buBu1JP8IgIz/cBcP60WWt1kUHWawjekjpqJlwBX53g08VC4aDO+25HVnlLxmT4WenZAisKWY3XWJ/H4hRvsQZgoFCmvcsAun0y/DyvOTZKM/EAg/cyxAYC3qTwy18Ck73BIi6AGUjL5zwDfOT5ece0gRvMyXmsI3YPpu3nwN/SRlFk1I8IIGnPwqH5HP0Ke5gKOwvXyRwbCyKprVmqWbYMQ4c7MtOYiWs9NFemZipHR5jNYZtxgPyAPE2Rc3M1wCpAIgxZ8SivmCUjlWApYR8giQzPTrPlaZPHYgFN5HIlrUz3sYjhggXETrQ9cS2XLY4yHkb/9YdfGL5+8J7BjSMe7wEtbWqnj7Uyy2NP3rV5NNYiFdmVmzbnYV6TcKfJkB8u+L+qOHJ5WEtLUzCEGDLf8YjjUkw/yom1+y5pcaVhhsfOzi2XUZnBx97v6S5FOYlc5Aeev7HUb3bq0q2FoXei1652a5HXbgS+SOyImNXyggNstSwwl2uD9zKtz9+HbS73Hc2XNKOiGgYpV0Q85K76f8vPsCtc4uNhCO5CS+bArmHPruKYwCbh6pnOzNIn+Yf0P6CTzpedKWA6dFKYbJLOCjswQr1G26IrIh42pCsv8A3SDr8lrtm1fWLr/83sXn7lxte+8Pqwf2Vre8R2qGHlzDl4ROP8sL7976x91l521BsFWCOLYp4rgIS4InJS9ffz6dohjOxjbW29EFmBvUxDN0ICFhBRhf1XZYkdm2JHwMCpWeedNqznP2JW9xmgy+ck0FbZ4V35rKfKF5HVP+Mp/CJv4dV6fVMRXR7C+sPtT/mltNSPAWHeNfg3J175/BuDv3oNaOofbu0ZOaDPTWeOEC2vsSHAxtzSiaWxvUPsS86Cfi9V6e38GB/jdnK/sATuYpQ3MsHSi44gy+AQw6YbpsUzw31wAINPsoglInTrMpEJLnr9ArDfbhAnVRInoQk4Is7Kgptz/4w/wO+QuUgDNuz0USsTkbUXNUVAkueXv71yptnbPFUL61HbD+FkRhPene5X/TXtD5xJ/UtsgrBZzupFEuo9MdSDKwngC3bZYvQTnvMuBa+LDXvVWWKn9RZzsS+D8DC7qcVGmK0ZAEVHecW5r7zv6ME7TQ3OlGQddV1vE7NpebDvk8m2IknZZeDcyK5POatXLbw5+L0Xrx58buv6EQreHoibzQBR5bRcrlDQdMPkGMN1sRMbbLtD5iwR8o+z7TsAQxVcMHhxLipEZpWvorJD3UXRNGzYQNvkV63XjT5z2QJbYpdEVFuL+364uNhshkHVJ1WwyC6N7N6D4XgwW7tLlsMH+aeMQ3bWU2tWQFulUBAs3tnBA9KLql5HAkHjr9jLDMW3Eta2Ttl1VNU8iUWB+acwVOZ4zDO6pYVyHcCVj8QCfKkkZnDYMwBUD27Y+v0RystUo3lLMebmVW1+6t1GQ0stVSb0yeJ9sN/3EIA7tleKj3VHm/AbUAC1U3rM2Ag67ka9HvnYvwUgkq/1k6RabXbDxAsbbS/t7cIWAq8aLidnrCvqKrBxmsoKGpg9k2VcE29mGTZdoAaaX0iO+XM2MZlq2Zz8xUdHJK9PuVg0XpFqcEw5oOaLk3NT47mxvG5nYN/q2DqrLdK+tx5/s33x5OlaPfCAjjt1XHeJ1tm1EzBERGANJaxfo4iubaUJF7xL2/q113YvvP6F14BbTWx9GZ67xUyhiEOpRiDqAJVtnxctIE4Amim1DVUhlZJWRltOTXAFGrxjls1xoP+eLuZpESh/nhUIL9IDdAwzCzfT7WutR+xxtwCM16QelrvDPcu0uoRHvNrjTcI74LVC8HuDj2NBVh/sbMyrhHebxtAi8NAl67j+qHys2gt01o5jLwoaAAY1o9b1Ai9Ky6CiZeDMJ/mmdtapU8upm4uFTaVtxeMbmEQ3XcsjxWrBPxqRrCe4TUl4/UifNoxurl6RdpyNCp7iFrr/tXTfbeVZK8MngynfkrMNUgl110YDQ18fYuf5ORYSVg/joaTeSZbCflgTa2B3Fgbf/+7Vgw8M3hlx+MGHjYpRKWSMItELQwCdDpkAgu1RUeZgE9NCZ1NYfs6bqxV2onlgqXu5utbQenpi942zbAmoeSwj2fZ6YFWsh+m0f5Sgh0VQJudcLHvXpO4VqkfibFiINF+vZzfzTZ/U3MSN4npTBk5sth2rHJcS09ENIwB73xj9Fn2r8XPi9gFWREEsQrtK/eBU8qyMZU0Esl49I07yPhezkmTAr6PDZsyKrIi6lagS2X45LAeuLHsqbKMKJzbcEipEjFlYjW2mUaSZsmE7zDLTfjMTfN/gvZMjNTsxsROzpYLTpqsaNhSX99AcM5xi+UaqWkamTKbyBWPCvs8cbeXX509VX+ic7JxePXVqqdfoeV2D7CpjwvQTW58YOaAdK+VLiErfVbEF649NlrpeOGbO2wX47V8l/Dq3FtzpHvFMb9zNS2wesjB5scRhiaIQwJHdJTRky2yZvmot879CmoB6jtiGWOsttY6Hq+E39RNlUjd9p6q1S00nAQwdYLMmkB0RuV3OSu2Z1cnoWI0UgntqKM5yl4MF+jd2X7vq+EtXD/5k686ROUdzxor3TN1/T+MzfknQeqmdo/4itiGxjnzKq7vn+6SX1FzU6Ii/wlT72Ggmm4Wzbk3AEeNci8s1tQG+k4dazEK758gZJwtrrSmWwQwPyEK1UC+2stRaKZOeyuFAJbwGR6zuHgcL24mafqcd+EkShl+72Hwi+zpYSobQ0XWqyJQpeBAryXYUvxBKd1xgiK9kE8U2aEYlU6UJOlSkpVTHSCR+4vpRNYo63eOdTQUbSKrATYSIW8RPdpIvTkB9O2aoRw3HyhR515MoOvYng5+/fvPru4eVwe9s/fUIh0eGpgRNjaXaBaBZZUByZWPUmnPy9iQweDx495oWtZmmU/gXYMIKoEEaWbEJxEMsiNg3ZwE40gIYnjydYRVnzL8nGgtnZKE5157x7X5pPXfWPlsjEXhyYCv0OKxEFe5B9EQb7sgz4YQXJCkJTRsqlcZ0zM7aUo+ml9TT/FXewYJjEYXfdbFTWLgev8LJN98b8jjCHhyOum4c6IXHAdIYUvMOuIc4OchlNISiPsKVYbjprdf/UljHAkWqGJikukKv3TUav3bV4PnXrx5c2fqDkZKOnYrU5I6nVafhhM+IsqiA2bb5p8ESM1qmJWLuUwpHsvOVg8Y4PyYo1xIVDpbdd7r0ZTT4wRnZA4AVnw66Yc+yvLYH4GAqyYdwStMqI4whYPsMsa3iYUzyw5m1HZ3mbFOv8IP2vPaAf3vzvtaeEzNPa2TdWvIX/EejJzq1KsJfFEBqtWvNRqd63D8tsY/RIzJkP6GbdM1uVlYAT9ctkfWoXVDJrge2/jRz1eB9//3qn2z9xgh3TSw48eHE+jzQZIEVmeUYGpIAOeftr05HR0g45heCsWC8c0f1UJCL825R6p1sYkV2LQ1t9QApkMDvrqEia225efziXwt5anBV47HGOTfwayJCNc6xTprow+ozzi3bwi/dgbUtH648krm1cD+GSVGlg9iaOq1mSPaQ1R5STprNzA+1R0sXzJYT0QizZDrANrKrtfXBzO7ei1/+3hdeu/Kz//79m14dZoPB1n0jhmEfDsCqCYs9RIbb7DbbY3ezg7SgT5TuA9yUVRTB1LbetGvGqrEGcPcE4QlwqZD7BhZRhraryHlPtcsZS7d0Dk535harQsyyXkHxBGudNXlMW7RKhtdplW3SdedF+yxgmOGXkILAq2l485wM1/OY6C7Bj1kq//QQ34NVB3BNAM5KXBWzye2hgWgAHYhreEZzql9elcflyqO1ZTi1Xogq0PE46gcIpLFObwKL16q6xzEow+yEtq5t805tKAmiNPHn+UHQ7y8+HS6HS/XLHAgtY1E4+ACLaN83nEXaNRtaYAIESytrODalBqqhaWTXS1tXb2lYI25T29IVi6oYP7dgW+qKoc2N77sbQ+2f+c7EOik1XLOcKDHDAnxBWQm+0pYfEzip7oFfR+/JAiMw2tnv3Jjqw9q+SWLV0IdS5QowLscO2SZ1dFXTMvPH9hZLul6cs1QtJ83j86RfjN3jZ9r9k+eqjaT+zJWkhYIfrvQ9zn3LdXzbpaSlXtjbnXLtC9d5qZgDhgYSjjHsehWF0P0AjIMb1epqQl2tZtQnL02dHt2o1CoJkFcv03QQNNpfe4l0FrtLWEK0fprVWM0Ki4DO0gZnfxr5/67K9nXfkC9tfThz1cvfGNz+jasHz25/ZMTnJzco8HzX94Jqs7nJw1QmzJeh20R1NX/N2yTBZXpZv2yv0p55HLmpbMtFLnUst0xVlrE0hugV3boWbCCm9FWW5aN8LzzcCjUoZpIsNacUy7n5TKZAZnMHS2XXlGpsx1bNXmA9+qi44p0VdfE8sG/flGVOsHTCNA1TSOugeZBZ9DZ2kBfgSdlCg4c02jrQyJCo7NGumliP6kmEmUhfNOAot6JHu49urJwkYcKODaHxBrrxVeXA3IQNmwG9+kxZty240ilxWFTc+ZDMJdlwvpEFRomxOdNBCRtNBbSn+jp2XMYFiUQbltruFFbKj5UeL7n8FF/msWi4CUCcNA+fNlDyRoK1HIfr377t8p5vDfJPPvD87d9EvzQ3ODVCdZVew3g+j+5iatTBHnJwtmT0yJBg9+xBjZBjY2B9eW6M2Y4qiugwPPBHNq9rISWJU8UKBXEmwL3S8/GcYuMfGf5gzTvOGrLrfk34jmReWhMAP05XrKqIg8iHi6sT9KdmAM5Gh32vAGQ0XApvVhyZxU7V4Q+C2RAGrPL91BTEfu+wDwTcrPAyzzsVRhSaJEPNhqk1281WFDWbUXTpeeCHYTgURusbYSjlxglkAc02FiU0WmkdILxc32JpotTEahds9EewGsO2GSaYiW1s/7HNrx3+Nco+C1bcZvvActl0VlIHfwABIGc7IbA0NqhaMcrGDRs8d5z23Y77LOuJmkCBwIA/IxNGwOFi6cyv3gQHuVhI26j+z9/+8Q2vDDpvDfj3d58d3DmcvTh4Y8TmYCSAYBgloXAVsJwmSpIumB3Lo5FsuB4NKsRXncIQ1ayirRhZU5neq2SpbT5Cy8m9AeAGkdbd93NNjYR2qxj+qgJ++GJgduwe6zJPVH0gsBKJSHZHny7ikQfeJWKx0SNGpxIMVYKKKAP4tBg2el5EsV8zrXbWw0zH6jUXsXILf3frJJzOoL7uJkQGbgRr7InAX/K69qredSInNaXYg15stCK3TgCyYS5KsvN2i0Y0wCegtWhYOVeg2kVid/x4yI/DsFsL/arsyJ6sub7v+f4Cb/HIiHVXdcddgxE4FnaFK3xGLSlAZ1PhpPmMbRhlo8TpztMCJ3gNf1f0Rlii7O91lfZoWI6KruGXqwVZRqlkRSemZTgONuyUdJv//3S5bf/O9nt+tPXfXt/912/f9bc3vz380++/89tAilJVZJNhUiATZ+t6bMJOlz03MWv6UkHbVzhGzMrsI6aulKwCn+JHvEo3Xy8LjsSTIZVgcNZswC0Akio0L0vBDCojmCmjsj21Ng1O0de8nDsjS+b9Zl6fM9SKXbENXvRKWLcLq6CMsTKhM231SbrOTLsbhDJxA9kJFns8AUcHh6DacK9B7QDp1RbjS/Q8WzPPWhE2G2BUGJ9WbCd6x1iXsQjqQUPWpe9X/QgHUgRERnFPw/IebEAH92G4GvgSHUhexVMwjjsfVmKsGwjq1U4ATDYVxUSTNPwSHMW1eCVa8tacdbpktMuotBRh9M9x8QZNdzIkRc/imsBco+oQHb4FEHnX4EOD6uDzV21tbl0/wqMJTzdN2/YtqwzuVOjCGJvMajMV1Zutl6KvPJqGZQxX92arGW+Kz8MWyBqKrdoUluTQnGlX9AP7uUNQERD+FzwSXsF6ikahXnJpwJvci6uBJ1uNZoP0+3FUC1Yaa25Xi+0zs4vFqoHQHPY+kIqavmH3KHnC+v6VxiJ2AGHjrJcuIywfStel4eUdRTOExqi1/MzKjz716vD1a+/8+siwIj7KDtNZhuyDOib/kKtJS+iswgqMAZN0sGmU0IbpXSO5Tz2KyTlTqLKipWNQUsBDFVqxp53t/0UexdKNW3mRPmx/WbBHjY7Deeyhxg3G0xW3gQMo3A3eYJtsgT3Pv8b/gp6yIysp1FS3AawPqz2AMTl/w87yqv+U/xx36bP0AqulnTAIcCO1YWBiSeUqy1FwU4YN5w+PnMpMXiS7XnzlrT0/GNzw1vXP3PP27sGeH97y6vAHlrc+MqJxf8wFkp5YHXbWScQFsPS/8YTke4b4HaKcALbbnZaG74gaUfQfNTAQQYB4MvSAggESSH0boDlMxAMHI8MfsGq0K88QuVljQyFr0gYlwx86bb8sOkHdC3wZCc9ZsjvcRcUmM2BMZ7P2Hn7YI3f7PmMx91iC44REj7eJ2CgtDBk1MwEIIYsc40SapZlwofMVSr1JNyeuxyXHvou74cl/US9RxTEtuA6H7hSVcmaiQ7l+MLedGfkSkL4HdVj5CStrFa15w2aWYhRdGWTBp9HAxtkmGNyuy42QPFU9G5wFs3x9X2AuZI2/TDdYn3UY8nE4ymBAxUnHt4B47pdkn9x+nyiAN/nJ1v5fpqXW/XfeGrFYwQKDyObMVD0fiKVBx2cNrZCp7Kdj8Iw0zEM40TFP9ctLk1VrQe3ZJ6K6V/MQPYB55oFYX/YlqYcnLmMRPHaIS9/t4PgYe4VGTjV7GhslS2EhJnBmeYmSpd8bCUtMUeaVed2YUEjeGNJjwBRLfMVv1RtxIkREMaOA4cIGHA1wzPCsyfbv/MuJkd57T/PYvyiXxUlvwSNnwyFpgt1TvMPhfbLi5vmXnSJVOPUVT/VsHwC4r0eM+LxBsQWkW8XaDr+BFdpsA3NK7IqzbryqPFv8HqlcmXlp4vFy/8hZ3FiA/r1KLRMWA8PF2SI5eBoVnWhmuYJn1gELXioXpvKH84dnbmMKRx0c21LnPuFkiD1rTdrz1qTQzFEnTzM8C1bc9g0X84qs7jyGo0AAv9axNtGNsHDEX/YWvcXgrLcErx6YgMG/HXRH2srCWPtIbSYZA19Btz9eLpiANqTf7FxpnmkuVNvtto+7HDaGTXYt53++9YFfXrX686sHf/nOz0YUx6F3P/jx6wzjwMOZeYBvCrxoKxcriSb4guPJekJCAFoo8rKxDn8JLj+BSaRqXIOvdgNcaztIRAdYtONlu/mWIwo2+c/bT47MOTnnNvUBoxXfM3+sDC5pjEy8j3+Z3uh8wtl+j7jJL7o6RjJsgx4Bi29EamTVjGfYsyHxRUe25FPBL9sXwE17IvbrUdxJVfUjWI4m0HifGN5X2ZhdoiitOencqk47BpsHwi4CgGBoXQA0E4GVR8JGBPUS4d/pyKF177xbZw1a873ES8LQi5Kl6dW8xKYfJhz/S9YRi4jLQ+IUa9FUIQTeCyYsEj9qNIPBe8STHBalFcGRZn3COtSzwnJHslv4IT6Ge3fXU3f/cuvZt68a/Po73xzRwKTqRS1HaZz11Vg5Pn5xr6TNSru0OZuq/qMIR2CdKybwGRGG2QJwsGD2wR00nUXwnejJBZp7ATRUZv39feR3dz1TDi1XCyysZXOxVcmQtiSqb3HFIT/ZXhtxKFL4O/NjB6fuMopaybEBORZs07GVPZhFQmBInKI96ozSOe8rfrZ+x8nbzk1HVpTK1KJGemA2ncgma5VL9uP+m/GFU6uvtZ9gK/7z/lP8KWvTOuvzwuXC0/Nr9y6RqXrZPeTqKGIkDf8hrlnkr7evGvHtiEasSwMjHm/c599owos7ZkYfF+W5nKbbLOcAAM/A4ciBH8qEo1XLVWvHzpS/G307/KbfXXxi9dmlpSWHNNg5cJRk10L2td2PvXrb4DcHf/gPw/7g6XfoyHSlVFAmrbJUo0wydaqykbQCi9fCWtjoujW/H9QqPaI3HPFIlRS8oe2Z7Mjwmcl5pcQLHJhIvbB6JOSPbjTrzRriGIlPPGZuqU1yC5aLU3QcmimSQWf7KyOpDaRlC6i4jvMMvIyX5RW2/R66/e/YATjfurlXOETa6ripZ6dmKgd4htuiHMzW5jfUs5Un7Sts8D8DPGKD32SrNKEAU2a8rItlhaatYaN2qksC1l9hKjGu028K/7N3R/Wz8PAdT3W1cDbOxGXP9FIctzYGDwhzQYHTUzR+2jitr4hTUSQTCYZWdKsBnJeN9XqX1FqOkSwlS8Gy/1hw2X1JDH6bX3C+60RGR2+YrgaU0HKIZcMRAjPxjQH97s0/2D24/a8+++bwBwfKljNCWUH5V6rilFDUSBEsMJqAtE+DswfgHhEvDEO8rgjLXFvcdRIuM3XscCgHOrj5gsWvHfz77U+PDF/P+a3sM/C6AYj1LM2h3OuwAi6PXUNT9Et0Q5SGxLivdmgLSGvfBU+27q6IX4jv8cGHgRl5PElFOtPmKoBG2E9FRUGSvLxLUkq2P7z9KTiBmoP1hmUU46lYjl/yFFGOHRRT3BFmYzsl7gHzHZw9V0uwoi/N/fQxVYIyzG4S86jSrywyrgVqoIocrNE26Q3e84W/2X+8883h3xp86Z3/bQTMTCnNsNvCcisyhn/0JO9YLB1u5U56RsMBk+SBn2kaDS9uYLFOWpjsA2mquT0nBry8wsCjsvIGTzvLcWBLfgXosi9CLUVwOPkgj7MIK6EjMO/ombpuGkzxK2jF8AmFmovlE0kFSPv2H66PDPuG7ZT4HK8IMI1k+DbfOXkUs7etWUCRZVdxARhK7OhTwUEXRd6brgLo+EMpGL2W2wl+l7bSIg/PAdA5fBsOKboGPFOQSrkK0RWAT8FU1xzXadAmgJoq880q0mOBWA9DQKgGChwOUJavttQ2xmTg/vBzAPYFVqTXy9V0Clw6VtERJXHUxbgFAPY/eeGnVw2e2foFtn45FvyjaDgZTjeQ8KUa7Q78l1lWx6aOjhL8Kz7Z+dzM3MEjhm6ULc3WALfr7b2R4to4241Ia2l2Mbc+uzqzduxbn1ufX6rCLbmppKdww2o9vgYMfSD9oEFDta7WbIk9j2agJ8fO3f7cobUjK0bAcBZPUm3UTqyd2dxYW1v+xjfQZ/hBELTazMv2sz0tLitkIP/LCDhgr1LP9kw/SwsscG+945bbm517HiqUyiqKb+azlg50jem8xEbNoDkZKL6GQcvNY57uq8uzG3M1rVOONbI+celgy+wYrVojirywDpjPBYzgRTW1/uDpclJoGAEpNP/4RfApwoy0mBRa3dbQ8mK9vrKw2BVev1WPl5fqoSclhlRCP21A3Vnkja2/HbEpSnfmMsxqFQLTN5HwfuPWtemNiTNHTkw2KomC+Nw2zCNThyZuv+PYfl01DKSqDlUrapkacAwsaYIh0arl0JWMOTU7vqbGl1v9Xhz3F5rttROrS+uLi52lRVSHdVPpufYFhsMK7diKjboRHTw5szCf9kbrgR4d3RhbKSd6oEWOS5x0khh8A4VcIyUGn+Gr1bJOtmfB6aT8j9aM5Zm61i8IezG7MteoLM+Sbr5QHNI0AyOs1tjk2PyBCVs/PPngIaUcVXBTUMc2gjKY1IbeqnTDVnDpzPpaHLfrtXhjYWXRT7xoM5UB8OOgSpqrpsWQ/IRAHqM8dkDyEqz+PY+38rc8f+uV0M4LoggDrM/OilbK1AYrpHmCG2TXxuC6f/rY3w0rW+9/Z2bk3Xogb64KSFVm3BIjZWafGKIdu5UaqbQ1DO/bCCx21J5xuKsXwQNZfJxgk+y74yctwtX5ytB4fjZXzBu6pjsolZM1dNs2FFObOySUpcJqLqRVlwQy9MOoVj97GlCWC38NSa0+NHy9HBsaVuR95v+u348aD27Om+CTxpRTZpNumdvtUsh6TsPpRASLVNB+AZMCtgoH56Tos2VWJ3ShtjjUXPNDpHiBu9poRE8/nYZhsQLW7T8l6sHz6hOjzxFgR3E6U5MmJie3f2qkXqnf40zZR6cPTioY03P44PNDHbcpI5185F+eAI5bdh4aRYVOdEWWZc8CuHdcC556OVJa2mIl4P06Wagn1bATNMTaDgVEuU4VZUuTYw0UyXp70Pr54Hf/9ke/+NiPP/23uxf+bvivBn//Tmdk3KRsj/yiLPAjNhn+fpHmqclNVDMFn6zYCo6shA81TfBUeV4Utq8RF6O7/zp54Em6gUooy16L/wNd5Uvghsnwy5FcCjGQ0Upgv0s3cP1qi/nZRa2qJ2nIQsAimEKzMza5uP152A8P0T10+381N/gtdoYdK02D0bDhk1HTGYi6JrfvFIzAu7Zvob/H7uUTsiArQkG4iHrpkeWxBf4Y/3nvkkdW5HdqxyXZlHVzCBwPjyMXp++Ihhe22Cp23thSiYwA5RvnAHoSd1LOXvMg+6qxfVVu1p5ydEZKVAzeNyS+KZ7hvOW02AZQ/hA+KjJqsoWzFjA0K4FTBqTa1yKrZYOVMAMjGJMPssNMYyZ4dJslQ8yna2zNfpsbvuh5g8+EPbEEziNwqnbVr/KYLyRYKy1Fk7fFSepjix+N0OH+c//vB0/9w9VbN7zz8xGbFcvFUrFUrqTiCQ7K8tqmTU372CPY7gT/wyKWSbH9ohIYC8Wq7rJQxDIJ6g0fvgRPeP9ENSCJv7KC/Qxu4AdJFVxZWyRMGuHcghKUTLAopRFNu+tO01QqhRlbNeZdvV/sFwLR6TSb3Gr0wrjZqddIvV5rAnRvypYV2P5Yn3KDqsjlv7+dA/BkwD6qYNRTs2wb6GeWK3rZKBn33VuaM1Qla5aJWTbKlMLHXG+MafvcaX6YT3oZPx/NBNnGxE7/MeEsUWrl5amV7IqKgplwV/abvO4FsPQuX/ZeXDu9QurJKazrkdjWGgR+PQg8v3n+3TSIB2bse84i0V80LlrLQJaq4JYX5y8Xe8ce27N4W30a1gag4IX/OBLZie3TxO7kgnL7QPuD/Cb+MC0XjpbGDT6XnZ6/N3PAInnq8LK/v1GsFzbNmtEGMNq2v42jfkQAQHq19b36cdK9eObyQg2H2kR2w3SCutHSA1FrBqGfdpAF8C5AVLs2n7/zG0d/9qXvsNeHP/jyO+A0MR8FnLkyjwdM19M/VYkBEWFp/NphBeOc1NJmMn92DgyJFHWv6QMGreKIrI6fuE2wbLg1g7Aqw2gpaYTw5t/1qg2MT0i584+4FtAgUsUqTZSF/yGpVKZ5U3O01IJgjQ8xLF3Dh+DoqDYw+K/b7x8ZBpcVRu+uNpB0m/uh6yeLvny3jjUVRSWB21jh2PzvppY6/YYJzqvcYELjJa6VNR3gt2MjotF1S7cM2M6Go+ZQUZRh+ZBZhgdTIZYqGezDAp03CyytTUVPKDRR5BTTqzhOlYApEtcI1BMHuPdbaC2rcFwTXIl0GhBYwyCdH+J5YPjhCSwQ3pdJsizSunnCg4Rxvyqu2TX4nvz2oP3D276/e+G14TODc1ufH/n8+s2H7703n9fU4uzc0fID9l46D8yvLDSpclvO9fb3Z0mzsJ5fNnDqkktD5yLruBfCK93+MuxHHE3tchaUSWN0beqs1nA2WOwuhIAQ4eOXq9hSsLmw1GpVa9WVNdLpoYbITnWYEK5XXYq73tPWirVKXbPuoGoADniYO6FW55dGO4djXU7wB+gY405eHy/tubH8ELMdMOGEWupDFHgZvyHIpmMacHo1QGucA1LWVH2iVLLJhHaXM1tT/fkFKwHztgwcvxtsxEu1zVrSXWx2PK+TkMW6L3FGR0CbRWBziRoZbhrEFVRase05iQrQJvDagaj09Mb8so1RZNM1PWIiF3LJYOYTIx6vqlh+hhHdgC80ESELHrFT1tq+5EhySN+bnSe2rZQ1ZWZibP5gMatThooYAPy9qU7lpdoLta+3NzdPkVYbdhk4Eex4Jbu2frP++iD71mfe3j14CwWKTm79zoiWZo4cPj5WKebmLCd7UJkvHrAyVAcjiV+hiIjsMoO1ecPxWY1FhZNmyMTUZpo+9Cy/XFODbESGz8wmOa8C/k9GedfeCZy480KhWTgXBUUz9Z06+NysklGypWPgQBmzAFxp5rQ9ZU+7D4dT0gqKQYXEWc+qKrVKe0eTFPX2nU0lciVQIpfWrCcbGMURqOu54D5/CtBYFOwkAdI+h/Zm3CVBleaH6KTIeMVw1is1ckiahBOUnhrFlgisd/bsE2zDI215KsENngoo8Ed7vdpSc32t2onq1U2/5/dYz+iTwqW9Tx5YGe/CQfSpr9f0iEytPqRMFMj2P35xhGvrYGewBQZ7kQOf4KyudIyNDU5P7c7HecAZDPWmpvX8kFG0rLm58fF8ZUzNmRYgtWO8XC0vl5fpin/Gf5Tz2irpXWx3V0IpEgNsy9Z7MiPD343smEWiKX3W0ntqQ61VYq1qBtrCqKdiqIQq1CDaRCF7aHYiN17Zy3Hkg+JPVysL9obTA57W95aDRvM4qS/Xeo1mtYaT6MkuVnvzxh9/4vL939764zduAIJ/01vD7x1sbf23EaA2FPySlbPnuYqTxhkZBpv3e+ZXOdnHdXOooIDVyssjdeMVTh7lMj/kHqAH9Y+Z1/Eb9OsZfHcaTM3uLNPFNDBErSywnVFxVGkY6QTzLMsJx7PgZwDHUkzhfBa5sAfvgls766AAYN/DGmccgwPfXRLL7jL8qt2ropZOzDgLHAr8nYWog3OscI3Bk5PhD6WmloEbqQvpBWzd3NFb963EEDowGMtWXDL8Z5osiEmu8HHHScMYsG2lqKWV6olYk8+xrPsNIl8Us+5T8kn3tLhM+KNVMXRCbLgnIjj3QAZdz8PBVTLs4UC5/Jqxo+aFwm9FOF9w9I6+8tbgI9/64qu3fm/w8ed3P//6Ox97c/jUX269PAIPX9EMyzasdCDHzjw7IK4GmHZYPj0dG18vGCKY93PyiMx4E/JmeUweEtu/5WeFVa2AwTLDkmeT0KzxJb/lPlZfCTcilW/6p/2T4Tl70YlF5AWoWO2QRUdy360Gbs173DsH1/6YrMsGYPVFxhAvoOQ0alxKX8b+ipd4ZLgbyZ+GZ8UK9s/AolRraTSjLFRRig/IgpsRv+uUiVMIx3E6EzoX36pR30uHsIlAtJsChzid4I8S8ZZ9Qe/tSPLyevFS6VTma4e/PnFcrY6tY/764ErJJYacjXQb85XIiwwday7KCv7XzFQln53IH83dT2yE3bBSyuG02FhxlOKd2h3GrdZD8F/S9PdGWUYm2H0mDvIy4ZWlXyigUDagP0pUm/lDcJGDEd4iS+/zMYYslrwnPZTl9Bw0DYs0isnwn4NBkci3g5ilU3WlG1b1hulPLRz1b65g/YfDiQG+0znHWk4XuxmUx+HnvG8td/2nG9/014yQ9oDLEilj7Dd0Y8we+D4mGYAZYP0R89i7bIQw38BpBWC087IovyQr7JC9RwFGiQ2bcAoeLjHMi42VgRhsvbRvpK6dOpqUk3ITLExciPOI9LN8hk/xHMNO7i5lCsVB76em2TyY9QLQlQKcrW7QGnJjGWJ1V3MD56+1TiXtsNbph36EgNsE6v+Dzhtbn/7+Vf3XB5+9PPibt67e2t5aGdkJjTFhgosyYKEr1ULLcuf9qeBArligFBuciMOnJ9SCAWBWze4MS3ccZQpFqZ2KXTHm7Qk7AzuGfQVushiNegWv0jriOaFlAQEwcAAncExuGvibLGo7mdIRfS8nR3g+GCoEYHHao8ddr3JCXac14DPPRierZ5LN1a/1+km1k4Q4Q3Mdo/d0ZQJXBDlYaHdjz6tWPSzLCEqYjnY8E8xGoV6p5oKin5VlarBJDUv80jACP3RULZCje2bvMY7aGStrjlKF3STzctYtejo4EwO2ntrbVyuQX+UUQz3WWoXjc7BBUhWj2PiWsSlb4nTkuSSdTSqafq8ax+nMkobAUdY7g0Hgj15BOkSwEwXs5mjbEa9yZtfheHbcWLTl+aVW3K2ef7S5QIBB+2JHMAhHd8FXGNZPuB1Z87hoiga95NSJ1aM1Zc1s6vW5DbUxeRyTBrk67JsP7xmplSI7ggPqph/s2i5iEOvdCJvj6j7YAowE4GxBV9BaoT0XlJPDftY7SIs4YR5rWlLsC0DbpGbp4JGD+2c/s2/PSuFn2mX3YvuKV/fqOD63dzqukyBeWE6lboD6wb56u//G4OMXnvvRYPTVqwcvbP0ZjvWOvThowTFqs4RhSgdeuC5KHf6MZ8HJET2alAWmwhMyLfxstNWzBSw1PnZELR26V5nN30HMrHmEF9M6EnAzYsqfTG47cef5qdAKEK84G5UQmwxCGrCqc1o0XR+smi+q4ngtCrFeDS7Z7fRxIIAX9YEk+GDIR3FAoGdUs229HrqpDEQERjSskiAS6aWyDmo68kVxXrwsL6MWfj9fNXuVb927MkvOH2rO1R7wSrKUVvDZvk0ivSGG1mF1wygIBGoXpiWwkpsnbFSA8zB6WjhHBXHc/ComrlC8x47ufQK32SNrWkSMYKgLW2wxXAXbvlBrRpvrqWYRfFWTxqmg5VUdRzaI27YYbbJEBdgNpKKFcQWriouHIRaHjy05ghhupoZTUfAuHG+sWk7FH0xhiGOUYfCYp4fapjllujg9k5/C+bdFB+AG9shr7lcBfehCESjn5m6/n8JHAh7NwWuC5Qkd1aIhC6s1UekHOLhhwKfDgysbKB9rAY0pmwadssgtlcPLmSeUFSdmm+xR72S01Hku6Z44s7Cy1OrinMhZniMcNdMB5NvcNRE0hLRh+ziW1nNxz7jAHT0yMP95pGPXrL6ykV+d9HJCt2YsXS/PzZd11cwYhxUbq3Y5yQOXnGEH4dIqCmGrQ2zNZ3bXadBNZKuo+N06sbS81qwCwuwCHX2nGb52zxuDm94Y/Nb8pdd3b+17Y3D6z295fXDd68NlBSzkj1L9Sga27oF7kaOZqq6U5uYetopWwdStjDmnzzvTWGF3WTudf+XeK7d2S96s0KgJG0hpqy0jwirNHNcYqdCsVqyYFth/WLmJCXwUE/vRomHzqGUa5Zl7CAozMdsuGTlrJv9p7+Mre2BZrLT8dBqBv+e4Dmw4VFyNrVUzcRr2xWAh6cXnWrX6zvy/gL/8UqtP/CCsBTG8cLo2TpKWOxOLAD5FMiR+gx8Z4ofd8WAOx1oKx8/2D9SLgelhVay9kqkbi+XH1C6AqqcUT0Q4C4gdj0LhiV7oA7TebLhA1prVHYEEcIkuFlz4xE+GfCCt3TLGp4I0IJEkAdA7xONujflmX4TiHBm+rIhFflYsEXGhQYdCNviwROwHsNR0Ss7d/G6+l5fBOM+Fc4EWl2qZRUoaLJQejnmAxxl7smr3mK9HqSik74R2TEPWIqxGawwL4L4Le+77/lrjH6On/ZedwAnM0PkVmIPTA1ucZMRQGSdAPeKMqZ+z9mFGDju+tz8Px56Ygj09xJ63XnACXIV/bYLF+SU+2F9wzQ61DBxeyg7iDdF7/Qn+IJ/CcDC+wzb4mK+6JrfYMZZhh9kMYQ9ZfMjk81mT51lBzRvTyoQ1znHwVMVXsEiike1Sqa2QyiZt8Mf5BSCmG52XL//keDuA1QnswErKOHnZl65JpB0avhXp0uxE7QiurstxWljVDh2stgvVdrFJSg1bVnwyF03QvEL+5d/80QincdGzPRtLr2HHuIHsRiFvGcvK6ng0KSxPkQpJHsjdmJml1NBNrZR5+OGZ/GyhYkzrZLio5C2LFcA2WwAdNK/QciKwaNjR0qI+69MT3sn4cVL9Wm1j9ULUqLb9IKmtreHqJYBqyCCzfWAEdhJ23IpgSOjwyAGjbN3dnj/z+g1vDO587eZv//OPP/vGLW/uvvTW4O23h48/s/XJyyNuaQjLCASN1Iao6pEJbpYv8LZ7Pl4JHvOX/MfjC+4TkqyJWm2o0eDC7Ntw60Zgu4fcDJtkGWfCuReY+z7zftOwxk1SAICTloSA35Z+9JS3mDwdv8wWUe8adilsbpeSXv4H1pPmcafFMBMZ1JAeSPmu/Ck4OxkxjzD4Y0fB2PZQD0FzK/49/r2A3YpckTmXc8Mioj/Eu3QJOzux3Hchqbonva50+Kp7yns5Ok0l36S+S0IsYdrp7HOxisfGts5mKkQTIXSGsw/OhM/CTvsj50/UrxQBulIb65RUBwDaqIkJZgAUcCgDPR1FbiaGu5NZBCr2DE+2ifMF7F5+5hjbTwv8CMs5U5pqaw5FKU6E1TabZtex3xZLxheJvd/WYAfnmGXutUdpTsxyDWfcViu+LlSphGqI9SfwfNkJ81T4eHU5PO6fcE/CWpyEs7jIGpycBOTWaJDtrw3+YuTp950HvneN5BiuJcPffKYmf+5fgjtuibZYlzG7YEesEWDeKIlTkZYKLxNewl7a4BHjj5x9dHx8+xa+xD0jMHAMOJZxuNu7seE972wPzSmIXHEKuEsjB5va3eWh8NnoRe9ZjmFxHDnF6gCd42d6QMMv8NM4d4xKhl0ODTwSoQfni6eIXuC8HLEG7gl7zEIqFURW3r0So+Z5VuZk9L16KpgMW/jBLfVbe9+8/We7B7t/9uW3BvPfnX5z+Hff+fo77wFyOEfn6B4zw/bCEboJLvOTOgcijhBMA2dgyWLwMfOjBTLsfK5SoA/RuwHBYmcKGKQ8GBse6h7qEbw7yYdwuoahYXqer7ikJoaYhXkMMvU+cbf9QXucDN9mPmJv/0/qI44iDGxduGDEfr/qPAkHZVW0UDrUzciLZPgL7rP+z9gLhF0e6oFNX3ZPu8vBk+6jLlB2QVam38sfNm/WPmsddB6xjjkF82anSIb/k1N27sJwFCakpREqmGbcNNMS/ODd0cZY3YSTeFkQNimSsTpqYVRfA8DlyqpMgjM8EABqVqOneZ2jpAMw/Y/6PfcJfpmvAwCD4/2TpOntqKsChAZq03TPyaZLqrLNU/WGtAE9iLzYTQUVjZZsz3JS4gEtYxnov9z52u6lH1//7UHtJ59+e9h/57qtV0ZsnouxfFZ3NXc+nA4q4iE5ITL0gEX5w5myqSi2SqiJnNXkCiAcG2dTF9yj3n4xiSoFM95X3Zws8u3rgFoGRXcebLvG9pbvLBw0snJeajV9g9hwgewF+n33//IxThyyHuuwCAdj96Wr/pC51NcDhFbIZzMAXkx41hyAGCvBL8PqV3Bqv8sq1n1s+8PeQZlL9kd5AAMY+LAXZyK7bgSO55DQOGUvu5cDRT6WnEvK8nKw7CZp7aMw5YzIBzOeSQK9VgkcpDE4ylGIejk0IlMi1lX9nbwWI77zIsUnhy1aLcBi7fhUpx6efLTTi6rrT/VOtS6xRUI3sU8dXCCqdLupEDr2QIOBKTbfda6SUHe+XgptqaSTf1SGMGRtvd4Mo7jhRV7kwzUAXhBLsiqqRsxj7qs9G0Fppg8MfPvXHxo5Y50vhhVfmzs0mz00diR7RJk3izpLmypRSjt4yHPS6cTS8bXIwTmFT/NlukQDs2+sq/28n/PzxqHyFJnaoxTHx/PgvEqWDfS5wrOY5fe0oNjDvHqlocWE/WKI/TU9Y1+yL7gt7aLVt9baOPkwlcNrhg0XnAw7BYhx64uPvzy447Wbruy++IPBD94clF699YfDbw/+8p1fG7nRmDb2qbPmI0rRKJoHJhXFsqhuTzODHgULewPdS48ROkbvs+eo6hw076TgC30DtcIAW2Zio2XWbClWcCBZRRyXJ+UJfzVY9TV7zV/1X/axTWGH4yHQI1Kiplfs4ohdItQhUQmVCA5YDc5JD34sCMKQ0eCK97i/4p5zT4CvOk5ES7jYRrWQwdnFv7jBtySNjcjoFdYnQrVaqB3gWYIFgoCVDJetA9ngHOdOpiMv0e+J2Nefs1FE3glopB3PHB/dyHbHF+86Syb6ER+q8Y2g63f9S314wBI7weNgsY9GC1EbGf5BHNdX4DIazhpabTu0Q637yBkV2QTw1rn6RG0yIFnvTjeNBaE4N1cAb88ZAc+qBS1TskzqoLMjWWpr4ASLZkYW/fH89oPmfmfemaRTLAvetmO1KT/KyVEwzvea+4y79c9rRU6M97p9uQwYT4I1Cbx+8IL7dbnupCOgqmxBrssVONXEt5aCOCLDl34lcuHHQOVSku1KnuIrLdXmwqn1RI0f8L4IkO/tEpxemobLgbq3rJdkQzZDJw56jcG/XX/aW0F8juVcwMzBpV+gODxJpIMFkhjPHq5wNVKa2OsdAscKqF+Ulks0fx8/5pDBDz88smqdyi/Nk+Fmq+TpKNgkeLGYyzE2pRws3OPcbldY3tSxPUHy84QvsT4Go3jEIkIbUTAExGpnKLsX+mu9k80nddjV/2Wr8+e7T7/1mR8P9rxSf3vAvgt7+v1bPx1BIROLV8Dxl7jGHbajepPKXDLHsW2tpMwTx5L7XAuO4jQ2Z8ovi4+K28WdKHAP76zAGtI5+bBX8QtxIXQie5WFXj0USVADdge0DpbNbtAF+hQ7zpfTNIUTW7HVV9v6ZvFrE+1KU12cDSskVKXuzsi8a8U6CcyWGIqB6wM3kRH6aWQ3WMq7lrY0pbNf61mAbwLpOANioPvhr2YkuV7g11CWr8kTCtaMsB3FkCXn0bRT4W+w7yGyAmAAzwBFE3RlXnLi/eB6+1pON/cjEwu1SG3PMa8xnxQl7By4BNmqLrbg8fvEbVCZW5o6mV2e3Bg7+eBFHfy2GmnwKtXA7gCu9CTx5LmGL1DHpx2sJCpbrK01T640FsNaXPe7XpOetuCYMSnDw5v6tQ4/2sHJKdhbbrj3R1MuwCGRZffSGWuyXNAtu1IklmmDaUGdCkMn4qtDYvs/sO08jVlQ2DCqem30pPOvwyn14N35uJKUkvuXxhq6V8aas2LY9oeWIosvx99ZuXxm9Yn6AjzvDXg0Hh5YLa3XMRo74SLX9Mu1QCskSvhgqyQrct4rCzIr7wrmLfKtm0bO2ptGV4/tyNlJoARWVReoDqpaRjaTy86WjpSJYpdMC8DYpYr5kFK2UGoDsa74uuzIGmDfGmtYy2bXSc67T1lkcGX7UyNMPB5dy+uoUUeb9HJao5ImOxeSltdwQ3GSfZ2u2OdzpGV44Ft5eXpiMp+rPJwvUYerjubMG/srGLYAyIzptP8wyLx90+u7F/5+4PxwsPnD4Ytb39j6y5G0jR6rnkyDqVQtGwbmbzE4aAEpKmesgjpHjKKVM8oUTRWyVwfbMsoPWlPa/WZG/QrR7rTcofnql+dM27Rvnh/VR/V5pkRqoLVpvfTTzuCPZN9dDTb4CuENv2ElZtWRGZdkXd0awkI4RuGxzquftQ5bX6b30bsY4i6WzvuZqe2r5ncCllSYVd2zAr1hRWar8jRd8Y8Hf95bq9eCx2qSEsmMQ9hXLjRPcYHktpUW4NgAYAIq+YRBa0UEBHCZl0adEpG4vehp2RMhDukDk3Fcwq4NAMeQJlsWF4ARZy8FbXmWk9PCrQwFh8PtT1o6QxFxM1BCHYklFv8BFmqhUArm0AhKEHNX/Dm7jCNbWZ37fFF/3F6x141Vc8U4rnWNDslfmLw4vYIdlen8oyUVqGt1MqjY5OTHR5YK5+4IU4bq6o0jnubmyDgdKgAC04EN3WdOAIAqM7xR2fS73e/4nf75zmkvCFyS+C5rqgAKX6ffm/7e7t5bN37nxrcH/reGl/+BjkjM29PIeobXAa/h4MmQr4TwFhlgSYNYjz1wXgdcebGB3SXVBtyTJ1ms1ksBa2irxbPm+WDV+05twydtuRi23Q0/iIwNu8O5Fmg+5wU2R8fsvD2qP4wF6FnnIK+E+cSoGSftHn/DO+8eF8/5ywCJfkw7tFtws4wUwI8AUzVhU4H9ZQa27jh5+2Gm0DIzjX3G9u/7txFuhdMYH4fziKPOhMWz7KBWMsjwck77fG6GwYWPUzPUzlmLzvNy3d3k/xw1yDCm6Gv8JD/L6saq8jiVR7QsKncqwGsqblYWmcbzRByi4xRw77K1h+1lf8oPiZIsSVVqqGsVo9YFYunmMdeQ1upEKurVwOLUXVsfWX5z8He/vKr35uAHrw1Kb129ZX59ZIdQua4Y/HvnMVY1B9dgS2moBZWVPbW51tTqg375/FfJ+dur5XYuAZuZCr+i/LAVq0CDU5IZ0jZKCcOTAWjiyRD1kzjOZfYifp5eppedV9im81MrjgeEiKZsAg6JUIMBfo+bj+YTwBqOSVXVwkn3iv0Isfbyj/gflQdReJKI0aFKY/5EuTW/es9PtJ7ZfOgNvVVeG30FIa+ynMrguY5L9NCUZaqykkGt8hSz+PYH+P/B8s467airxSU7FYQmXB45VUnm2/l6JSiFB5vpiAHsog5sL+3XTlu9BNhsobmmpbECHZvIHFbzpXFt1lZtFR6rlb+BK2RH6RO+FFpxsqwi9oOXddxi/EjzaC8T6gkABlIzHadtgdmkHb4Ia72ZVN2NZuCH4PAQvpw/szPS1/O8lZX+ZuuxsNtYB+OObZ3YobY9wm/jt2FGiGAxYppcTzNaVdgrPY4VtOkpFtwPUHJu+7mt/zQiwaj7wLQXglTegVfNthYa/czaZFQKjyQPaoY6TiqH5w9Ozz24v6LO6hXbZAqfBxieX6KuVbfrxFjkTw3xE6KbRik94dXfdBvdc9WlIAmrpMGG2mBc3DKc318Mpt8YfPHruwdbPxio37j1e8O/GHxqbAQV24DR0AueDxT+2eWlTrsG20UXTs1esqq0mkQ9Uj8RbsrjvB5f4k3C6pve0MvBsliiNaBnVb7EHS98MDjgPyTyooRVxxjmAqKB4QXMkoRFF1DePwX6E1hPO/wL7qYCfanJjGL6tvYYDeF3RbStPGGsFl5UasWniN2oLJuRVjNaakNpHtvEqpS5TopugTqX/fuAjRAMy6f5TNOyC5XMMXW2dEzbrx81M/SICXzBOkynCCvSivUwLYAxwMJ2TJvYjBnCgLOvqZaJ5R8YF6oUtZwyps7ZRUp5xZ0JZ5bK6/t+eXzwkbOvrz935vGTTdIKE94w20BBTx+uVVzRqlYjP7AalfVyr1S1PNNPedxYy9opXZSWd4TnrTlTivlKSdf1bK5cLuYtk4w+WJ7M7S8eLXyFHrXv4H/mqZjg59TNJAdxlAX2TBMgOuWgUpvpT+GosB2FnwsTvWu2Hhn8eEQVQ7PubTxDs3RaFNP6cCT1yeVwo/lC9zTOhPKcmkI6hbhUn07mO/sAk+q1cR+R6+87bw32vTb40+/sfvKNG98cvPry8P89+M3HRlbex654g/dj2D8Ae/G48oN4s9UKm/FSK/JPHH9XRzAgfhAkXkiC2lBwNJ7rZbu5mC1bNdj3kZvOUgF7hvsRjse1Pj9Rb8XN6Hgc0yo9OZ8o9VLjy84cVdQx8//r6UpjJLuq8wymzMV2nNEUBZGSzDhgBEH5QaKQSCiASbAAE2RsJ4DHnmFszz69TndXV3Wtb7/Le+++/dXW3dV79/TsNhgGW4yxAeOxwhYb25iE5UdQBEpYomqrkZJzXtuZ92O6W931qt6995zvu/c736k3p6rNgyUyAbm1JE6LclRaqfcaC9iTxXRgoaBPAqK5fZlcBQsWRR2IP6CdhqlC+i4SeyqdyKWTjjVbXhm7Mva0nLeZmzo99/HZxbbnYqevwD27kSnuZeRF6VK04c47HX6OJcaK1WPYZyBbmdUN0yO1TiOdTivReCuLWIDMVW9I6BZjZmYQO1bLFEtNq25MqzNotpF5f1oul7RrLbuGswSJrNtqkzTdmO3Keb/nL8tl6YhNfcEMRavjQVgB8hKyGJ143Gqqy0o05I/zEX64PkMb7GRluo6CN4Rzp8ayeVDNjrUzsS2F4AsXs3CnzkzUlh6fvsAyFZU0ZCVVA4zrimz4U8lIXHYfCu7TT9Vr5vCMrpPhMWqZ02ZZWLLk1j2zRUlMc/lf2kdz9iE2ZBnUpGO4xy1G6FGS/x3ggkPiEcL/PocFVdIk8zduQhhMIjK4aata6JlrjbbaUTeHgkaAXSsqaI+CALk0oSil8snyGYNge/LT9gh6pQIY+GXT5T/Pia/yL8On53Eic/3oaXsJD0WvbX3yJf2FvYP3vTyofiU/Nhjdeq4wat3fKBkG0xgFajSuNTTNGJ7iCtcc2p5Ja6EZY+5EEii9yPfs1IkhuWGnkABGG5ZSwz4ptt/Phgg7bG6/mQ3zqm06lt8I6Fk2C5QE5jOsFO/fvZ+Lc/ZgD3nBeVbsE8JDomv3nK5z0Xs5QAkFRAp96Pj4PbVPMMC13CTGiPXXciy+c+7Ql466dL2Omp1N5gHjXff6ft+biy+vkNBbmI+T2bnzT0Z9SKi+g2XeV2QfwCJ2oP+Ksjn6JWIGZogFc8cu4djVIzynrPt1gIuXRltFb5ST8o2WhOwnGzD9G4I4nZzT5jYWlI/pqeVOOeRe+fHmQY0Mqtt/WgAMyF1NwlOKLB9IRAp0KXDRiuCS69INLOFc0iLzcnHlVOcLySk61jxVPzr18CT8OzJW1EnJKPGKV/UAMM7pKfOMteZT4nLyPf+yLZKz0drcRYjorpVSH7cL/3Dr8R/sXvqPGwbrr+0BjjE2bhqVM3Je+4B10DyiH9AfpHcbI2ax+WHa4Lr+ADMIsGDP6DTWZK25ZiUwCz3cG0NDh/HlYrsaa1ZplGhNrvmK1LFVT2AsfSos9T/Xrazfj11sHBaoC1YQEOwsiCXKUSijsOevzQ5ydjT3axHbaXARaOJm/JK3Srw1+0vuFeJswmRfMvr8onvJPc/aWYFI4KaeJdIgCYJY68A78YVLfD2x9uHKNoE9m/Y9/K/4tHusTW3TYja59Zef/9FHXv3g724fkK27BoUzcu+Afv+3L+XftfU33yhYotlAQwfOjwmS/4eimOAGwBszmIEkKCr0C7zMVW7u9AgTeia5wv3A9gJuVQWRH5PeqqXPry+ck/7SStqKMk1Re7bT9X2JDwkumxOgz7hljAeU6IQU2pGcZ6ne0+ZmLqB7EXw0gCwOPDq4mh0tBqQTodBx+JLSqfWFHbHnmiL6hkM27Ui0aIjkQpC5G1ndrkK+wYIdeI9rNBUtEfiAY1qu5aVEJtZSLv8WPETEUm/qZQUYEpBd/mbDF0CuT3LDPO40YMEjFfkY04E4HgDWy5z7HCDnFMUBkIuOZ/IJml0mgAaSt2im86XCs7B0k2p2za5KJW66NGz6SmtK8qRIgnpaXRtu1ZJS2gi0hSPAU61jD2On2NPHUeLOLMqIZhRHG9OVsdOHZoqTo8UjTh3AmY4bdy6Wc5mBEUMwUyi/YHVYYO9YSMw5MGAd59ui7SZOwoCriKuoUc6/y7G/bqLxSh6bGONBbmB7QJVsGneitjPPFgnv1NNcrWWLaQ5gopJ1PBq8a/ujg3e+NvzK7sHln93w1PYfFQRdnvRQ/AWYOjRsvgBok4tOCLNXAp+U/cVOn8AcyDxmlp7AspBkzQm8+WhVrsvV2V/JWScQ865PAFG20DnLXXBb6bd4J7qK36OlLGZd4I2pu0qcrrduzznr4ZfDRSLbuUQkOMaRkkOrv3DGpoEemr1mxFO4KfxRaKO4A811WiIkwsMqO+rqkRVp7fFz1s42iKuFDXfIrooqYBwYTgMwlUIn65pWq5UP0hEAWg2qwHWENc0z1lFzlNAKrdrZKTVeQMMUerJ+r35CP175oHnCGrNq1jjRHxi57/hR0qg30pwR1NtqoiZ6nNUxwISpuadHhckV1I/YdHY8c5ZolSA93joY3rrt1fL03le/l+8P/nbrZOGUNqNNlk1LN0yqGpNjOC3QDqg8blWXi61myCIPmG232+rOLc52NuOWTFxXdOwr2qI6r33txMJ0t9bRFylJYRbgKOAWcsgfheSdWQ+5Hfhxp9VtrZ/3E8BBItV9eF8SLbUOa2ExMbLq2MnxkdMz1RljWhP2yMLhzQdXx0IgfDBI2PpGHg6nBBkSbT6ik5XtDxUeMaaUyYlajVn6iD4i+KIW0QQWWCLaHRl1LjzBHpsmsdkzYmtF9Whaj5uxkRiQdbSYtdicSCC/hDa2YhCrMWRDGUIunAs2VhY351dtl8U8MLxiuxGaroG22pZVmqgUK7W6XlYsOmGQklnycxUPSFVU7FPnRGskGW6fCNH3pAEP+reDQ6+++ALKp396PX9p8NmtTxXy371T3E2L1gw1FDGOPVfHQ/Npa5717AX7vPO8jcDFVIym0VSnzQZcCnbUANw6QT+tH1QyYR9aFJsAX4G+S8VnO+QJ0P2SJfG5OxE8gmsB7nIe/wAscJ1iT9CmyTyFuKakgOPqsR13guSxn809Trxkzs5dl7H9MrvKW0DaHDdKHae/ULwyzA/w7XdkXTjDXjxHehfWRe77bNO+4Pt2EmQborFIieirUU5JLGeUzfCPZEIzL/HTeN713K6b1pcUoQtHKm84V5qOgsVsrDZZHyMTD+QUd0wcgAiw+OKPf/Di7sHzW18u0Mlxul9AAsTyzOJ0uXz8hKoPjxSLBpsuKcqn78vKGbBdj6Y4M2FzdiJgT7hz9iwqSJ1vS99J5YBEfdbiEnk8bjplmkkHu9JGZ0UsQghvEF2KmbXYw/YEJQov8Rof40eMCVbljJ1bf/Ti4G2DvViWMb+QNczDAOdJF605fO7OdMpdyHmUiaFRAJU//v0fF3SqiRP2n8kPs/u0CVrdsbHiO0feAPdMTp06cacd07da6iq/6l/1r9vPW9+xVuXcbICj1oKwA7mDKKlYmFDJrV/8rx9d/rfB1end/7n1UqGBRmyqMBzdNT318uHAcrhnudbsmUF++23YEdNiJU4+Y72v+plk3MNNCAXuaZXMKWFKVeqB1bWwrTDkREl/wZfca37fQd6Q2omz6G7I1F5znuyHqRfyFcMnpi9CVHqhozLwbQ8Pxk6vTM810mYWbPRQjUmprwSV+Vrv7m9V0qme4aqZ9LtRI8/+/p0FwSuizI/xh3SY1QbTYdZOopV4aCyKy37PHey1NxhZZ4+zi2INNUCy5XkoOe43XatjdRzxcfuUfdxWbFJ2tknWyPHnW1eu7+3/5I4f5ZuDoa2NQiq6pSfv8rV2JWmsjHZHz46QUNeNXFO7525dsUxNNbSJ4WZl/JHqZHXCNHQl87NruOZcnXSbQKgB88Wt/ubZq6uX55ZmF77/r6i6bc+i50MQ2QkBALm4k+S5o6VabDrArLOSZOog9RhfxzJvZ3K1NF/pHnoGyeWDT1oAVlAfSQGFWXbTPWmbjDRgPFiRlQQHZIZVxFmRtSoF2f7oc4V8H+ZJzT4m/tL6ENvOY/+SD7E7uc7qQONNPNGxGTARHsI6Tt00SWL5TTG4EX3Anw8HVqZSADZqbKJWhHBMcDDm+4FUACsjt/5m689e+cKP87sGV157a6Guq6pSmTo+NXro0Ojo4Qe1BpqNWGajVj1TH68OMT1pEGm5mThs7cxs9fHjL2/ftHDYbwYNLFKcR02GH2dVWrYXJ95+kZUEBm2zX4cIb/pGUl23rclzMyvNztAXd9pdwVOq9ZSk2h1d2imekWHU27xy7sLyqvTW1paWl9baC2T1MQ/L8TvMnQpJKeBCM8ngH61CkTY1XsxOtBnJ3wFwcIYX+TH9Ln6ajVCVH2MPiGV2gE/DWraYQf+ZHSH5plDUv3AVt7pgzFk9a7YDryztTBLrzNvL9rJzyVkg0eAW54lgsAte1rkcfo0/JSLaZbGxRp1hdK6umV996OuDi+21c6d71cXqpvaVwR3f3fub5fmedmViM7mgr17d1M6VHxtZeuVrB79+bL6znD/8zJ4XBy8XnHJODvkH5El30j0iK46B+/2iKS2nLieiyUjBFpMYw80I1eQ8tHFXGBgrDc1E9MJOENoQ8Iw1EfkkkC4sSRjwa3t8ExXhoVjAgz034Fi21cdTNxmKwITEJFKHBHaQKYk87lOSf+jantiyOWQJd5ZGgM1mQ5QAiRZuF8inZBd/hTqBjUqvxG+7aXRp9pvuZRuLIgSeZ71hI03wpHg/qjA8J/aS8P/Px2x7Ad0cxQp1EbZnwNqI1PD4BcUbFRUBwFQy/6imZpjXXbBT2rPwfCxrhuZYoR7urCpcVwJQ10hSRcdaNKoSbpgCtMzOp+Fm+1HODPcKFmdjbzl16YIfOn0l6+nixRn2t13i+KGwIoYjHtshX379TBUw+EPP62qkMlUzTIOha1dR1bK+NpmDFUexsMXqBilr09Vm3TKtbHNULWMtu1bLhJWUUUOVRpWROm6b0hodm4J0l3X1gtugR3LDpHbJnrGdGUpg8Weu4Bxb3mAhN0xkbKimGgDhIQ4D1nDIdHTSKFewbTtlOgDGJm1QE63BsZsvRA9tHIKg0nSGUwD72cwxN4xo33f+p0AhWO/Lv/O7u4DnYS+/zJiI97ODX2yHSPJ//ux7gWegRlNuZFK/nh1I9FL3aWjFIpEt6VmZ/MWF+d+yAAWjuzXv6y1Lii6slcRYYgswhJ0qadcFM2tUtXjFxNNaygyjZIq2kGWum6YFwB7NL5DwNFrVRg0yYENHbY7uYz2ABh8+SCSdTokuAdSoei3gQDUUK6chqbFfb1OL/2fCD+ZUO48cqXQzax6R+SPu53IastyO0xVucGKwKusiysrohAZ/rZqkaXBhhPg+dsw6GGQgBdvZofIGchqEco/oc9zG0ZhBa3WHSy8i+CjRwRirrvGhvdFWxPUAZiRx1ELDebghSbb/qWDX/M86Vafs10WFNNL79X35236xC4cMoIwt9wvJIhYYK6JjnIcAnWrP0CV9mc3zCEipi2pyByYr6iDQHfrB4F4yuC6BBTENrUJpg6m0ahRFXTS0+3F7Xgh056GQWLCpAHxTNzkskHCW03RwO8nfdu0TzoZ3VpwXmzbAsEATwEt7wnQTiUZQjg6pCQIP8U3BWAN//zOsamHHYsVQhQo/eG7X9pkHCtvv1t9iCnwLVc3lvM8XAGX0YWZ1WWJssg5bhsvnfSIChhpFn52Hb11s0+tiZZAbedmJuzXrBfL1UjdYwnf93f5fDPYXnDe6g2KtrNXiiZtg/QXMebPIq6wELzeFPm51rgP1+aR9CkjD03fYZ3SR0yZUuj/ff/oOrP2xsh4mcsZR0Stlng/ewV8Vj6HXtG37NDU6QeT6bi/xDTL41McLQtdVrrIq/GVVPSWcxkF8AISpTBEWfrkHnsIoEJMGd5qw2nhOrsrLThg8mn4r+0gbtuf16GorJKHnqzlpuha6VlaAYsO0eWrX9qHB7QUzrMt9+duf2uV1Erkff+w223SfWVfN/Q/YBXjMQprSxFMjEoQ5dOrD2VVNdmalBUnvPbxgqo6VGCQyc2EYhdWoGVBsqpG//Zld25+nBciINGiS/Puf2RU0JW+FPrwO7iZU+1nPeeBy8Iluv/amwfferkNUszVHcVhot7FjdEhgAO0aJb+/s1HIv/faLksBEkFjyMwyIjLUZU7xKKcaefLt+dt+sgtjI3oZwIiiIFVmhpm2xsjgV6xgAfn1fCmV0NLxGb7ZKhdMzaaJTgLL93MBZBXNI1WY8PD+b93mW5cGo7uv//cNg92vmYBHlOrUwdF7q8d4VahO03m9FtbV0W27m20/kQBb73Sd1EvixfZGstldCBM35a2sLMo2/aG5TOUFUJvCDewtfSB3v/IvN1x+rVFAozujaJbhkyHyyupXdvp6Oq939swUB44VKZ1K+3POAWeUs5YSGLboQ0zDcrZWAndfInbbuqiv0pSmwuVx/SKKFMyIRmavEY0H4wE+c3Lr1nvetvXZwvSjW7e98tJjN27rT75l30273/2/t7y1d8tNr950PXa81i23/PDmH0p5yx/8ya7353fdsHv3no/dX2dakT3MG+72BwCl3wwh8EH7Hnf7TXbRP+6WHUPqUc1lHbEOXM/ruhGfR/lpbPxKvCB+ai3xX5ObxbPsHID81HKAMytCYTAPbv4/3shwe3icY2BkYGDgAWIxIGZiYATCLiBmAfMYAAmMALl4nGNgYGBkAIKrWsf8QfSWSV8YYDQARc4GigAAeJwtks8rRFEUgM+5bwjbezOykLKQifwFUhZSSqwsWFsoJXYWysJONiRFWUiK0cyG8iM1JYkp5VczLDCThcKKlGJ8776Z+vrOuee9c++58zQposLvQKxWijMWn+NW/CNWFnEjxFkz4vRbnORxAafwArUi8RJxlvgRZ8SamnK+jzfwEc/s0O+JfJ5ecW+rSeI64hNIkd/AJ/E9vBMXIM17q/RsZu2WPMM7FfgUXuGCWhc+pn4NLxDWtnhuDN/hatZ+oduf2ekwbELJn8/pOMz48/j99DKaX0fYu+jt9JAZttmrk3iCtbBPOF+OeBdPwyTxOoT3dlXuvwdr0BDNoe306Pd3ZvWPuJbaA3yR5zirEPfhUWqgz9H/YtpY78ElsUFHdM/BMlQB9x07w7MwJy5I4ClgzqAXx/AgZq9giH4f9KGHacIDeAUn6JlnvzfyemgB5pUsZ+Wb+Acw2Fhw) format('woff');
+    }`);
+};
+
+export default addFont;
diff --git a/packages/xy-chart/utils/drawAxis.ts b/packages/xy-chart/utils/drawAxis.ts
new file mode 100644
index 0000000000000000000000000000000000000000..913bcb3f34e31f1063bdeca6e53fe53c5093d020
--- /dev/null
+++ b/packages/xy-chart/utils/drawAxis.ts
@@ -0,0 +1,105 @@
+import { axisBottom, axisLeft, AxisScale } from "d3-axis";
+import { D3Selection } from "../types";
+import getFormatNumber, {
+  getNumberFormatUnit,
+  NumberUnitType,
+} from "./getFormatNumber";
+import getFormatTimeline, {
+  DurationUnitType,
+  getTimestampFormatUnit,
+} from "./getFormatTimeline";
+
+interface DrawXAxisConfig {
+  xScale: AxisScale<number | Date>;
+  tickCount: number;
+  moveDown: number;
+  fontFamily: string;
+  stroke: string;
+  type: "Date" | "Number";
+}
+
+export const drawXAxis = (
+  selection: D3Selection,
+  { xScale, tickCount, moveDown, fontFamily, stroke, type }: DrawXAxisConfig
+) => {
+  const xAxisGenerator = axisBottom(xScale)
+    .tickSize(0)
+    .tickPadding(6)
+    .ticks(tickCount);
+
+  if (type === "Number") {
+    let index = 1;
+    let type: DurationUnitType | undefined = undefined;
+    xAxisGenerator.tickFormat((d) => {
+      const timestamp = Number(d);
+      const tickAmount = selection.selectAll(".xaxis > .tick").nodes().length;
+      index++;
+      if (timestamp === 0 || (tickAmount >= 7 && index % 2 === 0)) {
+        return " ";
+      }
+      if (!type) {
+        type = getTimestampFormatUnit(timestamp);
+      }
+
+      return getFormatTimeline(timestamp, type);
+    });
+  }
+
+  selection
+    .append("g")
+    .attr("class", "xaxis")
+    .attr("transform", `translate(0,${moveDown})`)
+    .call(xAxisGenerator);
+
+  selection
+    .selectAll(".domain")
+    .attr("filter", "url(#xkcdify)")
+    .style("stroke", stroke);
+
+  selection
+    .selectAll(".xaxis > .tick > text")
+    .style("font-family", fontFamily)
+    .style("font-size", "16px")
+    .style("fill", stroke);
+};
+
+interface DrawYAxisConfig {
+  yScale: AxisScale<number>;
+  tickCount: number;
+  fontFamily: string;
+  stroke: string;
+}
+
+export const drawYAxis = (
+  selection: D3Selection,
+  { yScale, tickCount, fontFamily, stroke }: DrawYAxisConfig
+) => {
+  let type: NumberUnitType | undefined = undefined;
+  const yAxisGenerator = axisLeft(yScale)
+    .tickSize(1)
+    .tickPadding(6)
+    .ticks(tickCount, "s")
+    .tickFormat((d) => {
+      if (d === 0) {
+        return " ";
+      }
+      if (!type) {
+        type = getNumberFormatUnit(d);
+      }
+
+      return getFormatNumber(d, type);
+    });
+
+  selection.append("g").attr("class", "yaxis").call(yAxisGenerator);
+
+  selection
+    .selectAll(".domain")
+    .attr("filter", "url(#xkcdify)")
+    .style("stroke", stroke);
+
+  selection
+    .selectAll(".yaxis > .tick > text")
+    .style("font-family", fontFamily)
+    .style("font-size", "16px")
+    .style("fill", stroke);
+};
diff --git a/packages/xy-chart/utils/drawLabels.ts b/packages/xy-chart/utils/drawLabels.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb8c93b3c21ec4b09383b89894dd0a4f944fafac
--- /dev/null
+++ b/packages/xy-chart/utils/drawLabels.ts
@@ -0,0 +1,98 @@
+import { D3Selection } from "../types";
+
+export const drawTitle = (
+  selection: D3Selection,
+  text: string,
+  logoURL: string,
+  color: string,
+  chartWidth?: number
+) => {
+  let logoX: string | number = "38%",
+    clipX: string | number = "39.5%";
+  if (selection.node()?.getBoundingClientRect()) {
+    logoX =
+      (selection.node()?.getBoundingClientRect().width as number) * 0.5 - 84;
+    clipX =
+      (selection.node()?.getBoundingClientRect().width as number) * 0.5 - 73;
+  }
+  if (chartWidth) {
+    logoX = chartWidth * 0.5 - 84;
+    clipX = chartWidth * 0.5 - 73;
+  }
+
+  selection
+    .append("text")
+    .style("font-size", "20px")
+    .style("font-weight", "bold")
+    .style("fill", color)
+    .attr("x", "50%")
+    .attr("y", 30)
+    .attr("text-anchor", "middle")
+    .text(text);
+  selection
+    .append("svg")
+    .append("defs")
+    .append("clipPath")
+    .attr("id", "clip-circle-title")
+    .append("circle")
+    .attr("r", 11)
+    .attr("cx", clipX)
+    .attr("cy", 12 + 11);
+  if (logoURL) {
+    selection
+      .append("image")
+      .attr("x", logoX)
+      .attr("y", 12)
+      .attr("height", 22)
+      .attr("width", 22)
+      .attr("href", logoURL)
+      .attr("clip-path", "url(#clip-circle-title)");
+  }
+};
+
+export const drawXLabel = (
+  selection: D3Selection,
+  text: string,
+  color: string
+) => {
+  selection
+    .append("text")
+    .style("font-size", "17px")
+    .style("fill", color)
+    .attr("x", "50%")
+    .attr("y", ((selection.attr("height") as unknown as number) || 10) - 10)
+    .attr("text-anchor", "middle")
+    .text(text);
+};
+
+export const drawYLabel = (
+  selection: D3Selection,
+  text: string,
+  color: string,
+  offsetY = 6
+) => {
+  selection
+    .append("text")
+    .attr("text-anchor", "end")
+    .attr("dy", ".75em")
+    .attr("transform", "rotate(-90)")
+    .style("font-size", "17px")
+    .style("fill", color)
+    .text(text)
+    .attr("y", offsetY)
+    .call((f) => {
+      const defaultTextLength = 100;
+      let textLength = defaultTextLength;
+      // Because there is no `getComputedTextLength` method in nodejs env,
+      // we have to use it after validate function existed.
+      if (f.node()?.getComputedTextLength) {
+        textLength = f.node()?.getComputedTextLength() as number;
+      }
+
+      const offsetX = Math.floor(
+        textLength / 2 -
+          ((selection.attr("height") as unknown as number) || 10) / 2
+      );
+      f.attr("x", offsetX);
+    });
+};
diff --git a/packages/xy-chart/utils/drawLegend.ts b/packages/xy-chart/utils/drawLegend.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54703985f4b75099eb083b07d74d652e3eaaff99
--- /dev/null
+++ b/packages/xy-chart/utils/drawLegend.ts
@@ -0,0 +1,118 @@
+import { D3Selection } from "../types";
+import { uniq } from "lodash";
+
+interface DrawLegendConfig {
+  items: {
+    color: string;
+    text: string;
+    logo: string;
+  }[];
+  strokeColor: string;
+  backgroundColor: string;
+}
+
+const drawLegend = (
+  selection: D3Selection,
+  { items, strokeColor, backgroundColor }: DrawLegendConfig
+) => {
+  const legendXPadding = 7;
+  const legendYPadding = 6;
+  const xkcdCharWidth = 7;
+  const xkcdCharHeight = 20;
+  const colorBlockWidth = 8;
+  const logoSize = 14;
+
+  const legend = selection.append("svg");
+  const backgroundLayer = legend.append("svg");
+  const textLayer = legend.append("svg");
+  let maxTextLength = 0;
+  // If repos have more than one unique owner, draw logo before legend.
+  const shouldDrawLogo =
+    uniq(items.map((i) => i.text.split("/")[0])).length > 1;
+
+  items.forEach((item, i) => {
+    // draw color dot
+    textLayer
+      .append("rect")
+      .style("fill", item.color)
+      .attr("width", colorBlockWidth)
+      .attr("height", colorBlockWidth)
+      .attr("rx", 2)
+      .attr("ry", 2)
+      .attr("filter", "url(#xkcdify)")
+      .attr("x", 8 + legendXPadding)
+      .attr("y", 17 + xkcdCharHeight * i);
+    if (shouldDrawLogo) {
+      textLayer
+        .append("defs")
+        .append("clipPath")
+        .attr("id", `clip-circle-title-${item.text}`)
+        .append("circle")
+        .attr("r", logoSize / 2)
+        .attr(
+          "cx",
+          8 + legendXPadding + colorBlockWidth + legendXPadding + logoSize / 2
+        )
+        .attr("cy", 17 + xkcdCharHeight * i - 4 + logoSize / 2);
+      textLayer
+        .append("image")
+        .attr("x", 8 + legendXPadding + colorBlockWidth + legendXPadding)
+        .attr("y", 17 + xkcdCharHeight * i - 4)
+        .attr("height", logoSize)
+        .attr("width", logoSize)
+        .attr("href", item.logo)
+        .attr("clip-path", `url(#clip-circle-title-${item.text})`);
+    }
+    // draw text
+    textLayer
+      .append("text")
+      .style("font-size", "15px")
+      .style("fill", strokeColor)
+      .attr(
+        "x",
+        8 +
+          legendXPadding +
+          colorBlockWidth +
+          (shouldDrawLogo ? legendXPadding + logoSize : 0) +
+          6
+      )
+      .attr("y", 17 + xkcdCharHeight * i + 8)
+      .text(item.text);
+
+    maxTextLength = Math.max(item.text.length, maxTextLength);
+  });
+
+  let bboxWidth =
+    maxTextLength * (xkcdCharWidth + 0.5) + colorBlockWidth + legendXPadding;
+  // Because there is no `getBBox` method in nodejs env,
+  // we have to use it after validate function existed.
+  if (textLayer.node()?.getBBox) {
+    bboxWidth = textLayer.node()?.getBBox().width as number;
+  }
+  const backgroundWidth = Math.max(
+    bboxWidth + legendXPadding * 2,
+    maxTextLength * xkcdCharWidth +
+      colorBlockWidth +
+      legendXPadding * 2 +
+      6 +
+      (shouldDrawLogo ? legendXPadding + logoSize : 0)
+  );
+  const backgroundHeight = items.length * xkcdCharHeight + legendYPadding * 2;
+
+  // add background
+  backgroundLayer
+    .append("rect")
+    .style("fill", backgroundColor)
+    .attr("fill-opacity", 0.85)
+    .attr("stroke", strokeColor)
+    .attr("stroke-width", 2)
+    .attr("rx", 5)
+    .attr("ry", 5)
+    .attr("filter", "url(#xkcdify)")
+    .attr("width", backgroundWidth)
+    .attr("height", backgroundHeight)
+    .attr("x", 8)
+    .attr("y", 5);
+};
+
+export default drawLegend;
diff --git a/packages/xy-chart/utils/drawWatermark.ts b/packages/xy-chart/utils/drawWatermark.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e4b9ebb78159981291c8fe179262c16796d7b8e5
--- /dev/null
+++ b/packages/xy-chart/utils/drawWatermark.ts
@@ -0,0 +1,25 @@
+import { D3Selection } from "../types";
+
+const iconBase64 =
+  "data:image/png;base64,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";
+
+export const drawWatermark = (
+  selection: D3Selection,
+  chartWidth: number,
+  chartHeight: number
+) => {
+  selection
+    .append("text")
+    .style("font-size", "16px")
+    .style("fill", "#666666")
+    .attr("transform", `translate(${chartWidth - 50},${chartHeight + 40})`)
+    .attr("text-anchor", "middle")
+    .text("star-history.com");
+
+  selection
+    .append("image")
+    .attr("transform", `translate(${chartWidth - 135},${chartHeight + 24})`)
+    .attr("height", 20)
+    .attr("width", 20)
+    .attr("href", iconBase64);
+};
diff --git a/packages/xy-chart/utils/getFormatNumber.ts b/packages/xy-chart/utils/getFormatNumber.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0d010e1734753b004afede8fc6b985de89f6c5a
--- /dev/null
+++ b/packages/xy-chart/utils/getFormatNumber.ts
@@ -0,0 +1,19 @@
+export type NumberUnitType = 1 | 1000;
+
+export const getNumberFormatUnit = (n: number): NumberUnitType => {
+  if (n >= 300) {
+    return 1000;
+  }
+
+  return 1;
+};
+
+const getFormatNumber = (n: number, type: NumberUnitType = 1) => {
+  if (type === 1) {
+    return `${n}`;
+  }
+
+  return `${(n / 1000).toFixed(1)}k`;
+};
+
+export default getFormatNumber;
diff --git a/packages/xy-chart/utils/getFormatTimeline.ts b/packages/xy-chart/utils/getFormatTimeline.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3b5e12e16959b1463499b127c2f6e08091cdadef
--- /dev/null
+++ b/packages/xy-chart/utils/getFormatTimeline.ts
@@ -0,0 +1,59 @@
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+export type DurationUnitType = "day" | "week" | "month" | "year";
+
+export const getTimestampFormatUnit = (timestamp: number): DurationUnitType => {
+  let timelineUnit: DurationUnitType = "day";
+  if (dayjs.duration(timestamp).asYears() > 1) {
+    timelineUnit = "year";
+  } else if (dayjs.duration(timestamp).asMonths() > 1) {
+    timelineUnit = "month";
+  } else if (dayjs.duration(timestamp).asWeeks() > 1) {
+    timelineUnit = "week";
+  }
+  return timelineUnit;
+};
+
+const getFormatTimeline = (
+  timestamp: number,
+  type: DurationUnitType = "day"
+) => {
+  if (timestamp === 0) {
+    return "day one";
+  }
+
+  const seconds = Math.floor(timestamp / 1000);
+  const days = Math.floor(seconds / 60 / 60 / 24);
+  const weeks = Math.floor(days / 7);
+  const months = (days / 30).toFixed(0);
+  const years = (days / 365).toFixed(0);
+
+  if (type === "day") {
+    if (days === 1) {
+      return "a day";
+    }
+    return `${days} days`;
+  } else if (type === "week") {
+    if (weeks === 1) {
+      return "a week";
+    }
+    return `${weeks} weeks`;
+  } else if (type === "month") {
+    if (Number(months) === 1) {
+      return "a month";
+    }
+    return `${months} months`;
+  } else {
+    if (Number(years) === 1) {
+      return "a year";
+    }
+    return `${years} years`;
+  }
+};
+
+export default getFormatTimeline;
diff --git a/plugins/additionBuildPlugin.ts b/plugins/additionBuildPlugin.ts
new file mode 100644
index 0000000000000000000000000000000000000000..561327374cb3dd622737f4e945fb3fc1bb7f0467
--- /dev/null
+++ b/plugins/additionBuildPlugin.ts
@@ -0,0 +1,45 @@
+import copyExtensionFiles from "./scripts/copyExtensionFiles";
+import emptyDist from "./scripts/emptyDist";
+import generateSitemap from "./scripts/generateSitemap";
+
+const additionBuildPlugin = () => {
+  let envCommand = "";
+  let envMode = "";
+
+  return {
+    name: "addition-build-plugin",
+    config(config, { command, mode }) {
+      envCommand = command;
+      envMode = mode;
+
+      if (mode === "extension") {
+        config.root = "./src";
+        config.publicDir = "../public";
+        config.build = {
+          ...config.build,
+          outDir: "../dist",
+          rollupOptions: {
+            input: {
+              popup: "./src/extension/popup.html",
+            },
+          },
+        };
+      }
+    },
+    buildStart() {
+      // Empty the dist folder firstly to make sure the other script can work right.
+      emptyDist();
+    },
+    buildEnd() {
+      if (envCommand === "build") {
+        if (envMode === "extension") {
+          copyExtensionFiles();
+        } else {
+          generateSitemap();
+        }
+      }
+    },
+  };
+};
+
+export default additionBuildPlugin;
diff --git a/plugins/scripts/copyExtensionFiles.ts b/plugins/scripts/copyExtensionFiles.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a1b0495ae0e8834c0154abf2587ff27f01268dbb
--- /dev/null
+++ b/plugins/scripts/copyExtensionFiles.ts
@@ -0,0 +1,20 @@
+import { copyFileSync } from "fs";
+import { resolve } from "path";
+
+const copyExtensionFiles = () => {
+  try {
+    copyFileSync(
+      resolve(__dirname, "../../src/extension/background.js"),
+      resolve(__dirname, "../../dist/background.js")
+    );
+    copyFileSync(
+      resolve(__dirname, "../../src/extension/manifest.json"),
+      resolve(__dirname, "../../dist/manifest.json")
+    );
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export default copyExtensionFiles;
diff --git a/plugins/scripts/emptyDist.ts b/plugins/scripts/emptyDist.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d2a6714c46454d11fb40b60124cae14aab42b80c
--- /dev/null
+++ b/plugins/scripts/emptyDist.ts
@@ -0,0 +1,19 @@
+import { existsSync, mkdirSync, rmSync } from "fs";
+import { resolve } from "path";
+
+const emptyDist = () => {
+  try {
+    const distPath = resolve(__dirname, "../../dist");
+    if (existsSync(distPath)) {
+      rmSync(distPath, {
+        recursive: true,
+      });
+    }
+    mkdirSync(distPath);
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export default emptyDist;
diff --git a/plugins/scripts/generateSitemap.ts b/plugins/scripts/generateSitemap.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2ca31e6ab99ff5480840155ed2a42eed37648acf
--- /dev/null
+++ b/plugins/scripts/generateSitemap.ts
@@ -0,0 +1,62 @@
+import { readFileSync, writeFileSync } from "fs";
+import { resolve } from "path";
+
+interface Route {
+  url: string;
+  name: string;
+}
+
+const staticRoutes: Route[] = [
+  {
+    url: "/",
+    name: "Star History",
+  },
+  {
+    url: "/embed",
+    name: "Star History",
+  },
+  {
+    url: "/blog",
+    name: "Blog List",
+  },
+];
+
+const getBlogsRoutes = async (): Promise<Route[]> => {
+  const rawdata = readFileSync(
+    resolve(__dirname, "../../public/blog/data.json")
+  );
+  const blogs = JSON.parse(rawdata.toString());
+  const blogRoutes: Route[] = [];
+
+  for (const blog of blogs) {
+    blogRoutes.push({
+      url: `/blog/${blog.slug}`,
+      name: blog.title,
+    });
+  }
+
+  return blogRoutes;
+};
+
+const generateSitemap = async () => {
+  const routes = [...staticRoutes];
+  const blogRoutes = await getBlogsRoutes();
+  routes.push(...blogRoutes);
+  const baseUrl = "https://star-history.com";
+  const routeXMLTags: string[] = [];
+
+  for (const route of routes) {
+    routeXMLTags.push(`<url>
+  <loc>${baseUrl}${route.url}</loc>
+</url>`);
+  }
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+${routeXMLTags.join("\n")}
+</urlset>`;
+
+  writeFileSync(resolve(__dirname, "../../public/sitemap.xml"), xml);
+};
+
+export default generateSitemap;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..ddc08a0222cd04e3887dd5bab09e4213192e529c
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,2370 @@
+lockfileVersion: '6.0'
+
+dependencies:
+  '@tailwindcss/line-clamp':
+    specifier: ^0.4.0
+    version: 0.4.2(tailwindcss@3.0.23)
+  '@tailwindcss/typography':
+    specifier: ^0.5.1
+    version: 0.5.2(tailwindcss@3.0.23)
+  '@vueuse/head':
+    specifier: ^1.0.25
+    version: 1.0.25(vue@3.2.47)
+  axios:
+    specifier: ^1.0.0
+    version: 1.1.3
+  d3-axis:
+    specifier: ^1.0.12
+    version: 1.0.12
+  d3-scale:
+    specifier: ^3.2.0
+    version: 3.3.0
+  d3-selection:
+    specifier: ^1.4.1
+    version: 1.4.2
+  d3-shape:
+    specifier: ^1.3.7
+    version: 1.3.7
+  dayjs:
+    specifier: ^1.10.7
+    version: 1.11.0
+  lodash:
+    specifier: ^4.17.21
+    version: 4.17.21
+  marked:
+    specifier: ^4.0.16
+    version: 4.0.16
+  pinia:
+    specifier: ^2.0.11
+    version: 2.0.12(typescript@4.6.2)(vue@3.2.47)
+  tailwindcss:
+    specifier: ^3.0.19
+    version: 3.0.23(autoprefixer@10.4.13)(postcss@8.4.19)
+  typescript:
+    specifier: ^4.4.4
+    version: 4.6.2
+  vite:
+    specifier: ^2.8.0
+    version: 2.8.6
+  vue:
+    specifier: ^3.2.47
+    version: 3.2.47
+  vue-router:
+    specifier: '4'
+    version: 4.0.14(vue@3.2.47)
+  vue-tsc:
+    specifier: ^1.0.0
+    version: 1.0.9(typescript@4.6.2)
+
+devDependencies:
+  '@types/chrome':
+    specifier: 0.0.210
+    version: 0.0.210
+  '@types/d3-axis':
+    specifier: 3.0.2
+    version: 3.0.2
+  '@types/d3-scale':
+    specifier: 4.0.3
+    version: 4.0.3
+  '@types/d3-selection':
+    specifier: 1.4.3
+    version: 1.4.3
+  '@types/d3-shape':
+    specifier: 3.1.0
+    version: 3.1.0
+  '@types/lodash':
+    specifier: 4.14.191
+    version: 4.14.191
+  '@types/marked':
+    specifier: 4.0.7
+    version: 4.0.7
+  '@types/node':
+    specifier: 18.11.10
+    version: 18.11.10
+  '@typescript-eslint/eslint-plugin':
+    specifier: 5.42.0
+    version: 5.42.0(@typescript-eslint/parser@5.42.0)(eslint@8.26.0)(typescript@4.6.2)
+  '@typescript-eslint/parser':
+    specifier: 5.42.0
+    version: 5.42.0(eslint@8.26.0)(typescript@4.6.2)
+  '@vitejs/plugin-vue':
+    specifier: 2.3.4
+    version: 2.3.4(vite@2.8.6)(vue@3.2.47)
+  '@vue/eslint-config-typescript':
+    specifier: 11.0.2
+    version: 11.0.2(eslint-plugin-vue@9.7.0)(eslint@8.26.0)(typescript@4.6.2)
+  autoprefixer:
+    specifier: 10.4.13
+    version: 10.4.13(postcss@8.4.19)
+  eslint:
+    specifier: 8.26.0
+    version: 8.26.0
+  eslint-config-prettier:
+    specifier: 8.5.0
+    version: 8.5.0(eslint@8.26.0)
+  eslint-plugin-prettier:
+    specifier: 4.2.1
+    version: 4.2.1(eslint-config-prettier@8.5.0)(eslint@8.26.0)(prettier@2.7.1)
+  eslint-plugin-vue:
+    specifier: 9.7.0
+    version: 9.7.0(eslint@8.26.0)
+  postcss:
+    specifier: 8.4.19
+    version: 8.4.19
+  prettier:
+    specifier: 2.7.1
+    version: 2.7.1
+
+packages:
+
+  /@babel/code-frame@7.16.7:
+    resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.16.10
+    dev: false
+
+  /@babel/helper-validator-identifier@7.16.7:
+    resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/highlight@7.16.10:
+    resolution: {integrity: sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.16.7
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: false
+
+  /@babel/parser@7.17.8:
+    resolution: {integrity: sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.17.0
+
+  /@babel/types@7.17.0:
+    resolution: {integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.16.7
+      to-fast-properties: 2.0.0
+
+  /@eslint/eslintrc@1.3.3:
+    resolution: {integrity: sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.4.0
+      globals: 13.17.0
+      ignore: 5.2.0
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@humanwhocodes/config-array@0.11.7:
+    resolution: {integrity: sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 1.2.1
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@humanwhocodes/module-importer@1.0.1:
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+    dev: true
+
+  /@humanwhocodes/object-schema@1.2.1:
+    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
+    dev: true
+
+  /@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  /@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  /@nodelib/fs.walk@1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.13.0
+
+  /@tailwindcss/line-clamp@0.4.2(tailwindcss@3.0.23):
+    resolution: {integrity: sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==}
+    peerDependencies:
+      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
+    dependencies:
+      tailwindcss: 3.0.23(autoprefixer@10.4.13)(postcss@8.4.19)
+    dev: false
+
+  /@tailwindcss/typography@0.5.2(tailwindcss@3.0.23):
+    resolution: {integrity: sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      tailwindcss: 3.0.23(autoprefixer@10.4.13)(postcss@8.4.19)
+    dev: false
+
+  /@types/chrome@0.0.210:
+    resolution: {integrity: sha512-VSjQu1k6a/rAfuqR1Gi/oxHZj4+t6+LG+GobNI3ZWI6DQ+fmphNSF6TrLHG6BYK2bXc9Gb4c1uXFKRRVLaGl5Q==}
+    dependencies:
+      '@types/filesystem': 0.0.32
+      '@types/har-format': 1.2.8
+    dev: true
+
+  /@types/d3-axis@3.0.2:
+    resolution: {integrity: sha512-uGC7DBh0TZrU/LY43Fd8Qr+2ja1FKmH07q2FoZFHo1eYl8aj87GhfVoY1saJVJiq24rp1+wpI6BvQJMKgQm8oA==}
+    dependencies:
+      '@types/d3-selection': 1.4.3
+    dev: true
+
+  /@types/d3-path@1.0.9:
+    resolution: {integrity: sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==}
+    dev: true
+
+  /@types/d3-scale@4.0.3:
+    resolution: {integrity: sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==}
+    dependencies:
+      '@types/d3-time': 2.1.1
+    dev: true
+
+  /@types/d3-selection@1.4.3:
+    resolution: {integrity: sha512-GjKQWVZO6Sa96HiKO6R93VBE8DUW+DDkFpIMf9vpY5S78qZTlRRSNUsHr/afDpF7TvLDV7VxrUFOWW7vdIlYkA==}
+    dev: true
+
+  /@types/d3-shape@3.1.0:
+    resolution: {integrity: sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==}
+    dependencies:
+      '@types/d3-path': 1.0.9
+    dev: true
+
+  /@types/d3-time@2.1.1:
+    resolution: {integrity: sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==}
+    dev: true
+
+  /@types/filesystem@0.0.32:
+    resolution: {integrity: sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==}
+    dependencies:
+      '@types/filewriter': 0.0.29
+    dev: true
+
+  /@types/filewriter@0.0.29:
+    resolution: {integrity: sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==}
+    dev: true
+
+  /@types/har-format@1.2.8:
+    resolution: {integrity: sha512-OP6L9VuZNdskgNN3zFQQ54ceYD8OLq5IbqO4VK91ORLfOm7WdT/CiT/pHEBSQEqCInJ2y3O6iCm/zGtPElpgJQ==}
+    dev: true
+
+  /@types/json-schema@7.0.10:
+    resolution: {integrity: sha512-BLO9bBq59vW3fxCpD4o0N4U+DXsvwvIcl+jofw0frQo/GrBFC+/jRZj1E7kgp6dvTyNmA4y6JCV5Id/r3mNP5A==}
+    dev: true
+
+  /@types/lodash@4.14.191:
+    resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
+    dev: true
+
+  /@types/marked@4.0.7:
+    resolution: {integrity: sha512-eEAhnz21CwvKVW+YvRvcTuFKNU9CV1qH+opcgVK3pIMI6YZzDm6gc8o2vHjldFk6MGKt5pueSB7IOpvpx5Qekw==}
+    dev: true
+
+  /@types/node@18.11.10:
+    resolution: {integrity: sha512-juG3RWMBOqcOuXC643OAdSA525V44cVgGV6dUDuiFtss+8Fk5x1hI93Rsld43VeJVIeqlP9I7Fn9/qaVqoEAuQ==}
+    dev: true
+
+  /@types/parse-json@4.0.0:
+    resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+    dev: false
+
+  /@types/semver@7.3.13:
+    resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==}
+    dev: true
+
+  /@typescript-eslint/eslint-plugin@5.42.0(@typescript-eslint/parser@5.42.0)(eslint@8.26.0)(typescript@4.6.2):
+    resolution: {integrity: sha512-5TJh2AgL6+wpL8H/GTSjNb4WrjKoR2rqvFxR/DDTqYNk6uXn8BJMEcncLSpMbf/XV1aS0jAjYwn98uvVCiAywQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^5.0.0
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.42.0(eslint@8.26.0)(typescript@4.6.2)
+      '@typescript-eslint/scope-manager': 5.42.0
+      '@typescript-eslint/type-utils': 5.42.0(eslint@8.26.0)(typescript@4.6.2)
+      '@typescript-eslint/utils': 5.42.0(eslint@8.26.0)(typescript@4.6.2)
+      debug: 4.3.4
+      eslint: 8.26.0
+      ignore: 5.2.0
+      natural-compare-lite: 1.4.0
+      regexpp: 3.2.0
+      semver: 7.3.7
+      tsutils: 3.21.0(typescript@4.6.2)
+      typescript: 4.6.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser@5.42.0(eslint@8.26.0)(typescript@4.6.2):
+    resolution: {integrity: sha512-Ixh9qrOTDRctFg3yIwrLkgf33AHyEIn6lhyf5cCfwwiGtkWhNpVKlEZApi3inGQR/barWnY7qY8FbGKBO7p3JA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 5.42.0
+      '@typescript-eslint/types': 5.42.0
+      '@typescript-eslint/typescript-estree': 5.42.0(typescript@4.6.2)
+      debug: 4.3.4
+      eslint: 8.26.0
+      typescript: 4.6.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/scope-manager@5.42.0:
+    resolution: {integrity: sha512-l5/3IBHLH0Bv04y+H+zlcLiEMEMjWGaCX6WyHE5Uk2YkSGAMlgdUPsT/ywTSKgu9D1dmmKMYgYZijObfA39Wow==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.42.0
+      '@typescript-eslint/visitor-keys': 5.42.0
+    dev: true
+
+  /@typescript-eslint/type-utils@5.42.0(eslint@8.26.0)(typescript@4.6.2):
+    resolution: {integrity: sha512-HW14TXC45dFVZxnVW8rnUGnvYyRC0E/vxXShFCthcC9VhVTmjqOmtqj6H5rm9Zxv+ORxKA/1aLGD7vmlLsdlOg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 5.42.0(typescript@4.6.2)
+      '@typescript-eslint/utils': 5.42.0(eslint@8.26.0)(typescript@4.6.2)
+      debug: 4.3.4
+      eslint: 8.26.0
+      tsutils: 3.21.0(typescript@4.6.2)
+      typescript: 4.6.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/types@5.42.0:
+    resolution: {integrity: sha512-t4lzO9ZOAUcHY6bXQYRuu+3SSYdD9TS8ooApZft4WARt4/f2Cj/YpvbTe8A4GuhT4bNW72goDMOy7SW71mZwGw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree@5.42.0(typescript@4.6.2):
+    resolution: {integrity: sha512-2O3vSq794x3kZGtV7i4SCWZWCwjEtkWfVqX4m5fbUBomOsEOyd6OAD1qU2lbvV5S8tgy/luJnOYluNyYVeOTTg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 5.42.0
+      '@typescript-eslint/visitor-keys': 5.42.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.3.7
+      tsutils: 3.21.0(typescript@4.6.2)
+      typescript: 4.6.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils@5.42.0(eslint@8.26.0)(typescript@4.6.2):
+    resolution: {integrity: sha512-JZ++3+h1vbeG1NUECXQZE3hg0kias9kOtcQr3+JVQ3whnjvKuMyktJAAIj6743OeNPnGBmjj7KEmiDL7qsdnCQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@types/json-schema': 7.0.10
+      '@types/semver': 7.3.13
+      '@typescript-eslint/scope-manager': 5.42.0
+      '@typescript-eslint/types': 5.42.0
+      '@typescript-eslint/typescript-estree': 5.42.0(typescript@4.6.2)
+      eslint: 8.26.0
+      eslint-scope: 5.1.1
+      eslint-utils: 3.0.0(eslint@8.26.0)
+      semver: 7.3.7
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/visitor-keys@5.42.0:
+    resolution: {integrity: sha512-QHbu5Hf/2lOEOwy+IUw0GoSCuAzByTAWWrOTKzTzsotiUnWFpuKnXcAhC9YztAf2EElQ0VvIK+pHJUPkM0q7jg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.42.0
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
+  /@unhead/dom@1.0.21:
+    resolution: {integrity: sha512-rwVz7NWMdQ8kSTXv/WOhB0eTWYFD2SQwQ/J109IEqNUN9X3pIwcvdvlXMCG+qhJGFyiIgOl2X+W0cE+u/IiLVA==}
+    dependencies:
+      '@unhead/schema': 1.0.21
+    dev: false
+
+  /@unhead/schema@1.0.21:
+    resolution: {integrity: sha512-amYg6vJ37xUhnL6bvL4S3lz6yDs5lWeqJu63/3a5bxH3Dq0WPJ+kdhpUXI+4enoNaWvLvm860WXUOtKr5D+DMg==}
+    dependencies:
+      '@zhead/schema': 1.1.0
+      hookable: 5.4.2
+    dev: false
+
+  /@unhead/ssr@1.0.21:
+    resolution: {integrity: sha512-QWy+vKZWVb+XfHl/B/rEoniMGFpDjXiYBkjJZyuf+9By8DzQUscMaTv14neW1ZR6pq56c4B7Tp1N3Lve8SW+rA==}
+    dependencies:
+      '@unhead/schema': 1.0.21
+    dev: false
+
+  /@unhead/vue@1.0.21(vue@3.2.47):
+    resolution: {integrity: sha512-UCwgY4MbQEnFUo+/xmzBPK3PjC+oeCCzSsgK6eLk3vUC8Cuarrvw06wy8s0cO94DkpAi56Ih9oRWA16a/tih1A==}
+    peerDependencies:
+      vue: '>=2.7 || >=3'
+    dependencies:
+      '@unhead/schema': 1.0.21
+      hookable: 5.4.2
+      vue: 3.2.47
+    dev: false
+
+  /@vitejs/plugin-vue@2.3.4(vite@2.8.6)(vue@3.2.47):
+    resolution: {integrity: sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      vite: ^2.5.10
+      vue: ^3.2.25
+    dependencies:
+      vite: 2.8.6
+      vue: 3.2.47
+    dev: true
+
+  /@volar/language-core@1.0.9:
+    resolution: {integrity: sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw==}
+    dependencies:
+      '@volar/source-map': 1.0.9
+      '@vue/reactivity': 3.2.41
+      muggle-string: 0.1.0
+    dev: false
+
+  /@volar/source-map@1.0.9:
+    resolution: {integrity: sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ==}
+    dependencies:
+      muggle-string: 0.1.0
+    dev: false
+
+  /@volar/typescript@1.0.9:
+    resolution: {integrity: sha512-dVziu+ShQUWuMukM6bvK2v2O446/gG6l1XkTh2vfkccw1IzjfbiP1TWQoNo1ipTfZOtu5YJGYAx+o5HNrGXWfQ==}
+    dependencies:
+      '@volar/language-core': 1.0.9
+    dev: false
+
+  /@volar/vue-language-core@1.0.9:
+    resolution: {integrity: sha512-tofNoR8ShPFenHT1YVMuvoXtXWwoQE+fiXVqSmW0dSKZqEDjWQ3YeXSd0a6aqyKaIbvR7kWWGp34WbpQlwf9Ww==}
+    dependencies:
+      '@volar/language-core': 1.0.9
+      '@volar/source-map': 1.0.9
+      '@vue/compiler-dom': 3.2.41
+      '@vue/compiler-sfc': 3.2.41
+      '@vue/reactivity': 3.2.41
+      '@vue/shared': 3.2.41
+      minimatch: 5.1.0
+      vue-template-compiler: 2.7.13
+    dev: false
+
+  /@volar/vue-typescript@1.0.9:
+    resolution: {integrity: sha512-ZLe4y9YNbviACa7uAMCilzxA76gbbSlKfjspXBzk6fCobd8QCIig+VyDYcjANIlm2HhgSCX8jYTzhCKlegh4mw==}
+    dependencies:
+      '@volar/typescript': 1.0.9
+      '@volar/vue-language-core': 1.0.9
+    dev: false
+
+  /@vue/compiler-core@3.2.41:
+    resolution: {integrity: sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==}
+    dependencies:
+      '@babel/parser': 7.17.8
+      '@vue/shared': 3.2.41
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: false
+
+  /@vue/compiler-core@3.2.47:
+    resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
+    dependencies:
+      '@babel/parser': 7.17.8
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+
+  /@vue/compiler-dom@3.2.41:
+    resolution: {integrity: sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==}
+    dependencies:
+      '@vue/compiler-core': 3.2.41
+      '@vue/shared': 3.2.41
+    dev: false
+
+  /@vue/compiler-dom@3.2.47:
+    resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
+    dependencies:
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+
+  /@vue/compiler-sfc@3.2.41:
+    resolution: {integrity: sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==}
+    dependencies:
+      '@babel/parser': 7.17.8
+      '@vue/compiler-core': 3.2.41
+      '@vue/compiler-dom': 3.2.41
+      '@vue/compiler-ssr': 3.2.41
+      '@vue/reactivity-transform': 3.2.41
+      '@vue/shared': 3.2.41
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.19
+      source-map: 0.6.1
+    dev: false
+
+  /@vue/compiler-sfc@3.2.47:
+    resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
+    dependencies:
+      '@babel/parser': 7.17.8
+      '@vue/compiler-core': 3.2.47
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/reactivity-transform': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.19
+      source-map: 0.6.1
+
+  /@vue/compiler-ssr@3.2.41:
+    resolution: {integrity: sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.41
+      '@vue/shared': 3.2.41
+    dev: false
+
+  /@vue/compiler-ssr@3.2.47:
+    resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/shared': 3.2.47
+
+  /@vue/devtools-api@6.1.3:
+    resolution: {integrity: sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg==}
+    dev: false
+
+  /@vue/eslint-config-typescript@11.0.2(eslint-plugin-vue@9.7.0)(eslint@8.26.0)(typescript@4.6.2):
+    resolution: {integrity: sha512-EiKud1NqlWmSapBFkeSrE994qpKx7/27uCGnhdqzllYDpQZroyX/O6bwjEpeuyKamvLbsGdO6PMR2faIf+zFnw==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
+      eslint-plugin-vue: ^9.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 5.42.0(@typescript-eslint/parser@5.42.0)(eslint@8.26.0)(typescript@4.6.2)
+      '@typescript-eslint/parser': 5.42.0(eslint@8.26.0)(typescript@4.6.2)
+      eslint: 8.26.0
+      eslint-plugin-vue: 9.7.0(eslint@8.26.0)
+      typescript: 4.6.2
+      vue-eslint-parser: 9.1.0(eslint@8.26.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@vue/reactivity-transform@3.2.41:
+    resolution: {integrity: sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==}
+    dependencies:
+      '@babel/parser': 7.17.8
+      '@vue/compiler-core': 3.2.41
+      '@vue/shared': 3.2.41
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+    dev: false
+
+  /@vue/reactivity-transform@3.2.47:
+    resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
+    dependencies:
+      '@babel/parser': 7.17.8
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+
+  /@vue/reactivity@3.2.41:
+    resolution: {integrity: sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==}
+    dependencies:
+      '@vue/shared': 3.2.41
+    dev: false
+
+  /@vue/reactivity@3.2.47:
+    resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==}
+    dependencies:
+      '@vue/shared': 3.2.47
+
+  /@vue/runtime-core@3.2.47:
+    resolution: {integrity: sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==}
+    dependencies:
+      '@vue/reactivity': 3.2.47
+      '@vue/shared': 3.2.47
+
+  /@vue/runtime-dom@3.2.47:
+    resolution: {integrity: sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==}
+    dependencies:
+      '@vue/runtime-core': 3.2.47
+      '@vue/shared': 3.2.47
+      csstype: 2.6.20
+
+  /@vue/server-renderer@3.2.47(vue@3.2.47):
+    resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==}
+    peerDependencies:
+      vue: 3.2.47
+    dependencies:
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/shared': 3.2.47
+      vue: 3.2.47
+
+  /@vue/shared@3.2.41:
+    resolution: {integrity: sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==}
+    dev: false
+
+  /@vue/shared@3.2.47:
+    resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
+
+  /@vueuse/head@1.0.25(vue@3.2.47):
+    resolution: {integrity: sha512-ACfRqD3bbh92cIzDDR1CmqShXCXhQv/EUUcaDMYaexA4ulorYHd+2Yo5/ljoS4jDoMgsqBSP0XJZT3nySMB5gw==}
+    peerDependencies:
+      vue: '>=2.7 || >=3'
+    dependencies:
+      '@unhead/dom': 1.0.21
+      '@unhead/schema': 1.0.21
+      '@unhead/ssr': 1.0.21
+      '@unhead/vue': 1.0.21(vue@3.2.47)
+      vue: 3.2.47
+    dev: false
+
+  /@zhead/schema@1.1.0:
+    resolution: {integrity: sha512-hEtK+hUAKS3w1+F++m6EeZ6bWeLDXraqN2nCyRVIP5vvR3bWjXVP9OM9x7Pmn7Hp6T7FKmsG2C8rvouQU2806w==}
+    dev: false
+
+  /acorn-jsx@5.3.2(acorn@8.8.0):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.8.0
+    dev: true
+
+  /acorn-node@1.8.2:
+    resolution: {integrity: sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==}
+    dependencies:
+      acorn: 7.4.1
+      acorn-walk: 7.2.0
+      xtend: 4.0.2
+    dev: false
+
+  /acorn-walk@7.2.0:
+    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
+  /acorn@7.4.1:
+    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: false
+
+  /acorn@8.8.0:
+    resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: false
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+
+  /anymatch@3.1.2:
+    resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: false
+
+  /arg@5.0.1:
+    resolution: {integrity: sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==}
+    dev: false
+
+  /argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
+  /array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
+  /autoprefixer@10.4.13(postcss@8.4.19):
+    resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.21.4
+      caniuse-lite: 1.0.30001427
+      fraction.js: 4.2.0
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.19
+      postcss-value-parser: 4.2.0
+
+  /axios@1.1.3:
+    resolution: {integrity: sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==}
+    dependencies:
+      follow-redirects: 1.15.2
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    dev: true
+
+  /brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: true
+
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: false
+
+  /braces@3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+
+  /browserslist@4.21.4:
+    resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001427
+      electron-to-chromium: 1.4.256
+      node-releases: 2.0.6
+      update-browserslist-db: 1.0.9(browserslist@4.21.4)
+
+  /callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  /camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+    dev: false
+
+  /caniuse-lite@1.0.30001427:
+    resolution: {integrity: sha512-lfXQ73oB9c8DP5Suxaszm+Ta2sr/4tf8+381GkIm1MLj/YdLf+rEDyDSRCzeltuyTVGm+/s18gdZ0q+Wmp8VsQ==}
+
+  /chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: false
+
+  /chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  /chokidar@3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.2
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: false
+
+  /color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: false
+
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+
+  /color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: false
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
+
+  /concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: true
+
+  /cosmiconfig@7.0.1:
+    resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: false
+
+  /cross-spawn@7.0.3:
+    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: true
+
+  /cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  /csstype@2.6.20:
+    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
+
+  /d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+    dependencies:
+      internmap: 1.0.1
+    dev: false
+
+  /d3-axis@1.0.12:
+    resolution: {integrity: sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==}
+    dev: false
+
+  /d3-color@2.0.0:
+    resolution: {integrity: sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==}
+    dev: false
+
+  /d3-format@2.0.0:
+    resolution: {integrity: sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==}
+    dev: false
+
+  /d3-interpolate@2.0.1:
+    resolution: {integrity: sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==}
+    dependencies:
+      d3-color: 2.0.0
+    dev: false
+
+  /d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+    dev: false
+
+  /d3-scale@3.3.0:
+    resolution: {integrity: sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==}
+    dependencies:
+      d3-array: 2.12.1
+      d3-format: 2.0.0
+      d3-interpolate: 2.0.1
+      d3-time: 2.1.1
+      d3-time-format: 3.0.0
+    dev: false
+
+  /d3-selection@1.4.2:
+    resolution: {integrity: sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==}
+    dev: false
+
+  /d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+    dependencies:
+      d3-path: 1.0.9
+    dev: false
+
+  /d3-time-format@3.0.0:
+    resolution: {integrity: sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==}
+    dependencies:
+      d3-time: 2.1.1
+    dev: false
+
+  /d3-time@2.1.1:
+    resolution: {integrity: sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==}
+    dependencies:
+      d3-array: 2.12.1
+    dev: false
+
+  /dayjs@1.11.0:
+    resolution: {integrity: sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug==}
+    dev: false
+
+  /de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+    dev: false
+
+  /debug@4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
+
+  /defined@1.0.0:
+    resolution: {integrity: sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=}
+    dev: false
+
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
+  /detective@5.2.0:
+    resolution: {integrity: sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+    dependencies:
+      acorn-node: 1.8.2
+      defined: 1.0.0
+      minimist: 1.2.5
+    dev: false
+
+  /didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+    dev: false
+
+  /dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-type: 4.0.0
+    dev: true
+
+  /dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+    dev: false
+
+  /doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
+  /electron-to-chromium@1.4.256:
+    resolution: {integrity: sha512-x+JnqyluoJv8I0U9gVe+Sk2st8vF0CzMt78SXxuoWCooLLY2k5VerIBdpvG7ql6GKI4dzNnPjmqgDJ76EdaAKw==}
+
+  /error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+    dependencies:
+      is-arrayish: 0.2.1
+    dev: false
+
+  /esbuild-android-64@0.14.27:
+    resolution: {integrity: sha512-LuEd4uPuj/16Y8j6kqy3Z2E9vNY9logfq8Tq+oTE2PZVuNs3M1kj5Qd4O95ee66yDGb3isaOCV7sOLDwtMfGaQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-android-arm64@0.14.27:
+    resolution: {integrity: sha512-E8Ktwwa6vX8q7QeJmg8yepBYXaee50OdQS3BFtEHKrzbV45H4foMOeEE7uqdjGQZFBap5VAqo7pvjlyA92wznQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-darwin-64@0.14.27:
+    resolution: {integrity: sha512-czw/kXl/1ZdenPWfw9jDc5iuIYxqUxgQ/Q+hRd4/3udyGGVI31r29LCViN2bAJgGvQkqyLGVcG03PJPEXQ5i2g==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-darwin-arm64@0.14.27:
+    resolution: {integrity: sha512-BEsv2U2U4o672oV8+xpXNxN9bgqRCtddQC6WBh4YhXKDcSZcdNh7+6nS+DM2vu7qWIWNA4JbRG24LUUYXysimQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-freebsd-64@0.14.27:
+    resolution: {integrity: sha512-7FeiFPGBo+ga+kOkDxtPmdPZdayrSzsV9pmfHxcyLKxu+3oTcajeZlOO1y9HW+t5aFZPiv7czOHM4KNd0tNwCA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-freebsd-arm64@0.14.27:
+    resolution: {integrity: sha512-8CK3++foRZJluOWXpllG5zwAVlxtv36NpHfsbWS7TYlD8S+QruXltKlXToc/5ZNzBK++l6rvRKELu/puCLc7jA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-linux-32@0.14.27:
+    resolution: {integrity: sha512-qhNYIcT+EsYSBClZ5QhLzFzV5iVsP1YsITqblSaztr3+ZJUI+GoK8aXHyzKd7/CKKuK93cxEMJPpfi1dfsOfdw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-linux-64@0.14.27:
+    resolution: {integrity: sha512-ESjck9+EsHoTaKWlFKJpPZRN26uiav5gkI16RuI8WBxUdLrrAlYuYSndxxKgEn1csd968BX/8yQZATYf/9+/qg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-linux-arm64@0.14.27:
+    resolution: {integrity: sha512-no6Mi17eV2tHlJnqBHRLekpZ2/VYx+NfGxKcBE/2xOMYwctsanCaXxw4zapvNrGE9X38vefVXLz6YCF8b1EHiQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-linux-arm@0.14.27:
+    resolution: {integrity: sha512-JnnmgUBdqLQO9hoNZQqNHFWlNpSX82vzB3rYuCJMhtkuaWQEmQz6Lec1UIxJdC38ifEghNTBsF9bbe8dFilnCw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-linux-mips64le@0.14.27:
+    resolution: {integrity: sha512-NolWP2uOvIJpbwpsDbwfeExZOY1bZNlWE/kVfkzLMsSgqeVcl5YMen/cedRe9mKnpfLli+i0uSp7N+fkKNU27A==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-linux-ppc64le@0.14.27:
+    resolution: {integrity: sha512-/7dTjDvXMdRKmsSxKXeWyonuGgblnYDn0MI1xDC7J1VQXny8k1qgNp6VmrlsawwnsymSUUiThhkJsI+rx0taNA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-linux-riscv64@0.14.27:
+    resolution: {integrity: sha512-D+aFiUzOJG13RhrSmZgrcFaF4UUHpqj7XSKrIiCXIj1dkIkFqdrmqMSOtSs78dOtObWiOrFCDDzB24UyeEiNGg==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-linux-s390x@0.14.27:
+    resolution: {integrity: sha512-CD/D4tj0U4UQjELkdNlZhQ8nDHU5rBn6NGp47Hiz0Y7/akAY5i0oGadhEIg0WCY/HYVXFb3CsSPPwaKcTOW3bg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-netbsd-64@0.14.27:
+    resolution: {integrity: sha512-h3mAld69SrO1VoaMpYl3a5FNdGRE/Nqc+E8VtHOag4tyBwhCQXxtvDDOAKOUQexBGca0IuR6UayQ4ntSX5ij1Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-openbsd-64@0.14.27:
+    resolution: {integrity: sha512-xwSje6qIZaDHXWoPpIgvL+7fC6WeubHHv18tusLYMwL+Z6bEa4Pbfs5IWDtQdHkArtfxEkIZz77944z8MgDxGw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-sunos-64@0.14.27:
+    resolution: {integrity: sha512-/nBVpWIDjYiyMhuqIqbXXsxBc58cBVH9uztAOIfWShStxq9BNBik92oPQPJ57nzWXRNKQUEFWr4Q98utDWz7jg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-windows-32@0.14.27:
+    resolution: {integrity: sha512-Q9/zEjhZJ4trtWhFWIZvS/7RUzzi8rvkoaS9oiizkHTTKd8UxFwn/Mm2OywsAfYymgUYm8+y2b+BKTNEFxUekw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-windows-64@0.14.27:
+    resolution: {integrity: sha512-b3y3vTSl5aEhWHK66ngtiS/c6byLf6y/ZBvODH1YkBM+MGtVL6jN38FdHUsZasCz9gFwYs/lJMVY9u7GL6wfYg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /esbuild-windows-arm64@0.14.27:
+    resolution: {integrity: sha512-I/reTxr6TFMcR5qbIkwRGvldMIaiBu2+MP0LlD7sOlNXrfqIl9uNjsuxFPGEG4IRomjfQ5q8WT+xlF/ySVkqKg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /esbuild@0.14.27:
+    resolution: {integrity: sha512-MZQt5SywZS3hA9fXnMhR22dv0oPGh6QtjJRIYbgL1AeqAoQZE+Qn5ppGYQAoHv/vq827flj4tIJ79Mrdiwk46Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      esbuild-android-64: 0.14.27
+      esbuild-android-arm64: 0.14.27
+      esbuild-darwin-64: 0.14.27
+      esbuild-darwin-arm64: 0.14.27
+      esbuild-freebsd-64: 0.14.27
+      esbuild-freebsd-arm64: 0.14.27
+      esbuild-linux-32: 0.14.27
+      esbuild-linux-64: 0.14.27
+      esbuild-linux-arm: 0.14.27
+      esbuild-linux-arm64: 0.14.27
+      esbuild-linux-mips64le: 0.14.27
+      esbuild-linux-ppc64le: 0.14.27
+      esbuild-linux-riscv64: 0.14.27
+      esbuild-linux-s390x: 0.14.27
+      esbuild-netbsd-64: 0.14.27
+      esbuild-openbsd-64: 0.14.27
+      esbuild-sunos-64: 0.14.27
+      esbuild-windows-32: 0.14.27
+      esbuild-windows-64: 0.14.27
+      esbuild-windows-arm64: 0.14.27
+
+  /escalade@3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+    engines: {node: '>=6'}
+
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: false
+
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /eslint-config-prettier@8.5.0(eslint@8.26.0):
+    resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      eslint: 8.26.0
+    dev: true
+
+  /eslint-plugin-prettier@4.2.1(eslint-config-prettier@8.5.0)(eslint@8.26.0)(prettier@2.7.1):
+    resolution: {integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      eslint: '>=7.28.0'
+      eslint-config-prettier: '*'
+      prettier: '>=2.0.0'
+    peerDependenciesMeta:
+      eslint-config-prettier:
+        optional: true
+    dependencies:
+      eslint: 8.26.0
+      eslint-config-prettier: 8.5.0(eslint@8.26.0)
+      prettier: 2.7.1
+      prettier-linter-helpers: 1.0.0
+    dev: true
+
+  /eslint-plugin-vue@9.7.0(eslint@8.26.0):
+    resolution: {integrity: sha512-DrOO3WZCZEwcLsnd3ohFwqCoipGRSTKTBTnLwdhqAbYZtzWl0o7D+D8ZhlmiZvABKTEl8AFsqH1GHGdybyoQmw==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      eslint: 8.26.0
+      eslint-utils: 3.0.0(eslint@8.26.0)
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.0.9
+      semver: 7.3.7
+      vue-eslint-parser: 9.1.0(eslint@8.26.0)
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-scope@5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+    dev: true
+
+  /eslint-scope@7.1.1:
+    resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
+  /eslint-utils@3.0.0(eslint@8.26.0):
+    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
+    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
+    peerDependencies:
+      eslint: '>=5'
+    dependencies:
+      eslint: 8.26.0
+      eslint-visitor-keys: 2.1.0
+    dev: true
+
+  /eslint-visitor-keys@2.1.0:
+    resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /eslint-visitor-keys@3.3.0:
+    resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint@8.26.0:
+    resolution: {integrity: sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      '@eslint/eslintrc': 1.3.3
+      '@humanwhocodes/config-array': 0.11.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.1.1
+      eslint-utils: 3.0.0(eslint@8.26.0)
+      eslint-visitor-keys: 3.3.0
+      espree: 9.4.0
+      esquery: 1.4.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.17.0
+      grapheme-splitter: 1.0.4
+      ignore: 5.2.0
+      import-fresh: 3.3.0
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-sdsl: 4.1.4
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.1
+      regexpp: 3.2.0
+      strip-ansi: 6.0.1
+      strip-json-comments: 3.1.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /espree@9.4.0:
+    resolution: {integrity: sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.8.0
+      acorn-jsx: 5.3.2(acorn@8.8.0)
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
+  /esquery@1.4.0:
+    resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /estraverse@4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
+    dev: true
+
+  /estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+    dev: true
+
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
+
+  /fast-diff@1.2.0:
+    resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
+    dev: true
+
+  /fast-glob@3.2.11:
+    resolution: {integrity: sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.4
+
+  /fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
+
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
+
+  /fastq@1.13.0:
+    resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
+    dependencies:
+      reusify: 1.0.4
+
+  /file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flat-cache: 3.0.4
+    dev: true
+
+  /fill-range@7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+
+  /find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /flat-cache@3.0.4:
+    resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flatted: 3.2.5
+      rimraf: 3.0.2
+    dev: true
+
+  /flatted@3.2.5:
+    resolution: {integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==}
+    dev: true
+
+  /follow-redirects@1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    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.2.0:
+    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /function-bind@1.1.1:
+    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+
+  /glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+
+  /glob@7.2.0:
+    resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /globals@13.17.0:
+    resolution: {integrity: sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
+  /globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.2.11
+      ignore: 5.2.0
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: true
+
+  /grapheme-splitter@1.0.4:
+    resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
+    dev: true
+
+  /has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  /has@1.0.3:
+    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
+    engines: {node: '>= 0.4.0'}
+    dependencies:
+      function-bind: 1.1.1
+
+  /he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: false
+
+  /hookable@5.4.2:
+    resolution: {integrity: sha512-6rOvaUiNKy9lET1X0ECnyZ5O5kSV0PJbtA5yZUgdEF7fGJEVwSLSislltyt7nFwVVALYHQJtfGeAR2Y0A0uJkg==}
+    dev: false
+
+  /ignore@5.2.0:
+    resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /import-fresh@3.3.0:
+    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  /imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
+
+  /internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+    dev: false
+
+  /is-arrayish@0.2.1:
+    resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
+    dev: false
+
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: false
+
+  /is-core-module@2.8.1:
+    resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==}
+    dependencies:
+      has: 1.0.3
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=}
+    engines: {node: '>=0.10.0'}
+
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  /is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true
+
+  /js-sdsl@4.1.4:
+    resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==}
+    dev: true
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: false
+
+  /js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
+  /json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+    dev: false
+
+  /json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
+
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
+  /levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /lilconfig@2.0.4:
+    resolution: {integrity: sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: false
+
+  /locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=}
+    dev: false
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=}
+    dev: false
+
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  /lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+    dependencies:
+      yallist: 4.0.0
+    dev: true
+
+  /magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+    dependencies:
+      sourcemap-codec: 1.4.8
+
+  /marked@4.0.16:
+    resolution: {integrity: sha512-wahonIQ5Jnyatt2fn8KqF/nIqZM8mh3oRu2+l5EANGMhu6RFjiSG52QNE2eWzFMI94HqYSgN184NurgNG6CztA==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    dev: false
+
+  /merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  /micromatch@4.0.4:
+    resolution: {integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.3.1
+
+  /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:
+      brace-expansion: 1.1.11
+    dev: true
+
+  /minimatch@5.1.0:
+    resolution: {integrity: sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: false
+
+  /minimist@1.2.5:
+    resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
+    dev: false
+
+  /ms@2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true
+
+  /muggle-string@0.1.0:
+    resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==}
+    dev: false
+
+  /nanoid@3.3.4:
+    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  /natural-compare-lite@1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
+    dev: true
+
+  /natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
+
+  /node-releases@2.0.6:
+    resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
+
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  /nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: true
+
+  /object-hash@2.2.0:
+    resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
+    engines: {node: '>= 6'}
+    dev: false
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /optionator@0.9.1:
+    resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.3
+    dev: true
+
+  /p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
+  /parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+
+  /parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+    dev: false
+
+  /path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  /path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  /picocolors@1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  /pinia@2.0.12(typescript@4.6.2)(vue@3.2.47):
+    resolution: {integrity: sha512-tUeuYGFrLU5irmGyRAIxp35q1OTcZ8sKpGT4XkPeVcG35W4R6cfXDbCGexzmVqH5lTQJJTXXbNGutIu9yS5yew==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 6.1.3
+      typescript: 4.6.2
+      vue: 3.2.47
+      vue-demi: 0.12.4(vue@3.2.47)
+    dev: false
+
+  /postcss-js@4.0.0(postcss@8.4.19):
+    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.3.3
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.19
+    dev: false
+
+  /postcss-load-config@3.1.3:
+    resolution: {integrity: sha512-5EYgaM9auHGtO//ljHH+v/aC/TQ5LHXtL7bQajNAUBKUVKiYE8rYpFms7+V26D9FncaGe2zwCoPQsFKb5zF/Hw==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.0.4
+      yaml: 1.10.2
+    dev: false
+
+  /postcss-nested@5.0.6(postcss@8.4.19):
+    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.19
+      postcss-selector-parser: 6.0.9
+    dev: false
+
+  /postcss-selector-parser@6.0.9:
+    resolution: {integrity: sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  /postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  /postcss@8.4.19:
+    resolution: {integrity: sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
+  /prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      fast-diff: 1.2.0
+    dev: true
+
+  /prettier@2.7.1:
+    resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
+  /punycode@2.1.1:
+    resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  /quick-lru@5.1.1:
+    resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: false
+
+  /regexpp@3.2.0:
+    resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  /resolve@1.22.0:
+    resolution: {integrity: sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.8.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  /reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  /rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    hasBin: true
+    dependencies:
+      glob: 7.2.0
+    dev: true
+
+  /rollup@2.70.1:
+    resolution: {integrity: sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  /run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
+
+  /semver@7.3.7:
+    resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+    dev: true
+
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /source-map-js@1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  /sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+    dev: true
+
+  /strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: false
+
+  /supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  /tailwindcss@3.0.23(autoprefixer@10.4.13)(postcss@8.4.19):
+    resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+    peerDependencies:
+      autoprefixer: ^10.0.2
+      postcss: ^8.0.9
+    dependencies:
+      arg: 5.0.1
+      autoprefixer: 10.4.13(postcss@8.4.19)
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      color-name: 1.1.4
+      cosmiconfig: 7.0.1
+      detective: 5.2.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.2.11
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      object-hash: 2.2.0
+      postcss: 8.4.19
+      postcss-js: 4.0.0(postcss@8.4.19)
+      postcss-load-config: 3.1.3
+      postcss-nested: 5.0.6(postcss@8.4.19)
+      postcss-selector-parser: 6.0.9
+      postcss-value-parser: 4.2.0
+      quick-lru: 5.1.1
+      resolve: 1.22.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
+  /text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+    dev: true
+
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+
+  /tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+    dev: true
+
+  /tsutils@3.21.0(typescript@4.6.2):
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+    dependencies:
+      tslib: 1.14.1
+      typescript: 4.6.2
+    dev: true
+
+  /type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+    dev: true
+
+  /type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /typescript@4.6.2:
+    resolution: {integrity: sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+
+  /update-browserslist-db@1.0.9(browserslist@4.21.4):
+    resolution: {integrity: sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.4
+      escalade: 3.1.1
+      picocolors: 1.0.0
+
+  /uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.1.1
+    dev: true
+
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  /vite@2.8.6:
+    resolution: {integrity: sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==}
+    engines: {node: '>=12.2.0'}
+    hasBin: true
+    peerDependencies:
+      less: '*'
+      sass: '*'
+      stylus: '*'
+    peerDependenciesMeta:
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+    dependencies:
+      esbuild: 0.14.27
+      postcss: 8.4.19
+      resolve: 1.22.0
+      rollup: 2.70.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  /vue-demi@0.12.4(vue@3.2.47):
+    resolution: {integrity: sha512-ztPDkFt0TSUdoq1ZI6oD730vgztBkiByhUW7L1cOTebiSBqSYfSQgnhYakYigBkyAybqCTH7h44yZuDJf2xILQ==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
+  /vue-eslint-parser@9.1.0(eslint@8.26.0):
+    resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 8.26.0
+      eslint-scope: 7.1.1
+      eslint-visitor-keys: 3.3.0
+      espree: 9.4.0
+      esquery: 1.4.0
+      lodash: 4.17.21
+      semver: 7.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vue-router@4.0.14(vue@3.2.47):
+    resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.1.3
+      vue: 3.2.47
+    dev: false
+
+  /vue-template-compiler@2.7.13:
+    resolution: {integrity: sha512-jYM6TClwDS9YqP48gYrtAtaOhRKkbYmbzE+Q51gX5YDr777n7tNI/IZk4QV4l/PjQPNh/FVa/E92sh/RqKMrog==}
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+    dev: false
+
+  /vue-tsc@1.0.9(typescript@4.6.2):
+    resolution: {integrity: sha512-vRmHD1K6DmBymNhoHjQy/aYKTRQNLGOu2/ESasChG9Vy113K6CdP0NlhR0bzgFJfv2eFB9Ez/9L5kIciUajBxQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      '@volar/vue-language-core': 1.0.9
+      '@volar/vue-typescript': 1.0.9
+      typescript: 4.6.2
+    dev: false
+
+  /vue@3.2.47:
+    resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-sfc': 3.2.47
+      '@vue/runtime-dom': 3.2.47
+      '@vue/server-renderer': 3.2.47(vue@3.2.47)
+      '@vue/shared': 3.2.47
+
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: true
+
+  /word-wrap@1.2.3:
+    resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
+
+  /xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+    dev: false
+
+  /yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+    dev: true
+
+  /yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+    dev: false
+
+  /yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..12a703d900da8159c30e75acbd2c4d87ae177f62
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/public/blog/add-a-live-star-history-chart-to-your-github-readme.md b/public/blog/add-a-live-star-history-chart-to-your-github-readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..1e4d949708a1437199148a16b2c4ce82334c4387
--- /dev/null
+++ b/public/blog/add-a-live-star-history-chart-to-your-github-readme.md
@@ -0,0 +1,89 @@
+# Add a live star-history chart to your GitHub README
+
+![star-history-svg-example](/blog/assets/star-history-svg-example.png)
+Now we support embedding a live star history chart into your GitHub README.  Above is the screenshot from our own [GitHub start history repo](https://github.com/star-history/star-history).
+
+This feature is quite handy.  A snippet would appear after querying the repository from our star-history.com main page; the only thing you need to do is simply copy that snippet into your GitHub README markdown file.
+![star-history-embed-block](/blog/assets/star-history-embed-block.png)
+Under the hood, it's actually a long story about developing this embedded star history chart.  It all starts from an issue 6 years ago.
+
+## An issue from 6 years ago
+
+In 2016, a user opened an [issue](https://github.com/star-history/star-history/issues/35) asking to embed GitHub star-history chart into their own website.  But due to the development resource and API token limitations, it was dismissed.
+![old-embed-issue](/blog/assets/old-embed-issue.png)
+Recently, we resumed the development effort and after completing a major refactoring of [star-history](https://star-history.com/blog/introducing-the-new-star-history-com), we are ready to tackle this.  Our first improvement is to introduce the embeddable GitHub star-history chart using `<iframe />`.
+
+## Embed with `<iframe />`
+
+After looking through the popular web-side embedding implementations, we decide to use `<iframe />` as the embedded block container.  It can display original charts on a webpage without implementing a backend server.  And `<iframe />` is also interactive with real-time data.
+
+Because GitHub API imposes a strict rate limit on the anonymous callers, we need users to provide their self-generated tokens to overcome that limit.
+
+### Step-to-step guide to use `iframe` embed
+
+1. Open [star-history.com](https://star-history.com) and query for a repository;
+
+2. Click the `Embed` button below the chart;
+
+3. Input your personal access token;
+   ![embed-chart-with-svg](/blog/assets/embed-chart-with-iframe.png)
+
+4. Click the `Copy` button, then paste it into your websites or blogs;
+
+## Live chart image in SVG format
+
+The iframe-based embed block is a decent improvement, while it still has some flaws:
+
+1. One commonly used case is to embed the GitHub star-history chart into the repository README file, so that it can be displayed on the repo's front page. However, the GitHub markdown flavor disallows rendering `<iframe />`, which makes it impossible to directly embed star-history charts there.
+2. We require users to provide their personal access tokens.  Though star-history never stores the token on our own server (we don't have a server at all), the token itself could be found if someone views the webpage source code.  This limits the usage since it's not fully secure unless adding the chart to a trusted platform, i.e. the internal dashboard of a team.
+
+### Inspiration
+
+We noticed that many open source projects have badges on their README
+![github-badges](/blog/assets/github-badges.png)
+After thorough research, we figured that those badges are dynamically generated SVG images.
+
+Coincidentally, star-history also generates the SVG chart image.  If we can return this SVG image by a link, then we can achieve a similar result as those generated badges.
+
+### Implementation
+
+star-history has always been a single-page application (SPA) without backend code. In order to offer this feature, we have to add the backend logic to serve the image request. To reuse the SVG generation code, we choose nodejs to create a service returning the live star history chart SVG.
+
+To avoid GitHub request rate limit, we create a token pool for polling requests. Those tokens are donated by our community members. If you would like to donate one, please follow this guide: [Donate GitHub Personal Access Token for star-history.com](https://github.com/star-history/star-history/wiki/Donate-your-GitHub-Personal-Access-Token)
+
+This is an example link to get the live SVG image for our star-history project: [https://api.star-history.com/svg?repos=star-history/star-history](https://api.star-history.com/svg?repos=star-history/star-history)
+![star-history-api-svg](/blog/assets/star-history-api-svg.png)
+
+### Step-to-step guide to add the chart to your GitHub README
+
+1. Open [star-history.com](https://star-history.com) and query for a repository;
+
+2. Scroll the page below the action buttons;
+   ![embed-chart-with-svg](/blog/assets/embed-chart-with-svg.png)
+3. Click the `Copy` button;
+
+4. Paste the code into your repository's README;
+
+5. Everything is done. 😎
+
+## Running on [render](http://render.com)
+
+The existing star-history frontend is a static site and is running on [render.com](http://render.com/).  As you can see, we have added the API server which is a Web Service type serving the live star history SVG image request.
+![render-overview](/blog/assets/render-overview.png)
+Here is the render's monitoring view and it's been running fine so far
+![render-usage](/blog/assets/render-usage.png)
+
+## Conclusion
+
+We provide two ways to embed the real-time star history chart into the web pages.
+
+- If you want to put an auto-sizeable and interactive chart on your private network, you should try the embedded chart with `<iframe />`.
+- If you want to show a static chart with update-to-date star history data to the public, such as putting it on the GitHub repository README, you should use the image link such as `https://api.star-history.com/svg?repos=star-history/star-history&type=Date`
+
+---
+
+Check out examples below of using SVG embed charts in GitHub repository README and organization README.
+
+- [https://github.com/star-history/star-history#star-history](https://github.com/star-history/star-history#star-history)
+- [https://github.com/bytebase/bytebase#star-history](https://github.com/bytebase/bytebase#star-history)
+- [https://github.com/bytebase](https://github.com/bytebase)
diff --git a/public/blog/assets/embed-chart-with-iframe.png b/public/blog/assets/embed-chart-with-iframe.png
new file mode 100644
index 0000000000000000000000000000000000000000..7871fda9097e11e0caced7124c7cd6f113793a34
--- /dev/null
+++ b/public/blog/assets/embed-chart-with-iframe.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b319819cf5b058f9a844e13140ea366a77f526cab48fa0386b3b1582c167a4f2
+size 210750
diff --git a/public/blog/assets/embed-chart-with-svg.png b/public/blog/assets/embed-chart-with-svg.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b2010f789d9aef714b59c39d577562f738de000
--- /dev/null
+++ b/public/blog/assets/embed-chart-with-svg.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:69dbba7cd2f3403ccc989a3a169db48cdf4dd553162335baac10f706fa6416cf
+size 314838
diff --git a/public/blog/assets/github-badges.png b/public/blog/assets/github-badges.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbc1ce738505e7ebf7718f3260952c7b59c47190
--- /dev/null
+++ b/public/blog/assets/github-badges.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e0ada7bba65ac6f8545850314b205563237a3080b50e31f4ae5eae4ab31c112
+size 1190026
diff --git a/public/blog/assets/github-trending-tab/github-home.webp b/public/blog/assets/github-trending-tab/github-home.webp
new file mode 100644
index 0000000000000000000000000000000000000000..5057c9bf34ea9b4059a7eac827b4d9642dabb7ac
Binary files /dev/null and b/public/blog/assets/github-trending-tab/github-home.webp differ
diff --git a/public/blog/assets/github-trending-tab/github-trending-tab.webp b/public/blog/assets/github-trending-tab/github-trending-tab.webp
new file mode 100644
index 0000000000000000000000000000000000000000..479bab4ed56ee12671e820b7f99bcb58f373ed4a
Binary files /dev/null and b/public/blog/assets/github-trending-tab/github-trending-tab.webp differ
diff --git a/public/blog/assets/github-trending-tab/hn.webp b/public/blog/assets/github-trending-tab/hn.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ad243be23a2392437fc8209e0b7b84676dffb9ba
Binary files /dev/null and b/public/blog/assets/github-trending-tab/hn.webp differ
diff --git a/public/blog/assets/github-trending-tab/star-history.webp b/public/blog/assets/github-trending-tab/star-history.webp
new file mode 100644
index 0000000000000000000000000000000000000000..71803e30a52ea9a070aa51ae92ccd942e46cb27b
Binary files /dev/null and b/public/blog/assets/github-trending-tab/star-history.webp differ
diff --git a/public/blog/assets/github-trending-tab/throw.gif b/public/blog/assets/github-trending-tab/throw.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b61114ce448559b05f8053fad7f98506ede2f888
--- /dev/null
+++ b/public/blog/assets/github-trending-tab/throw.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a671b5a0e4bee4bbb70fc6492957faaa64f38da381ef7c3a3c4d51a111fd0af6
+size 1380489
diff --git a/public/blog/assets/how-to-use-github-star-history/add-access-token.webp b/public/blog/assets/how-to-use-github-star-history/add-access-token.webp
new file mode 100644
index 0000000000000000000000000000000000000000..8bb1d273336591b9906b3a0cf700f461a2c40029
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/add-access-token.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/align-timeline.webp b/public/blog/assets/how-to-use-github-star-history/align-timeline.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a2ccdb8f608d79faaa919234be50997f1721c984
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/align-timeline.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/book.webp b/public/blog/assets/how-to-use-github-star-history/book.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3ac3aace003225f319953406a8f87113413f9e55
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/book.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/chrome-extension-working.webp b/public/blog/assets/how-to-use-github-star-history/chrome-extension-working.webp
new file mode 100644
index 0000000000000000000000000000000000000000..8f7d8f365879235e5564901439879870b8e56df7
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/chrome-extension-working.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/chrome-extension.webp b/public/blog/assets/how-to-use-github-star-history/chrome-extension.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6aca55ddcd6df69571d3d92ecd5ee2f500f6dbcd
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/chrome-extension.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/classic-form.webp b/public/blog/assets/how-to-use-github-star-history/classic-form.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6a914a5cd5608fb814fac1e8c2bb5946d25cc4f5
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/classic-form.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/copy-iframe-readme.webp b/public/blog/assets/how-to-use-github-star-history/copy-iframe-readme.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e4cd08707c66be2418367d4809597180423d29a1
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/copy-iframe-readme.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/edit-gh-access-token.webp b/public/blog/assets/how-to-use-github-star-history/edit-gh-access-token.webp
new file mode 100644
index 0000000000000000000000000000000000000000..51905323f56ba401115b9df19a17c7637c67b004
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/edit-gh-access-token.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/embed.webp b/public/blog/assets/how-to-use-github-star-history/embed.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b8f85dc7b3a31bcb06668dd4a99c260f89bf1e9a
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/embed.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/generate-new-token.webp b/public/blog/assets/how-to-use-github-star-history/generate-new-token.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d02415211b2116490f49d2663a5261dbd5d4c58a
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/generate-new-token.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/gh-readme.webp b/public/blog/assets/how-to-use-github-star-history/gh-readme.webp
new file mode 100644
index 0000000000000000000000000000000000000000..83663af3c1695cdca93de6e691c3d0e9939bf034
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/gh-readme.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/hide-show.webp b/public/blog/assets/how-to-use-github-star-history/hide-show.webp
new file mode 100644
index 0000000000000000000000000000000000000000..42ee3c97b47d4e7ea3af7cef9afa6899df80295c
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/hide-show.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/home-chrome-extension.webp b/public/blog/assets/how-to-use-github-star-history/home-chrome-extension.webp
new file mode 100644
index 0000000000000000000000000000000000000000..781abf62ef83d28c04f218037089e1496cbd9ff2
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/home-chrome-extension.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/how-to-use-github-star-history.webp b/public/blog/assets/how-to-use-github-star-history/how-to-use-github-star-history.webp
new file mode 100644
index 0000000000000000000000000000000000000000..16553702c5716779eec81207560bb3503dcbd64b
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/how-to-use-github-star-history.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/multiple-repos.webp b/public/blog/assets/how-to-use-github-star-history/multiple-repos.webp
new file mode 100644
index 0000000000000000000000000000000000000000..515a952c20438a898b268f6b3b71e1d5b2aca49a
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/multiple-repos.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/new-token-classic.webp b/public/blog/assets/how-to-use-github-star-history/new-token-classic.webp
new file mode 100644
index 0000000000000000000000000000000000000000..cfade791b994a69850522bca616a268fe9767276
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/new-token-classic.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/personal-token-copy.webp b/public/blog/assets/how-to-use-github-star-history/personal-token-copy.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6eb98e98059c9276b8e98268b8f2d823caf8734b
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/personal-token-copy.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/search-bar.webp b/public/blog/assets/how-to-use-github-star-history/search-bar.webp
new file mode 100644
index 0000000000000000000000000000000000000000..26acd38c9a09c4040fc4fba0c6aa8e3a7e329411
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/search-bar.webp differ
diff --git a/public/blog/assets/how-to-use-github-star-history/user-manual.webp b/public/blog/assets/how-to-use-github-star-history/user-manual.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9480753b98d9824f18badeb10f259a2b5f728eae
Binary files /dev/null and b/public/blog/assets/how-to-use-github-star-history/user-manual.webp differ
diff --git a/public/blog/assets/ockam/banner.webp b/public/blog/assets/ockam/banner.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4fc2d46340bae890bb6477199ee8c43be8c0ee3c
Binary files /dev/null and b/public/blog/assets/ockam/banner.webp differ
diff --git a/public/blog/assets/ockam/build-trust.webp b/public/blog/assets/ockam/build-trust.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a77b09f57b61ec2c7864163dbeab8a1b4ffbd2b4
Binary files /dev/null and b/public/blog/assets/ockam/build-trust.webp differ
diff --git a/public/blog/assets/ockam/ockam.webp b/public/blog/assets/ockam/ockam.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d2866b9918e95a730b0bd05c91448c5e3af7e6fc
Binary files /dev/null and b/public/blog/assets/ockam/ockam.webp differ
diff --git a/public/blog/assets/old-embed-issue.png b/public/blog/assets/old-embed-issue.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2014328b8866222daaed85af371cce8295b120c
--- /dev/null
+++ b/public/blog/assets/old-embed-issue.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cac82b73f1ad7855726bbe87eb9bc51a029270ac96c817d067272347c9d6a995
+size 100399
diff --git a/public/blog/assets/render-overview.png b/public/blog/assets/render-overview.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6cfc2d35636265ab514295a413849cde56d2c71
--- /dev/null
+++ b/public/blog/assets/render-overview.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ffa12444c94ab3715a498a5033f5f16f3e11b93f3c50f5c451fbb6335c922923
+size 68877
diff --git a/public/blog/assets/render-usage.png b/public/blog/assets/render-usage.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a3ef7377d790052fe05a4ab13262b24ed02527c
--- /dev/null
+++ b/public/blog/assets/render-usage.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:233be482a37f566fd7acd35b9aa28bd091e86d91c06b76fc29c1f2d78c718a17
+size 75160
diff --git a/public/blog/assets/sql-chat/banner.webp b/public/blog/assets/sql-chat/banner.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4967a40b279aa043801470c45f1627e728faff62
Binary files /dev/null and b/public/blog/assets/sql-chat/banner.webp differ
diff --git a/public/blog/assets/sql-chat/db-connections.webp b/public/blog/assets/sql-chat/db-connections.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d68472d88d1a11f243734241b824b34fc3e6e09f
Binary files /dev/null and b/public/blog/assets/sql-chat/db-connections.webp differ
diff --git a/public/blog/assets/sql-chat/sqlchat.webp b/public/blog/assets/sql-chat/sqlchat.webp
new file mode 100644
index 0000000000000000000000000000000000000000..5fe1bd788c60b797630560b2bd66d39c066ca26b
Binary files /dev/null and b/public/blog/assets/sql-chat/sqlchat.webp differ
diff --git a/public/blog/assets/star-history-api-svg.png b/public/blog/assets/star-history-api-svg.png
new file mode 100644
index 0000000000000000000000000000000000000000..cad727c3121a95e02d2935a7553ae7dd2dcabcae
--- /dev/null
+++ b/public/blog/assets/star-history-api-svg.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:81a52cc3df1a35d95c0bc0f9465fde522690036cfc85a393c022572da51cce2d
+size 124274
diff --git a/public/blog/assets/star-history-chrome-extension.png b/public/blog/assets/star-history-chrome-extension.png
new file mode 100644
index 0000000000000000000000000000000000000000..42fffa9867eb08988411dd5345490b02db1f6f3a
--- /dev/null
+++ b/public/blog/assets/star-history-chrome-extension.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f2161be83b09c1945e101d8d2b65c48dd43003da46898cff9fdbda8a0a9202f9
+size 327330
diff --git a/public/blog/assets/star-history-date-mode.png b/public/blog/assets/star-history-date-mode.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3c54e68c6269d2b706ba441a4dcc508ee0a8f1c
--- /dev/null
+++ b/public/blog/assets/star-history-date-mode.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b9b7377b5aa546825765ef417adb4b8da5d5a72715b11dbee272f3b7ad7703b3
+size 214995
diff --git a/public/blog/assets/star-history-embed-block.png b/public/blog/assets/star-history-embed-block.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4de785b915de48825e4c8ba32641017e2e27236
--- /dev/null
+++ b/public/blog/assets/star-history-embed-block.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8f5089c068dca46481088a6ada7c2b1a832282dd37f77af5b1464d70eb9218a8
+size 166086
diff --git a/public/blog/assets/star-history-google-result.png b/public/blog/assets/star-history-google-result.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ef72d8944c2bd19c9a179e6230fdfd64c9ff281
--- /dev/null
+++ b/public/blog/assets/star-history-google-result.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c772736933e990ebe870b3d49c19d2981dbcd5901c2b6b9a9ce42b461224c6e3
+size 237599
diff --git a/public/blog/assets/star-history-image.png b/public/blog/assets/star-history-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..b14fa6494a6f786062c719f250bcea465868601b
--- /dev/null
+++ b/public/blog/assets/star-history-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:846e7647ca2948bc93065cf7f5d1ade3dee58f1b7a2e6cbd965a49d530af2ab8
+size 155336
diff --git a/public/blog/assets/star-history-in-github-readme.png b/public/blog/assets/star-history-in-github-readme.png
new file mode 100644
index 0000000000000000000000000000000000000000..56c566d7823f99e3fef6b06a38426eb212f6b939
--- /dev/null
+++ b/public/blog/assets/star-history-in-github-readme.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cf95440a2333b560d8c66e01523e256bf21f83f3260111db384f35fe23d85c73
+size 148548
diff --git a/public/blog/assets/star-history-inputer.png b/public/blog/assets/star-history-inputer.png
new file mode 100644
index 0000000000000000000000000000000000000000..0753ff9dd25cbdebe5b1a7125137240e89a14a0c
--- /dev/null
+++ b/public/blog/assets/star-history-inputer.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f7474e6434ccf7c81e08b6e652015f2e3252ee4c5ebae8a71f1440ec77bc1703
+size 54872
diff --git a/public/blog/assets/star-history-monthly-pick-202212/greptimedb-architecture.webp b/public/blog/assets/star-history-monthly-pick-202212/greptimedb-architecture.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4725b623977ca0bb4367e46c496a66044b130389
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/greptimedb-architecture.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/memos-demo.webp b/public/blog/assets/star-history-monthly-pick-202212/memos-demo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..443292905ddc762326976612684232e28de457e8
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/memos-demo.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/reddit-comment.webp b/public/blog/assets/star-history-monthly-pick-202212/reddit-comment.webp
new file mode 100644
index 0000000000000000000000000000000000000000..8ec4248a6e362f28f4deff9efa2c8110e4af5559
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/reddit-comment.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/star-history-202212.webp b/public/blog/assets/star-history-monthly-pick-202212/star-history-202212.webp
new file mode 100644
index 0000000000000000000000000000000000000000..34c07f3df61f767c5edd2bcbaf2a03a5377c54a5
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/star-history-202212.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/star-history-2022121-stepci.webp b/public/blog/assets/star-history-monthly-pick-202212/star-history-2022121-stepci.webp
new file mode 100644
index 0000000000000000000000000000000000000000..aa24c9b7cee6aef07374e848dfeb65cbc9640c0a
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/star-history-2022121-stepci.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/star-history-20221213-comparison.webp b/public/blog/assets/star-history-monthly-pick-202212/star-history-20221213-comparison.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b613f06c7068e06d35bd0794e02b29c5f14a47ff
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/star-history-20221213-comparison.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/star-history-20221214-duckdb.webp b/public/blog/assets/star-history-monthly-pick-202212/star-history-20221214-duckdb.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7729eb8ead8076cb472f4e052295dd1af99e5ebc
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/star-history-20221214-duckdb.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/star-history-20221214-greptimedb.webp b/public/blog/assets/star-history-monthly-pick-202212/star-history-20221214-greptimedb.webp
new file mode 100644
index 0000000000000000000000000000000000000000..bac753cf413b6836d9e34e55609858e7171d46fd
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/star-history-20221214-greptimedb.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/star-history-20221214-memos.webp b/public/blog/assets/star-history-monthly-pick-202212/star-history-20221214-memos.webp
new file mode 100644
index 0000000000000000000000000000000000000000..78c5e3deb1b8281e7c1594ba26e2a0ebd96f7a8d
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/star-history-20221214-memos.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/star-history-twitter.webp b/public/blog/assets/star-history-monthly-pick-202212/star-history-twitter.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0f90745c20b58da65bcf4ec267d99562c65aefda
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/star-history-twitter.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/stepci-demo.webp b/public/blog/assets/star-history-monthly-pick-202212/stepci-demo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ba02009db9145b0b947aa61e1b5d884b0c44f89a
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/stepci-demo.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202212/whats-duckdb.webp b/public/blog/assets/star-history-monthly-pick-202212/whats-duckdb.webp
new file mode 100644
index 0000000000000000000000000000000000000000..19a4809d2186d8a2dbc403ed9fb7b2572a64dd47
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202212/whats-duckdb.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/hermes-docs.webp b/public/blog/assets/star-history-monthly-pick-202301/hermes-docs.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3eb5f9299080b3c2a074a395a7c076fdd7b9850f
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/hermes-docs.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/hermes.webp b/public/blog/assets/star-history-monthly-pick-202301/hermes.webp
new file mode 100644
index 0000000000000000000000000000000000000000..fc8bcb3be3b7c0b18f41d63a4dfd1a8609257cd0
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/hermes.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/lago-billing.webp b/public/blog/assets/star-history-monthly-pick-202301/lago-billing.webp
new file mode 100644
index 0000000000000000000000000000000000000000..689f817d7e8277e8c52d84f18a0f634cf3f285d4
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/lago-billing.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/lago.webp b/public/blog/assets/star-history-monthly-pick-202301/lago.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a16e062aefdb0e9c52d1c8070c2c9b64027281bc
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/lago.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/mafs-playground.webp b/public/blog/assets/star-history-monthly-pick-202301/mafs-playground.webp
new file mode 100644
index 0000000000000000000000000000000000000000..30a8c3c6c7faf7a994c67ee90a6303278168b1f2
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/mafs-playground.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/mafs.webp b/public/blog/assets/star-history-monthly-pick-202301/mafs.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f7fc4cf5eb2a83ba4a8a6cc61ceaa704a9e9d18d
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/mafs.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/prql-statement.webp b/public/blog/assets/star-history-monthly-pick-202301/prql-statement.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0bdd45a771d4720c94352df5b09abf760573c066
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/prql-statement.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/prql.webp b/public/blog/assets/star-history-monthly-pick-202301/prql.webp
new file mode 100644
index 0000000000000000000000000000000000000000..83f83384de9bf40be1e02bc9661a0f867bc5fab1
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/prql.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/star-history-monthly-pick-202301.webp b/public/blog/assets/star-history-monthly-pick-202301/star-history-monthly-pick-202301.webp
new file mode 100644
index 0000000000000000000000000000000000000000..be5f5386a5b70c63d6365657062eee88f6c8d846
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/star-history-monthly-pick-202301.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/zitadel-details.webp b/public/blog/assets/star-history-monthly-pick-202301/zitadel-details.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7914d242ffcc4259977d634f6dcdb66ac68ced29
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/zitadel-details.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202301/zitadel.webp b/public/blog/assets/star-history-monthly-pick-202301/zitadel.webp
new file mode 100644
index 0000000000000000000000000000000000000000..87a3156367bea9a8f53c873bcd11cf77524c16b7
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202301/zitadel.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/banner.webp b/public/blog/assets/star-history-monthly-pick-202302/banner.webp
new file mode 100644
index 0000000000000000000000000000000000000000..51f42cdfc98a1bacfa71ffbd5d8b41a428553bab
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/banner.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/kruise.webp b/public/blog/assets/star-history-monthly-pick-202302/kruise.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1d1fe7837af2a4a9e0de44e9a63d95203de21e60
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/kruise.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/starhistory-google.webp b/public/blog/assets/star-history-monthly-pick-202302/starhistory-google.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7cb922610465dc302cd37362d4ececb8d03e9be8
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/starhistory-google.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/tbls-diff.webp b/public/blog/assets/star-history-monthly-pick-202302/tbls-diff.webp
new file mode 100644
index 0000000000000000000000000000000000000000..114e914646fd165705759880edbe624707d4b068
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/tbls-diff.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/tbls.webp b/public/blog/assets/star-history-monthly-pick-202302/tbls.webp
new file mode 100644
index 0000000000000000000000000000000000000000..8ffc02f96c291290ec8981a957030d608f93d72c
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/tbls.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/telegraf-architecture.webp b/public/blog/assets/star-history-monthly-pick-202302/telegraf-architecture.webp
new file mode 100644
index 0000000000000000000000000000000000000000..672316edeba0d9ddf4d99b53ab8fde713d7b8a7a
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/telegraf-architecture.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/telegraf.webp b/public/blog/assets/star-history-monthly-pick-202302/telegraf.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d08b7dff7395431d763c73475617aea654ee384e
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/telegraf.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/triggerdotdev-api.webp b/public/blog/assets/star-history-monthly-pick-202302/triggerdotdev-api.webp
new file mode 100644
index 0000000000000000000000000000000000000000..03e174b86bb510164900f260944ad1a9e438b830
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/triggerdotdev-api.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/triggerdotdev-hn.webp b/public/blog/assets/star-history-monthly-pick-202302/triggerdotdev-hn.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0fad0ce0c8d636dddd2bc16c1e16bda0b2cc011f
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/triggerdotdev-hn.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/triggerdotdev.webp b/public/blog/assets/star-history-monthly-pick-202302/triggerdotdev.webp
new file mode 100644
index 0000000000000000000000000000000000000000..136381d20d63ac1303cb8d8ae99963a0a40adaaf
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/triggerdotdev.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/trustfall-hn.webp b/public/blog/assets/star-history-monthly-pick-202302/trustfall-hn.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1151f56616cfbeb6d20109de0e40744002fc87ce
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/trustfall-hn.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202302/trustfall.webp b/public/blog/assets/star-history-monthly-pick-202302/trustfall.webp
new file mode 100644
index 0000000000000000000000000000000000000000..865d4c964340c16f39e5c0ee4a6b712240c34ffc
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202302/trustfall.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/autogpt.webp b/public/blog/assets/star-history-monthly-pick-202303/autogpt.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d5df6bf5cf2fd85241e6ae46a0415d27a76cc37a
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/autogpt.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/awesome-chatgpt-prompts.webp b/public/blog/assets/star-history-monthly-pick-202303/awesome-chatgpt-prompts.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c2c62d0417f1aed000e2e6541ae3d7caa3f1e599
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/awesome-chatgpt-prompts.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/banner.webp b/public/blog/assets/star-history-monthly-pick-202303/banner.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4f090a83bb65fe61dccd6da17ed38782f5207ed2
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/banner.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/chatgpt-retrieval-plugin.webp b/public/blog/assets/star-history-monthly-pick-202303/chatgpt-retrieval-plugin.webp
new file mode 100644
index 0000000000000000000000000000000000000000..274d79e64d5eed53ad774eed46b0c2c6e3f8eeef
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/chatgpt-retrieval-plugin.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/darkmode.webp b/public/blog/assets/star-history-monthly-pick-202303/darkmode.webp
new file mode 100644
index 0000000000000000000000000000000000000000..65afae583437f1db23c9e6052ef03770a22ef63c
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/darkmode.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/glarity-summary.webp b/public/blog/assets/star-history-monthly-pick-202303/glarity-summary.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3cecc7d563ed30e335b4b002ed83157a055d696d
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/glarity-summary.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/glarity.webp b/public/blog/assets/star-history-monthly-pick-202303/glarity.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e3acaed7fe7470b19eb4b5c469b77586d57e119c
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/glarity.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/meaning-of-life.webp b/public/blog/assets/star-history-monthly-pick-202303/meaning-of-life.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ea2e59b44e930940b84e776a0d9dcbb29ce96806
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/meaning-of-life.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/openai-translator-ui.webp b/public/blog/assets/star-history-monthly-pick-202303/openai-translator-ui.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c823e3894a4c78d50688248c22ff91b5f4e5eedc
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/openai-translator-ui.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/openai-translator.webp b/public/blog/assets/star-history-monthly-pick-202303/openai-translator.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c00afb3f8441f156c70ab1065ac1ccd1a53cff3f
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/openai-translator.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/openprompt-home.webp b/public/blog/assets/star-history-monthly-pick-202303/openprompt-home.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7032cffc3185887ad3f09c7765dd7f262925db12
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/openprompt-home.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/openprompt.webp b/public/blog/assets/star-history-monthly-pick-202303/openprompt.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c9c0791b4c354379d9a8d9e48ea4d1ab7cea84e3
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/openprompt.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/prompts.webp b/public/blog/assets/star-history-monthly-pick-202303/prompts.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6bdc200eb4a91289122e97cd40da9b3803c2bb6a
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/prompts.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/retrieve-docs.webp b/public/blog/assets/star-history-monthly-pick-202303/retrieve-docs.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ee6eb227d2bee1907c34cc1aadb5e456fc42b02f
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/retrieve-docs.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/sharegpt.webp b/public/blog/assets/star-history-monthly-pick-202303/sharegpt.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e32de042e1bca52ebcbc5e770e1cb3d73faa813f
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/sharegpt.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202303/sqlchat.webp b/public/blog/assets/star-history-monthly-pick-202303/sqlchat.webp
new file mode 100644
index 0000000000000000000000000000000000000000..8353d2187f0768caa2654b090e0d11e543a6022f
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202303/sqlchat.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/azimutt-erd.webp b/public/blog/assets/star-history-monthly-pick-202304/azimutt-erd.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c718461aaa54708290b0c9e7cc2ef1817120bc65
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/azimutt-erd.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/azimutt.webp b/public/blog/assets/star-history-monthly-pick-202304/azimutt.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ebba98c39d50c9047589bf893cb7841b9f25e359
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/azimutt.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/ballerine-hn.webp b/public/blog/assets/star-history-monthly-pick-202304/ballerine-hn.webp
new file mode 100644
index 0000000000000000000000000000000000000000..bdd4f76bd0d33fe26ee19d3698ac35d2780d6b9a
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/ballerine-hn.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/ballerine.webp b/public/blog/assets/star-history-monthly-pick-202304/ballerine.webp
new file mode 100644
index 0000000000000000000000000000000000000000..76011c43e22f5ffff0bf923074c2f47c300be57f
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/ballerine.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/banner.webp b/public/blog/assets/star-history-monthly-pick-202304/banner.webp
new file mode 100644
index 0000000000000000000000000000000000000000..eb22633facef55e89d666dc20029daa0a256d5e9
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/banner.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/linen-site.webp b/public/blog/assets/star-history-monthly-pick-202304/linen-site.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9646862121b0a74de1f759dd612698d8a595c243
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/linen-site.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/linen.webp b/public/blog/assets/star-history-monthly-pick-202304/linen.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ecf342a1440293b764fb35ac1f14d5ad291d216c
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/linen.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/plane-ui.webp b/public/blog/assets/star-history-monthly-pick-202304/plane-ui.webp
new file mode 100644
index 0000000000000000000000000000000000000000..cb13e0da7654cc75bf1f54e2f632b3643ca082c9
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/plane-ui.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/plane.webp b/public/blog/assets/star-history-monthly-pick-202304/plane.webp
new file mode 100644
index 0000000000000000000000000000000000000000..fc64f3e5ebf688ce120784c381603cd2b6bf34dc
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/plane.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/twitter-algorithm.webp b/public/blog/assets/star-history-monthly-pick-202304/twitter-algorithm.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1aee96e3e01f6f7f81ea760bb02f67f3341df0ca
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/twitter-algorithm.webp differ
diff --git a/public/blog/assets/star-history-monthly-pick-202304/twitter.webp b/public/blog/assets/star-history-monthly-pick-202304/twitter.webp
new file mode 100644
index 0000000000000000000000000000000000000000..566f781ab0be03f3cb9c95c202b3ecf2e5eb2475
Binary files /dev/null and b/public/blog/assets/star-history-monthly-pick-202304/twitter.webp differ
diff --git a/public/blog/assets/star-history-repo-selector.png b/public/blog/assets/star-history-repo-selector.png
new file mode 100644
index 0000000000000000000000000000000000000000..eabc4abf58562e935a8f933f4fec3f72deb1eee6
--- /dev/null
+++ b/public/blog/assets/star-history-repo-selector.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ab1ea8abb0dd90a6e0ca277110100135818c1e4b017bc0ae8f65a3ba7f735f42
+size 120329
diff --git a/public/blog/assets/star-history-svg-example.png b/public/blog/assets/star-history-svg-example.png
new file mode 100644
index 0000000000000000000000000000000000000000..14afa1f6373ed271e7aa2bba9ab960f021a86419
--- /dev/null
+++ b/public/blog/assets/star-history-svg-example.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e83368642ff20629b5cb39240cb6d83fca06a7cb9e762bea0ff25eeba53db50
+size 85938
diff --git a/public/blog/assets/star-history-timeline-mode.png b/public/blog/assets/star-history-timeline-mode.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1bc7f36a19ae676f693e7f0119e71e54b736a55
--- /dev/null
+++ b/public/blog/assets/star-history-timeline-mode.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d7579095b292b7a3e7ccbc1bc6d7337601c7cdc2120be003a1f4b589f2d29f9a
+size 200330
diff --git a/public/blog/assets/star-history.png b/public/blog/assets/star-history.png
new file mode 100644
index 0000000000000000000000000000000000000000..745b32b4dc8bd7d0f927ea5f99efc6a5cec34417
--- /dev/null
+++ b/public/blog/assets/star-history.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e1114292f92489b8dfa38ee2e6d660534baecbb739e199447256f2f5e8d1746
+size 52076
diff --git a/public/blog/assets/tabby/banner.webp b/public/blog/assets/tabby/banner.webp
new file mode 100644
index 0000000000000000000000000000000000000000..cf6d0014def88278866486650fe0e72d337440a2
Binary files /dev/null and b/public/blog/assets/tabby/banner.webp differ
diff --git a/public/blog/assets/tabby/hn.webp b/public/blog/assets/tabby/hn.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b57fe7339d7dbb85dfd19b725f5912d10a1c189d
Binary files /dev/null and b/public/blog/assets/tabby/hn.webp differ
diff --git a/public/blog/assets/tabby/tabby-ui.gif b/public/blog/assets/tabby/tabby-ui.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8798cc8ecbc1bddcc366677e35f9797ae00c8d4f
--- /dev/null
+++ b/public/blog/assets/tabby/tabby-ui.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fc24841caeb59b66cba4a84a839f90d9806b221c6dcda7aaa1176d5467aa9c51
+size 1464599
diff --git a/public/blog/assets/tabby/tabby.webp b/public/blog/assets/tabby/tabby.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e14e27ce16812447b73164349016d0f2e936e723
Binary files /dev/null and b/public/blog/assets/tabby/tabby.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/buf-site.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/buf-site.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ee08fb52d81129da8da8054db0517795d16c07b5
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/buf-site.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/buf.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/buf.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4d9fa8fce6cd9f976a392bd9fb4e4d6838c6a214
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/buf.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/byte-base.gif b/public/blog/assets/yearly-pick-data-infra-devtools-2022/byte-base.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8ea80a69a456f06496c87eaad7da7cdbc0d18a30
--- /dev/null
+++ b/public/blog/assets/yearly-pick-data-infra-devtools-2022/byte-base.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c06303296c345cceafcb5c32de38e7e742b6b720a54b01d13f6946ee2c40120a
+size 65638
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/bytebase-site.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/bytebase-site.webp
new file mode 100644
index 0000000000000000000000000000000000000000..13b770c81bb74aac455643e6898d625bb869683a
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/bytebase-site.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/bytebase.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/bytebase.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0560e15acd91c8318bc9ade1a0958aeb78e20847
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/bytebase.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/casdoor-authentication.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/casdoor-authentication.webp
new file mode 100644
index 0000000000000000000000000000000000000000..20889b47aa04813fb00c19deb240e6ab569064f9
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/casdoor-authentication.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/casdoor.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/casdoor.webp
new file mode 100644
index 0000000000000000000000000000000000000000..18073176582f162489eb088a25ddf9a68be67ea7
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/casdoor.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/dagger-architecture.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/dagger-architecture.webp
new file mode 100644
index 0000000000000000000000000000000000000000..58ac01e2f4a7ad43b89a641804392c64e9e5fa32
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/dagger-architecture.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/dagger.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/dagger.webp
new file mode 100644
index 0000000000000000000000000000000000000000..63bd74820778b654dfdb798dd95e8dc6b73bad7a
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/dagger.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/duckdb-dbms.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/duckdb-dbms.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c11a6bfbd4c09652a8984b3ac2291cc82dcac97f
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/duckdb-dbms.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/duckdb.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/duckdb.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7e7d3745783b8da5513a75cf78c34c5a9a548480
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/duckdb.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/google-result.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/google-result.webp
new file mode 100644
index 0000000000000000000000000000000000000000..2e59415805535049864e139eddb6972268788592
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/google-result.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/meltano-workflow.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/meltano-workflow.webp
new file mode 100644
index 0000000000000000000000000000000000000000..787ee2a49c763e2b0ab2d503aa1c5e41ab6c66af
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/meltano-workflow.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/meltano.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/meltano.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c30d3888720791fc43dcee374056458e54c283d0
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/meltano.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/neon-architecture.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/neon-architecture.webp
new file mode 100644
index 0000000000000000000000000000000000000000..64d49e56e24ca9b7b17cefa75d5259f758c61be8
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/neon-architecture.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/neon-visuals.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/neon-visuals.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9a75401a7aa4ac0a51824f3a455df7f578fd59c0
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/neon-visuals.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/neon.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/neon.webp
new file mode 100644
index 0000000000000000000000000000000000000000..bee66ef3bb2c11c065dd540fc3f73c9285d48986
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/neon.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/opa-workflow.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/opa-workflow.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b3cd2ff42fd57be9faee02d3fe26570a12b40c28
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/opa-workflow.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/opa.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/opa.webp
new file mode 100644
index 0000000000000000000000000000000000000000..325efde51d7fee2438767a99f07961b1bfe3920e
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/opa.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/steampipe-hn.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/steampipe-hn.webp
new file mode 100644
index 0000000000000000000000000000000000000000..915009ec61485286cf27f2728943b5c7fa683de7
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/steampipe-hn.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/steampipe.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/steampipe.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3a86c66542440d3d04becb8a94a742e505eafe04
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/steampipe.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/tier-hn.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/tier-hn.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b43b3739eb7a4ca91a03afde5b60f9ee9751f925
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/tier-hn.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/tier-priceops.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/tier-priceops.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4cc7f077250d279b4311a06f681385b2aea96ec0
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/tier-priceops.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/tier.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/tier.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7ae8369f5fe5fcc9df3e66c035b554f8f756c82a
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/tier.webp differ
diff --git a/public/blog/assets/yearly-pick-data-infra-devtools-2022/yearly-pick-data-infra-devtools-2022.webp b/public/blog/assets/yearly-pick-data-infra-devtools-2022/yearly-pick-data-infra-devtools-2022.webp
new file mode 100644
index 0000000000000000000000000000000000000000..5d2fdea2d1fef4a37b6e7e14c45d9f7039be9405
Binary files /dev/null and b/public/blog/assets/yearly-pick-data-infra-devtools-2022/yearly-pick-data-infra-devtools-2022.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/bun-github-trending.webp b/public/blog/assets/yearly-pick-frontend-2022/bun-github-trending.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9526f70101b0e7d4127e859c5dcd882b589a9c70
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/bun-github-trending.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/bun.webp b/public/blog/assets/yearly-pick-frontend-2022/bun.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a6fff69c61d14e6f68fe64d731bde101bfbcdd11
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/bun.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/fresh.webp b/public/blog/assets/yearly-pick-frontend-2022/fresh.webp
new file mode 100644
index 0000000000000000000000000000000000000000..db454de3f82f7d77116c626f273297738d945d54
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/fresh.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/markdoc-demo.webp b/public/blog/assets/yearly-pick-frontend-2022/markdoc-demo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..73df83ce9c9185bf25c9540961d49cf8f471d00d
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/markdoc-demo.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/markdoc.webp b/public/blog/assets/yearly-pick-frontend-2022/markdoc.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9d89d4ac0b8f336472e8f29c5b01310f220e4f56
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/markdoc.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/nextjs-conf.webp b/public/blog/assets/yearly-pick-frontend-2022/nextjs-conf.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b7f85b47f6977f19011c363722d23fb508bd7402
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/nextjs-conf.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/nextjs-k8s.webp b/public/blog/assets/yearly-pick-frontend-2022/nextjs-k8s.webp
new file mode 100644
index 0000000000000000000000000000000000000000..614f889750587e59ebfc8427c0830d58a18a7eaa
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/nextjs-k8s.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/nextjs.webp b/public/blog/assets/yearly-pick-frontend-2022/nextjs.webp
new file mode 100644
index 0000000000000000000000000000000000000000..2e43256c01404e18502649130696db976d8227aa
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/nextjs.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/remix-spin.webp b/public/blog/assets/yearly-pick-frontend-2022/remix-spin.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6c5996499e70a4e85cfc4749e2af20e68bf010ca
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/remix-spin.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/remix.webp b/public/blog/assets/yearly-pick-frontend-2022/remix.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9b08194f631d410fd4362017874e8899082e3236
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/remix.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/solidjs-performance.webp b/public/blog/assets/yearly-pick-frontend-2022/solidjs-performance.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d5cc47f0e91068c6b3938b966bda4a267dae8d0a
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/solidjs-performance.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/solidjs.webp b/public/blog/assets/yearly-pick-frontend-2022/solidjs.webp
new file mode 100644
index 0000000000000000000000000000000000000000..943b4e2d8f336316c1d6722247abfd9926e5fc42
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/solidjs.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/spinning-cat.webp b/public/blog/assets/yearly-pick-frontend-2022/spinning-cat.webp
new file mode 100644
index 0000000000000000000000000000000000000000..abb96b1a43b41a168b3493fbd826d32051151451
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/spinning-cat.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/star-history-frontend-2022.webp b/public/blog/assets/yearly-pick-frontend-2022/star-history-frontend-2022.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f740bda4d53d94abff0d05dd16c2a791e11c3898
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/star-history-frontend-2022.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/tailwind-colors.webp b/public/blog/assets/yearly-pick-frontend-2022/tailwind-colors.webp
new file mode 100644
index 0000000000000000000000000000000000000000..2618be51248afab6c585ee47797d02ed6ec2db58
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/tailwind-colors.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/tailwind.webp b/public/blog/assets/yearly-pick-frontend-2022/tailwind.webp
new file mode 100644
index 0000000000000000000000000000000000000000..525d8520a72c986c2cdcc2c83da8c665ecc6a2a8
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/tailwind.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/tauri.webp b/public/blog/assets/yearly-pick-frontend-2022/tauri.webp
new file mode 100644
index 0000000000000000000000000000000000000000..752a383f13a5758b14617e1375a896065a30629d
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/tauri.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/turbo.webp b/public/blog/assets/yearly-pick-frontend-2022/turbo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..5090c403b5a054ffc4133695fa15807427767e6b
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/turbo.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/turbopack-performance.webp b/public/blog/assets/yearly-pick-frontend-2022/turbopack-performance.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ec08bbac0eaa8670e081d95b34cb31e5d39efd9c
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/turbopack-performance.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/vite-new.webp b/public/blog/assets/yearly-pick-frontend-2022/vite-new.webp
new file mode 100644
index 0000000000000000000000000000000000000000..282cd93ea77ca588e3c30ab8be0236b5801d22d9
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/vite-new.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/vite-old.webp b/public/blog/assets/yearly-pick-frontend-2022/vite-old.webp
new file mode 100644
index 0000000000000000000000000000000000000000..da04a6fa2e1086cf4a4f0ed8763c1fb76226ab2d
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/vite-old.webp differ
diff --git a/public/blog/assets/yearly-pick-frontend-2022/vite.webp b/public/blog/assets/yearly-pick-frontend-2022/vite.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f1803da488449624d752478f1fb9b111b814dd15
Binary files /dev/null and b/public/blog/assets/yearly-pick-frontend-2022/vite.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/airbyte-elt.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/airbyte-elt.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4200fc17a593cde3b61ab4d0615b457e8dceda8f
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/airbyte-elt.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/airbyte.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/airbyte.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d2f10351b25074c54c7c0e9e28838931b55edac4
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/airbyte.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/gogs-gitlab.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/gogs-gitlab.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9ff3bc3a168c6f9fab14e9c609c268c369633390
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/gogs-gitlab.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/gogs-hn.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/gogs-hn.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1aaf52d7fd5be39d6edbe5203fb0e0d220b88c64
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/gogs-hn.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/gogs.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/gogs.webp
new file mode 100644
index 0000000000000000000000000000000000000000..503255022ab02f1e547ba4f39baf9f5dbedb447d
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/gogs.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/hydra-architecture.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/hydra-architecture.webp
new file mode 100644
index 0000000000000000000000000000000000000000..227719a6115d3d780b1269afd7779ee115e9114b
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/hydra-architecture.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/hydra.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/hydra.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3617beb37ccaf3cb0f993d7ae05b3dd2bdb1d7bb
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/hydra.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/metabase-view.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/metabase-view.webp
new file mode 100644
index 0000000000000000000000000000000000000000..67d3275be673ef8ef44542ddd26a61015bcf6ff8
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/metabase-view.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/metabase.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/metabase.webp
new file mode 100644
index 0000000000000000000000000000000000000000..5a53b5f4bac85794342dab013833169349097456
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/metabase.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/nocodb-view.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/nocodb-view.webp
new file mode 100644
index 0000000000000000000000000000000000000000..2e12c91b65bdecfec31a6a84b1c19e8364ef0ee4
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/nocodb-view.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/nocodb.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/nocodb.webp
new file mode 100644
index 0000000000000000000000000000000000000000..45a24abb6c5a2f9e486f0f0de3ac1cb944c4ab75
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/nocodb.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/plausible-demo.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/plausible-demo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1bc883f86cac85f399afd69b6c4d192ef7332fcf
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/plausible-demo.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/plausible.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/plausible.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f53cfc84161e7dd40aac949fcbc2416c5385a8f8
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/plausible.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/rocketchat-slack.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/rocketchat-slack.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0edc8521f89e473fd598ce2b22b57bc54d9d07d0
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/rocketchat-slack.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/rocketchat.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/rocketchat.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3ae3fe40c7f0248822c19143669ea7d9171a68e4
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/rocketchat.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/signoz-view.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/signoz-view.webp
new file mode 100644
index 0000000000000000000000000000000000000000..652b31ff7d70637f5ba76267904582197357cba0
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/signoz-view.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/signoz.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/signoz.webp
new file mode 100644
index 0000000000000000000000000000000000000000..51d658559802400990e1bdf20a704ddc9310e16c
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/signoz.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/snowplow-real.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/snowplow-real.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d9ceada2d4c512624e2381c290211798254ba151
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/snowplow-real.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/snowplow.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/snowplow.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a02baefc44924708db396f0ef72a0ddeb9eda7c8
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/snowplow.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/star-history-open-source-alternatives-2022.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/star-history-open-source-alternatives-2022.webp
new file mode 100644
index 0000000000000000000000000000000000000000..5733fcab24d1bb99a9c97935ef911aa545e3dafa
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/star-history-open-source-alternatives-2022.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/supabase-website.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/supabase-website.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ae9c67a727ca4259829b994bff8e2084a22d9aef
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/supabase-website.webp differ
diff --git a/public/blog/assets/yearly-pick-open-source-alternatives-2022/supabase.webp b/public/blog/assets/yearly-pick-open-source-alternatives-2022/supabase.webp
new file mode 100644
index 0000000000000000000000000000000000000000..da44e9d2562511073d4fa14fb61e31a01d04ac43
Binary files /dev/null and b/public/blog/assets/yearly-pick-open-source-alternatives-2022/supabase.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/backstage-dashboard.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/backstage-dashboard.webp
new file mode 100644
index 0000000000000000000000000000000000000000..29fade8f9a13e459fdba689b683d7179da7c07ac
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/backstage-dashboard.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/backstage.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/backstage.webp
new file mode 100644
index 0000000000000000000000000000000000000000..86cb5330128e6f61acfad9c0e0f2ceed9d939c93
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/backstage.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/elastic-architecture.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/elastic-architecture.webp
new file mode 100644
index 0000000000000000000000000000000000000000..94d10bcce2fcb24385ad028949a085ec0d9e2d3a
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/elastic-architecture.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/elastic.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/elastic.webp
new file mode 100644
index 0000000000000000000000000000000000000000..31127f1b5eccc02bc26b48ad1e28799be2964e43
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/elastic.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/gartner-report.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/gartner-report.webp
new file mode 100644
index 0000000000000000000000000000000000000000..64d9c6dca3f2211827e1d384c8ea9824ba32f619
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/gartner-report.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/gitlab-devsecops.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/gitlab-devsecops.webp
new file mode 100644
index 0000000000000000000000000000000000000000..69181c9ddde570eca7943a53cc460a4affdbebb4
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/gitlab-devsecops.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/gitlab.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/gitlab.webp
new file mode 100644
index 0000000000000000000000000000000000000000..12fcffcee082c8a5eeba99874ff99a29714d7a16
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/gitlab.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/grafana-workflow.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/grafana-workflow.webp
new file mode 100644
index 0000000000000000000000000000000000000000..2bfd2676a6295b4ff49a026d8bed69cbfdcd3ae0
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/grafana-workflow.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/grafana.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/grafana.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c37234d16c816a4b615240a818234add352f4097
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/grafana.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/kong.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/kong.webp
new file mode 100644
index 0000000000000000000000000000000000000000..319b8ee0943b51292005e376620fcdc0fe0cbf4e
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/kong.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/kubernetes-container.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/kubernetes-container.webp
new file mode 100644
index 0000000000000000000000000000000000000000..61e3758e6517d29f357df5c87fcf97307c1abb9c
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/kubernetes-container.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/kubernetes-terraform.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/kubernetes-terraform.webp
new file mode 100644
index 0000000000000000000000000000000000000000..24f3cb2cbc6b6e6df54ec894c351dcbec2d820af
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/kubernetes-terraform.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/kubernetes.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/kubernetes.webp
new file mode 100644
index 0000000000000000000000000000000000000000..eec08294026bbd5513dfaaf0a01413743d898097
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/kubernetes.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/prometheus-soundcloud.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/prometheus-soundcloud.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4e519834234d67bf8be26d7b40b169f88f56e50d
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/prometheus-soundcloud.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/prometheus.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/prometheus.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7f80ad12925b97a54a891618b06d972205b289b5
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/prometheus.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/sourcegraph-search.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/sourcegraph-search.webp
new file mode 100644
index 0000000000000000000000000000000000000000..668fd519672cc56f2da7b5caee761fd09fdef0ba
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/sourcegraph-search.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/sourcegraph.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/sourcegraph.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ae96b4cdf817315cc09305c14d16e0b7f0a9e700
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/sourcegraph.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/star-history-platform-engineering-2022.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/star-history-platform-engineering-2022.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c59aa9bb26c9058bf067fc0f910122335557a320
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/star-history-platform-engineering-2022.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/temporal-swag.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/temporal-swag.webp
new file mode 100644
index 0000000000000000000000000000000000000000..464a25f44fe613144da7cddca2347cadf5577697
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/temporal-swag.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/temporal.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/temporal.webp
new file mode 100644
index 0000000000000000000000000000000000000000..fda5ff061e79f68196fb6527825bb18ec47ea5b6
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/temporal.webp differ
diff --git a/public/blog/assets/yearly-pick-platform-engineering-2022/terraform.webp b/public/blog/assets/yearly-pick-platform-engineering-2022/terraform.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7994e0a6363f8b4c115feab7de9ddc53664fe764
Binary files /dev/null and b/public/blog/assets/yearly-pick-platform-engineering-2022/terraform.webp differ
diff --git a/public/blog/data.json b/public/blog/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..d92aa8d8f2c4475819dbe3c7e210f39354e9d8d5
--- /dev/null
+++ b/public/blog/data.json
@@ -0,0 +1,145 @@
+[
+  {
+    "title": "Star History Monthly Pick | April 2023",
+    "slug": "star-history-monthly-pick-202304",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/star-history-monthly-pick-202304/banner.webp",
+    "publishedDate": "2023-05-30T09:50:06.000Z",
+    "excerpt": "AIGC-related projects are getting all the heat, but we still managed to find some interesting open-source projects that are not ChatGPT-based."
+  },  
+  {
+    "title": "SQL Chat - Chat With Your Database",
+    "slug": "sql-chat",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/sql-chat/banner.webp",
+    "publishedDate": "2023-04-20T09:50:06.000Z",
+    "excerpt": "SQL Chat is an open-source chat-based SQL client, powered by OpenAI, with built-in capabilities to connect to and query your databases."
+  },  
+  {
+    "title": "Tabby: Self-hosted AI Coding Assistant",
+    "slug": "tabby",
+    "author": "Tianzhou",
+    "featured": false,
+    "featureImage": "/blog/assets/tabby/banner.webp",
+    "publishedDate": "2023-04-15T09:50:06.000Z",
+    "excerpt": "Tabby is an AI coding assistant that's designed as an open-source tool to help developers code faster. Think of it as an open-source/on-prem alternative to GitHub Copilot."
+  },
+  {
+    "title": "Star History Monthly Pick | March 2023 / ChatGPT Edition",
+    "slug": "star-history-monthly-pick-202303",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/star-history-monthly-pick-202303/banner.webp",
+    "publishedDate": "2023-04-14T09:50:06.000Z",
+    "excerpt": "ChatGPT is getting all the heat these days, and the new trend in the DevTools department seems to be ChatGPT-based. We are taking a look at a few handy AI-enhanced tools to make your life easier."
+  },  
+  {
+    "title": "Star History Monthly Pick | February 2023",
+    "slug": "star-history-monthly-pick-202302",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/star-history-monthly-pick-202302/banner.webp",
+    "publishedDate": "2023-03-16T09:50:06.000Z",
+    "excerpt": "Some of the most fascinating open-source projects and the stories behind these projects we discovered throughout February."
+  },
+  {
+    "title": "Ockam - Build Secure-by-Design Applications at Massive Scale",
+    "slug": "ockam",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/ockam/banner.webp",
+    "publishedDate": "2023-03-15T09:50:06.000Z",
+    "excerpt": "Ockam is a suite of open source tools, programming libraries, and managed cloud services to orchestrate end-to-end encryption, mutual authentication, key management, credential management, and authorization policy enforcement – at massive scale."
+  },
+  {
+    "title": "📕 How to use GitHub Star History",
+    "slug": "how-to-use-github-star-history",
+    "author": "Mila",
+    "featureImage": "/blog/assets/how-to-use-github-star-history/how-to-use-github-star-history.webp",
+    "publishedDate": "2023-02-21T09:50:06.000Z",
+    "excerpt": "When choosing a tool (especially an open-source one) to use, what's your thought process? What are the factors that matter to you?"
+  },
+  {
+    "title": "Star History Monthly Pick | January 2023",
+    "slug": "star-history-monthly-pick-202301",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/star-history-monthly-pick-202301/star-history-monthly-pick-202301.webp",
+    "publishedDate": "2023-02-14T09:50:06.000Z",
+    "excerpt": "Some of the most fascinating open-source projects and the stories behind these projects we discovered over the past month."
+  },
+  {
+    "title": "Star History Open Source Best of 2022 | Open-Source Alternatives",
+    "slug": "star-history-open-source-2022-open-source-alternatives",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/yearly-pick-open-source-alternatives-2022/star-history-open-source-alternatives-2022.webp",
+    "publishedDate": "2023-02-02T09:50:06.000Z",
+    "excerpt": "When choosing which tools to use, do you prefer open or closed-source? What are the differences? In this post, let’s take a look at some of the most famous open-source alternatives on the market."
+  },
+  {
+    "title": "Star History Open Source Best of 2022 | Platform Engineering",
+    "slug": "star-history-open-source-2022-platform-engineering",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/yearly-pick-platform-engineering-2022/star-history-platform-engineering-2022.webp",
+    "publishedDate": "2023-01-19T09:50:06.000Z",
+    "excerpt": "Platform Engineering continues to rise in popularity in 2022 and is also featured in the Gartner Hype Cycle for Software Engineering 2022. In this post, Star History picks out 10 open-source projects in the category Platform Engineering."
+  },
+  {
+    "title": "Star History Open Source Best of 2022 | Data, Infra & DevTools",
+    "slug": "star-history-yearly-pick-2022-data-infra-devtools",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/yearly-pick-data-infra-devtools-2022/yearly-pick-data-infra-devtools-2022.webp",
+    "publishedDate": "2023-01-11T09:50:06.000Z",
+    "excerpt": "Following up on the previous roundup of top front-end os projects, Star History looks at some of the lesser known open-source projects under the category of data/infra/tools in 2022."
+  },
+  {
+    "title": "Star History Open Source Best of 2022 | Front-end",
+    "slug": "star-history-yearly-pick-2022-frontend",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/yearly-pick-frontend-2022/star-history-frontend-2022.webp",
+    "publishedDate": "2023-01-04T09:50:06.000Z",
+    "excerpt": "As a proper goodbye to 2022, Star History picks some of the most interesting open-source front-end projects in 2022."
+  }, 
+  {
+    "title": "Star History Monthly Pick | December 2022",
+    "slug": "star-history-monthly-pick-202212",
+    "author": "Mila",
+    "featured": true,
+    "featureImage": "/blog/assets/star-history-monthly-pick-202212/star-history-202212.webp",
+    "publishedDate": "2022-12-14T09:50:06.000Z",
+    "excerpt": "A few open-source projects for December 2022, hand-picked by the Star History team."
+  },
+  {
+    "title": "Re: GitHub's plan to remove Trending tab",
+    "slug": "github-trending-tab",
+    "author": "Tianzhou",
+    "featured": true,
+    "featureImage": "/blog/assets/github-trending-tab/github-trending-tab.webp",
+    "publishedDate": "2022-09-02T09:50:06.000Z",
+    "excerpt": "Our take on GitHub's intention to deprecate GitHub Trending Tab."
+  },
+  {
+    "title": "Add a live star-history chart to your GitHub README",
+    "slug": "add-a-live-star-history-chart-to-your-github-readme",
+    "author": "Steven",
+    "featured": true,
+    "featureImage": "/blog/assets/star-history-in-github-readme.png",
+    "publishedDate": "2022-03-21T09:39:06.000Z",
+    "excerpt": "Now we support embedding a live star history chart into your GitHub README. This feature is quite handy. A snippet would appear after querying the repository from our star-history.com main page; the only thing you need to do is simply copy that snippet into your GitHub README markdown file."
+  },
+  {
+    "title": "Introducing the new star-history.com",
+    "slug": "introducing-the-new-star-history-com",
+    "author": "Steven",
+    "featured": true,
+    "featureImage": "/blog/assets/star-history.png",
+    "publishedDate": "2022-01-21T09:13:05.000Z",
+    "excerpt": "After a month of hard work, we are happy to introduce you to the new star-history.com. It has been rebuilt using a modern tech stack while keeping the original sketching / xkcd feel. Besides, we have added several highly requested features..."
+  }
+]
diff --git a/public/blog/github-trending-tab.md b/public/blog/github-trending-tab.md
new file mode 100644
index 0000000000000000000000000000000000000000..11fbc34f95244d72158e34d83f954df6ffd85e10
--- /dev/null
+++ b/public/blog/github-trending-tab.md
@@ -0,0 +1,46 @@
+## News
+
+When I learned GitHub’s plan to remove the Trending tab. My immediate reaction was:
+
+![throw](/blog/assets/github-trending-tab/throw.gif)
+
+For open source projects, showing up on the GitHub Trending Tab is a braggable milestone. As someone from [HN](https://news.ycombinator.com/item?id=32681319) suggests, the Trending Tab sits on many developer’s bookmark bar:
+
+![hn](/blog/assets/github-trending-tab/hn.webp)
+
+For such a popular industry leaderboard, it’s always a challenge to be fair and pick the top N projects most people are happy with. And fair is even more subjective in the developer world.
+
+* Go vs. Rust?
+* React vs. Vue?
+* MySQL vs. PostgreSQL?
+* Vim vs. Emacs?
+
+Developers are often polarized and strongly opinionated. You are always pissing off at least half the population, even for doing nothing. Open source maintainers often question why other seemingly mediocre repos appear on the ladder while their awesome projects stay in the dark, unnoticed, after spending years of sweat.
+
+And apparently, the GitHub folks don’t have enough capacity to clean up the weed. The GitHub Trending algorithm is indeed flawed, but abruptly shutting down the entire service seems like throwing the bath water out with the baby.
+
+## Star History
+
+star-history.com runs a Twitter account [@StartHistoryHQ](https://twitter.com/starhistoryhq) posting interesting GitHub repos every day.
+
+![star-history](/blog/assets/github-trending-tab/star-history.webp)
+
+Some people DMed us asking if we use a bot to find those repos. Actually, we curate each repo manually, and GitHub Trending Tab is one of our primary sources to find those repos. For us, the Trending Tab serves as a starting point. We review the list every day and pick 1 or 2 interesting repos. Without GitHub Trending, finding the needles in the haystack would require much more effort.
+
+As someone promoting others’ repositories daily, we can sense the strong feelings around GitHub Trending. Because we often see people get excited about us promoting their open source projects, imagine how excited it would be if their projects show up on the GitHub Trending Tab. 
+
+People often complain about the ranking mystery, but mystery also brings serendipity.
+
+## Community
+
+While composing this post, I just checked [github.com](https://github.com), and they still have a dedicated Community tab. To me, Community is what GitHub differentiates itself from other VCS providers like GitLab, Bitbucket.
+
+![github-home](/blog/assets/github-trending-tab/github-home.webp)
+
+GitHub calls itself the home for the Developers. The stars, the issues, the discussions, the followers, the sponsors, and the trendings, it’s these engagements make developers have emotional bindings with GitHub.
+
+I wish GitHub could publish a detailed blog to explain the rationale behind this decision. The "low usage" reason doesn’t resonate with the [developer community](https://github.com/community/community/discussions/31643) and even sounds like an April fool’s joke. Maybe GitHub doesn’t realize it, but removing GitHub Trending could significantly weaken the emotional bindings between the developers and the platform.
+
+There do exist 3rd party websites that provide similar or even more powerful trending features, but none can match the built-in user experience and community vibe GitHub Trending Tab provides.
+
+Sad to see a step backward in the developer world 😢
\ No newline at end of file
diff --git a/public/blog/how-to-use-github-star-history.md b/public/blog/how-to-use-github-star-history.md
new file mode 100644
index 0000000000000000000000000000000000000000..5437484d0d4002e07c7c0356e8a34367c52d3aa8
--- /dev/null
+++ b/public/blog/how-to-use-github-star-history.md
@@ -0,0 +1,117 @@
+# 📕 How to use GitHub Star History
+
+When choosing a tool (especially an open-source one) to use, what's your thought process? What are the factors that matter to you?
+
+- Any other users out there?
+- Is it the most popular in this category?
+- Is this technology in decline?
+
+Here's one obvious metric I'm sure you will also investigate: its GitHub stars.
+
+We know, you can't fully trust a project's GitHub stars alone. It is, however, a good way to determine if a tool is an adequate one and if it's likely to grow, if you use it correctly.
+
+![book](/blog/assets/how-to-use-github-star-history/book.webp)
+
+Even if a project has hundreds of millions of stars now, doesn't mean that it's still gaining popularity or maintained. Or if the project had an explosive breakout in the past? There's no way of knowing these simply from gazing at the stars count. Here's when Star History comes in handy: it shows how the number of GitHub stars of a project is increasing over the years. And - it's free and [open-source](https://github.com/star-history/star-history).
+
+## User Manual
+
+![user-manual](/blog/assets/how-to-use-github-star-history/user-manual.webp)
+
+It's just a simple search box, how hard could it be? Simplicity is indeed Star History's No 1 design principal. On the other hand, it also provides some handy features for power users. Below we will show you:
+
+- How to add a repo using 3 different formats.
+- How to add multiple repos.
+- How to align the timeline to compare multiple repos.
+- How to temporality show/hide a repo in the chart.
+- How to add your GitHub personal access token to remove GitHub API limits.
+- How to embed a live star history chart inside your GitHub project [README.md](http://README.md).
+- And don't forget we also have a [chrome extension](https://chrome.google.com/webstore/detail/star-history/iijibbcdddbhokfepbblglfgdglnccfn).
+
+### How to add a repo using 3 different formats
+
+![search-bar](/blog/assets/how-to-use-github-star-history/search-bar.webp)
+
+To add a repo, you can:
+
+1. Paste its whole URL in the search bar. e.g. `https://github.com/star-history/star-history`
+2. If you are feeling lazy, skip the [https://github.com/](https://github.com/) part. e.g `star-history/star-history`
+3. When the repo name matches the organization's, writing once is enough, e.g. `star-history`. However, for something like `hashicorp/terraform` , you can't do `hashicorp` nor `terraform`, cuz they don't match and you need to specify `hashicorp/terraform`.
+
+### How to add multiple repos
+
+After adding one repo, you can continue adding more by just typing the next repo in the input box. They will be rendered in the same chart.
+
+![multiple-repos](/blog/assets/how-to-use-github-star-history/multiple-repos.webp)
+
+For example, if you were wondering about which database change management tool to use, here we have the history of their growth.
+Both [Flyway](https://flywaydb.org) and [Liquibase](https://liquibase.com) started way back and are gaining popularity over the years, but in reccent years, [Bytebase](https://bytebase.com) is picking up rapidly and has already bypassed Liquibase.
+You can not naively choose the project based on mere stars, while stars and its trajectory give you a hint about those projects worth looking at.
+
+### How to align the timeline to compare multiple repos
+
+By checking **Align timeline**, the chart will be rerendered.
+
+![align-timeline](/blog/assets/how-to-use-github-star-history/align-timeline.webp)
+
+### How to temporality show/hide a repo in the chart
+
+Instead of removing a repo from the chart, you can switch visibility of it by clicking the name in its label box.
+
+![hide-show](/blog/assets/how-to-use-github-star-history/hide-show.webp)
+
+### How to add your GitHub personal access token to remove GitHub API limits
+
+Star History is free to use, but it uses GitHub API to retrieve repository metadata, which means you need to add your personal access token from GitHub to start using Star History. Rest assured, no personal data is needed in this process.
+![home-add-access-token](/blog/assets/how-to-use-github-star-history/add-access-token.webp)
+
+1. Login to your GitHub account, go to Personal Access Tokens: [https://github.com/settings/tokens](https://github.com/settings/tokens).
+2. Click **Generate new token**.
+   ![generate-new-token](/blog/assets/how-to-use-github-star-history/generate-new-token.webp)
+
+3. Click **Generate new** **token** **(classic)**.
+   ![new-token-classic](/blog/assets/how-to-use-github-star-history/new-token-classic.webp)
+
+4. Fill in the form on the token details page,
+
+- Note: give it a name for identification.
+- Expiration: how long should it be valid for?
+- Select scopes: access boundary for this token, for Star History, **repo** access will do.
+
+When you are done, click **Generate token** at the bottom of the page.
+
+![classic-form](/blog/assets/how-to-use-github-star-history/classic-form.webp)
+
+5. MAKE SURE to copy your personal access token NOW. You WON’T be able to see it again!
+
+![personal-token-copy](/blog/assets/how-to-use-github-star-history/personal-token-copy.webp)
+
+6. Go back to [star-history.com](/), and click **Edit Access Token**. Paste the token. (It's also where you edit in the future, when it expires and you'll need to generate a new one.) Hit **Save**, et voilà, the star history of all GitHub repos are at your fingertips. Simple as that.
+
+![edit-gh-access-token](/blog/assets/how-to-use-github-star-history/edit-gh-access-token.webp)
+
+### How to embed a live star history chart inside your GitHub project [README.md](http://README.md)
+
+1. Click **Embed** below the chart.
+
+![embed](/blog/assets/how-to-use-github-star-history/embed.webp)
+
+2. You need to add your personal access token first. Copy the iframe snippet and paste it into your [README.md](http://README.md)
+
+![copy-iframe-readme](/blog/assets/how-to-use-github-star-history/copy-iframe-readme.webp)
+
+![gh-readme](/blog/assets/how-to-use-github-star-history/gh-readme.webp)
+
+### Chrome extension
+
+1. Visit [extension page](https://chrome.google.com/webstore/detail/star-history/iijibbcdddbhokfepbblglfgdglnccfn)
+   ![home-chrome-extension](/blog/assets/how-to-use-github-star-history/home-chrome-extension.webp)
+
+2. Go to any GitHub repo and click the extension. There will be a hovering
+   ![chrome-extension-working](/blog/assets/how-to-use-github-star-history/chrome-extension-working.webp)
+
+---
+
+Play around and let us know [@StarHistoryHQ](https://twitter.com/StarHistoryHQ) what you think!
+
+Special thanks to [https://kajiblo.com/git-hub-star-history/](https://kajiblo.com/git-hub-star-history/) for inspiring this post.
diff --git a/public/blog/introducing-the-new-star-history-com.md b/public/blog/introducing-the-new-star-history-com.md
new file mode 100644
index 0000000000000000000000000000000000000000..848db7357dc6f5fe9b079e7ebf3509fa65680f0b
--- /dev/null
+++ b/public/blog/introducing-the-new-star-history-com.md
@@ -0,0 +1,69 @@
+# Introducing the new star-history.com
+
+After a month of hard work, we are happy to introduce you to the new [star-history.com](http://star-history.com/). It has been rebuilt using a modern tech stack while keeping the original sketching / xkcd feel. Besides, we have added several highly requested features.
+
+## ⭐️ What is star-history
+
+> The missing GitHub star history graph.
+
+If you ever see a GitHub star chart before, it's likely from [star-history.com](https://star-history.com).
+![star-history-image](/blog/assets/star-history-image.png)
+[The star-history project](https://github.com/star-history/star-history)started around 2016 as an open source project on GitHub, it has gained momentum over the years and accumulated over 2.5K GitHub stars. Today, it ranks No.1 on various GitHub Star related search keywords.
+![star-history-google-result](/blog/assets/star-history-google-result.png)
+star-history also has a [chrome extension](https://chrome.google.com/webstore/detail/star-history/iijibbcdddbhokfepbblglfgdglnccfn).
+![star-history-chrome-extension](/blog/assets/star-history-chrome-extension.png)
+
+## 🧵 The rewrite no one noticed
+
+As [star-history](https://star-history.com) gains popularity, we have accumulated a decent backlog of good ideas suggested by our users. Recently, we finally got the resource to give an overhaul. The original app was written in plain javascript. To ease future development, we decide to choose a modern tech stack. Meanwhile, we want to keep its simplicity and the original sketching / xkcd feel. Because we believe that's the most important ingredient making it the top among 10+ other similar websites. So the first thing we do is to rewrite the entire app using a modern tech stack: Vue.js + Vite + TailwindCSS while keeping the UI look the same. Only after that, we begin to add those long-awaited features.
+
+## 🚀 The enhancements
+
+### Generate quality chart image
+
+Previously, users could only screenshot the website to get the chart image. So we develop the chart image generator. Now with a single click, star-history generates a high resolution image. Below is an example of our own star-history project:
+![star-history-image](/blog/assets/star-history-image.png)
+
+### Support timeline view mode
+
+This one also comes from our user's ask - “It would be nice to be able to compare projects in the sense how the number of stars have grown since it got launched.”
+
+It's quite common that there are multiple open source projects targeting similar segments. And very often, these projects start at different times. To implement this, we rewrite the underlying chart library to give the power of comparing repos in the same timeline. Below lists the comparison among [Vue, React, Angular, Svelte w/o timeline view](https://star-history.com/#vuejs/vue&facebook/react&angular/angular&sveltejs/svelte&Timeline):
+![star-history-date-mode](/blog/assets/star-history-date-mode.png)![star-history-timeline-mode](/blog/assets/star-history-timeline-mode.png)
+
+### Embed chart into other websites
+
+What's better than a high resolution, nice looking GitHub star history image for your repository? A live chart! Now with a single copy and paste, users can embed their observed repositories into another webpage.
+
+**Cautions:** since it's quite easy to cross the GitHub rate limit when generating the star history, we require user to supply an access Token. We only suggest user to put it inside the trusted network and do NOT give any scope permission, otherwise it will leak that user's personal data on GitHub.
+![embed-chart-with-iframe](/blog/assets/embed-chart-with-iframe.png)
+
+### Toggle repo visibility
+
+When comparing multiple repos, we now allow user to temporarily show/hide a particular one.
+![star-history-repo-selector](/blog/assets/star-history-repo-selector.png)
+
+### Support multiple repos (not new feature)
+
+star-history supports charting multiple repos in the very beginning. After adding the first repo, the user just needs to input another repo and click "View star history" button to add the next one. But we realize many star-history users didn't know this feature. Thus, we add a couple visual cues to hint user. "Toggle repo visibility" above is one of them, and we would also change the placeholder to "... add the next repository" when there is already a repo.
+![star-history-inputer](/blog/assets/star-history-inputer.png)
+
+### Shortcut to input repo
+
+GitHub repo is identified by {{organization}}/{{repository}}. For some repos, organization and repository names are the same. So if user only inputs a string without the / separator, we will try to find the repo having the same organization and repository name. e.g. If user just inputs bytebase, it will find the [bytebase/bytebase](https://github.com/bytebase/bytebase) project.
+
+### Wrap up
+
+As you can see, the above listed things are not big changes, that's why we call them enhancements. We think the original star-history version is quite solid. Unlike other similar websites offering bells and whistles, star-history only provides a single feature to chart the star history for the GitHub repos. But we try to do this one thing exceptionally well.
+
+## ✨ Blogging about open source
+
+> The world is full of "source code"—blueprints, recipes, rules—that guide and shape the way we think and act in it. We believe this underlying code (whatever its form) should be open, accessible, and shared—so many people can have a hand in altering it for the better.
+
+As this article presents, star-history also obtains a new blog section. star-history has been an open source project since birth, it's also built upon many other open source projects. And many of the above enhancements come from the users engaging with us on our GitHub project. It's an honor that this project fulfills a small need in the overall open source and GitHub ecosystem. Down the road, we plan to publish more content around open source on this blog.
+
+## 👋 Last
+
+It has been quite a long time since star-history project started, and thanks for picking us to present your beloved open source project to your audience. As an open source project ourselves, we will keep contributing to the open source world with `code` and ❤️.
+
+BTW, we also operate a twitter account [@StarHistoryHQ](https://twitter.com/StarHistoryHQ). It tweets interesting GitHub projects every day. These projects are hand picked by our staff. Follow us to receive those updates.
diff --git a/public/blog/ockam.md b/public/blog/ockam.md
new file mode 100644
index 0000000000000000000000000000000000000000..ee1dc4b39e6a9a442728048e196d434d5647dff3
--- /dev/null
+++ b/public/blog/ockam.md
@@ -0,0 +1,68 @@
+# Star History x Ockam
+
+🍾️ Welcome Ockam as Star History's first [GitHub Sponsor](https://github.com/sponsors/star-history).
+
+[Ockam](https://github.com/build-trust/ockam) is a suite of open source tools, programming libraries, and managed cloud services to orchestrate end-to-end encryption, mutual authentication, key management, credential management, and authorization policy enforcement – at massive scale.
+
+## Problem
+
+Application security has historically relied upon network perimeters and intrusion detection to keep data that moves between applications secure. However as applications become ever more distributed across private, cloud, and edge environments, it has become impossible for application developers to rely upon network security, alone, to keep data-in-motion safe.
+
+## Ockam's Solution
+
+### Secure by Design
+
+Ockam’s end-to-end secure channels guarantee authenticity, integrity, and confidentiality of all data-in-motion at the application layer. This enables a deny-by-default security posture that **exponentially reduces the vulnerability surface** of an application and gives it true control over every access decision.
+
+### Zero Trust
+
+Ockam gives you the tools to eliminate implicit trust in networks, services, and infrastructure. Applications get provable cryptographic identities to authenticate and authorize every access decision.
+
+Ockam end-to-end secure channels enable application layer encryption of all data-in-motion. The data integrity and confidentiality guarantee, of these channels, create a deny-by-default security posture that minimizes our vulnerability surface and gives our application true control over every data or service access decision.
+
+### Shift Security Left
+
+Ockam provides powerful building blocks to shift security left and make it an integral part of application design and development.
+Application layer trust guarantees along with tools to manage keys, credentials and authorization policies give you granular control on the security and privacy properties of your application.
+
+### Developer First
+
+It is hard to build and scale an application that makes identity driven trust decisions. Ockam created simple, composable building blocks so you can easily deliver secure and private applications to your customers.
+
+## Our First Impression with Ockam
+
+### The Building Blocks for Tailscale alike
+
+While Tailscale is a SaaS security solution, Ockam is the PaaS counterpart providing the underlying 
+building blocks. Ockam is a novel idea and a great addition to the industry. It greatly lowers the
+barrier to add data-in-motion security to the application. Moreover, you can also use it to build a
+security solution like Tailscale.
+
+### Rust
+
+Ockam is a security component sitting on the data plane, it must be both efficient and secure. Using
+Rust is a sane choice.
+
+### Earn Developer Trust
+
+To address to the developer audience, trust is important. This is even more so for a security product.
+Throughout Ockam's marketing website, you can see quite a few code examples, below is the one from
+the hero section.
+
+![ockam](/blog/assets/ockam/build-trust.webp)
+
+---
+
+Last but not least let's take a look at Ockam's (star) history. It has been open-sourced since 2019, and picked up pace after 2021. In early 2022, they raised [$12.5M in Series A](https://www.ockam.io/blog/series_a). The spike in late 2022 was related to the launch of [Ockam Orchestrator](https://aws.amazon.com/marketplace/pp/prodview-wsd42efzcpsxk) - its SaaS offering through AWS marketplace. 
+[This HN submission](https://news.ycombinator.com/item?id=33038384) also helped (the `Rust`, `Elixir` and `Secure` combination
+probably attracts quite a few enthusiasms from the not-easily-pleased HN readers).
+
+![ockam](/blog/assets/ockam/ockam.webp)
+
+The Ockam team also [shares their thoughts](https://www.ockam.io/blog/how_grow_popular_open_source_github) about growing the open-source community:
+
+* Listening to and supporting others
+* Being accessible and approachable
+* Building trust and giving back to the community
+
+If you want a solid and developer friendly building blocks to secure your microservices traffic, please do give [Ockam](https://github.com/build-trust/ockam) a spin.
\ No newline at end of file
diff --git a/public/blog/sql-chat.md b/public/blog/sql-chat.md
new file mode 100644
index 0000000000000000000000000000000000000000..bc3f568c6b44eb0d597254b634be86a1098f76a0
--- /dev/null
+++ b/public/blog/sql-chat.md
@@ -0,0 +1,25 @@
+# SQL Chat: Chat With Your Database
+
+[SQL Chat](https://github.com/sqlchat/sqlchat) is an open-source chat-based SQL client. It’s built by the folks at Bytebase, a database DevOps tool for teams to manage database changes efficiently, you can see why this combination can’t go wrong: a SQL client hand-crafted by a team that deals with databases. Bytebase has actually already integrated ChatGPT capabilities into their product in an older version, but apparently, it didn’t meet their expectations. They came out with a great replacement instead: SQL Chat.
+
+![sql-chat](/blog/assets/sql-chat/sqlchat.webp)
+
+## First-Impressions
+
+**Ease of Use**
+
+SQL Chat’s UI is rather straightforward. At first glance, it looks like the ChatGPT UI a lot, but with a few tweaks, for example, you can create a database connection, and start a chat within there.
+
+**Connect directly to databases**
+
+What makes SQL Chat really stand out is that you can connect directly to your database and ask the bot questions or query your database right from the chat dialog. Right now only MySQL and PostgreSQL are supported but we are hopeful that more databases are going to be available once the requests start pouring in.
+
+![sql-chat](/blog/assets/sql-chat/db-connections.webp)
+
+**Low (Free) Cost**
+
+As of now, it's 100% free to use (although we don't know if the author plans to roll out a pricing plan anytime soon). To add to that, SQL Chat is open-source, so you can always self-host your own.
+
+## Our Thoughts on SQL Chat
+
+With the advent of Generative AI, we are currently witnessing a seismic shift in the way how we interact with tools and software, ditching the traditional GUI-based and transitioning to chat-based. And SQL Chat looks like a great tool to help you builders build.
\ No newline at end of file
diff --git a/public/blog/star-history-monthly-pick-202212.md b/public/blog/star-history-monthly-pick-202212.md
new file mode 100644
index 0000000000000000000000000000000000000000..c6607f0768f5251d802edc3db8667067739afb90
--- /dev/null
+++ b/public/blog/star-history-monthly-pick-202212.md
@@ -0,0 +1,71 @@
+# Do GitHub stars matter?
+
+"The goreleaser/goreleaser-cross repo has only 26 stars, while goreleaser/goreleaser has 10k+ stars. It could mean that using goeleaser-cross has some risks."
+
+This is a quote from a previous Bytebase (our main hustle) blog, "[How to cross compile with CGO using GoReleaser and GitHub Actions](https://www.bytebase.com/blog/how-to-cross-compile-with-cgo-use-goreleaser-and-github-action)" and it received the following comment on [Reddit](https://www.reddit.com/r/programmingcirclejerk/comments/wx6kmq/the_goreleasergoreleasercross_repo_has_only_26/): stars cut right to the chase.
+
+![reddit comment](/blog/assets/star-history-monthly-pick-202212/reddit-comment.webp)
+
+While stars are not the most important metric for open-source projects, star history is a way to measure trends in a project such as whether it is maintained over time, whether it works, and how well it is recognized.
+
+Every day (well, almost) we share some interesting open-source projects on the [@StarHistoryHQ](https://twitter.com/StarHistoryHQ) Twitter account.
+
+Each month, we will select some of these projects and make a collection. DM us if you'd like to see your project featured! 🤓
+
+![star history twitter](/blog/assets/star-history-monthly-pick-202212/star-history-twitter.webp)
+
+## ✍️ memos
+
+[https://github.com/usememos/memos](https://github.com/usememos/memos)
+
+![memos star history](/blog/assets/star-history-monthly-pick-202212/star-history-20221214-memos.webp)
+
+memos is a lightweight notebook/knowledge base that supports private deployments to quickly jot down your ideas, and also supports recording and sharing like Twitter.
+
+It has a rich and active community with many third-party tools contributed by community users, including: 
+
+- Native APP: iOS and Android
+- Chrome Plugin
+- WeChat applets
+- Telegram bot
+- Logseq plugin
+
+![memos demo](/blog/assets/star-history-monthly-pick-202212/memos-demo.webp)
+
+## StepCI
+
+[https://github.com/stepci/stepci](https://github.com/stepci/stepci)
+
+StepCI is a CI tool that can help you test and monitor your (numerous) APIs.
+
+![stepci demo](/blog/assets/star-history-monthly-pick-202212/stepci-demo.webp)
+
+What's remarkable is that their star history graph also looks like a step ;)
+
+![stepci star history](/blog/assets/star-history-monthly-pick-202212/star-history-2022121-stepci.webp)
+
+## GreptimeDB
+
+[https://github.com/GreptimeTeam/greptimedb](https://github.com/GreptimeTeam/greptimedb)
+
+![greptimedb star history](/blog/assets/star-history-monthly-pick-202212/star-history-20221214-greptimedb.webp)
+
+GreptimeDB (again, as its name suggests) is a distributed time-series database.
+
+From the [internal design doc](https://greptime.com/blogs/2022-12-08-GreptimeDB-internal-design), they mentioned “Folks are also looking for seamless shifting and scaling because they are holding too much data but receiving too little value from it. They are keen to have better analysis and insights. It's hard, but it's not all impossible.” 
+
+![greptimedb architecture](/blog/assets/star-history-monthly-pick-202212/greptimedb-architecture.webp)
+
+## DuckDB
+
+[https://github.com/duckdb/duckdb](https://github.com/duckdb/duckdb)
+
+![duckdb star history](/blog/assets/star-history-monthly-pick-202212/star-history-20221214-duckdb.webp)
+
+(Curious about what happened in late 2020 tho)
+
+DuckDB is an analytical database with an SQLite-like architecture that can run and analyze data in a running process. MotherDuck, which recently [announced $47.5 million in Series A funding](https://www.bytebase.com/blog/motherduck-from-sqlite-to-the-docker-for-data), is based on DuckDB.
+
+![what's duckdb](/blog/assets/star-history-monthly-pick-202212/whats-duckdb.webp)
+
+Well that's it for now folks, see you next month!
\ No newline at end of file
diff --git a/public/blog/star-history-monthly-pick-202301.md b/public/blog/star-history-monthly-pick-202301.md
new file mode 100644
index 0000000000000000000000000000000000000000..5cdb0f9b0b07ecf8fc4c99811db7a8a2d1ccfb20
--- /dev/null
+++ b/public/blog/star-history-monthly-pick-202301.md
@@ -0,0 +1,58 @@
+# Star History Monthly Pick | January 2023
+
+Happy February! Hope you all had a lovely January. Can't believe it's already time to share Star History's January open-source picks!
+
+In case you don't know, each month Star History picks out some of the most fascinating open-source projects that we share over [@StarHistoryHQ](https://twitter.com/StarHistoryHQ), and also try to explore the stories behind these projects.
+
+## Hermes
+
+![hermes](/blog/assets/star-history-monthly-pick-202301/hermes.webp)
+
+[Hermes](https://github.com/hashicorp-forge/hermes) is HashiCorp's newly open-sourced document management system. Previously an internal tool, it is designed to help team members write, review, approve, discover, and revoke documents. It currently supports Google Workspace, but it tops Google Docs in that you can directly request reviews, which is fantastic.
+
+![hermes-docs](/blog/assets/star-history-monthly-pick-202301/hermes-docs.webp)
+
+## Lago
+
+![lago](/blog/assets/star-history-monthly-pick-202301/lago.webp)
+
+[Lago](https://github.com/getlago/lago) is a metering and usage-based billing tool that can be seen as an open-source alternative to Chargebee, Recurly, or Stripe Billing. You can deploy it yourself (the open-source version) or use their cloud version. Dealing with complex billing logic is a headache for most companies, but Lago is a convenient low-code tool that allows users to create billing metrics and plans directly using the UI or API.
+
+![lago-billing](/blog/assets/star-history-monthly-pick-202301/lago-billing.webp)
+
+Lago was originally a no-code reverse ETL tool designed for growth teams, but their original product didn't quite fit their target audience (it turns out the no-code tool was actually used by engineers), and eventually [pivoted](https://www.getlago.com/blog/why-we-moved-away-from-the-no-code-reverse-etl-space) to become what it is now.
+
+## Mafs
+
+![mafs](/blog/assets/star-history-monthly-pick-202301/mafs.webp)
+
+[Mafs](https://github.com/stevenpetryk/mafs) is a set of React components that can be used to create beautiful math visualizations. You can deploy it locally, and it also has a playground that can be generated directly in your browser. If I had this in high school, I'm sure I would've enjoyed Algebra more.
+
+![mafs-playground](/blog/assets/star-history-monthly-pick-202301/mafs-playground.webp)
+
+## PRQL
+
+![prql](/blog/assets/star-history-monthly-pick-202301/prql.webp)
+
+[PRQL](https://github.com/PRQL/prql) is Pipelined Relational Query Language, pronounced "Prequel" (just the opposite of SQL/Sequel). Like SQL, PRQL is readable and declarative; however, unlike SQL, it supports abstract concepts such as variables and functions. Moreover, PRQL is linear: each query line converts the result of the previous line. This should make writing PRQL statements much more straightforward.
+
+![prql-statement](/blog/assets/star-history-monthly-pick-202301/prql-statement.webp)
+
+### ZITADEL
+
+![zitadel](/blog/assets/star-history-monthly-pick-202301/zitadel.webp)
+
+Auth0's [open-source alternative](https://zitadel.com/blog/zitadel-vs-auth0) [ZITADEL](https://github.com/zitadel/zitadel) is a user login and account management solution that comes in both open-source and SaaS versions, which raised a $2.5M seed round in 2022. Their vision is to let developers focus on building applications without caring about user identity management. Love how rigorous they are in every little detail, you'd want that for your authorization system!
+
+![zitadel-details](/blog/assets/star-history-monthly-pick-202301/zitadel-details.webp)
+
+## Wrap-up
+
+Well, that's it for February’s roundup. Hope you enjoyed it and see you next month!
+
+BTW - we did a roundup of "Open Source Best of 2022" series over the course of January, make sure to check it out 😆!
+
+1. [Open Source Best of 2022 - Front-end](/blog/star-history-yearly-pick-2022-frontend)
+1. [Open Source Best of 2022 - Data, Infra & DevTools](/blog/star-history-yearly-pick-2022-data-infra-devtools)
+1. [Open Source Best of 2022 - Platform Engineering](/blog/star-history-open-source-2022-platform-engineering)
+1. [Open Source Best of 2022 - Open-source Alternatives](/blog/star-history-open-source-2022-open-source-alternatives)
\ No newline at end of file
diff --git a/public/blog/star-history-monthly-pick-202302.md b/public/blog/star-history-monthly-pick-202302.md
new file mode 100644
index 0000000000000000000000000000000000000000..d155364670dadc3e6ba72e51dd90b81529740dfd
--- /dev/null
+++ b/public/blog/star-history-monthly-pick-202302.md
@@ -0,0 +1,75 @@
+# Star History Monthly Pick | February 2023
+
+🌸 Spring has sprung (read: whaaat how is it already March) and it’s time to take a closer look at Star History’s picks for February!
+
+In case you didn’t know, each month Star History picks out some of the most fascinating open-source projects that we share over [@StarHistoryHQ](https://twitter.com/StarHistoryHQ), and also tries to explore the stories behind these projects.
+
+## Kruise
+
+![kruise](/blog/assets/star-history-monthly-pick-202302/kruise.webp)
+
+[OpenKruise](https://github.com/openkruise/kruise) automates operations like deployment, upgrade, ops and maintanance for your applications. It is developed based on Alibaba's accumulated best practices in large-scale application management. A brief summary of OpenKruise's history: it was [announced](https://www.alibabacloud.com/blog/595071) at KubeCon 2019 and was donated to CNCF at the end of 2020. Just this last month, they became a [CNCF incubation project](https://www.cncf.io/blog/2023/03/02/openkruise-becomes-a-cncf-incubating-project/)! 🎉🎉🎉 What a whirlwind of a journey.
+
+Kruise already has [40+ users](https://github.com/openkruise/kruise/issues/289), as per their "wanted" board, it's certainly a smart way to collect user info (and gather user requests)!
+
+## tbls
+
+![tbls](/blog/assets/star-history-monthly-pick-202302/tbls.webp)
+
+[tbls](https://github.com/k1LoW/tbls) presents a full range of database structure information. Supported databases include PostgreSQL, MySQL, MariaDB, SQLite, BigQuery, etc. Another handy feature is checking differences between databases.
+
+![tbls-diff](/blog/assets/star-history-monthly-pick-202302/tbls-diff.webp)
+
+The project has been open-sourced for 5+ years, but the number of stars had a spike earlier this year. Anyone has any idea what happened in between?
+
+## Telegraf
+
+![telegraf](/blog/assets/star-history-monthly-pick-202302/telegraf.webp)
+
+[Telegraf](https://github.com/influxdata/telegraf) is a plugin-driven server agent that collects and sends metrics and events from databases, systems and IoT sensors and outputs them to data storage systems, and makes it possible for real-time monitoring and analysis.
+
+It was open-sourced in 2015 by InfluxData, which closed a whopping $81 million in [Series E](https://www.influxdata.com/blog/influxdata-closes-series-e-round-and-raises-81-million/) funding this February 💰. Back then, Telegraf was first developed to meet the needs of InfluxDB, a time-based database, to collect and process different types of data and send it to InfluxDB for storage and analysis. Telegraf has since evolved into a standalone software. Despite it not being InfluxData's star product, it doesn't stop its ecosystem from thriving, they now have 200+ input and 50+ output plugins that can integrate with a variety of data storage and processing systems.
+
+![telegraf-architecture](/blog/assets/star-history-monthly-pick-202302/telegraf-architecture.webp)
+
+## Trigger.dev
+
+![triggerdotdev](/blog/assets/star-history-monthly-pick-202302/triggerdotdev.webp)
+
+[Trigger.dev](https://github.com/triggerdotdev/trigger.dev) is a developer-first open-source Zapier alternative that allows developers to create workflows directly in code. Developers often have to help non-tech people build workflows in no/low-code tools, which rely on sacrificing customization for convenience. For developers, however, it's not *that* complicated to build, test, and run workflows on their own.
+
+Of course, you can also go straight to the other extreme: create notifications directly from GitHub to Slack via Slack's webhook system, though you have no control over how this alert appears on your Slack or interacts between the two applications. Trigger.dev already integrates with GitHub and Slack, which means you can create a customizable workflow directly in code that you can later customize and extend to meet your needs. trigger.dev now supports GitHub, Notion, WhatsApp, Resend, Airtable, and Sendgrid integration, which isn't much, but is well enough for basic needs.
+
+Going through their Twitter feed, it looks like the Trigger.dev team was researching API-related things last August. The site with the highest number of votes, apihero.run, now redirects to trigger.dev 😆.
+
+![triggerdotdev-api](/blog/assets/star-history-monthly-pick-202302/triggerdotdev-api.webp)
+
+But it looks like they eventually went after SDK, and officially released earlier this year (which [landed](https://news.ycombinator.com/item?id=34610686) on the HN front page).
+
+![triggerdotdev-hn](/blog/assets/star-history-monthly-pick-202302/triggerdotdev-hn.webp)
+
+## Trustfall
+
+![trustfall](/blog/assets/star-history-monthly-pick-202302/trustfall.webp)
+
+[Trustfall](https://github.com/obi1kenobi/trustfall) can query any data source: websites, text files or databases. It was actually open-sourced last year, but it was posted by someone to [HN](https://news.ycombinator.com/item?id=34705246) and then caught fire.
+
+![trustfall-hn](/blog/assets/star-history-monthly-pick-202302/trustfall-hn.webp)
+
+Here's an intro by the author himself: GraphQL, OpenAPI, JSON (with JSON schema or not), SQL, RDF/SPARQL–and none of them can natively talk to each other. Sure, you can stick JSON into Postgres, or compile GraphQL to SQL -- I've done both in production and it's always ultimately a poor fit because you're cramming one system into another when it was never originally designed to support that.
+
+Say you want to query the GitHub or Twitter accounts of HN users that have commented on HN submissions about OpenAI. This data is available from Firebase and Algolia's HN APIs, but you will need to write a script to look it up – but would anyone really bother to do so? Or is it just not really worth it? This is exactly what Trustfall is trying to solve.
+
+## Last but not least
+
+🍾 Star History is happy to welcome [Ockam](/blog/ockam) as our first [GitHub Sponsor](https://github.com/sponsors/star-history).
+
+Rest assured, Star History's monthly recaps will remain neutral: we will continue to explore the most interesting open-source projects, and there's no sponsored content in this section.
+
+And - make sure to check out our previous round-ups:
+
+1. [Star History Monthly Pick | January 2023](/blog/star-history-monthly-pick-202301)
+2. [Open Source Best of 2022 - Front-end](/blog/star-history-yearly-pick-2022-frontend)
+3. [Open Source Best of 2022 - Data, Infra & DevTools](/blog/star-history-yearly-pick-2022-data-infra-devtools)
+4. [Open Source Best of 2022 - Platform Engineering](/blog/star-history-open-source-2022-platform-engineering)
+5. [Open Source Best of 2022 - Open-source Alternatives](/blog/star-history-open-source-2022-open-source-alternatives)
\ No newline at end of file
diff --git a/public/blog/star-history-monthly-pick-202303.md b/public/blog/star-history-monthly-pick-202303.md
new file mode 100644
index 0000000000000000000000000000000000000000..42c94cff2bd1d079fbf890d931d17d4f08a31168
--- /dev/null
+++ b/public/blog/star-history-monthly-pick-202303.md
@@ -0,0 +1,80 @@
+# Star History Monthly Pick | March 2023 aka ChatGPT Edition
+
+ChatGPT is getting all the heat these days, and the new trend in the DevTools department seems to be ChatGPT-based. Let's take a look at a few handy AI-enhanced tools to make your life easier😋.
+
+## Auto-GPT
+
+![autogpt](/blog/assets/star-history-monthly-pick-202303/autogpt.webp)
+
+[Auto-GPT](https://github.com/Torantulino/Auto-GPT) is powered by GPT-4 and can autonomously reflect on and improve its behavior.
+For example, if you plan to create an application program, you really only need to describe it using natural language, and Auto-GPT can [automatically generate and execute the code](https://twitter.com/SigGravitas/status/1642181498278408193), as well as independently debug and fix any issues.
+
+Although Auto-GPT is not a mature product and only an experiment (yet), imagine AI running completely autonomously to complete your daily work for you is just around the corner is still mind-blowing.
+
+## 🧠 Awesome ChatGPT Prompts
+
+![awesome-chatgpt-prompts](/blog/assets/star-history-monthly-pick-202303/awesome-chatgpt-prompts.webp)
+
+It's not easy to come up with effective prompts every time. Someone [compiled a collection](https://github.com/f/awesome-chatgpt-prompts) of commonly used prompts, such as asking ChatGPT to be your social media manager or helping you translate what you wrote into emojis 🤷‍♀️.
+
+![prompts](/blog/assets/star-history-monthly-pick-202303/prompts.webp)
+
+## ChatGPT Retrieval Plugin
+
+![chatgpt-retrieval-plugin](/blog/assets/star-history-monthly-pick-202303/chatgpt-retrieval-plugin.webp)
+
+This is a [plugin](https://github.com/openai/chatgpt-retrieval-plugin) by the almighty OpenAI themselves. By connecting ChatGPT to an instance of a vector database, you can use natural language queries to perform semantic searches and retrievals on personal or organizational documents, thereby obtaining the most relevant document fragments.
+
+![retrieve-docs](/blog/assets/star-history-monthly-pick-202303/retrieve-docs.webp)
+
+Moreover, this plugin can memorize and save fragments of your conversation with ChatGPT to a vector database, allowing ChatGPT to remember and retrieve information from your previous conversations.
+
+## Glarity
+
+![glarity](/blog/assets/star-history-monthly-pick-202303/glarity.webp)
+
+[Glarity](https://github.com/sparticleinc/chatgpt-google-summary-extension) is a Chrome extension that provides summaries for web pages, such as summaries of Google search results/YouTube videos/news pages (no more browsing through pages or watching long videos!).
+
+![glarity-summary](/blog/assets/star-history-monthly-pick-202303/glarity-summary.webp)
+
+## OpenAI Translator
+
+![openai-translator](/blog/assets/star-history-monthly-pick-202303/openai-translator.webp)
+
+[OpenAI Translator](https://github.com/yetone/openai-translator) is a browser extension/desktop application for translation. In addition to basic translation functions, it can also polish, summarize, and analyze your content (and even explain code), maximizing AI's contribution to the language department. (Sidenote: Google Translate and DeepL, y'all need to take notes 😢).
+
+![openai-translator-ui](/blog/assets/star-history-monthly-pick-202303/openai-translator-ui.webp)
+
+## OpenPrompt
+
+![openprompt](/blog/assets/star-history-monthly-pick-202303/openprompt.webp)
+
+[OpenPrompt](https://github.com/timqian/openprompt.co) can actually be looked at as GitHub for ChatGPT: you can create, search, use, and share ChatGPT Prompts.
+
+![openprompt-home](/blog/assets/star-history-monthly-pick-202303/openprompt-home.webp)
+
+## ShareGPT
+
+![sharegpt](/blog/assets/star-history-monthly-pick-202303/sharegpt.webp)
+
+[ShareGPT](https://github.com/domeccleston/sharegpt) is a Chrome extension that can generate a permanent link for your conversation with ChatGPT. This way, you can easily share your conversation with your friends without having to take multiple screenshots.
+
+For example, check out @steventey's discussion with ChatGPT regarding the meaning of life: [https://sharegpt.com/c/oPt72P3](https://sharegpt.com/c/oPt72P3)
+
+It's also worth mentioning [Vicuna](https://pub.towardsai.net/meet-vicuna-the-latest-metas-llama-model-that-matches-chatgpt-performance-e23b2fc67e6b) is trained by fine-tuning a LLaMA base model using approximately 70,000 user-shared conversations gathered from ShareGPT. And the results are quite encouraging according to their own benchmark.
+
+## SQL Chat
+
+![sqlchat](/blog/assets/star-history-monthly-pick-202303/sqlchat.webp)
+
+[SQL Chat](https://github.com/sqlchat/sqlchat) is a chat-based SQL client. You can interact with your databases (currently supporting MySQL and PostgreSQL) using natural language directly in the dialogue box. Check out our first impression of [SQL Chat](/blog/sql-chat).
+
+Big thumbs up for the newly added support for Dark Mode 🧛!
+
+![darkmode](/blog/assets/star-history-monthly-pick-202303/darkmode.webp)
+
+## My Two Pennies 🪙
+
+With ChatGPT in our lives, it seems like we don't have to do much of anything anymore: does that mean we are soon to be replaced by AI?
+
+The ideal solution would be to have AI help us improve efficiency and do things better. Letting ChatGPT help us write SQL doesn't mean we don't need to master SQL and database knowledge proficiently; or having an [AI code assistant](/blog/tabby) doesn't mean we don't need to master the art of coding. Instead, it means we can focus on the more important things and let AI do the dirty work.
\ No newline at end of file
diff --git a/public/blog/star-history-monthly-pick-202304.md b/public/blog/star-history-monthly-pick-202304.md
new file mode 100644
index 0000000000000000000000000000000000000000..11a597a90f8fbd641083b8cf814ab8e6725b2d2f
--- /dev/null
+++ b/public/blog/star-history-monthly-pick-202304.md
@@ -0,0 +1,81 @@
+# Star History Monthly Pick | April 2023
+
+AI is still the trend of April. But amidst the AICG wave, we still managed to locate some interesting projects that are not directly related to ChatGPT / LLM / AI / ML, kudos to us!
+
+## Azimutt
+
+![azimutt](/blog/assets/star-history-monthly-pick-202304/azimutt.webp)
+
+[Azimutt](https://github.com/azimuttapp/azimutt) is an Entity Relationship Diagram (ERD) targeting real world database schema, and they are usually big & messy.
+
+![azimutt-erd](/blog/assets/star-history-monthly-pick-202304/azimutt-erd.webp)
+
+The problem with existing database table tools:
+
+- Traditional ERDs always show everything. When you have more than 50 tables, they are useless.
+- Data catalogs are primarily focused on data governance and lineage in big data sector.
+
+Azimutt was originally built to simply help developers understand the relational databases behind their applications more easily, but has now evolved to design, explore, document, and analyze databases.
+
+## Ballerine
+
+![ballerine](/blog/assets/star-history-monthly-pick-202304/ballerine.webp)
+
+[Ballerine](https://github.com/ballerine-io/ballerine) is an open-source startup focused on user risk decisioning infrastructure that helps banks or Fintech companies automate their decisions for customer and business account-opening (KYC, KYB). They actually just [announced](https://techcrunch.com/2023/05/23/ballerine-brings-open-source-to-banks-risk-and-identity-decision-making/) a $5 million seed round of funding last week.
+
+Financial institutions, for example, certainly want to onboard new customers at a minimal cost, but they also have to find a balance between speed and their responsibility to relevant regulations to ensure there is no fraud, and Ballerine is here to help them do that smoothly.
+
+Their [debut on HN](https://news.ycombinator.com/item?id=33396982) was also a big success (although there is a certain randomness in being on the HN frontpage, but we do love the creativity of the title)
+
+![ballerine-hn](/blog/assets/star-history-monthly-pick-202304/ballerine-hn.webp)
+
+## Linen
+
+![linen](/blog/assets/star-history-monthly-pick-202304/linen.webp)
+
+[Linen](https://github.com/linen-dev/linen.dev) is a search engine friendly community chat tool that can be used as an alternative to Discord or Slack.
+
+![linen-site](/blog/assets/star-history-monthly-pick-202304/linen-site.webp)
+
+SEO-friendly is obviously helpful for many communities, but the idea of a chat tool being indexed by Google got some folks [alerted](https://news.ycombinator.com/item?id=35718417#35722214). Whether "Google searchable" is a brilliant idea or not remains to be seen.
+
+## Plane
+
+![plane](/blog/assets/star-history-monthly-pick-202304/plane.webp)
+
+[Plane](http://github.com/makeplane/plane) is the open-source Jira/Linear alternative.
+
+The UI doesn't look far off from other PM tools, but they have incorporated OpenAI capabilities. For example, you can use AI to generate descriptions for your issues.
+
+![plane-ui](/blog/assets/star-history-monthly-pick-202304/plane-ui.webp)
+
+## Twitter Algorithm
+
+Finally, of course, let's not not forget [Twitter's algorithm](http://github.com/twitter/the-algorithm), open-sourced on April Fool's. It got ~30k Stargazers on the first day alone.
+
+![twitter](/blog/assets/star-history-monthly-pick-202304/twitter.webp)
+
+In addition to Elon's own warm-up on his social media, the hype is also high because the recommendation ranking algorithm for most companies is top secret. This is definitely a first🤫.
+
+However, things are changing at lightning speed at Twitter Engineering⚡️. They have made changes to the algorithm already, marketers, make sure you are up to speed.
+
+![twitter-algorithm](/blog/assets/star-history-monthly-pick-202304/twitter-algorithm.webp)
+
+## Last but not least
+
+That's it for April. As promised, almost no AI-related content! Isn't that refreshing.
+
+### And - make sure to check out our previous editions:
+
+**Monthly Picks**
+
+1. [March 2023 (ChatGPT Edition)](/blog/star-history-monthly-pick-202303)
+2. [February 2023](/blog/star-history-monthly-pick-202302)
+3. [January 2023](/blog/star-history-monthly-pick-202301)
+
+**Best of 2022**
+
+1. [Front-end](/blog/star-history-yearly-pick-2022-frontend)
+2. [Data, Infra & DevTools](/star-history-yearly-pick-2022-data-infra-devtools)
+3. [Platform Engineering](/blog/star-history-open-source-2022-platform-engineering)
+4. [Open-source Alternatives](/blog/star-history-open-source-2022-open-source-alternatives)
\ No newline at end of file
diff --git a/public/blog/star-history-open-source-2022-open-source-alternatives.md b/public/blog/star-history-open-source-2022-open-source-alternatives.md
new file mode 100644
index 0000000000000000000000000000000000000000..01092ecf2b1d4a34467b381265ae1c6802a1461f
--- /dev/null
+++ b/public/blog/star-history-open-source-2022-open-source-alternatives.md
@@ -0,0 +1,134 @@
+# Star History open-source Best of 2022 | open-source Alternatives
+
+When choosing which tools to use, do you prefer open or closed-source? What are the differences? In this post, let’s take a look at some of the most famous open-source alternatives on the market.
+
+BTW: open-source =! free, closed source =! paid. While some of the open-source tools are completely free, some tools offer commercial versions and support, while their non-open-source counterparts are instead, free.
+
+## Airbyte - Fivetran alternative
+
+![airbyte](/blog/assets/yearly-pick-open-source-alternatives-2022/airbyte.webp)
+
+[Airbyte](https://github.com/airbytehq/airbyte) is an open-source data integration (ELT) tool created in July 2020. It raised 3 consecutive funding rounds within 2021, from Seed ($5.2M) -> Series A ($26M) -> Series B ($150M).
+
+An enterprise’s data is usually scattered across multiple data sources. The traditional solution is through ETL (Extract, Transform, Load), which is to extract and process data, before transferring it to a data warehouse for easy use when needed. [dbt](https://getdbt.com/) and [Fivetran](https://www.fivetran.com/) are already serious contenders on this track. With the rise of cloud data warehouses led by Snowflake, the industry paradigm has shifted from ETL to ELT. Airbyte believes that to take ELT a step further ([Fivetran's philosophy](https://www.fivetran.com/blog/what-is-elt): data collected from multiple sources is extracted, sent to a data warehouse, and then transformed into data that is actually useful to analysts), [EL and T will gradually decouple](https://airbyte.com/blog/why-the-future-of-etl-is-not-elt-but-el): instead of ELT, EL completely decouples any transformations that may occur during L - T, and makes it easier to meet the specific needs of different companies and different businesses (some of which may not even need any transformations).
+
+![airbyte-elt](/blog/assets/yearly-pick-open-source-alternatives-2022/airbyte-elt.webp)
+
+## Gogs - GitHub alternative
+
+![gogs](/blog/assets/yearly-pick-open-source-alternatives-2022/gogs.webp)
+
+[Gogs](https://github.com/gogs/gogs) is a long-established self-service Git service. While GitHub is an online, closed-source (yes you read that right) code hosting platform, Gogs can be thought of as GitHub on your own server and was featured in Hacker News 8 years ago.
+
+![gogs-hn](/blog/assets/yearly-pick-open-source-alternatives-2022/gogs-hn.webp)
+
+In fact, Gogs is [defined by the author](https://blog.gopheracademy.com/birthday-bash-2014/gogs-gitlab-alternative-in-go/) as a replacement for GitLab (which is actually open-source) written in Golang. But what's the point of anything else, when you can't install and run the service on your own machine, despite the huge ecosystem, powerful features and integrations?
+
+![gogs-gitlab](/blog/assets/yearly-pick-open-source-alternatives-2022/gogs-gitlab.webp)
+
+## Hydra - Snowflake alternative
+
+![hydra](/blog/assets/yearly-pick-open-source-alternatives-2022/hydra.webp)
+
+[Hydra](https://github.com/hydradatabase/hydra) wanted to build a low-cost open data warehouse solution, as opposed to Snowflake, so they built one on top of Postgres. They snatched a $3.1M seed round in early 2022 and are a member of Y Combinator’s Winter 2022 class. Founder Joseph Sciarrino believes that an organization's data shouldn't be locked up in a vendor's proprietary software. As a heavy Postgres user, he solved this problem by decoupling Postgres' query, compute, and storage layers and building Hydra on top of it. This way, users can continue to use all existing Postgres ecosystems and tools.
+
+![hydra-architecture](/blog/assets/yearly-pick-open-source-alternatives-2022/hydra-architecture.webp)
+
+## Metabase - Tableau alternative
+
+![metabase](/blog/assets/yearly-pick-open-source-alternatives-2022/metabase.webp)
+
+[Metabase](https://github.com/metabase/metabase) is an open-source BI tool for data visualization, data analysis and report generation, and more.
+
+Metabase is very thorough, and you can tell they pay a lot of attention to non-technical users (product managers, marketers, and operations). Even if you don’t know SQL syntax, you can use its visual query builder to answer your own questions and explore freely, no longer limited by the Dashboards already built.
+
+![metabase-view](/blog/assets/yearly-pick-open-source-alternatives-2022/metabase-view.webp)
+
+## NocoDB - Airtable alternative
+
+![nocodb](/blog/assets/yearly-pick-open-source-alternatives-2022/nocodb.webp)
+
+[NocoDB](https://github.com/nocodb/nocodb) is a low-code database platform that closed a $10.5M seed round in late 2022. It supports converting different types of databases and file formats into online spreadsheets. While NocoDB has database capabilities, it's really more of a spreadsheet.
+
+![nocodb-view](/blog/assets/yearly-pick-open-source-alternatives-2022/nocodb-view.webp)
+
+Spreadsheets are so common and intuitive for most people, NocoDB's idea is to make spreadsheets exist in SQL databases, it can transfer any data source in an organization into a spreadsheet interface. As a low-code tool, it lowers the user barrier so that even if you have zero development experience, you can still participate in real collaborative work, which requires real business data.
+
+According to its founder, NocoDB received more than 1M downloads in the first 10 weeks of open-source. It looks like their guess is correct: operating a database is daunting, but operating a spreadsheet is much more grounded.
+
+## Plausible Analytics - Google Analytics alternative
+
+![plausible](/blog/assets/yearly-pick-open-source-alternatives-2022/plausible.webp)
+
+Although Google Analytics is free, if you don’t want to indulge in Google's attempts to collect and analyze users’ personal information, try [Plausible Analytics](https://github.com/plausible/analytics). It’s not free, but now has [nearly 10,000 paying customers](https://twitter.com/PlausibleHQ/status/1617443230920101889) and an ARR (Annual Recurring Revenue) of [$1M](https://plausible.io/blog/open-source-saas).
+
+As a lightweight (<1 KB) and privacy-focused open-source alternative to Google Analytics, Plausible focuses on user privacy (no cookies, full compliance with GDPR, CCPA, and PECR) and you can still have 100% say over your website data. Plausible's [demo page](https://plausible.io/plausible.io) lets you see their official website traffic data in real time, which is so cool!
+
+![plausible-demo](/blog/assets/yearly-pick-open-source-alternatives-2022/plausible-demo.webp)
+
+## Rocket.Chat - Slack alternative
+
+![rocketchat](/blog/assets/yearly-pick-open-source-alternatives-2022/rocketchat.webp)
+
+[Rocket.Chat](https://github.com/RocketChat/Rocket.Chat) was founded in 2015, with the last funding round worth $19M in 2021. [Originally created](https://www.synopsys.com/blogs/software-security/rocket-chat-privately-hosted-chat-services/) as a live chat extension for an internal CRM, it was then open-sourced and commercialized. It is intended for organizations that need more control over their communications because it supports local deployment.
+
+In addition to the aforementioned better security and control, Rocket.Chat's additional feature over Slack is quite lovely: “Omnichannel”, which integrates messages from other platforms (WhatsApp, SMS, Facebook, Twitter, Telegram, and Email) into one single platform.
+
+![rocketchat-slack](/blog/assets/yearly-pick-open-source-alternatives-2022/rocketchat-slack.webp)
+
+## SigNoz - Datadog alternative
+
+![signoz](/blog/assets/yearly-pick-open-source-alternatives-2022/signoz.webp)
+
+[SigNoz](https://github.com/SigNoz/signoz) is an open-source APM tool that focuses on the observability of microservice applications. When you have distributed systems based on microservices, distributed tracing becomes necessary. This can locate and identify your problems quickly instead of wasting time checking multiple logs and dashboards.
+
+![signoz-view](/blog/assets/yearly-pick-open-source-alternatives-2022/signoz-view.webp)
+
+SigNoz’s recent [blogs](https://signoz.io/blog/) might not be the most neutral pieces, but if you want to learn more about monitoring, logging, and tracking topics, it is a good read.
+
+- 7 Open-Source Log Management Tools that you may consider in 2023
+- Top 9 observability tools in 2023 perfect for microservices
+- Top 11 Splunk Alternatives that you may consider in 2023
+- Top 13 open-source APM tools in 2023
+
+## Snowplow - Segment alternative
+
+![snowplow](/blog/assets/yearly-pick-open-source-alternatives-2022/snowplow.webp)
+
+[Snowplow](https://github.com/snowplow/snowplow) is a behavioral data platform that closed a $40M Series B round in 2022. Snowplow enables the collection of behavioral data from mobile apps and websites (how users interact with products, including impressions, clicks, video playback or even custom events of your choosing) to better understand users and determine business strategy.
+
+Snowplow is a vehicle to collect snow, which also reflects Snowplow's intention to collect data. It’s a rather unique name amongst the byte, meta, bases, dbs!
+
+![snowplow-real](/blog/assets/yearly-pick-open-source-alternatives-2022/snowplow-real.webp)
+
+## Supabase - Firebase alternative
+
+![supabase](/blog/assets/yearly-pick-open-source-alternatives-2022/supabase.webp)
+
+[Supabase](https://github.com/supabase/supabase) is an open-source Firebase alternative that provides a Backend-as-a-Service for building applications but it uses Postgres instead of NoSQL.
+
+The first thing I noticed about Supabase is their tagline: “Build in a weekend. Scale to millions”. The messaging, storytelling, and positioning are in such harmony.
+
+![supabase](/blog/assets/yearly-pick-open-source-alternatives-2022/supabase-website.webp)
+
+CEO Paul Copplestone [mentioned](https://open.spotify.com/episode/25C64y5kcKtPMz0UzE0ury) that Supabase was first positioned as "real-time Postgres", and after failing to find users, he found that although everyone loved Postgres, everyone was using Firebase, so Supabase became the "open-source Firebase alternative". We all know the story after: their GitHub now has 45k stars and completed $80M in Series B funding in 2022.
+
+## To round it all up
+
+When comparing similar open or closed-source tools, since most open-source products are advertised as "XXX open-source alternative", the difference between them is mostly:
+
+- Open-source usually means self-deployment, that way you have more control your own data.
+- The community is vibrant and more open: you can choose your own configuration and request features.
+- In addition, even if the open-source product is no longer maintained, you can still use it (maybe even better it).
+
+And last but not least, this concludes Star History’s 2022 open-source picks. We had fun browsing through the projects and learning about the different background stories, hope you enjoy it just as much as we did.
+
+See y’all next year. 👋
+
+---
+
+This is part of Star History Open Source 2022 series, you can continue with:
+
+1. [Open Source Best of 2022 - Front-end](/blog/star-history-yearly-pick-2022-frontend)
+1. [Open Source Best of 2022 - Data, Infra & DevTools](/blog/star-history-yearly-pick-2022-data-infra-devtools)
+1. [Open Source Best of 2022 - Platform Engineering](/blog/star-history-open-source-2022-platform-engineering)
\ No newline at end of file
diff --git a/public/blog/star-history-open-source-2022-platform-engineering.md b/public/blog/star-history-open-source-2022-platform-engineering.md
new file mode 100644
index 0000000000000000000000000000000000000000..3b56cc73367e2ff42e119731ab0f98951e36c7ca
--- /dev/null
+++ b/public/blog/star-history-open-source-2022-platform-engineering.md
@@ -0,0 +1,152 @@
+# Star History Open Source Best of 2022 | Platform Engineering
+
+From [What is platform engineering](https://platformengineering.org/blog/what-is-platform-engineering):
+> Platform engineering is the discipline of designing and building toolchains and workflows that enable self-service capabilities for software engineering organizations in the cloud-native era
+
+Platform Engineering continues to rise in popularity in 2022 and is also featured in the [Gartner Hype Cycle for Software Engineering 2022](https://www.gartner.com/en/articles/what-s-new-in-the-2022-gartner-hype-cycle-for-emerging-technologies) report.
+
+![gartner-report](/blog/assets/yearly-pick-platform-engineering-2022/gartner-report.webp)
+
+In this post, Star History picks out 10 open-source projects that served as the building blocks for Platform Engineering.
+
+## Backstage
+
+![backstage](/blog/assets/yearly-pick-platform-engineering-2022/backstage.webp)
+
+[Backstage](https://github.com/backstage/backstage), a Software Catalog and Developer Platform created by Spotify, is a developer portal that unifies an organization's tools, services, applications, data and documentation into a single, consistent user interface, enabling developers to easily create, manage and explore software so that developers can focus on building applications rather than reinventing the button over and over again.
+
+Spotify developed Backstage to help engineering organizations to manage the complexity of growing systems, and it was open sourced in 2020 and became a CNCF incubation project in early 2022.
+
+![backstage-dashboard](/blog/assets/yearly-pick-platform-engineering-2022/backstage-dashboard.webp)
+
+In 2020, 280+ Spotify engineering teams were [already using Backstage](https://backstage.io/blog/2020/03/16/announcing-backstage) to manage 2000+ backend services, 300+ websites, and 200+ mobile features.
+
+[Backstage Wrapped 2022](https://backstage.io/blog/2022/12/19/backstage-wrapped-2022) (is the title a homage to Spotify's annual Wrapped tho) mentioned that they gained 75 public users in the past year and now have 600+ users, proving that there really is a strong need for Backstage.
+
+## Elasticsearch
+
+![elastic](/blog/assets/yearly-pick-platform-engineering-2022/elastic.webp)
+
+[Elasticsearch](https://github.com/elastic/elasticsearch) is a real-time distributed storage, search, and analytics engine, the first version was released in 2010 and based on [Apache Lucene](https://github.com/apache/lucene). In 2022, Elastic announced [Elastic 8.0](https://www.elastic.co/blog/whats-new-elastic-8-0-0), and it has gotten faster, simpler, and more scalable. They are also not slow in expanding the product: they are gradually enhancing the performance of [Elastic Cloud](https://www.elastic.co/blog/looking-back-at-2022-elastic-year-in-review) and adding the hottest keyword in their Roadmap: [Stateless Elasticsearch](https://www.elastic.co/blog/stateless-your-new-state-of-find-with-elasticsearch), which makes the service stateless and enables the elastic cloud platform.
+
+![elastic-architecture](/blog/assets/yearly-pick-platform-engineering-2022/elastic-architecture.webp)
+
+But of course, we can't forget the [controversy](https://www.elastic.co/blog/why-license-change-aws) between Elastic and AWS: AWS forked and commercialized (someone else's) OS project, while Elastic changed their open-source protocol to restrict users from using the client. Although they eventually [reached a settlement](https://www.elastic.co/blog/elastic-and-amazon-reach-agreement-on-trademark-infringement-lawsuit), it begs the question: in the world of open-source, are the users the ones paying the price (literally AND figuratively)?
+
+## GitLab
+
+![gitlab](/blog/assets/yearly-pick-platform-engineering-2022/gitlab.webp)
+
+[GitLab](https://github.com/gitlabhq/gitlabhq) was born as a code hosting project to facilitate team development and collaboration, but has now expanded into a DevSecOps Platform. DevSecOps is DevOps with Security on top: normally, security awaits at the end of the development lifecycle, but when code is returned to developers for fixing, it adds extra cost. DevSecOps uses the shift-left approach to embrace security early in the DevOps lifecycle, by using tools to protect and monitor live applications, infusing security practices into every phase of software development till deployment.
+
+![gitlab-devsecops](/blog/assets/yearly-pick-platform-engineering-2022/gitlab-devsecops.webp)
+
+In addition, GitLab is well known for their public [Handbook](https://about.gitlab.com/handbook/) (think of it as their employee handbook). This 2,000+ page-properly-categorized document gives a pretty specific and informative glimpse into the processes/collaboration/use of tools and even the culture of GitLab - this is extra handy for a startup that is just starting out and looking to establish SOPs and processes.
+
+## Grafana
+
+![grafana](/blog/assets/yearly-pick-platform-engineering-2022/grafana.webp)
+
+[Grafana](https://github.com/grafana/grafana) is an observability and data visualization platform. It simplifies the complexity of monitoring: provide the data and Grafana will take care of the visualization. It was first released in 2014 by Torkel Ödegaard (Grafana Labs Co-Founder) as an offshoot project by Orbitz. We all know the story later: Grafana Labs went on a roll in 2019 after raising a $24M Series A round, most recently a $240M Series D in April, 2022.
+
+At ObservabilityCON 2022, Grafana Labs announced two new projects: [Phlare](https://grafana.com/blog/2022/11/02/announcing-grafana-phlare-oss-continuous-profiling-database/), a database for continuous profiling, and [Faro](https://grafana.com/blog/2022/11/02/introducing-grafana-faro-oss-application-observability/), a front-end application observability service. It is worth noting that Phlare was inspired by a Hackathon project that demonstrated the value of continuous analytics when connected to metrics, logs, and traces, and they decided to create a database for continuous analytics telemetry.
+
+![grafana-workflow](/blog/assets/yearly-pick-platform-engineering-2022/grafana-workflow.webp)
+
+## Kong
+
+![kong](/blog/assets/yearly-pick-platform-engineering-2022/kong.webp)
+
+[Kong](https://github.com/Kong/kong) is a cloud-native API gateway that allows users to analyze traffic and manage developers, consumers, partners, customers, etc. associated with different APIs. Since 2010, Kong has raised $169.1M in 6 rounds of funding. In 2022, they released [Kong Gateway 3.0](https://konghq.com/blog/kong-gateway-3-0) and launched a SaaS API platform in the AWS Marketplace: [Kong Konnect](https://konghq.com/products/cloud-api-platform).
+
+Kong started out as an API aggregation platform/marketplace, the company and product name back then was Mashape. Kong's API gateway project was incubated later and soon took over to become the core business, while Mashape’s original aggregation platform/marketplace businesses were sold to [RapidAPI](https://rapidapi.com/). It is a classic open-source pivoting in recent years.
+
+## Kubernetes
+
+![kubernetes](/blog/assets/yearly-pick-platform-engineering-2022/kubernetes.webp)
+
+We know, we know, but we can’t leave [Kubernetes](https://github.com/kubernetes/kubernetes) out in this category. It is one of the most popular container orchestration systems for automating software deployment, scaling and management. Originally designed by Google, it is now maintained by the Cloud Native Computing Foundation (CNCF). In fact, CNCF started with Kubernetes.
+
+![kubernetes-terraform](/blog/assets/yearly-pick-platform-engineering-2022/kubernetes-terraform.webp)
+
+Kubernetes has a widespread ecosystem and is the platform within platform engineering. Kubernetes is the primary runtime platform for all of the projects listed in this post except Terraform. Terraform also supports interaction with Kubernetes through the [Terraform Kubernetes Provider](https://registry.terraform.io/providers/hashicorp/kubernetes/latest/docs), which is maintained by HashiCorp, and listed together with the three major cloud vendors.
+
+Trivia #1: Kubernetes’ name comes from the ancient Greek word for "helmsman", which explains its logo☸️. It also has a connection with the concept of container, and of course may be more or less aimed at the competitor Docker Swarm back then.
+
+![kubernetes-container](/blog/assets/yearly-pick-platform-engineering-2022/kubernetes-container.webp)
+
+Trivia #2: K8s is the middle 8 letters of Kubernetes "ubernete" replaced by the number "8", the same can be internationalizaiton into i18n.
+
+To learn more about Kubernetes’ story, check out [this documentary](https://youtu.be/BE77h7dmoQU) by Honeypot!
+
+## Prometheus
+
+![prometheus](/blog/assets/yearly-pick-platform-engineering-2022/prometheus.webp)
+
+[Prometheus](https://github.com/prometheus/prometheus) is a time-series database based system monitoring and alerting system. 2022 was its 10th birthday and it’s also a member of CNCF. It was open-sourced by SoundCloud back in 2012, but after watching [The History of Prometheus at SoundCloud](https://promcon.io/2016-berlin/talks/the-history-of-prometheus-at-soundcloud/), it seems one of their engineers wrote a monitoring tool that was used at SoundCloud, which was deemed quite handy. It was then open-sourced by the company, and the community grew along the way.
+
+![prometheus-soundcloud](/blog/assets/yearly-pick-platform-engineering-2022/prometheus-soundcloud.webp)
+
+“Prometheus” is one of the gods of the Titans in ancient Greek mythology, and the name means "foresight", which is probably the source of the project name. Prometheus is also the second CNCF project after Kubernetes, which seems to be quite foresighted. There is also [a documentary](https://www.youtube.com/watch?v=rT4fJNbfe14) by Honeypot about Prometheus.
+
+## Sourcegraph
+
+![sourcegraph](/blog/assets/yearly-pick-platform-engineering-2022/sourcegraph.webp)
+
+[Sourcegraph’s home page](https://sourcegraph.com/search) is a code search page, not the usual product introduction page, which is probably the smartest product demo, no?
+
+![sourcegraph-search](/blog/assets/yearly-pick-platform-engineering-2022/sourcegraph-search.webp)
+
+[Sourcegraph](https://github.com/sourcegraph/sourcegraph) is a code search platform. Imagine a developer fixing a bug, but needs to jump to another part of the code, so he has to open another file in his IDE, which breaks his current working state. Sourcegraph's web-based code search interface allows developers to keep their current state while exploring other parts of the code, which greatly reduces the cost of switching. Advanced features such as code navigation, code insight help developers onboard new projects faster, understand their projects better (how code changes over time and its current state), as well as the ability to apply code changes in different repositories like Batch Changes.
+
+In addition, the [Sourcegraph Podcast](https://about.sourcegraph.com/podcast), featuring co-founder/CTO Beyang and authors/engineers/DevRel folks of other startups, is an insightful podcast about projects' origin stories, these folks' worldviews, experiences, favourite tools and techs, and more.
+
+## Temporal
+
+![temporal](/blog/assets/yearly-pick-platform-engineering-2022/temporal.webp)
+
+[Temporal](https://github.com/temporalio/temporal) is another rising star and serves as a core piece in platform engineering. It is a microservice task scheduling execution platform that executes application logic units, workflows in a resilient way, automatically handles intermittent failures, and retries failed operations. Although the first release only came in 2020.2, the founders built Cadence workflow (uber/cadence) back in Uber to solve Uber's workflow/orchestration problems, and Temporal is a commercialized fork version of Cadence.
+
+Sidenote: Temporal annual conference Relay merch looks so damn good 😍.
+
+![temporal-swag](/blog/assets/yearly-pick-platform-engineering-2022/temporal-swag.webp)
+
+## Terraform
+
+![terraform](/blog/assets/yearly-pick-platform-engineering-2022/terraform.webp)
+
+[Terraform](https://github.com/hashicorp/terraform) is a tool for managing infrastructure (infrastructure-as-code) under HashiCorp. Terraform v0.1 was released back in 2014, but only became the industry leader 8 years later, revolutionizing the entire workflow, and was almost shut down in the early days because of the slow adoption.
+
+Terraform Provider started out as a way to smooth out the differences in managing the services of several large public cloud vendors, and has now become the de facto standard for managing all cloud/SaaS resources.
+
+## Platform Engineering is the Future
+
+Well, this is it for platform engineering projects, from big names to the starlets, let's review them again:
+
+- **The underlying runtime platform** - Kubernetes
+- **The service catalog and developer portal** - Backstage
+- **API gateway** - Kong
+- **Universal Search** - Elasticsearch
+- **Code hosting, CI/CD, and DevSecOps** - GitLab
+- **Code Search** - Sourcegraph
+- **Monitoring/Alerting** - Prometheus
+- **Dashboard** - Grafana
+- **Task Scheduling and Execution** - Temporal
+- **Codify Infrastructure and Cloud Resources** - Terraform
+
+The above projects will constitute a pretty solid platform engineering backbone, while there are a couple of other core components worth mentioning:
+
+- **Security and Access Control** (network access, software supply chain, intrusion detection, Audit Log) - [Snyk](https://snyk.io/), [tailscale](https://tailscale.com/), [Vault](https://www.hashicorp.com/products/vault), [Boundary](https://www.boundaryproject.io/).
+- **Resource Allocation** (auto-scaling, scheduling, FinOps) - [OpenCost](http://opencost.io/).
+- **Configuration** (application configurations, feature flags) - [Apollo](https://github.com/apolloconfig/apollo), [Flagsmith](https://flagsmith.com/).
+- **Database Development** (database change, query, admin, security) - [Bytebase](https://bytebase.com).
+
+---
+
+This is part of Star History Open Source 2022 series, you can continue with:
+
+This is part of Star History Open Source 2022 series, you can continue with:
+
+1. [Open Source Best of 2022 - Front-end](/blog/star-history-yearly-pick-2022-frontend)
+1. [Open Source Best of 2022 - Data, Infra & DevTools](/blog/star-history-yearly-pick-2022-data-infra-devtools)
+1. [Open Source Best of 2022 - Open-Source Alternatives](/blog/star-history-open-source-2022-open-source-alternatives)
\ No newline at end of file
diff --git a/public/blog/star-history-yearly-pick-2022-data-infra-devtools.md b/public/blog/star-history-yearly-pick-2022-data-infra-devtools.md
new file mode 100644
index 0000000000000000000000000000000000000000..b9b941443bb4163cef16be9d7cb9287560019112
--- /dev/null
+++ b/public/blog/star-history-yearly-pick-2022-data-infra-devtools.md
@@ -0,0 +1,154 @@
+# Star History Open Source Best of 2022 | Data, Infra & DevTools
+
+Following up on our previous roundup of [Top Front-end open-source projects in 2022](/blog/star-history-yearly-pick-2022-frontend), Star History will round up the open-source projects that stood out in the **Data, Infra, and DevTools** section in 2022.
+
+If you didn’t know,  [star-history.com](http://star-history.com) is a place to view and compare the star history of GitHub repos. We are proud to say that it is the de facto place people turn to for GitHub stars: it is, after all, the first (and second) result on Google. 😆
+
+![google-result](/blog/assets/yearly-pick-data-infra-devtools-2022/google-result.webp)
+
+*Note: the list is in alphabetical order.
+
+## Buf
+
+![buf](/blog/assets/yearly-pick-data-infra-devtools-2022/buf.webp)
+
+[Buf](https://github.com/bufbuild/buf) is a very low-profile company based in Toronto that focuses on improving the developer experience with Protocol Buffers. Their mission is to deprecate REST/JSON and move the industry towards a schema-driven development model with Protobuf. Their products the Buf CLI and Buf Schema Registry help engineers shift most of their time and effort from managing Protobuf files to implementing features and working on their infrastructure.
+
+Buf closed a $68M Series B at the end of 2021 and has kept a low profile for all four rounds of funding, with [the only official statement](https://buf.build/blog/an-update-on-our-fundraising) says that they want people to focus on the API and Protobuf ecosystem, rather than how the company is financing the journey (alas, funding is still a big part of the journey).
+
+![buf-site](/blog/assets/yearly-pick-data-infra-devtools-2022/buf-site.webp)
+
+## Bytebase
+
+![bytebase](/blog/assets/yearly-pick-data-infra-devtools-2022/bytebase.webp)
+
+While the aforementioned Buf targets the API schema, [Bytebase](https://github.com/bytebase/bytebase) targets the database schema hidden behind the API. While there are a number of commercial/open-source database engines on the market, there are only a few tools around to ensure reliable database schema changes. To this day, many engineering teams continue to connect directly to production databases to change data. 💥
+
+- Like how GitHub/GitLab manages code changes, Bytebase provides a GUI to manage database changes.
+- Like Figma for designer team collaboration, Bytebase helps DevOps teams collaborate on database management.
+- Like how Terraform defines Infrastructure-as-Code, Bytebase aims to build Database-as-Code.
+
+![bytebase-site](/blog/assets/yearly-pick-data-infra-devtools-2022/bytebase-site.webp)
+
+Bytebase is a Database CI/CD tool (Database-as-Code) for DevOps teams, built for developers and DBAs, and the first (and at the time of this post, only) [Database CI/CD solution to be included in the CNCF Landscape](https://www.bytebase.com/blog/cncf-landscape).
+
+The mascots Byte and Base (originated from Bytebase's B, and the shape of a database, respectively) are also adorable.
+
+![byte-base](/blog/assets/yearly-pick-data-infra-devtools-2022/byte-base.gif)
+
+## Casdoor
+
+![casdoor](/blog/assets/yearly-pick-data-infra-devtools-2022/casdoor.webp)
+
+[Casdoor](https://github.com/casdoor/casdoor) is a centralized authentication / SSO platform based on OAuth 2.0 / OIDC. Casdoor is responsible for authentication, but it can also be integrated with [Casbin](https://github.com/casbin/casbin), which is responsible for authorization.
+
+![casdoor-authentication](/blog/assets/yearly-pick-data-infra-devtools-2022/casdoor-authentication.webp)
+
+## Dagger
+
+![dagger](/blog/assets/yearly-pick-data-infra-devtools-2022/dagger.webp)
+
+[Dagger](https://github.com/dagger/dagger) is a new offering from Docker founder Solomon Hykes: a portable devkit for CI/CD pipelines. Along with the [public launch announcement](https://dagger.io/blog/public-launch-announcement), Solomon also announced that Dagger has received $20M in [Series A](https://dagger.io/blog/series-a) funding.
+
+With pipelines configured differently across platforms, engineering teams struggle to cobble together all the pipelines that are difficult to scale or migrate to other cloud platforms, which not only doesn't save labor or time, but makes the deployment painful. DevOps engineers using Dagger can define their pipeline, put together the pieces (think Lego), and implement them all in code that will work on any cloud.
+
+![dagger-architecture](/blog/assets/yearly-pick-data-infra-devtools-2022/dagger-architecture.webp)
+
+BTW: loving the western + docker vibe here. 🤠⚓️
+
+## DuckDB
+
+![duckdb](/blog/assets/yearly-pick-data-infra-devtools-2022/duckdb.webp)
+
+[DuckDB](https://github.com/duckdb/duckdb) is similar in architecture to SQLite in that it is also an embeddable database. The difference is that SQLite focuses on OLTP transactions, while DuckDB aims to be its counterpart for OLAP transactions.
+
+![duckdb-dbms](/blog/assets/yearly-pick-data-infra-devtools-2022/duckdb-dbms.webp)
+
+MotherDuck, which recently announced [$47.5M Series A funding](https://motherduck.com/blog/announcing-series-seed-and-a/), is based on DuckDB.
+
+## Meltano
+
+![meltano](/blog/assets/yearly-pick-data-infra-devtools-2022/meltano.webp)
+
+Created at GitLab in 2018, [Meltano](https://github.com/meltano/meltano) was initially built for GitLab's data and analytics teams. It is a data platform for the DataOps era, designed to help data teams assemble various products on the data platform and manage the entire lifecycle, allowing for version control, code review, continuous integration and deployment (CI/CD), and containerization.
+
+It became [a separate startup](https://about.gitlab.com/press/releases/2021-06-30-meltano-spins-out-of-gitlab-raises-seed-funding-led-by-gv.html) from GitLab in 2021. The source code was initially hosted in GitLab, but [migrated from GitLab to GitHub](https://meltano.com/blog/why-meltano-is-moving-to-github/) in mid-2022, and soon after, it also raised a $12.4M seed round and launched Meltano 2.0 (2022 was a big year for them).
+
+![meltano-workflow](/blog/assets/yearly-pick-data-infra-devtools-2022/meltano-workflow.webp)
+
+## Neon
+
+![neon](/blog/assets/yearly-pick-data-infra-devtools-2022/neon.webp)
+
+[Neon](https://github.com/neondatabase/neon) is a startup that offers serverless Postgres databases for developers and has received $30M in [Series A-1](https://neon.tech/blog/funding-a1/) funding. Besides their product, the visuals the team has come up with is really eye-catching: the cute Postgres elephant becomes a real elephant.
+
+![neon-visuals](/blog/assets/yearly-pick-data-infra-devtools-2022/neon-visuals.webp)
+
+Neon CEO Nikita Shamgunov was an engineer at Microsoft SQL Server and Meta before founding SingleStore. In 2021, he founded Neon with Heikki Linnakangas (previously a Postgres hacker) and Stas Kelvich (previously on the Yandex database team).
+
+They realized that Postgres could be cheaper and more efficient in the cloud by separating storage and compute. As their tagline suggests, Neon is a serverless Postgres built for the cloud. Compute nodes are activated only when a connection comes in and are automatically shut down during periods of inactivity. Regarding storage, cold data can be offloaded to S3 to save costs.
+
+![neon-architecture](/blog/assets/yearly-pick-data-infra-devtools-2022/neon-architecture.webp)
+
+In addition to serverless, another big part of Neon is its focus on the developer workflow. They recently introduced [Branching](https://neon.tech/docs/introduction/branching/), and you can branch your data in the same way you branch your code.
+
+## Opa
+
+![opa](/blog/assets/yearly-pick-data-infra-devtools-2022/opa.webp)
+
+[Open Policy Agent (OPA)](https://github.com/open-policy-agent/opa) is a full-featured policy engine designed to separate policy decisions from software and unify policy enforcement across different platforms and systems. Notably, it is a CNCF incubated ([graduated in 2021](https://www.cncf.io/announcements/2021/02/04/cloud-native-computing-foundation-announces-open-policy-agent-graduation/)) project.
+
+OPA's policies are expressed using Rego, a high-level declarative language. Rego makes it easy to define policies and configure policies (Policy-as-Code) as if you were writing code. For example, questions like: Is Bob allowed to make GET requests to `/api/v1/products`? What records does he have permission to view?
+
+![opa-workflow](/blog/assets/yearly-pick-data-infra-devtools-2022/opa-workflow.webp)
+
+OPA's [Adopter.md](https://github.com/open-policy-agent/opa/blob/main/ADOPTERS.md) includes a number of big names using OPA in prod: Netflix, Pinterest, T-Mobile, etc. The syntax for policies has yet to be standardized, leading to everyone having to build the same wheels repeatedly, and OPA has the potential to change that.
+
+## Steampipe
+
+![steampipe](/blog/assets/yearly-pick-data-infra-devtools-2022/steampipe.webp)
+
+With [Steampipe](https://github.com/turbot/steampipe), you can use SQL to instantly query your cloud services (AWS, Azure, GCP, and more). [Steampipe Cloud](https://steampipe.io/docs/cloud/overview), a fully managed SaaS platform for hosting Steampipe instances, was released January, 2022.
+
+Steampipe's star skyrocketed in October, 2022, thanks to landing on the [Hacker News](https://news.ycombinator.com/item?id=33034351) front page.
+
+![steampipe-hn](/blog/assets/yearly-pick-data-infra-devtools-2022/steampipe-hn.webp)
+
+## Tier
+
+![tier](/blog/assets/yearly-pick-data-infra-devtools-2022/tier.webp)
+
+[Tier](https://github.com/tierrun/tier) is a tool to manage pricing and billing workflow for your SaaS offering
+
+Tier landed on [Hacker News front page](https://news.ycombinator.com/item?id=33429972), and their stars skyrocketed, just like Steampipe.
+
+![tier-hn](/blog/assets/yearly-pick-data-infra-devtools-2022/tier-hn.webp)
+
+Pricing SaaS products is a constant WIP, but it is a complex task and is often tied up in complex workflows and hidden cross-organizational dependencies. Many startups choose a pricing strategy for their product once, which stays the same forever.
+
+Tier has a top-level design for how to implement pricing that allows for changes to pricing models without changing application code or business processes (Pricing as Code). The founding team thoroughly thought about pricing and built a website explaining t[he 5 Pillars of PriceOps](https://priceops.org/).
+
+![tier-priceops](/blog/assets/yearly-pick-data-infra-devtools-2022/tier-priceops.webp)
+
+For Star History, our goal is to discover interesting and inspiring projects. The aforementioned projects are not household names in the open-source community (yet), but each has great potential since they are tackling genuine issues with novel ideas. We see that the **Data & Infra & DevTools** section can be divided into two main categories:
+
+- Vertical innovation: database engines being the most popular segment, such as DuckDB and Neon.
+- Horizontal unification and standardization:
+  - Buf for API development.
+  - Bytebase for database development.
+  - Casdoor for authentication sources.
+  - Dagger for pipeline deployments.
+  - Meltano for data platforms.
+  - Opa for policy configurations.
+  - Steampipe for accessing cloud resources across different cloud providers.
+  - Tier for SaaS pricing infrastructure.
+
+We are sure these projects will perform in the coming years and we can’t wait to see what’s next for them.
+
+---
+
+This is part of Star History Open Source 2022 series, you can continue with:
+
+1. [Open Source Best of 2022 - Front-end](/blog/star-history-yearly-pick-2022-frontend)
+1. [Open Source Best of 2022 - Platform Engineering](/blog/star-history-open-source-2022-platform-engineering)
+1. [Open Source Best of 2022 - Open-Source Alternatives](/blog/star-history-open-source-2022-open-source-alternatives)
\ No newline at end of file
diff --git a/public/blog/star-history-yearly-pick-2022-frontend.md b/public/blog/star-history-yearly-pick-2022-frontend.md
new file mode 100644
index 0000000000000000000000000000000000000000..be9ca2f421b5aa94914567b44d02ebe4102e3c18
--- /dev/null
+++ b/public/blog/star-history-yearly-pick-2022-frontend.md
@@ -0,0 +1,143 @@
+# Star History Open Source Best of 2022 | Front-end
+
+As a proper goodbye to 2022, Star History looks at some of the most interesting open-source projects in the year that passed. Some projects came out of nowhere and made a big bang; some released new versions, while some renovated their websites.
+
+In today’s post, we are covering front-end projects.
+
+*Note: The following ranking is in alphabetical order.
+
+## Bun
+
+https://github.com/oven-sh/bun
+
+![bun](/blog/assets/yearly-pick-frontend-2022/bun.webp)
+
+Bun is a JavaScript runtime that [came out of nowhere](https://twitter.com/jarredsumner/status/1544850464302194688) in the middle of this year and claims to perform better than Node and Deno.
+
+![bun tweet](/blog/assets/yearly-pick-frontend-2022/bun-github-trending.webp)
+
+People can’t help but analyze how Bun can be this fast. The conclusion mostly boiled down to:
+
+- Bun is still an early-stage project (there are still many issues, and features to consume the performance advantage 😂)
+- Bun is very purposeful, with optimizations designed for specific scenarios.
+
+Half a year later, we wonder, is Bun faster?
+
+## Fresh
+
+https://github.com/denoland/fresh
+
+![fresh](/blog/assets/yearly-pick-frontend-2022/fresh.webp)
+
+Fresh is a full-stack web framework based on [Deno](https://github.com/denoland/deno), designed to improve the developer experience by eliminating build steps and reducing the amount of JavaScript shipped to the client. [Fresh 1.0](https://deno.com/blog/fresh-is-stable) was announced at the end of June and has gained much attention.
+
+Fresh is authored by Luca Casonato, one of the core developers of Deno, who says that client-side rendering is costly, slows down the user experience, drastically increases power consumption on mobile devices, and is often not very robust. Fresh uses a different model: the majority of rendering is done on a server, and the client is only responsible for re-rendering small islands of interactivity.
+
+## Remix
+
+https://github.com/remix-run/remix
+
+![remix](/blog/assets/yearly-pick-frontend-2022/remix.webp)
+
+Remix, a full-stack web framework based on TypeScript and React, was officially released in late 2021 and has gained a lot of attention since then. The team behind it, Michael Jackson and Ryan Florence, are both React veterans.
+
+![remix-spin](/blog/assets/yearly-pick-frontend-2022/remix-spin.webp)
+
+The use of the slogan “Say goodbye to Spinnageddon” on [their official website](https://remix.run/) is genuinely awe-inspiring. 👋
+
+![remix-spin](/blog/assets/yearly-pick-frontend-2022/spinning-cat.webp)
+
+## Markdoc
+
+https://github.com/markdoc/markdoc
+
+![markdoc](/blog/assets/yearly-pick-frontend-2022/markdoc.webp)
+
+Online payment platform Stripe open-sourced their docs framework, Markdoc, earlier this year. Markdoc is a powerful, flexible, Markdown-based content creation system that allows users to create custom docs sites.
+
+![markdoc-demo](/blog/assets/yearly-pick-frontend-2022/markdoc-demo.webp)
+
+The [Stripe docs site](http://stripe.com/docs) is supported by Markdoc, which is the most straightforward (and free) use case, right? You can make just as complex and beautiful docs!
+
+## Next.js
+
+https://github.com/vercel/next.js
+
+![nextjs](/blog/assets/yearly-pick-frontend-2022/nextjs.webp)
+
+Next.js is a lightweight React server-side rendering application framework that has officially [surpassed Kubernetes in GitHub stars](https://twitter.com/leeerob/status/1564017079665180672?lang=en) this year.
+
+![nextjs-k8s](/blog/assets/yearly-pick-frontend-2022/nextjs-k8s.webp)
+
+I’m sure no one can resist generating a ticket of their own to this year's Next.js Conf. 😍 Next.js 13 was also announced at the conference.
+
+![nextjs-conf](/blog/assets/yearly-pick-frontend-2022/nextjs-conf.webp)
+
+
+## SolidJS
+
+https://github.com/solidjs/solid
+
+![solidjs](/blog/assets/yearly-pick-frontend-2022/solidjs.webp)
+
+Solid.js won the Breakthrough of the year award at JS Nation 2022. It is a JavaScript library for building user interfaces, and the official “Why Solid?” mentions that they are very proud of their: 
+
+- indistinguishable performance (second only to native JS).
+   ![solidjs-performance](/blog/assets/yearly-pick-frontend-2022/solidjs-performance.webp)
+- full-featured with everything you can expect from a modern framework.
+- simple, composable primitives without hidden rules and gotchas.
+- growing ecosystem.
+
+## Tailwind CSS
+
+https://github.com/tailwindlabs/tailwindcss
+
+![tailwind](/blog/assets/yearly-pick-frontend-2022/tailwind.webp)
+
+Tailwind CSS is a CSS framework toolset. Whether it's colors or spacing, proportions, or fonts, Tailwind comes with defaults that are ready to use out of the box, but they can also be customized.
+
+![tailwind-colors](/blog/assets/yearly-pick-frontend-2022/tailwind-colors.webp)
+
+## Tauri
+
+https://github.com/tauri-apps/tauri
+
+![tauri](/blog/assets/yearly-pick-frontend-2022/tauri.webp)
+
+Tauri is a desktop application development framework, that released [Tauri 1.0](https://tauri.app/blog/2022/06/19/tauri-1-0) this year. Because of its similarity to Electron, yet it solves the former’s pain points: large, high resource consumption, plus the fact that Tauri is written using Rust, it is easy to imagine why the attention.
+
+## Turbopack
+
+https://github.com/vercel/turbo
+
+![turbo](/blog/assets/yearly-pick-frontend-2022/turbo.webp)
+
+Turbopack was announced at Next.js Conf 22 by Vercel. It is an incremental packaging tool optimized for JavaScript and TypeScript, and claims to be 700 times faster than Webpack.
+
+Since there weren’t any Rust-based JavaScript packaging tools and after evaluating the available packaging tools, Vercel decided to get Tobias Koppers, author of Webpack, and the Next.js team to write one together.
+
+![turbopack-performance](/blog/assets/yearly-pick-frontend-2022/turbopack-performance.webp)
+
+## Vite
+
+https://github.com/vitejs/vite
+
+![vite](/blog/assets/yearly-pick-frontend-2022/vite.webp)
+
+Vite is a front-end development and building tool by Evan You. [Vite 3](https://vitejs.dev/blog/announcing-vite3.html) was announced in 2022, and the main site uses the new VitePress default theme.
+
+![vite-new](/blog/assets/yearly-pick-frontend-2022/vite-new.webp)
+
+Their previous site is pretty. The new site is fire.
+
+![vite-old](/blog/assets/yearly-pick-frontend-2022/vite-old.webp)
+
+That’s it for the top front-end projects. Stay tuned for the next round-up, where we will be looking at data & infrastructure tools that shone bright in 2022. DM us [@StarHistoryHQ](https://twitter.com/StarHistoryHQ) if you have any good project suggestions! 🤓
+
+---
+
+This is part of Star History Open Source 2022 series, you can continue with:
+
+1. [Open Source Best of 2022 - Data, Infra & DevTools](/blog/star-history-yearly-pick-2022-data-infra-devtools)
+1. [Open Source Best of 2022 - Platform Engineering](/blog/star-history-open-source-2022-platform-engineering)
+1. [Open Source Best of 2022 - Open-Source Alternatives](/blog/star-history-open-source-2022-open-source-alternatives)
\ No newline at end of file
diff --git a/public/blog/tabby.md b/public/blog/tabby.md
new file mode 100644
index 0000000000000000000000000000000000000000..1248d45172e28709fb16e97decea44b13c84876a
--- /dev/null
+++ b/public/blog/tabby.md
@@ -0,0 +1,28 @@
+# Tabby
+
+[Tabby](http://github.com/TabbyML/tabby) is an AI coding assistant that's designed as an open-source tool to help developers code faster. It debuted on [HackerNews](https://news.ycombinator.com/item?id=35470915) last week and caught our attention.
+
+![tabby](/blog/assets/tabby/hn.webp)
+
+Looking at its GitHub star history.
+
+![tabby](/blog/assets/tabby/tabby.webp)
+
+With its advanced algorithms and machine learning, Tabby provides a seamless coding experience to developers by predicting coding patterns and suggesting code snippets. With Tabby, developers can save time and improve their coding efficiency, allowing them to focus on more important tasks.
+
+## Features
+
+- Editor Extensions support: VSCode, VIM.
+- Self-contained, with no need for a DBMS or cloud service.
+- Web UI for visualizing and configuration models and MLOps.
+- Consumer level GPU supports (FP-16 weight loading with various optimization).
+
+![tabby-ui](/blog/assets/tabby/tabby-ui.gif)
+
+However, it is important to note that Tabby is still in its alpha phase and is not ready for production use. Nevertheless, despite being in development, it demonstrates significant potential in enhancing coding efficiency and streamlining workflows for developers.
+
+If you are a developer looking for an AI-based coding assistant, you should give Tabby a try.
+
+GitHub: [https://github.com/TabbyML/tabby](https://github.com/TabbyML/tabby)
+
+HF Space: [https://huggingface.co/spaces/TabbyML/tabby](https://huggingface.co/spaces/TabbyML/tabby)
\ No newline at end of file
diff --git a/public/dbcost.webp b/public/dbcost.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3981cc480100d1c80b5fa4bf608d8c8a59ce22c1
Binary files /dev/null and b/public/dbcost.webp differ
diff --git a/public/fonts/xkcd.ttf b/public/fonts/xkcd.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..39e4d49f55148df913c93cfc45d175e526429e32
Binary files /dev/null and b/public/fonts/xkcd.ttf differ
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..beb8717264d59f75249f49ecbdecfb578e8120c1
--- /dev/null
+++ b/public/icon.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:02d30436a381b85e3e8beda75b06bd40ab98b14a419f293688ef32931b639bad
+size 4185
diff --git a/public/icons/free.svg b/public/icons/free.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fe589142f661d49c523194ce993d250362ef5cad
--- /dev/null
+++ b/public/icons/free.svg
@@ -0,0 +1,49 @@
+<svg height="1.5rem" width="1.5rem" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 469.333 469.333"
+            style="enable-background:new 0 0 469.333 469.333;" xml:space="preserve">
+            <path style="fill:#303C42;" d="M451.125,222.708L250.292,21.875C236.396,7.979,217.167,0,197.5,0H42.667C19.146,0,0,19.135,0,42.667
+         V197.49c0,19.938,7.771,38.688,21.875,52.802l200.833,200.833c11.75,11.74,27.375,18.208,43.958,18.208
+         c16.583,0,32.208-6.469,43.958-18.208l140.5-140.5c11.75-11.729,18.208-27.344,18.208-43.958
+         C469.333,250.052,462.875,234.438,451.125,222.708z" />
+            <path style="fill:#f26065;" d="M436.042,238.188L235.208,37.354c-9.917-9.927-23.667-15.625-37.708-15.625H42.667
+         c-11.771,0-21.333,9.573-21.333,21.333v154.823c0,14.24,5.542,27.635,15.625,37.719l200.833,200.833
+         c15.458,15.417,42.292,15.417,57.75,0l140.5-140.5C443.75,288.229,448,277.979,448,267.063
+         C448,256.146,443.75,245.896,436.042,238.188z" />
+            <path style="opacity:0.1;enable-background:new    ;" d="M436.042,263.938l-140.5,140.5c-15.458,15.417-42.292,15.417-57.75,0
+         L36.958,203.604c-10.083-10.083-15.625-23.479-15.625-37.719v32c0,14.24,5.542,27.635,15.625,37.719l200.833,200.833
+         c15.458,15.417,42.292,15.417,57.75,0l140.5-140.5C443.75,288.229,448,277.979,448,267.063c0-5.599-1.152-11.005-3.281-16
+         C442.697,255.807,439.797,260.182,436.042,263.938z" />
+            <g>
+              <path style="fill:#303C42;" d="M251.271,266.354c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125
+           c4.167-4.167,4.167-10.917,0-15.083l-15.087-15.087l15.087-15.09l22.625,22.635c4.167,4.167,10.917,4.167,15.083,0
+           c4.167-4.167,4.167-10.917,0-15.083l-30.167-30.177c-2-2-4.708-3.125-7.542-3.125c-2.833,0-5.542,1.125-7.542,3.125l-60.333,60.344
+           c-4.167,4.167-4.167,10.917,0,15.083l30.167,30.167c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125
+           c4.167-4.167,4.167-10.917,0-15.083l-22.625-22.625l15.082-15.085L251.271,266.354z" />
+              <path style="fill:#303C42;" d="M334.229,258.813c-4.167-4.167-10.917-4.167-15.083,0l-60.333,60.333
+           c-4.167,4.167-4.167,10.917,0,15.083l30.167,30.177c2.083,2.083,4.813,3.125,7.542,3.125s5.458-1.042,7.542-3.125
+           c4.167-4.167,4.167-10.917,0-15.083l-22.625-22.635l15.083-15.083l15.083,15.083c2.083,2.083,4.813,3.125,7.542,3.125
+           s5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083l-15.083-15.083l15.083-15.083l22.625,22.625
+           c4.167,4.167,10.917,4.167,15.083,0c4.167-4.167,4.167-10.917,0-15.083L334.229,258.813z" />
+              <path style="fill:#303C42;" d="M138.125,148.802c2.729,0,5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083
+           l-15.083-15.091l15.083-15.086l22.625,22.625c4.167,4.167,10.917,4.167,15.083,0c4.167-4.167,4.167-10.917,0-15.083l-30.167-30.167
+           c-4-4-11.083-4-15.083,0l-30.151,30.156c0,0-0.01,0.005-0.016,0.01s-0.005,0.01-0.005,0.01l-30.161,30.167
+           c-4.167,4.167-4.167,10.917,0,15.083c2.083,2.083,4.813,3.125,7.542,3.125s5.458-1.042,7.542-3.125l22.626-22.63l15.082,15.089
+           C132.667,147.76,135.396,148.802,138.125,148.802z" />
+              <path style="fill:#303C42;" d="M207.771,207.792c7.896-0.417,15.25-3.698,20.875-9.323c12.479-12.479,12.479-32.771,0-45.25
+           l-15.083-15.083c-4.167-4.167-10.917-4.167-15.083,0l-29.896,29.885c-0.104,0.094-0.208,0.188-0.292,0.281
+           c-0.104,0.094-0.188,0.188-0.271,0.292l-29.896,29.875c-4.167,4.167-4.167,10.917,0,15.083c4.167,4.167,10.917,4.167,15.083,0
+           l22.625-22.625l7.563,7.531c4.146,4.167,4.146,10.938,0,15.094l-15.104,15.094c-4.167,4.156-4.167,10.917,0,15.083
+           c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125l15.104-15.094
+           C204.25,222.854,207.354,215.385,207.771,207.792z M206.021,160.76l7.542,7.542c4.167,4.156,4.167,10.927,0,15.083
+           c-2.021,2.01-4.688,3.125-7.542,3.125H206c-2.833,0-5.5-1.104-7.521-3.135l-7.542-7.531L206.021,160.76z" />
+            </g>
+            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-68.6995" y1="619.0278" x2="-46.1882"
+              y2="608.5307" gradientTransform="matrix(21.3333 0 0 -21.3333 1430.1112 13315.2227)">
+              <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2" />
+              <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
+            </linearGradient>
+   <path style="fill:url(#SVGID_1_);" d="M451.125,222.708L250.292,21.875C236.396,7.979,217.167,0,197.5,0H42.667
+         C19.146,0,0,19.135,0,42.667V197.49c0,19.938,7.771,38.688,21.875,52.802l200.833,200.833c11.75,11.74,27.375,18.208,43.958,18.208
+         c16.583,0,32.208-6.469,43.958-18.208l140.5-140.5c11.75-11.729,18.208-27.344,18.208-43.958
+         C469.333,250.052,462.875,234.438,451.125,222.708z" />
+</svg>
\ No newline at end of file
diff --git a/public/sitemap.xml b/public/sitemap.xml
new file mode 100644
index 0000000000000000000000000000000000000000..b2ddc7740aa6cf16ae132a9b5cc8dfce8ca45076
--- /dev/null
+++ b/public/sitemap.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+<url>
+  <loc>https://star-history.com/</loc>
+</url>
+<url>
+  <loc>https://star-history.com/embed</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/star-history-monthly-pick-202304</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/tabby</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/star-history-monthly-pick-202303</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/sql-chat</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/star-history-monthly-pick-202302</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/ockam</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/star-history-monthly-pick-202301</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/star-history-open-source-2022-open-source-alternatives</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/star-history-open-source-2022-platform-engineering</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/star-history-yearly-pick-2022-data-infra-devtools</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/star-history-yearly-pick-2022-frontend</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/star-history-monthly-pick-202212</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/github-trending-tab</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/add-a-live-star-history-chart-to-your-github-readme</loc>
+</url>
+<url>
+  <loc>https://star-history.com/blog/introducing-the-new-star-history-com</loc>
+</url>
+</urlset>
\ No newline at end of file
diff --git a/public/sponsors/bytebase/landing.webp b/public/sponsors/bytebase/landing.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c4113fdfe4c6868fce8f47df0c63714ae3c96def
Binary files /dev/null and b/public/sponsors/bytebase/landing.webp differ
diff --git a/public/sponsors/bytebase/logo.webp b/public/sponsors/bytebase/logo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..964d66921dd96efd3c65486c12957ab477577fab
Binary files /dev/null and b/public/sponsors/bytebase/logo.webp differ
diff --git a/public/sponsors/ockam/landing.webp b/public/sponsors/ockam/landing.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f6866e5531b2dc8c7d23343c422a00eed8a699a4
Binary files /dev/null and b/public/sponsors/ockam/landing.webp differ
diff --git a/public/sponsors/ockam/logo.webp b/public/sponsors/ockam/logo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1c1e96b1836624392184b77b6473eac20a9ab8f5
Binary files /dev/null and b/public/sponsors/ockam/logo.webp differ
diff --git a/public/sponsors/selefra/landing.webp b/public/sponsors/selefra/landing.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6caaf0d4cfdd1a4d83ebb20c559c716a54ce446f
Binary files /dev/null and b/public/sponsors/selefra/landing.webp differ
diff --git a/public/sponsors/selefra/logo.webp b/public/sponsors/selefra/logo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f48b45e6ca4287a37e875e8a3cf72cf6a0aa32ea
Binary files /dev/null and b/public/sponsors/selefra/logo.webp differ
diff --git a/public/sqlchat.webp b/public/sqlchat.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7508bb17fbb84a24b2b68e1b3e27639c99159d45
Binary files /dev/null and b/public/sqlchat.webp differ
diff --git a/public/star-history.webp b/public/star-history.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6cb80d565b6a783af6cf470a3c253a499cf01c37
Binary files /dev/null and b/public/star-history.webp differ
diff --git a/renovate.json b/renovate.json
new file mode 100644
index 0000000000000000000000000000000000000000..2ed1011a786eaf375c1b4646f67a836fb3f36483
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ],
+  "schedule": ["every month"]
+}
diff --git a/server/cache.ts b/server/cache.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4be55e2d2048e07bfa274bee7c1c93776c676dbf
--- /dev/null
+++ b/server/cache.ts
@@ -0,0 +1,35 @@
+import LRUCache from "lru-cache";
+import utils from "../common/utils";
+
+/**
+ * A repo star data is type of RepoStarData, and its memory costs might be 896 bytes.
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
+ */
+interface RepoData {
+  starRecords: {
+    date: string;
+    count: number;
+  }[];
+  starAmount: number;
+  logoUrl: string;
+}
+
+// Actually, we don't need LRU, but the memory control.
+const options = {
+  // the number of most recently used items to keep,
+  // based on the monthly visit count with `o/pv-star`.
+  max: 20000,
+  // max cache memory cost bytes: about 24Mb.
+  maxSize: 24 * 1024 * 1024,
+  // calc cache size with its bytes.
+  sizeCalculation: (value: RepoData) => {
+    return utils.calcBytes(value);
+  },
+  // max 6 hours to live.
+  ttl: 1000 * 60 * 60 * 6,
+  updateAgeOnGet: false,
+};
+
+const cache = new LRUCache<string, RepoData>(options);
+
+export default cache;
diff --git a/server/const.ts b/server/const.ts
new file mode 100644
index 0000000000000000000000000000000000000000..07f93669360156bc934852e2b5746d8f819fde4c
--- /dev/null
+++ b/server/const.ts
@@ -0,0 +1,7 @@
+export const CHART_TYPES = ["Date", "Timeline"];
+
+export const CHART_SIZES = ["mobile", "laptop", "desktop"];
+
+// We can reduce the request amount by change MAX_REQUEST_AMOUNT,
+// the default value is the same as frontend.
+export const MAX_REQUEST_AMOUNT = 16;
diff --git a/server/logger.ts b/server/logger.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4752ae3f0bd066b9961c25ac6c1d1fda6fc950e0
--- /dev/null
+++ b/server/logger.ts
@@ -0,0 +1,10 @@
+import winston from "winston";
+
+const createLogger = () => {
+  return winston.createLogger({
+    transports: [new winston.transports.Console()],
+    format: winston.format.combine(winston.format.simple()),
+  });
+};
+
+export default createLogger();
diff --git a/server/main.ts b/server/main.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ffd92c1956156f8e5567c132d68e9b13067ea44
--- /dev/null
+++ b/server/main.ts
@@ -0,0 +1,159 @@
+import http from "http";
+import Koa from "koa";
+import Router from "koa-router";
+import cors from "@koa/cors";
+import { JSDOM } from "jsdom";
+import logger from "./logger";
+import XYChart from "../packages/xy-chart";
+import { convertDataToChartData, getRepoData } from "../common/chart";
+import cache from "./cache";
+import {
+  getChartWidthWithSize,
+  replaceSVGContentFilterWithCamelcase,
+  getBase64Image,
+} from "./utils";
+import { getNextToken, initTokenFromEnv } from "./token";
+import { ChartMode } from "../types/chart";
+import { CHART_SIZES, CHART_TYPES, MAX_REQUEST_AMOUNT } from "./const";
+
+const startServer = async () => {
+  await initTokenFromEnv();
+
+  const app = new Koa();
+  app.use(cors());
+  const router = new Router();
+
+  // Example request link:
+  // /svg?repos=star-history/star-history&type=Date
+  router.get("/svg", async (ctx) => {
+    const theme = `${ctx.query["theme"]}`;
+    const repos = `${ctx.query["repos"]}`.split(",");
+    let type = `${ctx.query["type"]}` as ChartMode;
+    let size = `${ctx.query["size"]}`;
+
+    if (!CHART_TYPES.includes(type)) {
+      type = "Date";
+    }
+
+    if (!CHART_SIZES.includes(size)) {
+      size = "laptop";
+    }
+
+    if (repos.length === 0) {
+      ctx.throw(400, `${http.STATUS_CODES[400]}: Repo name required`);
+      return;
+    }
+
+    const repoData = [];
+    const nodataRepos = [];
+
+    for (const repo of repos) {
+      const cacheData = cache.get(repo);
+
+      if (cacheData) {
+        repoData.push({
+          repo,
+          starRecords: cacheData.starRecords,
+          logoUrl: cacheData.logoUrl,
+        });
+      } else {
+        nodataRepos.push(repo);
+      }
+    }
+
+    if (nodataRepos.length > 0) {
+      const token = getNextToken();
+
+      try {
+        const data = await getRepoData(nodataRepos, token, MAX_REQUEST_AMOUNT);
+
+        for (const d of data) {
+          const logoUrl = await getBase64Image(d.logoUrl);
+          cache.set(d.repo, {
+            starRecords: d.starRecords,
+            starAmount: d.starRecords[d.starRecords.length - 1].count,
+            logoUrl,
+          });
+          repoData.push(d);
+        }
+      } catch (error: any) {
+        const status = error.status || 400;
+        const message =
+          error.message || "Some unexpected error happened, try again later";
+
+        if (status === 404) {
+          // do nth, repo from user not found.
+        } else {
+          logger.error("Failed to request data", error);
+        }
+
+        ctx.status = status;
+        ctx.message = `${http.STATUS_CODES[status]}: ${message}`;
+        return;
+      }
+    }
+
+    const dom = new JSDOM(`<!DOCTYPE html><body></body>`);
+    const body = dom.window.document.querySelector("body");
+    const svg = dom.window.document.createElement(
+      "svg"
+    ) as unknown as SVGSVGElement;
+
+    if (!dom || !body || !svg) {
+      ctx.throw(
+        500,
+        `${http.STATUS_CODES[500]}: Failed to mock dom with JSDOM`
+      );
+      return;
+    }
+
+    body.append(svg);
+    svg.setAttribute("width", `${getChartWidthWithSize(size)}`);
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+    try {
+      XYChart(
+        svg,
+        {
+          title: "Star History",
+          xLabel: type === "Date" ? "Date" : "Timeline",
+          yLabel: "GitHub Stars",
+          data: convertDataToChartData(repoData, type),
+          showDots: false,
+          theme: theme === "dark" ? "dark" : "light",
+        },
+        {
+          xTickLabelType: type === "Date" ? "Date" : "Number",
+          chartWidth: getChartWidthWithSize(size),
+        }
+      );
+    } catch (error) {
+      ctx.throw(
+        500,
+        `${http.STATUS_CODES[500]}: Failed to generate chart, ${error}`
+      );
+      return;
+    }
+
+    const svgContent = replaceSVGContentFilterWithCamelcase(svg.outerHTML);
+
+    const now = new Date();
+    ctx.type = "image/svg+xml;charset=utf-8";
+    ctx.set("cache-control", "no-cache");
+    ctx.set("date", `${now}`);
+    ctx.set("expires", `${now}`);
+    ctx.body = svgContent;
+  });
+
+  app.on("error", (err) => {
+    logger.error("server error: ", err);
+  });
+
+  app.use(router.routes()).use(router.allowedMethods());
+
+  app.listen(8080, () => {
+    logger.info(`server running on port ${8080}`);
+  });
+};
+
+startServer();
diff --git a/server/package.json b/server/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..b9fa886eb627017d5ce4e131566e1122ec749345
--- /dev/null
+++ b/server/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "sh-server",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "npx ts-node main.ts",
+    "build": "tsc --project ./"
+  },
+  "dependencies": {
+    "@koa/cors": "4.0.0",
+    "jsdom": "20.0.2",
+    "koa": "2.13.4",
+    "koa-router": "12.0.0",
+    "lru-cache": "7.14.1",
+    "node-fetch": "2.6.7",
+    "ts-node": "10.9.1",
+    "typescript": "4.8.4",
+    "winston": "3.8.2"
+  },
+  "devDependencies": {
+    "@types/jsdom": "20.0.0",
+    "@types/koa": "2.13.5",
+    "@types/koa-router": "7.4.4",
+    "@types/koa__cors": "3.3.0",
+    "@types/lru-cache": "7.10.9",
+    "@types/node": "18.11.10"
+  }
+}
diff --git a/server/pnpm-lock.yaml b/server/pnpm-lock.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..9acaedf2343b85afaf59e712c0e819d5a8925192
--- /dev/null
+++ b/server/pnpm-lock.yaml
@@ -0,0 +1,1184 @@
+lockfileVersion: '6.0'
+
+dependencies:
+  '@koa/cors':
+    specifier: 4.0.0
+    version: 4.0.0
+  jsdom:
+    specifier: 20.0.2
+    version: 20.0.2
+  koa:
+    specifier: 2.13.4
+    version: 2.13.4
+  koa-router:
+    specifier: 12.0.0
+    version: 12.0.0
+  lru-cache:
+    specifier: 7.14.1
+    version: 7.14.1
+  node-fetch:
+    specifier: 2.6.7
+    version: 2.6.7
+  ts-node:
+    specifier: 10.9.1
+    version: 10.9.1(@types/node@18.11.10)(typescript@4.8.4)
+  typescript:
+    specifier: 4.8.4
+    version: 4.8.4
+  winston:
+    specifier: 3.8.2
+    version: 3.8.2
+
+devDependencies:
+  '@types/jsdom':
+    specifier: 20.0.0
+    version: 20.0.0
+  '@types/koa':
+    specifier: 2.13.5
+    version: 2.13.5
+  '@types/koa-router':
+    specifier: 7.4.4
+    version: 7.4.4
+  '@types/koa__cors':
+    specifier: 3.3.0
+    version: 3.3.0
+  '@types/lru-cache':
+    specifier: 7.10.9
+    version: 7.10.9
+  '@types/node':
+    specifier: 18.11.10
+    version: 18.11.10
+
+packages:
+
+  /@colors/colors@1.5.0:
+    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
+    engines: {node: '>=0.1.90'}
+    dev: false
+
+  /@cspotcode/source-map-support@0.8.1:
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+    dev: false
+
+  /@dabh/diagnostics@2.0.3:
+    resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
+    dependencies:
+      colorspace: 1.1.4
+      enabled: 2.0.0
+      kuler: 2.0.0
+    dev: false
+
+  /@jridgewell/resolve-uri@3.1.0:
+    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
+  /@jridgewell/sourcemap-codec@1.4.14:
+    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
+    dev: false
+
+  /@jridgewell/trace-mapping@0.3.9:
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.0
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: false
+
+  /@koa/cors@4.0.0:
+    resolution: {integrity: sha512-Y4RrbvGTlAaa04DBoPBWJqDR5gPj32OOz827ULXfgB1F7piD1MB/zwn8JR2LAnvdILhxUbXbkXGWuNVsFuVFCQ==}
+    engines: {node: '>= 14.0.0'}
+    dependencies:
+      vary: 1.1.2
+    dev: false
+
+  /@tootallnate/once@2.0.0:
+    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
+    engines: {node: '>= 10'}
+    dev: false
+
+  /@tsconfig/node10@1.0.8:
+    resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==}
+    dev: false
+
+  /@tsconfig/node12@1.0.9:
+    resolution: {integrity: sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw==}
+    dev: false
+
+  /@tsconfig/node14@1.0.1:
+    resolution: {integrity: sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg==}
+    dev: false
+
+  /@tsconfig/node16@1.0.2:
+    resolution: {integrity: sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==}
+    dev: false
+
+  /@types/accepts@1.3.5:
+    resolution: {integrity: sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==}
+    dependencies:
+      '@types/node': 18.11.10
+    dev: true
+
+  /@types/body-parser@1.19.2:
+    resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
+    dependencies:
+      '@types/connect': 3.4.35
+      '@types/node': 18.11.10
+    dev: true
+
+  /@types/connect@3.4.35:
+    resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
+    dependencies:
+      '@types/node': 18.11.10
+    dev: true
+
+  /@types/content-disposition@0.5.4:
+    resolution: {integrity: sha512-0mPF08jn9zYI0n0Q/Pnz7C4kThdSt+6LD4amsrYDDpgBfrVWa3TcCOxKX1zkGgYniGagRv8heN2cbh+CAn+uuQ==}
+    dev: true
+
+  /@types/cookies@0.7.7:
+    resolution: {integrity: sha512-h7BcvPUogWbKCzBR2lY4oqaZbO3jXZksexYJVFvkrFeLgbZjQkU4x8pRq6eg2MHXQhY0McQdqmmsxRWlVAHooA==}
+    dependencies:
+      '@types/connect': 3.4.35
+      '@types/express': 4.17.13
+      '@types/keygrip': 1.0.2
+      '@types/node': 18.11.10
+    dev: true
+
+  /@types/express-serve-static-core@4.17.28:
+    resolution: {integrity: sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==}
+    dependencies:
+      '@types/node': 18.11.10
+      '@types/qs': 6.9.7
+      '@types/range-parser': 1.2.4
+    dev: true
+
+  /@types/express@4.17.13:
+    resolution: {integrity: sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==}
+    dependencies:
+      '@types/body-parser': 1.19.2
+      '@types/express-serve-static-core': 4.17.28
+      '@types/qs': 6.9.7
+      '@types/serve-static': 1.13.10
+    dev: true
+
+  /@types/http-assert@1.5.3:
+    resolution: {integrity: sha512-FyAOrDuQmBi8/or3ns4rwPno7/9tJTijVW6aQQjK02+kOQ8zmoNg2XJtAuQhvQcy1ASJq38wirX5//9J1EqoUA==}
+    dev: true
+
+  /@types/http-errors@1.8.2:
+    resolution: {integrity: sha512-EqX+YQxINb+MeXaIqYDASb6U6FCHbWjkj4a1CKDBks3d/QiB2+PqBLyO72vLDgAO1wUI4O+9gweRcQK11bTL/w==}
+    dev: true
+
+  /@types/jsdom@20.0.0:
+    resolution: {integrity: sha512-YfAchFs0yM1QPDrLm2VHe+WHGtqms3NXnXAMolrgrVP6fgBHHXy1ozAbo/dFtPNtZC/m66bPiCTWYmqp1F14gA==}
+    dependencies:
+      '@types/node': 18.11.10
+      '@types/tough-cookie': 4.0.1
+      parse5: 7.1.1
+    dev: true
+
+  /@types/keygrip@1.0.2:
+    resolution: {integrity: sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==}
+    dev: true
+
+  /@types/koa-compose@3.2.5:
+    resolution: {integrity: sha512-B8nG/OoE1ORZqCkBVsup/AKcvjdgoHnfi4pZMn5UwAPCbhk/96xyv284eBYW8JlQbQ7zDmnpFr68I/40mFoIBQ==}
+    dependencies:
+      '@types/koa': 2.13.5
+    dev: true
+
+  /@types/koa-router@7.4.4:
+    resolution: {integrity: sha512-3dHlZ6CkhgcWeF6wafEUvyyqjWYfKmev3vy1PtOmr0mBc3wpXPU5E8fBBd4YQo5bRpHPfmwC5yDaX7s4jhIN6A==}
+    dependencies:
+      '@types/koa': 2.13.5
+    dev: true
+
+  /@types/koa@2.13.5:
+    resolution: {integrity: sha512-HSUOdzKz3by4fnqagwthW/1w/yJspTgppyyalPVbgZf8jQWvdIXcVW5h2DGtw4zYntOaeRGx49r1hxoPWrD4aA==}
+    dependencies:
+      '@types/accepts': 1.3.5
+      '@types/content-disposition': 0.5.4
+      '@types/cookies': 0.7.7
+      '@types/http-assert': 1.5.3
+      '@types/http-errors': 1.8.2
+      '@types/keygrip': 1.0.2
+      '@types/koa-compose': 3.2.5
+      '@types/node': 18.11.10
+    dev: true
+
+  /@types/koa__cors@3.3.0:
+    resolution: {integrity: sha512-FUN8YxcBakIs+walVe3+HcNP+Bxd0SB8BJHBWkglZ5C1XQWljlKcEFDG/dPiCIqwVCUbc5X0nYDlH62uEhdHMA==}
+    dependencies:
+      '@types/koa': 2.13.5
+    dev: true
+
+  /@types/lru-cache@7.10.9:
+    resolution: {integrity: sha512-wrwgkdJ0xr8AbzKhVaRI8SXZN9saapPwwLoydBEr4HqMZET1LUTi1gdoaj82XmRJ9atqN7MtB0aja29iiK+7ag==}
+    dependencies:
+      lru-cache: 7.14.1
+    dev: true
+
+  /@types/mime@1.3.2:
+    resolution: {integrity: sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==}
+    dev: true
+
+  /@types/node@18.11.10:
+    resolution: {integrity: sha512-juG3RWMBOqcOuXC643OAdSA525V44cVgGV6dUDuiFtss+8Fk5x1hI93Rsld43VeJVIeqlP9I7Fn9/qaVqoEAuQ==}
+
+  /@types/qs@6.9.7:
+    resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
+    dev: true
+
+  /@types/range-parser@1.2.4:
+    resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
+    dev: true
+
+  /@types/serve-static@1.13.10:
+    resolution: {integrity: sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==}
+    dependencies:
+      '@types/mime': 1.3.2
+      '@types/node': 18.11.10
+    dev: true
+
+  /@types/tough-cookie@4.0.1:
+    resolution: {integrity: sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==}
+    dev: true
+
+  /abab@2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+    dev: false
+
+  /accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+    dev: false
+
+  /acorn-globals@7.0.1:
+    resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
+    dependencies:
+      acorn: 8.8.0
+      acorn-walk: 8.2.0
+    dev: false
+
+  /acorn-walk@8.2.0:
+    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
+  /acorn@8.7.0:
+    resolution: {integrity: sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: false
+
+  /acorn@8.8.0:
+    resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
+    engines: {node: '>=0.4.0'}
+    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
+
+  /arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+    dev: false
+
+  /async@3.2.3:
+    resolution: {integrity: sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==}
+    dev: false
+
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
+  /cache-content-type@1.0.1:
+    resolution: {integrity: sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      mime-types: 2.1.35
+      ylru: 1.3.2
+    dev: false
+
+  /co@4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+    dev: false
+
+  /color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: false
+
+  /color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: false
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: false
+
+  /color-string@1.9.0:
+    resolution: {integrity: sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==}
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    dev: false
+
+  /color@3.2.1:
+    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
+    dependencies:
+      color-convert: 1.9.3
+      color-string: 1.9.0
+    dev: false
+
+  /colorspace@1.1.4:
+    resolution: {integrity: sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==}
+    dependencies:
+      color: 3.2.1
+      text-hex: 1.0.0
+    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
+
+  /content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: false
+
+  /content-type@1.0.4:
+    resolution: {integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /cookies@0.8.0:
+    resolution: {integrity: sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      depd: 2.0.0
+      keygrip: 1.1.0
+    dev: false
+
+  /create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+    dev: false
+
+  /cssom@0.3.8:
+    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
+    dev: false
+
+  /cssom@0.5.0:
+    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
+    dev: false
+
+  /cssstyle@2.3.0:
+    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
+    engines: {node: '>=8'}
+    dependencies:
+      cssom: 0.3.8
+    dev: false
+
+  /data-urls@3.0.2:
+    resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 11.0.0
+    dev: false
+
+  /debug@4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: false
+
+  /decimal.js@10.4.2:
+    resolution: {integrity: sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA==}
+    dev: false
+
+  /deep-equal@1.0.1:
+    resolution: {integrity: sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==}
+    dev: false
+
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: false
+
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
+  /delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+    dev: false
+
+  /depd@1.1.2:
+    resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+    dev: false
+
+  /destroy@1.1.1:
+    resolution: {integrity: sha512-jxwFW+yrVOLdwqIWvowFOM8UPdhZnvOF6mhXQQLXMxBDLtv2JVJlVJPEwkDv9prqscEtGtmnxuuI6pQKStK1vA==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+    dev: false
+
+  /diff@4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+    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
+
+  /ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+    dev: false
+
+  /enabled@2.0.0:
+    resolution: {integrity: sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==}
+    dev: false
+
+  /encodeurl@1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
+    dev: false
+
+  /entities@4.4.0:
+    resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
+    engines: {node: '>=0.12'}
+
+  /escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    dev: false
+
+  /escodegen@2.0.0:
+    resolution: {integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+      optionator: 0.8.3
+    optionalDependencies:
+      source-map: 0.6.1
+    dev: false
+
+  /esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: false
+
+  /estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+    dev: false
+
+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: false
+
+  /fecha@4.2.1:
+    resolution: {integrity: sha512-MMMQ0ludy/nBs1/o0zVOiKTpG7qMbonKUzjJgQFEuvq6INZ1OraKPRAWkBq5vlKLOUMpmNYG1JoN3oDPUQ9m3Q==}
+    dev: false
+
+  /fn.name@1.1.0:
+    resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
+    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
+
+  /fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /has-symbols@1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
+  /has-tostringtag@1.0.0:
+    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: false
+
+  /html-encoding-sniffer@3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+    dependencies:
+      whatwg-encoding: 2.0.0
+    dev: false
+
+  /http-assert@1.5.0:
+    resolution: {integrity: sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      deep-equal: 1.0.1
+      http-errors: 1.8.1
+    dev: false
+
+  /http-errors@1.8.1:
+    resolution: {integrity: sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 1.5.0
+      toidentifier: 1.0.1
+    dev: false
+
+  /http-errors@2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      toidentifier: 1.0.1
+    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
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: false
+
+  /is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: false
+
+  /is-generator-function@1.0.10:
+    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: false
+
+  /is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+    dev: false
+
+  /is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /jsdom@20.0.2:
+    resolution: {integrity: sha512-AHWa+QO/cgRg4N+DsmHg1Y7xnz+8KU3EflM0LVDTdmrYOc1WWTSkOjtpUveQH+1Bqd5rtcVnb/DuxV/UjDO4rA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+    dependencies:
+      abab: 2.0.6
+      acorn: 8.8.0
+      acorn-globals: 7.0.1
+      cssom: 0.5.0
+      cssstyle: 2.3.0
+      data-urls: 3.0.2
+      decimal.js: 10.4.2
+      domexception: 4.0.0
+      escodegen: 2.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.2
+      parse5: 7.1.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.2
+      w3c-xmlserializer: 3.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 11.0.0
+      ws: 8.10.0
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /keygrip@1.1.0:
+    resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      tsscmp: 1.0.6
+    dev: false
+
+  /koa-compose@4.1.0:
+    resolution: {integrity: sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==}
+    dev: false
+
+  /koa-convert@2.0.0:
+    resolution: {integrity: sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      co: 4.6.0
+      koa-compose: 4.1.0
+    dev: false
+
+  /koa-router@12.0.0:
+    resolution: {integrity: sha512-zGrdiXygGYW8WvrzeGsHZvKnHs4DzyGoqJ9a8iHlRkiwuEAOAPyI27//OlhoWdgFAEIM3qbUgr0KCuRaP/TCag==}
+    engines: {node: '>= 12'}
+    dependencies:
+      http-errors: 2.0.0
+      koa-compose: 4.1.0
+      methods: 1.1.2
+      path-to-regexp: 6.2.1
+    dev: false
+
+  /koa@2.13.4:
+    resolution: {integrity: sha512-43zkIKubNbnrULWlHdN5h1g3SEKXOEzoAlRsHOTFpnlDu8JlAOZSMJBLULusuXRequboiwJcj5vtYXKB3k7+2g==}
+    engines: {node: ^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4}
+    dependencies:
+      accepts: 1.3.8
+      cache-content-type: 1.0.1
+      content-disposition: 0.5.4
+      content-type: 1.0.4
+      cookies: 0.8.0
+      debug: 4.3.4
+      delegates: 1.0.0
+      depd: 2.0.0
+      destroy: 1.1.1
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      fresh: 0.5.2
+      http-assert: 1.5.0
+      http-errors: 1.8.1
+      is-generator-function: 1.0.10
+      koa-compose: 4.1.0
+      koa-convert: 2.0.0
+      on-finished: 2.4.1
+      only: 0.0.2
+      parseurl: 1.3.3
+      statuses: 1.5.0
+      type-is: 1.6.18
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /kuler@2.0.0:
+    resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==}
+    dev: false
+
+  /levn@0.3.0:
+    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+    dev: false
+
+  /logform@2.4.0:
+    resolution: {integrity: sha512-CPSJw4ftjf517EhXZGGvTHHkYobo7ZCc0kvwUoOYcjfR2UVrI66RHj8MCrfAdEitdmFqbu2BYdYs8FHHZSb6iw==}
+    dependencies:
+      '@colors/colors': 1.5.0
+      fecha: 4.2.1
+      ms: 2.1.3
+      safe-stable-stringify: 2.3.1
+      triple-beam: 1.3.0
+    dev: false
+
+  /lru-cache@7.14.1:
+    resolution: {integrity: sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==}
+    engines: {node: '>=12'}
+
+  /make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+    dev: false
+
+  /media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+    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
+
+  /ms@2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: false
+
+  /ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    dev: false
+
+  /negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /node-fetch@2.6.7:
+    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
+  /nwsapi@2.2.2:
+    resolution: {integrity: sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==}
+    dev: false
+
+  /on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      ee-first: 1.1.1
+    dev: false
+
+  /one-time@1.0.0:
+    resolution: {integrity: sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==}
+    dependencies:
+      fn.name: 1.1.0
+    dev: false
+
+  /only@0.0.2:
+    resolution: {integrity: sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==}
+    dev: false
+
+  /optionator@0.8.3:
+    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.3.0
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+      word-wrap: 1.2.3
+    dev: false
+
+  /parse5@7.1.1:
+    resolution: {integrity: sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==}
+    dependencies:
+      entities: 4.4.0
+
+  /parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+    dev: false
+
+  /path-to-regexp@6.2.1:
+    resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
+    dev: false
+
+  /prelude-ls@1.1.2:
+    resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
+    engines: {node: '>= 0.8.0'}
+    dev: false
+
+  /psl@1.8.0:
+    resolution: {integrity: sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==}
+    dev: false
+
+  /punycode@2.1.1:
+    resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+    dev: false
+
+  /readable-stream@3.6.0:
+    resolution: {integrity: sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+    dev: false
+
+  /requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+    dev: false
+
+  /safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    dev: false
+
+  /safe-stable-stringify@2.3.1:
+    resolution: {integrity: sha512-kYBSfT+troD9cDA85VDnHZ1rpHC50O0g1e6WlGHVCz/g+JS+9WKLj+XwFYyR8UbrZN8ll9HUpDAAddY58MGisg==}
+    engines: {node: '>=10'}
+    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
+
+  /setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+    dev: false
+
+  /simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: false
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /stack-trace@0.0.10:
+    resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==}
+    dev: false
+
+  /statuses@1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /statuses@2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+    dev: false
+
+  /string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: false
+
+  /symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+    dev: false
+
+  /text-hex@1.0.0:
+    resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
+    dev: false
+
+  /toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+    dev: false
+
+  /tough-cookie@4.1.2:
+    resolution: {integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      psl: 1.8.0
+      punycode: 2.1.1
+      universalify: 0.2.0
+      url-parse: 1.5.10
+    dev: false
+
+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
+  /tr46@3.0.0:
+    resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
+    engines: {node: '>=12'}
+    dependencies:
+      punycode: 2.1.1
+    dev: false
+
+  /triple-beam@1.3.0:
+    resolution: {integrity: sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==}
+    dev: false
+
+  /ts-node@10.9.1(@types/node@18.11.10)(typescript@4.8.4):
+    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.8
+      '@tsconfig/node12': 1.0.9
+      '@tsconfig/node14': 1.0.1
+      '@tsconfig/node16': 1.0.2
+      '@types/node': 18.11.10
+      acorn: 8.7.0
+      acorn-walk: 8.2.0
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 4.8.4
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    dev: false
+
+  /tsscmp@1.0.6:
+    resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
+    engines: {node: '>=0.6.x'}
+    dev: false
+
+  /type-check@0.3.2:
+    resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.1.2
+    dev: false
+
+  /type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+    dev: false
+
+  /typescript@4.8.4:
+    resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: false
+
+  /universalify@0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.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
+
+  /v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+    dev: false
+
+  /vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+    dev: false
+
+  /w3c-xmlserializer@3.0.0:
+    resolution: {integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==}
+    engines: {node: '>=12'}
+    dependencies:
+      xml-name-validator: 4.0.0
+    dev: false
+
+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    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@11.0.0:
+    resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      tr46: 3.0.0
+      webidl-conversions: 7.0.0
+    dev: false
+
+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
+  /winston-transport@4.5.0:
+    resolution: {integrity: sha512-YpZzcUzBedhlTAfJg6vJDlyEai/IFMIVcaEZZyl3UXIl4gmqRpU7AE89AHLkbzLUsv0NVmw7ts+iztqKxxPW1Q==}
+    engines: {node: '>= 6.4.0'}
+    dependencies:
+      logform: 2.4.0
+      readable-stream: 3.6.0
+      triple-beam: 1.3.0
+    dev: false
+
+  /winston@3.8.2:
+    resolution: {integrity: sha512-MsE1gRx1m5jdTTO9Ld/vND4krP2To+lgDoMEHGGa4HIlAUyXJtfc7CxQcGXVyz2IBpw5hbFkj2b/AtUdQwyRew==}
+    engines: {node: '>= 12.0.0'}
+    dependencies:
+      '@colors/colors': 1.5.0
+      '@dabh/diagnostics': 2.0.3
+      async: 3.2.3
+      is-stream: 2.0.1
+      logform: 2.4.0
+      one-time: 1.0.0
+      readable-stream: 3.6.0
+      safe-stable-stringify: 2.3.1
+      stack-trace: 0.0.10
+      triple-beam: 1.3.0
+      winston-transport: 4.5.0
+    dev: false
+
+  /word-wrap@1.2.3:
+    resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /ws@8.10.0:
+    resolution: {integrity: sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==}
+    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
+
+  /ylru@1.3.2:
+    resolution: {integrity: sha512-RXRJzMiK6U2ye0BlGGZnmpwJDPgakn6aNQ0A7gHRbD4I0uvK4TW6UqkK1V0pp9jskjJBAXd3dRrbzWkqJ+6cxA==}
+    engines: {node: '>= 4.0.0'}
+    dev: false
+
+  /yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+    dev: false
diff --git a/server/token.ts b/server/token.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8ecbe4b283fb97e8c672db6299567610b05beb0d
--- /dev/null
+++ b/server/token.ts
@@ -0,0 +1,51 @@
+import * as fs from "fs";
+import * as process from "process";
+import logger from "./logger";
+import api from "../common/api";
+
+// Token env file path in render.com: All secret files you create are available to read at the root of your repo.
+const ENV_PATH_IN_RENDER = "./token.env";
+// For local dev, you need to pass the ENVPATH value in env variables.
+// e.g. ENVPATH=PATH_TO_YOUR_FILE pnpm dev
+// For production, we set a token.env file in render.com,
+// and the copy of the file is stored at https://github.com/bytebase/secret/tree/master/token/star-history.
+const envFilePath = process.env.ENVPATH || ENV_PATH_IN_RENDER;
+
+const savedTokens: string[] = [];
+let index = 0;
+
+export const initTokenFromEnv = async () => {
+  if (!fs.existsSync(envFilePath)) {
+    logger.error("Token file not found with path ", envFilePath);
+    process.exit(-1);
+  }
+  const envTokenString = fs.readFileSync(envFilePath).toString();
+  if (!envTokenString) {
+    logger.error("Token not found");
+    process.exit(-1);
+  }
+
+  const tokenList = envTokenString.split(/\r?\n/);
+  // Call GitHub API to check token usability
+  for (const token of tokenList) {
+    try {
+      await api.getRepoStargazersCount("star-history/star-history", token);
+      savedTokens.push(token);
+    } catch (error) {
+      logger.error(`Token ${token} is unusable`, error);
+    }
+  }
+
+  if (savedTokens.length === 0) {
+    logger.error("No usable token");
+    process.exit(-1);
+  }
+
+  logger.info(`Usable token amount: ${savedTokens.length}`);
+};
+
+// Get the next token for requests.
+export const getNextToken = () => {
+  index = (index + 1) % savedTokens.length;
+  return savedTokens[index];
+};
diff --git a/server/tsconfig.json b/server/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..80994b979d188075e4dcce6f5050f9458eb55792
--- /dev/null
+++ b/server/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es2015"],
+    "rootDir": "../",
+    "outDir": "dist",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "strict": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+  },
+  "include": ["./*.ts", "../common/*.ts", "../packages/**/*.ts", "../types/*.ts"]
+}
\ No newline at end of file
diff --git a/server/utils.ts b/server/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c458086e26d0a7c240e1246a105dbd01185b5136
--- /dev/null
+++ b/server/utils.ts
@@ -0,0 +1,34 @@
+import fetch from "node-fetch";
+
+/**
+ * In nodejs, the filter element from d3 will auto-transfrom its attributes to lower case with unfound reason.
+ * So we have to replace it with camel case string.
+ */
+export const replaceSVGContentFilterWithCamelcase = (
+  svgContent: string
+): string => {
+  return svgContent.replace(
+    /<filter (.*?)>(.*?)<\/filter>/g,
+    `<filter xmlns="http://www.w3.org/2000/svg" id="xkcdify" filterUnits="userSpaceOnUse" x="-5" y="-5" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.05" result="noise"/><feDisplacementMap scale="5" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="noise"/></filter>`
+  );
+};
+
+export const getChartWidthWithSize = (size: string) => {
+  if (size === "mobile") {
+    return 600;
+  } else if (size === "laptop") {
+    return 800;
+  } else if (size === "desktop") {
+    return 1000;
+  } else {
+    return 600;
+  }
+};
+
+export async function getBase64Image(url: string): Promise<string> {
+  const imageUrlData = await fetch(url);
+  const buffer = await imageUrlData.arrayBuffer();
+  const stringifiedBuffer = Buffer.from(buffer).toString("base64");
+  const contentType = imageUrlData.headers.get("content-type");
+  return `data:${contentType};base64,${stringifiedBuffer}`;
+}
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000000000000000000000000000000000000..98240aef8109abb6b658cd4d7c5cd21106cb354e
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/src/components/Charts/StarXYChart.vue b/src/components/Charts/StarXYChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1b3d69b13bea0d2d7ef374428c7bfc7cbf6e8ec6
--- /dev/null
+++ b/src/components/Charts/StarXYChart.vue
@@ -0,0 +1,103 @@
+<template>
+  <div
+    ref="chartContainerElRef"
+    class="w-full h-auto origin-top-left min-w-600px flex flex-col justify-start items-start overflow-x-auto select-none"
+    :class="`${classname}`"
+  >
+    <svg
+      ref="svgElRef"
+      class="w-full h-full"
+      @click="handleSVGElementClick"
+    ></svg>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUpdated, ref } from "vue";
+// For customizing multi mode chart: base on create date or timeline, we have rewrited the chart.xkcd's XY chart with TypeScript.
+// Here are some reasons about this motivation.
+//
+// The shortcomings of the old chart.xkcd (project link: https://github.com/timqian/chart.xkcd):
+// 1. The X axis label string could be only formatted date or raw text;
+// 2. It's difficult/not possible to debug and customize;
+//
+// The advantages of the new one:
+// 1. Writing in native TypeScript;
+// 2. Easy to debug chart internal;
+// 3. Totally customizable.
+import XYChart, { XYChartData } from "../../../packages/xy-chart";
+import { MIN_CHART_WIDTH } from "../../helpers/consts";
+
+const props = defineProps({
+  classname: {
+    type: String,
+    default: "",
+  },
+  data: {
+    type: Object as () => XYChartData,
+  },
+  chartMode: {
+    type: String,
+    default: "Date",
+  },
+  timeFormat: String,
+});
+
+const chartContainerElRef = ref<HTMLDivElement>();
+const svgElRef = ref<SVGSVGElement>();
+
+const drawStarChart = (data: XYChartData) => {
+  if (svgElRef.value) {
+    svgElRef.value.innerHTML = "";
+
+    XYChart(
+      svgElRef.value,
+      {
+        title: "Star History",
+        xLabel: props.chartMode === "Timeline" ? "Timeline" : "Date",
+        yLabel: "GitHub Stars",
+        data: {
+          datasets: data.datasets,
+        },
+        showDots: true,
+      },
+      {
+        xTickLabelType: props.chartMode === "Date" ? "Date" : "Number",
+        envType: "browser",
+      }
+    );
+  }
+};
+
+onMounted(() => {
+  if (props.data) {
+    drawStarChart(props.data);
+  }
+
+  // Scale chart to a suitable mobile view.
+  if (window.innerWidth < MIN_CHART_WIDTH) {
+    if (chartContainerElRef.value) {
+      const scaleRate = window.innerWidth / MIN_CHART_WIDTH;
+      chartContainerElRef.value.style.marginTop = "8px";
+      chartContainerElRef.value.style.transform = `scale(${scaleRate})`;
+
+      if (chartContainerElRef.value.parentElement) {
+        chartContainerElRef.value.parentElement.style.minHeight = "0";
+        chartContainerElRef.value.parentElement.style.height = `${
+          chartContainerElRef.value.clientHeight * scaleRate + 16
+        }px`;
+      }
+    }
+  }
+});
+
+onUpdated(() => {
+  if (props.data) {
+    drawStarChart(props.data);
+  }
+});
+
+const handleSVGElementClick = () => {
+  // Maybe we can capture the clicked svg element to expand chart functions.
+};
+</script>
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cacc46744cf8282f45187bfa2316f388593b9c44
--- /dev/null
+++ b/src/components/Dialog.vue
@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="fixed w-full px-3 md:px-0 h-full flex flex-col justify-center items-center bg-black bg-opacity-60 z-100 top-0 left-0"
+    :class="props.classname"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from "vue";
+
+const props = defineProps({
+  classname: {
+    type: String,
+    default: "",
+  },
+});
+
+onMounted(() => {
+  document.body.classList.add("overflow-hidden");
+});
+
+onUnmounted(() => {
+  document.body.classList.remove("overflow-hidden");
+});
+</script>
diff --git a/src/components/EmbedChartGuideDialog.vue b/src/components/EmbedChartGuideDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b6b0013dea10e4c34b5eb0c630803bdb8c2b859
--- /dev/null
+++ b/src/components/EmbedChartGuideDialog.vue
@@ -0,0 +1,92 @@
+<template>
+  <Dialog>
+    <div
+      class="w-160 max-w-full h-auto flex flex-col justify-start items-start bg-white rounded-md"
+    >
+      <header
+        class="w-full flex flex-row justify-between items-center p-4 pr-5 bg-gray-100 rounded-t-lg"
+      >
+        <span class="text-2xl">Step-to-step guide</span>
+        <i
+          class="fas fa-times-circle text-xl text-gray-400 cursor-pointer hover:text-gray-500"
+          @click="handleCloseBtnClick"
+        ></i>
+      </header>
+      <main class="w-full flex flex-col justify-start items-start p-4 pr-5">
+        <p class="leading-7">
+          It's very easy to add star-history chart into GitHub README, just two
+          steps:
+        </p>
+        <ol class="list-decimal pl-5 mt-3">
+          <li class="mb-2">
+            <p>Copy the raw markdown string below</p>
+            <div
+              class="relative w-full h-auto border mt-2 px-4 py-3 rounded-md shadow-inner"
+            >
+              <pre
+                class="font-mono break-all text-gray-600 text-sm whitespace-pre-wrap"
+                >{{ embedCode }}</pre
+              >
+              <button
+                class="absolute top-2 right-2 px-4 leading-8 text-sm rounded-md bg-green-600 shadow-inner text-white hover:bg-green-700"
+                @click="handleCopyBtnClick"
+              >
+                Copy
+              </button>
+            </div>
+          </li>
+          <li class="mb-2">
+            <p>
+              Paste it into your repo
+              <a
+                v-if="singleRepo"
+                class="font-mono underline text-blue-600 hover:opacity-80"
+                :href="`https://github.com/${singleRepo}/blob/master/README.md`"
+                target="_blank"
+                >README</a
+              >
+              <span v-else class="font-mono">README</span>
+            </p>
+          </li>
+        </ol>
+      </main>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import utils from "../../common/utils";
+import toast from "../helpers/toast";
+import useAppStore from "../store";
+import Dialog from "./Dialog.vue";
+
+const emit = defineEmits(["close"]);
+
+const store = useAppStore();
+
+const singleRepo = computed(() => {
+  if (store.repos.length === 1) {
+    return store.repos[0];
+  } else {
+    return null;
+  }
+});
+const embedCode = computed(() => {
+  return `## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=${store.repos.join(
+    ","
+  )}&type=${store.chartMode})](${window.location.href})
+`;
+});
+
+const handleCopyBtnClick = () => {
+  utils.copyTextToClipboard(embedCode.value);
+  toast.succeed("Embed markdown code copied");
+};
+
+const handleCloseBtnClick = () => {
+  emit("close");
+};
+</script>
diff --git a/src/components/EmbedMarkdownSection.vue b/src/components/EmbedMarkdownSection.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a98940e976ef5b7a103ec378cc63e3db5bcf3094
--- /dev/null
+++ b/src/components/EmbedMarkdownSection.vue
@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="w-full h-auto mb-16 px-3 mx-auto max-w-4xl flex flex-col justify-start items-center"
+  >
+    <p class="leading-8 mb-3">
+      🌟 Show real-time chart on
+      {{ repoText }}
+      <a
+        v-if="singleRepo"
+        class="font-mono font-bold underline text-blue-500 hover:opacity-80"
+        :href="`https://github.com/${singleRepo}/blob/master/README.md`"
+        target="_blank"
+        >README.md</a
+      >
+      <span v-else class="font-mono font-bold text-gray-500">README.md</span>
+      with the following code (<a
+        class="font-mono font-bold underline text-blue-500 hover:opacity-80"
+        :href="`https://github.com/bytebase/bytebase#star-history`"
+        target="_blank"
+        >example</a
+      >):
+    </p>
+    <div class="w-full bg-gray-100 text-dark rounded-md shadow">
+      <pre class="w-full p-4 font-mono break-all whitespace-pre-wrap text-sm">{{
+        embedCode
+      }}</pre>
+      <p
+        class="w-full text-center py-4 bg-green-600 text-light font-mono rounded-b-md cursor-pointer hover:bg-green-700"
+        @click="handleCopyBtnClick"
+      >
+        Copy to GitHub README.md
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import utils from "../../common/utils";
+import toast from "../helpers/toast";
+import useAppStore from "../store";
+
+const store = useAppStore();
+const singleRepo = computed(() => {
+  if (store.repos.length === 1) {
+    return store.repos[0];
+  } else {
+    return null;
+  }
+});
+const repoText = computed(() => {
+  if (singleRepo.value) {
+    return singleRepo.value.split("/")[1];
+  } else {
+    return "your repository's";
+  }
+});
+
+const embedCode = computed(() => {
+  return `## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=${store.repos.join(
+    ","
+  )}&type=${store.chartMode})](${window.location.href})
+`;
+});
+
+const handleCopyBtnClick = () => {
+  utils.copyTextToClipboard(embedCode.value);
+  toast.succeed("Embed markdown code copied");
+};
+</script>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b82e331a120396b18e8782c7502b7599ead506da
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="relative w-full shrink-0 h-auto mt-6 flex flex-col justify-end items-center"
+  >
+    <div
+      class="w-full py-2 px-3 md:w-5/6 lg:max-w-7xl flex flex-row flex-wrap justify-between items-center text-neutral-700 border-t"
+    >
+      <div
+        class="text-sm leading-8 flex flex-row flex-wrap justify-start items-center"
+      >
+        <h1 class="h-full text-gray-600">
+          The missing GitHub star history graph
+        </h1>
+        <a
+          class="h-full flex flex-row justify-center items-center ml-3 text-lg hover:opacity-80"
+          href="https://twitter.com/StarHistoryHQ"
+          target="_blank"
+        >
+          <i class="fab fa-twitter"></i>
+        </a>
+        <a
+          class="h-full flex flex-row justify-center items-center mx-3 text-lg hover:opacity-80"
+          href="mailto:star@bytebase.com"
+          target="_blank"
+        >
+          <i class="fas fa-envelope"></i>
+        </a>
+        <a
+          class="h-full flex flex-row justify-center items-center mr-3 text-lg hover:opacity-80"
+          href="https://github.com/star-history/star-history"
+          target="_blank"
+        >
+          <i class="fab fa-github"></i>
+        </a>
+      </div>
+      <div class="flex flex-row flex-wrap items-center space-x-4">
+        <div
+          class="flex flex-row text-sm leading-8 underline text-blue-700 hover:opacity-80"
+        >
+          <img class="h-6 mt-1 mr-2" src="/public/sqlchat.webp" />
+          <a href="https://sqlchat.ai" target="_blank"> SQL Chat </a>
+        </div>
+        <div
+          class="flex flex-row text-sm leading-8 underline text-blue-700 hover:opacity-80"
+        >
+          <img class="h-6 mt-1 mr-2" src="/public/dbcost.webp" />
+          <a href="https://dbcost.com" target="_blank">DB Cost</a>
+        </div>
+      </div>
+      <div
+        class="text-xs leading-8 flex flex-row flex-nowrap justify-end items-center"
+      >
+        <span class="text-gray-600">
+          Maintained by
+          <a
+            class="text-blue-500 font-bold hover:opacity-80"
+            href="https://bytebase.com"
+            target="_blank"
+            >Bytebase</a
+          >, originally built by
+          <a
+            class="bg-blue-400 text-white p-1 pl-2 pr-2 rounded-l-2xl rounded-r-2xl hover:opacity-80"
+            href="https://twitter.com/tim_qian"
+            target="_blank"
+          >
+            @tim_qian
+          </a>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/GenerateEmbedCodeDialog.vue b/src/components/GenerateEmbedCodeDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6fe4719db34057dcae96ed91c14d4e71a42f0bfa
--- /dev/null
+++ b/src/components/GenerateEmbedCodeDialog.vue
@@ -0,0 +1,128 @@
+<template>
+  <Dialog>
+    <div
+      class="w-160 max-w-full h-auto flex flex-col justify-start items-start bg-white rounded-md"
+    >
+      <header
+        class="w-full flex flex-row justify-between items-center p-4 pr-5 bg-gray-100 rounded-t-lg"
+      >
+        <span class="text-2xl">Embed Chart</span>
+        <i
+          class="fas fa-times-circle text-xl text-gray-400 cursor-pointer hover:text-gray-500"
+          @click="handleCloseBtnClick"
+        ></i>
+      </header>
+      <main class="w-full flex flex-col justify-start items-start p-4 pr-5">
+        <p>
+          Star-history will need your
+          <a
+            class="text-blue-500"
+            href="https://github.com/settings/tokens"
+            target="_blank"
+          >
+            personal access token
+          </a>
+          to unlimit the
+          <a
+            class="text-blue-500"
+            href="https://developer.github.com/v3/#rate-limiting"
+            target="_blank"
+          >
+            GitHub API rate limit</a
+          >. If you don't have one,
+          <a
+            class="text-blue-500"
+            href="https://github.com/settings/tokens/new"
+            target="_blank"
+          >
+            create one</a
+          >, and paste it into the textbox below (no scope to your personal data
+          is needed).
+        </p>
+        <p class="leading-8 mt-4">
+          <span class="text-red-600">*</span> Access Token
+        </p>
+        <p class="rounded-md font-bold text-sm text-red-600">
+          Please do not give ANY SCOPE PERMISSION to the token. If you did,
+          someone could use this to access your personal data.
+        </p>
+        <input
+          v-model="state.token"
+          class="w-full outline-none border mt-2 shadow-inner p-2 rounded-md focus:shadow-focus"
+          type="text"
+        />
+        <p class="leading-8 mt-4 mb-1">
+          Copy and paste the below codes into your blog or website
+        </p>
+        <div
+          class="relative w-full h-auto border px-4 py-3 pb-14 rounded-md shadow-inner"
+        >
+          <p class="font-mono break-all text-gray-600 text-sm">
+            {{ state.embedCode }}
+          </p>
+          <button
+            class="absolute bottom-2 right-2 px-4 leading-10 rounded-md bg-green-600 shadow-inner text-light hover:bg-green-700"
+            @click="handleCopyBtnClick"
+          >
+            Copy
+          </button>
+        </div>
+      </main>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive, watch } from "vue";
+import toast from "../helpers/toast";
+import utils from "../../common/utils";
+import useAppStore from "../store";
+import Dialog from "./Dialog.vue";
+
+interface State {
+  embedCode: string;
+  token: string;
+}
+
+const emit = defineEmits(["close"]);
+
+const store = useAppStore();
+const state = reactive<State>({
+  embedCode: "",
+  token: store.token,
+});
+
+const generateEmbedCode = () => {
+  const secret = btoa(state.token);
+  state.embedCode = `<iframe style="width:100%;height:auto;min-width:600px;min-height:400px;" src="${
+    window.location.origin
+  }/embed?secret=${secret}#${store.repos.join("&")}&${
+    store.chartMode
+  }" frameBorder="0"></iframe>`;
+};
+
+onMounted(() => {
+  generateEmbedCode();
+});
+
+watch(
+  () => [state.token],
+  () => {
+    generateEmbedCode();
+  }
+);
+
+const handleCopyBtnClick = () => {
+  if (state.token === "") {
+    toast.warn("Please input the token");
+    return;
+  }
+
+  utils.copyTextToClipboard(state.embedCode);
+  toast.succeed("Embed code copied");
+};
+
+const handleCloseBtnClick = () => {
+  emit("close");
+};
+</script>
diff --git a/src/components/GitHubStarButton.vue b/src/components/GitHubStarButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..27c9a8c6eb4e89bcbd871bbce046a8cfa89d1b30
--- /dev/null
+++ b/src/components/GitHubStarButton.vue
@@ -0,0 +1,45 @@
+<template>
+  <a
+    class="border rounded flex flex-row justify-start items-center text-black text-xs bg-white shadow-inner hover:opacity-80"
+    href="https://github.com/star-history/star-history"
+    target="_blank"
+    aria-label="Star star-history/star-history on GitHub"
+  >
+    <span
+      class="pr-1 pl-2 h-full flex flex-row justify-center items-center bg-gray-100 border-r font-medium"
+    >
+      <i class="fab fa-github text-base mr-1 -mt-px"></i>
+      <span class="mt-px">Star</span>
+    </span>
+    <div class="h-full block px-2 mt-px font-medium">
+      <span v-if="starCount === 0">
+        <i class="fa fa-spinner animate-spin opacity-90 px-2"></i>
+      </span>
+      <span v-else>{{ starCount }}</span>
+    </div>
+  </a>
+</template>
+
+<script lang="ts" setup>
+import axios from "axios";
+import { onMounted, ref } from "vue";
+
+const starCount = ref(0);
+
+const getRepoStarCount = async () => {
+  const { data } = await axios.get(
+    `https://api.github.com/repos/star-history/star-history`,
+    {
+      headers: {
+        Accept: "application/vnd.github.v3.star+json",
+        Authorization: "",
+      },
+    }
+  );
+  return data.stargazers_count as number;
+};
+
+onMounted(async () => {
+  starCount.value = await getRepoStarCount();
+});
+</script>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0179fe5dea40f8db2823f6e793c0a5fabdcd122
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,136 @@
+<template>
+  <header
+    class="w-full h-14 shrink-0 flex flex-row justify-center items-center bg-dark text-light"
+  >
+    <div
+      class="w-full md:max-w-5xl lg:max-w-7xl h-full flex flex-row justify-between items-center px-0 sm:px-4"
+    >
+      <div class="h-full flex flex-row justify-start items-center">
+        <router-link
+          class="h-full flex flex-row justify-center items-center px-4 hover:bg-zinc-800"
+          to="/"
+        >
+          <img class="w-7 h-auto" src="/icon.png" />
+        </router-link>
+        <router-link
+          class="h-full flex flex-row justify-center items-center px-4 hover:bg-zinc-800"
+          to="/blog"
+        >
+          <span class="text-light font-semibold">Blog</span>
+        </router-link>
+        <a
+          class="h-full flex flex-row justify-center items-center px-4 hover:bg-zinc-800"
+          href="https://twitter.com/StarHistoryHQ"
+          target="_blank"
+        >
+          <span class="hidden lg:flex text-light font-semibold pr-3"
+            >Follow us on</span
+          >
+          <i class="fab fa-twitter text-2xl text-blue-300"></i>
+        </a>
+      </div>
+      <div class="hidden h-full md:flex flex-row justify-start items-center">
+        <router-link
+          class="h-full flex flex-row justify-center items-center px-4 hover:bg-zinc-800"
+          to="/blog/how-to-use-github-star-history"
+        >
+          📕 How to use this site
+        </router-link>
+      </div>
+      <div class="h-full hidden md:flex flex-row justify-end items-center">
+        <span
+          class="h-full flex flex-row justify-center items-center cursor-pointer font-semibold mr-2 px-3 hover:bg-zinc-800"
+          @click="handleSetTokenBtnClick"
+        >
+          {{ token ? "Edit" : "Add" }} Access Token
+        </span>
+        <GitHubStarButton />
+      </div>
+      <div class="h-full flex md:hidden flex-row justify-end items-center">
+        <span
+          class="relative h-full w-10 px-3 flex flex-row justify-center items-center cursor-pointer font-semibold text-light hover:bg-zinc-800"
+          @click="handleToggleDropMenuBtnClick"
+        >
+          <span
+            class="w-4 transition-all h-px bg-light absolute top-1/2"
+            :class="state.showDropMenu ? 'w-6 rotate-45' : '-mt-1'"
+          ></span>
+          <span
+            class="w-4 transition-all h-px bg-light absolute top-1/2"
+            :class="state.showDropMenu ? 'hidden' : ''"
+          ></span>
+          <span
+            class="w-4 transition-all h-px bg-light absolute top-1/2"
+            :class="state.showDropMenu ? 'w-6 -rotate-45' : 'mt-1'"
+          ></span>
+        </span>
+      </div>
+    </div>
+  </header>
+  <div
+    class="`w-full h-auto py-2 flex md:hidden flex-col justify-start items-start shadow-lg border-b"
+    :class="state.showDropMenu ? 'flex' : 'hidden'"
+  >
+    <router-link
+      class="h-12 px-3 w-full flex flex-row justify-start items-center cursor-pointer font-semibold text-dark mr-2 hover:bg-gray-100 hover:text-blue-500"
+      to="/blog/how-to-use-github-star-history"
+    >
+      📕 How to use this site
+    </router-link>
+    <span
+      class="h-12 px-3 w-full flex flex-row justify-start items-center cursor-pointer font-semibold text-dark mr-2 hover:bg-gray-100 hover:text-blue-500"
+      @click="handleSetTokenBtnClick"
+    >
+      {{ token ? "Edit" : "Add" }} Access Token
+    </span>
+    <span class="h-12 px-3 w-full flex flex-row justify-start items-center">
+      <a
+        class="github-button -mt-1"
+        href="https://github.com/star-history/star-history"
+        data-show-count="true"
+        aria-label="Star star-history/star-history on GitHub"
+        target="_blank"
+      >
+        Star
+      </a>
+    </span>
+  </div>
+  <TokenSettingDialog
+    v-if="state.showSetTokenDialog"
+    @close="handleSetTokenDialogClose"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive } from "vue";
+import useAppStore from "../store";
+import GitHubStarButton from "./GitHubStarButton.vue";
+import TokenSettingDialog from "./TokenSettingDialog.vue";
+
+interface State {
+  showDropMenu: boolean;
+  showSetTokenDialog: boolean;
+}
+
+const store = useAppStore();
+const state = reactive<State>({
+  showDropMenu: false,
+  showSetTokenDialog: false,
+});
+
+const token = computed(() => {
+  return store.token;
+});
+
+const handleSetTokenBtnClick = () => {
+  state.showSetTokenDialog = true;
+};
+
+const handleSetTokenDialogClose = () => {
+  state.showSetTokenDialog = false;
+};
+
+const handleToggleDropMenuBtnClick = () => {
+  state.showDropMenu = !state.showDropMenu;
+};
+</script>
diff --git a/src/components/HighlightBlogSection.vue b/src/components/HighlightBlogSection.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0fa65235927d698326da34cc8c655a6092160c31
--- /dev/null
+++ b/src/components/HighlightBlogSection.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="flex flex-col justify-start items-start w-full mt-12 p-4 pl-8">
+    <template v-for="section in blogSectionList" :key="section.title">
+      <div class="w-full flex flex-row justify-between items-center my-2">
+        <h3 class="text-sm font-medium text-gray-400 leading-6">
+          {{ section.title }}
+        </h3>
+      </div>
+      <ul class="list-disc list-inside">
+        <li
+          v-for="blog in section.linkList"
+          :key="blog.title"
+          class="mb-2 leading-3 cursor-pointer"
+          @click="clickLink(blog.path)"
+        >
+          <span class="inline -ml-2 text-sm text-blue-700 hover:underline">
+            {{ blog.title }}
+          </span>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const blogSectionList = [
+  {
+    title: "Best of 2022",
+    linkList: [
+      {
+        title: "Data, Infra & DevTools",
+        path: "https://star-history.com/blog/star-history-yearly-pick-2022-data-infra-devtools",
+      },
+      {
+        title: "Platform Engineering",
+        path: "https://star-history.com/blog/star-history-open-source-2022-platform-engineering",
+      },
+      {
+        title: "Open-Source Alternatives",
+        path: "https://star-history.com/blog/star-history-open-source-2022-open-source-alternatives",
+      },
+      {
+        title: "Front-end",
+        path: "https://star-history.com/blog/star-history-yearly-pick-2022-frontend",
+      },
+    ],
+  },
+  {
+    title: "Monthly Pick",
+    linkList: [
+      {
+        title: "2023 Apr",
+        path: "https://star-history.com/blog/star-history-monthly-pick-202304",
+      },
+      {
+        title: "2023 Mar (ChatGPT Edition)",
+        path: "https://star-history.com/blog/star-history-monthly-pick-202303",
+      },
+      {
+        title: "2023 Feb",
+        path: "https://star-history.com/blog/star-history-monthly-pick-202302",
+      },
+      {
+        title: "2023 Jan",
+        path: "https://star-history.com/blog/star-history-monthly-pick-202301",
+      },
+      {
+        title: "2022 Dec",
+        path: "https://star-history.com/blog/star-history-monthly-pick-202212",
+      },
+    ],
+  },
+  {
+    title: "Collections",
+    linkList: [
+      {
+        title: "AI Model",
+        path: "https://star-history.com/#CompVis/stable-diffusion&lllyasviel/ControlNet&openai/whisper&facebookresearch/llama&databrickslabs/dolly&tatsu-lab/stanford_alpaca&nomic-ai/gpt4all&Stability-AI/StableLM",
+      },
+      {
+        title: "Database DevOps",
+        path: "https://star-history.com/#bytebase/bytebase&liquibase/liquibase&flyway/flyway",
+      },
+      {
+        title: "Workflow Orchestration",
+        path: "https://star-history.com/#temporalio/temporal&apache/dolphinscheduler&apache/airflow&quartz-scheduler/quartz",
+      },
+    ],
+  },
+];
+
+const clickLink = (link: string) => {
+  window.open(link, "_blank");
+};
+</script>
diff --git a/src/components/RepoInputer.vue b/src/components/RepoInputer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..22affca5eef5402625044be3c2411bcf7e080f65
--- /dev/null
+++ b/src/components/RepoInputer.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="w-full px-3 shrink-0 flex flex-col justify-start items-center">
+    <div
+      class="w-auto mx-auto mt-6 mb-2 flex flex-row justify-center items-center flex-wrap"
+      :class="state.latestBlog ?? 'invisible'"
+    >
+      <span
+        class="px-2 -mt-px leading-7 rounded mr-2 text-sm bg-green-100 text-green-600 font-medium"
+        >What's new</span
+      >
+      <!-- <a
+        class="text-gray-700 hover:underline"
+        :href="`/blog/${state.latestBlog?.slug}`"
+      >
+        {{ state.latestBlog?.title }}
+        <i class="fas fa-chevron-right mr-1 text-gray-500 text-sm"></i>
+      </a> -->
+      <a
+        class="text-gray-700 hover:underline"
+        href="https://www.bytebase.com/blog/bytebase-2-0/"
+      >
+        Bytebase 2.0 - the GitLab for Database DevOps
+        <i class="fas fa-chevron-right mr-1 text-gray-500 text-sm"></i>
+      </a>
+    </div>
+    <div
+      class="w-auto sm:w-full grow max-w-3xl 2xl:max-w-4xl mt-4 flex flex-row justify-center items-center shadow-inner border border-solid border-dark rounded"
+    >
+      <input
+        ref="inputElRef"
+        v-model="state.repo"
+        class="w-auto h-9 px-2 grow shrink text-dark outline-none rounded rounded-r-none placeholder:text-gray-300 focus:shadow-focus"
+        type="text"
+        :placeholder="
+          state.repos.length > 0
+            ? '...add next repository'
+            : 'star-history or star-history/star-history or https://github.com/star-history/star-history'
+        "
+        @paste="handleInputerPasted"
+        @keydown="handleInputerKeyDown"
+      />
+      <button
+        class="h-9 pl-4 pr-4 whitespace-nowrap w-auto text-dark border-l border-dark hover:bg-dark hover:text-light"
+        :class="isFetching ? 'cursor-wait' : ''"
+        @click="handleAddRepoBtnClick"
+      >
+        View star history
+      </button>
+    </div>
+    <!-- repo list -->
+    <div class="w-full mt-4 flex flex-row justify-center items-center">
+      <div
+        v-if="state.repos.length > 0"
+        class="w-full max-w-2xl flex flex-row flex-wrap justify-center items-center"
+      >
+        <div
+          v-for="item of state.repos"
+          :key="item.name"
+          class="leading-8 px-3 pr-2 mb-2 text-dark rounded flex flex-row justify-center items-center border mr-3 last:mr-0"
+        >
+          <a :href="`https://github.com/${item.name}`" target="_blank">
+            <i
+              class="fas fa-external-link-alt mr-2 fa-sm text-gray-400 hover:text-green-600"
+            ></i>
+          </a>
+          <span
+            class="mr-1 cursor-pointer hover:line-through select-none"
+            :class="item.visible ? '' : 'line-through text-gray-400'"
+            @click="handleToggleRepoItemVisible(item.name)"
+          >
+            {{ item.name }}
+          </span>
+          <span
+            class="relative w-5 h-5 flex flex-row justify-center items-center cursor-pointer hover:opacity-60"
+            @click="handleDeleteRepoBtnClick(item.name)"
+          >
+            <span class="w-3 rotate-45 h-px bg-black absolute top-1/2"></span>
+            <span class="w-3 -rotate-45 h-px bg-black absolute top-1/2"></span>
+          </span>
+        </div>
+        <button
+          class="leading-8 mb-2 text-black hover:bg-gray-100 px-3 rounded border border-transparent"
+          @click="handleClearAllRepoBtnClick"
+        >
+          Clear all
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { head } from "lodash";
+import { GITHUB_REPO_URL_REG } from "../helpers/consts";
+import toast from "../helpers/toast";
+import useAppStore from "../store";
+
+interface State {
+  repo: string;
+  repos: {
+    name: string;
+    visible: boolean;
+  }[];
+  latestBlog?: Blog;
+}
+
+const store = useAppStore();
+const state = reactive<State>({
+  repo: "",
+  repos: [],
+});
+
+const inputElRef = ref<HTMLInputElement | null>(null);
+
+const isFetching = computed(() => {
+  return store.isFetching;
+});
+
+onMounted(async () => {
+  const res = await fetch("/blog/data.json");
+  const blogList = (await res.json()) as Blog[];
+  for (const blog of blogList) {
+    if (blog.featured) {
+      state.latestBlog = blog;
+      break;
+    }
+  }
+  state.repos = store.repos.map((r) => {
+    return {
+      name: r,
+      visible: true,
+    };
+  });
+});
+
+watch(
+  () => [store.repos, store.chartMode],
+  () => {
+    for (const r of state.repos) {
+      if (r.visible && !store.repos.includes(r.name)) {
+        state.repos.splice(state.repos.indexOf(r), 1);
+      }
+    }
+
+    let hash = "";
+    if (store.repos.length > 0) {
+      hash = `#${store.repos.join("&")}&${store.chartMode}`;
+    }
+    // Sync location hash only right here
+    window.location.hash = hash;
+  }
+);
+
+const handleAddRepoBtnClick = () => {
+  if (store.isFetching) {
+    return;
+  }
+
+  let rawRepos = state.repo;
+  if (rawRepos === "" && store.repos.length === 0) {
+    rawRepos = "star-history/star-history";
+  }
+
+  if (rawRepos === "") {
+    toast.warn("Please input the repo name");
+    return;
+  }
+
+  for (const rawRepo of rawRepos.split(",")) {
+    let repo = "";
+
+    // Match repo name from github repo links. e.g. https://github.com/star-history/star-history/issues -> star-history/star-history
+    if (GITHUB_REPO_URL_REG.test(rawRepo)) {
+      repo = (rawRepo.match(GITHUB_REPO_URL_REG) as string[])[1];
+    }
+    repo = head(rawRepo.split("#")) as string;
+    if (repo === "") {
+      continue;
+    }
+
+    if (GITHUB_REPO_URL_REG.test(repo)) {
+      const regResult = GITHUB_REPO_URL_REG.exec(repo);
+      if (regResult && regResult[1]) {
+        repo = regResult[1];
+      }
+    }
+
+    const valueList = repo.split("/");
+    if (valueList.length === 1) {
+      // Auto-complete repo name. e.g. bytebase -> bytebase/bytebase
+      repo = `${valueList[0]}/${repo}`;
+    } else if (valueList.length >= 2) {
+      // Remove additional chars. e.g. bytebase/bytebase/123 -> bytebase/bytebase
+      repo = `${valueList[0]}/${valueList[1]}`;
+    }
+
+    for (const r of state.repos) {
+      if (r.name === repo) {
+        if (r.visible) {
+          toast.warn(`Repo ${repo} is already on the chart`);
+        } else {
+          r.visible = true;
+          store.setRepos(
+            state.repos.filter((r) => r.visible).map((r) => r.name)
+          );
+        }
+        state.repo = "";
+        return;
+      }
+    }
+    state.repos.push({
+      name: repo,
+      visible: true,
+    });
+    store.addRepo(repo);
+  }
+  state.repo = "";
+};
+
+const handleToggleRepoItemVisible = (repo: string) => {
+  for (const r of state.repos) {
+    if (r.name === repo) {
+      r.visible = !r.visible;
+      break;
+    }
+  }
+  store.setRepos(state.repos.filter((r) => r.visible).map((r) => r.name));
+};
+
+const handleDeleteRepoBtnClick = (repo: string) => {
+  for (const r of state.repos) {
+    if (r.name === repo) {
+      state.repos.splice(state.repos.indexOf(r), 1);
+      break;
+    }
+  }
+  store.delRepo(repo);
+};
+
+const handleClearAllRepoBtnClick = () => {
+  state.repos = [];
+  store.setRepos([]);
+};
+
+const handleInputerPasted = async (event: ClipboardEvent) => {
+  if (!inputElRef.value) {
+    return;
+  }
+  const inputEl = inputElRef.value;
+  if (event.clipboardData) {
+    event.preventDefault();
+    const text = event.clipboardData
+      .getData("text")
+      .replace(/(?:\r\n|\r|\n| )/g, "");
+    const value = state.repo;
+    const prevStr = value.slice(
+      0,
+      Math.min(inputEl.selectionStart || 0, inputEl.selectionEnd || 0)
+    );
+    const nextStr = value.slice(
+      Math.max(inputEl.selectionStart || 0, inputEl.selectionEnd || 0)
+    );
+    state.repo = `${prevStr}${text}${nextStr}`;
+  }
+};
+
+const handleInputerKeyDown = (event: KeyboardEvent) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    handleAddRepoBtnClick();
+  }
+};
+</script>
+
+<style scoped>
+input::placeholder {
+  color: #c2c2c2;
+}
+</style>
diff --git a/src/components/SponsorStaticBanner.vue b/src/components/SponsorStaticBanner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5e1d86eb95f2f5b9bb5d26c9dd19e05aa0128f1
--- /dev/null
+++ b/src/components/SponsorStaticBanner.vue
@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="fixed right-0 top-32 hidden lg:flex flex-col justify-start items-start transition-all bg-white w-48 xl:w-64 shadow p-4 rounded z-50"
+    :class="state.hide && '!hidden'"
+  >
+    <div class="w-full flex flex-row justify-between items-center mb-2 -mt-2">
+      <span class="text-xs font-medium text-gray-400">SPONSORS</span>
+      <i
+        class="fas fa-times text-base text-gray-400 cursor-pointer hover:text-gray-500"
+        @click.prevent="handleCloseButtonClick"
+      ></i>
+    </div>
+    <template v-for="sponsor in randomSponsors" :key="sponsor.name">
+      <a
+        :href="sponsor.link"
+        class="bg-gray-50 p-2 rounded w-full flex flex-col justify-center items-center mb-2 text-zinc-600 hover:opacity-80 hover:text-blue-600 hover:underline"
+        target="_blank"
+      >
+        <img
+          class="w-auto max-w-full"
+          :src="sponsor.logo"
+          :alt="sponsor.name"
+        />
+        <span class="text-xs mt-2">{{ sponsor.slogan }}</span>
+      </a>
+    </template>
+    <a
+      href="mailto:star@bytebase.com?subject=I'm interested in sponsoring star-history.com"
+      target="_blank"
+      class="w-full p-2 text-center bg-gray-50 text-xs leading-6 text-gray-400 rounded hover:underline hover:text-blue-600"
+      >Your logo</a
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from "vue";
+import { randomSponsors } from "../helpers/sponsor";
+
+const state = reactive({
+  hide: false,
+});
+
+const handleCloseButtonClick = () => {
+  state.hide = true;
+};
+</script>
diff --git a/src/components/SponsorView.vue b/src/components/SponsorView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a546290581ee2e036c181b3d15301a84576d6a0
--- /dev/null
+++ b/src/components/SponsorView.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="w-full px-3 max-w-4xl mx-auto flex lg:hidden flex-col justify-center items-center"
+  >
+    <p
+      class="relative flex flex-row justify-center items-center mb-2 font-semibold"
+    >
+      <span>
+        Sponsored by
+        <template v-for="sponsor in randomSponsors" :key="sponsor.name">
+          <a
+            class="text-blue-500 hover:opacity-80 underline"
+            :href="sponsor.link"
+            target="_blank"
+          >
+            {{ sponsor.name }}
+          </a>
+          <span class="last:hidden mx-1">&</span>
+        </template>
+      </span>
+    </p>
+    <div
+      v-for="sponsor in randomSponsors"
+      :key="sponsor.name"
+      class="w-full mb-6 flex flex-col justify-center items-center"
+    >
+      <p class="mb-2 text-sm sm:text-base text-gray-600">
+        {{ sponsor.slogan }}
+      </p>
+      <a class="hover:opacity-80" :href="sponsor.link" target="_blank">
+        <img
+          class="w-auto max-w-full"
+          :src="sponsor.landingImage"
+          :alt="sponsor.name"
+        />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { randomSponsors } from "../helpers/sponsor";
+</script>
diff --git a/src/components/StarChartViewer.vue b/src/components/StarChartViewer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4fa06e29bb29b36c2916aac04d6990ca58ead012
--- /dev/null
+++ b/src/components/StarChartViewer.vue
@@ -0,0 +1,404 @@
+<template>
+  <div
+    ref="containerElRef"
+    class="relative w-full h-auto min-h-400px self-center max-w-3xl 2xl:max-w-4xl sm:p-4 pt-0"
+  >
+    <div
+      v-if="isFetching"
+      class="absolute w-full h-full flex justify-center items-center z-10 top-0"
+    >
+      <div class="absolute w-full h-full blur-md bg-white bg-opacity-80"></div>
+      <i class="fas fa-spinner animate-spin text-4xl z-10"></i>
+    </div>
+    <div
+      v-if="state.chartData"
+      class="absolute top-0 right-1 p-2 flex flex-row"
+    >
+      <div
+        class="flex flex-row justify-center items-center rounded leading-8 text-sm px-3 cursor-pointer z-10 text-dark select-none hover:bg-gray-100"
+        @click="handleToggleChartBtnClick"
+      >
+        <input
+          class="mr-2"
+          type="checkbox"
+          :checked="chartMode === 'Timeline'"
+        />
+        Align timeline
+      </div>
+    </div>
+    <StarXYChart
+      v-if="state.chartData"
+      classname="w-full h-auto"
+      :data="state.chartData"
+      :chart-mode="chartMode"
+    />
+  </div>
+  <div
+    v-if="state.chartData"
+    class="relative mt-4 mb-8 w-full px-3 mx-auto max-w-4xl flex flex-row flex-wrap justify-between items-center"
+  >
+    <div class="flex flex-row justify-start items-center mb-2">
+      <a
+        class="h-full flex flex-row justify-center items-center leading-8 hover:opacity-80 underline underline-offset-2 mb-2 decoration-dark"
+        href="https://chrome.google.com/webstore/detail/iijibbcdddbhokfepbblglfgdglnccfn"
+        target="_blank"
+      >
+        <img class="w-5 h-auto mr-1" src="/icons/free.svg" />
+        <span class="text-dark">Get Chrome Extension</span>
+      </a>
+    </div>
+    <div class="flex flex-row flex-wrap justify-end items-center mb-2">
+      <button
+        class="ml-2 mb-2 rounded leading-9 text-sm px-3 cursor-pointer border text-dark bg-gray-100 hover:bg-gray-200"
+        :class="state.isGeneratingImage ? 'bg-gray-200 cursor-wait' : ''"
+        @click="handleGenerateImageBtnClick"
+      >
+        <i class="fas fa-download"></i>
+        Image
+      </button>
+      <button
+        class="ml-2 mb-2 rounded leading-9 text-sm px-3 cursor-pointer border text-dark bg-gray-100 hover:bg-gray-200"
+        @click="handleExportAsCSVBtnClick"
+      >
+        <i class="fas fa-download"></i>
+        CSV
+      </button>
+      <button
+        class="ml-2 mb-2 rounded leading-9 text-sm px-3 cursor-pointer border text-dark bg-gray-100 hover:bg-gray-200"
+        @click="handleGenEmbedCodeDialogBtnClick"
+      >
+        <i class="fas fa-code"></i>
+        Embed
+      </button>
+      <button
+        class="ml-2 mb-2 rounded leading-9 text-sm px-3 cursor-pointer border text-dark bg-gray-100 hover:bg-gray-200"
+        @click="handleCopyLinkBtnClick"
+      >
+        <i class="far fa-copy"></i>
+        Link
+      </button>
+      <button
+        class="shadow-inner ml-2 mb-2 rounded leading-9 px-4 cursor-pointer bg-green-600 border border-transparent text-white hover:bg-green-700"
+        @click="handleShareToTwitterBtnClick"
+      >
+        <i class="relative -bottom-px fab fa-twitter"></i>
+        Share on Twitter
+      </button>
+    </div>
+  </div>
+  <EmbedMarkdownSection v-if="state.chartData"></EmbedMarkdownSection>
+  <div class="grow"></div>
+  <BytebaseBanner />
+  <TokenSettingDialog
+    v-if="state.showSetTokenDialog"
+    @close="handleSetTokenDialogClose"
+  />
+  <GenerateEmbedCodeDialog
+    v-if="state.showGenEmbedCodeDialog"
+    @close="handleGenEmbedCodeDialogClose"
+  />
+  <!-- embed chart guide dialog -->
+  <EmbedChartGuideDialog
+    v-if="state.showEmbedChartGuideDialog"
+    @close="state.showEmbedChartGuideDialog = false"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import useAppStore from "../store";
+import { XYChartData } from "../../packages/xy-chart";
+import utils from "../../common/utils";
+import { convertDataToChartData, getRepoData } from "../../common/chart";
+import api from "../../common/api";
+import toast from "../helpers/toast";
+import { RepoData } from "../../types/chart";
+import BytebaseBanner from "./SponsorView.vue";
+import StarXYChart from "./Charts/StarXYChart.vue";
+import TokenSettingDialog from "./TokenSettingDialog.vue";
+import GenerateEmbedCodeDialog from "./GenerateEmbedCodeDialog.vue";
+import EmbedMarkdownSection from "./EmbedMarkdownSection.vue";
+import EmbedChartGuideDialog from "./EmbedChartGuideDialog.vue";
+
+interface State {
+  chartMode: "Date" | "Timeline";
+  repoCacheMap: Map<
+    string,
+    {
+      starData: {
+        date: string;
+        count: number;
+      }[];
+      logoUrl: string;
+    }
+  >;
+  chartData: XYChartData | undefined;
+  isGeneratingImage: boolean;
+  showSetTokenDialog: boolean;
+  showGenEmbedCodeDialog: boolean;
+  showEmbedChartGuideDialog: boolean;
+}
+
+const state = reactive<State>({
+  chartMode: "Date",
+  repoCacheMap: new Map(),
+  chartData: undefined,
+  isGeneratingImage: false,
+  showSetTokenDialog: false,
+  showGenEmbedCodeDialog: false,
+  showEmbedChartGuideDialog: false,
+});
+const store = useAppStore();
+
+const containerElRef = ref<HTMLDivElement | null>(null);
+
+const isFetching = computed(() => {
+  return store.isFetching;
+});
+const chartMode = computed(() => {
+  return store.chartMode;
+});
+
+onMounted(() => {
+  if (store.repos.length > 0) {
+    fetchReposData(store.repos);
+  }
+});
+
+watch(
+  () => store.repos,
+  () => {
+    fetchReposData(store.repos);
+  }
+);
+
+const fetchReposData = async (repos: string[]) => {
+  store.setIsFetching(true);
+  const notCachedRepos: string[] = [];
+
+  for (const repo of repos) {
+    const cachedRepo = state.repoCacheMap.get(repo);
+
+    if (!cachedRepo) {
+      notCachedRepos.push(repo);
+    }
+  }
+
+  try {
+    const data = await getRepoData(notCachedRepos, store.token);
+    for (const { repo, starRecords, logoUrl } of data) {
+      state.repoCacheMap.set(repo, {
+        starData: starRecords,
+        logoUrl,
+      });
+    }
+  } catch (error: any) {
+    toast.warn(error.message);
+
+    if (error.status === 401 || error.status === 403) {
+      state.showSetTokenDialog = true;
+    } else if (error.status === 404 || error.status === 501) {
+      store.delRepo(error.repo);
+    }
+  }
+  store.setIsFetching(false);
+
+  const repoData: RepoData[] = [];
+  for (const repo of repos) {
+    const cachedRepo = state.repoCacheMap.get(repo);
+    repoData.push({
+      repo,
+      starRecords: cachedRepo!.starData,
+      logoUrl: cachedRepo!.logoUrl,
+    });
+  }
+
+  if (repoData.length === 0) {
+    state.chartData = undefined;
+  } else {
+    state.chartData = convertDataToChartData(repoData, chartMode.value);
+  }
+};
+
+const handleCopyLinkBtnClick = async () => {
+  await utils.copyTextToClipboard(window.location.href);
+  toast.succeed("Link copied");
+};
+
+const handleGenerateImageBtnClick = async () => {
+  if (state.isGeneratingImage) {
+    return;
+  }
+
+  const svgElement = containerElRef.value
+    ?.querySelector("svg")
+    ?.cloneNode(true) as SVGSVGElement;
+  svgElement.querySelectorAll(".chart-tooltip-dot").forEach((d) => d.remove());
+  // convert images from url href to data url href
+  for (const i of Array.from(svgElement.querySelectorAll("image"))) {
+    const url = i.getAttribute("href");
+    if (url) {
+      const dataUrl = await utils.getBase64Image(url);
+      i.setAttribute("href", dataUrl);
+    }
+  }
+  svgElement.setAttribute("class", "fixed -z-10");
+  document.body.append(svgElement);
+
+  if (!svgElement || !containerElRef.value) {
+    toast.warn("Chart element not found, please try later");
+    return;
+  }
+
+  state.isGeneratingImage = true;
+
+  let destoryGeneratingToast = () => {
+    // do nth
+  };
+  setTimeout(() => {
+    if (state.isGeneratingImage) {
+      const cbs = toast.warn(
+        `<i class="fas fa-spinner animate-spin text-2xl mr-3"></i>Generating image`,
+        -1
+      );
+      destoryGeneratingToast = cbs.destory;
+    }
+  }, 2000);
+
+  try {
+    // Get image's width and height from the container, because the svg's width is set to 100%
+    const { width: imgWidth, height: imgHeight } =
+      containerElRef.value.getBoundingClientRect();
+    const canvas = document.createElement("canvas");
+    const scale = Math.floor(window.devicePixelRatio * 2);
+    canvas.width = (imgWidth + 20) * scale;
+    canvas.height = (imgHeight + 30) * scale;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      toast.warn("Get canvas context failed.");
+      return;
+    }
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // draw chart image
+    const chartDataURL = utils.convertSVGToDataURL(svgElement);
+    const chartImage = new Image();
+    chartImage.src = chartDataURL;
+    await utils.waitImageLoaded(chartImage);
+    ctx.drawImage(
+      chartImage,
+      10 * scale,
+      10 * scale,
+      imgWidth * scale,
+      imgHeight * scale
+    );
+
+    const link = document.createElement("a");
+    link.download = `star-history-${utils.getDateString(
+      Date.now(),
+      "yyyyMMdd"
+    )}.png`;
+    link.href = canvas.toDataURL();
+    link.click();
+    state.isGeneratingImage = false;
+    destoryGeneratingToast();
+    toast.succeed("Image Downloaded");
+  } catch (error) {
+    console.error(error);
+    toast.error("Generate image failed");
+  }
+  svgElement.remove();
+};
+
+const handleExportAsCSVBtnClick = () => {
+  let CSVContent = "";
+  for (const repo of store.repos) {
+    const records = state.repoCacheMap.get(repo)?.starData;
+    if (records) {
+      const temp: any[] = [];
+      for (const i of records) {
+        temp.push([repo, new Date(i.date), i.count]);
+      }
+      CSVContent += temp
+        .map((item) =>
+          typeof item === "string" && item.indexOf(",") >= 0
+            ? `"${item}"`
+            : String(item)
+        )
+        .join("\n");
+      CSVContent += "\n";
+    }
+  }
+
+  const encodedUri = encodeURI("data:text/csv;charset=utf-8," + CSVContent);
+  const link = document.createElement("a");
+  link.download = `star-history-${utils.getDateString(
+    Date.now(),
+    "yyyyMMdd"
+  )}.csv`;
+  link.href = encodedUri;
+  link.click();
+  toast.succeed("CSV Downloaded");
+};
+
+const handleShareToTwitterBtnClick = async () => {
+  const repos = store.repos;
+  if (repos.length === 0) {
+    toast.error("No repo found");
+    return;
+  }
+
+  const starhistoryLink = encodeURIComponent(window.location.href);
+  let text = "";
+
+  if (repos.length === 1) {
+    const repo = repos[0];
+    let starCount = 0;
+
+    try {
+      starCount = await api.getRepoStargazersCount(repo, store.token);
+    } catch (error) {
+      // do nth
+    }
+
+    let starText = "";
+    if (starCount > 0) {
+      starText = `${
+        (starCount < 1000 ? starCount : (starCount / 1000).toFixed(1) + "K") +
+        " ⭐️ "
+      }`;
+    }
+    text = `${starText}Thank you! 🙏%0A${starhistoryLink}%0A%0A`;
+  } else {
+    text = repos.join(" vs ") + "%0A%0A";
+  }
+
+  const addtionLink =
+    repos.length === 1 ? `github.com/${repos[0]}` : starhistoryLink;
+  text += `${addtionLink}%0A%0A`;
+  text += `${encodeURIComponent("#starhistory #GitHub #OpenSource ")}`;
+  const tweetShareLink = `https://twitter.com/intent/tweet?text=${text}%0A&via=StarHistoryHQ`;
+  const link = document.createElement("a");
+  link.href = tweetShareLink;
+  link.target = "_blank";
+  link.click();
+};
+
+const handleGenEmbedCodeDialogBtnClick = () => {
+  state.showGenEmbedCodeDialog = true;
+};
+
+const handleGenEmbedCodeDialogClose = () => {
+  state.showGenEmbedCodeDialog = false;
+};
+
+const handleToggleChartBtnClick = () => {
+  store.setChartMode(chartMode.value === "Date" ? "Timeline" : "Date");
+  fetchReposData(store.repos);
+};
+
+const handleSetTokenDialogClose = () => {
+  state.showSetTokenDialog = false;
+};
+</script>
diff --git a/src/components/SubscribeSection.vue b/src/components/SubscribeSection.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3ad72d3a24b8d0e9134f90bd5b24bd0ac6e425cf
--- /dev/null
+++ b/src/components/SubscribeSection.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="w-auto max-w-lg mx-3 border self-center rounded-md p-6 flex flex-col sm:w-full"
+  >
+    <div class="text-left">
+      <h2 class="text-2xl font-extrabold text-gray-800 sm:text-3xl">
+        Never miss a thing
+      </h2>
+      <p class="mt-2 text-lg text-gray-500">
+        Subscribe to our newsletter about open source
+      </p>
+    </div>
+    <div class="mt-4">
+      <div v-if="subscribed" class="text-lg font-semibold text-green-600">
+        <span class="text-2xl mr-2">🎉</span>You've successfully subscribed to
+        our newsletter.
+      </div>
+      <form v-else class="sm:flex" @submit.prevent="handleSubscribeBtnClick">
+        <label for="email-address" class="sr-only">Email address</label>
+        <input
+          id="email-address"
+          v-model="email"
+          name="email-address"
+          type="email"
+          autocomplete="email"
+          required
+          class="w-full outline-none border shadow-inner p-2 px-3 text-base rounded-md focus:shadow-focus"
+          placeholder="Enter your email"
+        />
+        <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
+          <button
+            type="submit"
+            class="w-full px-4 py-2 h-full text-base rounded-md bg-green-500 shadow-inner text-light hover:bg-green-600"
+          >
+            Subscribe
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const email = ref("");
+const subscribed = ref(false);
+
+const handleSubscribeBtnClick = () => {
+  const analytics = (window as any).analytics;
+  if (analytics) {
+    analytics.identify({
+      email: email.value,
+    });
+  }
+  subscribed.value = true;
+};
+</script>
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cbc5495c369f323146567f9c5e980516cb6b2ef5
--- /dev/null
+++ b/src/components/Toast.vue
@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="fixed z-100 top-0 left-0 transition-all duration-1000 w-full py-5 h-auto flex flex-row justify-center items-center drop-shadow-md"
+    :class="`${bgColor} ${state.classname}`"
+    @click="handleToastClick"
+  >
+    <p class="text-2xl" :class="textColor" v-html="message"></p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive } from "vue";
+import { ANIMATION_DURATION } from "../helpers/consts";
+
+interface State {
+  classname: string;
+}
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    default: "normal",
+  },
+  duration: {
+    type: Number,
+    default: 2000,
+  },
+  destory: {
+    type: Function,
+    default: () => undefined,
+  },
+});
+
+const state = reactive<State>({
+  classname: "",
+});
+
+const bgColor = computed(() => {
+  switch (props.type) {
+    case "normal":
+      return "bg-black";
+    case "warn":
+      return "bg-orange-400";
+    case "succeed":
+      return "bg-green-600";
+    case "error":
+      return "bg-red-600";
+  }
+  return "bg-black";
+});
+
+const textColor = "text-white";
+
+onMounted(() => {
+  if (props.duration < 0) {
+    return;
+  }
+
+  setTimeout(() => {
+    destoryToast();
+  }, props.duration);
+});
+
+const destoryToast = () => {
+  if (props.duration < 0) {
+    return;
+  }
+
+  state.classname = "-top-full";
+  setTimeout(() => {
+    if (props.destory) {
+      props.destory();
+    }
+  }, ANIMATION_DURATION);
+};
+
+const handleToastClick = destoryToast;
+</script>
diff --git a/src/components/TokenSettingDialog.vue b/src/components/TokenSettingDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d8ea90749bb33c9429424babdcc16fd8522a0c7
--- /dev/null
+++ b/src/components/TokenSettingDialog.vue
@@ -0,0 +1,107 @@
+<template>
+  <Dialog>
+    <div
+      class="w-160 max-w-full h-auto flex flex-col justify-start items-start bg-white rounded-md"
+    >
+      <header
+        class="w-full flex flex-row justify-between items-center p-4 pr-5 bg-gray-100 rounded-t-lg"
+      >
+        <span class="text-2xl"
+          >{{ tokenCache ? "Edit" : "Add" }} GitHub Access Token</span
+        >
+        <i
+          class="fas fa-times-circle text-xl text-gray-400 cursor-pointer hover:text-gray-500"
+          @click="handleCloseBtnClick"
+        ></i>
+      </header>
+      <main
+        class="w-full flex flex-col justify-start items-start p-4 pr-5 text-base"
+      >
+        <p>
+          Star-history use GitHub API to retrieve repository metadata. You may
+          see this page because you have hit the
+          <a
+            class="text-blue-500"
+            href="https://docs.github.com/en/rest/overview/resources-in-the-rest-api"
+            target="_blank"
+          >
+            GitHub API rate limit </a
+          >.
+        </p>
+        <br />
+        <p>
+          Star-history will need your
+          <a
+            class="text-blue-500"
+            href="https://github.com/settings/tokens"
+            target="_blank"
+          >
+            personal access token </a
+          >to unlimit it. If you don't already have one,
+          <a
+            class="text-blue-500"
+            href="https://github.com/settings/tokens/new"
+            target="_blank"
+          >
+            create one
+          </a>
+          , and paste it into the textbox below (no scope to your personal data
+          is needed)
+        </p>
+        <br />
+        <p class="font-bold">
+          Access Token (will be stored in your local storage)
+        </p>
+        <input
+          v-model="state.token"
+          class="w-full outline-none border mt-2 shadow-inner p-2 rounded-md focus:shadow-focus"
+          type="text"
+        />
+      </main>
+      <footer
+        class="w-full flex flex-row justify-end bg-gray-100 items-center p-4 pr-5 border-t rounded-b-md"
+      >
+        <button
+          class="pl-4 pr-4 h-10 rounded-md bg-green-500 shadow-inner text-light text-base hover:bg-green-600"
+          @click="handleSaveTokenBtnClick"
+        >
+          Save
+        </button>
+      </footer>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive } from "vue";
+import storage from "../helpers/storage";
+import useAppStore from "../store";
+import Dialog from "./Dialog.vue";
+
+interface State {
+  token: string;
+}
+
+const emit = defineEmits(["close"]);
+
+const store = useAppStore();
+const state = reactive<State>({
+  token: store.token,
+});
+
+const tokenCache = computed(() => {
+  return store.token;
+});
+
+const handleSaveTokenBtnClick = () => {
+  store.setToken(state.token);
+  storage.set({
+    accessTokenCache: state.token,
+  });
+  emit("close");
+};
+
+const handleCloseBtnClick = () => {
+  emit("close");
+};
+</script>
diff --git a/src/css/index.css b/src/css/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..57e048000c3f08ea9e0d516966d14d224a904635
--- /dev/null
+++ b/src/css/index.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "xkcd";
+  src: url("/fonts/xkcd.ttf");
+}
+
+html,
+body {
+  font-family: "Inter", sans-serif;
+}
diff --git a/src/css/popup.css b/src/css/popup.css
new file mode 100644
index 0000000000000000000000000000000000000000..dd7e22685392e78450b7b5ed1838b2d41c021a6f
--- /dev/null
+++ b/src/css/popup.css
@@ -0,0 +1,4 @@
+#app {
+  width: 600px;
+  height: 460px;
+}
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..17da72b0629980c2f10f7b55f9fc5b2e767bf552
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,6 @@
+// Declare vue component type
+declare module "*.vue" {
+  import { defineComponent } from "vue";
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}
diff --git a/src/extension/Popup.vue b/src/extension/Popup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..58d9bac29ae212ec64f1acc7e5ff9fc87d2c5590
--- /dev/null
+++ b/src/extension/Popup.vue
@@ -0,0 +1,202 @@
+<template>
+  <div
+    class="relative w-full h-full w-600px pt-0 flex flex-col justify-start items-center"
+  >
+    <div class="w-full p-2 px-4 flex flex-row justify-between items-center">
+      <div class="flex flex-row justify-start items-center">
+        <img class="w-7 h-auto" src="/icon.png" />
+      </div>
+      <div class="flex flex-row justify-start items-center">
+        <span
+          class="flex flex-row justify-center text-sm items-center cursor-pointer hover:opacity-70"
+          @click="handleShowTokenDialog"
+        >
+          {{ token ? "Edit" : "Add" }} Access Token
+        </span>
+        <span
+          class="h-full flex flex-row justify-center text-sm items-center cursor-pointer ml-3 hover:opacity-70"
+          @click="handleOpenInWebsiteBtnClick"
+        >
+          Open in Website
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            data-prefix="fas"
+            data-icon="external-link-alt"
+            class="w-4 h-4 ml-1"
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 512"
+          >
+            <path
+              fill="currentColor"
+              d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+            ></path>
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="state.isLoading"
+      class="absolute w-full h-full top-0 left-0 flex justify-center items-center z-10"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        data-prefix="fas"
+        data-icon="spinner"
+        class="animate-spin z-10 w-9 h-9"
+        role="img"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+      >
+        <path
+          fill="currentColor"
+          d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"
+        ></path>
+      </svg>
+    </div>
+    <div
+      v-if="state.message"
+      class="w-full grow text-center text-2xl flex justify-center items-center"
+    >
+      {{ state.message }}
+    </div>
+    <div
+      v-else-if="state.chartData"
+      class="w-full px-2 flex flex-col justify-center items-center"
+    >
+      <StarXYChart classname="w-full h-auto" :data="state.chartData" />
+      <!-- watermark -->
+    </div>
+    <div
+      class="absolute left-0 bottom-1 w-full h-8 px-4 flex flex-row text-base justify-between items-center"
+    >
+      <span class="flex flex-row justify-start items-center">
+        <a
+          class="github-button"
+          href="https://github.com/star-history/star-history"
+          data-show-count="true"
+          aria-label="Star star-history/star-history on GitHub"
+          target="_blank"
+        >
+          Star
+        </a>
+      </span>
+      <span
+        class="h-full mb-1 flex flex-row justify-start items-center text-gray-500"
+        style="font-family: 'xkcd', serif"
+      >
+        <img class="w-5 h-auto mr-1" src="/icon.png" />
+        star-history.com
+      </span>
+    </div>
+  </div>
+  <TokenSettingDialog
+    v-if="state.showSetTokenDialog"
+    @close="handleSetTokenDialogClose"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive } from "vue";
+import { XYChartData } from "../../packages/xy-chart";
+import StarXYChart from "../components/Charts/StarXYChart.vue";
+import TokenSettingDialog from "../components/TokenSettingDialog.vue";
+import {
+  convertStarDataToChartData,
+  getReposStarData,
+} from "../../common/chart";
+import toast from "../helpers/toast";
+import useAppStore from "../store";
+import { RepoStarData } from "../../types/chart";
+
+interface State {
+  isLoading: boolean;
+  repo: string;
+  chartData: XYChartData | undefined;
+  showSetTokenDialog: boolean;
+  message: string;
+}
+
+const store = useAppStore();
+const state = reactive<State>({
+  isLoading: true,
+  repo: "",
+  chartData: undefined,
+  showSetTokenDialog: false,
+  message: "",
+});
+
+const token = computed(() => {
+  return store.token;
+});
+
+onMounted(async () => {
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  const url = tab.url + "/";
+
+  try {
+    const result = /github.com\/(\S+?\/\S+?)\//.exec(url);
+    if (result) {
+      state.repo = result[1];
+      await fetchReposStarData([state.repo]);
+    }
+  } catch (err) {
+    // do nth
+  }
+
+  if (!state.repo) {
+    state.message = "No repo found";
+  }
+
+  state.isLoading = false;
+});
+
+const fetchReposStarData = async (repos: string[]) => {
+  store.setIsFetching(true);
+  const reposStarData: RepoStarData[] = [];
+
+  try {
+    const data = await getReposStarData(repos, store.token);
+    for (const d of data) {
+      reposStarData.push(d);
+    }
+  } catch (error: any) {
+    toast.warn(error.message);
+
+    if (error.status === 401 || error.status === 403) {
+      state.showSetTokenDialog = true;
+    } else if (error.status === 404 || error.status === 501) {
+      store.delRepo(error.repo);
+    }
+  }
+  store.setIsFetching(false);
+
+  if (reposStarData.length === 0) {
+    state.chartData = undefined;
+  } else {
+    reposStarData.sort((d1, d2) => {
+      return (
+        Math.max(...d2.starRecords.map((s) => s.count)) -
+        Math.max(...d1.starRecords.map((s) => s.count))
+      );
+    });
+    state.chartData = convertStarDataToChartData(reposStarData, "Date");
+  }
+};
+
+const handleShowTokenDialog = () => {
+  state.showSetTokenDialog = true;
+};
+
+const handleSetTokenDialogClose = () => {
+  state.showSetTokenDialog = false;
+};
+
+const handleOpenInWebsiteBtnClick = () => {
+  chrome.tabs.create({
+    url: `https://star-history.com/#${state.repo}`,
+  });
+};
+</script>
diff --git a/src/extension/README.md b/src/extension/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..59753d86000ee00dd6091549638f759f8e3cf532
--- /dev/null
+++ b/src/extension/README.md
@@ -0,0 +1 @@
+# Chrome extension for Star History
diff --git a/src/extension/background.js b/src/extension/background.js
new file mode 100644
index 0000000000000000000000000000000000000000..79314514a790507edbb966f8206abb78a25d7f7f
--- /dev/null
+++ b/src/extension/background.js
@@ -0,0 +1,4 @@
+// Write the background code right here
+chrome.runtime.onInstalled.addListener(() => {
+  // do nth
+});
diff --git a/src/extension/main.ts b/src/extension/main.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb622c56b801b2ec420f202b0abb5be7e950c5f0
--- /dev/null
+++ b/src/extension/main.ts
@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+import { piniaInstance } from "../store";
+import Popup from "./Popup.vue";
+import "../css/index.css";
+import "../css/popup.css";
+
+const app = createApp(Popup);
+
+app.use(piniaInstance).mount("#app");
diff --git a/src/extension/manifest.json b/src/extension/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..fde80677fe450de8b426595f851ee8970a4639d9
--- /dev/null
+++ b/src/extension/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name": "Star History",
+  "description": "A chrome extension showing star history graph of current GitHub repository",
+  "homepage_url": "https://github.com/star-history/star-history",
+  "author": "bytebase",
+  "version": "2.0",
+  "manifest_version": 3,
+  "background": {
+    "service_worker": "./background.js"
+  },
+  "action": {
+    "default_popup": "./extension/popup.html"
+  },
+  "host_permissions": ["https://api.github.com/"],
+  "icons": {
+    "128": "icon.png"
+  },
+  "permissions": ["activeTab"]
+}
diff --git a/src/extension/popup.html b/src/extension/popup.html
new file mode 100644
index 0000000000000000000000000000000000000000..67ffa25367f282312bdd7f45532e0572c5ed8d71
--- /dev/null
+++ b/src/extension/popup.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Star History</title>
+    <script src="/js/github-buttons.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/src/helpers/consts.ts b/src/helpers/consts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..05316cb2c8e31f1234ebf52ec3a96d0950c41adc
--- /dev/null
+++ b/src/helpers/consts.ts
@@ -0,0 +1,5 @@
+export const GITHUB_REPO_URL_REG = /github.com\/(\S*?\/\S*)/;
+
+export const ANIMATION_DURATION = 1000;
+
+export const MIN_CHART_WIDTH = 600;
diff --git a/src/helpers/sponsor.ts b/src/helpers/sponsor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..979f271fa98bdd5b4fb1ff7d813d7129e63cb1df
--- /dev/null
+++ b/src/helpers/sponsor.ts
@@ -0,0 +1,45 @@
+import { sampleSize } from "lodash";
+import utils from "../../common/utils";
+
+interface Sponsor {
+  // The name of the sponsor
+  name: string;
+  // The logo of the sponsor and will be displayed in the right side section.
+  logo: string;
+  // The landing image of the sponsor and will be displayed in the bottom side section.
+  landingImage: string;
+  // The link of the sponsor.
+  link: string;
+  // The slogan of the sponsor.
+  slogan: string;
+}
+
+// The list of current sponsors.
+const sponsors: Sponsor[] = [
+  {
+    name: "Bytebase",
+    logo: utils.absolutifyLink("/sponsors/bytebase/logo.webp"),
+    landingImage: utils.absolutifyLink("/sponsors/bytebase/landing.webp"),
+    link: "https://bytebase.com?source=star-history",
+    slogan:
+      "Database DevOps and CI/CD for MySQL, PG, ClickHouse, Snowflake, TiDB, MongoDB and Spanner",
+  },
+  {
+    name: "Ockam",
+    logo: utils.absolutifyLink("/sponsors/ockam/logo.webp"),
+    landingImage: utils.absolutifyLink("/sponsors/ockam/landing.webp"),
+    link: "https://github.com/build-trust/ockam?utm_source=starhistory",
+    slogan:
+      "End-to-end encryption and authentication for data-in-motion between distributed applications",
+  },
+  // {
+  //   name: "Selefra",
+  //   logo: utils.absolutifyLink("/sponsors/selefra/logo.webp"),
+  //   landingImage: utils.absolutifyLink("/sponsors/selefra/landing.webp"),
+  //   link: "https://github.com/selefra/selefra?utm_source=starhistory",
+  //   slogan:
+  //     "Policy-as-Code analysis for Multi-Cloud and SaaS environments, AWS/GCP/Azure, k8s, GitHub, etc.",
+  // },
+];
+
+export const randomSponsors = sampleSize(sponsors, sponsors.length);
diff --git a/src/helpers/storage.ts b/src/helpers/storage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d1cecc0740d7a8a02bde8195437d0b1d43675e82
--- /dev/null
+++ b/src/helpers/storage.ts
@@ -0,0 +1,55 @@
+/**
+ * Define storage data type
+ */
+interface StorageData {
+  // access token cache
+  accessTokenCache: string;
+}
+
+type StorageKey = keyof StorageData;
+
+/**
+ * storage helper
+ */
+namespace storage {
+  export function get(keys: StorageKey[]): Partial<StorageData> {
+    const data: Partial<StorageData> = {};
+
+    for (const key of keys) {
+      try {
+        const stringifyValue = localStorage.getItem(key);
+        if (stringifyValue !== null) {
+          const val = JSON.parse(stringifyValue);
+          data[key] = val;
+        }
+      } catch (error: any) {
+        console.error("Get storage failed in ", key, error);
+      }
+    }
+
+    return data;
+  }
+
+  export function set(data: Partial<StorageData>) {
+    for (const key in data) {
+      try {
+        const stringifyValue = JSON.stringify(data[key as StorageKey]);
+        localStorage.setItem(key, stringifyValue);
+      } catch (error: any) {
+        console.error("Save storage failed in ", key, error);
+      }
+    }
+  }
+
+  export function remove(keys: StorageKey[]) {
+    for (const key of keys) {
+      try {
+        localStorage.removeItem(key);
+      } catch (error: any) {
+        console.error("Remove storage failed in ", key, error);
+      }
+    }
+  }
+}
+
+export default storage;
diff --git a/src/helpers/toast.ts b/src/helpers/toast.ts
new file mode 100644
index 0000000000000000000000000000000000000000..05057b40acb485f6f71e8c40b94804f1b2055ae8
--- /dev/null
+++ b/src/helpers/toast.ts
@@ -0,0 +1,38 @@
+import { createApp } from "vue";
+import Toast from "../components/Toast.vue";
+
+function show(message: string, type: string, duration: number) {
+  const tempDiv = document.createElement("div");
+  document.body.appendChild(tempDiv);
+
+  const cbs = {
+    destory: () => {
+      toast.unmount();
+      tempDiv.remove();
+    },
+  };
+  const toast = createApp(Toast, {
+    message,
+    type,
+    duration,
+    ...cbs,
+  });
+  toast.mount(tempDiv);
+
+  return cbs;
+}
+
+// NOTE: Just for mocking alert and only for this project.
+namespace toast {
+  export function succeed(message: string, duration = 2000) {
+    return show(message, "succeed", duration);
+  }
+  export function warn(message: string, duration = 2000) {
+    return show(message, "warn", duration);
+  }
+  export function error(message: string, duration = 2000) {
+    return show(message, "error", duration);
+  }
+}
+
+export default toast;
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000000000000000000000000000000000000..514a3c3387fc2fd9508e8a040e378e8f32c05c1a
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,12 @@
+import { createApp } from "vue";
+import { createHead } from "@vueuse/head";
+import router from "./router";
+import App from "./App.vue";
+import { piniaInstance } from "./store";
+import "./css/index.css";
+
+const app = createApp(App);
+
+const head = createHead();
+
+app.use(router).use(piniaInstance).use(head).mount("#app");
diff --git a/src/pages/404.vue b/src/pages/404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..11972995cb463e7bd85520d19489de2723c567b5
--- /dev/null
+++ b/src/pages/404.vue
@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="relative w-full h-auto min-h-screen overflow-auto flex flex-col justify-center items-center"
+  >
+    <p>404, Not Found.</p>
+  </div>
+</template>
diff --git a/src/pages/Blog.vue b/src/pages/Blog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d02a5306819ca61f7f44d1cbb9ae7457ba231590
--- /dev/null
+++ b/src/pages/Blog.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="relative w-full h-auto min-h-screen overflow-auto flex flex-col">
+    <Header />
+    <div class="w-full h-auto grow lg:grid lg:grid-cols-[256px_1fr_256px]">
+      <div class="w-full hidden lg:block">
+        <HighlightBlogSection />
+      </div>
+      <div class="w-full flex flex-col justify-start items-center">
+        <div
+          v-if="state.isLoading"
+          class="grow w-full flex flex-col justify-center items-center"
+        >
+          <i class="fas fa-spinner animate-spin text-4xl z-10"></i>
+        </div>
+        <div
+          v-else-if="state.blog === undefined"
+          class="w-full h-10 flex flex-col justify-center items-center"
+        >
+          <p class="text-center leading-8 text-lg text-dark font-medium">
+            Oops! No article found.
+          </p>
+          <p class="text-center leading-8 text-lg text-dark font-medium">
+            <router-link
+              class="mt-3 flex flex-row justify-center items-center"
+              to="/blog"
+            >
+              <button
+                class="w-full px-4 py-2 h-full text-base rounded-md bg-gray-400 shadow-inner text-light hover:bg-gray-500"
+              >
+                <i class="fas fa-chevron-left mr-1"></i>
+                Back to blog list
+              </button>
+            </router-link>
+          </p>
+        </div>
+        <div
+          v-else
+          class="w-full p-4 md:p-0 mt-6 md:w-5/6 lg:max-w-6xl h-full flex flex-col justify-start items-center self-center"
+        >
+          <img
+            class="hidden md:block w-auto max-w-full object-scale-down"
+            :src="state.blog.featureImage || ''"
+          />
+          <!-- title -->
+          <div
+            class="w-auto max-w-6xl mt-4 md:mt-12 prose prose-indigo prose-xl md:prose-2xl flex flex-col justify-center items-center"
+          >
+            <h1 class="leading-16">
+              {{ state.blog.title }}
+            </h1>
+          </div>
+          <!-- author information -->
+          <div
+            class="w-full mt-8 mb-2 max-w-6xl px-2 flex flex-row items-center justify-center text-sm text-gray-900 font-semibold tracking-wide uppercase"
+          >
+            <div class="flex space-x-1 text-gray-500">
+              <span class="text-gray-900">
+                {{ state.blog.author }}
+              </span>
+              <span aria-hidden="true"> &middot; </span>
+              <time :datetime="state.blog.publishedDate">
+                {{
+                  new Date(state.blog.publishedDate || "").toLocaleString(
+                    "default",
+                    {
+                      year: "numeric",
+                      month: "short",
+                      day: "numeric",
+                    }
+                  )
+                }}
+              </time>
+              <span aria-hidden="true"> &middot; </span>
+              <span> {{ state.blog.readingTime }} </span>
+            </div>
+          </div>
+          <div
+            class="blog-content-container w-full max-w-5xl prose prose-indigo prose-xl md:prose-2xl"
+            v-html="state.parsedBlogHTML"
+          ></div>
+          <div
+            v-if="!state.isLoading && state.blog === undefined"
+            class="w-full h-10 flex flex-col justify-center items-center"
+          >
+            <p class="text-center leading-8 text-lg text-dark font-medium">
+              Oops! No article found.
+            </p>
+            <p class="text-center leading-8 text-lg text-dark font-medium">
+              <router-link
+                class="mt-3 flex flex-row justify-center items-center"
+                to="/blog"
+              >
+                <button
+                  class="w-full px-4 py-2 h-full text-base rounded-md bg-gray-400 shadow-inner text-light hover:bg-gray-500"
+                >
+                  <i class="fas fa-chevron-left mr-1"></i>
+                  Back to blog list
+                </button>
+              </router-link>
+            </p>
+          </div>
+        </div>
+        <BytebaseBanner
+          v-if="!state.isLoading"
+          class="mt-32 mb-8"
+        ></BytebaseBanner>
+      </div>
+      <div class="w-full hidden lg:block"></div>
+    </div>
+    <Footer />
+    <SponsorBanner />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { marked } from "marked";
+import { onMounted, reactive } from "vue";
+import { useRoute } from "vue-router";
+import { useSeoMeta } from "@vueuse/head";
+import utils from "../../common/utils";
+import Footer from "../components/Footer.vue";
+import Header from "../components/Header.vue";
+import BytebaseBanner from "../components/SponsorView.vue";
+import SponsorBanner from "../components/SponsorStaticBanner.vue";
+import HighlightBlogSection from "../components/HighlightBlogSection.vue";
+
+interface State {
+  isLoading: boolean;
+  blog?: Blog;
+  parsedBlogHTML?: string;
+}
+
+const state = reactive<State>({
+  isLoading: true,
+});
+const currentRoute = useRoute();
+
+onMounted(async () => {
+  const blogSlug = currentRoute.params.blogSlug as string;
+  const blogListRes = await fetch("/blog/data.json");
+  const blogList = (await blogListRes.json()) as Blog[];
+  const blog = blogList.find((blog) => blog.slug === blogSlug);
+  if (!blog) {
+    return;
+  }
+
+  const contentRes = await fetch(`/blog/${blogSlug}.md`);
+  const content = await contentRes.text();
+  state.blog = {
+    ...blog,
+    readingTime: utils.calcReadingTime(content),
+  };
+  state.parsedBlogHTML = marked.parse(content);
+  state.isLoading = false;
+
+  useSeoMeta({
+    title: blog.title,
+    twitterTitle: blog.title,
+    twitterImage: utils.absolutifyLink(blog.featureImage),
+  });
+});
+</script>
+
+<style>
+.blog-content-container > h1 {
+  display: none !important;
+}
+</style>
diff --git a/src/pages/BlogList.vue b/src/pages/BlogList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..439cd9f2687f25eb8a42da8448a103ab51f2103d
--- /dev/null
+++ b/src/pages/BlogList.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="relative w-full h-auto min-h-screen overflow-auto flex flex-col">
+    <Header />
+    <div class="w-full h-auto grow lg:grid lg:grid-cols-[256px_1fr_256px]">
+      <div class="w-full hidden lg:block">
+        <HighlightBlogSection />
+      </div>
+      <div class="w-full flex flex-col justify-start items-center">
+        <section
+          class="w-full grow px-3 md:w-5/6 lg:max-w-6xl min-h-full h-auto flex flex-col justify-start items-center self-center"
+        >
+          <p
+            class="mt-12 p-8 text-4xl font-bold text-dark"
+            style="font-family: 'xkcd'"
+          >
+            Star History Blog
+          </p>
+          <div
+            v-if="state.isLoading"
+            class="grow w-full flex flex-col justify-center items-center"
+          >
+            <i class="fas fa-spinner animate-spin text-4xl z-10"></i>
+          </div>
+          <div
+            v-else-if="state.featuredBlogs.length + state.blogs.length === 0"
+            class="w-full h-10 flex flex-col justify-center items-center"
+          >
+            <p class="text-center leading-8 text-lg text-dark font-medium">
+              Oops! No article found.
+            </p>
+          </div>
+          <div v-else class="w-full flex flex-col justify-start items-center">
+            <!-- Featured blogs -->
+            <div class="w-full mt-8 flex flex-col justify-start items-start">
+              <div
+                v-for="blog in state.featuredBlogs"
+                :key="blog.slug"
+                class="w-full h-auto flex flex-col border rounded-md mb-6 shadow-lg"
+              >
+                <router-link :to="{ path: `/blog/${blog.slug}` }">
+                  <img
+                    class="h-60 w-full flex-shrink-0 object-cover rounded-t-md"
+                    :src="blog.featureImage"
+                  />
+                </router-link>
+                <div class="w-full p-6 py-4 flex flex-col justify-start">
+                  <div
+                    class="mt-2 w-full flex flex-col justify-start items-start"
+                  >
+                    <router-link :to="{ path: `/blog/${blog.slug}` }">
+                      <p class="text-xl font-semibold text-dark">
+                        {{ blog.title }}
+                      </p>
+                    </router-link>
+                    <p class="mt-3 text-base text-gray-500 line-clamp-3">
+                      {{ blog.excerpt }}
+                    </p>
+                  </div>
+                  <div class="mt-3 flex flex-row justify-start items-center">
+                    <p class="flex space-x-1 text-sm text-gray-500">
+                      <span class="text-sm font-medium text-gray-900">
+                        {{ blog.author }}
+                      </span>
+                      <span aria-hidden="true"> &middot; </span>
+                      <time :datetime="blog.publishedDate">
+                        {{
+                          new Date(blog.publishedDate).toLocaleString(
+                            "default",
+                            {
+                              year: "numeric",
+                              month: "short",
+                              day: "numeric",
+                            }
+                          )
+                        }}
+                      </time>
+                      <span aria-hidden="true"> &middot; </span>
+                      <span> {{ blog.readingTime }} </span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- Normal blogs -->
+            <div
+              class="w-full flex flex-col justify-start items-start grow mb-16"
+            >
+              <div
+                v-for="blog in state.blogs"
+                :key="blog.slug"
+                class="w-full h-auto flex flex-col-reverse justify-start lg:flex-row lg:justify-between border rounded-md mb-4"
+              >
+                <div
+                  class="p-6 pr-4 w-full flex flex-col justify-start items-start"
+                >
+                  <div class="w-full flex flex-col justify-start items-start">
+                    <router-link :to="{ path: `/blog/${blog.slug}` }">
+                      <p class="text-xl font-semibold text-dark">
+                        {{ blog.title }}
+                      </p>
+                    </router-link>
+                    <p
+                      class="w-full mt-3 text-base text-gray-500 break-words line-clamp-3"
+                    >
+                      {{ blog.excerpt }}
+                    </p>
+                  </div>
+                  <div class="grow"></div>
+                  <div class="flex flex-row justify-start items-center">
+                    <p class="flex ml-2 space-x-1 text-sm text-gray-500">
+                      <span class="text-sm ml-2 font-medium text-gray-900">
+                        {{ blog.author }}
+                      </span>
+                      <span aria-hidden="true"> &middot; </span>
+                      <time :datetime="blog.publishedDate">
+                        {{
+                          new Date(blog.publishedDate).toLocaleString(
+                            "default",
+                            {
+                              year: "numeric",
+                              month: "short",
+                              day: "numeric",
+                            }
+                          )
+                        }}
+                      </time>
+                      <span aria-hidden="true"> &middot; </span>
+                      <span> {{ blog.readingTime }} </span>
+                    </p>
+                  </div>
+                </div>
+                <img
+                  v-if="blog.featureImage"
+                  class="shrink-0 w-full h-60 object-cover rounded-t-md lg:w-auto lg:h-auto lg:max-h-full lg:max-w-xs lg:m-2 lg:rounded-md"
+                  :src="blog.featureImage"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+        <BytebaseBanner v-if="!state.isLoading" class="mb-8"></BytebaseBanner>
+      </div>
+      <div class="w-full hidden lg:block"></div>
+    </div>
+    <Footer />
+    <SponsorBanner />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive } from "vue";
+import utils from "../../common/utils";
+import Footer from "../components/Footer.vue";
+import Header from "../components/Header.vue";
+import BytebaseBanner from "../components/SponsorView.vue";
+import SponsorBanner from "../components/SponsorStaticBanner.vue";
+import HighlightBlogSection from "../components/HighlightBlogSection.vue";
+
+interface State {
+  isLoading: boolean;
+  blogs: Blog[];
+  featuredBlogs: Blog[];
+}
+
+const state = reactive<State>({
+  isLoading: true,
+  blogs: [],
+  featuredBlogs: [],
+});
+
+onMounted(async () => {
+  const res = await fetch("/blog/data.json");
+  const rawBlogList = (await res.json()) as Blog[];
+  const blogList: Blog[] = [];
+  for (const raw of rawBlogList) {
+    const contentRes = await fetch(`/blog/${raw.slug}.md`);
+    const content = await contentRes.text();
+    blogList.push({
+      ...raw,
+      readingTime: utils.calcReadingTime(content),
+    });
+  }
+
+  const featuredBlogs = blogList.filter((blog) => blog.featured);
+  const blogs = blogList.filter((blog) => !blog.featured);
+  state.featuredBlogs = featuredBlogs;
+  state.blogs = blogs;
+
+  state.isLoading = false;
+});
+</script>
diff --git a/src/pages/DynamicPathMatcher.vue b/src/pages/DynamicPathMatcher.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0de898a0ecf5de295f53459673320ee1b9a5d834
--- /dev/null
+++ b/src/pages/DynamicPathMatcher.vue
@@ -0,0 +1,22 @@
+<template>
+  <p>
+    <!-- do nth -->
+  </p>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+onMounted(() => {
+  const pathList = route.params.pathList;
+  if (Array.isArray(pathList) && pathList.length >= 2) {
+    router.push({ path: `/`, hash: `#${pathList[0]}/${pathList[1]}` });
+  } else {
+    router.push({ path: "/404" });
+  }
+});
+</script>
diff --git a/src/pages/EmbedWebSite.vue b/src/pages/EmbedWebSite.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47649579d6281a1bd4ea5969035c8a72a4ae0863
--- /dev/null
+++ b/src/pages/EmbedWebSite.vue
@@ -0,0 +1,136 @@
+<template>
+  <a
+    ref="containerElRef"
+    class="relative w-full h-full min-w-600px min-h-400px p-4 pt-0 flex flex-col bg-white"
+    :href="starHistoryLink"
+    target="_blank"
+  >
+    <div
+      v-if="state.isFetching"
+      class="absolute w-full h-full flex justify-center items-center z-10 top-0"
+    >
+      <div class="absolute w-full h-full blur-md bg-white bg-opacity-80"></div>
+      <i class="fas fa-spinner animate-spin text-4xl z-10"></i>
+    </div>
+    <StarXYChart
+      v-if="state.chartData"
+      classname="w-full h-auto"
+      :data="state.chartData"
+      :chart-mode="state.chartMode"
+    />
+  </a>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { ChartMode, RepoStarData } from "../../types/chart";
+import { XYChartData } from "../../packages/xy-chart";
+import {
+  convertStarDataToChartData,
+  getReposStarData,
+} from "../../common/chart";
+import { MIN_CHART_WIDTH } from "../helpers/consts";
+import toast from "../helpers/toast";
+import StarXYChart from "../components/Charts/StarXYChart.vue";
+
+const toastWarn = (message: string) => {
+  toast.warn(message, -1);
+};
+
+interface State {
+  chartData: XYChartData | undefined;
+  chartMode: ChartMode;
+  isFetching: boolean;
+  repos: string[];
+}
+
+const state = reactive<State>({
+  chartData: undefined,
+  chartMode: "Date",
+  isFetching: true,
+  repos: [],
+});
+const containerElRef = ref<HTMLDivElement | null>(null);
+const starHistoryLink = computed(() => {
+  return `https://star-history.com/#${state.repos.join("&")}&${
+    state.chartMode
+  }`;
+});
+
+onMounted(() => {
+  if (!containerElRef.value) {
+    return;
+  }
+
+  document.body
+    .querySelector("#app")
+    ?.setAttribute(
+      "style",
+      "position:absolute;width:100%;height:100%;top:0;left:0;background-color:white;display:flex;flex-direction:column;justify-content:center;align-items:center;"
+    );
+  const bounding = containerElRef.value.getBoundingClientRect();
+  let width = Math.min(bounding.width, bounding.height * 1.5);
+  if (width < MIN_CHART_WIDTH) {
+    width = MIN_CHART_WIDTH;
+  }
+  const height = width / 1.5;
+  containerElRef.value.style.width = `${width}px`;
+  containerElRef.value.style.height = `${height}px`;
+
+  const search = window.location.search.slice(1);
+  const hash = window.location.hash.slice(1);
+  const params = hash.split("&").filter((i) => Boolean(i));
+  const repos: string[] = [];
+  let token = "";
+
+  for (const s of search.split("&")) {
+    if (s.startsWith("secret=")) {
+      token = atob(s.slice(7));
+      break;
+    }
+  }
+
+  for (const value of params) {
+    if (value === "Date" || value === "Timeline") {
+      state.chartMode = value;
+      continue;
+    }
+    if (!repos.includes(value)) {
+      repos.push(value);
+    }
+  }
+
+  state.repos = repos;
+  fetchReposStarData(repos, token);
+});
+
+const fetchReposStarData = async (repos: string[], token: string) => {
+  state.isFetching = true;
+  const reposStarData: RepoStarData[] = [];
+  try {
+    const data = await getReposStarData(repos, token);
+    for (const d of data) {
+      reposStarData.push(d);
+    }
+  } catch (error: any) {
+    toastWarn(error.message);
+    return;
+  }
+  state.isFetching = false;
+
+  if (reposStarData.length === 0) {
+    state.chartData = undefined;
+  } else {
+    reposStarData.sort((d1, d2) => {
+      return (
+        Math.max(...d2.starRecords.map((s) => s.count)) -
+        Math.max(...d1.starRecords.map((s) => s.count))
+      );
+    });
+    state.chartData = convertStarDataToChartData(
+      reposStarData,
+      state.chartMode
+    );
+  }
+};
+</script>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c500a1c337243235927763bda29648c053fc1265
--- /dev/null
+++ b/src/pages/Home.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="relative w-full h-auto min-h-screen overflow-auto flex flex-col">
+    <Header />
+    <div class="w-full h-auto grow lg:grid lg:grid-cols-[256px_1fr_256px]">
+      <div class="w-full hidden lg:block">
+        <HighlightBlogSection />
+      </div>
+      <div class="w-full flex flex-col justify-start items-center">
+        <RepoInputer />
+        <StarChartViewer />
+      </div>
+      <div class="hidden lg:block"></div>
+    </div>
+    <Footer />
+    <SponsorBanner />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Footer from "../components/Footer.vue";
+import Header from "../components/Header.vue";
+import RepoInputer from "../components/RepoInputer.vue";
+import StarChartViewer from "../components/StarChartViewer.vue";
+import SponsorBanner from "../components/SponsorStaticBanner.vue";
+import HighlightBlogSection from "../components/HighlightBlogSection.vue";
+</script>
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..09653696a7d7b411fdfe2a4d973e588097c66096
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,41 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: () => import("../pages/Home.vue"),
+  },
+  {
+    path: "/embed",
+    name: "embed-website",
+    component: () => import("../pages/EmbedWebSite.vue"),
+  },
+  {
+    path: "/blog",
+    name: "blog-list",
+    component: () => import("../pages/BlogList.vue"),
+  },
+  {
+    path: "/blog/:blogSlug",
+    name: "blog-detail",
+    component: () => import("../pages/Blog.vue"),
+  },
+  {
+    path: "/404",
+    name: "404",
+    component: () => import("../pages/404.vue"),
+  },
+  {
+    path: "/:pathList(.*)*",
+    name: "dynamic-path-matcher",
+    component: () => import("../pages/DynamicPathMatcher.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e9e36695dadecda37d98c235b491d10ce1cf8b81
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,67 @@
+import { createPinia, defineStore } from "pinia";
+import storage from "../helpers/storage";
+import { ChartMode } from "../../types/chart";
+
+export const piniaInstance = createPinia();
+
+interface AppState {
+  isFetching: boolean;
+  token: string;
+  repos: string[];
+  chartMode: ChartMode;
+}
+
+const useAppStore = defineStore("appStore", {
+  state: (): AppState => {
+    const { accessTokenCache } = storage.get(["accessTokenCache"]);
+    const hash = window.location.hash.slice(1);
+    const params = hash.split("&").filter((i) => Boolean(i));
+    const repos: string[] = [];
+    let chartMode: ChartMode = "Date";
+
+    for (const value of params) {
+      if (value === "Date" || value === "Timeline") {
+        chartMode = value;
+        continue;
+      }
+      if (!repos.includes(value)) {
+        repos.push(value);
+      }
+    }
+
+    return {
+      isFetching: false,
+      token: accessTokenCache || "",
+      repos: repos,
+      chartMode: chartMode,
+    };
+  },
+  actions: {
+    addRepo(repo: string) {
+      if (!this.repos.includes(repo)) {
+        this.repos.push(repo);
+      }
+      this.repos = [...this.repos];
+    },
+    delRepo(repo: string) {
+      if (this.repos.includes(repo)) {
+        this.repos.splice(this.repos.indexOf(repo), 1);
+      }
+      this.repos = [...this.repos];
+    },
+    setRepos(repos: string[]) {
+      this.repos = repos;
+    },
+    setToken(token: string) {
+      this.token = token;
+    },
+    setIsFetching(isFetching: boolean) {
+      this.isFetching = isFetching;
+    },
+    setChartMode(chartMode: ChartMode) {
+      this.chartMode = chartMode;
+    },
+  },
+});
+
+export default useAppStore;
diff --git a/src/types/blog.d.ts b/src/types/blog.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4eaf479cec25ea13289abf77d80476c55bf44e8
--- /dev/null
+++ b/src/types/blog.d.ts
@@ -0,0 +1,10 @@
+interface Blog {
+  title: string;
+  author: string;
+  slug: string;
+  featured: boolean;
+  featureImage: string;
+  publishedDate: string;
+  excerpt: string;
+  readingTime: string;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..fd85325e9b462c9d51f78d32fa86ae2b75ea6198
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,41 @@
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/extension/popup.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        dark: "RGB(54, 54, 54)",
+        light: "RGB(245, 245, 245)",
+      },
+      minWidth: {
+        "600px": "600px",
+      },
+      minHeight: {
+        "400px": "400px",
+      },
+      boxShadow: {
+        focus: "0 0 0 0.125em rgb(54 54 54 / 25%)",
+      },
+      zIndex: {
+        100: "100",
+      },
+      spacing: {
+        52: "13rem",
+        112: "28rem",
+        128: "32rem",
+        152: "38rem",
+        160: "40rem",
+        176: "44rem",
+        192: "48rem",
+        208: "52rem",
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/line-clamp"),
+  ],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..abf8fa68ca23efbaa51996a1f2c6c0a6cf307b51
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "noImplicitAny": false,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "checkJs": false,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "plugins/scripts/*.ts", "packages/**/*.ts", "common/**/*.ts", "types/*.ts"]
+}
diff --git a/types/chart.ts b/types/chart.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b1afcc09157fee5a7bb5cc6f76de304732e07c2
--- /dev/null
+++ b/types/chart.ts
@@ -0,0 +1,18 @@
+export type ChartMode = "Date" | "Timeline";
+
+export interface RepoStarData {
+  repo: string;
+  starRecords: {
+    date: string;
+    count: number;
+  }[];
+}
+
+export interface RepoData {
+  repo: string;
+  starRecords: {
+    date: string;
+    count: number;
+  }[];
+  logoUrl: string;
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e79c8bd2a359ba073114b4393f03c65554c0aab8
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import additionBuildPlugin from "./plugins/additionBuildPlugin";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), additionBuildPlugin()],
+  server: {
+    host: "0.0.0.0",
+  },
+});