fix: use preEscapedText for inline JS script content
H.toHtml was escaping the JS content, causing the script tag to be empty. H.preEscapedText preserves the text as-is, which is correct for script tags.
This commit is contained in:
+117
-118
@@ -208,121 +208,122 @@ page title content =
|
||||
|
||||
-- | Inline JavaScript for client-side search + sort rendering.
|
||||
searchJs :: Text
|
||||
searchJs = T.unlines
|
||||
[ "(function(){"
|
||||
, "'use strict';"
|
||||
, ""
|
||||
, "const recipes = JSON.parse(document.getElementById('roux-recipe-data').textContent);"
|
||||
, "const errors = JSON.parse(document.getElementById('roux-errors-data').textContent);"
|
||||
, "const listEl = document.getElementById('roux-recipe-list');"
|
||||
, "const searchEl = document.getElementById('roux-search');"
|
||||
, ""
|
||||
, "function getSortMode() {"
|
||||
, " const h = location.hash.slice(1);"
|
||||
, " if (h === 'tags') return 'tags';"
|
||||
, " if (h === 'course') return 'course';"
|
||||
, " return 'alpha';"
|
||||
, "}"
|
||||
, ""
|
||||
, "function render() {"
|
||||
, " const query = searchEl.value.toLowerCase().trim();"
|
||||
, " const mode = getSortMode();"
|
||||
, " let filtered = recipes;"
|
||||
, " if (query) {"
|
||||
, " filtered = recipes.filter(r =>"
|
||||
, " r.title.toLowerCase().includes(query) ||"
|
||||
, " r.filename.toLowerCase().includes(query)"
|
||||
, " );"
|
||||
, " }"
|
||||
, " let html = '';"
|
||||
, " if (query || mode === 'alpha') {"
|
||||
, " const sorted = [...filtered].sort((a, b) => a.title.localeCompare(b.title));"
|
||||
, " html = renderFlatList(sorted);"
|
||||
, " } else if (mode === 'tags') {"
|
||||
, " html = renderByTags(filtered);"
|
||||
, " } else if (mode === 'course') {"
|
||||
, " html = renderByCourse(filtered);"
|
||||
, " }"
|
||||
, " if (errors.length > 0) {"
|
||||
, " html += '<h3>Unparseable recipes</h3><ul>';"
|
||||
, " errors.forEach(e => { html += '<li>' + escapeHtml(e.title) + '</li>'; });"
|
||||
, " html += '</ul>';"
|
||||
, " }"
|
||||
, " listEl.innerHTML = html;"
|
||||
, "}"
|
||||
, ""
|
||||
, "function renderFlatList(items) {"
|
||||
, " if (items.length === 0) return '<p>No recipes found.</p>';"
|
||||
, " let html = '<ul class=\'roux-recipes\'>';"
|
||||
, " items.forEach(r => {"
|
||||
, " html += '<li><a href=\"/recipes/' + encodeURIComponent(r.filename) + '\">' + escapeHtml(r.title) + '</a></li>';"
|
||||
, " });"
|
||||
, " html += '</ul>';"
|
||||
, " return html;"
|
||||
, "}"
|
||||
, ""
|
||||
, "function renderByTags(items) {"
|
||||
, " const tagMap = {};"
|
||||
, " items.forEach(r => {"
|
||||
, " if (r.tags.length === 0) return;"
|
||||
, " r.tags.forEach(t => {"
|
||||
, " if (!tagMap[t]) tagMap[t] = [];"
|
||||
, " tagMap[t].push(r);"
|
||||
, " });"
|
||||
, " });"
|
||||
, " const tags = Object.keys(tagMap).sort((a,b) => a.localeCompare(b));"
|
||||
, " if (tags.length === 0) return '<p>No tagged recipes.</p>';"
|
||||
, " let html = '';"
|
||||
, " tags.forEach(t => {"
|
||||
, " const sorted = tagMap[t].sort((a,b) => a.title.localeCompare(b.title));"
|
||||
, " html += '<h3>' + escapeHtml(t) + '</h3>';"
|
||||
, " html += renderFlatList(sorted);"
|
||||
, " });"
|
||||
, " return html;"
|
||||
, "}"
|
||||
, ""
|
||||
, "function renderByCourse(items) {"
|
||||
, " const courseMap = {};"
|
||||
, " items.forEach(r => {"
|
||||
, " if (!r.course) return;"
|
||||
, " if (!courseMap[r.course]) courseMap[r.course] = [];"
|
||||
, " courseMap[r.course].push(r);"
|
||||
, " });"
|
||||
, " const courses = Object.keys(courseMap).sort((a,b) => a.localeCompare(b));"
|
||||
, " if (courses.length === 0) return '<p>No recipes with course metadata.</p>';"
|
||||
, " let html = '';"
|
||||
, " courses.forEach(c => {"
|
||||
, " const sorted = courseMap[c].sort((a,b) => a.title.localeCompare(b.title));"
|
||||
, " html += '<h3>' + escapeHtml(c) + '</h3>';"
|
||||
, " html += renderFlatList(sorted);"
|
||||
, " });"
|
||||
, " return html;"
|
||||
, "}"
|
||||
, ""
|
||||
, "function escapeHtml(s) {"
|
||||
, " const d = document.createElement('div');"
|
||||
, " d.appendChild(document.createTextNode(s));"
|
||||
, " return d.innerHTML;"
|
||||
, "}"
|
||||
, ""
|
||||
, "searchEl.addEventListener('input', render);"
|
||||
, "window.addEventListener('hashchange', render);"
|
||||
, ""
|
||||
, "// Set active tab style based on hash"
|
||||
, "function updateActiveNav() {"
|
||||
, " const mode = getSortMode();"
|
||||
, " document.querySelectorAll('.roux-navbar a').forEach(a => {"
|
||||
, " a.classList.toggle('active', a.getAttribute('href') === '#' + mode);"
|
||||
, " });"
|
||||
, "}"
|
||||
, "window.addEventListener('hashchange', updateActiveNav);"
|
||||
, ""
|
||||
, "// Initial render -- setting hash triggers hashchange"
|
||||
, "if (!location.hash) location.hash = 'alpha';"
|
||||
, "else { updateActiveNav(); render(); }"
|
||||
, ""
|
||||
, "})();"
|
||||
]
|
||||
searchJs =
|
||||
T.unlines
|
||||
[ "(function(){"
|
||||
, "'use strict';"
|
||||
, ""
|
||||
, "const recipes = JSON.parse(document.getElementById('roux-recipe-data').textContent);"
|
||||
, "const errors = JSON.parse(document.getElementById('roux-errors-data').textContent);"
|
||||
, "const listEl = document.getElementById('roux-recipe-list');"
|
||||
, "const searchEl = document.getElementById('roux-search');"
|
||||
, ""
|
||||
, "function getSortMode() {"
|
||||
, " const h = location.hash.slice(1);"
|
||||
, " if (h === 'tags') return 'tags';"
|
||||
, " if (h === 'course') return 'course';"
|
||||
, " return 'alpha';"
|
||||
, "}"
|
||||
, ""
|
||||
, "function render() {"
|
||||
, " const query = searchEl.value.toLowerCase().trim();"
|
||||
, " const mode = getSortMode();"
|
||||
, " let filtered = recipes;"
|
||||
, " if (query) {"
|
||||
, " filtered = recipes.filter(r =>"
|
||||
, " r.title.toLowerCase().includes(query) ||"
|
||||
, " r.filename.toLowerCase().includes(query)"
|
||||
, " );"
|
||||
, " }"
|
||||
, " let html = '';"
|
||||
, " if (query || mode === 'alpha') {"
|
||||
, " const sorted = [...filtered].sort((a, b) => a.title.localeCompare(b.title));"
|
||||
, " html = renderFlatList(sorted);"
|
||||
, " } else if (mode === 'tags') {"
|
||||
, " html = renderByTags(filtered);"
|
||||
, " } else if (mode === 'course') {"
|
||||
, " html = renderByCourse(filtered);"
|
||||
, " }"
|
||||
, " if (errors.length > 0) {"
|
||||
, " html += '<h3>Unparseable recipes</h3><ul>';"
|
||||
, " errors.forEach(e => { html += '<li>' + escapeHtml(e.title) + '</li>'; });"
|
||||
, " html += '</ul>';"
|
||||
, " }"
|
||||
, " listEl.innerHTML = html;"
|
||||
, "}"
|
||||
, ""
|
||||
, "function renderFlatList(items) {"
|
||||
, " if (items.length === 0) return '<p>No recipes found.</p>';"
|
||||
, " let html = '<ul class=\'roux-recipes\'>';"
|
||||
, " items.forEach(r => {"
|
||||
, " html += '<li><a href=\"/recipes/' + encodeURIComponent(r.filename) + '\">' + escapeHtml(r.title) + '</a></li>';"
|
||||
, " });"
|
||||
, " html += '</ul>';"
|
||||
, " return html;"
|
||||
, "}"
|
||||
, ""
|
||||
, "function renderByTags(items) {"
|
||||
, " const tagMap = {};"
|
||||
, " items.forEach(r => {"
|
||||
, " if (r.tags.length === 0) return;"
|
||||
, " r.tags.forEach(t => {"
|
||||
, " if (!tagMap[t]) tagMap[t] = [];"
|
||||
, " tagMap[t].push(r);"
|
||||
, " });"
|
||||
, " });"
|
||||
, " const tags = Object.keys(tagMap).sort((a,b) => a.localeCompare(b));"
|
||||
, " if (tags.length === 0) return '<p>No tagged recipes.</p>';"
|
||||
, " let html = '';"
|
||||
, " tags.forEach(t => {"
|
||||
, " const sorted = tagMap[t].sort((a,b) => a.title.localeCompare(b.title));"
|
||||
, " html += '<h3>' + escapeHtml(t) + '</h3>';"
|
||||
, " html += renderFlatList(sorted);"
|
||||
, " });"
|
||||
, " return html;"
|
||||
, "}"
|
||||
, ""
|
||||
, "function renderByCourse(items) {"
|
||||
, " const courseMap = {};"
|
||||
, " items.forEach(r => {"
|
||||
, " if (!r.course) return;"
|
||||
, " if (!courseMap[r.course]) courseMap[r.course] = [];"
|
||||
, " courseMap[r.course].push(r);"
|
||||
, " });"
|
||||
, " const courses = Object.keys(courseMap).sort((a,b) => a.localeCompare(b));"
|
||||
, " if (courses.length === 0) return '<p>No recipes with course metadata.</p>';"
|
||||
, " let html = '';"
|
||||
, " courses.forEach(c => {"
|
||||
, " const sorted = courseMap[c].sort((a,b) => a.title.localeCompare(b.title));"
|
||||
, " html += '<h3>' + escapeHtml(c) + '</h3>';"
|
||||
, " html += renderFlatList(sorted);"
|
||||
, " });"
|
||||
, " return html;"
|
||||
, "}"
|
||||
, ""
|
||||
, "function escapeHtml(s) {"
|
||||
, " const d = document.createElement('div');"
|
||||
, " d.appendChild(document.createTextNode(s));"
|
||||
, " return d.innerHTML;"
|
||||
, "}"
|
||||
, ""
|
||||
, "searchEl.addEventListener('input', render);"
|
||||
, "window.addEventListener('hashchange', render);"
|
||||
, ""
|
||||
, "// Set active tab style based on hash"
|
||||
, "function updateActiveNav() {"
|
||||
, " const mode = getSortMode();"
|
||||
, " document.querySelectorAll('.roux-navbar a').forEach(a => {"
|
||||
, " a.classList.toggle('active', a.getAttribute('href') === '#' + mode);"
|
||||
, " });"
|
||||
, "}"
|
||||
, "window.addEventListener('hashchange', updateActiveNav);"
|
||||
, ""
|
||||
, "// Initial render -- setting hash triggers hashchange"
|
||||
, "if (!location.hash) location.hash = 'alpha';"
|
||||
, "else { updateActiveNav(); render(); }"
|
||||
, ""
|
||||
, "})();"
|
||||
]
|
||||
|
||||
-- | Render the recipe index page -- shell with embedded JSON + JS rendering.
|
||||
indexPage :: SortMode -> [Idx.RecipeInfo] -> ByteString
|
||||
@@ -349,7 +350,7 @@ indexPage _mode recipes =
|
||||
H.script ! A.id "roux-errors-data" ! A.type_ "application/json" $
|
||||
H.toHtml (decodeUtf8 (LB.toStrict (encode (Prelude.map Idx.toSearchEntry (filterBad recipes)))))
|
||||
-- Inline JS
|
||||
H.script ! A.type_ "text/javascript" $ H.toHtml searchJs
|
||||
H.script ! A.type_ "text/javascript" $ H.preEscapedText searchJs
|
||||
where
|
||||
filterOk = filter (isRight . Idx.riRecipe)
|
||||
filterBad = filter (isLeft . Idx.riRecipe)
|
||||
@@ -634,5 +635,3 @@ isLeft _ = False
|
||||
-- | Check if an 'Either' is 'Right'.
|
||||
isRight :: Either a b -> Bool
|
||||
isRight = not . isLeft
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user