Tag Prose, CommentSide fixes and standard component initiation
This commit is contained in:
parent
2b293a0c1a
commit
6d3efea784
|
|
@ -16,7 +16,7 @@ watchEffect(() => err.value = props.error);
|
|||
<template></template>
|
||||
<div class="m-1">
|
||||
<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" />
|
||||
<span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
|
||||
</div>
|
||||
|
|
@ -21,6 +21,7 @@ import ProseOl from '~/components/prose/ProseOl.vue';
|
|||
import ProseLi from '~/components/prose/ProseLi.vue';
|
||||
import ProseStrong from '~/components/prose/ProseStrong.vue';
|
||||
import ProseTable from '~/components/prose/ProseTable.vue';
|
||||
import ProseTag from '~/components/prose/ProseTag.vue';
|
||||
import ProseThead from '~/components/prose/ProseThead.vue';
|
||||
import ProseTbody from '~/components/prose/ProseTbody.vue';
|
||||
import ProseTd from '~/components/prose/ProseTd.vue';
|
||||
|
|
@ -48,6 +49,7 @@ const proseList = {
|
|||
"li": ProseLi,
|
||||
"strong": ProseStrong,
|
||||
"table": ProseTable,
|
||||
"tag": ProseTag,
|
||||
"thead": ProseThead,
|
||||
"tbody": ProseTbody,
|
||||
"td": ProseTd,
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ async function debounced()
|
|||
|
||||
<template>
|
||||
<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>
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
const { data: comments } = await useFetch(`/api/project/1/comment`, {
|
||||
query: {
|
||||
path: unifySlug(useRoute().params.slug)
|
||||
const props = defineProps({
|
||||
comments: {
|
||||
type: [Object],
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -45,22 +45,3 @@ const { data, status } = await useFetch(`/api/project/${project.value}/file`, {
|
|||
ignoreResponseError: true,
|
||||
});
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,7 +1,12 @@
|
|||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: ["@nuxtjs/color-mode", "nuxt-security", "@nuxtjs/tailwindcss"],
|
||||
modules: [
|
||||
"@nuxtjs/color-mode",
|
||||
"nuxt-security",
|
||||
"@nuxtjs/tailwindcss",
|
||||
"@vueuse/nuxt"
|
||||
],
|
||||
runtimeConfig: {
|
||||
dbFile: 'db.sqlite',
|
||||
session: {
|
||||
|
|
|
|||
20
package.json
20
package.json
|
|
@ -1,21 +1,27 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"@nuxtjs/color-mode": "^3.4.2",
|
||||
"@nuxtjs/color-mode": "^3.4.4",
|
||||
"@nuxtjs/tailwindcss": "^6.12.1",
|
||||
"@types/bun": "^1.1.6",
|
||||
"@types/diff": "^5.2.1",
|
||||
"hast-util-to-html": "^9.0.1",
|
||||
"nuxt": "^3.12.4",
|
||||
"@types/bun": "^1.1.8",
|
||||
"@types/diff": "^5.2.2",
|
||||
"@vueuse/nuxt": "^11.0.3",
|
||||
"hast-util-to-html": "^9.0.2",
|
||||
"nuxt": "^3.13.0",
|
||||
"nuxt-security": "^2.0.0-rc.9",
|
||||
"remark-breaks": "^4.0.0",
|
||||
"remark-ofm": "link:remark-ofm",
|
||||
"vue": "^3.4.37",
|
||||
"vue": "^3.5.0",
|
||||
"vue-router": "^4.4.3",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"diff": "^5.2.0",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +1,26 @@
|
|||
<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({
|
||||
layout: "explorer",
|
||||
})
|
||||
|
||||
const route = useRoute();
|
||||
const { data, status } = await useFetch(`/api/project/${route.params.projectId}/file/${encodeURIComponent(unifySlug(route.params.slug))}`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<Title v-if="content && content[0]">{{ content[0].title }}</Title>
|
||||
<Title v-if="data">{{ data.title }}</Title>
|
||||
</Head>
|
||||
<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">
|
||||
<ProseH1>{{ content[0].title }}</ProseH1>
|
||||
<Markdown v-model="content[0].content"></Markdown>
|
||||
<ProseH1>{{ data.title }}</ProseH1>
|
||||
<Markdown v-model="data.content"></Markdown>
|
||||
</div>
|
||||
<CommentSide class="hidden"></CommentSide>
|
||||
<CommentSide class="hidden" :comments="data.comments"></CommentSide>
|
||||
</template>
|
||||
<CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)"></CanvasRenderer>
|
||||
<div v-else-if="!!content && content[0]" class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
|
||||
<CanvasRenderer v-else-if="!!data && data.type == 'Canvas' && !!data.content" :canvas="JSON.parse(data.content)"></CanvasRenderer>
|
||||
<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-lg text-light-60 dark:text-dark-60">Cette page est actuellement vide ou impossible à traiter</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue