Skip to content

Commit 0039fc3

Browse files
qcpqcp
committed
extend read mode (part 1)
1 parent e69c805 commit 0039fc3

File tree

5 files changed

+115
-137
lines changed

5 files changed

+115
-137
lines changed

‎docs/.vitepress/theme/Layout.vue‎

Lines changed: 55 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
import CustomVPContent from './components/CustomVPContent.vue';
1212
import ReadModeToggle from './components/ReadModeToggle.vue';
1313
import { useData } from 'vitepress';
14-
import {
15-
useCloseSidebarOnEscape,
16-
useSidebar,
17-
} from 'vitepress/dist/client/theme-default/composables/sidebar.js';
14+
// @ts-ignore
15+
import { useCloseSidebarOnEscape } from 'vitepress/dist/client/theme-default/composables/sidebar.js';
16+
import { useReadMode } from './composables/useReadMode';
17+
import { useSidebar } from 'vitepress/theme';
1818
1919
const isHome = computed(() => useData().frontmatter.value?.layout === 'home');
2020
@@ -31,6 +31,7 @@
3131
3232
const { frontmatter } = useData();
3333
const layoutTransition = { duration: 0.35 };
34+
const { isReadMode } = useReadMode();
3435
3536
const slots = useSlots();
3637
const heroImageSlotExists = computed(() => !!slots['home-hero-image']);
@@ -42,7 +43,7 @@
4243
<motion.div
4344
v-if="frontmatter.layout !== false"
4445
class="Layout"
45-
:class="frontmatter.pageClass"
46+
:class="[frontmatter.pageClass, !isReadMode && 'shiny-active']"
4647
:initial="isHome ? { opacity: 0 } : undefined"
4748
:animate="{ opacity: 1 }"
4849
:transition="layoutTransition"
@@ -56,74 +57,76 @@
5657
@click="closeSidebar"
5758
/>
5859
<VPNav class="glass-nav">
59-
<template #nav-bar-title-before
60-
><slot name="nav-bar-title-before"
61-
/></template>
62-
<template #nav-bar-title-after
63-
><slot name="nav-bar-title-after"
64-
/></template>
65-
<template #nav-bar-content-before
66-
><slot name="nav-bar-content-before"
67-
/></template>
60+
<template #nav-bar-title-before>
61+
<slot name="nav-bar-title-before"/>
62+
</template>
63+
<template #nav-bar-title-after>
64+
<slot name="nav-bar-title-after"/>
65+
</template>
66+
<template #nav-bar-content-before>
67+
<slot name="nav-bar-content-before"/>
68+
</template>
6869
<template #nav-bar-content-after>
6970
<ReadModeToggle />
7071
<slot name="nav-bar-content-after" />
7172
</template>
72-
<template #nav-screen-content-before
73-
><slot name="nav-screen-content-before"
74-
/></template>
75-
<template #nav-screen-content-after
76-
><slot name="nav-screen-content-after"
77-
/></template>
73+
<template #nav-screen-content-before>
74+
<slot name="nav-screen-content-before"/>
75+
</template>
76+
<template #nav-screen-content-after>
77+
<slot name="nav-screen-content-after"/>
78+
</template>
7879
</VPNav>
7980
<VPLocalNav
8081
:open="isSidebarOpen"
8182
@open-menu="openSidebar"
8283
/>
8384

8485
<VPSidebar :open="isSidebarOpen">
85-
<template #sidebar-nav-before
86-
><slot name="sidebar-nav-before"
87-
/></template>
88-
<template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
86+
<template #sidebar-nav-before>
87+
<slot name="sidebar-nav-before"/>
88+
</template>
89+
<template #sidebar-nav-after>
90+
<slot name="sidebar-nav-after" />
91+
</template>
8992
</VPSidebar>
9093

