docs: add trusted by section

docs/components/NpmWeeklyDownloadsChart.vue

@@ -0,0 +1,128 @@
+<template>
+  <canvas id="downloadChart" width="800" height="400"></canvas>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      downloads: [],
+      labels: [],
+      packageName: 'es-toolkit',
+    };
+  },
+  async mounted() {
+    await this.fetchDownloads();
+    this.drawChart();
+  },
+  methods: {
+    async fetchDownloads() {
+      const endDate = new Date();
+      const startDate = new Date();
+      startDate.setFullYear(endDate.getFullYear() - 1);
+
+      const start = startDate.toISOString().split('T')[0];
+      const end = endDate.toISOString().split('T')[0];
+      const url = `https://api.npmjs.org/downloads/range/${start}:${end}/${this.packageName}`;
+
+      try {
+        const response = await fetch(url);
+        const data = await response.json();
+
+        const weeklyDownloads = [];
+        const weeklyLabels = [];
+        let weeklySum = 0;
+        data.downloads.forEach((item, index) => {
+          weeklySum += item.downloads;
+          if ((index + 1) % 7 === 0 || index === data.downloads.length - 1) {
+            weeklyDownloads.push(weeklySum);
+            weeklyLabels.push(item.day);
+            weeklySum = 0;
+          }
+        });
+
+        this.downloads = weeklyDownloads;
+        this.labels = weeklyLabels;
+      } catch (error) {
+        console.error('Error fetching download data:', error);
+        alert('Failed to fetch data from npm API.');
+      }
+    },
+    drawChart() {
+      const canvas = document.getElementById('downloadChart');
+      const ctx = canvas.getContext('2d');
+
+      const maxDownload = Math.ceil(Math.max(...this.downloads) / 10000) * 10000;
+
+      const padding = 50;
+      const chartWidth = canvas.width - padding * 2;
+      const chartHeight = canvas.height - padding * 2;
+
+      ctx.fillStyle = '#fff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.font = '16px Arial';
+      ctx.textAlign = 'center';
+      ctx.fillStyle = '#000';
+      ctx.fillText('es-toolkit npm weekly downloads', canvas.width / 2, 30);
+
+      ctx.strokeStyle = '#000';
+      ctx.beginPath();
+      ctx.moveTo(padding, padding + 20);
+      ctx.lineTo(padding, canvas.height - padding);
+      ctx.lineTo(canvas.width - padding, canvas.height - padding);
+      ctx.stroke();
+
+      ctx.font = '10px Arial';
+      this.labels.forEach((label, index) => {
+        const x = padding + (chartWidth / (this.labels.length - 1)) * index;
+        const y = canvas.height - padding + 20;
+        const date = new Date(label);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const formattedLabel = `${year}/${month}/${day}`;
+
+        if (index % Math.floor(this.labels.length / 10) === 0) {
+          ctx.fillStyle = '#000';
+          ctx.textAlign = 'center';
+          ctx.fillText(formattedLabel, x, y);
+        }
+      });
+
+      const yStep = Math.ceil(maxDownload / 5 / 10000) * 10000;
+      ctx.font = '12px Arial';
+      for (let i = 0; i <= 5; i++) {
+        const value = maxDownload - i * yStep;
+        if (value < 0) break;
+
+        const y = padding + (chartHeight - (chartHeight / maxDownload) * value);
+
+        ctx.strokeStyle = '#d3d3d3';
+        ctx.beginPath();
+        ctx.moveTo(padding, y);
+        ctx.lineTo(canvas.width - padding, y);
+        ctx.stroke();
+
+        ctx.fillStyle = '#000';
+        ctx.textAlign = 'right';
+        ctx.fillText(value, padding - 10, y + 5);
+      }
+
+      ctx.strokeStyle = '#007bff';
+      ctx.lineWidth = 4;
+      ctx.beginPath();
+      this.downloads.forEach((download, index) => {
+        const x = padding + (chartWidth / (this.downloads.length - 1)) * index;
+        const y = padding + chartHeight - chartHeight * (download / maxDownload);
+        if (index === 0) {
+          ctx.moveTo(x, y);
+        } else {
+          ctx.lineTo(x, y);
+        }
+      });
+      ctx.stroke();
+    },
+  },
+};
+</script>

docs/intro.md

@@ -18,6 +18,30 @@ Here are some of the features es-toolkit offers:
 - **Promise**: Asynchronous utilities like [delay](./reference/promise/delay.md).
 - **String**: Utilities for string manipulation, such as [snakeCase](./reference/string/snakeCase.md)
 
