Performance enhancements galore! New themining system
This is once again a huge commit, but its mostly performance improvements along with some bug fixes and refactoring. It also includes changes to the theming systems. I'm still not 100% happy with the theming system, but its better than before. Model fetching has been dramatically improved! Nearly all the important computation and pre-processing has been moved to the server. This has also somehow fixed the way model details are loaded, which was causing many models to be missing their details despite models.dev having them. The markdown renderer has once again been changed, but I'm mostly certain that this is the last time major changes will be made to it. The renderer is not spamming components, bloating memory usage, and its not using a bug prone custom written chunking system. There's also a lot more that I haven't mentioned and honestly forgot. I need to get better commit hygiene tbh.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import type { RootContent } from 'hast';
|
||||
import { h, Text, computed } from 'vue';
|
||||
import MarkdownShikiHighlight from './ShikiHighlight.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -10,292 +10,42 @@ const props = defineProps<{
|
||||
|
||||
const { $remark } = useNuxtApp();
|
||||
|
||||
function splitMarkdown(markdown: string): string[] {
|
||||
const paragraphs: string[] = [];
|
||||
let currentParagraph = "";
|
||||
let isInCodeBlock = false;
|
||||
|
||||
const lines = markdown.split("\n");
|
||||
|
||||
for (let line of lines) {
|
||||
if (line.trim().startsWith("```")) {
|
||||
isInCodeBlock = !isInCodeBlock;
|
||||
}
|
||||
|
||||
if (line.trim() === "" && !isInCodeBlock) {
|
||||
if (currentParagraph.trim() !== "") {
|
||||
paragraphs.push(currentParagraph.trim());
|
||||
currentParagraph = "";
|
||||
}
|
||||
} else {
|
||||
currentParagraph += (currentParagraph === "" ? "" : "\n") + line;
|
||||
}
|
||||
}
|
||||
|
||||
if (currentParagraph.trim() !== "") {
|
||||
paragraphs.push(currentParagraph.trim());
|
||||
}
|
||||
|
||||
return paragraphs;
|
||||
}
|
||||
|
||||
const partseAst = async (content: string) => {
|
||||
const mdast = $remark.parse(content);
|
||||
const hast = $remark.run(mdast);
|
||||
return hast;
|
||||
}
|
||||
|
||||
// SSR Initial Load
|
||||
const { data: hastParts } = await useAsyncData(`md-${props.id}`, async () => {
|
||||
return (await partseAst(props.content)).children;
|
||||
const ast = computed(() => {
|
||||
const mdast = $remark.parse(props.content);
|
||||
return $remark.runSync(mdast);
|
||||
});
|
||||
|
||||
let activeIdx = 0;
|
||||
let partIdx = [0];
|
||||
const renderNode = (node: any, index: number): any => {
|
||||
if (node.type === 'text' || node.type === 'raw') return h(Text, node.value);
|
||||
|
||||
if (import.meta.client && hastParts.value && hastParts.value.length > 0 && !props.finished) {
|
||||
const initialParts = splitMarkdown(props.content);
|
||||
if (node.type === 'element') {
|
||||
if (node.tagName === 'code') {
|
||||
const isBlock = node.position?.start.line !== node.position?.end.line;
|
||||
if (isBlock && node.children?.[0]?.type === 'text') {
|
||||
return h(MarkdownShikiHighlight, {
|
||||
key: `code-${index}`,
|
||||
code: node.children[0].value,
|
||||
language: node.properties?.className?.[0]?.replace('language-', '') || 'text'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
activeIdx = Math.max(0, initialParts.length - 1);
|
||||
const children = node.children?.map((child: any, i: number) => renderNode(child, i)) || [];
|
||||
|
||||
let currentOffset = 0;
|
||||
for (let i = 0; i < initialParts.length; i++) {
|
||||
partIdx[i] = currentOffset;
|
||||
|
||||
const tempAst = await partseAst(initialParts[i]!);
|
||||
currentOffset += tempAst.children.length;
|
||||
return h(
|
||||
node.tagName,
|
||||
{ ...node.properties, key: `${node.tagName}-${index}` },
|
||||
children
|
||||
);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
defineRender(() => {
|
||||
const children = ast.value?.children?.flatMap(renderNode) || [];
|
||||
|
||||
const parts = computed(() => {
|
||||
return splitMarkdown(props.content);
|
||||
})
|
||||
|
||||
watch(parts, async (newParts) => {
|
||||
if (!hastParts.value) hastParts.value = [];
|
||||
|
||||
while (activeIdx < newParts.length - 1) {
|
||||
const finalHast = await partseAst(newParts[activeIdx]!);
|
||||
|
||||
const base: RootContent[] = hastParts.value!.slice(0, partIdx[activeIdx]);
|
||||
hastParts.value = base.concat(finalHast.children);
|
||||
|
||||
partIdx[activeIdx + 1] = hastParts.value!.length;
|
||||
activeIdx++;
|
||||
}
|
||||
|
||||
const currentString = newParts[activeIdx];
|
||||
if (currentString !== undefined) {
|
||||
const latestHast = await partseAst(currentString);
|
||||
|
||||
const stableBase = hastParts.value!.slice(0, partIdx[activeIdx]);
|
||||
hastParts.value = stableBase.concat(latestHast.children);
|
||||
}
|
||||
return h('div', { class: 'prose-wrapper' }, [
|
||||
h('article', { class: 'markdown-body' }, children)
|
||||
]);
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="prose-wrapper">
|
||||
<article class="markdown-body">
|
||||
<template v-for="(node, index) in hastParts" :key="`${id}-${index}`">
|
||||
<MarkdownAstNode :node="node" v-memo="[node.type === 'text' ? node.value : node.data]" />
|
||||
</template>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
article>* {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
article>*:first-child {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
article>*:last-child {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
article>*:only-child {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid var(--color-highlight-high);
|
||||
}
|
||||
|
||||
li {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
ul>li {
|
||||
position: relative;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
ul>li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.5rem;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: var(--color-muted);
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
ul>li::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 23px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background-color: var(--color-highlight);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
ul>li:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
margin-left: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
counter-reset: ordered-list-counter var(--start-value, 0);
|
||||
}
|
||||
|
||||
ol[start] {
|
||||
--start-value: calc(attr(start type(<number>)) - 1);
|
||||
}
|
||||
|
||||
ol>li {
|
||||
position: relative;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
counter-increment: ordered-list-counter;
|
||||
}
|
||||
|
||||
ol>li::before {
|
||||
content: counter(ordered-list-counter) ".";
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: var(--color-muted);
|
||||
font-weight: 500;
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
html.dark .shiki,
|
||||
html.dark .shiki span {
|
||||
color: var(--shiki-dark) !important;
|
||||
background-color: var(--shiki-dark-bg) !important;
|
||||
/* Optional, if you also want font styles */
|
||||
font-style: var(--shiki-dark-font-style) !important;
|
||||
font-weight: var(--shiki-dark-font-weight) !important;
|
||||
text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||
}
|
||||
|
||||
ol:only-child,
|
||||
ul:only-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
code:not(pre code) {
|
||||
background-color: var(--color-highlight);
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: var(--color-muted);
|
||||
border-left: 4px solid var(--color-highlight-high);
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
margin: calc(var(--spacing) * 4) 0;
|
||||
}
|
||||
|
||||
/* TODO: make these tables better, this is literally the first attempt from Gemini 3 flash */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.95rem;
|
||||
text-align: left;
|
||||
background-color: var(--color-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
table thead tr {
|
||||
background-color: var(--color-highlight-high);
|
||||
}
|
||||
|
||||
table th {
|
||||
padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
|
||||
}
|
||||
|
||||
table tbody tr {
|
||||
background-color: var(--color-highlight);
|
||||
transition: background-color 250ms cubic-bezier(0.5, 1, 0.89, 1);
|
||||
}
|
||||
|
||||
table tbody tr:nth-of-type(even) {
|
||||
background-color: var(--color-highlight-low);
|
||||
}
|
||||
|
||||
/* Hover effect */
|
||||
table tbody tr:hover {
|
||||
background-color: var(--color-highlight-high);
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
label>span {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: min-content;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user