Skip to content

Commit 8a97e57

Browse files
yyx990803yyx990803
committed
more prominent v3 redirect notice
1 parent e03a3c3 commit 8a97e57

File tree

8 files changed

+177
-1
lines changed

8 files changed

+177
-1
lines changed

‎src/v2/guide/components-dynamic-async.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ type: guide
44
order: 105
55
---
66

7+
<script>
8+
const __pageRedirects = {
9+
'#Async-Components': '/guide/components/async.html'
10+
}
11+
</script>
12+
713
> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
814
915
## `keep-alive` with Dynamic Components

‎src/v2/guide/components-props.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ type: guide
44
order: 102
55
---
66

7+
<script>
8+
const __pageRedirects = {
9+
'#Non-Prop-Attributes': '/guide/components/attrs.html'
10+
}
11+
</script>
12+
713
> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
814
915
<div class="vueschool"><a href="https://vueschool.io/lessons/reusable-components-with-props?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how component props work with Vue School">Learn how component props work with a free lesson on Vue School</a></div>

‎src/v2/guide/computed.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ type: guide
44
order: 5
55
---
66

7+
<script>
8+
const __pageRedirects = {
9+
'#Watchers': '/guide/essentials/watchers.html'
10+
}
11+
</script>
12+
713
## Computed Properties
814

915
<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-computed-properties?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how computed properties work with Vue School">Learn how computed properties work with a free lesson on Vue School</a></div>

‎src/v2/guide/instance.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ type: guide
44
order: 3
55
---
66

7+
<script>
8+
const __pageRedirects = {
9+
'#Data-and-Methods': '/guide/essentials/reactivity-fundamentals.html',
10+
'#Instance-Lifecycle-Hooks': '/guide/essentials/lifecycle.html',
11+
'#Lifecycle-Diagram': '/guide/essentials/lifecycle.html#lifecycle-diagram'
12+
}
13+
</script>
14+
715
## Creating a Vue Instance
816

917
Every Vue application starts by creating a new **Vue instance** with the `Vue` function:

‎src/v2/guide/transitions.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ type: guide
44
order: 201
55
---
66

7+
<script>
8+
const __pageRedirects = {
9+
'#List-Transitions': '/guide/built-ins/transition-group.html'
10+
}
11+
</script>
12+
713
## Overview
814

915
Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to:

‎themes/vue/_config.yml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,3 +221,35 @@ bronze_sponsors:
221221
- url: 'https://memberful.com/'
222222
img: memberful.png
223223
name: Memberful
224+
redirects:
225+
'/v2/api/index.html': '/api/'
226+
'/v2/guide/index.html': '/guide/introduction.html'
227+
'/v2/guide/installation.html': '/guide/quick-start.html'
228+
'/v2/guide/instance.html': '/guide/essentials/application.html' # has page redirects
229+
'/v2/guide/syntax.html': '/guide/essentials/template-syntax.html'
230+
'/v2/guide/computed.html': '/guide/essentials/computed.html' # has page redirects
231+
'/v2/guide/class-and-style.html': '/guide/essentials/class-and-style.html'
232+
'/v2/guide/conditional.html': '/guide/essentials/conditional.html'
233+
'/v2/guide/list.html': '/guide/essentials/list.html'
234+
'/v2/guide/events.html': '/guide/essentials/event-handling.html'
235+
'/v2/guide/forms.html': '/guide/essentials/forms.html'
236+
'/v2/guide/components.html': '/guide/essentials/component-basics.html'
237+
'/v2/guide/components-registration.html': '/guide/components/registration.html'
238+
'/v2/guide/components-props.html': '/guide/components/props.html' # has page redirects
239+
'/v2/guide/components-custom-events.html': '/guide/components/events.html'
240+
'/v2/guide/components-slots.html': '/guide/components/slots.html'
241+
'/v2/guide/components-dynamic-async.html': '/guide/built-ins/keep-alive.html' # has page redirects
242+
'/v2/guide/transitions.html': '/guide/built-ins/transition.html' # has page redirects
243+
'/v2/guide/transitioning-state.html': '/guide/extras/animation.html'
244+
'/v2/guide/custom-directive.html': '/guide/reusability/custom-directives.html'
245+
'/v2/guide/render-function.html': '/guide/extras/render-function.html'
246+
'/v2/guide/plugins.html': '/guide/reusability/plugins.html'
247+
'/v2/guide/single-file-components.html': '/guide/scaling-up/sfc.html'
248+
'/v2/guide/testing.html': '/guide/scaling-up/testing.html'
249+
'/v2/guide/typescript.html': '/guide/typescript/overview.html'
250+
'/v2/guide/deployment.html': '/guide/best-practices/production-deployment.html'
251+
'/v2/guide/routing.html': '/guide/scaling-up/routing.html'
252+
'/v2/guide/state-management.html': '/guide/scaling-up/state-management.html'
253+
'/v2/guide/ssr.html': '/guide/scaling-up/ssr.html'
254+
'/v2/guide/security.html': '/guide/best-practices/security.html'
255+
'/v2/guide/reactivity.html': '/guide/extras/reactivity-in-depth.html'

‎themes/vue/layout/layout.ejs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
<!-- vimeo analytics -->
9090
<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
9191
</head>
92-
<body class="<%- isIndex ? '' : 'docs' -%>">
92+
<body class="<%- isIndex ? '' : 'docs' -%>" data-v3-url="<%- theme.redirects['/' + page.path] || '' -%>">
9393
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
9494
<a class="menu-button"></a>
9595
<a class="logo" href="/"></a>
@@ -141,5 +141,6 @@
141141
})
142142
}
143143
</script>
144+
<script src="/js/v3-notice.js"></script>
144145
</body>
145146
</html>

‎themes/vue/source/js/v3-notice.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
;(() => {
2+
if (!location.search.includes(`redirect=true`)) {
3+
return
4+
}
5+
6+
const v3Url = document.body.dataset.v3Url
7+
if (!v3Url) {
8+
return
9+
}
10+
11+
const hashRedirect =
12+
typeof __pageRedirects !== 'undefined' && __pageRedirects[location.hash]
13+
const finalUrl = hashRedirect || v3Url
14+
15+
const preferV3 = localStorage.getItem('prefer-v3')
16+
if (preferV3 === 'true') {
17+
location.href = `https://vuejs.org${finalUrl}`
18+
}
19+
20+
const today = new Date()
21+
const target = new Date('2022-05-07')
22+
const timeinmilisec = target.getTime() - today.getTime()
23+
const days = Math.ceil(timeinmilisec / (1000 * 60 * 60 * 24))
24+
25+
const el = document.createElement('div')
26+
el.className = `v3-notice`
27+
el.innerHTML = `
28+
<h3>Heads Up!</h3>
29+
<p>
30+
This page contains documentation for Vue 2. The Vue 3 version of the URL you are visiting is: <a id="v3-url" target="_blank"></a>.
31+
</p>
32+
<p>
33+
The original URL, <code>https://vuejs.org<span id="original-url"></span></code>
34+
will permanantly redirect to the v3 URL above after <b>May 7th, 2022 (${days} days from now).</b> If you need
35+
future access to this v2 page, please use the v2-prefixed URL
36+
<code>https://v2.vuejs.org<span id="current-url"></span></code>.
37+
</p>
38+
<p>
39+
You can learn more about the Vue 2 -> Vue 3 default version switch in
40+
<a target="_blank" href="https://blog.vuejs.org/posts/vue-3-as-the-new-default.html">this blog post</a>.
41+
</p>
42+
<p>
43+
Would you like to start redirecting all v2 URLs to v3 right now?
44+
</p>
45+
<p>
46+
<a class="go">Yes</a>
47+
<a class="stay">Not yet</a>
48+
</p>
49+
`.trim()
50+
51+
const style = document.createElement('style')
52+
style.textContent = `
53+
.v3-notice {
54+
position: fixed;
55+
top: 20px;
56+
--width: min(calc(100vw - 20px), 500px);
57+
left: calc(50vw - var(--width) / 2);
58+
width: var(--width);
59+
z-index: 9999;
60+
background-color: #f8f8f8;
61+
border: 2px solid #ffa500;
62+
border-radius: 8px;
63+
padding: 0 20px;
64+
box-shadow: 0 10px 28px rgba(0,0,0,0.25);
65+
}
66+
.v3-notice a {
67+
color: #42b983;
68+
font-weight: bold;
69+
}
70+
.v3-notice .go, .v3-notice .stay {
71+
display: inline-block;
72+
padding: 8px 12px;
73+
border-radius: 4px;
74+
cursor: pointer;
75+
}
76+
.v3-notice .go {
77+
background-color: #42b983;
78+
color: #fff;
79+
}
80+
.v3-notice .stay {
81+
background-color: #ddd;
82+
color: #666;
83+
}
84+
.v3-notice code {
85+
background-color: transparent;
86+
}
87+
`
88+
89+
document.body.appendChild(style)
90+
document.body.appendChild(el)
91+
92+
el.querySelector('#original-url').textContent = location.pathname
93+
el.querySelector('#current-url').textContent = location.pathname
94+
const v3Link = el.querySelector('#v3-url')
95+
96+
v3Link.textContent =
97+
v3Link.href =
98+
el.querySelector('.go').href =
99+
`https://vuejs.org${finalUrl}`
100+
101+
el.querySelector('.go').addEventListener('click', () => {
102+
localStorage.setItem('prefer-v3', 'true')
103+
})
104+
105+
el.querySelector('.stay').addEventListener('click', () => {
106+
localStorage.setItem('prefer-v3', 'false')
107+
document.body.removeChild(el)
108+
document.body.removeChild(style)
109+
location.href = location.pathname
110+
})
111+
})()

0 commit comments

Comments
 (0)