strawberries/wiki-maker
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added support for images in markdown, and for rendered html

Browse Source
This commit is contained in:
eiiko6
2026-03-09 13:23:31 +01:00
parent ba6705d798
commit 2a63f44c59
6 changed files with 338 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
example/lumina.md
View File

@@ -20,6 +20,9 @@ Her smallest creation:
- [Bernardo](bernardo)
Bernardo looks like this:
![bernardo-picture](bernardo.png)
---
## Enemy

16
example/sword-of-conjuring.md
View File

@@ -1,3 +1,19 @@
# Sword of Conjuring
This is a sword what do you expect
Here's some rendered html:
```html
<div style="background: #2d3149; padding: 10px; border-radius: 10px; border: 2px solid #8aadf4;">
<p>You can use <strong>raw HTML</strong> inside wiki pages:</p>
<button onclick="alert('It works!')">Click Me</button>
</div>
```
```rendered_html
<div style="background: #2d3149; padding: 10px; border-radius: 10px; border: 2px solid #8aadf4;">
<p>You can use <strong>raw HTML</strong> inside wiki pages:</p>
<button onclick="alert('It works!')">Click Me</button>
</div>
```

4
example/sword-of-conjuring.toml
View File

@@ -1,7 +1,7 @@
title = "Sword of Conjuring"
category = "Items"
image = "azrak.png"
content_file = "azrak.md"
image = "sword-of-conjuring.png"
content_file = "sword-of-conjuring.md"
[infobox]
"Weapon type" = "Sword"

36
src/rendering.rs
View File

@@ -59,6 +59,29 @@ impl<'a> Iterator for Renderer<'a> {
}))
}
Event::Start(Tag::Image {
link_type,
dest_url,
title,
id,
}) => {
let mut new_url = dest_url.to_string();
if !new_url.contains("://")
&& !new_url.starts_with('/')
&& !new_url.starts_with("./")
{
new_url = format!("images/{}", new_url);
}
Some(Event::Start(Tag::Image {
link_type,
dest_url: CowStr::Boxed(new_url.into_boxed_str()),
title,
id,
}))
}
Event::Start(Tag::CodeBlock(kind)) => {
let mut code_content = String::new();
@@ -75,14 +98,17 @@ impl<'a> Iterator for Renderer<'a> {
CodeBlockKind::Fenced(ref language) => language.as_ref(),
};
let rendered_html = render_code_to_html(&code_content, lang);
if lang == "rendered_html" {
return Some(Event::Html(CowStr::Boxed(code_content.into_boxed_str())));
}
let rendered_html = render_code_to_html(&code_content, lang);
let mut escaped_code = String::new();
let _ = escape_html(&mut escaped_code, &code_content);
let rendered_html =
rendered_html.replace("<pre", &format!("<pre data-code=\"{}\"", escaped_code));
let rendered_html = rendered_html.replace(
"<pre",
&format!("<pre data-lang=\"{}\" data-code=\"{}\"", lang, escaped_code),
);
Some(Event::Html(CowStr::Boxed(rendered_html.into_boxed_str())))
}
_ => return Some(event),

23
templates/page.html
View File

