Skip to content

Commit 7e2c948

Browse files
fecommunityfecommunity
committed
feat: add hello-world template
1 parent 715281f commit 7e2c948

File tree

13 files changed

+1878
-109
lines changed

13 files changed

+1878
-109
lines changed

‎pnpm-lock.yaml‎

Lines changed: 72 additions & 109 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎templates/hello-world/README.md‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
# ReactPress Hello World Template
2+
3+
A minimal hello-world template for ReactPress using Next.js Pages Router.
4+
5+
## Features
6+
7+
- Minimal and clean design
8+
- Responsive layout
9+
- Easy to customize
10+
- Built with TypeScript
11+
- Next.js Pages Router
12+
- Integrated with ReactPress Toolkit
13+
14+
## Getting Started
15+
16+
1. Initialize the template:
17+
```bash
18+
npx @fecommunity/reactpress-template-hello-world my-blog
19+
```
20+
21+
2. Navigate to your project directory:
22+
```bash
23+
cd my-blog
24+
```
25+
26+
3. Install dependencies:
27+
```bash
28+
npm install
29+
```
30+
31+
4. Start the development server:
32+
```bash
33+
npm run dev
34+
```
35+
36+
5. Open your browser and visit `http://localhost:3000`
37+
38+
## Template Structure
39+
40+
- `pages/index.tsx` - Main page with data fetching using ReactPress Toolkit
41+
- `pages/about.tsx` - About page with site information
42+
- `pages/toolkit-demo.tsx` - Demonstration of ReactPress Toolkit usage
43+
- `pages/404.tsx` - Custom 404 error page
44+
- `components/Header.tsx` - Header component with navigation
45+
- `components/Footer.tsx` - Footer component
46+
47+
## ReactPress Toolkit Usage
48+
49+
This template demonstrates how to use all aspects of the ReactPress Toolkit:
50+
51+
### 1. API Client Usage
52+
53+
```typescript
54+
import { createApiInstance } from '@fecommunity/reactpress-toolkit';
55+
56+
// Create a custom API instance
57+
const customApi = createApiInstance({
58+
baseURL: 'https://api.gaoredu.com/'
59+
});
60+
61+
// Fetch data from the API
62+
const articlesResponse = await customApi.article.findAll();
63+
const categoriesResponse = await customApi.category.findAll();
64+
const tagsResponse = await customApi.tag.findAll();
65+
```
66+
67+
### 2. Type Definitions
68+
69+
```typescript
70+
import { types } from '@fecommunity/reactpress-toolkit';
71+
72+
// Use type definitions for better type safety
73+
type IArticle = types.IArticle;
74+
type ICategory = types.ICategory;
75+
type ITag = types.ITag;
76+
77+
interface MyComponentProps {
78+
articles: IArticle[];
79+
categories: ICategory[];
80+
tags: ITag[];
81+
}
82+
```
83+
84+
### 3. Utility Functions
85+
86+
```typescript
87+
import { utils } from '@fecommunity/reactpress-toolkit';
88+
89+
// Use utility functions for common operations
90+
const formattedDate = utils.formatDate(new Date(), 'YYYY-MM-DD');
91+
92+
// Handle API errors properly
93+
if (utils.ApiError.isInstance(error)) {
94+
console.error(`API Error ${error.code}: ${error.message}`);
95+
}
96+
```
97+
98+
### 4. Complete Example
99+
100+
The toolkit demo page shows a complete example of using all toolkit features:
101+
102+
```typescript
103+
import { createApiInstance } from '@fecommunity/reactpress-toolkit';
104+
import { types, utils } from '@fecommunity/reactpress-toolkit';
105+
106+
// Type definitions
107+
type IArticle = types.IArticle;
108+
109+
// API client
110+
const customApi = createApiInstance({
111+
baseURL: 'https://api.gaoredu.com/'
112+
});
113+
114+
// Utility functions
115+
const formatDate = (dateString: string) => {
116+
const date = new Date(dateString);
117+
return utils.formatDate(date, 'YYYY-MM-DD');
118+
};
119+
120+
// Error handling
121+
const handleApiError = (error: any) => {
122+
if (utils.ApiError.isInstance(error)) {
123+
console.error(`API Error ${error.code}: ${error.message}`);
124+
}
125+
};
126+
```
127+
128+
## Customization
129+
130+
You can customize this template by modifying the following files:
131+
132+
- `pages/index.tsx` - Main page
133+
- `pages/about.tsx` - About page
134+
- `pages/toolkit-demo.tsx` - Toolkit demonstration page
135+
- `components/Header.tsx` - Header component
136+
- `components/Footer.tsx` - Footer component
137+
138+
## Deployment
139+
140+
To build for production:
141+
142+
```bash
143+
npm run build
144+
```
145+
146+
To start the production server:
147+
148+
```bash
149+
npm start
150+
```
151+
152+
## Learn More
153+
154+
To learn more about ReactPress, visit [https://reactpress.dev](https://reactpress.dev)

‎templates/hello-world/bin/create-hello-world.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
#!/usr/bin/env node
2+
3+
/**
4+
* ReactPress Hello World Template CLI
5+
* This script creates a new ReactPress project using the hello-world template
6+
*/
7+
8+
const path = require('path');
9+
const fs = require('fs-extra');
10+
const { spawn } = require('child_process');
11+
12+
// Get command line arguments
13+
const args = process.argv.slice(2);
14+
const projectName = args[0];
15+
16+
// Show help if no project name is provided or help is requested
17+
if (!projectName || args.includes('--help') || args.includes('-h')) {
18+
console.log(`
19+
ReactPress Hello World Template
20+
21+
Usage:
22+
npx @fecommunity/reactpress-template-hello-world <project-name>
23+
24+
Arguments:
25+
project-name The name of your new ReactPress project
26+
27+
Options:
28+
--help, -h Show this help message
29+
30+
Examples:
31+
npx @fecommunity/reactpress-template-hello-world my-blog
32+
33+
Template Features:
34+
- Minimal and clean design
35+
- Responsive layout
36+
- Easy to customize
37+
- Built with TypeScript
38+
- Next.js Pages Router
39+
- Integrated with ReactPress Toolkit
40+
- Includes demo pages showing toolkit usage
41+
42+
Demo Pages:
43+
- Home page with data fetching using ReactPress Toolkit
44+
- About page with site information
45+
- Toolkit Demo page showcasing API usage examples
46+
47+
To get started after installation:
48+
cd ${projectName}
49+
npm run dev
50+
Visit http://localhost:3000 in your browser
51+
`);
52+
process.exit(0);
53+
}
54+
55+
// Get the directory where this script is located
56+
const binDir = __dirname;
57+
const templateDir = path.join(binDir, '..');
58+
59+
// Get the current working directory
60+
const cwd = process.cwd();
61+
62+
// Create the project directory
63+
const projectDir = path.join(cwd, projectName);
64+
65+
async function createProject() {
66+
try {
67+
console.log(`Creating ReactPress project: ${projectName}`);
68+
69+
// Check if project directory already exists
70+
if (fs.existsSync(projectDir)) {
71+
console.error(`Error: Directory ${projectName} already exists`);
72+
process.exit(1);
73+
}
74+
75+
// Copy template files to project directory
76+
console.log('Copying template files...');
77+
await fs.copy(templateDir, projectDir, {
78+
filter: (src) => {
79+
// Don't copy the bin directory
80+
return !src.includes('bin');
81+
}
82+
});
83+
84+
// Change to project directory
85+
process.chdir(projectDir);
86+
87+
// Update package.json with project name
88+
console.log('Updating package.json...');
89+
const packageJsonPath = path.join(projectDir, 'package.json');
90+
const packageJson = await fs.readJson(packageJsonPath);
91+
packageJson.name = projectName;
92+
await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
93+
94+
// Install dependencies
95+
console.log('Installing dependencies...');
96+
const npmInstall = spawn('npm', ['install'], {
97+
stdio: 'inherit',
98+
cwd: projectDir
99+
});
100+
101+
npmInstall.on('close', (code) => {
102+
if (code === 0) {
103+
console.log(`
104+
🎉 Successfully created ReactPress project: ${projectName}
105+
106+
To get started:
107+
cd ${projectName}
108+
npm run dev
109+
110+
Visit http://localhost:3000 in your browser to see your new ReactPress site!
111+
112+
Demo Pages:
113+
- Home (/): Main page with data fetching
114+
- About (/about): Site information
115+
- Toolkit Demo (/toolkit-demo): Showcase of ReactPress Toolkit usage
116+
117+
The template demonstrates how to use the ReactPress Toolkit for data fetching:
118+
- createApiInstance() for custom API configuration
119+
- API methods like article.findAll(), category.findAll(), tag.findAll()
120+
- Error handling and data processing
121+
`);
122+
} else {
123+
console.error('Failed to install dependencies');
124+
process.exit(1);
125+
}
126+
});
127+
128+
npmInstall.on('error', (error) => {
129+
console.error('Failed to start npm install:', error);
130+
process.exit(1);
131+
});
132+
133+
} catch (error) {
134+
console.error('Error creating project:', error);
135+
process.exit(1);
136+
}
137+
}
138+
139+
createProject();

‎templates/hello-world/components/Footer.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
3+
export default function Footer() {
4+
return (
5+
<footer className="footer">
6+
<div className="footer-content">
7+
<p className="copyright">
8+
&copy; {new Date().getFullYear()} Hello World Template. All rights reserved.
9+
</p>
10+
</div>
11+
12+
<style jsx>{`
13+
.footer {
14+
background-color: #1f2937;
15+
color: #f9fafb;
16+
padding: 2rem 0;
17+
margin-top: auto;
18+
}
19+
20+
.footer-content {
21+
max-width: 1200px;
22+
margin: 0 auto;
23+
padding: 0 2rem;
24+
text-align: center;
25+
}
26+
27+
.copyright {
28+
margin: 0;
29+
font-size: 0.9rem;
30+
color: #d1d5db;
31+
}
32+
`}</style>
33+
</footer>
34+
);
35+
}

0 commit comments

Comments
 (0)