Confetti
This commit is contained in:
parent
7bc7b75fce
commit
a6252a310d
@ -1,5 +1,6 @@
|
||||
import { fileURLToPath } from 'url';
|
||||
import { defineConfig } from 'vitepress';
|
||||
import footnote from 'markdown-it-footnote'
|
||||
import footnote from 'markdown-it-footnote';
|
||||
|
||||
export default defineConfig({
|
||||
title: 'HPG Romein',
|
||||
@ -59,4 +60,14 @@ export default defineConfig({
|
||||
md.use(footnote);
|
||||
},
|
||||
},
|
||||
|
||||
vite: {
|
||||
resolve: {
|
||||
alias: [
|
||||
{ find: /^.*\/VPDocFooter\.vue$/,
|
||||
replacement: fileURLToPath(new URL('./theme/VPDocFooter.vue', import.meta.url)),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
180
content/.vitepress/theme/VPDocFooter.vue
Normal file
180
content/.vitepress/theme/VPDocFooter.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import confetti from 'canvas-confetti'
|
||||
import { useData } from 'vitepress/dist/client/theme-default/composables/data'
|
||||
import { useEditLink } from 'vitepress/dist/client/theme-default/composables/edit-link'
|
||||
import { usePrevNext } from 'vitepress/dist/client/theme-default/composables/prev-next'
|
||||
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
|
||||
import VPDocFooterLastUpdated from 'vitepress/dist/client/theme-default/components/VPDocFooterLastUpdated.vue'
|
||||
|
||||
const { theme, page, frontmatter } = useData()
|
||||
|
||||
const editLink = useEditLink()
|
||||
const control = usePrevNext()
|
||||
|
||||
const hasEditLink = computed(
|
||||
() => theme.value.editLink && frontmatter.value.editLink !== false
|
||||
)
|
||||
const hasLastUpdated = computed(() => page.value.lastUpdated)
|
||||
const showFooter = computed(
|
||||
() =>
|
||||
hasEditLink.value ||
|
||||
hasLastUpdated.value ||
|
||||
control.value.prev ||
|
||||
control.value.next
|
||||
)
|
||||
|
||||
function showConfetti(event) {
|
||||
confetti({
|
||||
particleCount: 100,
|
||||
spread: 100,
|
||||
origin: {
|
||||
x: event.clientX / window.innerWidth,
|
||||
y: event.clientY / window.innerHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer v-if="showFooter" class="VPDocFooter">
|
||||
<slot name="doc-footer-before" />
|
||||
|
||||
<div v-if="hasEditLink || hasLastUpdated" class="edit-info">
|
||||
<div v-if="hasEditLink" class="edit-link">
|
||||
<VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
|
||||
<span class="vpi-square-pen edit-link-icon" />
|
||||
{{ editLink.text }}
|
||||
</VPLink>
|
||||
</div>
|
||||
|
||||
<div v-if="hasLastUpdated" class="last-updated">
|
||||
<VPDocFooterLastUpdated />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
v-if="control.prev?.link || control.next?.link"
|
||||
class="prev-next"
|
||||
aria-labelledby="doc-footer-aria-label"
|
||||
>
|
||||
<span class="visually-hidden" id="doc-footer-aria-label">Pager</span>
|
||||
|
||||
<div class="pager">
|
||||
<VPLink
|
||||
v-if="control.prev?.link"
|
||||
class="pager-link prev"
|
||||
:href="control.prev.link"
|
||||
>
|
||||
<span
|
||||
class="desc"
|
||||
v-html="theme.docFooter?.prev || 'Previous page'"
|
||||
></span>
|
||||
<span class="title" v-html="control.prev.text"></span>
|
||||
</VPLink>
|
||||
</div>
|
||||
<div class="pager">
|
||||
<VPLink
|
||||
v-if="control.next?.link"
|
||||
class="pager-link next"
|
||||
:href="control.next.link"
|
||||
@click="showConfetti"
|
||||
>
|
||||
<span
|
||||
class="desc"
|
||||
v-html="theme.docFooter?.next || 'Next page'"
|
||||
></span>
|
||||
<span class="title" v-html="control.next.text"></span>
|
||||
</VPLink>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPDocFooter {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.edit-info {
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.edit-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-link-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.edit-link-button:hover {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.edit-link-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.prev-next {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 24px;
|
||||
display: grid;
|
||||
grid-row-gap: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.prev-next {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.pager-link {
|
||||
display: block;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 11px 16px 13px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
.pager-link:hover {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.pager-link.next {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,7 @@
|
||||
import DefaultTheme from 'vitepress/theme';
|
||||
import './custom.css';
|
||||
|
||||
export default DefaultTheme;
|
||||
/** @type {import('vitepress').Theme} */
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
};
|
||||
|
||||
12
package-lock.json
generated
12
package-lock.json
generated
@ -4,6 +4,9 @@
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"canvas-confetti": "^1.9.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@garraflavatra/yeslint": "^1.1.0",
|
||||
"eslint": "^8.57.0",
|
||||
@ -1714,6 +1717,15 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/canvas-confetti": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz",
|
||||
"integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==",
|
||||
"funding": {
|
||||
"type": "donate",
|
||||
"url": "https://www.paypal.me/kirilvatev"
|
||||
}
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
|
||||
@ -17,5 +17,8 @@
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"canvas-confetti": "^1.9.3"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user