@@ -43,21 +43,34 @@
<script>
document.querySelectorAll('pre[data-code]').forEach((block) => {
const lang = block.getAttribute('data-lang') || 'text';
const code = block.getAttribute('data-code');
const wrapper = document.createElement('div');
wrapper.className = 'code-wrapper';
block.parentNode.insertBefore(wrapper, block);
wrapper.appendChild(block);
const header = document.createElement('div');
header.className = 'code-header';
const langLabel = document.createElement('span');
langLabel.className = 'code-lang';
langLabel.innerText = lang;
const button = document.createElement('button');
button.className = 'copy-button';
button.type = 'button';
button.innerHTML = '<i class="fa-regular fa-copy"></i>';
wrapper.appendChild(button);
header.appendChild(langLabel);
header.appendChild(button);
block.parentNode.insertBefore(wrapper, block);
wrapper.appendChild(header);
wrapper.appendChild(block);
button.addEventListener('click', async () => {
const text = block.getAttribute('data-code');
try {
await navigator.clipboard.writeText(text);
await navigator.clipboard.writeText(code);
button.innerHTML = '<i class="fa-solid fa-check"></i>';
button.classList.add('copied');
setTimeout(() => {

194
templates/style.css
View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");
:root {
--bg-color: #181926;
@@ -6,25 +6,24 @@
--lighter-bg: #24273a;
--text-main: #cad3f5;
--text-muted: #a5adcb;
--accent: #8aadf4;
--accent-glow: #c6a0f6;
--code-bg: var(--container-bg);
--border-color: #494d64;
--selection-bg: rgba(91, 96, 120, 0.4);
--radius-sm: 6px;
--radius-md: 12px;
--container-width: 1000px; /* Wider for wiki layout */
--container-width: 1000px;
}
* { box-sizing: border-box; }
* {
box-sizing: border-box;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: 'Inter', system-ui, sans-serif;
font-family: "Inter", system-ui, sans-serif;
line-height: 1.6;
margin: 0;
padding-top: 80px;
@@ -36,12 +35,9 @@ body {
#content {
width: 100%;
max-width: var(--container-width);
padding: 0 20px;
padding-bottom: 35px;
padding: 0 20px 35px;
}
/* --- Wiki Layout --- */
.wiki-header {
border-bottom: 2px solid;
border-image-source: linear-gradient(to right, var(--accent), transparent);
@@ -64,7 +60,7 @@ body {
.wiki-body {
flex: 1;
min-width: 0; /* Prevents overflow in flex items */
min-width: 0;
}
.wiki-sidebar {
@@ -88,7 +84,6 @@ body {
}
}
/* --- Sidebar Components --- */
.sidebar-image img {
width: 100%;
border-radius: var(--radius-sm);
@@ -131,12 +126,26 @@ body {
text-align: right;
}
/* --- Standard Markdown Elements --- */
h2 { font-size: 1.8rem; color: var(--accent); margin-top: 2rem; }
h3 { font-size: 1.5rem; color: #fff; }
p { margin-bottom: 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-glow); text-decoration: underline; }
h2 {
font-size: 1.8rem;
color: var(--accent);
margin-top: 2rem;
}
h3 {
font-size: 1.5rem;
color: #fff;
}
p {
margin-bottom: 1rem;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
color: var(--accent-glow);
text-decoration: underline;
}
blockquote {
border-left: 4px solid var(--accent);
@@ -146,23 +155,16 @@ blockquote {
color: var(--text-muted);
}
/* Code blocks */
pre {
background: var(--container-bg);
padding: 1rem;
border-radius: var(--radius-md);
overflow-x: auto;
border: 1px solid var(--border-color);
}
code {
font-family: 'JetBrains Mono', monospace;
font-family: "JetBrains Mono", monospace;
font-size: 0.9em;
}
/* Navigation Bar */
nav {
position: fixed;
top: 0; left: 0; right: 0;
top: 0;
left: 0;
right: 0;
height: 60px;
background: var(--container-bg);
border-bottom: 1px solid var(--border-color);
@@ -171,12 +173,18 @@ nav {
padding: 0 2rem;
z-index: 100;
}
nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
nav a {
font-weight: bold;
font-size: 1.2rem;
color: var(--text-main);
}
.changelog-list {
list-style: none;
padding: 0;
}
.changelog-entry {
background: var(--container-bg);
border: 1px solid var(--border-color);
@@ -184,6 +192,7 @@ nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
margin-bottom: 15px;
border-radius: var(--radius-sm);
}
.changelog-meta {
font-size: 0.85rem;
color: var(--text-muted);
@@ -194,42 +203,51 @@ nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
gap: 10px;
align-items: baseline;
}
.changelog-day {
color: var(--accent);
font-weight: bold;
}
.changelog-time {
color: var(--text-muted);
font-family: 'JetBrains Mono', monospace;
font-family: "JetBrains Mono", monospace;
font-size: 0.8em;
}
.changelog-author {
margin-left: auto;
}
.changelog-message {
font-size: 1.05rem;
margin-bottom: 10px;
font-weight: 500;
}
.changelog-files {
font-size: 0.85rem;
margin-top: 8px;
}
.changelog-files summary {
cursor: pointer;
color: var(--text-muted);
list-style: none;
}
.changelog-files summary:hover {
color: var(--text-main);
}
.changelog-files summary::before {
content: '▶';
content: "▶";
font-size: 0.7em;
margin-right: 5px;
display: inline-block;
transition: transform 0.2s;
}
.changelog-files details[open] summary::before {
transform: rotate(90deg);
}
@@ -238,10 +256,9 @@ nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
margin: 5px 0 0 0;
padding-left: 20px;
color: var(--text-muted);
font-family: 'JetBrains Mono', monospace;
font-family: "JetBrains Mono", monospace;
}
.header-category {
font-size: 1.2rem;
color: var(--text-muted);
@@ -257,3 +274,110 @@ nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.2rem;
}
.wiki-body img {
max-width: 100%;
height: auto;
display: block;
margin: 1.5rem auto;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
.wiki-body img + em {
display: block;
text-align: center;
font-size: 0.9rem;
color: var(--text-muted);
margin-top: -1rem;
margin-bottom: 1.5rem;
}
button {
display: inline-block;
color: #fff;
background: var(--container-bg);
padding: 0.6rem 1.2rem;
border: solid 1px var(--accent);
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 0.2s ease;
}
button.disabled {
color: var(--text-muted);
cursor: not-allowed;
border-color: var(--text-muted);
}
.code-wrapper {
position: relative;
margin: 1.5rem 0;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--lighter-bg);
padding: 6px 12px;
border-bottom: 1px solid var(--border-color);
}
.code-lang {
font-family: "JetBrains Mono", monospace;
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.05em;
}
pre {
background: var(--container-bg);
padding: 1rem;
overflow-x: auto;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
}
.copy-button {
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
cursor: pointer;
border-radius: var(--radius-sm);
position: static;
padding: 4px 8px;
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
font-size: 0.85rem;
transition: all 0.2s ease;
}
.copy-button:hover {
background: var(--selection-bg);
color: var(--accent);
border-color: var(--border-color);
}
.copy-button:active {
transform: translateY(2px);
}
pre::-webkit-scrollbar {
height: 8px;
}
pre::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}