Packages
phoenix_duskmoon
9.9.1
9.9.2
9.9.1
9.9.0
9.8.0
9.7.1
9.7.0
9.6.4
9.6.3
9.6.2
9.6.1
9.6.0
9.5.4
9.5.3
9.5.2
9.5.1
9.5.0
9.4.3
9.4.2
9.4.1
9.4.0
9.3.0
9.2.0
9.1.4
9.1.3
9.1.1
9.1.1-rc.1
retired
9.0.1
9.0.0-rc.3
9.0.0-rc.2
9.0.0-rc.1
8.0.0
7.2.1
7.2.0
7.1.3
7.1.2
7.1.1
6.3.2
6.3.1
6.3.0
6.2.0
6.1.3
6.1.2
6.1.1
6.1.0
6.0.10
6.0.9
6.0.8
6.0.7
6.0.6
6.0.5
6.0.4
6.0.3
6.0.2
6.0.1
6.0.0
5.2.0-beta.5
5.2.0-beta.4
5.2.0-beta.3
5.2.0-beta.2
5.2.0-beta.1
5.1.0
5.0.6
5.0.5
5.0.4
5.0.3
5.0.2
5.0.1
5.0.0
4.6.6
4.6.5
4.6.4
4.6.3
4.6.2
4.6.1
4.6.0
4.5.2
4.5.1
4.5.0
4.4.4
4.4.3
4.4.2
4.4.1
4.4.0
4.3.2
4.3.1
4.3.0
4.2.0
4.1.1
4.1.0
4.0.0
Duskmoon UI component library for Phoenix LiveView
Current section
Files
Jump to
Current section
Files
lib/phoenix_duskmoon/component/data_display/markdown/front_matter.ex
defmodule PhoenixDuskmoon.Component.DataDisplay.Markdown.FrontMatter do
@moduledoc """
MDEx plugin that renders YAML front matter as a labeled code block.
MDEx parses configured front matter into an `MDEx.FrontMatter` node, which
its HTML renderer otherwise omits. This plugin preserves the front matter as
escaped, visible YAML without treating it as component metadata.
"""
alias MDEx.Document
@block_style "box-sizing: border-box; margin-block-end: 1rem; border: 1px solid var(--color-outline, #8b949e); border-inline-start: 4px solid var(--color-warning, #f59e0b); border-radius: 0.5rem; overflow: hidden;"
@header_style "display: flex; align-items: center; padding: 0.5rem 1rem; background-color: var(--color-surface-container-highest, #b8b4b0); border-bottom: 1px solid var(--color-outline, #8b949e);"
@language_style "color: var(--color-warning, #d97706); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;"
@content_style "background-color: #0d1117; overflow-x: auto;"
@pre_style "margin: 0; padding: 1rem; background: transparent; border-radius: 0; color: #e6edf3; overflow-x: auto;"
@code_style "background: transparent; padding: 0; color: inherit; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; font-size: 0.875rem; line-height: 1.6;"
@doc """
Attaches the front-matter rendering transformation to an MDEx document.
"""
@spec attach(Document.t(), keyword()) :: Document.t()
def attach(document, _options \\ []) do
Document.append_steps(document, front_matter: &render_front_matter/1)
end
defp render_front_matter(document) do
Document.update_nodes(document, MDEx.FrontMatter, fn
%MDEx.FrontMatter{literal: literal, sourcepos: sourcepos} ->
front_matter_node(yaml_content(literal), sourcepos)
end)
end
defp yaml_content(literal) do
[_opening | lines] = String.split(literal, ~r/\r\n|\n|\r/, trim: false)
[_closing | reversed_content] =
lines
|> Enum.reverse()
|> Enum.drop_while(&(&1 == ""))
reversed_content
|> Enum.reverse()
|> Enum.join("\n")
end
defp front_matter_node(yaml, sourcepos) do
escaped_yaml =
yaml
|> Phoenix.HTML.html_escape()
|> Phoenix.HTML.safe_to_string()
%MDEx.Raw{
literal: """
<div class="markdown-front-matter code-block" data-language="yaml" style="#{@block_style}">
<div class="code-header" style="#{@header_style}"><span class="code-language" style="#{@language_style}">YAML</span></div>
<div class="code-content" style="#{@content_style}"><pre lang="yaml" style="#{@pre_style}"><code class="language-yaml" style="#{@code_style}">#{escaped_yaml}</code></pre></div>
</div>
""",
sourcepos: sourcepos
}
end
end