aradotso OpenClaw 101 Resource Platform Skill
Skill by ara.so — Hermes Skills collection.
What is OpenClaw 101?
OpenClaw 101 is an open-source resource aggregation platform built with Next.js 14 and TypeScript. It serves as a comprehensive Chinese-language guide for OpenClaw, collecting 35+ tutorials from platforms like Alibaba Cloud, Tencent Cloud, DigitalOcean, and Bilibili. The platform features:
- Resource aggregation with search and filtering
- 7-day learning path (linked to Feishu knowledge base)
- AI skill recommendations by use case
- Bilingual support (Chinese and English)
- Category-based organization and tagging system
Installation & Setup
# Clone the repository
git clone https://github.com/mengjian-github/openclaw101.git
cd openclaw101
# Install dependencies
npm install
# Start development server
npm run dev
Access at http://localhost:3000
Build & Deploy
# Production build
npm run build
# Start production server
npm start
# Deploy to Cloudflare Pages
# (Typically automated via Git integration)
npm run build
Project Structure
src/
├── app/
│ ├── page.tsx # Homepage
│ ├── resources/page.tsx # Resources listing page
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles
├── components/
│ ├── Hero.tsx # Hero section
│ ├── WhatIs.tsx # Introduction section
│ ├── LearningPath.tsx # 7-day learning path
│ ├── Skills.tsx # Skill recommendations
│ ├── ResourcesSection.tsx # Featured resources
│ ├── Community.tsx # Community section
│ ├── Navbar.tsx # Navigation
│ └── Footer.tsx # Footer
└── data/
└── resources.ts # Resource database
Adding New Resources
The core of the platform is the resource database in src/data/resources.ts:
// src/data/resources.ts
export interface Resource {
title: string;
desc: string;
url: string;
source: string;
lang: 'zh' | 'en';
category: 'official' | 'getting-started' | 'channel-integration' |
'skill-dev' | 'video' | 'deep-dive' | 'tools' | 'cloud-deploy';
featured?: boolean;
tags?: string[];
}
export const resources: Resource[] = [
{
title: 'OpenClaw 飞书接入完整指南',
desc: '详细介绍如何将 OpenClaw 接入飞书平台的步骤',
url: 'https://cloud.tencent.com/developer/article/2505478',
source: '腾讯云',
lang: 'zh',
category: 'channel-integration',
featured: true,
tags: ['飞书', 'Lark', '接入'],
},
{
title: 'Deploy OpenClaw on DigitalOcean',
desc: 'One-click deployment guide for DigitalOcean platform',
url: 'https://www.digitalocean.com/community/tutorials/how-to-deploy-openclaw',
source: 'DigitalOcean',
lang: 'en',
category: 'cloud-deploy',
featured: false,
tags: ['deployment', 'cloud', 'VPS'],
},
// Add more resources...
];
Resource Categories
| Category | Description |
|---|---|
official |
Official OpenClaw documentation |
getting-started |
Installation and deployment tutorials |
channel-integration |
Platform integrations (Feishu, DingTalk, Telegram) |
skill-dev |
AI skill development guides |
video |
Video tutorials |
deep-dive |
In-depth analysis articles |
tools |
Tools and plugins |
cloud-deploy |
Cloud platform deployment guides |
Component Development Patterns
Creating a New Component
// src/components/NewSection.tsx
import React from 'react';
export default function NewSection() {
return (
<section className="py-20 px-4">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">
Section Title
</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Content grid */}
</div>
</div>
</section>
);
}
Using Resources Data
// Example: Filtering resources in a component
import { resources } from '@/data/resources';
export default function FeaturedResources() {
const featured = resources.filter(r => r.featured);
const chineseResources = resources.filter(r => r.lang === 'zh');
const videoTutorials = resources.filter(r => r.category === 'video');
return (
<div>
{featured.map((resource, idx) => (
<div key={idx} className="border rounded-lg p-4 hover:shadow-lg transition">
<h3 className="font-bold text-lg mb-2">{resource.title}</h3>
<p className="text-gray-600 mb-3">{resource.desc}</p>
<div className="flex items-center justify-between">
<span className="text-sm text-gray-500">{resource.source}</span>
<a
href={resource.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline"
>
阅读 →
</a>
</div>
</div>
))}
</div>
);
}
Resources Page Implementation
The resources page includes search and filtering:
// src/app/resources/page.tsx
'use client';
import { useState, useMemo } from 'react';
import { resources } from '@/data/resources';
export default function ResourcesPage() {
const [search, setSearch] = useState('');
const [langFilter, setLangFilter] = useState<'all' | 'zh' | 'en'>('all');
const [categoryFilter, setCategoryFilter] = useState<string>('all');
const filtered = useMemo(() => {
return resources.filter(r => {
const matchesSearch = r.title.toLowerCase().includes(search.toLowerCase()) ||
r.desc.toLowerCase().includes(search.toLowerCase());
const matchesLang = langFilter === 'all' || r.lang === langFilter;
const matchesCategory = categoryFilter === 'all' || r.category === categoryFilter;
return matchesSearch && matchesLang && matchesCategory;
});
}, [search, langFilter, categoryFilter]);
return (
<div className="max-w-7xl mx-auto px-4 py-12">
<h1 className="text-4xl font-bold mb-8">资源库</h1>
{/* Filters */}
<div className="mb-8 flex flex-wrap gap-4">
<input
type="text"
placeholder="搜索资源..."
value={search}
=> setSearch(e.target.value)}
className="px-4 py-2 border rounded-lg flex-1 min-w-[200px]"
/>
<select
value={langFilter}
=> setLangFilter(e.target.value as any)}
className="px-4 py-2 border rounded-lg"
>
<option value="all">全部语言</option>
<option value="zh">中文</option>
<option value="en">English</option>
</select>
<select
value={categoryFilter}
=> setCategoryFilter(e.target.value)}
className="px-4 py-2 border rounded-lg"
>
<option value="all">全部分类</option>
<option value="getting-started">入门部署</option>
<option value="channel-integration">平台接入</option>
<option value="skill-dev">技能开发</option>
{/* More categories */}
</select>
</div>
{/* Results */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{filtered.map((resource, idx) => (
<ResourceCard key={idx} resource={resource} />
))}
</div>
</div>
);
}
Styling with Tailwind CSS
Common utility patterns used in the project:
// Container pattern
<div className="max-w-6xl mx-auto px-4">
// Responsive grid
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
// Card with hover effect
<div className="border rounded-lg p-6 hover:shadow-lg transition-shadow">
// Button styles
<button className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
// Text gradients
<h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Configuration
Next.js Configuration
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export', // For static export to Cloudflare Pages
images: {
unoptimized: true, // Required for static export
},
};
module.exports = nextConfig;
Tailwind Configuration
// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
// Custom theme extensions
},
},
plugins: [],
};
export default config;
Common Patterns
Adding a New Learning Path Item
// In src/components/LearningPath.tsx
const pathItems = [
{
day: 1,
title: '认识 OpenClaw',
desc: '了解基本概念、架构和使用场景',
},
{
day: 2,
title: '快速部署',
desc: '选择云平台，完成首次部署',
},
// Add more days...
];
Adding Skill Recommendations
// In src/components/Skills.tsx
const skills = [
{
icon: '💬',
title: 'Chat Integration',
desc: '接入微信、飞书、Telegram 等聊天平台',
tags: ['WeChat', 'Feishu', 'Telegram'],
},
{
icon: '🤖',
title: 'Custom AI Skills',
desc: '开发专属的 AI 助手技能',
tags: ['Python', 'JavaScript', 'API'],
},
// Add more skills...
];
Creating External Links
// Safe external link pattern
<a
href={resource.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline"
>
{resource.title}
</a>
Troubleshooting
Build Errors
Issue: Type error: Property does not exist on type
Solution: Ensure resource types match the interface:
// Check src/data/resources.ts
const newResource: Resource = {
title: string,
desc: string,
url: string,
source: string,
lang: 'zh' | 'en',
category: /* valid category */,
// Optional fields
featured: boolean,
tags: string[],
};
Deployment Issues
Issue: Static export fails with image optimization
Solution: Set images.unoptimized: true in next.config.js
Issue: 404 on client-side navigation
Solution: Ensure proper routing in app/ directory structure
Development Server Issues
Issue: Changes not reflecting
Solution:
# Clear Next.js cache
rm -rf .next
npm run dev
Testing Locally
# Development mode
npm run dev
# Production build test
npm run build
npm start
# Type checking
npx tsc --noEmit
# Lint
npm run lint
Contributing Workflow
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-resources - Add resources to
src/data/resources.ts - Test locally:
npm run dev - Commit changes:
git commit -m "Add 5 new OpenClaw tutorials" - Push and create PR
Key Files to Modify
- Add resources:
src/data/resources.ts - Edit homepage:
src/app/page.tsx - Edit resources page:
src/app/resources/page.tsx - Add components:
src/components/ - Global styles:
src/app/globals.css - Site metadata:
src/app/layout.tsx