Skip to content

Commit 216df3e

Browse files
georgephillipsgeorgephillips
authored
Merge pull request #5 from CloudCannon/feat/file-browser-example
Added file browser example and removed some calls from initial release
2 parents 2fbf381 + 33af01d commit 216df3e

19 files changed

Lines changed: 5856 additions & 179 deletions

‎.gitignore‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,35 @@
11
node_modules/
22
dist/
3+
.DS_Store
4+
5+
# Logs
6+
logs
7+
*.log
8+
npm-debug.log*
9+
yarn-debug.log*
10+
yarn-error.log*
11+
pnpm-debug.log*
12+
lerna-debug.log*
13+
14+
node_modules
15+
dist
16+
dist-ssr
17+
*.local
18+
19+
# Editor directories and files
20+
.vscode/*
21+
!.vscode/extensions.json
22+
.idea
23+
.DS_Store
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?
29+
30+
# Environment variables
31+
.env
32+
.env.local
33+
.env.development.local
34+
.env.test.local
35+
.env.production.local

‎examples/file-browser/.gitignore‎

Whitespace-only changes.

‎examples/file-browser/README.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# CloudCannon File Browser
2+
3+
A modern file browser and code editor built with React and Monaco Editor that integrates with the CloudCannon JavaScript API v1.
4+
5+
## Features
6+
7+
- **File Browser**: Navigate through your site files with a tree-like structure
8+
- **Code Editor**: VSCode-like editing experience with syntax highlighting for multiple languages
9+
- **Real-time Sync**: Automatically syncs with CloudCannon's file system
10+
- **Auto-save**: Keyboard shortcuts (Ctrl/Cmd + S) for quick saving
11+
- **File Type Detection**: Automatic language detection based on file extensions
12+
- **Responsive Design**: Modern, clean interface that works across different screen sizes
13+
14+
## Getting Started
15+
16+
### Prerequisites
17+
18+
This application is designed to run within the CloudCannon editor environment. Make sure you have:
19+
20+
- Access to CloudCannon editor
21+
- The CloudCannon JavaScript API available on the window object
22+
23+
### Installation
24+
25+
1. Navigate to the project directory:
26+
```bash
27+
cd examples/file-browser
28+
```
29+
30+
2. Install dependencies:
31+
```bash
32+
npm install
33+
```
34+
35+
3. Start the development server:
36+
```bash
37+
npm run dev
38+
```
39+
40+
4. Open your browser and navigate to `http://localhost:3000`
41+
42+
### Building for Production
43+
44+
```bash
45+
npm run build
46+
```
47+
48+
The built files will be in the `dist` directory. Create a site on CloudCannon using these files
49+
50+
## Usage
51+
52+
### Within CloudCannon Editor
53+
54+
1. Load this application within the CloudCannon editor iframe
55+
2. The app will automatically detect and connect to the CloudCannon API
56+
3. Browse files in the left sidebar
57+
4. Click on any file to open it in the editor
58+
5. Make changes and save with Ctrl/Cmd + S or using the Save button
59+
60+
### API Integration
61+
62+
The application uses the CloudCannon JavaScript API v1:
63+
64+
```typescript
65+
// Access the API
66+
const api = window.CloudCannonAPI?.useVersion('v1');
67+
68+
// Get all files
69+
const files = await api.files();
70+
71+
// Work with individual files
72+
const file = api.file('path/to/file.md');
73+
const content = await file.get();
74+
await file.set(newContent);
75+
```
76+
77+
## Architecture
78+
79+
### Components
80+
81+
- **App.tsx**: Main application component that orchestrates the file browser and editor
82+
- **FileBrowser.tsx**: Tree-view file browser with folder expansion and file selection
83+
- **CodeEditor.tsx**: Monaco Editor wrapper with save functionality and language detection
84+
- **useCloudCannonAPI.ts**: Custom hook for managing CloudCannon API connection and state
85+
86+
### File Structure
87+
88+
```
89+
src/
90+
├── components/
91+
│ ├── FileBrowser.tsx # File tree browser component
92+
│ └── CodeEditor.tsx # Monaco editor component
93+
├── hooks/
94+
│ └── useCloudCannonAPI.ts # CloudCannon API integration hook
95+
├── types/
96+
│ └── cloudcannon.ts # TypeScript definitions for CloudCannon API
97+
├── App.tsx # Main application component
98+
├── main.tsx # React entry point
99+
└── index.css # Global styles with Tailwind
100+
```
101+
102+
## Supported File Types
103+
104+
The editor automatically detects and provides syntax highlighting for:
105+
106+
- **Web**: HTML, CSS, SCSS, SASS, Less, JavaScript, TypeScript, JSX, TSX
107+
- **Data**: JSON, YAML, XML
108+
- **Markup**: Markdown
109+
- **Programming**: Python, Ruby, PHP, Java, C/C++, C#, Go, Rust
110+
- **Shell**: Bash, Shell scripts
111+
- **Database**: SQL
112+
- **Other**: Dockerfile, R, and more
113+
114+
## Keyboard Shortcuts
115+
116+
- **Ctrl/Cmd + S**: Save current file
117+
- **Standard Monaco shortcuts**: All Monaco Editor shortcuts are available
118+
119+
## Error Handling
120+
121+
The application includes comprehensive error handling for:
122+
123+
- CloudCannon API connection issues
124+
- File loading errors
125+
- Save operation failures
126+
- Network connectivity problems
127+
128+
## Development
129+
130+
### Scripts
131+
132+
- `npm run dev`: Start development server
133+
- `npm run build`: Build for production
134+
- `npm run preview`: Preview production build
135+
- `npm run lint`: Run ESLint
136+
137+
### Technologies Used
138+
139+
- **React 18**: UI framework
140+
- **TypeScript**: Type safety
141+
- **Monaco Editor**: Code editing (VSCode's editor)
142+
- **Tailwind CSS**: Styling
143+
- **Vite**: Build tool
144+
- **Lucide React**: Icons
145+
146+
## Troubleshooting
147+
148+
### API Not Found Error
149+
150+
If you see "CloudCannonAPI not found", make sure:
151+
152+
1. You're running the app within the CloudCannon editor environment
153+
2. The CloudCannonAPI is available on the window object
154+
3. The v1 API is supported in your CloudCannon version
155+
156+
### File Loading Issues
157+
158+
If files aren't loading:
159+
160+
1. Check browser console for API errors
161+
2. Verify file permissions in CloudCannon
162+
3. Ensure the API has proper access to the file system
163+
164+
### Build Issues
165+
166+
If you encounter build issues:
167+
168+
1. Clear node_modules and reinstall: `rm -rf node_modules && npm install`
169+
2. Clear Vite cache: `npm run dev -- --force`
170+
3. Check TypeScript errors: `npm run build`
171+
172+
## License
173+
174+
This project is part of the CloudCannon JavaScript API examples and follows the same license terms.

‎examples/file-browser/cloudcannon.config.yml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
source: /
2+
paths:
3+
uploads: uploads
4+
static: ''
5+
collections_config:
6+
pages:
7+
path: ''
8+
name: Pages
9+
icon: pages
10+
disable_url: false
11+
disable_add: false
12+
disable_add_folder: false
13+
disable_file_actions: false
14+
url: /
15+
_enabled_editors:
16+
- visual
17+
timezone: Pacific/Auckland
18+
markdown:
19+
engine: commonmark
20+
options:
21+
xhtml: false
22+
breaks: false
23+
linkify: false
24+
typographer: false
25+
spaced_lists: false
26+
sentence_per_line: false
27+
gfm: false
28+
code_block_fences: '```'
29+
escape_snippets_in_code_blocks: false
30+
treat_indentation_as_code: false
31+
table: false
32+
strikethrough: false
33+
subscript: false
34+
superscript: false
35+
heading_ids: false
36+
attributes: false

‎examples/file-browser/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>CloudCannon File Browser</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)