+
+ {post_name}
+
+ }
}
- }
- >
-
-
-
{post_name}
-
-
-
- to
-
-
+ }))
+ )
+ }}
}
}
diff --git a/src/utils.rs b/src/utils.rs
index 8f0cc56a..0e4a4ada 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -16,6 +16,9 @@ pub use get_time_since::get_time_since;
pub mod traits;
pub mod types;
+pub mod markdown;
+pub use markdown::markdown_to_html;
+
#[cfg(feature = "ssr")]
mod get_client_and_session;
use crate::constants::AUTH_COOKIE;
diff --git a/src/utils/markdown.rs b/src/utils/markdown.rs
new file mode 100644
index 00000000..be954e6f
--- /dev/null
+++ b/src/utils/markdown.rs
@@ -0,0 +1,23 @@
+use markdown_it::{
+ plugins::{cmark, extra},
+ MarkdownIt,
+};
+use std::sync::LazyLock;
+
+pub fn markdown_to_html(text: &str) -> String {
+ static MARKDOWN_PARSER: LazyLock = LazyLock::new(|| {
+ let mut parser = MarkdownIt::new();
+
+ cmark::add(&mut parser);
+ extra::add(&mut parser);
+ markdown_it_sup::add(&mut parser);
+ markdown_it_sub::add(&mut parser);
+ markdown_it_ruby::add(&mut parser);
+ markdown_it_block_spoiler::add(&mut parser);
+ markdown_it_footnote::add(&mut parser);
+
+ parser
+ });
+
+ MARKDOWN_PARSER.parse(text).xrender()
+}
diff --git a/style/tailwind.css b/style/tailwind.css
index b5c61c95..ccd760cd 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -1,3 +1,141 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+.markdown-content {
+ @apply bg-base-200 mt-4 p-5 rounded space-y-4;
+}
+
+.markdown-content h1 {
+ @apply text-2xl font-black;
+}
+
+.markdown-content h2 {
+ @apply text-2xl font-bold;
+}
+
+.markdown-content h3 {
+ @apply text-xl font-black;
+}
+
+.markdown-content h4 {
+ @apply text-xl font-bold;
+}
+
+.markdown-content h5 {
+ @apply text-lg font-black;
+}
+
+.markdown-content h6 {
+ @apply text-lg font-bold;
+}
+
+.markdown-content code {
+ @apply font-mono bg-neutral text-neutral-content p-1 rounded-md not-italic font-medium slashed-zero text-sm;
+}
+
+.markdown-content blockquote {
+ @apply ps-1.5 pe-7 py-2 bg-base-300 border-s-4 border-info font-light text-sm italic relative rounded-se-md rounded-ee-md break-all;
+}
+
+.markdown-content blockquote code {
+ @apply text-xs font-normal;
+}
+
+.markdown-content blockquote strong {
+ @apply font-semibold;
+}
+
+.markdown-content blockquote em {
+ @apply not-italic;
+}
+
+.markdown-content blockquote:not(blockquote blockquote)::after {
+ content: " ";
+ mask-image: url("/icons.svg#css-quote");
+ -webkit-mask-image: url("/icons.svg#css-quote");
+ @apply bg-info block size-6 absolute end-1 bottom-1;
+}
+
+.markdown-content ul {
+ @apply list-inside list-disc;
+}
+
+.markdown-content ol {
+ @apply list-inside list-decimal;
+}
+
+.markdown-content li {
+ @apply my-1.5;
+}
+
+.markdown-content a {
+ @apply text-accent font-medium;
+}
+
+.markdown-content a:hover {
+ @apply underline underline-offset-2;
+}
+
+.markdown-content img {
+ max-height: 40vh;
+ @apply max-w-full h-auto;
+}
+
+.markdown-content img[title^="emoji"] {
+ @apply inline w-16;
+}
+
+.markdown-content hr {
+ @apply border-secondary;
+}
+
+.markdown-content table {
+ @apply table w-auto mx-auto shadow-lg rounded-md bg-base-100;
+}
+
+.markdown-content thead tr {
+ @apply bg-base-300;
+}
+
+.markdown-content tbody tr {
+ @apply border-t-2 border-accent;
+}
+
+.markdown-content tbody td:not(:first-child) {
+ @apply border-accent border-l-2;
+}
+
+.markdown-content thead th:not(:first-child) {
+ @apply border-accent border-l-2;
+}
+
+.markdown-content summary {
+ @apply flex justify-start cursor-pointer break-all;
+}
+
+.markdown-content summary::before {
+ content: " ";
+ mask-image: url("/icons.svg#css-warning");
+ -webkit-mask-image: url("/icons.svg#css-warning");
+ @apply bg-warning-content block size-6 min-w-6 min-h-6 me-1;
+}
+
+.markdown-content summary::after {
+ content: " ";
+ mask-image: url("/icons.svg#css-caret");
+ -webkit-mask-image: url("/icons.svg#css-caret");
+ @apply bg-warning-content block size-6 min-w-6 min-h-6 ms-auto transition-transform;
+}
+
+.markdown-content details {
+ @apply bg-warning text-warning-content p-3 rounded-md;
+}
+
+.markdown-content details[open] > summary {
+ @apply mb-2;
+}
+
+.markdown-content details[open] > summary::after {
+ @apply rotate-180;
+}
-
-
-
+ {move || {
+ with!(
+ |post_body| post_body.as_ref().map(|body| is_on_post_page.then(|| view! {
+ {post_name}
+ +
+
-
+
- {move || {
- with!(
- |post_language| post_language.as_ref().map(|lang| view! {
+ to
+
+
+
+ {move || {
+ with!(
+ |post_language| post_language.as_ref().map(|lang| view! {