joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement syntactic sugar and site-specific discovery config

Browse Source 
- Add syntactic sugar for container transformation: .insertr containers → children get .insertr
- Fix discovery auto-running when disabled with site-specific config loading
- Add comprehensive styling test examples for HTML attribute preservation
- Include test input for syntactic sugar validation
- Update discovery defaults to respect developer intent (disabled by default)
This commit is contained in:
Joakim
2025-09-19 15:57:28 +02:00
parent 2a0915dda0
commit 00c2ba34e6
9 changed files with 959 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
demos/simple/index.html
View File

@@ -1,19 +1,183 @@
<!DOCTYPE html><html><head>
<title>Simple Test</title>
<script src="http://localhost:8080/insertr.js" data-insertr-injected="true" data-site-id="simple" data-api-endpoint="http://localhost:8080/api/content" data-mock-auth="true" data-debug="true"></script></head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insertr Styling Test Examples</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
line-height: 1.6;
}
.example {
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 1.5rem;
margin: 2rem 0;
background: #f9fafb;
}
.example h3 {
color: #374151;
margin-top: 0;
font-size: 1.1rem;
}
.example-description {
background: #fef3c7;
padding: 0.75rem;
border-radius: 4px;
font-size: 0.9rem;
color: #92400e;
margin-bottom: 1rem;
}
/* Styled elements for testing */
.emph {
color: #dc2626;
font-weight: 700;
}
.fancy {
color: #7c3aed;
text-decoration: none;
border-bottom: 2px solid #a855f7;
}
.fancy:hover {
background: #ede9fe;
}
.highlight {
background: #fef08a;
padding: 0 0.25rem;
border-radius: 3px;
}
.brand {
color: #059669;
font-weight: 800;
text-transform: uppercase;
}
.btn {
background: #3b82f6;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
}
.btn:hover {
background: #2563eb;
}
.card {
background: white;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 1.5rem;
}
.title {
color: #1f2937;
font-size: 1.25rem;
margin: 0 0 0.5rem 0;
}
</style>
</head>
<body>
<h1 class="insertr" data-content-id="index-h1-e0f926" data-content-type="text">Welcome, you!!</h1>
<p class="insertr" data-content-id="index-p-b376ed" data-content-type="markdown">This is a <strong>test</strong> paragraph with <a href="/">a link</a>.</p>
<div>
<h2 class="insertr" data-content-id="index-h2-d8622b" data-content-type="text">Section Title</h2>
<p class="insertr" data-content-id="index-p-2-daa8f5" data-content-type="markdown">Another paragraph here.</p>
<button class="insertr" data-content-id="index-button-41ef19" data-content-type="link">Click Me</button>
<h1 class="insertr">Insertr Styling Preservation Test Examples</h1>
<p class="insertr">These examples test how well Insertr preserves styling during the markdown editing process.</p>
<!-- Example 1: Styled Strong Element -->
<div class="example">
<h3>Example 1: Styled Strong Element</h3>
<div class="example-description">
Tests preservation of class styling on bold elements. Original has "emph" class for red styling.
</div>
<p class="insertr">Hello <strong class="emph">world</strong> and welcome!</p>
</div>
<!-- Example 2: Styled Link Element -->
<div class="example">
<h3>Example 2: Styled Link Element</h3>
<div class="example-description">
Tests preservation of link classes and styles. The "fancy" class adds purple color and bottom border.
</div>
<p class="insertr">Visit our <a class="fancy" href="#about">about page</a> for more info.</p>
</div>
<div class="insertr-demo-gate" style="position: fixed; top: 20px; right: 20px; z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, sans-serif;">
<button class="insertr-gate insertr-demo-gate-btn insertr" style="background: #4f46e5; color: white; border: none; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; user-select: none;" onmouseover="this.style.background=&#39;#4338ca&#39;; this.style.transform=&#39;translateY(-2px)&#39;; this.style.boxShadow=&#39;0 6px 16px rgba(79, 70, 229, 0.4)&#39;" onmouseout="this.style.background=&#39;#4f46e5&#39;; this.style.transform=&#39;translateY(0)&#39;; this.style.boxShadow=&#39;0 4px 12px rgba(79, 70, 229, 0.3)&#39;" data-content-id="index-insertr-gate-61c9aa" data-content-type="link">
<span style="font-size: 16px;">✏️</span>
<span>Edit Site</span>
</button>
</div></body></html>
<!-- Example 3: Mixed Content Types -->
<div class="example">
<h3>Example 3: Mixed Content with Complex Attributes</h3>
<div class="example-description">
Tests preservation of rel, target attributes and multiple styled elements.
</div>
<p class="insertr">Visit <a href="https://example.com" rel="noopener" target="_blank" class="fancy">our site</a> for <span class="highlight">amazing</span> content!</p>
</div>
<!-- Example 4: Multiple Styled Elements -->
<div class="example">
<h3>Example 4: Multiple Styled Elements</h3>
<div class="example-description">
Tests handling of multiple different styled elements in one paragraph.
</div>
<p class="insertr">Welcome to <strong class="brand">Acme Corp</strong> where we create <span class="highlight">innovative</span> solutions for <em class="emph">modern</em> businesses.</p>
</div>
<!-- Example 5: Button in Text -->
<div class="example">
<h3>Example 5: Button with Data Attributes</h3>
<div class="example-description">
Tests preservation of button elements and data attributes for analytics.
</div>
<p class="insertr">Ready to start? <button class="btn" data-action="signup" data-analytics="cta-main">Sign Up Now</button> and begin your journey!</p>
</div>
<!-- Example 6: Nested Styled Elements -->
<div class="example">
<h3>Example 6: Nested Styled Elements</h3>
<div class="example-description">
Tests complex nesting with multiple levels of styling.
</div>
<p class="insertr">Check out our <a href="#products" class="fancy">latest <strong class="emph">products</strong> and <span class="highlight">deals</span></a> today!</p>
</div>
<!-- Example 7: Card Structure (Complex) -->
<div class="example">
<h3>Example 7: Complex Structure</h3>
<div class="example-description">
Tests editing of a more complex structure with multiple elements. This might be too complex for markdown.
</div>
<div class="insertr card">
<h3 class="title">Welcome Back!</h3>
<p>Hello <strong class="brand">valued</strong> customer, ready to explore our <span class="highlight">new features</span>?</p>
</div>
</div>
<!-- Example 8: Simple Text for Comparison -->
<div class="example">
<h3>Example 8: Simple Text (Control)</h3>
<div class="example-description">
Simple text without any styling - should work perfectly with markdown.
</div>
<p class="insertr">This is just plain text with some basic markdown formatting like bold and italic.</p>
</div>
<!-- Example 9: Link with Class and ID -->
<div class="example">
<h3>Example 9: Link with Multiple Attributes</h3>
<div class="example-description">
Tests preservation of multiple attributes including id, class, and title.
</div>
<p class="insertr">Need help? Contact our <a id="support-link" class="fancy" href="mailto:support@example.com" title="Email our support team">support team</a> anytime.</p>
</div>
</body>
</html>