Awesome Shadcn/UI 精选资源列表

项目标题与描述

awesome-shadcn/ui 是一个精选的资源列表，汇集了与 shadcn/ui 相关的各种优质组件库、工具和设计资源。该项目旨在为开发者提供一个集中的资源中心，方便查找和使用高质量的UI组件。

项目状态徽章：

功能特性

• 精选资源集合：整理了大量与shadcn/ui相关的优质资源
• 表格化展示：以清晰的表格形式展示资源名称、描述和链接
• 自动日期更新：包含自动更新日期的功能，确保资源时效性
• 开源组件库：收录多个开源UI组件库，可直接使用
• 设计资源：包含设计工程师所需的各类资源

安装指南

本项目是一个资源列表，无需安装即可使用。如需运行本地开发环境：

1. 克隆仓库：

git clone https://github.com/birobirobiro/awesome-shadcn-ui.git

2. 确保已安装Node.js环境

3. 项目依赖：

• Node.js (建议v16+)
• fs模块（Node.js内置）

使用说明

浏览资源列表

项目以Markdown表格形式展示资源，包含以下列：

• Name：资源名称
• Description：资源描述
• Link：资源链接
• Date：最后更新日期

示例表格行：

| 21st.dev | Open source npm for shadcn/ui components | [Link](https://21st.dev/) | 2024-12-06 |

自动更新日期

项目包含自动更新日期的功能脚本，可以：

2. 为没有日期的行添加当前日期
3. 格式化现有日期为YYYY-MM-DD格式

核心代码

日期格式化函数

function formatDate(date) {
  const d = new Date(date);
  if (isNaN(d)) {
    return null; // 无效日期处理
  }
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

表格处理逻辑

// 处理表格行的日期列
if (tableHasDateColumn && dateColumnIndex > 0) {
  if (parts.length <= dateColumnIndex) {
    console.warn(`Skipping malformed row: ${line}`);
    updatedLines.push(line);
    continue;
  }

  let dateValue = parts[dateColumnIndex].trim();
  
  if (!dateValue || dateValue === '') {
    parts[dateColumnIndex] = ` ${currentDate} `;
    let newLine = parts.join('|').trimEnd();
    if (!newLine.endsWith('|')) newLine += ' |';
    updatedLines.push(newLine);
    changesCount++;
  } else {
    const formattedDate = formatDate(dateValue);
    if (formattedDate !== dateValue) {
      parts[dateColumnIndex] = ` ${formattedDate} `;
      let newLine = parts.join('|').trimEnd();
      if (!newLine.endsWith('|')) newLine += ' |';
      updatedLines.push(newLine);
      changesCount++;
    } else {
      updatedLines.push(line);
    }
  }
}

更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）
公众号二维码