feat(ktb): add markdown parsing, sanitation, and add-lect feature

This commit is contained in:
nikomiko 2026-07-20 15:49:59 -04:00
parent bf8538bbb9
commit 6873a8d920
4 changed files with 116 additions and 53 deletions

View file

@ -80,16 +80,26 @@ document.addEventListener("alpine:init", () => {
localStorage.setItem("prefs", JSON.stringify(this.prefs));
this.update_css_variables();
},
async fetch_all_lects() {
try {
const res = await axios.get("http://localhost:1225/lects");
console.log(JSON.stringify(res.data));
return res.data;
} catch (e) {
console.error(e);
}
},
async fetch_all_lects() {
try {
const res = await axios.get("http://localhost:1225/lects");
return res.data;
} catch (e) {
console.error(e);
}
},
async post_lect(lect_name) {
try {
const res = await axios.post("http://localhost:1225/lect", {
lect_name,
});
return res.data.lect;
} catch (e) {
console.error(e);
}
},
async fetch_all_terms(search_term) {
try {
@ -180,13 +190,17 @@ document.addEventListener("alpine:init", () => {
filter_results(search_term) {
if (!search_term) return this.search_results.results;
return this.search_results.results.filter(
(item) =>
item.word_forms
.map((wf) => wf.word_form.toLowerCase())
.join()
.includes(search_term.toLowerCase()),
return this.search_results.results.filter((item) =>
item.word_forms
.map((wf) => wf.word_form.toLowerCase())
.join()
.includes(search_term.toLowerCase()),
);
},
md(text){
console.log(marked.parse(text));
return DOMPurify.sanitize(marked.parse(text), {ALLOWED_TAGS: ['br', 'em', 'strong', 'code', '#text']});
},
});
});

View file

@ -6,6 +6,8 @@
<title>Dictionary Cards</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@18.0.6/lib/marked.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.4.12/dist/purify.min.js"></script>
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="script.js"></script>
</head>
@ -16,7 +18,10 @@
x-data="{
search_term: '',
showPrefs: false,
lects: []
lects: [],
md(text){
return $store.dictionary.md(text);
},
}"
x-init="$store.dictionary.fetch_all_lects().then((lects_response)=>{
if(!!lects_response.lects) {
@ -169,6 +174,9 @@
<!-- wfs -->
<h4>Trofal</h4>
<table class="is-fullwidth">
<tbody>
<template
x-for="wf2 in (lemma_detail?.word_forms ?? [])">
<tr x-data="{
@ -201,36 +209,44 @@
</td>
</tr>
</template>
</tbody>
<!-- Add new wf -->
<tr x-data="{
adding_word_form:false,
new_word_form_text:'',
selected_lect:''
}">
<td colspan="3" x-show="!adding_word_form">
<button class="is-fullwidth hollow primary"
@click="adding_word_form = !adding_word_form">+</button>
</td>
<td x-show="adding_word_form">
<select name="vilgovor" x-model="selected_lect">
<template x-for="lect in lects">
<option :value="lect.name" x-text="lect.name"></option>
</template>
</select>
</td>
<td x-show="adding_word_form">
<input type="text" x-model="new_word_form_text">
</td>
<td x-show="adding_word_form">
<button class="tiny edit" x-show="adding_word_form" title="jame" @click="adding_word_form = false">/</button>
<button class="tiny" x-show="adding_word_form" title="antaa"
@click="await post_new_word_form(item.lemma_name, selected_lect, new_word_form_text); adding_word_form = false">></button>
</td>
</tr>
<tfoot>
<tr x-data="{
adding_word_form:false,
new_word_form_text:'',
selected_lect:'',
adding_lect:false,
new_lect_name:''
}">
<td colspan="3" x-show="!adding_word_form" style="width: 16em;">
<button class="is-fullwidth hollow primary"
@click="adding_word_form = !adding_word_form">+</button>
</td>
<td x-show="adding_word_form">
<select name="vilgovor" x-model="selected_lect" x-show="!adding_lect">
<template x-for="lect in lects">
<option :value="lect.name" x-text="lect.name"></option>
</template>
</select>
<input type="text" x-show="adding_lect" x-model="new_lect_name">
<button class="float-right tiny primary" x-show="!adding_lect" @click="adding_lect = true" title="neo govor">+</button>
<button class="float-right tiny edit" x-show="adding_lect" title="jame" @click="adding_lect = false">/</button>
</td>
<td x-show="adding_word_form">
<input type="text" x-model="new_word_form_text">
</td>
<td x-show="adding_word_form">
<button class="tiny edit" x-show="adding_word_form" title="jame" @click="adding_word_form = false">/</button>
<button class="tiny" x-show="adding_word_form" title="antaa"
@click="await post_new_word_form(item.lemma_name, adding_lect ? new_lect_name : selected_lect, new_word_form_text); adding_word_form = false">></button>
</td>
</tr>
</tfoot>
</table>
<h4>Imi</h4>
@ -241,7 +257,7 @@
editing: false,
edited_text: def.definition_text.toString()
}" @click.outside="editing = false">
<span x-show="!editing" x-text="def.definition_text" @click="editing = true"></span>
<span x-show="!editing" x-html="md(def.definition_text)" @click="editing = true"></span>
<input type="text" x-show="editing" x-model="edited_text">
<button class="float-right tiny hollow primary" title="kawari" x-show="!editing"
@click="editing = true">~</button>
@ -292,7 +308,7 @@
edited_text: ex.example_text.toString()
}"
@click.outside="editing = false">
<span x-show="!editing" x-text="ex.example_text" @click="editing = true"></span>
<span x-show="!editing" x-html="md(ex.example_text)" @click="editing = true"></span>
<input type="text" x-show="editing" x-model="edited_text">
<button class="float-right tiny hollow primary" x-show="!editing" @click="editing = true" title="kawari">~</button>
<button class="float-right tiny edit" x-show="editing" @click="editing = false" title="jame">/</button>

View file

@ -47,7 +47,7 @@
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-family: 'Verdana', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--color-main-bg);
color: var(--color-text);
line-height: 1.5;
@ -72,15 +72,19 @@ ul {
}
li {
margin-top: calc(var(--space-xs)/2);
margin-top: calc(var(--space-xs));
margin-bottom: calc(var(--space-xs)/2);
margin-left: var(--space-md);
}
table {
tbody {
table-layout: fixed;
}
tfoot {
table-layout: auto;
}
.float-right {
float: right;
}