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

Implement element-level editing with semantic field detection

Browse Source 
Replace container-based blob editing approach with individual element editing. Each .insertr element now gets appropriate field type (text, textarea, link) based on HTML tag and classes. Provides much better UX with separate inputs for headlines, paragraphs, and buttons while preserving HTML structure and styling.
This commit is contained in:
Joakim
2025-08-30 17:01:25 +02:00
parent e8c0de233d
commit a13546aac2
3 changed files with 288 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
demo-site/index.html
View File

@@ -11,9 +11,7 @@
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<div class="insertr" data-content-id="nav-logo">
<h1 class="logo">Acme Consulting</h1>
</div>
<h1 class="logo insertr" data-content-id="nav-logo">Acme Consulting</h1>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
@@ -30,40 +28,30 @@
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="insertr" data-content-id="hero-content" data-content-type="rich">
<h1>Transform Your Business with Expert Consulting</h1>
<p class="lead">We help small businesses grow through strategic planning, process optimization, and digital transformation. Our team brings 15+ years of experience to drive your success.</p>
<a href="contact.html" class="btn-primary">Get Started Today</a>
</div>
<h1 class="insertr" data-content-id="hero-headline">Transform Your Business with Expert Consulting</h1>
<p class="lead insertr" data-content-id="hero-description">We help small businesses grow through strategic planning, process optimization, and digital transformation. Our team brings 15+ years of experience to drive your success.</p>
<a href="contact.html" class="btn-primary insertr" data-content-id="hero-cta">Get Started Today</a>
</div>
</section>
<!-- Services Section -->
<section class="services">
<div class="container">
<div class="insertr" data-content-id="services-title">
<h2>Our Services</h2>
<p class="section-subtitle">Comprehensive solutions tailored to your business needs</p>
</div>
<h2 class="insertr" data-content-id="services-title">Our Services</h2>
<p class="section-subtitle insertr" data-content-id="services-subtitle">Comprehensive solutions tailored to your business needs</p>
<div class="services-grid">
<div class="service-card">
<div class="insertr" data-content-id="service-strategy" data-content-type="rich">
<h3>Strategic Planning</h3>
<p>Develop clear roadmaps and actionable strategies that align with your business goals and drive sustainable growth.</p>
</div>
<h3 class="insertr" data-content-id="service-strategy-title">Strategic Planning</h3>
<p class="insertr" data-content-id="service-strategy-desc">Develop clear roadmaps and actionable strategies that align with your business goals and drive sustainable growth.</p>
</div>
<div class="service-card">
<div class="insertr" data-content-id="service-operations" data-content-type="rich">
<h3>Operations Optimization</h3>
<p>Streamline processes, reduce costs, and improve efficiency through proven methodologies and best practices.</p>
</div>
<h3 class="insertr" data-content-id="service-operations-title">Operations Optimization</h3>
<p class="insertr" data-content-id="service-operations-desc">Streamline processes, reduce costs, and improve efficiency through proven methodologies and best practices.</p>
</div>
<div class="service-card">
<div class="insertr" data-content-id="service-digital" data-content-type="rich">
<h3>Digital Transformation</h3>
<p>Modernize your technology stack and digital presence to compete effectively in today's marketplace.</p>
</div>
<h3 class="insertr" data-content-id="service-digital-title">Digital Transformation</h3>
<p class="insertr" data-content-id="service-digital-desc">Modernize your technology stack and digital presence to compete effectively in today's marketplace.</p>
</div>
</div>
</div>
@@ -72,39 +60,31 @@
<!-- Testimonial Section -->
<section class="testimonial">
<div class="container">
<div class="insertr" data-content-id="testimonial-content" data-content-type="rich">
<blockquote>
<p>"Acme Consulting transformed our operations completely. We saw a 40% increase in efficiency within 6 months of implementing their recommendations."</p>
<cite>Sarah Johnson, CEO of TechStart Inc.</cite>
</blockquote>
</div>
<blockquote>
<p class="insertr" data-content-id="testimonial-quote">"Acme Consulting transformed our operations completely. We saw a 40% increase in efficiency within 6 months of implementing their recommendations."</p>
<cite class="insertr" data-content-id="testimonial-author">Sarah Johnson, CEO of TechStart Inc.</cite>
</blockquote>
</div>
</section>
<!-- Call to Action -->
<section class="cta">
<div class="container">
<div class="insertr" data-content-id="cta-content">
<h2>Ready to Transform Your Business?</h2>
<p>Contact us today for a free consultation and discover how we can help you achieve your goals.</p>
<a href="contact.html" class="btn-primary">Schedule Consultation</a>
</div>
<h2 class="insertr" data-content-id="cta-title">Ready to Transform Your Business?</h2>
<p class="insertr" data-content-id="cta-description">Contact us today for a free consultation and discover how we can help you achieve your goals.</p>
<a href="contact.html" class="btn-primary insertr" data-content-id="cta-button">Schedule Consultation</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="insertr" data-content-id="footer-info">
<p>&copy; 2024 Acme Consulting Services. All rights reserved.</p>
<p>📧 info@acmeconsulting.com | 📞 (555) 123-4567</p>
</div>
<p class="insertr" data-content-id="footer-copyright">&copy; 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="footer-contact">📧 info@acmeconsulting.com | 📞 (555) 123-4567</p>
</div>
</footer>
<!-- Insertr JavaScript Library -->
<script src="https://cdn.jsdelivr.net/npm/marked@16.2.1/lib/marked.umd.js"></script>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="insertr/insertr.js"></script>
</body>
</html>