Skip to content

Commit 2ea7a1e

Browse files
andrei-radulescu-banuandrei-radulescu-banu
committed
devel
1 parent 6f55763 commit 2ea7a1e

File tree

3 files changed

+105
-83
lines changed

3 files changed

+105
-83
lines changed

‎_includes/head.html‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,27 @@
4949
<!-- Syntax highlighting with highlight.js -->
5050
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css">
5151
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
52-
<script>hljs.highlightAll();</script>
52+
<script>
53+
// Configure highlight.js to suppress HTML security warnings for code blocks
54+
// This is safe because we control the content in our code blocks
55+
if (typeof hljs !== 'undefined') {
56+
// Suppress console warnings about HTML in code blocks
57+
const originalWarn = console.warn;
58+
console.warn = function(...args) {
59+
if (args[0] && typeof args[0] === 'string' && args[0].includes('unescaped HTML')) {
60+
return; // Suppress highlight.js HTML warnings
61+
}
62+
originalWarn.apply(console, args);
63+
};
64+
65+
hljs.highlightAll();
66+
67+
// Restore console.warn after highlighting
68+
setTimeout(() => {
69+
console.warn = originalWarn;
70+
}, 1000);
71+
}
72+
</script>
5373

5474
<!-- Custom styles link -->
5575
<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">

‎_posts/2025-11-27-one-codebase-many-products-playbook.md‎

Lines changed: 15 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,24 @@ Each product adds specialized workflows:
5050
Here's how the two products differ architecturally while sharing the same foundation. Click on either diagram to view full-size:
5151

5252
<div class="architecture-comparison">
53-
<div class="arch-diagram" onclick="openArchModal(this)">
53+
<div class="arch-diagram">
5454
<img src="/assets/images/sig_agent_architecture.png" alt="SigAgent Architecture">
55+
<div class="arch-label">
56+
<a href="/excalidraw-demo.html?file=/assets/js/sig_agent_architecture.excalidraw" target="_blank" style="color: #2563eb; text-decoration: none; font-weight: 500;">
57+
📝 Load in Excalidraw
58+
</a>
59+
</div>
5560
</div>
56-
<div class="arch-diagram" onclick="openArchModal(this)">
61+
<div class="arch-diagram">
5762
<img src="/assets/images/doc_router_architecture.png" alt="DocRouter Architecture">
63+
<div class="arch-label">
64+
<a href="/excalidraw-demo.html?file=/assets/js/doc_router_architecture.excalidraw" target="_blank" style="color: #2563eb; text-decoration: none; font-weight: 500;">
65+
📝 Load in Excalidraw
66+
</a>
67+
</div>
5868
</div>
5969
</div>
6070

61-
<div id="archModal" class="arch-modal" onclick="closeArchModal()">
62-
<span class="arch-close">&times;</span>
63-
<img class="arch-modal-content" id="archModalImg">
64-
<div id="archCaption"></div>
65-
</div>
66-
6771
<style>
6872
.architecture-comparison {
6973
display: grid;
@@ -99,54 +103,8 @@ Here's how the two products differ architecturally while sharing the same founda
99103
justify-content: center;
100104
}
101105

102-
.arch-modal {
103-
display: none;
104-
position: fixed;
105-
z-index: 1000;
106-
left: 0;
107-
top: 0;
108-
width: 100%;
109-
height: 100%;
110-
overflow: auto;
111-
background-color: rgba(0,0,0,0.9);
112-
flex-direction: column;
113-
align-items: center;
114-
justify-content: center;
115-
}
116-
117-
.arch-modal-content {
118-
margin: auto;
119-
display: block;
120-
max-width: 90%;
121-
max-height: 85vh;
122-
object-fit: contain;
123-
align-self: center;
124-
}
125-
126-
.arch-close {
127-
position: absolute;
128-
top: 15px;
129-
right: 35px;
130-
color: #f1f1f1;
131-
font-size: 40px;
132-
font-weight: bold;
133-
transition: 0.3s;
134-
cursor: pointer;
135-
}
136-
137-
.arch-close:hover,
138-
.arch-close:focus {
139-
color: #bbb;
140-
}
141-
142-
#archCaption {
143-
margin: 20px auto 0;
144-
display: block;
145-
width: 80%;
146-
max-width: 700px;
147-
text-align: center;
148-
color: #ccc;
149-
padding: 10px 0;
106+
.arch-label a:hover {
107+
text-decoration: underline;
150108
}
151109

152110
@media (max-width: 768px) {
@@ -156,29 +114,6 @@ Here's how the two products differ architecturally while sharing the same founda
156114
}
157115
</style>
158116

159-
<script>
160-
function openArchModal(element) {
161-
var modal = document.getElementById("archModal");
162-
var modalImg = document.getElementById("archModalImg");
163-
var captionText = document.getElementById("archCaption");
164-
165-
modal.style.display = "flex";
166-
modalImg.src = element.querySelector('img').src;
167-
captionText.innerHTML = element.querySelector('img').alt;
168-
}
169-
170-
function closeArchModal() {
171-
document.getElementById("archModal").style.display = "none";
172-
}
173-
174-
// Close modal with Escape key
175-
document.addEventListener('keydown', function(event) {
176-
if (event.key === "Escape") {
177-
closeArchModal();
178-
}
179-
});
180-
</script>
181-
182117
Both architectures share:
183118
- **Next.js** frontend with **NextAuth** authentication
184119
- **FastAPI** backend integrated with **Stripe** for payments
@@ -198,7 +133,7 @@ Products are forked and branded directly in source code—colors, logos, messagi
198133
- **Full Control**: Every pixel customizable
199134
- **Stripe Integration**: Product-specific metadata tags (`product=sig_agent`, `product=doc_router`)
200135

201-
```typescript
136+
```tsx
202137
// SigAgent.AI branding in Layout.tsx
203138
export const metadata = {
204139
title: 'SigAgent.AI',

‎webdev/excalidraw.md‎

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ title: Excalidraw
1010
* [GitHub Repository](https://github.com/excalidraw/excalidraw)
1111

1212
#### Tutorials
13-
* [Getting Started with Excalidraw](https://docs.excalidraw.com/docs/getting-started)
1413
* [React Integration Guide](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration) - Integration with React, Next.js (App Router and Pages Router), and browser usage
1514
* YouTube: [Excalidraw React Integration Tutorial](https://www.youtube.com/watch?v=pUv_3UmoGYM)
1615
* YouTube: [Building Collaborative Whiteboard with Excalidraw](https://www.youtube.com/watch?v=LXlE1y5PQsk)
@@ -49,13 +48,81 @@ title: Excalidraw
4948
* Supports decompression for easier editing in Markdown view
5049

5150
#### Integration with Static Sites (Jekyll/GitHub Pages)
51+
52+
**Option 1: Static Export (Recommended for most cases)**
5253
* Export diagrams as PNG (for complex visuals) or SVG (for scalable diagrams)
5354
* Place exports in `assets/images/` directory
5455
* Embed in Markdown using standard image syntax or HTML with Tailwind classes
55-
* Can embed interactive Excalidraw via iframe (requires external dependency)
5656
* JSON format allows programmatic manipulation if needed
5757
* Simpler integration than Figma - direct export, smaller file sizes
5858

59+
**Option 2: Interactive Browser Integration**
60+
* Full interactive Excalidraw embedded directly in GitHub Pages
61+
* Uses ES modules and import maps (works in modern browsers)
62+
* Files created:
63+
* `packages/excalidraw/index.js` - Initialization script
64+
* `excalidraw-demo.html` - Standalone demo page
65+
* Usage:
66+
```html
67+
<!DOCTYPE html>
68+
<html>
69+
<head>
70+
<title>Excalidraw in browser</title>
71+
<meta charset="UTF-8" />
72+
<link rel="stylesheet"
73+
href="https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.css" />
74+
<script>
75+
window.EXCALIDRAW_ASSET_PATH = "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";
76+
</script>
77+
<script type="importmap">
78+
{
79+
"imports": {
80+
"react": "https://esm.sh/react@19.0.0",
81+
"react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime",
82+
"react-dom": "https://esm.sh/react-dom@19.0.0",
83+
"react-dom/client": "https://esm.sh/react-dom@19.0.0/client"
84+
}
85+
}
86+
</script>
87+
</head>
88+
<body>
89+
<div class="container">
90+
<h1>Excalidraw Embed Example</h1>
91+
<div id="app"></div>
92+
</div>
93+
<script type="module" src="/packages/excalidraw/index.js"></script>
94+
</body>
95+
</html>
96+
```
97+
* Demo page: Visit `/excalidraw-demo.html` after deployment
98+
* Loading Excalidraw files: Add a `?file=` parameter to load existing `.excalidraw` files:
99+
```html
100+
<!-- Load a specific Excalidraw file -->
101+
<iframe
102+
src="/excalidraw-demo.html?file=/assets/js/sig_agent_architecture.excalidraw"
103+
width="100%"
104+
height="600px"
105+
frameborder="0"
106+
style="border: 1px solid #e0e0e0; border-radius: 8px;">
107+
</iframe>
108+
```
109+
* Embedding in Jekyll pages: Use an iframe to embed the interactive editor:
110+
```html
111+
<iframe
112+
src="/excalidraw-demo.html"
113+
width="100%"
114+
height="600px"
115+
frameborder="0"
116+
style="border: 1px solid #e0e0e0; border-radius: 8px;">
117+
</iframe>
118+
```
119+
* Customization: Edit `packages/excalidraw/index.js` to add features like:
120+
* Loading initial drawings from JSON
121+
* Saving drawings to localStorage
122+
* Export functionality
123+
* Collaboration features
124+
* Custom event handlers
125+
59126
#### Comparison with Figma
60127
* **Excalidraw**: Lightweight, hand-drawn style, faster for quick sketches. Simpler integration, smaller file sizes. Better for rapid ideation. JSON format is human-readable and editable
61128
* **Figma**: Full-featured design platform, polished UI/UX, better for professional designs and collaboration. More complex, requires export steps for static sites. Proprietary binary format

0 commit comments

Comments
 (0)