-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
284 lines (248 loc) · 12.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Laravel Upgrade Helper</title>
<meta name="description" content="Take a quick look and upgrade Laravel. Fearlessly.">
<link rel="shortcut icon" href="logo.png">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/vue@3"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/js/diff2html.min.js"></script>
</head>
<body>
<header>
<a href="https://github.com/laravel-upgrade-helper/laravel-upgrade-helper.github.io" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
</header>
<main id="app">
<div class="container font-sans bg-white mx-auto">
<section class="bg-white mt-20">
<div class="max-w-2xl px-6 text-center mx-auto">
<img src="logo.png" alt="Laravel Upgrade Helper" width="100" class="mx-auto"/>
<h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1>
<p class="text-gray-600 mt-4">Quickly view differences between versions for Laravel.</p>
<p>
<button class="inline-flex items-center text-xs font-normal text-gray-500 hover:underline dark:text-gray-400" @click="toggleModal">
<svg aria-hidden="true" class="mr-2 w-3 h-3" aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"></path></svg>
Why this project?</button>
</p>
<div>
<p class="mt-5">
<select v-model="baseVersion"
@change="baseVersionChange"
class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer">
<option value="null">Current Version</option>
<template v-for="tag in tags">
<option :value="tag" v-text="tag"></option>
</template>
</select>
</p>
<p class="mt-5">
<select v-model="upgradeVersion" @change="clearResult"
class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer">
<option value="null">Upgrade To</option>
<template v-for="upgradableVersions in upgradableVersions">
<option :value="upgradableVersions" v-text="upgradableVersions"></option>
</template>
</select>
</p>
<button @click="showDiff" id="showBtn"
class="mt-10 relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800">
<span
class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
Show
</span>
</button>
</div>
</div>
<div class="text-center">
<span class="loader mt-3" v-show="showSpinner"></span>
</div>
</section>
</div>
<section v-show="showResult && diffString !==''" class="container mx-auto mt-3">
<div class="text-center">
For release notes see:
<a :href="releaseLink" target="_blank" class="underline italic">link</a>
</div>
<div class="text-center" v-show="documentationLink !== ''">
For upgrade guide see:
<a :href="documentationLink" target="_blank" class="underline italic">link</a>
</div>
<div class="text-center">
Click <a :href="diffFileLink" download><b class="underline text-red">here</b></a>
to download patch file.
</div>
<div class="text-center">
<small>You may apply file like: </small>
<small><code v-text="'git apply --ignore-whitespace --reject <file.diff>'"></code></small>
</div>
<div v-show="diffString !==''" v-html="diffHtml"></div>
</section>
<div tabindex="-1" v-show="showModal" class="backdrop flex overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Why this?
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="aboutModal" @click="toggleModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close</span>
</button>
</div>
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
We know that Laravel has <b>release notes</b>, we have Laravel <b>docs</b> also we have <b>Laravel Shift.</b>
We know all these but we wanted to quick look what we should update when we are upgrading our project.
We build this tool for internal purposes and now decided to open source it.
<i>Hope that it will be useful for you too.</i>
</p>
</div>
</div>
</div>
</div>
</main>
<style>
.backdrop {
background-color: rgba(0,0,0,0.5);
}
.loader {
width: 32px;
height: 32px;
border: 5px solid #dcdcdc;
border-bottom-color: #e35e50;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
const {createApp} = Vue
createApp({
data() {
return {
tags: [],
baseVersion: null,
upgradeVersion: null,
diffString: "",
showResult: false,
showModal: false,
showSpinner: false,
};
},
mounted() {
fetch('tags.txt')
.then(response => response.text())
.then(data => this.tags = data.trim().split('\n'));
},
methods: {
toggleModal() {
this.showModal = !this.showModal
},
clearResult() {
this.diffString = "";
this.showResult = false;
},
baseVersionChange() {
this.upgradeVersion = this.upgradableVersions[0] || null;
this.clearResult();
},
showDiff() {
if (!this.tags.includes(this.baseVersion) ||
!this.tags.includes(this.upgradeVersion)
) {
alert('Please select version.');
return;
}
this.showSpinner = true;
this.showResult = true;
this.diffString = '';
fetch(this.diffFileLink)
.then(response => {
if (!response.ok) {
alert('Cannot find diff');
throw new Error("Cannot find diff");
}
return response.text();
})
.then(diffString => {
this.diffString = diffString;
this.showSpinner = false;
document.getElementById('showBtn').scrollIntoView({behavior: "smooth"});
});
},
},
computed: {
releaseLink() {
return 'https://github.com/laravel/laravel/releases/tag/' + this.upgradeVersion;
},
documentationLink() {
if (this.upgradeVersion) {
const splitUpgradeVersion = this.upgradeVersion.split('.');
const upgradeMajorVersion = parseInt(splitUpgradeVersion[0].replace('v', ''));
const upgradeMinorVersion = upgradeMajorVersion === 5 ? splitUpgradeVersion[1] : 'x';
const splitBaseVersion = this.baseVersion.split('.');
const baseMajorVersion = parseInt(splitBaseVersion[0].replace('v', ''));
const baseMinorVersion = baseMajorVersion === 5 ? splitBaseVersion[1] : 'x';
if (
upgradeMajorVersion === baseMajorVersion &&
upgradeMinorVersion === baseMinorVersion
) {
return '';
}
return `https://laravel.com/docs/${upgradeMajorVersion}.${upgradeMinorVersion}/upgrade`;
}
return '';
},
diffFileLink() {
return `diffs/${this.baseVersion}...${this.upgradeVersion}.diff`;
},
diffHtml() {
return Diff2Html.html(this.diffString, {
drawFileList: true,
fileListToggle: true,
fileListStartVisible: false,
fileContentToggle: false,
matching: 'lines',
outputFormat: 'side-by-side',
synchronizedScroll: true,
highlight: true,
renderNothingWhenEmpty: false,
});
},
upgradableVersions() {
if (!this.baseVersion) {
return [];
}
let sameVersionTags = this.tags.filter(tag => {
let sliceLength = this.baseVersion.slice(0, 2) === 'v5' ? 4 : 2;
return tag.slice(0, sliceLength) === this.baseVersion.slice(0, sliceLength) &&
this.baseVersion.localeCompare(
tag,
undefined,
{numeric: true, sensitivity: 'base'}
) === -1
});
const lastIndex = sameVersionTags.length > 0 ?
this.tags.indexOf(sameVersionTags[sameVersionTags.length - 1]) :
this.tags.indexOf(this.baseVersion)
if (lastIndex < this.tags.length - 1) {
sameVersionTags.push(this.tags[lastIndex + 1])
}
return sameVersionTags
},
},
}).mount('#app')
</script>
</body>
</html>