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

feat: implement collision-free lightweight hierarchical ID generation

Browse Source 
- Replace content-hash based ID generation with position-based algorithm
- Use file + element identity + position index + hash for unique IDs
- Generate human-readable prefixes (e.g. index-lead-, index-p-2-)
- Add collision-resistant hash suffixes for guaranteed uniqueness
- Update Generate() to accept filePath parameter for context
- Fix ID collisions where hero and footer elements shared same ID
- Clean demo site files removing all data-content-id attributes
- Preserve insertr-gate elements for authentication functionality

Results: Hero gets 'index-lead-2-fc31f2', footer gets 'index-p-13-99fd13'
No more content cross-contamination between different elements.
This commit is contained in:
Joakim
2025-09-11 17:38:15 +02:00
parent cfb744f091
commit 72bd31b626
5 changed files with 132 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
demo-site/about.html
View File

@@ -9,7 +9,7 @@
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="container">
<h1 class="logo insertr" data-content-id="hero-title-c70343" data-content-type="text">Acme Consulting</h1> <h1 class="logo insertr" data-content-id="about-logo-bf9558" data-content-type="text">Acme Consulting</h1>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="index.html">Home</a></li> <li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li> <li><a href="about.html">About</a></li>
@@ -22,15 +22,15 @@
<!-- Hero Section --> <!-- Hero Section -->
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<h1 class="insertr" data-content-id="hero-title-c70343" data-content-type="text">About Acme Consulting</h1> <h1 class="insertr" data-content-id="about-h1-b0851a" data-content-type="text">About Acme Consulting</h1>
<p class="lead insertr" data-content-id="footer-text-a44170" data-content-type="markdown">We&#39;re a team of experienced consultants dedicated to helping small businesses thrive in today&#39;s competitive marketplace.</p> <p class="lead insertr" data-content-id="about-lead-ccc316" data-content-type="markdown">We&#39;re a team of experienced consultants dedicated to helping small businesses thrive in today&#39;s competitive marketplace.</p>
</div> </div>
</section> </section>
<!-- Story Section --> <!-- Story Section -->
<section class="services"> <section class="services">
<div class="container"> <div class="container">
<h2 class="insertr" data-content-id="testimonial-subtitle-648b88" data-content-type="text">Our Story</h2> <h2 class="insertr" data-content-id="about-h2-246854" data-content-type="text">Our Story</h2>
<div class="insertr-group"> <div class="insertr-group">
<p>Founded in 2020, Acme Consulting emerged from a simple observation: small businesses needed access to the same high-quality strategic advice that large corporations receive, but in a format that was accessible, affordable, and actionable.</p> <p>Founded in 2020, Acme Consulting emerged from a simple observation: small businesses needed access to the same high-quality strategic advice that large corporations receive, but in a format that was accessible, affordable, and actionable.</p>
@@ -44,8 +44,8 @@
<!-- Team Section --> <!-- Team Section -->
<section class="cta"> <section class="cta">
<div class="container"> <div class="container">
<h2 class="insertr" data-content-id="subtitle-ba6444" data-content-type="text">Our Team</h2> <h2 class="insertr" data-content-id="about-h2-2-f16ab1" data-content-type="text">Our Team</h2>
<p class="insertr" data-content-id="text-8b3502" data-content-type="markdown">We&#39;re a diverse group of strategists, operators, and technology experts united by our passion for helping businesses succeed.</p> <p class="insertr" data-content-id="about-p-0e26bc" data-content-type="markdown">We&#39;re a diverse group of strategists, operators, and technology experts united by our passion for helping businesses succeed.</p>
<div class="services-grid" style="margin-top: 3rem;"> <div class="services-grid" style="margin-top: 3rem;">
<div class="service-card"> <div class="service-card">
@@ -76,19 +76,19 @@
<!-- Values Section --> <!-- Values Section -->
<section class="testimonial"> <section class="testimonial">
<div class="container"> <div class="container">
<h2 class="insertr" style="margin-bottom: 2rem;" data-content-id="testimonial-subtitle-dce35b" data-content-type="text">Our Values</h2> <h2 class="insertr" style="margin-bottom: 2rem;" data-content-id="about-h2-3-893efa" data-content-type="text">Our Values</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; text-align: left;"> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; text-align: left;">
<div> <div>
<h3 class="insertr" data-content-id="testimonial-heading-957cc8" data-content-type="text">Client-First</h3> <h3 class="insertr" data-content-id="about-h3-4-07ce1b" data-content-type="text">Client-First</h3>
<p class="insertr" data-content-id="testimonial-text-f7e46f" data-content-type="markdown">Every recommendation we make is designed with your specific business context and goals in mind.</p> <p class="insertr" data-content-id="about-p-2-9f60dd" data-content-type="markdown">Every recommendation we make is designed with your specific business context and goals in mind.</p>
</div> </div>
<div> <div>
<h3 class="insertr" data-content-id="testimonial-heading-fd4293" data-content-type="text">Practical Solutions</h3> <h3 class="insertr" data-content-id="about-h3-5-07ce1b" data-content-type="text">Practical Solutions</h3>
<p class="insertr" data-content-id="testimonial-text-c12023" data-content-type="markdown">We believe in strategies that you can actually implement with your current resources and capabilities.</p> <p class="insertr" data-content-id="about-p-3-9f60dd" data-content-type="markdown">We believe in strategies that you can actually implement with your current resources and capabilities.</p>
</div> </div>
<div> <div>
<h3 class="insertr" data-content-id="testimonial-heading-957cc8" data-content-type="text">Long-term Partnership</h3> <h3 class="insertr" data-content-id="about-h3-6-07ce1b" data-content-type="text">Long-term Partnership</h3>
<p class="insertr" data-content-id="testimonial-text-45dae2" data-content-type="markdown">We&#39;re not just consultants; we&#39;re partners in your business success for the long haul.</p> <p class="insertr" data-content-id="about-p-4-9f60dd" data-content-type="markdown">We&#39;re not just consultants; we&#39;re partners in your business success for the long haul.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -97,7 +97,7 @@
<!-- Test Section for Insertr Features --> <!-- Test Section for Insertr Features -->
<section class="testimonial"> <section class="testimonial">
<div class="container"> <div class="container">
<h2 class="insertr" data-content-id="testimonial-subtitle-648b88" data-content-type="text">Feature Tests</h2> <h2 class="insertr" data-content-id="about-h2-4-893efa" data-content-type="text">Feature Tests</h2>
<!-- Test 1: .insertr container expansion (should make each p individually editable) --> <!-- Test 1: .insertr container expansion (should make each p individually editable) -->
<div style="margin-bottom: 2rem;"> <div style="margin-bottom: 2rem;">
@@ -124,8 +124,8 @@
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<p class="insertr" data-content-id="footer-text-a2b6a8" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p> <p class="insertr" data-content-id="about-p-8-c093f3" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="footer-text-a44170" data-content-type="markdown">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | <button class="insertr-gate" style="background: none; border: 1px solid #ccc; padding: 4px 8px; margin-left: 10px; border-radius: 3px; font-size: 11px;">🔧 Edit</button></p> <p class="insertr" data-content-id="about-p-9-c093f3" data-content-type="markdown">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | <button class="insertr-gate" style="background: none; border: 1px solid #ccc; padding: 4px 8px; margin-left: 10px; border-radius: 3px; font-size: 11px;">🔧 Edit</button></p>
</div> </div>
</footer> </footer>

38
demo-site/index.html
View File

@@ -9,7 +9,7 @@
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="container">
<h1 class="logo insertr" data-content-id="navbar-logo-2b10ad" data-content-type="text">Acme Consulting</h1> <h1 class="logo insertr" data-content-id="index-logo-c176ba" data-content-type="text">Acme Consulting</h1>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="index.html">Home</a></li> <li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li> <li><a href="about.html">About</a></li>
@@ -22,30 +22,30 @@
<!-- Hero Section --> <!-- Hero Section -->
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<h1 class="insertr" data-content-id="hero-title-7cfeea" data-content-type="text">Transform Your Business with Expert Consulting</h1> <h1 class="insertr" data-content-id="index-h1-1b83cf" data-content-type="text">Transform Your Business with Expert Consulting</h1>
<p class="lead insertr" data-content-id="footer-text-d73f32" data-content-type="markdown"><strong>We</strong> help small businesses grow through strategic planning, process optimization, and digital transformation. Our team brings 15+ years of experience to drive your success. Superb</p> <p class="lead insertr" data-content-id="index-lead-c7070a" data-content-type="markdown"><strong>We help small</strong> 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="link-d11ae9" data-content-type="link">Get Started Today?</a> <a href="contact.html" class="btn-primary insertr" data-content-id="index-btn-primary-088a84" data-content-type="link">Get Started Today</a>
</div> </div>
</section> </section>
<!-- Services Section --> <!-- Services Section -->
<section class="services"> <section class="services">
<div class="container"> <div class="container">
<h2 class="insertr" data-content-id="subtitle-d0ebd3" data-content-type="text">Our Services</h2> <h2 class="insertr" data-content-id="index-h2-7e9e73" data-content-type="text">Our Services</h2>
<p class="section-subtitle insertr" data-content-id="services-title-66a36e" data-content-type="markdown">Comprehensive solutions tailored to your business needs</p> <p class="section-subtitle insertr" data-content-id="index-section-subtitle-bf0683" data-content-type="markdown">Comprehensive solutions tailored to your business needs. We are flexible as willow sticks</p>
<div class="services-grid"> <div class="services-grid">
<div class="service-card"> <div class="service-card">
<h3 class="insertr" data-content-id="services-heading-0d6ef9" data-content-type="text">Strategic Planning</h3> <h3 class="insertr" data-content-id="index-h3-2c6736" data-content-type="text">Strategic Planning</h3>
<p class="insertr" data-content-id="services-text-3a002f" data-content-type="markdown">Develop clear roadmaps and actionable strategies that align with your business goals and drive sustainable growth.</p> <p class="insertr" data-content-id="index-p-a935d2" data-content-type="markdown">Develop clear roadmaps and actionable strategies that align with your business goals and drive sustainable growth.</p>
</div> </div>
<div class="service-card"> <div class="service-card">
<h3 class="insertr" data-content-id="services-heading-fdebeb" data-content-type="text">Operations Optimization</h3> <h3 class="insertr" data-content-id="index-h3-2-2c6736" data-content-type="text">Operations Optimization</h3>
<p class="insertr" data-content-id="services-text-31ddbd" data-content-type="markdown">Streamline processes, reduce costs, and improve efficiency through proven methodologies and best practices.</p> <p class="insertr" data-content-id="index-p-2-a935d2" data-content-type="markdown">Streamline processes, reduce costs, and improve efficiency through proven methodologies and best practices.</p>
</div> </div>
<div class="service-card"> <div class="service-card">
<h3 class="insertr" data-content-id="services-heading-0d6ef9" data-content-type="text">Digital Transformation</h3> <h3 class="insertr" data-content-id="index-h3-3-2c6736" data-content-type="text">Digital Transformation</h3>
<p class="insertr" data-content-id="services-text-bd1837" data-content-type="markdown">Modernize your technology stack and digital presence to compete effectively in today&#39;s marketplace.</p> <p class="insertr" data-content-id="index-p-3-a935d2" data-content-type="markdown">Modernize your technology stack and digital presence to compete effectively in today&#39;s marketplace.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -55,8 +55,8 @@
<section class="testimonial"> <section class="testimonial">
<div class="container"> <div class="container">
<blockquote> <blockquote>
<p class="insertr" data-content-id="testimonial-text-69de1a" data-content-type="markdown">&#34;Acme Consulting transformed our operations completely. We saw a 40% increase in efficiency within 6 months of implementing their recommendations.&#34;</p> <p class="insertr" data-content-id="index-p-4-0a9466" data-content-type="markdown">&#34;Acme Consulting transformed our operations completely. We saw a 40% increase in efficiency within 6 months of implementing their recommendations.&#34;</p>
<cite class="insertr" data-content-id="testimonial-content-dfd023" data-content-type="text">Sarah Johnson, CEO of TechStart Inc.</cite> <cite class="insertr" data-content-id="index-cite-24152c" data-content-type="text">Sarah Johnson, CEO of TechStart Inc.</cite>
</blockquote> </blockquote>
</div> </div>
</section> </section>
@@ -64,17 +64,17 @@
<!-- Call to Action --> <!-- Call to Action -->
<section class="cta"> <section class="cta">
<div class="container"> <div class="container">
<h2 class="insertr" data-content-id="subtitle-d0ebd3" data-content-type="text">Ready to Transform Your Business?</h2> <h2 class="insertr" data-content-id="index-h2-2-9b9baa" data-content-type="text">Ready to Transform Your Business?</h2>
<p class="insertr" data-content-id="text-a588c5" data-content-type="markdown">Contact us today for a free consultation and discover how we can help you achieve your goals.</p> <p class="insertr" data-content-id="index-p-5-e960fe" data-content-type="markdown">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="link-d11ae9" data-content-type="link">Schedule Consultation</a> <a href="contact.html" class="btn-primary insertr" data-content-id="index-btn-primary-2-a33c64" data-content-type="link">Schedule Consultation</a>
</div> </div>
</section> </section>
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<p class="insertr" data-content-id="footer-text-a2b6a8-22fbf8" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p> <p class="insertr" data-content-id="index-p-6-9b47e7" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="footer-text-d73f32" data-content-type="markdown"><strong>We</strong> help small businesses grow through strategic planning, process optimization, and digital transformation. Our team brings 15+ years of experience to drive your success. Superb</p> <p class="insertr" data-content-id="index-p-7-9b47e7" data-content-type="markdown">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | Located in downtown Springfield | <button class="insertr-gate" style="background: none; border: 1px solid #ccc; padding: 4px 8px; margin-left: 10px; border-radius: 3px; font-size: 11px;">🔧 Edit</button></p>
</div> </div>
</footer> </footer>

3
internal/api/handlers.go
View File

@@ -713,6 +713,7 @@ func (h *ContentHandler) generateContentID(ctx *ElementContext) string {
} }
// Use existing parser ID generator // Use existing parser ID generator
// For API-generated IDs, use a placeholder filePath since we don't have file context
idGenerator := parser.NewIDGenerator() idGenerator := parser.NewIDGenerator()
return idGenerator.Generate(virtualNode) return idGenerator.Generate(virtualNode, "api-generated")
} }

204
internal/parser/id_generator.go
View File

@@ -1,169 +1,133 @@
package parser package parser
import ( import (
"crypto/sha1" "crypto/sha256"
"encoding/hex"
"fmt" "fmt"
"regexp" "path/filepath"
"strings" "strings"
"golang.org/x/net/html" "golang.org/x/net/html"
) )
// IDGenerator generates unique content IDs for elements // IDGenerator generates unique content IDs for elements using lightweight hierarchical approach
type IDGenerator struct { type IDGenerator struct {
usedIDs map[string]bool usedIDs map[string]bool
elementCounts map[string]int // Track counts per file+type for indexing
} }
// NewIDGenerator creates a new ID generator // NewIDGenerator creates a new ID generator
func NewIDGenerator() *IDGenerator { func NewIDGenerator() *IDGenerator {
return &IDGenerator{ return &IDGenerator{
usedIDs: make(map[string]bool), usedIDs: make(map[string]bool),
elementCounts: make(map[string]int),
} }
} }
// Generate creates a content ID for an HTML element // Generate creates a content ID for an HTML element using lightweight hierarchical approach
func (g *IDGenerator) Generate(node *html.Node) string { func (g *IDGenerator) Generate(node *html.Node, filePath string) string {
context := g.getSemanticContext(node) // 1. File context (minimal)
purpose := g.getPurpose(node) fileName := g.getFileName(filePath)
contentHash := g.getContentHash(node)
baseID := g.createBaseID(context, purpose, contentHash) // 2. Element identity (lightweight)
finalID := g.ensureUnique(baseID) tag := strings.ToLower(node.Data)
primaryClass := g.getPrimaryClass(node)
// 3. Position context (simple)
elementKey := g.getElementKey(fileName, tag, primaryClass)
index := g.getElementIndex(elementKey)
// 4. Build readable prefix
prefix := g.buildPrefix(fileName, tag, primaryClass, index)
// 5. Add collision-resistant suffix
signature := g.createSignature(node, filePath)
hash := sha256.Sum256([]byte(signature))
suffix := hex.EncodeToString(hash[:3])
finalID := fmt.Sprintf("%s-%s", prefix, suffix)
// Ensure uniqueness (should be guaranteed by hash, but safety check)
g.usedIDs[finalID] = true
return finalID return finalID
} }
// getSemanticContext determines the semantic context from parent elements // getFileName extracts filename without extension for ID prefix
func (g *IDGenerator) getSemanticContext(node *html.Node) string { func (g *IDGenerator) getFileName(filePath string) string {
// Walk up the tree to find semantic containers base := filepath.Base(filePath)
parent := node.Parent return strings.TrimSuffix(base, filepath.Ext(base))
for parent != nil && parent.Type == html.ElementNode { }
classes := GetClasses(parent)
// Check for common semantic section classes // getPrimaryClass returns the first meaningful (non-insertr) CSS class
for _, class := range []string{"hero", "services", "nav", "navbar", "footer", "about", "contact", "testimonial"} { func (g *IDGenerator) getPrimaryClass(node *html.Node) string {
if ContainsClass(classes, class) { classes := GetClasses(node)
for _, class := range classes {
if class != "insertr" && class != "" {
return class return class
} }
} }
return ""
// Check for semantic HTML elements
switch parent.Data {
case "nav":
return "nav"
case "header":
return "header"
case "footer":
return "footer"
case "main":
return "main"
case "aside":
return "aside"
} }
parent = parent.Parent // getElementKey creates a key for tracking element counts
func (g *IDGenerator) getElementKey(fileName, tag, primaryClass string) string {
if primaryClass != "" {
return fmt.Sprintf("%s-%s", fileName, primaryClass)
}
return fmt.Sprintf("%s-%s", fileName, tag)
} }
return "content" // getElementIndex returns the position index for this element type in the file
func (g *IDGenerator) getElementIndex(elementKey string) int {
g.elementCounts[elementKey]++
return g.elementCounts[elementKey]
} }
// getPurpose determines the purpose/role of the element // buildPrefix creates human-readable prefix for the ID
func (g *IDGenerator) getPurpose(node *html.Node) string { func (g *IDGenerator) buildPrefix(fileName, tag, primaryClass string, index int) string {
tag := strings.ToLower(node.Data) var parts []string
classes := GetClasses(node) parts = append(parts, fileName)
// Check for specific CSS classes that indicate purpose if primaryClass != "" {
for _, class := range classes { parts = append(parts, primaryClass)
switch { } else {
case strings.Contains(class, "title"): parts = append(parts, tag)
return "title"
case strings.Contains(class, "headline"):
return "headline"
case strings.Contains(class, "description"):
return "description"
case strings.Contains(class, "subtitle"):
return "subtitle"
case strings.Contains(class, "cta"):
return "cta"
case strings.Contains(class, "button"):
return "button"
case strings.Contains(class, "logo"):
return "logo"
case strings.Contains(class, "lead"):
return "lead"
}
} }
// Infer purpose from HTML tag // Only add index if it's not the first element of this type
switch tag { if index > 1 {
case "h1": parts = append(parts, fmt.Sprintf("%d", index))
return "title"
case "h2":
return "subtitle"
case "h3", "h4", "h5", "h6":
return "heading"
case "p":
return "text"
case "a":
return "link"
case "button":
return "button"
default:
return "content"
}
} }
// getContentHash creates a short hash of the content for ID generation return strings.Join(parts, "-")
func (g *IDGenerator) getContentHash(node *html.Node) string {
text := extractTextContent(node)
// Create hash of the text content
hash := fmt.Sprintf("%x", sha1.Sum([]byte(text)))
// Return first 6 characters for brevity
return hash[:6]
} }
// createBaseID creates the base ID from components // createSignature creates a unique signature for collision resistance
func (g *IDGenerator) createBaseID(context, purpose, contentHash string) string { func (g *IDGenerator) createSignature(node *html.Node, filePath string) string {
parts := []string{} // Minimal signature for uniqueness
tag := node.Data
classes := strings.Join(GetClasses(node), " ")
domPath := g.getSimpleDOMPath(node)
// Add context if meaningful return fmt.Sprintf("%s|%s|%s|%s", filePath, domPath, tag, classes)
if context != "content" {
parts = append(parts, context)
} }
// Add purpose // getSimpleDOMPath creates a simple DOM path for uniqueness
parts = append(parts, purpose) func (g *IDGenerator) getSimpleDOMPath(node *html.Node) string {
var pathParts []string
current := node
depth := 0
// Always add content hash for uniqueness for current != nil && current.Type == html.ElementNode && depth < 5 {
parts = append(parts, contentHash) part := current.Data
if classes := GetClasses(current); len(classes) > 0 && classes[0] != "insertr" {
baseID := strings.Join(parts, "-") part += "." + classes[0]
}
// Clean up the ID pathParts = append([]string{part}, pathParts...)
baseID = regexp.MustCompile(`-+`).ReplaceAllString(baseID, "-") current = current.Parent
baseID = strings.Trim(baseID, "-") depth++
// Ensure it's not empty
if baseID == "" {
baseID = fmt.Sprintf("content-%s", contentHash)
} }
return baseID return strings.Join(pathParts, ">")
}
// ensureUnique makes sure the ID is unique by adding a suffix if needed
func (g *IDGenerator) ensureUnique(baseID string) string {
if !g.usedIDs[baseID] {
g.usedIDs[baseID] = true
return baseID
}
// If base ID is taken, add a hash suffix
hash := fmt.Sprintf("%x", sha1.Sum([]byte(baseID)))[:6]
uniqueID := fmt.Sprintf("%s-%s", baseID, hash)
g.usedIDs[uniqueID] = true
return uniqueID
} }

2
internal/parser/parser.go
View File

@@ -132,7 +132,7 @@ func (p *Parser) createElement(node *html.Node, filePath string, classes []strin
// Resolve content ID (existing or generated) // Resolve content ID (existing or generated)
contentID, hasExistingID := p.resolveContentID(node) contentID, hasExistingID := p.resolveContentID(node)
if !hasExistingID { if !hasExistingID {
contentID = p.idGenerator.Generate(node) contentID = p.idGenerator.Generate(node, filePath)
} }
// Detect content type // Detect content type