Initial commit
This commit is contained in:
33
projects/express-app.ts
Normal file
33
projects/express-app.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
export const EXPRESS_APP = {
|
||||
'index.js': {
|
||||
file: {
|
||||
contents: `import express from 'express';
|
||||
const app = express();
|
||||
const port = 3111;
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.send('Welcome to a WebContainers app! 🥳');
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(\`App is live at http://localhost:\${port}\`);
|
||||
});`,
|
||||
},
|
||||
},
|
||||
'package.json': {
|
||||
file: {
|
||||
contents: `
|
||||
{
|
||||
"name": "example-app",
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"express": "latest",
|
||||
"nodemon": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "nodemon --watch './' index.js"
|
||||
}
|
||||
}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
361
projects/react-app.ts
Normal file
361
projects/react-app.ts
Normal file
@@ -0,0 +1,361 @@
|
||||
export const REACT_APP = {
|
||||
'src': {
|
||||
'directory': {
|
||||
'vite-env.d.ts': {
|
||||
file: {
|
||||
contents: `/// <reference types="vite/client" />`
|
||||
}
|
||||
},
|
||||
'main.tsx': {
|
||||
file: {
|
||||
contents: `import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
`
|
||||
}
|
||||
},
|
||||
'App.tsx': {
|
||||
file: {
|
||||
contents: `import React, { useState } from 'react';
|
||||
|
||||
const App = () => {
|
||||
const [activeTab, setActiveTab] = useState('all');
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
const projects = [
|
||||
{ id: 1, title: "项目一", category: "web", description: "响应式网站设计" },
|
||||
{ id: 2, title: "项目二", category: "mobile", description: "移动应用开发" },
|
||||
{ id: 3, title: "项目三", category: "web", description: "电商平台开发" },
|
||||
{ id: 4, title: "项目四", category: "mobile", description: "移动游戏设计" }
|
||||
];
|
||||
|
||||
const filteredProjects = activeTab === 'all'
|
||||
? projects
|
||||
: projects.filter(project => project.category === activeTab);
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
padding: '20px',
|
||||
fontFamily: 'Arial, sans-serif',
|
||||
},
|
||||
header: {
|
||||
backgroundColor: '#ffffff',
|
||||
padding: '20px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
},
|
||||
nav: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
logo: {
|
||||
fontSize: '24px',
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
},
|
||||
menuButton: {
|
||||
display: 'none',
|
||||
'@media (max-width: 768px)': {
|
||||
display: 'block',
|
||||
},
|
||||
},
|
||||
navLinks: {
|
||||
display: 'flex',
|
||||
gap: '20px',
|
||||
},
|
||||
navLink: {
|
||||
color: '#333',
|
||||
textDecoration: 'none',
|
||||
padding: '8px 16px',
|
||||
borderRadius: '4px',
|
||||
transition: 'background-color 0.3s',
|
||||
},
|
||||
hero: {
|
||||
textAlign: 'center',
|
||||
padding: '60px 20px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
heroTitle: {
|
||||
fontSize: '48px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '20px',
|
||||
color: '#333',
|
||||
},
|
||||
heroSubtitle: {
|
||||
fontSize: '20px',
|
||||
color: '#666',
|
||||
marginBottom: '30px',
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#007bff',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '12px 24px',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
transition: 'background-color 0.3s',
|
||||
},
|
||||
buttonOutline: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '2px solid #007bff',
|
||||
color: '#007bff',
|
||||
},
|
||||
projectsSection: {
|
||||
padding: '40px 0',
|
||||
},
|
||||
tabsContainer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
gap: '10px',
|
||||
marginBottom: '30px',
|
||||
},
|
||||
tab: {
|
||||
padding: '8px 16px',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: '#eee',
|
||||
},
|
||||
activeTab: {
|
||||
backgroundColor: '#007bff',
|
||||
color: 'white',
|
||||
},
|
||||
projectsGrid: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
|
||||
gap: '20px',
|
||||
padding: '20px',
|
||||
},
|
||||
projectCard: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
padding: '20px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
},
|
||||
projectTitle: {
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '10px',
|
||||
},
|
||||
projectDescription: {
|
||||
color: '#666',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<header style={styles.header}>
|
||||
<nav style={styles.nav}>
|
||||
<div style={styles.logo}>Demo</div>
|
||||
<div style={styles.navLinks}>
|
||||
<a href="#" style={styles.navLink}>首页</a>
|
||||
<a href="#" style={styles.navLink}>项目</a>
|
||||
<a href="#" style={styles.navLink}>关于</a>
|
||||
<a href="#" style={styles.navLink}>联系</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section style={styles.hero}>
|
||||
<h1 style={styles.heroTitle}>欢迎来到我们的演示页面</h1>
|
||||
<p style={styles.heroSubtitle}>探索创新项目，体验卓越设计</p>
|
||||
<div style={{ display: 'flex', gap: '20px', justifyContent: 'center' }}>
|
||||
<button style={styles.button}>开始使用</button>
|
||||
<button style={{...styles.button, ...styles.buttonOutline}}>了解更多</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={styles.projectsSection}>
|
||||
<div style={styles.container}>
|
||||
<div style={styles.tabsContainer}>
|
||||
<button
|
||||
style={{
|
||||
...styles.tab,
|
||||
...(activeTab === 'all' ? styles.activeTab : {})
|
||||
}}
|
||||
onClick={() => setActiveTab('all')}
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
...styles.tab,
|
||||
...(activeTab === 'web' ? styles.activeTab : {})
|
||||
}}
|
||||
onClick={() => setActiveTab('web')}
|
||||
>
|
||||
Web
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
...styles.tab,
|
||||
...(activeTab === 'mobile' ? styles.activeTab : {})
|
||||
}}
|
||||
onClick={() => setActiveTab('mobile')}
|
||||
>
|
||||
Mobile
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={styles.projectsGrid}>
|
||||
{filteredProjects.map(project => (
|
||||
<div key={project.id} style={styles.projectCard}>
|
||||
<h3 style={styles.projectTitle}>{project.title}</h3>
|
||||
<p style={styles.projectDescription}>{project.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
`
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
"index.html": {
|
||||
file: {
|
||||
contents: `<!doctype html>
|
||||
<html lang="zn">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>解释结果</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>`
|
||||
}
|
||||
},
|
||||
'package.json': {
|
||||
file: {
|
||||
contents: `{
|
||||
"name": "react-app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
"@types/react": "^18.3.18",
|
||||
"@types/react-dom": "^18.3.5",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.16",
|
||||
"globals": "^15.14.0",
|
||||
"typescript": "~5.6.2",
|
||||
"typescript-eslint": "^8.18.2",
|
||||
"vite": "^6.0.5"
|
||||
}
|
||||
}`,
|
||||
},
|
||||
},
|
||||
"tsconfig.app.json": {
|
||||
file: {
|
||||
contents: `{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
`
|
||||
}
|
||||
},
|
||||
"tsconfig.json": {
|
||||
file: {
|
||||
contents: `{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
`
|
||||
}
|
||||
},
|
||||
"tsconfig.node.json": {
|
||||
file: {
|
||||
contents: `{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
`
|
||||
}
|
||||
},
|
||||
"vite.config.ts": {
|
||||
file: {
|
||||
contents: `import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})`
|
||||
}
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user