-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
164 lines (146 loc) · 6.87 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Laravel Upgrade Helper</title>
<meta name="description"
content="It shows what's new in the files you're using and between the new version. We know, there are release notes. This is just a quick overview.">
<link rel="shortcut icon" href="https://laravel.com/img/favicon/favicon.ico">
<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/diff2html@3.4.18/bundles/js/diff2html.min.js"></script>
</head>
<body>
<header>
<div class="container mx-auto flex justify-end">
<a class="text-gray-600 mt-10" href="https://github.com/laravel-upgrade-helper" target="_blank">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z" />
</svg>
</a>
</div>
</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="https://laravel.com/img/logomark.min.svg" alt="Laravel Upgrade Helper" width="50" 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">It shows what's new in the files you're using and between the new version. We
know, there are release notes. This is just a quick overview.</p>
<div>
<p class="mt-5">
<select v-model="baseVersion" @change="upgradeVersion = upgradableVersions[0]"
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"
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>
</section>
</div>
<section class="container mx-auto">
<h3 v-text="diffText" class="text-center mt-5 font-bold"></h3>
<div v-show="diffString !==''" v-html="diffHtml"></div>
</section>
</main>
<script>
const { createApp } = Vue
createApp({
data() {
return {
tags: [],
baseVersion: null,
upgradeVersion: null,
diffText: "",
diffString: "",
};
},
mounted() {
fetch('tags.txt')
.then(response => response.text())
.then(data => this.tags = data.trim().split('\n'));
},
methods: {
showDiff() {
if (!this.tags.includes(this.baseVersion) ||
!this.tags.includes(this.upgradeVersion)
) {
alert('select version'); // TODO: modal here!
return;
}
this.diffText = '';
this.diffString = '';
this.diffText = `${this.baseVersion} -> ${this.upgradeVersion}`
fetch(`diffs/${this.baseVersion}...${this.upgradeVersion}.diff`)
.then(response => {
if (!response.ok) {
alert('Cannot find diff');
throw new Error("Cannot find diff");
}
return response.text();
})
.then(diffString => {
this.diffString = diffString;
document.getElementById('showBtn').scrollIntoView({ behavior: "smooth" });
});
},
},
computed: {
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 => {
return tag.slice(0, 2) === this.baseVersion.slice(0, 2) &&
this.baseVersion.localeCompare(
tag,
undefined,
{ numeric: true, sensitivity: 'base' }
) === -1
});
const lastIndex = this.tags.indexOf(sameVersionTags[sameVersionTags.length - 1])
if (lastIndex < this.tags.length - 1) {
sameVersionTags.push(this.tags[lastIndex + 1])
}
return sameVersionTags
},
},
}).mount('#app')
</script>
</body>
</html>