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

Fix callout disabled and update dependencies

This commit is contained in:
Peaceultime 2024-12-05 13:50:59 +01:00
parent 4150b69ba3
commit 3b919075ef
4 changed files with 38 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -23,6 +23,7 @@ logs
.env.* .env.*
!.env.example !.env.example
bun.lockb
db.sqlite db.sqlite
db.sqlite-wal db.sqlite-wal
db.sqlite-shm db.sqlite-shm

BIN
bun.lockb
View File

Binary file not shown.

42
components/prose/ProseCallout.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<CollapsibleRoot :disabled="fold === undefined" :defaultOpen="fold === true || fold === undefined" class="callout group overflow-hidden my-4 p-3 ps-4 bg-blend-lighten !bg-opacity-25 border-l-4 inline-block pe-8 bg-light-blue dark:bg-dark-blue" :data-type="type"> <CollapsibleRoot :disabled="disabled" :defaultOpen="fold === true || fold === undefined" class="callout group overflow-hidden my-4 p-3 ps-4 bg-blend-lighten !bg-opacity-25 border-l-4 inline-block pe-8 bg-light-blue dark:bg-dark-blue" :data-type="type">
<CollapsibleTrigger asChild> <CollapsibleTrigger>
<div :class="{ 'cursor-pointer': fold !== undefined }" class="flex flex-row items-center justify-start ps-2"> <div :class="{ 'cursor-pointer': fold !== undefined }" class="flex flex-row items-center justify-start ps-2">
<Icon :icon="calloutIconByType[type] ?? defaultCalloutIcon" class="w-6 h-6 stroke-2 float-start me-2" /> <Icon :icon="calloutIconByType[type] ?? defaultCalloutIcon" class="w-6 h-6 stroke-2 float-start me-2" />
<span v-if="title" class="block font-bold">{{ title }}</span> <span v-if="title" class="block font-bold">{{ title }}</span>
@ -35,43 +35,50 @@ const defaultCalloutIcon = 'radix-icons:info-circled';
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue/dist/iconify.js'; import { Icon } from '@iconify/vue/dist/iconify.js';
const { type, title, fold } = defineProps<{ const { type, title, fold } = defineProps<{
type: string; type: string;
title?: string; title?: string;
fold?: boolean; fold?: boolean;
}>(); }>();
const disabled = computed(() => fold === undefined);
</script> </script>
<style> <style>
.callout[data-type="abstract"], .callout[data-type="abstract"],
.callout[data-type="summary"], .callout[data-type="summary"],
.callout[data-type="tldr"] { .callout[data-type="tldr"]
{
@apply bg-light-cyan; @apply bg-light-cyan;
@apply dark:bg-dark-cyan; @apply dark:bg-dark-cyan;
@apply text-light-cyan; @apply text-light-cyan;
@apply dark:text-dark-cyan; @apply dark:text-dark-cyan;
} }
.callout[data-type="info"] { .callout[data-type="info"]
{
@apply bg-light-blue; @apply bg-light-blue;
@apply dark:bg-dark-blue; @apply dark:bg-dark-blue;
@apply text-light-blue; @apply text-light-blue;
@apply dark:text-dark-blue; @apply dark:text-dark-blue;
} }
.callout[data-type="todo"] { .callout[data-type="todo"]
{
@apply bg-light-blue; @apply bg-light-blue;
@apply dark:bg-dark-blue; @apply dark:bg-dark-blue;
@apply text-light-blue; @apply text-light-blue;
@apply dark:text-dark-blue; @apply dark:text-dark-blue;
} }
.callout[data-type="important"] { .callout[data-type="important"]
{
@apply bg-light-cyan; @apply bg-light-cyan;
@apply dark:bg-dark-cyan; @apply dark:bg-dark-cyan;
@apply text-light-cyan; @apply text-light-cyan;
@apply dark:text-dark-cyan; @apply dark:text-dark-cyan;
} }
.callout[data-type="tip"], .callout[data-type="tip"],
.callout[data-type="hint"] { .callout[data-type="hint"]
{
@apply bg-light-cyan; @apply bg-light-cyan;
@apply dark:bg-dark-cyan; @apply dark:bg-dark-cyan;
@apply text-light-cyan; @apply text-light-cyan;
@ -79,7 +86,8 @@ const { type, title, fold } = defineProps<{
} }
.callout[data-type="success"], .callout[data-type="success"],
.callout[data-type="check"], .callout[data-type="check"],
.callout[data-type="done"] { .callout[data-type="done"]
{
@apply bg-light-green; @apply bg-light-green;
@apply dark:bg-dark-green; @apply dark:bg-dark-green;
@apply text-light-green; @apply text-light-green;
@ -87,7 +95,8 @@ const { type, title, fold } = defineProps<{
} }
.callout[data-type="question"], .callout[data-type="question"],
.callout[data-type="help"], .callout[data-type="help"],
.callout[data-type="faq"] { .callout[data-type="faq"]
{
@apply bg-light-orange; @apply bg-light-orange;
@apply dark:bg-dark-orange; @apply dark:bg-dark-orange;
@apply text-light-orange; @apply text-light-orange;
@ -95,7 +104,8 @@ const { type, title, fold } = defineProps<{
} }
.callout[data-type="warning"], .callout[data-type="warning"],
.callout[data-type="caution"], .callout[data-type="caution"],
.callout[data-type="attention"] { .callout[data-type="attention"]
{
@apply bg-light-orange; @apply bg-light-orange;
@apply dark:bg-dark-orange; @apply dark:bg-dark-orange;
@apply text-light-orange; @apply text-light-orange;
@ -103,26 +113,30 @@ const { type, title, fold } = defineProps<{
} }
.callout[data-type="failure"], .callout[data-type="failure"],
.callout[data-type="fail"], .callout[data-type="fail"],
.callout[data-type="missing"] { .callout[data-type="missing"]
{
@apply bg-light-red; @apply bg-light-red;
@apply dark:bg-dark-red; @apply dark:bg-dark-red;
@apply text-light-red; @apply text-light-red;
@apply dark:text-dark-red; @apply dark:text-dark-red;
} }
.callout[data-type="danger"], .callout[data-type="danger"],
.callout[data-type="error"] { .callout[data-type="error"]
{
@apply bg-light-red; @apply bg-light-red;
@apply dark:bg-dark-red; @apply dark:bg-dark-red;
@apply text-light-red; @apply text-light-red;
@apply dark:text-dark-red; @apply dark:text-dark-red;
} }
.callout[data-type="bug"] { .callout[data-type="bug"]
{
@apply bg-light-red; @apply bg-light-red;
@apply dark:bg-dark-red; @apply dark:bg-dark-red;
@apply text-light-red; @apply text-light-red;
@apply dark:text-dark-red; @apply dark:text-dark-red;
} }
.callout[data-type="example"] { .callout[data-type="example"]
{
@apply bg-light-purple; @apply bg-light-purple;
@apply dark:bg-dark-purple; @apply dark:bg-dark-purple;
@apply text-light-purple; @apply text-light-purple;

18
package.json
View File

@ -14,17 +14,17 @@
"@nuxtjs/sitemap": "^7.0.0", "@nuxtjs/sitemap": "^7.0.0",
"@nuxtjs/tailwindcss": "^6.12.2", "@nuxtjs/tailwindcss": "^6.12.2",
"@vueuse/gesture": "^2.0.0", "@vueuse/gesture": "^2.0.0",
"@vueuse/math": "^11.2.0", "@vueuse/math": "^11.3.0",
"@vueuse/nuxt": "^11.1.0", "@vueuse/nuxt": "^11.3.0",
"codemirror": "^6.0.1", "codemirror": "^6.0.1",
"drizzle-orm": "^0.35.3", "drizzle-orm": "^0.35.3",
"hast": "^1.0.0", "hast": "^1.0.0",
"lodash.capitalize": "^4.2.1", "lodash.capitalize": "^4.2.1",
"mdast-util-find-and-replace": "^3.0.1", "mdast-util-find-and-replace": "^3.0.1",
"nodemailer": "^6.9.16", "nodemailer": "^6.9.16",
"nuxt": "^3.14.159", "nuxt": "^3.14.1592",
"nuxt-security": "^2.0.0", "nuxt-security": "^2.1.5",
"radix-vue": "^1.9.8", "radix-vue": "^1.9.10",
"rehype-raw": "^7.0.0", "rehype-raw": "^7.0.0",
"remark-breaks": "^4.0.0", "remark-breaks": "^4.0.0",
"remark-frontmatter": "^5.0.0", "remark-frontmatter": "^5.0.0",
@ -40,12 +40,12 @@
"zod": "^3.23.8" "zod": "^3.23.8"
}, },
"devDependencies": { "devDependencies": {
"@types/bun": "^1.1.12", "@types/bun": "^1.1.14",
"@types/lodash.capitalize": "^4.2.9", "@types/lodash.capitalize": "^4.2.9",
"@types/nodemailer": "^6.4.16", "@types/nodemailer": "^6.4.17",
"@types/unist": "^3.0.3", "@types/unist": "^3.0.3",
"better-sqlite3": "^11.5.0", "better-sqlite3": "^11.6.0",
"bun-types": "^1.1.34", "bun-types": "^1.1.38",
"drizzle-kit": "^0.26.2", "drizzle-kit": "^0.26.2",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"rehype-stringify": "^10.0.1" "rehype-stringify": "^10.0.1"