Revert "update website main page and repo readme, add scroll bar to markdown tool"
This reverts commit a6b9f8430f.
This commit is contained in:
Shawn Anderson
parent
0ecbddc333
commit
2ce19aa4cb
153
README.md
153
README.md
|
|
@ -1,152 +1,3 @@
|
||||||
# Jeff Emmett's Website
|
A website.
|
||||||
|
|
||||||
This is a collaborative canvas-based website built with React, TLDraw, and Cloudflare Workers.
|
Do `npm i` and `npm run dev`
|
||||||
|
|
||||||
## 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,7 +1,8 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Jeff Emmett's Website</title>
|
<title>Jeff Emmett</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" />
|
||||||
|
|
@ -37,17 +38,6 @@
|
||||||
<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={true}
|
visibleDragbar={false}
|
||||||
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: '12px',
|
padding: '8px',
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
textareaProps={{
|
textareaProps={{
|
||||||
style: {
|
style: {
|
||||||
padding: '12px',
|
padding: '8px',
|
||||||
lineHeight: '1.5',
|
lineHeight: '1.5',
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
minHeight: '100%',
|
minHeight: '100%',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue