Joakim
00255cb105
- Add class-based template comparison to differentiate styling variants - Implement template deduplication based on structure + class signatures - Add GetCollectionTemplate method to repository interface and implementations - Fix collection item creation by replacing unimplemented CreateCollectionItemAtomic - Add template selection modal with auto-default selection in frontend - Generate meaningful template names from distinctive CSS classes - Fix unique constraint violations with timestamp-based collection item IDs - Add collection templates API endpoint for frontend template fetching - Update simple demo with featured/compact/dark testimonial variants for testing
269 lines
8.7 KiB
HTML
269 lines
8.7 KiB
HTML
<!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: #059660;
|
|
text-decoration: none;
|
|
border-bottom: 2px solid #a855f7;
|
|
}
|
|
|
|
.fancy:visited {
|
|
color: #509;
|
|
border: 1px solid red
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Testimonials styling for .insertr-add demo */
|
|
.testimonials {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.testimonial-item {
|
|
background: white;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.testimonial-item blockquote {
|
|
font-style: italic;
|
|
font-size: 1.1rem;
|
|
color: #374151;
|
|
margin: 0 0 1rem 0;
|
|
quotes: """ """;
|
|
}
|
|
|
|
.testimonial-item blockquote:before {
|
|
content: open-quote;
|
|
font-size: 1.5rem;
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.testimonial-item blockquote:after {
|
|
content: close-quote;
|
|
font-size: 1.5rem;
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.testimonial-item cite {
|
|
display: block;
|
|
text-align: right;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
font-style: normal;
|
|
}
|
|
|
|
.testimonial-item cite:before {
|
|
content: "— ";
|
|
}
|
|
|
|
/* Styling variants for template differentiation testing */
|
|
.testimonial-item.featured {
|
|
border-left: 4px solid #3b82f6;
|
|
background: #eff6ff;
|
|
}
|
|
|
|
.testimonial-item.compact {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.testimonial-item.dark {
|
|
background: #1f2937;
|
|
color: white;
|
|
}
|
|
|
|
.testimonial-item.dark blockquote {
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.testimonial-item.dark cite {
|
|
color: #9ca3af;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
<!-- 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: Card Structure (Complex) -->
|
|
<div class="example">
|
|
<h3>Example 6: 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 7: Link with Class and ID -->
|
|
<div class="example">
|
|
<h3>Example 7: 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>
|
|
|
|
<!-- Example 8: Collection Management (.insertr-add) -->
|
|
<div class="example">
|
|
<h3>Example 8: Dynamic Collection (.insertr-add)</h3>
|
|
<div class="example-description">
|
|
Tests dynamic add/remove/reorder functionality. In edit mode, you should see "+ Add Item" button and item controls.
|
|
</div>
|
|
<div class="testimonials insertr-add">
|
|
<div class="testimonial-item">
|
|
<blockquote class="insertr">Not all that is gold does glitter</blockquote>
|
|
<cite class="insertr">Tolkien</cite>
|
|
</div>
|
|
<div class="testimonial-item featured">
|
|
<blockquote class="insertr">The journey of a thousand miles begins with one step</blockquote>
|
|
<cite class="insertr">Lao Tzu</cite>
|
|
</div>
|
|
<div class="testimonial-item compact dark">
|
|
<blockquote class="insertr">Innovation distinguishes between a leader and a follower</blockquote>
|
|
<cite class="insertr">Steve Jobs</cite>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add login gate for testing -->
|
|
<footer style="margin-top: 3rem; padding: 2rem; border-top: 1px solid #e5e7eb; text-align: center;">
|
|
<p>© 2024 Insertr Demo Site</p>
|
|
<a href="#" class="insertr-gate" style="color: #6b7280; text-decoration: none; font-size: 0.9rem;">Admin Login</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|