riyyi/website-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make tooltips render automatically

Browse Source
This commit is contained in:
Riyyi
2025-04-02 22:50:08 +02:00
parent 8110667234
commit 5746bc7016
11 changed files with 107 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/nuxtjs.yml
+1 -1
View File
@@ -40,7 +40,7 @@ jobs:
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: "20"
node-version: "22"
cache: npm
- name: Install dependencies
# run: bun install
nuxt.config.ts
+4
View File
@@ -16,6 +16,7 @@ export default defineNuxtConfig({
]
},
toc: {
// @ts-ignore
title: "Table of Contents",
depth: 4, // include h4 headings
searchDepth: 2
@@ -51,6 +52,9 @@ export default defineNuxtConfig({
},
srcDir: "src/",
ssr: false,
typescript: {
typeCheck: true
},
vite: {
plugins: [
ViteComponents({
package-lock.json
Generated
+19 -1
View File
@@ -30,7 +30,8 @@
"nuxt": "^3.14.1592",
"typescript": "^5.7.2",
"unplugin-icons": "^22.1.0",
"unplugin-vue-components": "^28.4.1"
"unplugin-vue-components": "^28.4.1",
"vue-tsc": "^2.2.8"
}
},
"node_modules/@ampproject/remapping": {
@@ -12502,6 +12503,23 @@
"vue": "^3.2.0"
}
},
"node_modules/vue-tsc": {
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.8.tgz",
"integrity": "sha512-jBYKBNFADTN+L+MdesNX/TB3XuDSyaWynKMDgR+yCSln0GQ9Tfb7JS2lr46s2LiFUT1WsmfWsSvIElyxzOPqcQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@volar/typescript": "~2.4.11",
"@vue/language-core": "2.2.8"
},
"bin": {
"vue-tsc": "bin/vue-tsc.js"
},
"peerDependencies": {
"typescript": ">=5.0.0"
}
},
"node_modules/web-namespaces": {
"version": "2.0.1",
"dev": true,
package.json
+2 -1
View File
@@ -33,7 +33,8 @@
"nuxt": "^3.14.1592",
"typescript": "^5.7.2",
"unplugin-icons": "^22.1.0",
"unplugin-vue-components": "^28.4.1"
"unplugin-vue-components": "^28.4.1",
"vue-tsc": "^2.2.8"
},
"trustedDependencies": [
"@parcel/watcher"
src/app.vue
+13 -9
View File
@@ -6,7 +6,11 @@
</template>
<script setup lang="ts">
const bootstrap = useNuxtApp().$bootstrap;
import { useRouter } from "vue-router";
import { useStateStore } from "@/stores/stateStore";
const router = useRouter();
const store = useStateStore();
useHead({
titleTemplate: (titleChunk: string | undefined): string | null => {
@@ -14,14 +18,14 @@ useHead({
}
})
// Access bootstrap after the DOM is ready
onMounted(() => {
// Initialize popovers
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
// Init Bootstrap after navigation
router.afterEach((_to, _from) => {
setTimeout(() => { store.initBootstrap(); }, 500);
});
// Initialize tooltips
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
// Init Bootstrap on initial page load, after the DOM is ready
onMounted(() => {
// @ts-ignore
store.initBootstrap();
});
</script>
src/components/articles/TableOfContents.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<a href="#">Overview</a>
</li>
</ul>
<ArticlesTableOfContentsLink :links="toc.links" :first="true" class="font-smaller mb-0" />
<ArticlesTableOfContentsLink :links="toc.links" :first="true" class="font-smaller" />
</aside>
</template>
src/components/articles/TableOfContentsLink.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<ul>
<ul class="mb-0">
<template v-for="link in links" :key="link.id">
<li>
<a :href="'#' + link.id">{{ link.text }}</a>
src/components/content/ProsePre.vue
+44 -9
View File
@@ -1,12 +1,16 @@
<template>
<div class="position-relative">
<div @click="copyCode" class="position-absolute" style="top: 10px; right: 10px;">
<template v-if="copied">
<code>Copied!</code>
</template>
<button class="copy text-secondary" title="Copy code">
<button class="copy text-secondary" :class="copied ? 'd-none' : ''" data-bs-toggle="tooltip"
data-bs-placement="top" data-bs-title="Copy to clipboard" data-bs-hover="hover">
<IFaClone />
</button>
<button class="copy text-secondary" :class="!copied ? 'd-none' : ''" data-bs-toggle="tooltip"
data-bs-placement="top" data-bs-title="Copied!" data-bs-trigger="manual" data-bs-show
ref="stickyTooltipElement">
<IFaCheck class="text-success" />
</button>
</div>
<pre :class="$props.class"><code class="language-{{ language }}"><slot /></code></pre>
</div>
@@ -30,7 +34,9 @@ button.copy:hover {
</style>
<script setup lang="ts">
import { ref } from "vue"
import { nextTick, ref, watch } from "vue"
const bootstrap = useNuxtApp().$bootstrap;
defineProps({
code: {
@@ -59,19 +65,48 @@ defineProps({
}
});
const copied = ref(false);
const copied = ref<boolean>(false);
const copyCode = async (e: Event) => {
try {
const target = e.currentTarget as HTMLElement;
const element = target.nextElementSibling as HTMLPreElement | null;
const textToCopy = element ? element.textContent.trim() : "";
const textToCopy = element ? element.textContent!.trim() : "";
await navigator.clipboard.writeText(textToCopy);
copied.value = true;
setTimeout(() => (copied.value = false), 2000);
setTimeout(() => { copied.value = false; }, 2000);
} catch (err) {
console.error('Failed to copy:', err)
console.error('Failed to copy:', err);
}
}
// Clicked tooltip
const stickyTooltip = ref<any>();
const stickyTooltipElement = ref<HTMLInputElement | null>(null);
watch(copied, (newValue, oldValue) => {
if (newValue !== oldValue) {
if (newValue) {
// Ensure the DOM is updated before executing
nextTick(() => {
// @ts-ignore
stickyTooltip.value = new bootstrap.Tooltip(stickyTooltipElement.value, { trigger: "manual" });
stickyTooltip.value.show();
});
}
else {
if (stickyTooltip.value) {
stickyTooltip.value.dispose();
stickyTooltip.value = null;
}
}
}
});
onBeforeUnmount(() => {
if (stickyTooltip.value) {
stickyTooltip.value.dispose();
stickyTooltip.value = null;
}
});
</script>
src/plugins/bootstrap.client.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min";
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.provide("bootstrap", bootstrap);
})
});
src/stores/stateStore.ts
+19 -1
View File
@@ -1,6 +1,9 @@
import { defineStore } from "pinia"
import { ref } from "vue";
// @ts-ignore
import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min";
export const useStateStore = defineStore("state", () => {
const colorMode = ref<string>("light");
@@ -10,7 +13,22 @@ export const useStateStore = defineStore("state", () => {
html.setAttribute('data-bs-theme', colorMode.value);
};
return { colorMode, toggleColorMode }
const popoverList = ref<any[]>([]);
const tooltipList = ref<any[]>([]);
const initBootstrap = (): void => {
// Initialize popovers
popoverList.value.forEach(popover => popover.dispose());
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
popoverList.value = [...popoverTriggerList].map(popover => new bootstrap.Popover(popover));
// Initialize tooltips
tooltipList.value.forEach(tooltip => tooltip.dispose());
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]:not([data-bs-show])');
tooltipList.value = [...tooltipTriggerList].map(tooltip => new bootstrap.Tooltip(tooltip));
};
return { colorMode, toggleColorMode, initBootstrap }
}, {
persist: process.env.NODE_ENV === 'development' ? true : false,
})
tsconfig.json
+1 -7
View File
@@ -1,10 +1,4 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"types": [
"bootstrap",
"unplugin-icons/types/vue"
]
}
"extends": "./.nuxt/tsconfig.json"
}