update website main page and repo readme, add scroll bar to markdown tool
This commit is contained in:
parent
7221f94ca6
commit
a6b9f8430f
153
README.md
153
README.md
|
|
@ -1,3 +1,152 @@
|
||||||
A website.
|
# Jeff Emmett's Website
|
||||||
|
|
||||||
Do `npm i` and `npm run dev`
|
This is a collaborative canvas-based website built with React, TLDraw, and Cloudflare Workers.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Interactive canvas with custom shapes and tools
|
||||||
|
- Real-time collaboration
|
||||||
|
- Markdown editing
|
||||||
|
- Video chat integration with Daily.co
|
||||||
|
- AI-powered text generation
|
||||||
|
- Responsive design
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js 18.0.0 or higher
|
||||||
|
- npm (comes with Node.js)
|
||||||
|
- A Cloudflare account (for deploying the worker)
|
||||||
|
- Daily.co API key (for video chat functionality)
|
||||||
|
- OpenAI or Anthropic API key (for AI features)
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
1. Clone the repository:
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/your-username/jeffemmett.git
|
||||||
|
cd jeffemmett
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Install dependencies:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Create environment files:
|
||||||
|
|
||||||
|
Create a `.env.development` file in the root directory:
|
||||||
|
```
|
||||||
|
VITE_TLDRAW_WORKER_URL=http://localhost:5172
|
||||||
|
VITE_DAILY_API_KEY=your_daily_api_key
|
||||||
|
```
|
||||||
|
|
||||||
|
For production, create a `.env.production` file:
|
||||||
|
```
|
||||||
|
VITE_TLDRAW_WORKER_URL=https://api.yourdomain.com
|
||||||
|
VITE_DAILY_API_KEY=your_daily_api_key
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Start the development server:
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
This will start both the client (on port 5173) and the worker (on port 5172).
|
||||||
|
|
||||||
|
5. Open your browser and navigate to:
|
||||||
|
```
|
||||||
|
http://localhost:5173
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
The project uses a dual-server architecture:
|
||||||
|
|
||||||
|
- **Client**: A Vite-powered React application (port 5173)
|
||||||
|
- **Worker**: A Cloudflare Worker for handling real-time collaboration and asset storage (port 5172)
|
||||||
|
|
||||||
|
### Project Structure
|
||||||
|
|
||||||
|
- `/src` - Frontend React application
|
||||||
|
- `/routes` - React Router routes
|
||||||
|
- `/shapes` - Custom TLDraw shape definitions
|
||||||
|
- `/tools` - Custom TLDraw tool definitions
|
||||||
|
- `/ui` - UI components
|
||||||
|
- `/lib` - Utility libraries
|
||||||
|
- `/worker` - Cloudflare Worker code
|
||||||
|
- `/public` - Static assets
|
||||||
|
|
||||||
|
### Adding API Keys
|
||||||
|
|
||||||
|
To use AI features, you'll need to add your API keys:
|
||||||
|
|
||||||
|
1. Open the application in your browser
|
||||||
|
2. Click on the settings icon in the toolbar
|
||||||
|
3. Enter your OpenAI API key
|
||||||
|
4. Click "Close" to save
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
|
||||||
|
### Deploying the Client
|
||||||
|
|
||||||
|
The client is deployed using Vercel:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run deploy:dev # Deploy to development
|
||||||
|
npm run deploy:prod # Deploy to production
|
||||||
|
```
|
||||||
|
|
||||||
|
### Deploying the Worker
|
||||||
|
|
||||||
|
The worker is deployed using Wrangler:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run deploy:dev # Deploy to development
|
||||||
|
npm run deploy:prod # Deploy to production
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also deploy the worker separately:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd worker
|
||||||
|
npx wrangler deploy --env production
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
### Wrangler Configuration
|
||||||
|
|
||||||
|
The `wrangler.toml` file contains configuration for the Cloudflare Worker. You'll need to set up:
|
||||||
|
|
||||||
|
- R2 buckets for asset storage
|
||||||
|
- Durable Objects for real-time collaboration
|
||||||
|
- Environment variables for API keys
|
||||||
|
|
||||||
|
### Vercel Configuration
|
||||||
|
|
||||||
|
The `vercel.json` file contains configuration for the Vercel deployment, including:
|
||||||
|
|
||||||
|
- Build commands
|
||||||
|
- Output directory
|
||||||
|
- Routing rules
|
||||||
|
- Cache headers
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
1. Fork the repository
|
||||||
|
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
||||||
|
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
||||||
|
4. Push to the branch (`git push origin feature/amazing-feature`)
|
||||||
|
5. Open a Pull Request
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the ISC License - see the LICENSE file for details.
|
||||||
|
|
||||||
|
## Acknowledgments
|
||||||
|
|
||||||
|
- [TLDraw](https://tldraw.com) for the collaborative canvas
|
||||||
|
- [Daily.co](https://daily.co) for video chat functionality
|
||||||
|
- [Cloudflare Workers](https://workers.cloudflare.com) for serverless backend
|
||||||
|
|
|
||||||
14
index.html
14
index.html
|
|
@ -1,8 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Jeff Emmett</title>
|
<title>Jeff Emmett's Website</title>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
|
@ -38,6 +37,17 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/App.tsx"></script>
|
<script type="module" src="/src/App.tsx"></script>
|
||||||
|
|
||||||
|
<footer style="margin-top: 40px; padding: 20px; font-family: 'Recursive', sans-serif; font-size: 0.9rem; color: #666; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto;">
|
||||||
|
<div class="footer-links">
|
||||||
|
<p>Explore more of Jeff's mycelial tendrils:</p>
|
||||||
|
<ul style="list-style: none; padding: 0;">
|
||||||
|
<li><a href="https://draw.jeffemmett.com" style="color: #555; text-decoration: underline;">draw.jeffemmett.com</a> - An AI-augmented art generation tool</li>
|
||||||
|
<li><a href="https://quartz.jeffemmett.com" style="color: #555; text-decoration: underline;">quartz.jeffemmett.com</a> - A glimpse into Jeff's Obsidian knowledge graph</li>
|
||||||
|
<li><a href="https://jeffemmett.com/board/explainer" style="color: #555; text-decoration: underline;">jeffemmett.com/board/explainer</a> - A board explaining how boards work</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -111,7 +111,7 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
preview='live'
|
preview='live'
|
||||||
visibleDragbar={false}
|
visibleDragbar={true}
|
||||||
style={{
|
style={{
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
minHeight: '100%',
|
minHeight: '100%',
|
||||||
|
|
@ -120,13 +120,13 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
|
||||||
}}
|
}}
|
||||||
previewOptions={{
|
previewOptions={{
|
||||||
style: {
|
style: {
|
||||||
padding: '8px',
|
padding: '12px',
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
textareaProps={{
|
textareaProps={{
|
||||||
style: {
|
style: {
|
||||||
padding: '8px',
|
padding: '12px',
|
||||||
lineHeight: '1.5',
|
lineHeight: '1.5',
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
minHeight: '100%',
|
minHeight: '100%',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue