[Web] Generation of h1-5, p, hr

This commit is contained in:
Araozu 2023-03-30 16:19:48 -05:00
parent 4d49eea7ea
commit c3f2aa27e2
5 changed files with 41 additions and 6 deletions

View File

@ -18,7 +18,7 @@ impl Printable for Heading {
let html_fragment_text = utils::to_html_fragment(&self.get_text());
format!(
"<h{} id=\"{}\"><a href=\"#{}\">{}</a></h{}>",
"<h{} id=\"{}\" class=\"heading-linked target:underline decoration-js-color decoration-1\"><a href=\"#{}\">{}</a></h{}>",
self.depth, html_fragment_text, html_fragment_text, text, self.depth
)
} else {

View File

@ -3,6 +3,7 @@ use markdown::mdast::Node;
mod heading;
mod root;
mod text;
mod paragraph;
pub trait Printable {
fn to_html(&self) -> String;
@ -15,6 +16,8 @@ impl Printable for Node {
Node::Root(root) => root.to_html(),
Node::Heading(heading) => heading.to_html(),
Node::Text(text) => text.to_html(),
Node::Paragraph(p) => p.to_html(),
Node::ThematicBreak(_) => String::from("<hr />"),
_ => format!("Not implemented<br>{:?}", self),
}
}
@ -24,6 +27,8 @@ impl Printable for Node {
Node::Root(root) => root.get_text(),
Node::Heading(heading) => heading.get_text(),
Node::Text(text) => text.get_text(),
Node::Paragraph(p) => p.get_text(),
Node::ThematicBreak(_) => panic!("<hr> cannot return its raw text"),
_ => String::from(""),
}
}

View File

@ -0,0 +1,21 @@
use markdown::mdast::Paragraph;
use super::Printable;
impl Printable for Paragraph {
fn to_html(&self) -> String {
let mut result = Vec::<String>::new();
for node in &self.children {
result.push(node.to_html())
}
let text: String = result.into_iter().collect();
format!("<p>{}</p>", text)
}
fn get_text(&self) -> String {
panic!("Paragraph cannot return its raw text")
}
}

View File

@ -185,10 +185,6 @@ code, pre {
margin-bottom: 1.5rem;
}
.marked h2:target {
text-decoration: underline;
text-decoration-color: var(--c5);
}
.marked h3 {
font-size: 1.75rem;
@ -197,9 +193,11 @@ code, pre {
margin-bottom: 1.25rem;
text-decoration: underline;
/*
position: sticky;
top: 0;
background-color: var(--bg-color);
*/
}
.marked h4 {
@ -302,3 +300,14 @@ code, pre {
transform: scale(1);
}
}
/* Used by headers generated at src/generator/heading.rs */
.heading-linked :hover::after{
color: var(--c1);
content: "#";
display: inline-block;
font-size: 0.7em;
line-height: 1;
margin-left: 4px;
text-decoration: none;
}

View File

@ -16,7 +16,7 @@
</head>
<body>
<div class="marked p-4">
<div class="marked p-4 mx-auto max-w-screen-lg">
{{markdown}}
</div>