9194
<CustomVPContent>
9295
<template #page-top><slot name="page-top" /></template>
9396
<template #page-bottom><slot name="page-bottom" /></template>
9497
<template #not-found><slot name="not-found" /></template>
9598
<template #home-hero-before><slot name="home-hero-before" /></template>
96-
<template #home-hero-info-before
97-
><slot name="home-hero-info-before"
98-
/></template>
99+
<template #home-hero-info-before>
100+
<slot name="home-hero-info-before"/>
101+
</template>
99102
<template #home-hero-info><slot name="home-hero-info" /></template>
100-
<template #home-hero-info-after
101-
><slot name="home-hero-info-after"
102-
/></template>
103-
<template #home-hero-actions-after
104-
><slot name="home-hero-actions-after"
105-
/></template>
103+
<template #home-hero-info-after>
104+
<slot name="home-hero-info-after"/>
105+
</template>
106+
<template #home-hero-actions-after>
107+
<slot name="home-hero-actions-after"/>
108+
</template>
106109
<template #home-hero-image><slot name="home-hero-image" /></template>
107110
<template #home-hero-after><slot name="home-hero-after" /></template>
108-
<template #home-features-before
109-
><slot name="home-features-before"
110-
/></template>
111-
<template #home-features-after
112-
><slot name="home-features-after"
113-
/></template>
111+
<template #home-features-before>
112+
<slot name="home-features-before"/>
113+
</template>
114+
<template #home-features-after>
115+
<slot name="home-features-after"/>
116+
</template>
114117
<template #doc-footer-before><slot name="doc-footer-before" /></template>
115118
<template #doc-before><slot name="doc-before" /></template>
116119
<template #doc-after><slot name="doc-after" /></template>
117120
<template #doc-top><slot name="doc-top" /></template>
118121
<template #doc-bottom><slot name="doc-bottom" /></template>
119122
<template #aside-top><slot name="aside-top" /></template>
120123
<template #aside-bottom><slot name="aside-bottom" /></template>
121-
<template #aside-outline-before
122-
><slot name="aside-outline-before"
123-
/></template>
124-
<template #aside-outline-after
125-
><slot name="aside-outline-after"
126-
/></template>
124+
<template #aside-outline-before>
125+
<slot name="aside-outline-before"/>
126+
</template>
127+
<template #aside-outline-after>
128+
<slot name="aside-outline-after"/>
129+
</template>
127130
<template #aside-ads-before><slot name="aside-ads-before" /></template>
128131
<template #aside-ads-after><slot name="aside-ads-after" /></template>
129132
</CustomVPContent>
@@ -140,5 +143,12 @@
140143
flex-direction: column;
141144
min-height: 100vh;
142145
}
146+
147+
.glass-nav {
148+
-webkit-backdrop-filter: blur(8px) saturate(1.1);
149+
backdrop-filter: blur(8px) saturate(1.1);
150+
background: var(--glass-bg-2) !important;
151+
box-shadow: var(--vp-nav-shadow);
152+
}
143153
</style>
144154

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

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@
55
import VPDoc from 'vitepress/dist/client/theme-default/components/VPDoc.vue';
66
import VPPage from 'vitepress/dist/client/theme-default/components/VPPage.vue';
77
import CustomHome from './CustomHome.vue';
8-
import { computed, watch, onMounted, onUnmounted } from 'vue';
9-
import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar.js';
8+
import { computed } from 'vue';
109
import LiquidEtherBackground from './LiquidBackground';
1110
import { useReadMode } from '../composables/useReadMode';
12-
13-
const { isReadMode } = useReadMode();
11+
import { useSidebar } from 'vitepress/theme';
1412
1513
const { page, frontmatter } = useData();
1614
const route = useRoute();
@@ -23,22 +21,7 @@
2321
};
2422
2523
const isDoc = computed(() => frontmatter.value.layout !== 'home');
26-
27-
const DOC_PAGE_CLASS = 'vdnd-doc-page';
28-
watch(
29-
isDoc,
30-
(v) => {
31-
if (v) document.documentElement.classList.add(DOC_PAGE_CLASS);
32-
else document.documentElement.classList.remove(DOC_PAGE_CLASS);
33-
},
34-
{ immediate: true }
35-
);
36-
onMounted(() => {
37-
if (isDoc.value) document.documentElement.classList.add(DOC_PAGE_CLASS);
38-
});
39-
onUnmounted(() => {
40-
document.documentElement.classList.remove(DOC_PAGE_CLASS);
41-
});
24+
const { isReadMode } = useReadMode();
4225
</script>
4326

