Skip to content

Commit 23aec72

Browse files
AndreyYolkinAndreyYolkin
committed
docs: declarative hero copy via slot, theme contrast fixes
Cherry-picks the non-experimental parts of #355 (skips the unstable animated logo): - Replace imperative createApp().mount() + querySelector hero-copy injection with the VitePress home-hero-actions-before-actions slot (requires VitePress 2.0.0-alpha.17); drop the now-duplicate npx action from the home hero and its dead command-button CSS - Guard Swetrix init behind inBrowser in the theme enhanceApp - Improve light/dark custom-block + brand button contrast and recolor the Shiki github-light theme for AA contrast - HomeHeroCopy: use shallowRef, add .home spacing
1 parent c52f5fa commit 23aec72

9 files changed

Lines changed: 113 additions & 145 deletions

File tree

‎docs/.vitepress/config.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { ThemeRegistration } from 'shiki'
2+
import ghLight from '@shikijs/themes/github-light'
13
import { withPwa } from '@vite-pwa/vitepress'
24
import { defineConfig } from 'vitepress'
35
import llmstxt, { copyOrDownloadAsMarkdownButtons } from 'vitepress-plugin-llms'
@@ -7,6 +9,19 @@ import { pwa } from './pwa'
79
import { buildEnd, transformHtml } from './sitemap'
810
import { transformHead } from './transform-head'
911

12+
function replaceThemeColors (
13+
theme: ThemeRegistration,
14+
replacements: Record<string, string>,
15+
): ThemeRegistration {
16+
let themeString = JSON.stringify(theme)
17+
for (const [oldColor, newColor] of Object.entries(replacements)) {
18+
themeString = themeString.replaceAll(oldColor, newColor)
19+
themeString = themeString.replaceAll(oldColor.toLowerCase(), newColor)
20+
themeString = themeString.replaceAll(oldColor.toUpperCase(), newColor)
21+
}
22+
return JSON.parse(themeString)
23+
}
24+
1025
export default withPwa(defineConfig({
1126
lang: 'en-US',
1227
title: 'Vuetify Nuxt Module',
@@ -34,7 +49,13 @@ export default withPwa(defineConfig({
3449
lastUpdated: true,
3550
markdown: {
3651
theme: {
37-
light: 'github-light',
52+
light: replaceThemeColors(ghLight, {
53+
'#22863A': '#227436', // green
54+
'#E36209': '#BA4D02', // orange
55+
'#D73A49': '#CD3443', // red
56+
'#B31D28': '#AC222F', // red
57+
'#6A737D': '#646b75', // gray comments
58+
}),
3859
dark: 'github-dark',
3960
},
4061
config (md) {

‎docs/.vitepress/theme/VuetifyLayout.vue‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<script setup lang="ts">
2-
import { useData, useRoute } from 'vitepress'
2+
import { useData } from 'vitepress'
33
import DefaultTheme from 'vitepress/theme'
4-
import { createApp, nextTick, onMounted, onUnmounted, provide, watch } from 'vue'
4+
import { nextTick, onMounted, onUnmounted, provide } from 'vue'
55
import HomeHeroCopy from './components/HomeHeroCopy.vue'
66
77
const { isDark } = useData()
8-
const route = useRoute()
98
const INSTALL_COMMAND = 'npx nuxi@latest module add vuetify-nuxt-module'
10-
const HERO_COPY_SELECTOR = '.VPHome .VPHero .actions .action:nth-child(1) a'
119
1210
function enableTransitions () {
1311
return 'startViewTransition' in document
@@ -44,17 +42,6 @@
4442
)
4543
})
4644
47-
function mountHeroCopy () {
48-
nextTick(() => {
49-
const element = document.querySelector(HERO_COPY_SELECTOR)
50-
if (element) {
51-
const container = document.createElement('div')
52-
element.replaceWith(container)
53-
createApp(HomeHeroCopy, { command: INSTALL_COMMAND }).mount(container)
54-
}
55-
})
56-
}
57-
5845
let rafId: number | null = null
5946
let mouseX = 0
6047
let mouseY = 0
@@ -87,23 +74,19 @@
8774
}
8875
8976
onMounted(() => {
90-
mountHeroCopy()
9177
window.addEventListener('mousemove', onMouseMove)
9278
})
9379
9480
onUnmounted(() => {
9581
window.removeEventListener('mousemove', onMouseMove)
9682
if (rafId) cancelAnimationFrame(rafId)
9783
})
98-
99-
watch(
100-
() => route.path,
101-
() => {
102-
mountHeroCopy()
103-
},
104-
)
10584
</script>
10685

10786
<template>
108-
<DefaultTheme.Layout />
87+
<DefaultTheme.Layout>
88+
<template #home-hero-actions-before-actions>
89+
<HomeHeroCopy class="home" :command="INSTALL_COMMAND" />
90+
</template>
91+
</DefaultTheme.Layout>
10992
</template>

‎docs/.vitepress/theme/components/HomeHeroCopy.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
2+
import { shallowRef } from 'vue'
33
44
const props = defineProps<{
55
command: string
66
}>()
77
8-
const copied = ref(false)
8+
const copied = shallowRef(false)
99
1010
async function copy () {
1111
try {
@@ -100,6 +100,9 @@
100100
max-width: calc(100vw - 2 * 24px);
101101
width: 100%;
102102
}
103+
.hero-copy-btn.home {
104+
margin: 6px;
105+
}
103106
104107
.hero-copy-btn:hover {
105108
border-color: var(--vp-c-brand-1);

‎docs/.vitepress/theme/index.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,12 @@ export default {
2424
app.component('CompatibilityMatrix', CompatibilityMatrix)
2525
app.component('CopyOrDownloadAsMarkdownButtons', CopyOrDownloadAsMarkdownButtons)
2626

27-
Swetrix.init('KMc9xOD28UCn', {
28-
apiURL: 'https://swetrix-api.vuetifyjs.com/log',
29-
})
30-
Swetrix.trackViews()
31-
Swetrix.trackErrors()
27+
if (inBrowser) {
28+
Swetrix.init('KMc9xOD28UCn', {
29+
apiURL: 'https://swetrix-api.vuetifyjs.com/log',
30+
})
31+
Swetrix.trackViews()
32+
Swetrix.trackErrors()
33+
}
3234
},
3335
} satisfies Theme

‎docs/.vitepress/theme/styles/main.css‎

Lines changed: 26 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -89,63 +89,43 @@ details > summary:hover {
8989
margin: 1.5rem 0;
9090
}
9191

92-
.custom-block.info {
93-
border-color: rgba(24, 103, 192, 0.2);
94-
background-color: rgba(24, 103, 192, 0.1);
95-
}
96-
.custom-block.info .custom-block-title {
97-
color: var(--vp-c-brand-1);
92+
.custom-block.tip code,
93+
.custom-block.info code,
94+
.custom-block.warning code,
95+
.custom-block.danger code {
96+
font-size: var(--vp-custom-block-code-font-size);
97+
font-weight: 700;
9898
}
9999

100-
.custom-block.tip {
101-
border-color: rgba(76, 175, 80, 0.2);
102-
background-color: rgba(76, 175, 80, 0.1);
103-
}
104-
.custom-block.tip .custom-block-title {
105-
color: var(--vp-c-success-1);
100+
.info.custom-block > p > code,
101+
.info.custom-block > p > a,
102+
.info.custom-block > p > a:hover {
103+
color: var(--vp-c-text-2);
104+
opacity: 1;
106105
}
107-
108-
.custom-block.warning {
109-
border-color: rgba(251, 140, 0, 0.2);
110-
background-color: rgba(251, 140, 0, 0.1);
106+
.tip.custom-block > p > code,
107+
.tip.custom-block > p > a,
108+
.tip.custom-block > p > a:hover {
109+
color: var(--vp-c-brand-1);
110+
opacity: 1;
111111
}
112-
.custom-block.warning .custom-block-title {
112+
.warning.custom-block > p > code,
113+
.warning.custom-block > p > a,
114+
.warning.custom-block > p > a:hover {
113115
color: var(--vp-c-warning-1);
116+
opacity: 1;
114117
}
115-
116-
.custom-block.danger {
117-
border-color: rgba(255, 82, 82, 0.2);
118-
background-color: rgba(255, 82, 82, 0.1);
119-
}
120-
.custom-block.danger .custom-block-title {
118+
.danger.custom-block > p > code,
119+
.danger.custom-block > p > a,
120+
.danger.custom-block > p > a:hover {
121121
color: var(--vp-c-danger-1);
122+
opacity: 1;
122123
}
123124

124-
.custom-block.tip code,
125-
.custom-block.info code,
126125
.custom-block.warning code,
127126
.custom-block.danger code {
128-
background-color: rgba(0,0,0,0.1);
129-
color: inherit;
130-
font-weight: 600;
131-
}
132-
133-
/* Dark mode specific tweaks for custom blocks */
134-
.dark .custom-block.info {
135-
background-color: rgba(33, 150, 243, 0.1);
136-
border-color: rgba(33, 150, 243, 0.2);
137-
}
138-
.dark .custom-block.tip {
139-
background-color: rgba(76, 175, 80, 0.1);
140-
border-color: rgba(76, 175, 80, 0.2);
141-
}
142-
.dark .custom-block.warning {
143-
background-color: rgba(255, 167, 38, 0.1);
144-
border-color: rgba(255, 167, 38, 0.2);
145-
}
146-
.dark .custom-block.danger {
147-
background-color: rgba(255, 82, 82, 0.1);
148-
border-color: rgba(255, 82, 82, 0.2);
127+
font-size: var(--vp-custom-block-code-font-size);
128+
font-weight: 700;
149129
}
150130

151131
/* Sidebar */
@@ -195,27 +175,6 @@ details > summary:hover {
195175
margin-top: 20px;
196176
}
197177

198-
.VPHome .VPHero .actions .action:nth-child(1) {
199-
flex: 1 0 100%;
200-
}
201-
202-
.VPHome .VPHero .actions .action:nth-child(1) .VPButton {
203-
justify-content: flex-start;
204-
width: 100%;
205-
border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 36%, var(--vp-c-divider));
206-
background: color-mix(in srgb, var(--vp-c-bg-soft) 88%, transparent);
207-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
208-
font-size: 0.82rem;
209-
letter-spacing: 0;
210-
overflow-wrap: anywhere;
211-
text-align: left;
212-
height: auto;
213-
padding: 12px 20px;
214-
line-height: 1.4;
215-
white-space: normal;
216-
max-width: calc(100vw - 2 * 24px)
217-
}
218-
219178
.VPHome .VPFeatures {
220179
padding-top: 36px;
221180
}
@@ -440,11 +399,6 @@ a.home-benefits__item:hover {
440399
.VPHome .VPHero .actions {
441400
margin-top: 8px;
442401
}
443-
444-
.VPHome .VPHero .actions .action:nth-child(1) .VPButton {
445-
font-size: 0.74rem;
446-
padding: 8px 12px;
447-
}
448402
}
449403

450404
.VPNavBarTitle .logo {

‎docs/.vitepress/theme/styles/vars.css‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
--vp-c-brand-3: #094691;
88
--vp-c-brand-soft: rgba(24, 103, 192, 0.14);
99

10-
--vp-c-warning-1: #fb8c00;
10+
--vp-c-warning-1: #827717;
1111
--vp-c-warning-2: #f57c00;
1212
--vp-c-warning-3: #ef6c00;
13-
--vp-c-warning-soft: rgba(251, 140, 0, 0.14);
13+
--vp-c-warning-soft: #eeeef0;
1414

15-
--vp-c-danger-1: #ff5252;
15+
--vp-c-danger-1: #b71c1c;
1616
--vp-c-danger-2: #ff1744;
1717
--vp-c-danger-3: #d50000;
18-
--vp-c-danger-soft: rgba(255, 82, 82, 0.14);
18+
--vp-c-danger-soft: #ffebee77;
1919

2020
--vp-c-success-1: #4caf50;
2121
--vp-c-success-2: #43a047;
@@ -29,15 +29,15 @@
2929
--vp-c-brand-3: #64b5f6;
3030
--vp-c-brand-soft: rgba(33, 150, 243, 0.16);
3131

32-
--vp-c-warning-1: #ffa726;
32+
--vp-c-warning-1: #EAB306;
3333
--vp-c-warning-2: #ffb74d;
3434
--vp-c-warning-3: #ffcc80;
3535
--vp-c-warning-soft: rgba(255, 167, 38, 0.16);
3636

37-
--vp-c-danger-1: #ff5252;
37+
--vp-c-danger-1: #fff;
3838
--vp-c-danger-2: #ff8a80;
3939
--vp-c-danger-3: #ffb4ab;
40-
--vp-c-danger-soft: rgba(255, 82, 82, 0.16);
40+
--vp-c-danger-soft: #660000;
4141

4242
--vp-c-bg: #0f1115;
4343
--vp-c-bg-alt: #16181d;
@@ -48,35 +48,42 @@
4848
* Component: Custom Block
4949
* -------------------------------------------------------------------------- */
5050
:root {
51-
--vp-custom-block-info-border: transparent;
52-
--vp-custom-block-info-text: var(--vp-c-text-1);
53-
--vp-custom-block-info-bg: var(--vp-c-brand-soft);
54-
--vp-custom-block-info-code-bg: var(--vp-c-brand-soft);
51+
--vp-custom-block-info-border: var(--vp-c-border);
52+
--vp-custom-block-info-text: var(--vp-c-text-2);
53+
--vp-custom-block-info-bg: var(--vp-c-default-soft);
54+
--vp-custom-block-info-code-bg: var(--vp-c-default-soft);
5555

56-
--vp-custom-block-tip-border: transparent;
57-
--vp-custom-block-tip-text: var(--vp-c-text-1);
58-
--vp-custom-block-tip-bg: var(--vp-c-success-soft);
59-
--vp-custom-block-tip-code-bg: var(--vp-c-success-soft);
56+
--vp-custom-block-tip-border: var(--vp-c-brand-1);
57+
--vp-custom-block-tip-text: var(--vp-c-brand-1);
58+
--vp-custom-block-tip-bg: transparent;
59+
--vp-custom-block-tip-code-bg: var(--vp-c-default-soft);
6060

61-
--vp-custom-block-warning-border: transparent;
62-
--vp-custom-block-warning-text: var(--vp-c-text-1);
63-
--vp-custom-block-warning-bg: var(--vp-c-warning-soft);
61+
--vp-custom-block-warning-border: var(--vp-c-warning-1);
62+
--vp-custom-block-warning-text: var(--vp-c-warning-1);
63+
--vp-custom-block-warning-bg: #ffffe777;
6464
--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
6565

66-
--vp-custom-block-danger-border: transparent;
67-
--vp-custom-block-danger-text: var(--vp-c-text-1);
66+
--vp-custom-block-danger-border: var(--vp-c-danger-1);
67+
--vp-custom-block-danger-text: var(--vp-c-danger-1);
6868
--vp-custom-block-danger-bg: var(--vp-c-danger-soft);
69-
--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
69+
--vp-custom-block-danger-code-bg: #eeeef0;
7070
}
7171

7272
/**
7373
* Component: Button
7474
* -------------------------------------------------------------------------- */
7575
.dark {
76-
--vp-button-brand-hover-text: #fff;
77-
--vp-button-brand-text: #fff;
76+
--vp-button-brand-hover-text: var(--vp-c-bg-soft);
77+
--vp-button-brand-text: var(--vp-c-bg-soft);
7878
--vp-button-brand-bg: var(--vp-c-brand-1);
7979
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
80+
81+
--vp-custom-block-warning-border: #827717;
82+
--vp-custom-block-warning-text: #EAB306;
83+
--vp-custom-block-warning-bg: #323238;
84+
--vp-custom-block-warning-code-bg: #323238;
85+
86+
--vp-custom-block-danger-code-bg: #323238;
8087
}
8188

8289
:root {

‎docs/index.md‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ hero:
1212
src: /logo.svg
1313
alt: Vuetify Nuxt Module
1414
actions:
15-
- theme: alt
16-
text: npx nuxt module add vuetify-nuxt-module
17-
link: "#"
1815
- theme: brand
1916
text: Get Started
2017
link: /guide/

0 commit comments

Comments
 (0)