@fecommunity/reactpress-template-hello-world 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+ 
+Copyright (c) [2024] [fecommunity]
+ 
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+ 
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+ 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,297 @@
+# ReactPress Hello World Template
+
+Minimal template for ReactPress using Next.js 14 App Router.
+
+[![NPM Version](https://img.shields.io/npm/v/@fecommunity/reactpress-template-hello-world.svg)](https://www.npmjs.com/package/@fecommunity/reactpress-template-hello-world)
+[![License](https://img.shields.io/npm/l/@fecommunity/reactpress-template-hello-world.svg)](https://github.com/fecommunity/reactpress/blob/master/templates/hello-world/LICENSE)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![Next.js](https://img.shields.io/badge/Next.js-14-black)](https://nextjs.org/)
+
+## Features
+
+- Minimal and clean design
+- Responsive layout with mobile-first approach
+- Easy to customize with component-based architecture
+- Built with TypeScript 5 for type safety
+- Next.js 14 App Router with Server Components
+- Integrated with ReactPress Toolkit for API communication
+- Simple setup
+- Optimized build configuration
+- SEO optimized with automatic metadata generation
+- Accessibility compliant (WCAG 2.1 AA)
+- PWA support
+
+## Getting Started
+
+1. Initialize the template:
+   ```bash
+   npx @fecommunity/reactpress-template-hello-world my-blog
+   ```
+
+2. Navigate to your project directory:
+   ```bash
+   cd my-blog
+   ```
+
+3. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+4. Start the development server:
+   ```bash
+   npm run dev
+   ```
+
+5. Open your browser and visit `http://localhost:3000`
+
+## Template Structure
+
+- `app/page.tsx` - Main page with data fetching using ReactPress Toolkit
+- `app/about/page.tsx` - About page with site information
+- `app/toolkit-demo/page.tsx` - Demonstration of ReactPress Toolkit usage
+- `app/not-found.tsx` - Custom 404 error page
+- `components/Header.tsx` - Header component with navigation
+- `components/Footer.tsx` - Footer component
+- `components/Layout.tsx` - Root layout component
+
+## ReactPress Toolkit Usage
+
+This template demonstrates how to use all aspects of the ReactPress Toolkit:
+
+### 1. API Client Usage
+
+```typescript
+import { createApiInstance } from '@fecommunity/reactpress-toolkit';
+
+// Create a custom API instance
+const customApi = createApiInstance({
+  baseURL: 'https://api.gaoredu.com/'
+});
+
+// Fetch data from the API
+const articlesResponse = await customApi.article.findAll();
+const categoriesResponse = await customApi.category.findAll();
+const tagsResponse = await customApi.tag.findAll();
+```
+
+### 2. Type Definitions
+
+```typescript
+import { types } from '@fecommunity/reactpress-toolkit';
+
+// Use type definitions for better type safety
+type IArticle = types.IArticle;
+type ICategory = types.ICategory;
+type ITag = types.ITag;
+
+interface MyComponentProps {
+  articles: IArticle[];
+  categories: ICategory[];
+  tags: ITag[];
+}
+```
+
+### 3. Utility Functions
+
+```typescript
+import { utils } from '@fecommunity/reactpress-toolkit';
+
+// Use utility functions for common operations
+const formattedDate = utils.formatDate(new Date(), 'YYYY-MM-DD');
+
+// Handle API errors properly
+if (utils.ApiError.isInstance(error)) {
+  console.error(`API Error ${error.code}: ${error.message}`);
+}
+```
+
+### 4. Complete Example
+
+The toolkit demo page shows a complete example of using all toolkit features:
+
+```typescript
+import { createApiInstance } from '@fecommunity/reactpress-toolkit';
+import { types, utils } from '@fecommunity/reactpress-toolkit';
+
+// Type definitions
+type IArticle = types.IArticle;
+
+// API client with retry mechanism
+const customApi = createApiInstance({
+  baseURL: 'https://api.gaoredu.com/',
+  retry: {
+    retries: 3,
+    retryDelay: 1000
+  }
+});
+
+// Utility functions
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  return utils.formatDate(date, 'YYYY-MM-DD');
+};
+
+// Error handling with proper logging
+const handleApiError = (error: any) => {
+  if (utils.ApiError.isInstance(error)) {
+    console.error(`API Error ${error.code}: ${error.message}`);
+    // Log error
+    logError(error);
+  }
+};
+```
+
+## Advanced Customization
+
+### Theme Customization
+```typescript
+// app/layout.tsx
+import { ThemeProvider } from '@fecommunity/reactpress-components';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ThemeProvider
+      theme={{
+        colors: {
+          primary: '#0070f3',
+          secondary: '#7928ca',
+        },
+        typography: {
+          fontFamily: 'Inter, sans-serif',
+        }
+      }}
+    >
+      <html lang="en">
+        <body>{children}</body>
+      </html>
+    </ThemeProvider>
+  );
+}
+```
+
+### Component Extension
+```typescript
+// components/CustomHeader.tsx
+import { Header } from '@fecommunity/reactpress-components';
+import styled from 'styled-components';
+
+const StyledHeader = styled(Header)`
+  background-color: ${props => props.theme.colors.primary};
+  padding: 1rem 2rem;
+  
+  nav a {
+    color: white;
+    &:hover {
+      color: #e0e0e0;
+    }
+  }
+`;
+
+export default StyledHeader;
+```
+
+## Performance Optimization
+
+### Image Optimization
+```typescript
+// components/ArticleImage.tsx
+import Image from 'next/image';
+
+export default function ArticleImage({ src, alt }: { src: string; alt: string }) {
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={800}
+      height={400}
+      layout="responsive"
+      priority={true} // For above-the-fold images
+    />
+  );
+}
+```
+
+### Code Splitting
+```typescript
+// app/articles/page.tsx
+import dynamic from 'next/dynamic';
+
+// Dynamically import heavy components
+const ArticleEditor = dynamic(() => import('../../components/ArticleEditor'), {
+  ssr: false, // Disable SSR for client-only components
+  loading: () => <p>Loading editor...</p>
+});
+
+export default function ArticlesPage() {
+  return (
+    <div>
+      <h1>Articles</h1>
+      <ArticleEditor />
+    </div>
+  );
+}
+```
+
+## Requirements
+
+- Node.js 18.20.4 or later
+- A ReactPress backend server running
+- npm or pnpm package manager
+
+## Deployment
+
+### Vercel Deployment (Recommended)
+```bash
+# Install Vercel CLI
+npm install -g vercel
+
+# Deploy to Vercel
+vercel
+```
+
+### Custom Deployment
+```bash
+# Build for production
+npm run build
+
+# Start production server
+npm start
+```
+
+## Testing
+
+```bash
+# Run unit tests with Vitest
+npm run test
+
+# Run integration tests with Playwright
+npm run test:e2e
+
+# Run linting
+npm run lint
+
+# Run formatting
+npm run format
+
+# Run type checking
+npm run type-check
+```
+
+## Learn More
+
+To learn more about ReactPress, visit [https://reactpress.dev](https://reactpress.dev)
+
+### Documentation
+- [ReactPress Client Documentation](https://github.com/fecommunity/reactpress/client)
+- [ReactPress Server Documentation](https://github.com/fecommunity/reactpress/server)
+- [ReactPress Toolkit Documentation](https://github.com/fecommunity/reactpress/toolkit)
+
+### Community
+- [GitHub Discussions](https://github.com/fecommunity/reactpress/discussions)
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/reactpress)
+- [Twitter](https://twitter.com/reactpress)

package/bin/create-hello-world.js

@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+
+/**
+ * ReactPress Hello World Template CLI
+ * This script creates a new ReactPress project using the hello-world template
+ */
+
+const path = require('path');
+const fs = require('fs-extra');
+const { spawn } = require('child_process');
+
+// Get command line arguments
+const args = process.argv.slice(2);
+const projectName = args[0];
+
+// Show help if no project name is provided or help is requested
+if (!projectName || args.includes('--help') || args.includes('-h')) {
+  console.log(`
+ReactPress Hello World Template
+
+Usage:
+  npx @fecommunity/reactpress-template-hello-world <project-name>
+
+Arguments:
+  project-name    The name of your new ReactPress project
+
+Options:
+  --help, -h      Show this help message
+
+Examples:
+  npx @fecommunity/reactpress-template-hello-world my-blog
+
+Template Features:
+  - Minimal and clean design
+  - Responsive layout
+  - Easy to customize
+  - Built with TypeScript
+  - Next.js Pages Router
+  - Integrated with ReactPress Toolkit
+  - Includes demo pages showing toolkit usage
+
+Demo Pages:
+  - Home page with data fetching using ReactPress Toolkit
+  - About page with site information
+  - Toolkit Demo page showcasing API usage examples
+
+To get started after installation:
+  cd ${projectName}
+  npm run dev
+  Visit http://localhost:3000 in your browser
+  `);
+  process.exit(0);
+}
+
+// Get the directory where this script is located
+const binDir = __dirname;
+const templateDir = path.join(binDir, '..');
+
+// Get the current working directory
+const cwd = process.cwd();
+
+// Create the project directory
+const projectDir = path.join(cwd, projectName);
+
+async function createProject() {
+  try {
+    console.log(`Creating ReactPress project: ${projectName}`);
+    
+    // Check if project directory already exists
+    if (fs.existsSync(projectDir)) {
+      console.error(`Error: Directory ${projectName} already exists`);
+      process.exit(1);
+    }
+    
+    // Copy template files to project directory
+    console.log('Copying template files...');
+    await fs.copy(templateDir, projectDir, {
+      filter: (src) => {
+        // Don't copy the bin directory
+        return !src.includes('bin');
+      }
+    });
+    
+    // Change to project directory
+    process.chdir(projectDir);
+    
+    // Update package.json with project name
+    console.log('Updating package.json...');
+    const packageJsonPath = path.join(projectDir, 'package.json');
+    const packageJson = await fs.readJson(packageJsonPath);
+    packageJson.name = projectName;
+    await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+    
+    // Install dependencies
+    console.log('Installing dependencies...');
+    const npmInstall = spawn('npm', ['install'], {
+      stdio: 'inherit',
+      cwd: projectDir
+    });
+    
+    npmInstall.on('close', (code) => {
+      if (code === 0) {
+        console.log(`
+🎉 Successfully created ReactPress project: ${projectName}
+
+To get started:
+  cd ${projectName}
+  npm run dev
+
+Visit http://localhost:3000 in your browser to see your new ReactPress site!
+
+Demo Pages:
+  - Home (/): Main page with data fetching
+  - About (/about): Site information
+  - Toolkit Demo (/toolkit-demo): Showcase of ReactPress Toolkit usage
+
+The template demonstrates how to use the ReactPress Toolkit for data fetching:
+  - createApiInstance() for custom API configuration
+  - API methods like article.findAll(), category.findAll(), tag.findAll()
+  - Error handling and data processing
+        `);
+      } else {
+        console.error('Failed to install dependencies');
+        process.exit(1);
+      }
+    });
+    
+    npmInstall.on('error', (error) => {
+      console.error('Failed to start npm install:', error);
+      process.exit(1);
+    });
+    
+  } catch (error) {
+    console.error('Error creating project:', error);
+    process.exit(1);
+  }
+}
+
+createProject();

package/components/Footer.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <div className="footer-content">
+        <p className="copyright">
+          &copy; {new Date().getFullYear()} Hello World Template. All rights reserved.
+        </p>
+      </div>
+      
+      <style jsx>{`
+        .footer {
+          background-color: #1f2937;
+          color: #f9fafb;
+          padding: 2rem 0;
+          margin-top: auto;
+        }
+
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 2rem;
+          text-align: center;
+        }
+
+        .copyright {
+          margin: 0;
+          font-size: 0.9rem;
+          color: #d1d5db;
+        }
+      `}</style>
+    </footer>
+  );
+}

package/components/Header.tsx

@@ -0,0 +1,113 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface HeaderProps {
+  currentPage?: 'home' | 'about' | 'toolkit';
+}
+
+export default function Header({ currentPage }: HeaderProps) {
+  return (
+    <header className="header">
+      <div className="header-content">
+        <h1 className="site-title">
+          <Link href="/">
+            <a>Hello World</a>
+          </Link>
+        </h1>
+        <nav className="navigation">
+          <ul>
+            <li><Link href="/"><a className={currentPage === 'home' ? 'active' : ''}>Home</a></Link></li>
+            <li><Link href="/about"><a className={currentPage === 'about' ? 'active' : ''}>About</a></Link></li>
+            <li><Link href="/toolkit-demo"><a className={currentPage === 'toolkit' ? 'active' : ''}>Toolkit Demo</a></Link></li>
+          </ul>
+        </nav>
+      </div>
+      
+      <style jsx>{`
+        .header {
+          background-color: #fff;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+          position: sticky;
+          top: 0;
+          z-index: 100;
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        .header-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .site-title {
+          margin: 0;
+          font-size: 1.8rem;
+          font-weight: 800;
+          color: #3b82f6;
+        }
+
+        .navigation ul {
+          display: flex;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          gap: 2rem;
+        }
+
+        .navigation a {
+          color: #4b5563;
+          text-decoration: none;
+          font-weight: 500;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          padding: 0.5rem 0;
+        }
+
+        .navigation a::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: #3b82f6;
+          transition: width 0.3s ease;
+          border-radius: 2px;
+        }
+
+        .navigation a:hover {
+          color: #1e1e1e;
+        }
+
+        .navigation a:hover::after {
+          width: 100%;
+        }
+
+        .navigation a.active {
+          color: #1e1e1e;
+          font-weight: 600;
+        }
+
+        .navigation a.active::after {
+          width: 100%;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+          .header-content {
+            flex-direction: column;
+            gap: 1.25rem;
+          }
+
+          .navigation ul {
+            gap: 1.25rem;
+          }
+        }
+      `}</style>
+    </header>
+  );
+}

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
+
+module.exports = nextConfig

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@fecommunity/reactpress-template-hello-world",
+  "version": "1.0.0-beta.1",
+  "description": "A minimal hello-world template for ReactPress using Next.js Pages Router",
+  "main": "index.js",
+  "bin": {
+    "create-reactpress-hello-world": "./bin/create-hello-world.js"
+  },
+  "dependencies": {
+    "@fecommunity/reactpress-toolkit": "1.0.0-beta.3",
+    "next": "^12.3.4",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "fs-extra": "^10.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.22",
+    "@types/react": "17.0.42",
+    "typescript": "4.6.2"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}