4427
<template>
@@ -58,8 +41,7 @@
5841
id="VPContent"
5942
:class="{
6043
'has-sidebar': hasSidebar,
61-
'is-home': frontmatter.layout === 'home',
62-
'is-doc': isDoc,
44+
'is-home': frontmatter.layout === 'home'
6345
}"
6446
:initial="{ opacity: 0, y: 8 }"
6547
:animate="{ opacity: 1, y: 0 }"
@@ -138,20 +120,15 @@
138120
width: 100%;
139121
}
140122
141-
.VPContent.is-home {
123+
.is-home {
142124
width: 100%;
143125
max-width: 100%;
144126
}
145127
146-
.VPContent.has-sidebar {
128+
.has-sidebar {
147129
margin: 0;
148130
}
149131
150-
/* Прозрачный фон на страницах доков, чтобы был виден LiquidEther */
151-
.VPContent.is-doc {
152-
background: transparent;
153-
}
154-
155132
@media (max-width: 960px) {
156133
#VPContent {
157134
padding: 0 !important;

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

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,22 @@
1818
background-clip: text;
1919
}
2020

21+
@utility wave-text {
22+
background: linear-gradient(
23+
90deg,
24+
var(--text-shimmer-from) 0%,
25+
var(--text-shimmer-from) 40%,
26+
var(--text-shimmer-to) 50%,
27+
var(--text-shimmer-from) 60%,
28+
var(--text-shimmer-from) 100%
29+
);
30+
background-size: 200% 100%;
31+
-webkit-background-clip: text;
32+
background-clip: text;
33+
-webkit-text-fill-color: transparent;
34+
animation: text-shimmer 10s ease-in-out infinite;
35+
}
36+
2137
@utility glass-card {
2238
position: relative;
2339
-webkit-backdrop-filter: blur(12px) saturate(1.1);
@@ -93,11 +109,6 @@
93109
mask-composite: exclude;
94110
}
95111

96-
.glow-border--nav {
97-
--glow-border-width: 1px;
98-
--glow-duration: 15s;
99-
}
100-
101112
@utility default-glass-card {
102113
-webkit-backdrop-filter: blur(12px) saturate(1.1);
103114
backdrop-filter: blur(12px) saturate(1.1);
@@ -175,18 +186,6 @@
175186
}
176187
}
177188

178-
:root {
179-
--glass-btn-shimmer-1: rgba(255, 255, 255, 0.5);
180-
--glass-btn-shimmer-2: rgba(255, 255, 255, 0.75);
181-
--glass-btn-shimmer-3: rgba(255, 255, 255, 0.9);
182-
}
183-
184-
.dark .glass-btn {
185-
--glass-btn-shimmer-1: rgba(255, 255, 255, 0.12);
186-
--glass-btn-shimmer-2: rgba(255, 255, 255, 0.2);
187-
--glass-btn-shimmer-3: rgba(255, 255, 255, 0.28);
188-
}
189-
190189
@utility glass-btn--primary {
191190
@apply inline-flex items-center justify-center rounded-full border-none font-medium transition-all duration-200;
192191
padding: 0.5rem 1.25rem;

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@
5454
--glass-card-1: rgba(240, 248, 235, 0.5);
5555
--glass-card-2: rgba(251, 251, 251, 0.5);
5656
--glass-card-3: rgba(236, 246, 230, 0.5);
57+
--glass-btn-shimmer-1: rgba(255, 255, 255, 0.5);
58+
--glass-btn-shimmer-2: rgba(255, 255, 255, 0.75);
59+
--glass-btn-shimmer-3: rgba(255, 255, 255, 0.9);
5760
--text-shimmer-from: var(--vp-c-text-1);
5861
--text-shimmer-to: #8b8b92;
5962
--bg-lens-1: #42b883;
@@ -94,6 +97,9 @@
9497
--glass-card-1: rgba(11, 17, 9, 0.5);
9598
--glass-card-2: rgba(17, 17, 17, 0.5);
9699
--glass-card-3: rgba(10, 15, 8, 0.5);
100+
--glass-btn-shimmer-1: rgba(255, 255, 255, 0.12);
101+
--glass-btn-shimmer-2: rgba(255, 255, 255, 0.2);
102+
--glass-btn-shimmer-3: rgba(255, 255, 255, 0.28);
97103
--text-shimmer-from: #e4e4e7;
98104
--text-shimmer-to: #7a7a7a;
99105
--glow-color: #42b883;

0 commit comments

Comments
 (0)