Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't force inlining of svgs #157

Merged
merged 3 commits into from
Jun 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion docs/src/.vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,12 @@ export default defineConfig({
cleanUrls: true,
outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
head: [['link', { rel: 'icon', href: '/DocumenterVitepress.jl/dev/favicon.ico' }]],

vite: {
build: {
assetsInlineLimit: 0, // so we can tell whether we have created inlined images or not, we don't let vite inline them
}
},

markdown: {
math: true,
config(md) {
Expand Down
16 changes: 12 additions & 4 deletions docs/src/mime_examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,20 @@ MediaOutput{MIME"image/png"}(read(joinpath(pathof(DocumenterVitepress) |> dirnam
MediaOutput{MIME"image/jpeg"}(read(download("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Felis_silvestris_silvestris.jpg/519px-Felis_silvestris_silvestris.jpg")))
```

```@example mime-examples
MediaOutput{MIME"image/svg+xml"}("https://upload.wikimedia.org/wikipedia/commons/6/6c/SVG_Simple_Icon.svg" |> download |> read)
```
Vite automatically inlines assets under 4KB by default, if this causes issues with your SVG files you can disable this behavior by adding the following to your vitepress configuration:

::: info config.mts

vite: {
build: {
assetsInlineLimit: 0, // so we can tell whether we have created inlined images or not, we don't let vite inline them
}
},

:::

```@example mime-examples
MediaOutput{MIME"image/gif"}(read(download("https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif")))
MediaOutput{MIME"image/svg+xml"}("https://upload.wikimedia.org/wikipedia/commons/6/6c/SVG_Simple_Icon.svg" |> download |> read)
```

```@example mime-examples
Expand Down
34 changes: 24 additions & 10 deletions src/writer.jl
Original file line number Diff line number Diff line change
Expand Up @@ -476,20 +476,34 @@
println(io, element)
end

function render_mime(io::IO, mime::MIME"image/svg+xml", node, element, page, doc; kwargs...)
# NOTE: It seems that we can't simply save the SVG images as a file and include them
function render_mime(io::IO, mime::MIME"image/svg+xml", node, element, page, doc; md_output_path, kwargs...)
# NOTE: It seems that we can't always simply save the SVG images as a file and include them
# as browsers seem to need to have the xmlns attribute set in the <svg> tag if you
# want to include it with <img>. However, setting that attribute is up to the code
# creating the SVG image.
image_text = element
# Additionally, Vitepress complains about the XML version and encoding string below,
# so we just remove this bad hombre!
bad_hombre_string = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" |> lowercase
location = findfirst(bad_hombre_string, lowercase(image_text))
if !isnothing(location) # couldn't figure out how to do this in one line - maybe regex? A question for later though.
image_text = replace(image_text, image_text[location] => "")
has_xml_namespace = match(r"<svg[^>].*?xmlns\s*=", element) !== nothing

if has_xml_namespace
filename = String(rand('a':'z', 7))
write(
joinpath(
doc.user.build,
md_output_path,
dirname(relpath(page.build, doc.user.build)),
"$(filename).svg"
),
element
)
println(io, "![]($(filename).svg)")
else
# Vitepress complains about the XML version and encoding string when used as an inline svg
# so we remove that
image_text = replace(
element,
r"<\?xml.*?>\s*"i => ""
)
println(io, "<img src=\"data:image/svg+xml;base64," * base64encode(image_text) * "\"/>")
end
println(io, "<img src=\"data:image/svg+xml;base64," * base64encode(image_text) * "\"/>")
end

function render_mime(io::IO, mime::MIME"image/png", node, element, page, doc; md_output_path, kwargs...)
Expand Down Expand Up @@ -665,7 +679,7 @@
# Code blocks
function render(io::IO, mime::MIME"text/plain", node::Documenter.MarkdownAST.Node, code::MarkdownAST.CodeBlock, page, doc; kwargs...)
if startswith(code.info, "@")
@warn """

Check warning on line 682 in src/writer.jl

View workflow job for this annotation

GitHub Actions / build

DocumenterVitepress: un-expanded `@doctest` block encountered on page src/code_example.md. The first few lines of code in this node are: ``` julia> 1 + 1 2 ```
DocumenterVitepress: un-expanded `$(code.info)` block encountered on page $(page.source).
The first few lines of code in this node are:
```
Expand Down
Loading