github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-06 17:49:07 -05:00
Code Issues 85 Packages Projects Releases 24 Wiki Activity

feat(ui): implement dynamic callout icon paths for custom numbered blocks

Browse Source 
- Add dynamic CSS generation in foldbox.lua to read icon paths from filter-metadata
- Support configurable icon-path and icon-format from YAML configuration
- Remove hard-coded CSS paths in favor of dynamic generation
- Enables proper icon display for callout-quiz, callout-resource, and callout-chapter types
- Icons now use assets/images/icons/callouts/ directory as configured
- Maintains compatibility for both HTML and PDF formats
This commit is contained in:
Vijay Janapa Reddi
2025-08-04 20:40:38 -04:00
parent 6e4351963c
commit a96f72436f
2 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
book/_extensions/mlsysbook-ext/custom-numbered-blocks/style/foldbox.css
View File

@@ -183,25 +183,7 @@ details.callout-code {
--title-background-color: rgba(60, 72, 88, 0.08);
}
/* Specific icons */
details.callout-quiz-question > summary::before {
background-image: url("icons/icon_callout-quiz-question.png");
}
details.callout-quiz-answer > summary::before {
background-image: url("icons/icon_callout-quiz-answer.png");
}
details.callout-chapter-connection > summary::before {
background-image: url("icons/icon_callout-chapter-connection.png");
}
details.callout-resource-slides > summary::before {
background-image: url("icons/Icon_callout-resource-slides.png");
}
details.callout-resource-videos > summary::before {
background-image: url("icons/Icon_callout-resource-videos.png");
}
details.callout-resource-exercises > summary::before {
background-image: url("icons/icon_callout-resource-exercises.png");
}
/* Specific icons - dynamically generated by foldbox.lua based on filter-metadata configuration */
/* Content body - Quarto-aligned styling */
details.fbx-default > div,

35
book/_extensions/mlsysbook-ext/custom-numbered-blocks/style/foldbox.lua
View File

@@ -62,14 +62,40 @@ insertPreamble = function(doc, classDefs, fmt)
-- Set icon path from filter-metadata configuration if available
local meta = doc.meta
local filterMetadata = meta["filter-metadata"]
local iconCSS = ""
if filterMetadata and filterMetadata["mlsysbook-ext/custom-numbered-blocks"] then
local config = filterMetadata["mlsysbook-ext/custom-numbered-blocks"]
if config["icon-path"] then
local iconPath = str(config["icon-path"])
local iconFormat = str(config["icon-format"] or "pdf")
-- Define the commands before including foldbox.tex
quarto.doc.include_text("in-header", "\\newcommand{\\fbxIconPath}{" .. iconPath .. "}")
quarto.doc.include_text("in-header", "\\newcommand{\\fbxIconFormat}{" .. iconFormat .. "}")
local iconFormat = str(config["icon-format"] or "png")
if fmt == "html" then
-- Generate dynamic CSS for icon paths
iconCSS = "<style>\n"
iconCSS = iconCSS .. "details.callout-quiz-question > summary::before {\n"
iconCSS = iconCSS .. " background-image: url(\"" .. iconPath .. "/icon_callout-quiz-question." .. iconFormat .. "\");\n"
iconCSS = iconCSS .. "}\n"
iconCSS = iconCSS .. "details.callout-quiz-answer > summary::before {\n"
iconCSS = iconCSS .. " background-image: url(\"" .. iconPath .. "/icon_callout-quiz-answer." .. iconFormat .. "\");\n"
iconCSS = iconCSS .. "}\n"
iconCSS = iconCSS .. "details.callout-chapter-connection > summary::before {\n"
iconCSS = iconCSS .. " background-image: url(\"" .. iconPath .. "/icon_callout-chapter-connection." .. iconFormat .. "\");\n"
iconCSS = iconCSS .. "}\n"
iconCSS = iconCSS .. "details.callout-resource-slides > summary::before {\n"
iconCSS = iconCSS .. " background-image: url(\"" .. iconPath .. "/icon_callout-resource-slides." .. iconFormat .. "\");\n"
iconCSS = iconCSS .. "}\n"
iconCSS = iconCSS .. "details.callout-resource-videos > summary::before {\n"
iconCSS = iconCSS .. " background-image: url(\"" .. iconPath .. "/icon_callout-resource-videos." .. iconFormat .. "\");\n"
iconCSS = iconCSS .. "}\n"
iconCSS = iconCSS .. "details.callout-resource-exercises > summary::before {\n"
iconCSS = iconCSS .. " background-image: url(\"" .. iconPath .. "/icon_callout-resource-exercises." .. iconFormat .. "\");\n"
iconCSS = iconCSS .. "}\n"
iconCSS = iconCSS .. "</style>"
elseif fmt == "pdf" then
-- Define the commands before including foldbox.tex
quarto.doc.include_text("in-header", "\\newcommand{\\fbxIconPath}{" .. iconPath .. "}")
quarto.doc.include_text("in-header", "\\newcommand{\\fbxIconFormat}{" .. iconFormat .. "}")
end
end
end
@@ -120,6 +146,7 @@ insertPreamble = function(doc, classDefs, fmt)
quarto.doc.include_file("in-header", 'style/foldbox.tex')
end
if preamblestuff then quarto.doc.include_text("in-header", preamblestuff) end
if iconCSS ~= "" then quarto.doc.include_text("in-header", iconCSS) end
return(doc)
end
}