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

Compile inline HTML with esbuild #1991

Closed
wants to merge 1 commit into from
Closed
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
1 change: 1 addition & 0 deletions assets/build/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const formatters = [
formatter: 'html',
outdir: path.resolve('../formatters/html/dist'),
entryPoints: [
'js/entry/html_inline.js',
'js/entry/html.js',
'css/entry/html-elixir.css',
'css/entry/html-erlang.css'
Expand Down
3 changes: 3 additions & 0 deletions assets/js/constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// Constants separated to allow importing into html_inline.js without
// bringing in other code.
export const SETTINGS_KEY = 'ex_doc:settings'
18 changes: 18 additions & 0 deletions assets/js/entry/html_inline.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// CAREFUL
// This file is inlined into each HTML document.
// Only code that must be executed ASAP belongs here.
// Imports should only bring in inlinable constants.
// Check compiled output to make sure no unnecessary code is imported.
import { SETTINGS_KEY } from '../constants'

// Immediately apply night mode preference to avoid a flash effect
try {
const {theme} = JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}')

if (theme === 'dark' ||
((theme === 'system' || theme == null) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.body.classList.add('dark')
}
} catch (error) { }
2 changes: 1 addition & 1 deletion assets/js/settings-store.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const SETTINGS_KEY = 'ex_doc:settings'
import { SETTINGS_KEY } from './constants'

const DEFAULT_SETTINGS = {
// Whether to show tooltips on function/module links
Expand Down
24 changes: 16 additions & 8 deletions lib/ex_doc/formatter/html/templates.ex
Original file line number Diff line number Diff line change
Expand Up @@ -192,19 +192,27 @@ defmodule ExDoc.Formatter.HTML.Templates do
defp sidebar_type(:livemd), do: "extras"
defp sidebar_type(:extra), do: "extras"

def asset_rev(output, pattern) do
defp resolve_asset(output, pattern) do
output = Path.expand(output)

output
|> Path.join(pattern)
|> Path.wildcard()
|> relative_asset(output, pattern)
matches =
output
|> Path.join(pattern)
|> Path.wildcard()

case matches do
[] -> raise("could not find matching #{output}/#{pattern}")
[asset | _] -> asset
end
end

defp relative_asset([], output, pattern),
do: raise("could not find matching #{output}/#{pattern}")
def asset_rev(output, pattern) do
resolve_asset(output, pattern) |> Path.relative_to(output)
end

defp relative_asset([h | _], output, _pattern), do: Path.relative_to(h, output)
def asset_inline(output, pattern) do
resolve_asset(output, pattern) |> File.read!()
end

# TODO: Move link_headings and friends to html.ex or even to autolinking code,
# so content is built with it upfront instead of added at the template level.
Expand Down
14 changes: 1 addition & 13 deletions lib/ex_doc/formatter/html/templates/head_template.eex
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,4 @@
<%= before_closing_head_tag(config, :html) %>
</head>
<body class="sidebar-closed">
<script>
<% # Immediately apply night mode preference to avoid a flash effect %>
try {
var settings = JSON.parse(localStorage.getItem('ex_doc:settings') || '{}');

if (settings.theme === 'dark' ||
((settings.theme === 'system' || settings.theme == null) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.body.classList.add('dark')
}
} catch (error) { }
</script>
<script><%= asset_inline config.output, "dist/html_inline-*.js" %></script>
Loading