diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index 35ff5b2..07faac0 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -2,27 +2,19 @@ use comrak::{format_html, nodes::NodeValue, parse_document, Arena, Options}; use html_tag::HtmlTag; use shellexpand; use std::{ - collections::BTreeMap, env, - ffi::{OsStr, OsString}, fs, path::{absolute, Path}, }; -use tauri::{ipc::IpcResponse, Manager}; use tauri_plugin_fs::FsExt; -// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/ -#[tauri::command] -fn greet(name: &str) -> String { - format!("Hello, {}! You've been greeted from Rust!", name) -} + #[tauri::command] fn parse_markdown(document: &str, pathtemplate: &str, basepath: &str) -> String { - let mut rendered_markdown: String = String::new(); + let rendered_markdown: String; let path = "/foo/bar.txt"; println!("{:?}", shellexpand::full(path)); - // let webview = app.get_webview_window("main").unwrap(); let arena = Arena::new(); // Parse the document into a root `AstNode` @@ -32,23 +24,31 @@ fn parse_markdown(document: &str, pathtemplate: &str, basepath: &str) -> String let root = parse_document(&arena, document, &options); // Iterate over all the descendants of root. - env::set_current_dir(basepath); + + if let Ok(resolved_basepath) = shellexpand::full(&basepath) { + println!( + "{:?}", + env::set_current_dir(&resolved_basepath.into_owned()) + ); + } + for node in root.descendants() { if let NodeValue::Image(ref mut image_node) = node.data.borrow_mut().value { let image_path = Path::new(&image_node.url).to_path_buf(); - let absolute_image_path = absolute(image_node.url.clone()); - let absolute_image_path = -.unwrap_or(image_path) - .as_path() - .to_string_lossy() - if let Ok(resolved_path) = shellexpand::full(&absolute_image_path) { + + let absolute_image_path_res = absolute(image_node.url.clone()); + + let absolute_image_path = absolute_image_path_res.unwrap_or(image_path.clone()); + let absolute_image_path_str = absolute_image_path.as_path().to_string_lossy(); + if let Ok(resolved_path) = shellexpand::full(&absolute_image_path_str) { image_node.url = pathtemplate.replace("FILEPATH", &resolved_path); } + println!("{}", image_node.url); } } let mut html = vec![]; format_html(root, &options, &mut html).unwrap(); - println!("{}", String::from_utf8(html.clone()).unwrap()); + // println!("{}", String::from_utf8(html.clone()).unwrap()); rendered_markdown = String::from_utf8(html).unwrap(); return rendered_markdown.to_owned(); // String::from_str("lololo").unwrap() diff --git a/src/filesystem.js b/src/filesystem.js index f0c4995..99293cc 100644 --- a/src/filesystem.js +++ b/src/filesystem.js @@ -1,52 +1,51 @@ const { convertFileSrc, invoke } = window.__TAURI__.core; const { homeDir, join } = window.__TAURI__.path; const { readTextFile } = window.__TAURI__.fs; - -function handle_file_select(filename){ - if (filename.endsWith("md")){ - readTextFile(convertFileSrc(filename) ).then( - (ret)=>{ - var tag_id = document.getElementById('markdown_input'); - tag_id.innerHTML = "
".concat("", ret).concat("", "
"); - } - ); - var tag_id = document.getElementById('rendered_markdown'); - tag_id.dispatchEvent(new Event("input")); - } +import { render_markdown } from "./main.js"; +function handle_file_select(filename) { + if (filename.endsWith("md")) { + readTextFile(convertFileSrc(filename)).then( + (ret) => { + var tag_id = document.getElementById('markdown_input'); + tag_id.innerHTML = "
".concat("", ret).concat("", "
"); + render_markdown(); + } + ); + } } function dropdown(id) { - var dropdown_element = document.getElementById(id); - var dropdown_children = dropdown_element.children; - console.log(dropdown_element.getAttribute("expanded")); - if (dropdown_element.getAttribute("expanded") == "false") { - dropdown_element.setAttribute("expanded", "true"); - } - else{ - dropdown_element.setAttribute("expanded", "false"); - } - for (var i = 0; i < dropdown_children.length; i++) { - var child = dropdown_children[i]; - console.log(child.id); - if (child.className === "filetree-node") { - if (document.getElementById(id).getAttribute("expanded") == "true") { - document.getElementById(child.id).style.visibility = "visible"; - document.getElementById(child.id).style.height = "auto"; - } else { - document.getElementById(child.id).style.visibility = "hidden"; - document.getElementById(child.id).style.height = 0; - } - } + var dropdown_element = document.getElementById(id); + var dropdown_children = dropdown_element.children; + console.log(dropdown_element.getAttribute("expanded")); + if (dropdown_element.getAttribute("expanded") == "false") { + dropdown_element.setAttribute("expanded", "true"); + } + else { + dropdown_element.setAttribute("expanded", "false"); + } + for (var i = 0; i < dropdown_children.length; i++) { + var child = dropdown_children[i]; + console.log(child.id); + if (child.className === "filetree-node") { + if (document.getElementById(id).getAttribute("expanded") == "true") { + document.getElementById(child.id).style.visibility = "visible"; + document.getElementById(child.id).style.height = "auto"; + } else { + document.getElementById(child.id).style.visibility = "hidden"; + document.getElementById(child.id).style.height = 0; + } } + } } -window.onload = function () { - invoke("dir_tree_html", { basepath: "~/Documents/Knowledgebase", filter: ["*"]}).then( - (ret)=>{ - var tag_id = document.getElementById('filetree'); - tag_id.innerHTML = ret; - } - ) +window.onload = function() { + invoke("dir_tree_html", { basepath: "~/Documents/Knowledgebase", filter: ["*"] }).then( + (ret) => { + var tag_id = document.getElementById('filetree'); + tag_id.innerHTML = ret; + } + ) } let filetree = document.getElementById('filetree'); // Options for the observer (which mutations to observe) @@ -54,20 +53,20 @@ const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = (mutationList, observer) => { - var anchors = document.getElementsByClassName("filetree-directory-button"); - for (var i = 0; i < anchors.length; i++) { - var anchor = anchors[i]; - anchor.onclick = function () { - dropdown(this.parentElement.id); - }; + var anchors = document.getElementsByClassName("filetree-directory-button"); + for (var i = 0; i < anchors.length; i++) { + var anchor = anchors[i]; + anchor.onclick = function() { + dropdown(this.parentElement.id); }; - var anchors = document.getElementsByClassName("filetree-file-button"); - for (var i = 0; i < anchors.length; i++) { - var anchor = anchors[i]; - anchor.onclick = function () { - handle_file_select(this.parentElement.id); - }; + }; + var anchors = document.getElementsByClassName("filetree-file-button"); + for (var i = 0; i < anchors.length; i++) { + var anchor = anchors[i]; + anchor.onclick = function() { + handle_file_select(this.parentElement.id); }; + }; }; diff --git a/src/index.html b/src/index.html index 6617c79..9f60d6f 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,9 @@ + + + @@ -35,26 +38,6 @@
- - - - - - - - - - - - - - - - - - - -
@@ -65,4 +48,4 @@
- \ No newline at end of file + diff --git a/src/main.js b/src/main.js index c5ce8c3..f925725 100644 --- a/src/main.js +++ b/src/main.js @@ -12,18 +12,22 @@ let placeholder_path = "FILEPATH"; let path_template = convertFileSrc(placeholder_path); let textarea = document.getElementById('markdown_input'); -textarea.addEventListener('input', ()=> { - text = textarea.innerText; - var tag_id = document.getElementById('rendered_markdown'); - invoke("parse_markdown", { document: text, pathtemplate: path_template}).then( + + +export function render_markdown(){ + text = textarea.innerText; + invoke("parse_markdown", { document: text, pathtemplate: path_template, basepath: "$HOME/Documents/Knowledgebase"}).then( (ret)=>{ - var tag_id = document.getElementById('rendered_markdown'); - tag_id.innerHTML = "
".concat("", ret).concat("", "
"); + var tag_id = document.getElementById('rendered_markdown'); + tag_id.innerHTML = "
".concat("", ret).concat("", "
"); // tag_id.innerHTML = assetUrl.concat(" ", ' \n Girl in a jacket')) } ); +} +textarea.addEventListener('input', ()=> { + render_markdown(); + -// }); }); // Random tree diff --git a/src/styles.css b/src/styles.css index 001f093..4a018fb 100644 --- a/src/styles.css +++ b/src/styles.css @@ -4,10 +4,11 @@ :root { --main-bg-color: #2f2f2f; - --sidebar-width: 3em; --highlight-color: #5f5f5f; - --text-color: #ffffff; + --text-color: #f6f6f6; + --sidebar-width: 3em; + --filetree-width: 10em; font-family: Avenir, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; @@ -20,8 +21,6 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; - - } * { @@ -32,62 +31,59 @@ .container { height: 100%; + max-width: 100%; margin: 0; padding-top: 1vh; display: flex; flex-direction: row; - justify-content: left; text-align: left; + align-items: stretch; } +#main_editor { + width: 100%; + font-size: 16px; + line-height: 18px; + display: flex; + height: 100%; + width: 100%; + color: var(--text-color); + background-color: var(--main-bg-color); + float: right; + overflow: hidden; +} .col { + flex: 0 0 49%; width: 50%; padding: 0.5em; margin: .1em; border: solid; border-radius: .5em; } - #markdown_input { grid-column: 1; grid-row: 1; text-align: left; - /*float:left;*/ - color: #f6f6f6; + color: var(--text-color); background: var(--main-bg-color); - overflow: scroll; + overflow-x: wrap; + overflow-y: scroll; } #rendered_markdown { grid-column: 2; grid-row: 1; - - - /*float:right;*/ text-align: left; - color: #f6f6f6; + color: var(--text-color); background-color: var(--main-bg-color); - img { width: 100%; } - - overflow: scroll; + overflow-x: wrap; + overflow-y: scroll; } -.main_editor { - width: 100%; - text-align: center; - font-size: 16px; - line-height: 18px; - display: flex; - - flex-direction: column; - justify-content: center; - color: #f6f6f6; - background-color: var(--main-bg-color); -} h1 { text-align: left; @@ -98,10 +94,10 @@ h1 { } li { - line-height: 0.1em; - margin 0px 0; + /* line-height: 0.1em; */ + margin: 0; margin-left: 1em; - padding 0; + padding: 0; } .sidebar_button { @@ -133,11 +129,6 @@ li { } -#main_editor { - display: flex; - width: 100%; - height: 100%; -} .main { display: flex; @@ -149,14 +140,16 @@ li { visibility: visible; width: var(--sidebar-width); transition: all 0.1s ease-out; + float: left; } - - .filetree { - width: 10em; + float: left; + border: solid; + /* width: var(--filetree-width); */ overflow-x: scroll; overflow-y: scroll; + resize: width; } .filetree-directory-button, @@ -172,7 +165,9 @@ li { color: var(--text-color); } - +.filetree-node{ + margin-left: 1em; +} .filetree-icon { height: 1em; background-color: transparent; @@ -189,4 +184,4 @@ li { .filetree-directory-button:hover { background-color: var(--highlight-color); /* Green */ -} \ No newline at end of file +}