Added logo to homepage
This commit is contained in:
parent
96264f70b8
commit
f1f7b48b22
7 changed files with 691 additions and 4 deletions
36
.vitepress/theme/Layout.vue
Normal file
36
.vitepress/theme/Layout.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<Layout>
|
||||||
|
<template #home>
|
||||||
|
<main class="home" aria-labelledby="main-title">
|
||||||
|
<Profectus style="height: 30vmin; margin: auto; display: block" />
|
||||||
|
<HomeHero />
|
||||||
|
<HomeFeatures />
|
||||||
|
<div class="home-content">
|
||||||
|
<Content />
|
||||||
|
</div>
|
||||||
|
<HomeFooter />
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
</Layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DefaultTheme from 'vitepress/theme';
|
||||||
|
import Profectus from './Profectus.vue';
|
||||||
|
// I want Profectus above the hero text, so I effectively need to recreate the Home class now
|
||||||
|
import HomeHero from './home/HomeHero.vue';
|
||||||
|
import HomeFeatures from './home/HomeFeatures.vue';
|
||||||
|
import HomeFooter from './home/HomeFooter.vue';
|
||||||
|
const { Layout } = DefaultTheme;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.home {
|
||||||
|
padding-top: var(--header-height);
|
||||||
|
}
|
||||||
|
.home-content {
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0px auto;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
195
.vitepress/theme/Profectus.vue
Normal file
195
.vitepress/theme/Profectus.vue
Normal file
|
|
@ -0,0 +1,195 @@
|
||||||
|
<template>
|
||||||
|
<transition appear>
|
||||||
|
<svg
|
||||||
|
id="eaRe02fYmMp1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 228 521"
|
||||||
|
shape-rendering="geometricPrecision"
|
||||||
|
text-rendering="geometricPrecision"
|
||||||
|
>
|
||||||
|
<g id="P">
|
||||||
|
<path
|
||||||
|
d="m 101,512.877 c -17.547386,-5.3519 -50.794681,-10.26296 -80,0 10.737201,-217.43031 5.7244,-300.999 0,-464.9995 0,0 46.6144,-37.1164 80,-42.00002 33.386,-4.883633 86.025,10.45942 120,50.00002 5,30 -4.353,106.6565 -44,156.0005 -34.149,42.5 -130,38.48 -130,92.999 0,102 54,208 54,208 z"
|
||||||
|
style="
|
||||||
|
display: inline;
|
||||||
|
fill: none;
|
||||||
|
stroke: rgb(163, 190, 140);
|
||||||
|
stroke-width: 10;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 16;
|
||||||
|
"
|
||||||
|
id="trunk"
|
||||||
|
class="svg-elem-1"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M 221,55.8775 C 209.023,126.453 185.39,166.835 158.997,191.5 93.783098,252.444 11.718998,217.436 46.999998,304.877"
|
||||||
|
style="
|
||||||
|
display: inline;
|
||||||
|
fill: none;
|
||||||
|
stroke: rgb(163, 190, 140);
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 16;
|
||||||
|
"
|
||||||
|
id="vine2"
|
||||||
|
class="svg-elem-2"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="m 194.5,188 c -11.225,4.447 -19.066,5.134 -35.503,3.5"
|
||||||
|
style="
|
||||||
|
display: inline;
|
||||||
|
fill: none;
|
||||||
|
stroke: rgb(163, 190, 140);
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 16;
|
||||||
|
"
|
||||||
|
id="short_vine4"
|
||||||
|
class="svg-elem-3"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M 73.499996,246.5 C 111.145,245.626 127.011,238.775 156.5,228"
|
||||||
|
style="
|
||||||
|
display: inline;
|
||||||
|
fill: none;
|
||||||
|
stroke: rgb(163, 190, 140);
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 16;
|
||||||
|
"
|
||||||
|
id="short_vine3"
|
||||||
|
class="svg-elem-4"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M 221,55.8775 C 169.5,17.8262 86.0943,44.9468 47,107 c -4.743,7.528 -7.1041,15.373 -8.326,24 -3.5282,24.91 2.4426,56.34 -12.0011,105.5"
|
||||||
|
style="
|
||||||
|
display: inline;
|
||||||
|
fill: none;
|
||||||
|
stroke: rgb(163, 190, 140);
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 16;
|
||||||
|
"
|
||||||
|
id="vine1"
|
||||||
|
class="svg-elem-5"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M 21,47.8775 38.674,131"
|
||||||
|
style="
|
||||||
|
display: inline;
|
||||||
|
fill: none;
|
||||||
|
stroke: rgb(163, 190, 140);
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 16;
|
||||||
|
"
|
||||||
|
id="short_vine2"
|
||||||
|
class="svg-elem-6"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="m 3,326.5 c 13.1783,22.208 16.4863,42.834 21.6997,81"
|
||||||
|
style="
|
||||||
|
display: inline;
|
||||||
|
fill: none;
|
||||||
|
stroke: rgb(163, 190, 140);
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 16;
|
||||||
|
"
|
||||||
|
id="short_vine1"
|
||||||
|
class="svg-elem-7"
|
||||||
|
></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
svg {
|
||||||
|
background: #2e3440;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***************************************************
|
||||||
|
* Generated by SVG Artista on 1/7/2022, 4:39:47 PM
|
||||||
|
* MIT license (https://opensource.org/licenses/MIT)
|
||||||
|
* W. https://svgartista.net
|
||||||
|
**************************************************/
|
||||||
|
|
||||||
|
svg .svg-elem-1 {
|
||||||
|
stroke-dashoffset: 2648.758056640625px;
|
||||||
|
stroke-dasharray: 1324.3790283203125px;
|
||||||
|
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.v-enter-from .svg-elem-1,
|
||||||
|
svg.v-leave-to .svg-elem-1 {
|
||||||
|
stroke-dashoffset: 1324.3790283203125px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg .svg-elem-2 {
|
||||||
|
stroke-dashoffset: 680.4000854492188px;
|
||||||
|
stroke-dasharray: 340.2000427246094px;
|
||||||
|
transition: stroke-dashoffset 1s ease-out 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.v-enter-from .svg-elem-2,
|
||||||
|
svg.v-leave-to .svg-elem-2 {
|
||||||
|
stroke-dashoffset: 340.2000427246094px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg .svg-elem-3 {
|
||||||
|
stroke-dashoffset: 76.21031951904297px;
|
||||||
|
stroke-dasharray: 38.105159759521484px;
|
||||||
|
transition: stroke-dashoffset 1s ease-out 0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.v-enter-from .svg-elem-3,
|
||||||
|
svg.v-leave-to .svg-elem-3 {
|
||||||
|
stroke-dashoffset: 38.105159759521484px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg .svg-elem-4 {
|
||||||
|
stroke-dashoffset: 175.18072509765625px;
|
||||||
|
stroke-dasharray: 87.59036254882812px;
|
||||||
|
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.v-enter-from .svg-elem-4,
|
||||||
|
svg.v-leave-to .svg-elem-4 {
|
||||||
|
stroke-dashoffset: 87.59036254882812px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg .svg-elem-5 {
|
||||||
|
stroke-dashoffset: 671.9447021484375px;
|
||||||
|
stroke-dasharray: 335.97235107421875px;
|
||||||
|
transition: stroke-dashoffset 1s ease-out 0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.v-enter-from .svg-elem-5,
|
||||||
|
svg.v-leave-to .svg-elem-5 {
|
||||||
|
stroke-dashoffset: 335.97235107421875px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg .svg-elem-6 {
|
||||||
|
stroke-dashoffset: 173.96141052246094px;
|
||||||
|
stroke-dasharray: 86.98070526123047px;
|
||||||
|
transition: stroke-dashoffset 1s ease-out 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.v-enter-from .svg-elem-6,
|
||||||
|
svg.v-leave-to .svg-elem-6 {
|
||||||
|
stroke-dashoffset: 86.98070526123047px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg .svg-elem-7 {
|
||||||
|
stroke-dashoffset: 172.99151611328125px;
|
||||||
|
stroke-dasharray: 86.49575805664062px;
|
||||||
|
transition: stroke-dashoffset 1s ease-out 0.85s;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.v-enter-from .svg-elem-7,
|
||||||
|
svg.v-leave-to .svg-elem-7 {
|
||||||
|
stroke-dashoffset: 86.49575805664062px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
143
.vitepress/theme/home/HomeFeatures.vue
Normal file
143
.vitepress/theme/home/HomeFeatures.vue
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
|
||||||
|
const { frontmatter } = useData()
|
||||||
|
|
||||||
|
const hasFeatures = computed(() => {
|
||||||
|
return frontmatter.value.features && frontmatter.value.features.length > 0
|
||||||
|
})
|
||||||
|
|
||||||
|
interface Feature {
|
||||||
|
title?: string
|
||||||
|
details?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const features = computed<Feature[]>(() => {
|
||||||
|
return frontmatter.value.features ? frontmatter.value.features : []
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="hasFeatures" class="home-features">
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="container">
|
||||||
|
<div class="features">
|
||||||
|
<section
|
||||||
|
v-for="(feature, index) in features"
|
||||||
|
:key="index"
|
||||||
|
class="feature"
|
||||||
|
>
|
||||||
|
<h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
|
||||||
|
<p class="details" v-if="feature.details">{{ feature.details }}</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.home-features {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 0 2.75rem;
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero + .home-features {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.home-features {
|
||||||
|
padding: 3.25rem 0 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero + .home-features {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 720px) {
|
||||||
|
.home-features {
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero + .home-features .wrapper {
|
||||||
|
border-top: 1px solid var(--c-divider);
|
||||||
|
padding-top: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.home-hero + .home-features .wrapper {
|
||||||
|
padding-top: 3.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 720px) {
|
||||||
|
.wrapper {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 392px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 720px) {
|
||||||
|
.container {
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.features {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: -20px -24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 20px 24px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 720px) {
|
||||||
|
.feature {
|
||||||
|
width: calc(100% / 3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--c-text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title + .details {
|
||||||
|
padding-top: 0.25rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
50
.vitepress/theme/home/HomeFooter.vue
Normal file
50
.vitepress/theme/home/HomeFooter.vue
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
|
||||||
|
const { frontmatter } = useData()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<footer v-if="frontmatter.footer" class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p class="text">{{ frontmatter.footer }}</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.footer {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 720px) {
|
||||||
|
.footer {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 2rem 1.5rem 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero + .footer .container,
|
||||||
|
.home-features + .footer .container,
|
||||||
|
.home-content + .footer .container {
|
||||||
|
border-top: 1px solid var(--c-divider);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.container {
|
||||||
|
padding: 3rem 1.5rem 3.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--c-text-light);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
161
.vitepress/theme/home/HomeHero.vue
Normal file
161
.vitepress/theme/home/HomeHero.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { useData, withBase } from 'vitepress'
|
||||||
|
import NavLink from './NavLink.vue'
|
||||||
|
|
||||||
|
const { site, frontmatter } = useData()
|
||||||
|
|
||||||
|
const showHero = computed(() => {
|
||||||
|
const { heroImage, heroText, tagline, actionLink, actionText } =
|
||||||
|
frontmatter.value
|
||||||
|
return heroImage || heroText || tagline || (actionLink && actionText)
|
||||||
|
})
|
||||||
|
|
||||||
|
const heroText = computed(() => frontmatter.value.heroText || site.value.title)
|
||||||
|
const tagline = computed(
|
||||||
|
() => frontmatter.value.tagline || site.value.description
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<header v-if="showHero" class="home-hero">
|
||||||
|
<figure v-if="frontmatter.heroImage" class="figure">
|
||||||
|
<img
|
||||||
|
class="image"
|
||||||
|
:src="withBase(frontmatter.heroImage)"
|
||||||
|
:alt="frontmatter.heroAlt"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<h1 v-if="heroText" id="main-title" class="title">{{ heroText }}</h1>
|
||||||
|
<p v-if="tagline" class="tagline">{{ tagline }}</p>
|
||||||
|
|
||||||
|
<NavLink
|
||||||
|
v-if="frontmatter.actionLink && frontmatter.actionText"
|
||||||
|
:item="{ link: frontmatter.actionLink, text: frontmatter.actionText }"
|
||||||
|
class="action"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<NavLink
|
||||||
|
v-if="frontmatter.altActionLink && frontmatter.altActionText"
|
||||||
|
:item="{
|
||||||
|
link: frontmatter.altActionLink,
|
||||||
|
text: frontmatter.altActionText
|
||||||
|
}"
|
||||||
|
class="action alt"
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.home-hero {
|
||||||
|
margin: 2.5rem 0 2.75rem;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.home-hero {
|
||||||
|
margin: 3.5rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 720px) {
|
||||||
|
.home-hero {
|
||||||
|
margin: 4rem 0 4.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.title {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 720px) {
|
||||||
|
.title {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--c-text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.tagline {
|
||||||
|
line-height: 1.2;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action.alt {
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.action {
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action :deep(.item) {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 20px;
|
||||||
|
line-height: 44px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--c-bg);
|
||||||
|
background-color: var(--c-brand);
|
||||||
|
border: 2px solid var(--c-brand);
|
||||||
|
transition: background-color 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action.alt :deep(.item) {
|
||||||
|
background-color: var(--c-bg);
|
||||||
|
color: var(--c-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action :deep(.item:hover) {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--c-bg);
|
||||||
|
background-color: var(--c-brand-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.action :deep(.item) {
|
||||||
|
padding: 0 24px;
|
||||||
|
line-height: 52px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
100
.vitepress/theme/home/NavLink.vue
Normal file
100
.vitepress/theme/home/NavLink.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, toRefs } from 'vue'
|
||||||
|
import { useRoute, withBase } from 'vitepress'
|
||||||
|
import { useNavLink } from '../composables/navLink'
|
||||||
|
import OutboundLink from './icons/OutboundLink.vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
item: {
|
||||||
|
text: string
|
||||||
|
target?: string
|
||||||
|
rel?: string
|
||||||
|
ariaLabel?: string
|
||||||
|
activeMatch?: string
|
||||||
|
link: string
|
||||||
|
}
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const propsRefs = toRefs(props)
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const linkProps = computed(() => {
|
||||||
|
const routePath = normalizePath(`/${route.data.relativePath}`)
|
||||||
|
|
||||||
|
let active = false
|
||||||
|
if (propsRefs.item.value.activeMatch) {
|
||||||
|
active = new RegExp(propsRefs.item.value.activeMatch).test(routePath)
|
||||||
|
} else {
|
||||||
|
const itemPath = normalizePath(propsRefs.item.value.link)
|
||||||
|
active =
|
||||||
|
itemPath === '/'
|
||||||
|
? itemPath === routePath
|
||||||
|
: routePath.startsWith(itemPath)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
class: {
|
||||||
|
active
|
||||||
|
},
|
||||||
|
href: withBase(propsRefs.item.value.link),
|
||||||
|
target: propsRefs.item.value.target || null,
|
||||||
|
rel: propsRefs.item.value.rel || null,
|
||||||
|
'aria-label': propsRefs.item.value.ariaLabel
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function normalizePath(path: string): string {
|
||||||
|
return path
|
||||||
|
.replace(/#.*$/, '')
|
||||||
|
.replace(/\?.*$/, '')
|
||||||
|
.replace(/\.(html|md)$/, '')
|
||||||
|
.replace(/\/index$/, '/')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="nav-link">
|
||||||
|
<a class="item" v-bind="linkProps">
|
||||||
|
{{ item.text }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.item {
|
||||||
|
display: block;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
line-height: 36px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--c-text);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:hover,
|
||||||
|
.item.active {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--c-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item.external:hover {
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
color: var(--c-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 720px) {
|
||||||
|
.item {
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:hover,
|
||||||
|
.item.active {
|
||||||
|
border-bottom-color: var(--c-brand);
|
||||||
|
color: var(--c-text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
import DefaultTheme from 'vitepress/theme'
|
import DefaultTheme from 'vitepress/theme';
|
||||||
import './vars.css'
|
import Layout from './Layout.vue';
|
||||||
|
import './vars.css';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
...DefaultTheme
|
...DefaultTheme,
|
||||||
}
|
Layout
|
||||||
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue