Skip to content

Commit a5a0103

Browse files
yue1123yue1123
committed
docs: 文档升级
1. 支持 pwa 2. 更新vitepress至最新版本
1 parent 004cecc commit a5a0103

File tree

15 files changed

+3351
-470
lines changed

15 files changed

+3351
-470
lines changed

‎docs/.vitepress/components/ReloadPrompt.vue

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<script setup lang="ts">
2+
import { onBeforeMount, ref } from 'vue'
3+
4+
const offlineReady = ref(false)
5+
const needRefresh = ref(false)
6+
7+
let updateServiceWorker: ((reload: boolean) => Promise<void>) | undefined
8+
9+
function onOfflineReady() {
10+
offlineReady.value = true
11+
}
12+
function onNeedRefresh() {
13+
needRefresh.value = true
14+
}
15+
async function close() {
16+
offlineReady.value = false
17+
needRefresh.value = false
18+
}
19+
20+
onBeforeMount(async () => {
21+
const { registerSW } = await import('virtual:pwa-register')
22+
updateServiceWorker = registerSW({
23+
immediate: true,
24+
onOfflineReady,
25+
onNeedRefresh,
26+
onRegistered() {
27+
console.info('Service Worker registered')
28+
},
29+
onRegisterError(e) {
30+
console.error('Service Worker registration error!', e)
31+
}
32+
})
33+
})
34+
</script>
35+
36+
<template>
37+
<template v-if="offlineReady || needRefresh">
38+
<div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
39+
<div class="icon">
40+
<img
41+
v-if="needRefresh"
42+
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Activities/Party%20Popper.png"
43+
alt="Party Popper"
44+
width="40"
45+
height="40"
46+
/>
47+
<img
48+
v-else
49+
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Rocket.png"
50+
alt="Rocket"
51+
width="40"
52+
height="40"
53+
/>
54+
</div>
55+
<div class="content">
56+
<h2 class="title">
57+
{{ offlineReady ? 'Offline ' : 'Update' }}
58+
</h2>
59+
<div id="pwa-message" class="mb-3">
60+
{{ offlineReady ? 'App ready to work offline' : 'New content available, click the reload button to update.' }}
61+
</div>
62+
<div class="buttons">
63+
<button
64+
v-if="needRefresh && updateServiceWorker"
65+
type="button"
66+
class="pwa-refresh myButton"
67+
@click="updateServiceWorker(true)"
68+
>
69+
Reload
70+
</button>
71+
<button type="button" class="pwa-cancel myButton" @click="close">Close</button>
72+
</div>
73+
</div>
74+
</div>
75+
</template>
76+
</template>
77+
78+
<style lang="less">
79+
.pwa-toast {
80+
position: fixed;
81+
right: 0;
82+
bottom: 0;
83+
margin: 16px;
84+
padding: 12px;
85+
border: 1px solid var(--vp-custom-block-details-border);
86+
border-radius: 8px;
87+
z-index: 100;
88+
text-align: left;
89+
box-shadow: 0 0 25px 0px var(--vp-custom-block-details-border);
90+
background-color: var(--vp-c-bg-soft);
91+
display: flex;
92+
max-width: 380px;
93+
.icon {
94+
margin-right: 15px;
95+
}
96+
.title {
97+
font-weight: 700;
98+
color: var(--vp-c-text-1);
99+
}
100+
#pwa-message {
101+
margin: 8px 0;
102+
}
103+
.buttons {
104+
display: flex;
105+
justify-content: flex-end;
106+
button {
107+
margin: 0 8px;
108+
}
109+
}
110+
}
111+
</style>

‎docs/.vitepress/config.mts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { defineConfig } from 'vitepress'
2+
import { head, nav, sidebarConfigZh, mdPlugin, pwa } from './configs'
3+
import { withPwa } from '@vite-pwa/vitepress'
4+
5+
export default withPwa(
6+
defineConfig({
7+
lang: 'zh-CN',
8+
title: 'Vue3 Baidu Map Gl',
9+
description:
10+
'基于百度地图 JavaScript GL 版（使用了 WebGL 对地图、覆盖物等进行渲染，支持 3D 视角展示地图） API 封装设计的 Vue3 组件/hooks 库。',
11+
lastUpdated: true,
12+
base: '/vue3-baidu-map-gl/',
13+
cleanUrls: true,
14+
head,
15+
markdown: {
16+
config: (md) => mdPlugin(md)
17+
},
18+
pwa: pwa,
19+
// locales: {
20+
// text: '语言',
21+
// items: [{ text: '简体中文', link: '/zh-CN/' }]
22+
// },
23+
themeConfig: {
24+
i18nRouting: true,
25+
returnToTopLabel: 'top',
26+
logo: '/logo.svg',
27+
nav,
28+
outlineTitle: 'ON THIS PAGE',
29+
outline: [1, 5],
30+
search: {
31+
provider: 'local'
32+
// provider: 'algolia',
33+
// options: {
34+
// appId: 'RT4OHPUGD1',
35+
// apiKey: '76ba0d807534197fb89a2644c412240b',
36+
// indexName: 'vue3-baidu-map-gl-zh'
37+
// }
38+
},
39+
40+
footer: {
41+
message: 'Released under the MIT License.',
42+
copyright: 'Copyright © 2022-present dh and all contributors'
43+
},
44+
socialLinks: [{ icon: 'github', link: 'https://github.com/yue1123/vue3-baidu-map-gl' }],
45+
sidebar: sidebarConfigZh,
46+
editLink: {
47+
pattern: 'https://github.com/yue1123/vue3-baidu-map-gl/edit/main/docs/:path',
48+
text: 'Edit this page on GitHub'
49+
}
50+
}
51+
})
52+
)

‎docs/.vitepress/config.ts

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎docs/.vitepress/configs/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from './nav'
22
export * from './head'
33
export * from './plugins'
44
export * from './sidebar.config.zh'
5+
export * from './pwa'

‎docs/.vitepress/configs/pwa.ts

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import type { PwaOptions } from '@vite-pwa/vitepress'
2+
3+
export const pwa: Partial<PwaOptions> = {
4+
outDir: '.vitepress/dist',
5+
registerType: 'prompt',
6+
includeManifestIcons: false,
7+
manifest: {
8+
id: '/',
9+
name: 'Vue3 BaiduMap GL',
10+
short_name: 'Vue3-BaiduMap-GL',
11+
description:
12+
'基于百度地图 JavaScript GL 版（使用了 WebGL 对地图、覆盖物等进行渲染，支持 3D 视角展示地图） API 封装设计的 Vue3 组件/hooks 库。',
13+
theme_color: '#ffffff',
14+
start_url: '/',
15+
lang: 'zh-CN',
16+
dir: 'ltr',
17+
orientation: 'natural',
18+
display: 'standalone',
19+
display_override: ['window-controls-overlay'],
20+
categories: ['development', 'developer tools'],
21+
icons: [
22+
{
23+
src: 'icons/icon-192x192.png',
24+
sizes: '192x192',
25+
type: 'image/png'
26+
},
27+
{
28+
src: 'icons/icon-512x512.png',
29+
sizes: '512x512',
30+
type: 'image/png',
31+
purpose: 'any'
32+
},
33+
{
34+
src: 'maskable-icon-512x512.png',
35+
sizes: '512x512',
36+
type: 'image/png',
37+
purpose: 'maskable'
38+
}
39+
],
40+
screenshots: [
41+
{
42+
src: 'screenshots/home.jpg',
43+
sizes: '1200x630',
44+
type: 'image/jpg',
45+
label: '基于百度地图 JavaScript GL 版 API 封装设计的 Vue3 组件/hooks 库。'
46+
}
47+
],
48+
handle_links: 'preferred',
49+
launch_handler: {
50+
client_mode: ['navigate-existing', 'auto']
51+
},
52+
edge_side_panel: {
53+
preferred_width: 480
54+
}
55+
},
56+
experimental: {
57+
includeAllowlist: true
58+
},
59+
workbox: {
60+
cacheId: 'bundle-prefetch',
61+
globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2,json}'],
62+
globIgnores: ['*.cdr', '*.glb'],
63+
runtimeCaching: [
64+
{
65+
urlPattern: /^https:\/\/raw\.githubusercontent\.com\/.*/i,
66+
handler: 'CacheFirst',
67+
options: {
68+
cacheName: 'animated-images-cache',
69+
expiration: {
70+
maxEntries: 15,
71+
maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
72+
},
73+
cacheableResponse: {
74+
statuses: [0, 200]
75+
}
76+
}
77+
},
78+
{
79+
urlPattern: /^https:\/\/img\.shields\.io\/.*/i,
80+
handler: 'NetworkFirst',
81+
options: {
82+
cacheName: 'dynamic-images-cache',
83+
expiration: {
84+
maxEntries: 15,
85+
maxAgeSeconds: 60 * 60 * 24 // <== 1 days
86+
},
87+
cacheableResponse: {
88+
statuses: [0, 200]
89+
}
90+
}
91+
},
92+
{
93+
urlPattern: /^https:\/\/cdn\.jsdelivr\.net\/.*/i,
94+
handler: 'NetworkFirst',
95+
options: {
96+
cacheName: 'jsdelivr-images-cache',
97+
expiration: {
98+
maxEntries: 10,
99+
maxAgeSeconds: 60 * 60 * 24 * 7 // <== 7 days
100+
},
101+
cacheableResponse: {
102+
statuses: [0, 200]
103+
}
104+
}
105+
},
106+
{
107+
urlPattern: /^https:\/\/api\.github\.com\/.*/i,
108+
handler: 'NetworkFirst',
109+
options: {
110+
cacheName: 'github-api-cache',
111+
expiration: {
112+
maxEntries: 10,
113+
maxAgeSeconds: 60 * 60 * 24 * 1 // <== 7 days
114+
},
115+
cacheableResponse: {
116+
statuses: [0, 200]
117+
}
118+
}
119+
},
120+
{
121+
urlPattern: /\.glb$/i,
122+
handler: 'CacheFirst',
123+
options: {
124+
cacheName: '3d-model-cache',
125+
expiration: {
126+
maxEntries: 10,
127+
maxAgeSeconds: 60 * 60 * 24 * 365 // <== 7 days
128+
},
129+
cacheableResponse: {
130+
statuses: [0, 200]
131+
}
132+
}
133+
}
134+
]
135+
}
136+
}

‎docs/.vitepress/styles/main.less

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,18 @@
55
--vp-home-hero-image-background-image: radial-gradient(rgba(96, 137, 241, 0.4) 40%, rgba(66, 211, 146, 0.25) 60%);
66
--vp-home-hero-image-filter: blur(50px);
77
--vp-sidebar-width: 282px;
8+
--vp-c-brand-1: #10b981;
9+
--vp-c-brand-2: #059669;
10+
--vp-c-indigo-3: #10b981;
11+
--vp-c-warning-1: #EAB306;
12+
--vp-c-danger-1: #fff;
13+
--vp-c-danger-soft: #660000;
14+
--pwa-border: #ffffff75;
15+
--vp-c-indigo-soft: rgba(16, 185, 129, .05);
16+
--vp-home-hero-name-background: linear-gradient(-347deg, #10b981 20%, #32475b);
17+
--vp-home-hero-name-color: transparent;
18+
--vp-badge-tip-border: #059669;
19+
--vp-custom-block-info-border: rgba(82, 82, 89, .68);
820
}
921

1022

@@ -27,7 +39,6 @@
2739
-webkit-user-drag: none;
2840
-moz-user-drag: none;
2941
-ms-user-drag: none;
30-
user-drag: none;
3142
-webkit-user-select: none;
3243
-moz-user-select: none;
3344
-ms-user-select: none;
@@ -127,6 +138,11 @@ img.resizable-img {
127138
padding: 5px 15px;
128139
text-decoration: none;
129140
margin: 16px 16px 16px 0;
141+
transition: opacity .2s ease-in-out;
142+
143+
&:active {
144+
opacity: .6;
145+
}
130146
}
131147

132148
.myButton.no-m-t {

0 commit comments

Comments
 (0)