Iaphetes/Apographe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

worked on theming and image support

Browse source
This commit is contained in:
Iaphetes 2024-11-13 22:06:28 +01:00
parent e1ea47052d
commit ad8cd4339b
8 changed files with 372 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/index.html
View file

@ -10,8 +10,9 @@
<body>
<main class="container">
<textarea id="markdown_input"></textarea>
<div class="rendered_markdown" id="rendered_markdown">
<div class="main_editor">
<div class='markdown_input' id="markdown_input" contenteditable></div>
<div class="rendered_markdown" id="rendered_markdown"></div>
</div>
</main>
</body>

9
src/main.js
View file

@ -1,4 +1,5 @@
const { invoke } = window.__TAURI__.core;
const {readFile } = window.__TAURI__.fs;
let greetInputEl;
let greetMsgEl;
@ -9,18 +10,18 @@ async function greet() {
}
let text = "";
window.addEventListener("DOMContentLoaded", () => {
window.addEventListener("DOMCharacterDataModified", () => {
// window.addEventListener("DOMContentLoaded", () => {
let textarea = document.getElementById('markdown_input');
textarea.addEventListener('input', ()=> {
text = textarea.value;
text = textarea.innerText;
invoke("parse_markdown", { document: text }).then(
(ret)=>{
var tag_id = document.getElementById('rendered_markdown');
tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
// tag_id.innerHTML = ret;
}
);
});
});
var x = document.createElement("INPUT");
x.setAttribute("type", "text");

111
src/styles.css
View file

@ -2,13 +2,12 @@
filter: drop-shadow(0 0 2em #ffe21c);
}
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-family: Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #0f0f0f;
background-color: #f6f6f6;
color: #f6f6f6;
background-color: #2f2f2f;
font-synthesis: none;
text-rendering: optimizeLegibility;
@ -18,82 +17,58 @@
}
.container {
height: 90vh;
margin: 0;
padding-top: 10vh;
padding-top: 1vh;
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: left;
text-align: left;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: 0.75s;
}
.logo.tauri:hover {
filter: drop-shadow(0 0 2em #24c8db);
}
.row {
display: flex;
justify-content: left;
}
.markdown_input
{
border-style: solid;
width: 49%;
height: 100%;
text-align: left;
float:left;
color: #f6f6f6;
background: #2f2f2f;
}
.rendered_markdown {
border-style: solid;
width: 49%;
height: 100%;
float:right;
text-align: left;
color: #f6f6f6;
background-color: #2f2f2f;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
h1 {
.main_editor{
width: 100%;
text-align: center;
font-size: 16px;
line-height: 18px;
flex-direction: column;
justify-content: center;
color: #f6f6f6;
background-color: #2f2f2f;
}
h1 {
text-align: left;
line-height: 18px;
margin-top: 0.067em;
margin-bottom: 0.067em;
}
input,
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
color: #0f0f0f;
background-color: #ffffff;
transition: border-color 0.25s;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
button {
cursor: pointer;
}
button:hover {
border-color: #396cd8;
}
button:active {
border-color: #396cd8;
background-color: #e8e8e8;
}
input,
button {
outline: none;
}
#greet-input {
margin-right: 5px;
}
@media (prefers-color-scheme: dark) {
:root {
@ -101,16 +76,4 @@ button {
background-color: #2f2f2f;
}
a:hover {
color: #24c8db;
}
input,
button {
color: #ffffff;
background-color: #0f0f0f98;
}
button:active {
background-color: #0f0f0f69;
}
}