+## Trusted by Developers
+
+Developers from major repositories have chosen es-toolkit, as shown below.
+
+- [storybookjs/storybook](https://github.com/storybookjs/storybook)
+  ![GitHub stars](https://img.shields.io/github/stars/storybookjs/storybook?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/storybook?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [microsoft/genaiscript](https://github.com/microsoft/genaiscript)
+  ![GitHub stars](https://img.shields.io/github/stars/microsoft/genaiscript?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/genaiscript?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [vadimdemedes/ink](https://github.com/vadimdemedes/ink)
+  ![GitHub stars](https://img.shields.io/github/stars/vadimdemedes/ink?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/ink?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+[Check more](https://github.com/toss/es-toolkit/network/dependents)
+
+<script setup>
+import NpmWeeklyDownloadsChart from './components/NpmWeeklyDownloadsChart.vue'
+</script>
+
+<NpmWeeklyDownloadsChart />
+
 ## Links
 
 Please refer to the following links for more information about this project.

docs/ja/intro.md

@@ -18,6 +18,30 @@ es-toolkitが提供する機能リストは以下の通りです：
 - **Promise**: 非同期操作のためのユーティリティ、例えば [delay](./reference/promise/delay.md) など。
 - **String**: 文字列操作のためのユーティリティ、例えば [snakeCase](./reference/string/snakeCase.md) など。
 
+## 信頼されるツール
+
+以下のように、大規模リポジトリの開発者たちが es-toolkit を選択しています。
+
+- [storybookjs/storybook](https://github.com/storybookjs/storybook)
+  ![GitHub stars](https://img.shields.io/github/stars/storybookjs/storybook?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/storybook?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [microsoft/genaiscript](https://github.com/microsoft/genaiscript)
+  ![GitHub stars](https://img.shields.io/github/stars/microsoft/genaiscript?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/genaiscript?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [vadimdemedes/ink](https://github.com/vadimdemedes/ink)
+  ![GitHub stars](https://img.shields.io/github/stars/vadimdemedes/ink?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/ink?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+[もっと見る](https://github.com/toss/es-toolkit/network/dependents)
+
+<script setup>
+import NpmWeeklyDownloadsChart from '../components/NpmWeeklyDownloadsChart.vue'
+</script>
+
+<NpmWeeklyDownloadsChart />
+
 ## リンク
 
 このプロジェクトについてより多くの情報を得るには、以下のリンクを参照してください：

docs/ko/intro.md

@@ -18,6 +18,30 @@ es-toolkit이 제공하는 기능 목록은 다음과 같습니다.
 - **Promise**: [delay](./reference/promise/delay.md)와 같은 비동기 유틸리티 함수를 제공해요.
 - **문자열**: [snakeCase](./reference/string/snakeCase.md)와 같이 문자열을 다루기 위한 다양한 함수를 제공해요.
 
+## 신뢰할 수 있는 라이브러리
+
+아래와 같이 대형 리포지토리의 개발자들이 es-toolkit을 선택했습니다.
+
+- [storybookjs/storybook](https://github.com/storybookjs/storybook)
+  ![GitHub stars](https://img.shields.io/github/stars/storybookjs/storybook?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/storybook?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [microsoft/genaiscript](https://github.com/microsoft/genaiscript)
+  ![GitHub stars](https://img.shields.io/github/stars/microsoft/genaiscript?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/genaiscript?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [vadimdemedes/ink](https://github.com/vadimdemedes/ink)
+  ![GitHub stars](https://img.shields.io/github/stars/vadimdemedes/ink?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/ink?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+[더 보기](https://github.com/toss/es-toolkit/network/dependents)
+
+<script setup>
+import NpmWeeklyDownloadsChart from '../components/NpmWeeklyDownloadsChart.vue'
+</script>
+
+<NpmWeeklyDownloadsChart />
+
 ## 링크
 
 이 프로젝트에 대해서 더 많은 정보를 얻기 위해서는 아래 링크를 참고하세요.

docs/zh_hans/intro.md

@@ -18,6 +18,30 @@ es-toolkit 内置 TypeScript 类型，并经过严格测试，确保了100%的
 - **Promise**: 异步操作工具，如 [delay](./reference/promise/delay.md)。
 - **String**: 字符串操作工具，如 [snakeCase](./reference/string/snakeCase.md)。
 
+## 值得信赖的工具
+
+如下所示，来自大型代码库的开发者选择了 es-toolkit。
+
+- [storybookjs/storybook](https://github.com/storybookjs/storybook)
+  ![GitHub stars](https://img.shields.io/github/stars/storybookjs/storybook?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/storybook?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [microsoft/genaiscript](https://github.com/microsoft/genaiscript)
+  ![GitHub stars](https://img.shields.io/github/stars/microsoft/genaiscript?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/genaiscript?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [vadimdemedes/ink](https://github.com/vadimdemedes/ink)
+  ![GitHub stars](https://img.shields.io/github/stars/vadimdemedes/ink?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/ink?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+[查看更多](https://github.com/toss/es-toolkit/network/dependents)
+
+<script setup>
+import NpmWeeklyDownloadsChart from '../components/NpmWeeklyDownloadsChart.vue'
+</script>
+
+<NpmWeeklyDownloadsChart />
+
 ## 链接
 
 请参考以下链接获取有关该项目的更多信息。