internal link rendering

This commit is contained in:
Maxime Cannoodt 2022-06-23 22:03:25 +02:00
parent 6f67216a60
commit c48a54efe7
9 changed files with 67 additions and 7 deletions

View File

@ -9,6 +9,7 @@
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"marked": "^4.0.17",
"svelte-icons": "^2.1.0", "svelte-icons": "^2.1.0",
"svelte-markdown": "^0.2.2" "svelte-markdown": "^0.2.2"
}, },
@ -17,6 +18,7 @@
"@sveltejs/kit": "^1.0.0-next.350", "@sveltejs/kit": "^1.0.0-next.350",
"@tailwindcss/typography": "^0.5.2", "@tailwindcss/typography": "^0.5.2",
"@types/crypto-js": "^4.1.1", "@types/crypto-js": "^4.1.1",
"@types/marked": "^4.0.3",
"@typescript-eslint/eslint-plugin": "^5.27.0", "@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0", "@typescript-eslint/parser": "^5.27.0",
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.7",

View File

@ -17,6 +17,7 @@
"@sveltejs/kit": "^1.0.0-next.350", "@sveltejs/kit": "^1.0.0-next.350",
"@tailwindcss/typography": "^0.5.2", "@tailwindcss/typography": "^0.5.2",
"@types/crypto-js": "^4.1.1", "@types/crypto-js": "^4.1.1",
"@types/marked": "^4.0.3",
"@typescript-eslint/eslint-plugin": "^5.27.0", "@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0", "@typescript-eslint/parser": "^5.27.0",
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.7",
@ -36,6 +37,7 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"marked": "^4.0.17",
"svelte-icons": "^2.1.0", "svelte-icons": "^2.1.0",
"svelte-markdown": "^0.2.2" "svelte-markdown": "^0.2.2"
} }

View File

@ -1,9 +1,18 @@
<script lang="ts"> <script lang="ts">
import SvelteMarkdown from 'svelte-markdown'; import SvelteMarkdown from 'svelte-markdown';
import Heading from '$lib/renderers/Heading.svelte'; import Heading from '$lib/marked/renderers/Heading.svelte';
import List from '$lib/renderers/List.svelte'; import List from '$lib/marked/renderers/List.svelte';
import InternalLink from '$lib/marked/renderers/InternalLink.svelte';
import tokenizer from '$lib/marked/tokenizer';
import { marked } from 'marked';
import extensions from '$lib/marked/extensions';
export let plaintext: string; export let plaintext: string;
// @ts-ignore: typing mismatch
marked.use({ extensions: extensions });
const options = marked.defaults;
</script> </script>
<div <div
@ -11,5 +20,9 @@
class="prose max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7 class="prose max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
prose-strong:font-bold" prose-strong:font-bold"
> >
<SvelteMarkdown renderers={{ heading: Heading, list: List }} source={plaintext} /> <SvelteMarkdown
renderers={{ heading: Heading, list: List, 'internal-link': InternalLink }}
source={plaintext}
{options}
/>
</div> </div>

View File

@ -0,0 +1,21 @@
const InternalLinkExtension = {
name: 'internal-link',
level: 'inline',
start(src: string) {
return src.match(/^\[\[/)?.index;
},
tokenizer(src: string) {
const match = src.match(/^\[\[([^\n]+?)]\]/);
if (match) {
console.log(match);
return {
type: 'internal-link',
raw: match[0],
text: match[1].trim()
};
}
return false;
}
};
export default [InternalLinkExtension];

View File

@ -3,7 +3,6 @@
// import { } from 'svelte-markdown'; // import { } from 'svelte-markdown';
export let depth: number; export let depth: number;
export let raw: string; export let raw: string;
export let text: string;
// const { slug, getOptions } = getContext(key); // const { slug, getOptions } = getContext(key);
// const options = getOptions(); // const options = getOptions();

View File

@ -0,0 +1,9 @@
<script lang="ts">
import Link from 'svelte-icons/io/IoIosLink.svelte';
export let text: string;
</script>
<span class="text-blue-400 underline cursor-not-allowed">
<dfn class="not-italic" title="Internal links are not shared."> {text}</dfn></span
>

View File

@ -0,0 +1,17 @@
// Override function
const tokenizer = {
// Obsidian [[internal links]]
link(src: string) {
const match = src.match(/\[\[([^\n]+?)]\]/);
if (match) {
return {
type: 'internal-link',
raw: match[0],
text: match[1].trim()
};
}
return false;
}
};
export default tokenizer;

View File

@ -30,11 +30,8 @@
if (browser) { if (browser) {
// Decrypt note // Decrypt note
const key = location.hash.slice(1); const key = location.hash.slice(1);
const start = performance.now();
plaintext = decrypt({ ...note, key }); plaintext = decrypt({ ...note, key });
console.log(performance.now() - start);
} }
console.log(note.insert_time);
}); });
</script> </script>