Peaceultime
/
obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tag Prose, CommentSide fixes and standard component initiation

This commit is contained in:
Peaceultime 2024-09-04 14:11:32 +02:00
parent 2b293a0c1a
commit 6d3efea784
12 changed files with 72 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

2
components/Input.vue → components/InputField.vue
View File

@ -16,7 +16,7 @@ watchEffect(() => err.value = props.error);
<template></template> <template></template>
<div class="m-1"> <div class="m-1">
<label v-if="title" class="pe-4">{{ title }}</label> <label v-if="title" class="pe-4">{{ title }}</label>
<input @input="err = false" class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 border border-light-35 dark:border-dark-35" :class="{ 'input-has-error': !!err }" v-model="model" <Input @input="err = false" :class="{ 'input-has-error': !!err }" v-model="model"
v-bind="$attrs" /> v-bind="$attrs" />
<span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span> <span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
</div> </div>

52
components/MarkdownRenderer.vue
View File

@ -21,6 +21,7 @@ import ProseOl from '~/components/prose/ProseOl.vue';
import ProseLi from '~/components/prose/ProseLi.vue'; import ProseLi from '~/components/prose/ProseLi.vue';
import ProseStrong from '~/components/prose/ProseStrong.vue'; import ProseStrong from '~/components/prose/ProseStrong.vue';
import ProseTable from '~/components/prose/ProseTable.vue'; import ProseTable from '~/components/prose/ProseTable.vue';
import ProseTag from '~/components/prose/ProseTag.vue';
import ProseThead from '~/components/prose/ProseThead.vue'; import ProseThead from '~/components/prose/ProseThead.vue';
import ProseTbody from '~/components/prose/ProseTbody.vue'; import ProseTbody from '~/components/prose/ProseTbody.vue';
import ProseTd from '~/components/prose/ProseTd.vue'; import ProseTd from '~/components/prose/ProseTd.vue';
@ -29,31 +30,32 @@ import ProseTr from '~/components/prose/ProseTr.vue';
import ProseScript from '~/components/prose/ProseScript.vue'; import ProseScript from '~/components/prose/ProseScript.vue';
const proseList = { const proseList = {
"p": ProseP, "p": ProseP,
"a": ProseA, "a": ProseA,
"blockquote": ProseBlockquote, "blockquote": ProseBlockquote,
"code": ProseCode, "code": ProseCode,
"pre": ProsePre, "pre": ProsePre,
"em": ProseEm, "em": ProseEm,
"h1": ProseH1, "h1": ProseH1,
"h2": ProseH2, "h2": ProseH2,
"h3": ProseH3, "h3": ProseH3,
"h4": ProseH4, "h4": ProseH4,
"h5": ProseH5, "h5": ProseH5,
"h6": ProseH6, "h6": ProseH6,
"hr": ProseHr, "hr": ProseHr,
"img": ProseImg, "img": ProseImg,
"ul": ProseUl, "ul": ProseUl,
"ol": ProseOl, "ol": ProseOl,
"li": ProseLi, "li": ProseLi,
"strong": ProseStrong, "strong": ProseStrong,
"table": ProseTable, "table": ProseTable,
"thead": ProseThead, "tag": ProseTag,
"tbody": ProseTbody, "thead": ProseThead,
"td": ProseTd, "tbody": ProseTbody,
"th": ProseTh, "td": ProseTd,
"tr": ProseTr, "th": ProseTh,
"script": ProseScript "tr": ProseTr,
"script": ProseScript
}; };
export default defineComponent({ export default defineComponent({

2
components/SearchView.vue
View File

@ -41,7 +41,7 @@ async function debounced()
<template> <template>
<div class="w-full border border-light-30 dark:border-dark-30"> <div class="w-full border border-light-30 dark:border-dark-30">
<input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none w-full outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40" type="text" placeholder="Recherche" v-model="input" @input="search"> <Input class="w-full" type="text" placeholder="Recherche" v-model="input" @input="search" />
</div> </div>
<Teleport to="#teleports" v-if="input !== '' && !!pos"> <Teleport to="#teleports" v-if="input !== '' && !!pos">
<div class="absolute z-50 border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 divide-y divide-light-35 dark:divide-dark-35 max-h-96 overflow-auto <div class="absolute z-50 border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 divide-y divide-light-35 dark:divide-dark-35 max-h-96 overflow-auto

9
components/explorer/CommentSide.vue
View File

@ -1,9 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
const { data: comments } = await useFetch(`/api/project/1/comment`, { const props = defineProps({
query: { comments: {
path: unifySlug(useRoute().params.slug) type: [Object],
required: true,
} }
}); })
</script> </script>
<template> <template>

21
components/prose/ProseA.vue
View File

@ -44,23 +44,4 @@ const { data, status } = await useFetch(`/api/project/${project.value}/file`, {
dedupe: 'defer', dedupe: 'defer',
ignoreResponseError: true, ignoreResponseError: true,
}); });
</script> </script>
<style>
.tag
{
@apply bg-accent-blue;
@apply bg-opacity-10;
@apply hover:bg-opacity-20;
@apply text-accent-blue;
@apply text-sm;
@apply px-1;
@apply ms-1;
@apply pb-0.5;
@apply rounded-full;
@apply rounded-se-none;
@apply border;
@apply border-accent-blue;
@apply border-opacity-30;
}
</style>

5
components/prose/ProseTag.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<span class="cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
#<slot></slot>
</span>
</template>

3
components/standard/Input.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 border border-light-35 dark:border-dark-35" v-bind="$attrs"/>
</template>

BIN
db.sqlite
View File

Binary file not shown.

7
nuxt.config.ts
View File

@ -1,7 +1,12 @@
// https://nuxt.com/docs/api/configuration/nuxt-config // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({ export default defineNuxtConfig({
modules: ["@nuxtjs/color-mode", "nuxt-security", "@nuxtjs/tailwindcss"], modules: [
"@nuxtjs/color-mode",
"nuxt-security",
"@nuxtjs/tailwindcss",
"@vueuse/nuxt"
],
runtimeConfig: { runtimeConfig: {
dbFile: 'db.sqlite', dbFile: 'db.sqlite',
session: { session: {

20
package.json
View File

@ -1,21 +1,27 @@
{ {
"devDependencies": { "devDependencies": {
"@nuxtjs/color-mode": "^3.4.2", "@nuxtjs/color-mode": "^3.4.4",
"@nuxtjs/tailwindcss": "^6.12.1", "@nuxtjs/tailwindcss": "^6.12.1",
"@types/bun": "^1.1.6", "@types/bun": "^1.1.8",
"@types/diff": "^5.2.1", "@types/diff": "^5.2.2",
"hast-util-to-html": "^9.0.1", "@vueuse/nuxt": "^11.0.3",
"nuxt": "^3.12.4", "hast-util-to-html": "^9.0.2",
"nuxt": "^3.13.0",
"nuxt-security": "^2.0.0-rc.9", "nuxt-security": "^2.0.0-rc.9",
"remark-breaks": "^4.0.0", "remark-breaks": "^4.0.0",
"remark-ofm": "link:remark-ofm", "remark-ofm": "link:remark-ofm",
"vue": "^3.4.37", "vue": "^3.5.0",
"vue-router": "^4.4.3", "vue-router": "^4.4.3",
"zod": "^3.23.8" "zod": "^3.23.8"
}, },
"dependencies": { "dependencies": {
"diff": "^5.2.0", "diff": "^5.2.0",
"lodash.capitalize": "^4.2.1", "lodash.capitalize": "^4.2.1",
"remark-frontmatter": "^5.0.0" "rehype-raw": "^7.0.0",
"remark-frontmatter": "^5.0.0",
"remark-gfm": "^4.0.0",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.0",
"unified": "^11.0.5"
} }
} }

25
pages/explorer/[projectId]/[...slug].vue
View File

@ -1,31 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
const route = useRoute();
const { data: content } = await useFetch(`/api/project/${route.params.projectId}/file`, {
query: {
path: unifySlug(route.params.slug)
}
});
definePageMeta({ definePageMeta({
layout: "explorer", layout: "explorer",
}) })
const route = useRoute();
const { data, status } = await useFetch(`/api/project/${route.params.projectId}/file/${encodeURIComponent(unifySlug(route.params.slug))}`);
</script> </script>
<template> <template>
<Head> <Head>
<Title v-if="content && content[0]">{{ content[0].title }}</Title> <Title v-if="data">{{ data.title }}</Title>
</Head> </Head>
<div class="flex-1 flex overflow-hidden"> <div class="flex-1 flex overflow-hidden">
<template v-if="!!content && content[0] && content[0].type == 'Markdown' && !!content[0].content"> <template v-if="!!data && data.type == 'Markdown' && !!data.content">
<div class="md:px-24 ps-8 my-1 whitespace-break-spaces"> <div class="md:px-24 ps-8 my-1 whitespace-break-spaces">
<ProseH1>{{ content[0].title }}</ProseH1> <ProseH1>{{ data.title }}</ProseH1>
<Markdown v-model="content[0].content"></Markdown> <Markdown v-model="data.content"></Markdown>
</div> </div>
<CommentSide class="hidden"></CommentSide> <CommentSide class="hidden" :comments="data.comments"></CommentSide>
</template> </template>
<CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)"></CanvasRenderer> <CanvasRenderer v-else-if="!!data && data.type == 'Canvas' && !!data.content" :canvas="JSON.parse(data.content)"></CanvasRenderer>
<div v-else-if="!!content && content[0]" class="h-100 w-100 flex flex-1 flex-col justify-center items-center"> <div v-else-if="!!data && data" class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher (ou vide)</div> <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher (ou vide)</div>
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est actuellement vide ou impossible à traiter</div> <div class="text-lg text-light-60 dark:text-dark-60">Cette page est actuellement vide ou impossible à traiter</div>
</div> </div>