diff --git a/documents/docs/02-guide/01-install.md b/documents/docs/02-guide/01-install.md index d9f7de3..08a89be 100644 --- a/documents/docs/02-guide/01-install.md +++ b/documents/docs/02-guide/01-install.md @@ -23,7 +23,7 @@ bash -c "$(curl -fsSLk https://waf-ce.chaitin.cn/release/latest/setup.sh)" ### 在线安装演示 - @@ -71,15 +71,12 @@ docker compose up -d ### 离线安装演示 - - - - ## 使用牧云助手安装 使用 [牧云主机管理助手](https://collie.chaitin.cn/) 进行一键安装 @@ -122,7 +119,7 @@ lscpu | grep ssse3 # 确认CPU是否支持 ssse3 指令 ### 配置检测演示 - diff --git a/documents/docs/02-guide/02-login.md b/documents/docs/02-guide/02-login.md index ac4dfba..5b452c5 100644 --- a/documents/docs/02-guide/02-login.md +++ b/documents/docs/02-guide/02-login.md @@ -10,7 +10,7 @@ title: "登录雷池" 根据界面提示,使用 **支持 TOTP 的认证软件或者小程序** 扫描二维码,然后输入动态口令登录: - diff --git a/documents/docs/03-faq/03-config.md b/documents/docs/03-faq/03-config.md index 106a929..9155263 100644 --- a/documents/docs/03-faq/03-config.md +++ b/documents/docs/03-faq/03-config.md @@ -11,11 +11,13 @@ title: "配置问题" 梳理问题可能存在的几个原因: -1.配置站点错误,ip错误、端口冲突等 +1. 配置站点错误,ip错误、端口冲突等 -2.雷池端与配置的站点网络不通 +2. 雷池端与配置的站点网络不通 -3.访问雷池配置的站点端口网络不通,对于雷池端已配置的端口没有被开放访问(防火墙、安全组等) +3. 访问雷池配置的站点端口网络不通,对于雷池端已配置的端口没有被开放访问(防火墙、安全组等) + +4. 同时存在其他错误的配置可能会导致新的配置一直不生效,检查有没有存在其他错误的配置 ## 排查步骤: diff --git a/documents/docs/04-practice/01-effect.md b/documents/docs/04-practice/01-effect.md index 1edb7b2..5d0ee40 100644 --- a/documents/docs/04-practice/01-effect.md +++ b/documents/docs/04-practice/01-effect.md @@ -7,5 +7,5 @@ title: "检测效果对比" 雷池社区版与其他WAF的检测能力对比 -![gift.png](./sample-screenshot.png) +![gift.png](/images/docs/sample-screenshot.png) diff --git a/documents/docs/05-about/04-IpIntelligence.md b/documents/docs/05-about/04-IpIntelligence.md new file mode 100644 index 0000000..3bbdb25 --- /dev/null +++ b/documents/docs/05-about/04-IpIntelligence.md @@ -0,0 +1,34 @@ +--- +title: "免费黑 IP 情报源" +--- +# 免费黑 IP 情报源 + +长亭免费开放 WAF 黑 IP 情报源 + +## IP 情报赋能 WAF + +在过去的几年,各种大小重保活动期间,总会看到甲方的安全工程师们会拉一个群,用于共享攻击源 IP,这些 IP 也是重保防护能力的重要支撑。 + +威胁情报对于 Web 攻击防护的作用毋庸置疑,可以精准识别 Bot、C2、VPN、僵尸网络,对于防 0Day 攻击、防自动化攻击、降低误报漏报等方面都有着非常不错的效果。 + + + +## 情报从哪来 + +安装雷池社区版后,若选择 “加入 IP 情报共享计划”,雷池将定时自动聚合攻击 IP 数据(只有攻击 IP,不涉及任何敏感信息)发送到长亭百川云平台。 + +长亭百川云平台收到来自五湖四海的社区版兄弟们共享的 IP 情报,使用算法进行汇总和优选,生成雷池社区黑 IP 库,最终再回馈给社区。 + +### 使用方式 + +1. 在 “通用配置” 页面选择 “加入 IP 情报共享计划”: +![join_ip_intelligence](/images/docs/join_ip_intelligence.png) + +2. IP 组页面中将会出现 “长亭社区恶意 IP 情报”: +![malicious_ip_intelligence](/images/docs/malicious_ip_intelligence.png) + +3. 在 “黑白名单” 页面增加黑名单规则,条件设置为对应的 IP 组: +![ip_intelligence_blacklist](/images/docs/ip_intelligence_blacklist.png) + +4. 坐等 IP 情报拦截。 + diff --git a/documents/docs/05-about/05-apisix.md b/documents/docs/05-about/05-apisix.md new file mode 100644 index 0000000..202bb56 --- /dev/null +++ b/documents/docs/05-about/05-apisix.md @@ -0,0 +1,153 @@ +--- +title: "APISIX 联动雷池" +--- +# APISIX 联动雷池 + +Apache APISIX 是一个动态、实时、高性能的云原生 API 网关,提供了负载均衡、动态上游、灰度发布、服务熔断、身份认证、可观测性等丰富的流量管理功能。 + +雷池是由长亭科技开发的 WAF 系统,提供对 HTTP 请求的安全请求,提供完整的 API 管理和防护能力。 + +自 APISIX 3.5.0 之后的版本将内置长亭雷池 WAF 插件,在启用 chaitin-waf 插件后,流量将被转发给长亭 WAF 服务,用以检测和防止各种 Web 应用程序攻击,以保护应用程序和用户数据的安全。 + +## 开源仓库 + +apisix:https://github.com/apache/apisix + +## 使用方式 + +### 安装 APISIX + +>注意,要使用 APISIX 3.5.0 及以上版本的 APISIX + +本文使用 apisix 的 docker 版本来做演示,克隆 apisix-docker 仓库,运行以下命令来安装: + +``` +git clone +cd apisix-docker/compose +echo 'APISIX_DOCKER_TAG=3.5.0-debian' >> .env +docker compose -f docker-compose-release.yaml up -d +``` + +业务地址:http://127.0.0.1:9080/ + +管理地址:http://127.0.0.1:9180/ + +### 安装雷池 + +使用雷池官方提供的一句话安装命令即可: + +``` +bash -c "$(curl -fsSLk )" +``` + +不出意外的话,一路回车就能安装成功。 + +安装目录:/data/safeline/ + +### 修改雷池检测引擎的工作模式 + + +社区版雷池的检测引擎默认以 unix socket 的方式提供服务,我们需要把他修改为 tcp 方式,供 APISIX 调用。 + +进入雷池检测引擎的配置目录: + +``` +cd /data/safeline/resources/detector/ +``` + +用文本编辑器打开目录里的 snserver.yml 文件,寻找这样的三行内容: + +``` +bind_addr: unix:///resources/detector/snserver.sock +# bind_addr: 0.0.0.0 +# listen_port: 8000 +``` + +找到以后,我们需要将 bind 方式从 unix socket 改为 tcp,将这三行修改为以下内容即可: + +``` +# bind_addr: unix:///resources/detector/snserver.sock +bind_addr: 0.0.0.0 +listen_port: 8000 +``` +这样我们就把雷池引擎的服务监听到了 8000 端口,现在只需要把容器内的 8000 端口映射到宿主机即可。 + +进入雷池的安装目录 + +> cd /data/safeline/ +用文本编辑器打开目录里的 compose.yaml 文件,为 detector 容器增加 ports 字段,暴露其 8000 + +端口,参考如下: +``` +...... + +detector: + ...... + ports: + - 8000:8000 + +...... +``` + +OK,改好了,在雷池安装目录下执行以下命令重启雷池即可生效。 + +``` +docker compose down +docker compose up -d +``` + +### 修改雷池的默认端口 +雷池和 apisix 默认都监听 9443 端口,如果在同一台机器上安装,需要修改雷池的默认端口。 + +在雷池的安装目录下,有一个名为 .env 的隐藏文件,其中的 MGT_PORT 字段,修改这里后使用上面的方法再重启雷池即可生效。 + +### 在 apisix 里绑定雷池 +调用 apisix 的 api,设置雷池检测引擎的地址,供 apisix 调用,参考以下请求: + +192.168.99.11 是我本地雷池的地址,替换为你的 IP 即可 +``` +curl -H 'X-API-KEY: edd1c9f034335f136f87ad84b625c8f1' -X PUT -d ' +{ + "nodes":[ + { + "host": "192.168.99.11", + "port": 8000 + } + ] +}' +``` +调用 apisix 的 api,设置一条路由,参考以下请求: + +> 192.168.99.12:80 是上游服务器的地址,apisix 会将请求反向代理到这个地址。 + +``` +curl -H 'X-API-KEY: edd1c9f034335f136f87ad84b625c8f1' -X PUT -d ' +{ + "uri": "/*", + "plugins": { + "chaitin-waf": {} + }, + "upstream": { + "type": "roundrobin", + "nodes": { + "192.168.99.12:80": 1 + } + } +}' +``` + +### 测试防护效果 + +经过以上步骤,雷池 + apisix 基本配置完成,可以试试效果了,请求 9080 端口,可以看到 apisix 成功代理了上游服务器的页面: + +>curl '' + +在请求中加入一个 a 参数,模拟 SQL 注入攻击: + +>curl '' -d 'a=1 and 1=1' + +返回了 HTTP 403 错误,从错误消息中可以看出,雷池成功抵御了此次攻击。 + +>{"code": 403, "success":false, "message": "blocked by Chaitin SafeLine Web Application Firewall", "event_id": "18e0f220f7a94127acb21ad3c1b4ac47"} + +打开雷池的控制台界面,可以看到雷池记录了完整的攻击信息 diff --git a/documents/docs/05-about/06-chaitin.md b/documents/docs/05-about/06-chaitin.md new file mode 100644 index 0000000..7942f6a --- /dev/null +++ b/documents/docs/05-about/06-chaitin.md @@ -0,0 +1,89 @@ +--- +title: "关于我们" +--- + +# 关于我们 + +## 关于长亭 + + +雷池是长亭科技耗时近 10 年倾情打造的 Web 应用防护产品,核心检测能力由智能语义分析算法驱动。 + +北京长亭未来科技有限公司是国际顶尖的网络信息安全公司之一,创始人团队 5 人均为清华博士,并引入阿里云安全核心人才团队。全球首发基于智能语义分析的下一代 Web 应用防火墙产品,目前,公司已形成以攻(安全评估系统)、防(下一代 Web 应用防火墙)、知(安全分析与管理平台)、查(主机安全管理平台)、抓(伪装欺骗系统)为核心的新一代安全防护体系,并提供优质的安全测试及咨询服务,为企业级客户带来智能的全新安全防护思路。 + +长亭专注为企业级用户提供专业的网络信息安全解决方案。2016 年即发布基于人工智能语义分析的下一代 Web 应用防火墙,颠覆了传统依赖规则防护的工作原理,为企业用户带来智能、简单、省心的安全产品及服务。 + +长亭雷池坚持以技术为导向,产品与服务所涉及到的算法与核心技术均领先国际行业前沿标准,不仅颠覆了繁琐耗时的传统工作原理,更将产品性能提升至领先水准,为企业用户带来更快、更精准、更智能的安全防护。 + +## 荣誉 & 资质 + +### 2021 年 + +- 入选 IDC《中国硬件 Web 应用防火墙(WAF)市场份额》前四 +- 重磅发布《实战攻防-企业红蓝对抗实践指南》 +- 荣获 2021 网信自主创新优秀产品 “补天奖” +- 荣膺 CNNVD 2020 年度优秀技术支撑单位 +- 10 项虚拟机漏洞获 Oracle 官方致谢 +- 入选安全牛第八版中国网络安全行业全景图 +- 入选 CCSIP 2021 中国网络安全产业全景图 +- 入选嘶吼 2021 网络安全产业链图谱 + +### 2020 年 + +- 2020 年金融科技产品创新突出贡献奖 +- 2020 年网络安全创新能力 100 强 +- 入选数世咨询《蜜罐诱捕能力指南》 +- 入选数说安全中国网络安全市场全景图 +- Network Products Guide IT World Award +- 2020 年中国人工智能商业落地价值潜力 100 强 +- 2020 Application Security and Testing 铜奖 +- 入选安全牛《2020 中国网络安全企业 100 强报告》 +- 发现并命名幽灵猫(Ghostcat)漏洞 +- 联合发布《国家区块链漏洞库-区块链漏洞定级细则》 + +### 2019 年 + +- 入选 Forrester《Now Tech:Web Application Firewalls, Q4 2019》报告 +- 2019 年关键信息基础设施“盘古奖” +- 荣获《金融电子化》“2019 年度金融科技产品创新突出贡献奖” +- 中国网络安全与信息产业 “金智奖” 2019 年度优秀单位 + +### 2018 年 + +- 通过国家保密局涉密信息系统产品认证 +- 通信网络安全服务能力一级资质认证 +- 中国 IT 思想力奖-金融科技产品创新奖 +- TSRC 2017 最佳客户端洞主 & 年度最佳合作伙伴 +- 获 Info Security Products Guide 全球卓越奖 +- 入选《CIO Advisor》亚太地区 25 家最热门人工智能公司 +- 入围 Gartner 2018《Web 应用防火墙魔力象限报告亚太版》 +- 2018 年度金融科技优秀产品创新奖 +- “2018 年度金牌服务机构” 安全服务奖 + +### 2017 年 + +- OWASP 认证雷池(SafeLine)下一代 Web 应用防火墙 +- 通过国家测评中心/信息安全服务资质测评单位 +- Gartner 魔力象限报告提名 +- 再次登上 Black Hat USA 演讲 +- 《财富》杂志评选中国创新百强 “人工智能和机器人” 领域全国第一 +- 受邀出席世界互联网大会网络安全闭门会 +- 阿里巴巴年度优秀生态合作伙伴 +- 入选 Cyber Defense Magazine 全球网络安全领导者 Top 25 + +### 2016 年 + +- ISO9001 国际质量体系认证 +- ISO27001 国际质量体系认证 +- 长亭雷池 Web 应用防火墙(增强级)销售许可证 +- 国家信息安全漏洞库(CNNVD)二级技术支撑单位资质 +- 中国年度最佳产品奖、IT 行业最具影响力企业奖 +- 年度特殊贡献奖 +- GeekPwn 三周年特别贡献奖 + +### 2015 年 + +- 中国国家高新技术企业称号 +- 中关村高新技术企业称号 +- “最具价值安全问题” 荣誉认证 +- 首次登上 Black Hat USA 演讲 diff --git a/documents/docusaurus.config.js b/documents/docusaurus.config.js index 0249fdb..05634e1 100644 --- a/documents/docusaurus.config.js +++ b/documents/docusaurus.config.js @@ -77,7 +77,18 @@ const config = { navbar: { title: "", logo: { alt: "Logo", src: "images/safeline.svg", href: "https://waf-ce.chaitin.cn" }, - items: [], + items: [ + { + to: "https://www.bilibili.com/medialist/detail/ml2342694989", + label: "教学视频", + position: "right", + }, + { + to: "https://demo.waf-ce.chaitin.cn:9443/dashboard", + label: "演示环境", + position: "right", + }, + ], }, footer: { style: "dark", diff --git a/documents/src/css/custom.css b/documents/src/css/custom.css index f01b0ac..cb253f5 100644 --- a/documents/src/css/custom.css +++ b/documents/src/css/custom.css @@ -22,7 +22,7 @@ a:hover { --ifm-footer-background-color: #121427; --ifm-navbar-link-hover-color: #0fc6c2; --ifm-navbar-background-color: #fff; - --ifm-navbar-link-color: white; + --ifm-navbar-link-color: #000; } /* Overriding root Infima variables */ diff --git a/documents/static/images/docs/flow.svg b/documents/static/images/docs/flow.svg index 8b4a9e6..63300b1 100644 --- a/documents/static/images/docs/flow.svg +++ b/documents/static/images/docs/flow.svg @@ -1,222 +1,167 @@ - - 人机验证(1) + + 人机验证 - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - + + + - - - - - - - - - - - - - - - - - - - - - + + + - - - - - + + + + + + + + + + + + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 请求到达 WAF - - + + + - + - + - + - + - + - - 是否命中白名单 + + 请求到达雷池 - - 是否命中黑名单 + + 转发给业务服务器 - - 人机验证 + + + + + + + + + + 拒绝 - - 检测引擎检测 + + + + + + + + + + + + + + + + + 命中 - - 到达业务服务器 + + + + + + 未命中 - - - - - - - - - - 拒绝 + + 未命中 - - 放行 + + 是否命中白名单 - - Y + + 是否命中黑名单 - - N - - - N - - - Y - - - 验证失败 + + 正常请求 - 验证成功 + 验证成功 - - 正常流量 + + 人机验证 - - 判断为攻击 + + + + + + 验证失败 + + + 攻击请求 + + + 语义分析 + + + + + 命中 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/documents/static/images/docs/ip_intelligence_blacklist.png b/documents/static/images/docs/ip_intelligence_blacklist.png new file mode 100644 index 0000000..1baa4ab Binary files /dev/null and b/documents/static/images/docs/ip_intelligence_blacklist.png differ diff --git a/documents/static/images/docs/join_ip_intelligence.png b/documents/static/images/docs/join_ip_intelligence.png new file mode 100644 index 0000000..7c6e9a4 Binary files /dev/null and b/documents/static/images/docs/join_ip_intelligence.png differ diff --git a/documents/static/images/docs/malicious_ip_intelligence.png b/documents/static/images/docs/malicious_ip_intelligence.png new file mode 100644 index 0000000..860a45c Binary files /dev/null and b/documents/static/images/docs/malicious_ip_intelligence.png differ diff --git a/website/static/images/sample-screenshot.png b/documents/static/images/docs/sample-screenshot.png similarity index 100% rename from website/static/images/sample-screenshot.png rename to documents/static/images/docs/sample-screenshot.png diff --git a/website/public/images/feedback.svg b/website/public/images/feedback.svg index b6e00e6..06a1fd2 100644 --- a/website/public/images/feedback.svg +++ b/website/public/images/feedback.svg @@ -1,5 +1,5 @@ - + 绕过反馈插图 @@ -8,52 +8,32 @@ - - - - - - - - - - - - - + - + - - - + + + - - - - - - - - - - XSS 挑战入口 + + XSS 挑战入口 - - SQL 挑战入口 + + SQL 挑战入口 - - - + + + diff --git a/website/src/api/index.ts b/website/src/api/index.ts index 686f520..d326adf 100644 --- a/website/src/api/index.ts +++ b/website/src/api/index.ts @@ -11,7 +11,7 @@ export { } function getSetupCount() { - return fetch(BASE_API + "/count").then((res) => res.json()); + return fetch("https://waf-ce.chaitin.cn/api/count").then((res) => res.json()); } function getDiscussions(query: string) { diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx index 88f48ae..a73b3d6 100644 --- a/website/src/components/Footer.tsx +++ b/website/src/components/Footer.tsx @@ -69,7 +69,7 @@ export default function Footer() { {items.map((item, index) => ( {item.to ? ( - + {item.label} ) : ( @@ -93,7 +93,7 @@ export default function Footer() { {link.items.map((item, index) => ( - + {item.label} diff --git a/website/src/components/NavBar.tsx b/website/src/components/NavBar.tsx index 8122d43..d0760ef 100644 --- a/website/src/components/NavBar.tsx +++ b/website/src/components/NavBar.tsx @@ -59,7 +59,6 @@ export default function NavBar() { mr: 7, display: 'flex', alignItems: 'center', - color: "common.black", fontFamily: "AlimamaShuHeiTi-Bold", }} > diff --git a/website/src/components/Theme.tsx b/website/src/components/Theme.tsx index 4aab535..2c64019 100644 --- a/website/src/components/Theme.tsx +++ b/website/src/components/Theme.tsx @@ -367,7 +367,7 @@ function componentStyleOverrides(color: Color) { MuiLink: { styleOverrides: { root: { - color: color.primary.contrastText, + color: color.text.primary, '&:hover': { color: color.primary.main, }, diff --git a/website/src/components/Version/index.tsx b/website/src/components/Version/index.tsx index a7b7f5a..f86ef75 100644 --- a/website/src/components/Version/index.tsx +++ b/website/src/components/Version/index.tsx @@ -139,7 +139,7 @@ const Version = () => { }} > - + {item.fee} {item.fee_desc && ( @@ -147,7 +147,7 @@ const Version = () => { )} - + {/* */} {item.operation} diff --git a/website/src/components/community/DiscussionList.tsx b/website/src/components/community/DiscussionList.tsx index 65d8e55..c9cc478 100644 --- a/website/src/components/community/DiscussionList.tsx +++ b/website/src/components/community/DiscussionList.tsx @@ -17,6 +17,7 @@ import { IconButton, InputBase, SxProps, + Link, } from "@mui/material"; import SearchIcon from '@mui/icons-material/Search'; import TableCell from "@mui/material/TableCell"; @@ -158,7 +159,9 @@ export default function DiscussionList({ value }: DiscussionListProps) { - {discussion.title} + + {discussion.title} + diff --git a/website/src/components/community/IssueList.tsx b/website/src/components/community/IssueList.tsx index 4f7bd48..afba4ca 100644 --- a/website/src/components/community/IssueList.tsx +++ b/website/src/components/community/IssueList.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import { Box, + Link, List, ListItem, Button, @@ -51,8 +52,8 @@ const isExistInLabels = (labels: Issue['labels'], label: string) => { * * @param issues * @returns - * 正在考虑 = 带 enhancement,且没有 inprogress 和 released,且 open - * 进行中 = 带 enhancement 和 inprogress,且 open + * 正在考虑 = 带 enhancement,且没有 in progress 和 released,且 open + * 进行中 = 带 enhancement 和 in progress,且 open * 最近完成 = 带 enhancement 和 released,且 open * 按点赞数量降序排序 */ @@ -63,7 +64,7 @@ const handleSortIssues = (issues: Issue[]) => { const released: Issue[] = [] list.forEach((item: Issue) => { const { labels } = item - if (isExistInLabels(labels, 'inprogress')) { + if (isExistInLabels(labels, 'in progress')) { inProgress.push(item) } else if (isExistInLabels(labels, 'released')) { released.push(item) @@ -199,7 +200,9 @@ export const IssueItem: React.FC = ({ issue }) => { flex: 1, }} > - {issue.title} + + {issue.title} + diff --git a/website/src/components/home/Abilities.tsx b/website/src/components/home/Abilities.tsx index 43b8d83..f2080b7 100644 --- a/website/src/components/home/Abilities.tsx +++ b/website/src/components/home/Abilities.tsx @@ -6,22 +6,22 @@ import Icon from "@/components/Icon"; const ABILITY_LIST = [ { title: "人机验证", - href: "https://waf-ce.chaitin.cn/", + href: "https://waf-ce.chaitin.cn/docs/about/challenge", img: "/images/ability/ability_verification.svg", }, { title: "百川网站监控联动", - href: "https://waf-ce.chaitin.cn/", + href: "https://waf-ce.chaitin.cn/docs/practice/monitor", img: "/images/ability/ability_rivers.svg", }, { title: "APISIX 插件集成", - href: "https://waf-ce.chaitin.cn/", + href: "https://waf-ce.chaitin.cn/docs/about/apisix", img: "/images/ability/ability_apisix.svg", }, { title: "长亭社区恶意 IP 情报", - href: "https://waf-ce.chaitin.cn/", + href: "https://waf-ce.chaitin.cn/docs/about/IpIntelligence", img: "/images/ability/ability_maliciousip.svg", }, { @@ -131,6 +131,7 @@ const AbilityItem: React.FC = ({ title, href, img, handleIconHover }) display: "flex", justifyContent: "space-between", alignItems: "center", + color: "common.white", "&:hover": { backgroundColor: "primary.main", boxShadow: "0px 4px 10px 0px rgba(3,13,23,0.6)", @@ -140,7 +141,7 @@ const AbilityItem: React.FC = ({ title, href, img, handleIconHover }) }} > {title} - + ) : ( diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index df782e8..de95611 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -28,8 +28,24 @@ const totalSx = { const textAligns = ['left', 'center', 'right']; -export default function Home() { +export async function getServerSideProps() { + let total = 45881 + try { + const result = await getSetupCount(); + total = result.total; + + } finally { + return { + props: { + total, + }, + } + } +} + +export default function Home({ total } : { total: number }) { const totalRef = useRef(null); + const startRef = useRef(null); const initTotal = async (n: number) => { const countUpModule = await import("countup.js"); @@ -37,13 +53,19 @@ export default function Home() { duration: 2, }); anim.start(); + const startAnim = new countUpModule.CountUp(startRef.current!, Math.max(0, 6.1), { + duration: 2, + decimalPlaces: 1, + }); + startAnim.start(); }; useEffect(() => { - getSetupCount().then((d) => { - initTotal(d.total); - }); - }); + // getSetupCount().then((d) => { + // initTotal(d.total); + // }); + initTotal(total); + }, [total]); return (
@@ -123,15 +145,16 @@ export default function Home() { - - 5.9k - - + + + - + + k + + GitHub Star