fix(frontend): make prism stuff more robust, statically import theme, allow more markdown requests at once

This commit is contained in:
MiniDigger | Martin 2022-12-23 01:30:50 +01:00
parent a180870041
commit 24cef5f443
3 changed files with 5 additions and 18 deletions

View File

@ -53,7 +53,7 @@ public class ProjectPageController extends HangarComponent {
}
@Anyone
@RateLimit(overdraft = 10, refillTokens = 3, refillSeconds = 5, greedy = true)
@RateLimit(overdraft = 20, refillTokens = 3, refillSeconds = 5, greedy = true)
@PostMapping(path = "/render", produces = MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<String> renderMarkdown(@RequestBody @Valid StringContent content) {
if (content.getContent().length() > config.projects.contentMaxLen()) {

View File

@ -32,7 +32,7 @@ async function fetch() {
loading.value = false;
if (!import.meta.env.SSR) {
await nextTick(setupAdmonition);
if (renderedMarkdown.value.includes("<code")) {
if (renderedMarkdown.value?.includes("<code")) {
await usePrismStore().handlePrism();
}
}

View File

@ -2,10 +2,10 @@ import { defineStore } from "pinia";
import type { highlightAll, Languages } from "prismjs";
import { ref } from "#imports";
import { prismLog } from "~/lib/composables/useLog";
import "prismjs/themes/prism-tomorrow.min.css";
export const usePrismStore = defineStore("prism", () => {
const prism = ref<{ highlightAll: typeof highlightAll; languages: Languages } | null>(null);
const themeLoaded = ref(false);
const languages = ref<string[]>([]);
async function loadPrism() {
@ -17,7 +17,7 @@ export const usePrismStore = defineStore("prism", () => {
async function loadLanguages() {
const langs = new Set<string>();
for (const codeBlock of document.getElementsByTagName("code")) {
for (const codeBlock of document.querySelectorAll('code[class*="language-"]')) {
langs.add(codeBlock.className.replace("language-", ""));
}
prismLog("Load languages", langs);
@ -33,26 +33,13 @@ export const usePrismStore = defineStore("prism", () => {
languages.value.push(lang);
}
async function loadTheme() {
if (themeLoaded.value) return;
prismLog("loading style...");
const style = (await import("prismjs/themes/prism-tomorrow.min.css")).default;
const styleBlock = document.createElement("style");
prismLog("injecting style...", style);
styleBlock.innerText = style;
document.head.append(styleBlock);
themeLoaded.value = true;
prismLog("done");
}
async function handlePrism() {
prismLog("handle prism...");
await loadPrism();
await loadLanguages();
await loadTheme();
prism.value?.highlightAll();
prismLog("DONE!");
}
return { prism, themeLoaded, languages, handlePrism };
return { prism, languages, handlePrism };
});