mirror of
https://github.com/waynesutton/markdown-site.git
synced 2026-01-12 04:09:14 +00:00
update: workos logo, blog post images and dashboard docs images upload
This commit is contained in:
Wayne Sutton
@@ -7,7 +7,9 @@ published: true
|
||||
tags: ["workos", "authentication", "tutorial", "dashboard"]
|
||||
readTime: "10 min read"
|
||||
featured: true
|
||||
featuredOrder: 3
|
||||
featuredOrder: 4
|
||||
layout: "sidebar"
|
||||
image: /images/workos.png
|
||||
excerpt: "Complete guide to setting up WorkOS AuthKit authentication for your dashboard. WorkOS is optional and can be configured in siteConfig.ts."
|
||||
---
|
||||
|
||||
@@ -66,6 +68,7 @@ Before starting, make sure you have:
|
||||
During the AuthKit setup wizard, you'll reach step 4: **"Add default redirect endpoint URI"**
|
||||
|
||||
Enter this for local development:
|
||||
|
||||
```
|
||||
http://localhost:5173/callback
|
||||
```
|
||||
@@ -110,10 +113,10 @@ npm install @workos-inc/authkit-react @convex-dev/workos
|
||||
|
||||
**What these packages do:**
|
||||
|
||||
| Package | Purpose |
|
||||
|---------|---------|
|
||||
| Package | Purpose |
|
||||
| --------------------------- | ------------------------------------------ |
|
||||
| `@workos-inc/authkit-react` | WorkOS React SDK for handling login/logout |
|
||||
| `@convex-dev/workos` | Bridges WorkOS auth with Convex backend |
|
||||
| `@convex-dev/workos` | Bridges WorkOS auth with Convex backend |
|
||||
|
||||
## Step 4: Add environment variables
|
||||
|
||||
@@ -207,6 +210,7 @@ When `requireAuth` is `true` and WorkOS is configured, the dashboard requires lo
|
||||
## Step 7: Test locally
|
||||
|
||||
1. Start your development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
@@ -273,21 +277,25 @@ When WorkOS is not configured or `requireAuth: false`:
|
||||
## Troubleshooting
|
||||
|
||||
**Dashboard shows "Authentication Required" message:**
|
||||
|
||||
- Verify `VITE_WORKOS_CLIENT_ID` and `VITE_WORKOS_REDIRECT_URI` are set in `.env.local`
|
||||
- Check that `WORKOS_CLIENT_ID` is set in Convex environment variables
|
||||
- Ensure `requireAuth: true` in `siteConfig.ts`
|
||||
|
||||
**Login redirect not working:**
|
||||
|
||||
- Verify redirect URI matches exactly in WorkOS Dashboard
|
||||
- Check CORS settings include your domain
|
||||
- Ensure callback route is configured in `App.tsx`
|
||||
|
||||
**"WorkOS is not configured" message:**
|
||||
|
||||
- Check that both `VITE_WORKOS_CLIENT_ID` and `VITE_WORKOS_REDIRECT_URI` are set
|
||||
- Verify environment variables are loaded (check browser console)
|
||||
- Restart development server after adding environment variables
|
||||
|
||||
**Convex auth errors:**
|
||||
|
||||
- Verify `WORKOS_CLIENT_ID` is set in Convex environment variables
|
||||
- Check that `convex/auth.config.ts` exists and is correct
|
||||
- Ensure Convex functions are deployed (`npx convex deploy`)
|
||||
|
||||
@@ -5,7 +5,8 @@ date: "2025-12-27"
|
||||
slug: "how-to-use-agentmail"
|
||||
published: true
|
||||
featured: true
|
||||
featuredOrder: 3
|
||||
featuredOrder: 5
|
||||
layout: "sidebar"
|
||||
blogFeatured: true
|
||||
image: /images/agentmail-blog.png
|
||||
tags: ["agentmail", "newsletter", "email", "setup"]
|
||||
@@ -102,6 +103,72 @@ npm run newsletter:send:stats
|
||||
3. Choose a post or compose a custom email
|
||||
4. Click "Send Newsletter"
|
||||
|
||||
### Customizing email footers
|
||||
|
||||
All newsletter emails include a footer with unsubscribe information. Edit the footer text in `convex/newsletterActions.ts`.
|
||||
|
||||
The footer appears in three functions:
|
||||
|
||||
**1. Post newsletter (`sendPostNewsletter`)**
|
||||
|
||||
HTML footer (lines 138-141):
|
||||
|
||||
```typescript
|
||||
<p style="font-size: 12px; color: #888;">
|
||||
You received this email because you subscribed to ${escapeHtml(siteName)}.<br />
|
||||
<a href="${unsubscribeUrl}" style="color: #888;">Unsubscribe</a>
|
||||
</p>
|
||||
```
|
||||
|
||||
Plain text footer (line 146):
|
||||
|
||||
```typescript
|
||||
const text = `${post.title}\n\n${post.description}\n\nRead more: ${postUrl}\n\n---\nUnsubscribe: ${unsubscribeUrl}`;
|
||||
```
|
||||
|
||||
**2. Weekly digest (`sendWeeklyDigest`)**
|
||||
|
||||
HTML footer (lines 295-298):
|
||||
|
||||
```typescript
|
||||
<p style="font-size: 12px; color: #888;">
|
||||
You received this email because you subscribed to ${escapeHtml(siteName)}.<br />
|
||||
<a href="${unsubscribeUrl}" style="color: #888;">Unsubscribe</a>
|
||||
</p>
|
||||
```
|
||||
|
||||
Plain text footer (line 302):
|
||||
|
||||
```typescript
|
||||
const text = `Weekly Digest - ${recentPosts.length} new post${recentPosts.length > 1 ? "s" : ""}\n\n${postsText}\n\n---\nUnsubscribe: ${unsubscribeUrl}`;
|
||||
```
|
||||
|
||||
**3. Custom newsletter (`sendCustomNewsletter`)**
|
||||
|
||||
HTML footer (lines 512-515):
|
||||
|
||||
```typescript
|
||||
<p style="font-size: 12px; color: #888;">
|
||||
You received this email because you subscribed to ${escapeHtml(siteName)}.<br />
|
||||
<a href="${unsubscribeUrl}" style="color: #888;">Unsubscribe</a>
|
||||
</p>
|
||||
```
|
||||
|
||||
Plain text footer (line 519):
|
||||
|
||||
```typescript
|
||||
const text = `${contentText}\n\n---\nUnsubscribe: ${unsubscribeUrl}`;
|
||||
```
|
||||
|
||||
**Customization options:**
|
||||
|
||||
- Change the message text ("You received this email because...")
|
||||
- Modify the unsubscribe link text ("Unsubscribe")
|
||||
- Adjust styling (font size, color, spacing)
|
||||
- Add additional footer content
|
||||
|
||||
Edit all three locations to keep footers consistent across email types. The unsubscribe URL is automatically generated and must remain in the footer for compliance.
|
||||
|
||||
### Weekly digest
|
||||
|
||||
Automated weekly digest emails are sent every Sunday at 9:00 AM UTC. They include all posts published in the last 7 days.
|
||||
|
||||
@@ -4,6 +4,8 @@ description: "Import external articles as markdown posts using Firecrawl. Get yo
|
||||
date: "2025-12-26"
|
||||
slug: "how-to-use-firecrawl"
|
||||
published: true
|
||||
featured: true
|
||||
featuredOrder: 6
|
||||
image: /images/firecrwall-blog.png
|
||||
tags: ["tutorial", "firecrawl", "import"]
|
||||
---
|
||||
|
||||
@@ -6,6 +6,7 @@ slug: "how-to-use-mcp-server"
|
||||
image: /images/mcp-blog.png
|
||||
published: true
|
||||
blogFeatured: true
|
||||
layout: "sidebar"
|
||||
tags: ["mcp", "cursor", "ai", "tutorial", "netlify"]
|
||||
---
|
||||
|
||||
|
||||
@@ -7,12 +7,16 @@ published: true
|
||||
tags: ["dashboard", "tutorial", "content-management"]
|
||||
readTime: "8 min read"
|
||||
featured: true
|
||||
layout: "sidebar"
|
||||
featuredOrder: 2
|
||||
image: /images/dashboard.png
|
||||
excerpt: "A complete guide to using the dashboard for managing your markdown blog without leaving your browser."
|
||||
---
|
||||
|
||||
# How to use the Markdown sync dashboard
|
||||
|
||||
|
||||
|
||||
The dashboard at `/dashboard` gives you a centralized interface for managing your markdown blog. You can edit posts, sync content, configure settings, and more without switching between your editor and terminal.
|
||||
|
||||
## Accessing the dashboard
|
||||
@@ -50,6 +54,8 @@ Posts and pages display with their titles, publication status, and last modified
|
||||
|
||||
### Post and page editor
|
||||
|
||||
|
||||
|
||||
Edit markdown content with a live preview. The editor includes:
|
||||
|
||||
- Markdown editor on the left
|
||||
@@ -75,6 +81,8 @@ Write your content, fill in frontmatter fields, then download the markdown file.
|
||||
|
||||
## AI Agent
|
||||
|
||||
|
||||
|
||||
The dashboard includes a dedicated AI chat section separate from the Write page. Use it for:
|
||||
|
||||
- Writing assistance
|
||||
@@ -86,6 +94,7 @@ The AI Agent uses Anthropic Claude API and requires `ANTHROPIC_API_KEY` in your
|
||||
|
||||
## Newsletter management
|
||||
|
||||
|
||||
All Newsletter Admin features are integrated into the dashboard:
|
||||
|
||||
- Subscribers: View, search, filter, and delete subscribers
|
||||
@@ -111,6 +120,8 @@ Firecrawl import requires `FIRECRAWL_API_KEY` in your `.env.local` file.
|
||||
|
||||
## Site configuration
|
||||
|
||||
|
||||
|
||||
The Config Generator UI lets you configure all `siteConfig.ts` settings from the dashboard:
|
||||
|
||||
- Site name, title, logo, bio
|
||||
@@ -150,6 +161,8 @@ Stats update automatically via Convex subscriptions. No page refresh needed.
|
||||
|
||||
## Sync commands
|
||||
|
||||
|
||||
|
||||
Run sync operations from the dashboard without opening a terminal:
|
||||
|
||||
**Development:**
|
||||
|
||||
@@ -396,6 +396,10 @@ This image appears when sharing on social media. Recommended: 1200x630 pixels.
|
||||
|
||||
```
|
||||
|
||||
Inline images appear in the post content. Alt text is used as the caption below the image.
|
||||
|
||||
**Image lightbox:** By default, images in blog posts and pages open in a full-screen lightbox when clicked. This allows readers to view images at full size. The lightbox can be closed by clicking outside the image, pressing Escape, or clicking the close button. To disable this feature, set `imageLightbox.enabled: false` in `src/config/siteConfig.ts`.
|
||||
|
||||
**External Images:**
|
||||
|
||||
```markdown
|
||||
@@ -1086,6 +1090,8 @@ Pages appear automatically in the navigation when published.
|
||||
|
||||
**Show image at top:** Add `showImageAtTop: true` to display the `image` field at the top of the post/page above the header. Default behavior: if `showImageAtTop` is not set or `false`, image only used for Open Graph previews and featured card thumbnails.
|
||||
|
||||
**Image lightbox:** Images in blog posts and pages automatically open in a full-screen lightbox when clicked (if enabled in `siteConfig.imageLightbox.enabled`). This allows readers to view images at full size. The lightbox can be closed by clicking outside the image, pressing Escape, or clicking the close button. To disable this feature, set `imageLightbox.enabled: false` in `src/config/siteConfig.ts`.
|
||||
|
||||
**Footer:** Footer content can be set in frontmatter (`footer` field) or use `siteConfig.footer.defaultContent`. Control visibility globally via `siteConfig.footer.enabled` and per-page via `showFooter: true/false` frontmatter.
|
||||
|
||||
**Social footer:** Display social icons and copyright below the main footer. Configure via `siteConfig.socialFooter`. Control visibility per-page via `showSocialFooter: true/false` frontmatter.
|
||||
|
||||
@@ -8,6 +8,7 @@ tags: ["git", "convex", "ci-cd", "collaboration", "workflow"]
|
||||
readTime: "6 min read"
|
||||
image: /images/team-sync.png
|
||||
featured: false
|
||||
layout: "sidebar"
|
||||
newsletter: true
|
||||
|
||||
layout: "sidebar"
|
||||
|
||||
@@ -9,6 +9,41 @@ layout: "sidebar"
|
||||
All notable changes to this project.
|
||||
|
||||
|
||||
## v1.47.0
|
||||
|
||||
Released December 29, 2025
|
||||
|
||||
**Image lightbox for blog posts and pages**
|
||||
|
||||
- Images automatically open in full-screen lightbox when clicked (if enabled)
|
||||
- Lightbox includes dark backdrop, close button (X icon), and caption display
|
||||
- Keyboard support: Press Escape to close lightbox
|
||||
- Click outside image (backdrop) to close
|
||||
- Alt text displayed as caption below image in lightbox
|
||||
- Images show pointer cursor (`zoom-in`) and subtle hover effect when lightbox is enabled
|
||||
- Configurable via `siteConfig.imageLightbox.enabled` (default: `true`)
|
||||
- Dashboard config generator includes image lightbox toggle
|
||||
- Responsive design: lightbox adapts to mobile screens
|
||||
|
||||
**Configuration:**
|
||||
|
||||
```typescript
|
||||
// src/config/siteConfig.ts
|
||||
imageLightbox: {
|
||||
enabled: true, // Set to false to disable image lightbox
|
||||
},
|
||||
```
|
||||
|
||||
**Technical details:**
|
||||
|
||||
- New `ImageLightbox` component in `BlogPost.tsx` with backdrop, close button, and keyboard handlers
|
||||
- Lightbox state management using React hooks (`useState`, `useEffect`)
|
||||
- CSS styles for lightbox backdrop, image container, close button, and caption
|
||||
- Prevents body scrolling when lightbox is open
|
||||
- Smooth fade-in animation for lightbox appearance
|
||||
|
||||
Updated files: `src/components/BlogPost.tsx`, `src/config/siteConfig.ts`, `src/styles/global.css`, `src/pages/Dashboard.tsx`, `content/pages/docs.md`, `content/blog/setup-guide.md`
|
||||
|
||||
## v1.46.0
|
||||
|
||||
Released December 29, 2025
|
||||
|
||||
@@ -175,6 +175,8 @@ Content here...
|
||||
|
||||
**Show image at top:** Add `showImageAtTop: true` to display the `image` field at the top of the post/page above the header. Default behavior: if `showImageAtTop` is not set or `false`, image only used for Open Graph previews and featured card thumbnails.
|
||||
|
||||
**Image lightbox:** Images in blog posts and pages automatically open in a full-screen lightbox when clicked (if enabled in `siteConfig.imageLightbox.enabled`). This allows readers to view images at full size. The lightbox can be closed by clicking outside the image, pressing Escape, or clicking the close button.
|
||||
|
||||
**Text alignment:** Use `textAlign` field to control text alignment for page content. Options: `"left"` (default), `"center"`, or `"right"`. Used by `home.md` to control home intro alignment.
|
||||
|
||||
### Home intro content
|
||||
@@ -1025,6 +1027,7 @@ When `requireAuth` is `false`, the dashboard is open access. When `requireAuth`
|
||||
### Content Management
|
||||
|
||||
**Posts and Pages List Views:**
|
||||
|
||||
- View all posts and pages (published and unpublished)
|
||||
- Filter by status: All, Published, Drafts
|
||||
- Search by title or content
|
||||
@@ -1034,6 +1037,7 @@ When `requireAuth` is `false`, the dashboard is open access. When `requireAuth`
|
||||
- WordPress-style UI with date, edit, view, and publish controls
|
||||
|
||||
**Post and Page Editor:**
|
||||
|
||||
- Markdown editor with live preview
|
||||
- Frontmatter sidebar on the right with all available fields
|
||||
- Draggable/resizable frontmatter sidebar (200px-600px width)
|
||||
@@ -1045,6 +1049,7 @@ When `requireAuth` is `false`, the dashboard is open access. When `requireAuth`
|
||||
- Preview uses ReactMarkdown with proper styling
|
||||
|
||||
**Write Post and Write Page:**
|
||||
|
||||
- Full-screen writing interface
|
||||
- Markdown editor with word/line/character counts
|
||||
- Frontmatter reference panel
|
||||
@@ -1075,6 +1080,7 @@ All newsletter sections are full-width in the dashboard content area.
|
||||
### Content Import
|
||||
|
||||
**Firecrawl Import:**
|
||||
|
||||
- Import articles from external URLs using Firecrawl API
|
||||
- Requires `FIRECRAWL_API_KEY` in `.env.local`
|
||||
- Creates local markdown drafts in `content/blog/`
|
||||
@@ -1084,6 +1090,7 @@ All newsletter sections are full-width in the dashboard content area.
|
||||
### Site Configuration
|
||||
|
||||
**Config Generator:**
|
||||
|
||||
- UI to configure all settings in `src/config/siteConfig.ts`
|
||||
- Generates downloadable `siteConfig.ts` file
|
||||
- Hybrid approach: dashboard generates config, file-based config continues to work
|
||||
@@ -1100,6 +1107,7 @@ All newsletter sections are full-width in the dashboard content area.
|
||||
- And more
|
||||
|
||||
**Index HTML Editor:**
|
||||
|
||||
- View and edit `index.html` content
|
||||
- Meta tags, Open Graph, Twitter Cards, JSON-LD
|
||||
- Download updated HTML file
|
||||
@@ -1115,6 +1123,7 @@ All newsletter sections are full-width in the dashboard content area.
|
||||
### Sync Commands
|
||||
|
||||
**Sync Content Section:**
|
||||
|
||||
- UI with buttons for all sync operations
|
||||
- Development sync commands:
|
||||
- `npm run sync` - Sync markdown content
|
||||
@@ -1131,6 +1140,7 @@ All newsletter sections are full-width in the dashboard content area.
|
||||
- Toast notifications for success/error feedback
|
||||
|
||||
**Sync Server:**
|
||||
|
||||
- Local HTTP server for executing commands from dashboard
|
||||
- Start with `npm run sync-server` (runs on localhost:3001)
|
||||
- Execute commands directly from dashboard with real-time output streaming
|
||||
@@ -1140,6 +1150,7 @@ All newsletter sections are full-width in the dashboard content area.
|
||||
- Copy icons for `npm run sync-server` command in dashboard
|
||||
|
||||
**Header Sync Buttons:**
|
||||
|
||||
- Quick sync buttons in dashboard header (right side)
|
||||
- `npm run sync:all` (dev) button
|
||||
- `npm run sync:all:prod` (prod) button
|
||||
@@ -1149,28 +1160,33 @@ All newsletter sections are full-width in the dashboard content area.
|
||||
### Dashboard Features
|
||||
|
||||
**Search:**
|
||||
|
||||
- Search bar in header
|
||||
- Search dashboard features, page titles, and post content
|
||||
- Real-time results as you type
|
||||
|
||||
**Theme and Font:**
|
||||
|
||||
- Theme toggle (dark, light, tan, cloud)
|
||||
- Font switcher (serif, sans, monospace)
|
||||
- Preferences persist across sessions
|
||||
|
||||
**Mobile Responsive:**
|
||||
|
||||
- Fully responsive design
|
||||
- Mobile-optimized layout
|
||||
- Touch-friendly controls
|
||||
- Collapsible sidebar on mobile
|
||||
|
||||
**Toast Notifications:**
|
||||
|
||||
- Success, error, info, and warning notifications
|
||||
- Auto-dismiss after 4 seconds
|
||||
- Theme-aware styling
|
||||
- No browser default alerts
|
||||
|
||||
**Command Modal:**
|
||||
|
||||
- Shows sync command output
|
||||
- Copy command to clipboard
|
||||
- Close button to dismiss
|
||||
@@ -1188,19 +1204,23 @@ All newsletter sections are full-width in the dashboard content area.
|
||||
### Sync Commands Reference
|
||||
|
||||
**Development:**
|
||||
|
||||
- `npm run sync` - Sync markdown content to development Convex
|
||||
- `npm run sync:discovery` - Update discovery files (AGENTS.md, llms.txt) with development data
|
||||
- `npm run sync:all` - Run both content sync and discovery sync (development)
|
||||
|
||||
**Production:**
|
||||
|
||||
- `npm run sync:prod` - Sync markdown content to production Convex
|
||||
- `npm run sync:discovery:prod` - Update discovery files with production data
|
||||
- `npm run sync:all:prod` - Run both content sync and discovery sync (production)
|
||||
|
||||
**Sync Server:**
|
||||
|
||||
- `npm run sync-server` - Start local HTTP server for executing sync commands from dashboard UI
|
||||
|
||||
**Content Import:**
|
||||
|
||||
- `npm run import <url>` - Import external URL as markdown post (requires FIRECRAWL_API_KEY)
|
||||
|
||||
**Note:** The dashboard provides a UI for these commands. When the sync server is running (`npm run sync-server`), you can execute commands directly from the dashboard with real-time output. Otherwise, the dashboard shows commands in a modal for copying to your terminal.
|
||||
|
||||
Reference in New Issue
Block a user