Skip to content

Commit 99ff0de

Browse files
semiherdogansemiherdogan
committed
update style
1 parent d3f6b5e commit 99ff0de

File tree

1 file changed

+153
-151
lines changed

1 file changed

+153
-151
lines changed

‎index.html

+153-151
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,185 @@
11
<!DOCTYPE html>
22
<html lang="en-us">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8"/>
55
<title>Laravel Upgrade Helper</title>
66
<meta name="description"
7-
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.">
7+
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.">
88
<link rel="shortcut icon" href="https://laravel.com/img/favicon/favicon.ico">
99
<script src="https://cdn.tailwindcss.com"></script>
1010
<script src="https://unpkg.com/vue@3"></script>
11-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
11+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"/>
1212
<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.18/bundles/js/diff2html.min.js"></script>
1313
</head>
1414
<body>
15-
<header>
16-
<div class="container mx-auto flex justify-end">
17-
<a class="text-gray-600 mt-10" href="https://github.com/laravel-upgrade-helper" target="_blank">
18-
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
19-
<path
20-
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" />
21-
</svg>
22-
</a>
23-
</div>
24-
</header>
25-
<main id="app">
26-
<div class="container font-sans bg-white mx-auto">
27-
<section class="bg-white mt-20">
28-
<div class="max-w-2xl px-6 text-center mx-auto">
29-
<img src="https://laravel.com/img/logomark.min.svg" alt="Laravel Upgrade Helper" width="50" class="mx-auto" />
30-
<h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1>
31-
<p class="text-gray-600 mt-4">Quickly view differences between versions for Laravel.</p>
32-
<div>
33-
<p class="mt-5">
34-
<select v-model="baseVersion" @change="upgradeVersion = upgradableVersions[0]"
35-
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">
36-
<option value="null">Current Version</option>
37-
<template v-for="tag in tags">
38-
<option :value="tag" v-text="tag"></option>
39-
</template>
40-
</select>
41-
</p>
42-
<p class="mt-5">
43-
<select v-model="upgradeVersion"
44-
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">
45-
<option value="null">Upgrade To</option>
46-
<template v-for="upgradableVersions in upgradableVersions">
47-
<option :value="upgradableVersions" v-text="upgradableVersions"></option>
48-
</template>
49-
</select>
50-
</p>
51-
<button @click="showDiff" id="showBtn"
52-
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">
15+
<header>
16+
<div class="container mx-auto flex justify-end">
17+
<a class="text-gray-600 mt-10" href="https://github.com/laravel-upgrade-helper" target="_blank">
18+
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
19+
<path
20+
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"/>
21+
</svg>
22+
</a>
23+
</div>
24+
</header>
25+
<main id="app">
26+
<div class="container font-sans bg-white mx-auto">
27+
<section class="bg-white mt-20">
28+
<div class="max-w-2xl px-6 text-center mx-auto">
29+
<img src="https://laravel.com/img/logomark.min.svg" alt="Laravel Upgrade Helper" width="50"
30+
class="mx-auto"/>
31+
<h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1>
32+
<p class="text-gray-600 mt-4">Quickly view differences between versions for Laravel.</p>
33+
<div>
34+
<p class="mt-5">
35+
<select v-model="baseVersion"
36+
@change="() => {upgradeVersion = upgradableVersions[0]; clearResult;}"
37+
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">
38+
<option value="null">Current Version</option>
39+
<template v-for="tag in tags">
40+
<option :value="tag" v-text="tag"></option>
41+
</template>
42+
</select>
43+
</p>
44+
<p class="mt-5">
45+
<select v-model="upgradeVersion" @change="clearResult"
46+
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">
47+
<option value="null">Upgrade To</option>
48+
<template v-for="upgradableVersions in upgradableVersions">
49+
<option :value="upgradableVersions" v-text="upgradableVersions"></option>
50+
</template>
51+
</select>
52+
</p>
53+
<button @click="showDiff" id="showBtn"
54+
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">
5355
<span
5456
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">
5557
Show
5658
</span>
57-
</button>
58-
</div>
59+
</button>
5960
</div>
60-
</section>
61+
</div>
62+
</section>
63+
</div>
64+
65+
<section v-show="showResult && diffString !==''" class="container mx-auto mt-3">
66+
<div class="text-center">
67+
For release notes see:
68+
<a :href="releaseLink" target="_blank">link</a>
6169
</div>
6270

63-
<section v-show="showResult && diffString !==''" class="container mx-auto mt-3">
64-
<div class="text-center">
65-
For release notes see:
66-
<a :href="releaseLink" target="_blank">link</a>
67-
</div>
71+
<div class="text-center">
72+
Click <a :href="diffFileLink" download><b class="underline text-red">here</b></a>
73+
to download patch file.
74+
</div>
6875

69-
<div class="text-center">
70-
Click <a :href="diffFileLink" download><b class="underline text-red">here</b></a>
71-
to download patch file.
72-
</div>
76+
<div v-show="diffString !==''" v-html="diffHtml"></div>
77+
</section>
78+
</main>
79+
80+
<script>
81+
const {createApp} = Vue
82+
83+
createApp({
84+
data() {
85+
return {
86+
tags: [],
87+
baseVersion: null,
88+
upgradeVersion: null,
89+
diffString: "",
90+
showResult: false,
91+
};
92+
},
93+
94+
mounted() {
95+
fetch('tags.txt')
96+
.then(response => response.text())
97+
.then(data => this.tags = data.trim().split('\n'));
98+
},
99+
100+
methods: {
101+
clearResult() {
102+
this.diffString = "";
103+
this.showResult = false;
104+
},
73105

74-
<div v-show="diffString !==''" v-html="diffHtml"></div>
75-
</section>
76-
</main>
77-
78-
<script>
79-
const { createApp } = Vue
80-
81-
createApp({
82-
data() {
83-
return {
84-
tags: [],
85-
baseVersion: null,
86-
upgradeVersion: null,
87-
diffString: "",
88-
showResult: false,
89-
};
106+
showDiff() {
107+
if (!this.tags.includes(this.baseVersion) ||
108+
!this.tags.includes(this.upgradeVersion)
109+
) {
110+
alert('select version'); // TODO: modal here!
111+
return;
112+
}
113+
114+
this.showResult = true;
115+
this.diffString = '';
116+
117+
fetch(this.diffFileLink)
118+
.then(response => {
119+
if (!response.ok) {
120+
alert('Cannot find diff');
121+
122+
throw new Error("Cannot find diff");
123+
}
124+
125+
return response.text();
126+
})
127+
.then(diffString => {
128+
this.diffString = diffString;
129+
130+
document.getElementById('showBtn').scrollIntoView({behavior: "smooth"});
131+
});
90132
},
133+
},
91134

92-
mounted() {
93-
fetch('tags.txt')
94-
.then(response => response.text())
95-
.then(data => this.tags = data.trim().split('\n'));
135+
computed: {
136+
releaseLink() {
137+
return 'https://github.com/laravel/laravel/releases/tag/' + this.upgradeVersion;
96138
},
97139

98-
methods: {
99-
clearResult() {
100-
this.diffString = "";
101-
this.showResult = false;
102-
},
103-
104-
showDiff() {
105-
if (!this.tags.includes(this.baseVersion) ||
106-
!this.tags.includes(this.upgradeVersion)
107-
) {
108-
alert('select version'); // TODO: modal here!
109-
return;
110-
}
111-
112-
this.showResult = true;
113-
this.diffString = '';
114-
115-
fetch(this.diffFileLink)
116-
.then(response => {
117-
if (!response.ok) {
118-
alert('Cannot find diff');
119-
120-
throw new Error("Cannot find diff");
121-
}
122-
123-
return response.text();
124-
})
125-
.then(diffString => {
126-
this.diffString = diffString;
127-
128-
document.getElementById('showBtn').scrollIntoView({ behavior: "smooth" });
129-
});
130-
},
140+
diffFileLink() {
141+
return `diffs/${this.baseVersion}...${this.upgradeVersion}.diff`;
131142
},
132143

133-
computed: {
134-
releaseLink() {
135-
return 'https://github.com/laravel/laravel/releases/tag/' + this.upgradeVersion;
136-
},
137-
138-
diffFileLink() {
139-
return `diffs/${this.baseVersion}...${this.upgradeVersion}.diff`;
140-
},
141-
142-
diffHtml() {
143-
return Diff2Html.html(this.diffString, {
144-
drawFileList: true,
145-
fileListToggle: true,
146-
fileListStartVisible: false,
147-
fileContentToggle: false,
148-
matching: 'lines',
149-
outputFormat: 'side-by-side',
150-
synchronizedScroll: true,
151-
highlight: true,
152-
renderNothingWhenEmpty: false,
153-
});
154-
},
155-
156-
upgradableVersions() {
157-
if (!this.baseVersion) {
158-
return [];
159-
}
160-
161-
let sameVersionTags = this.tags.filter(tag => {
162-
return tag.slice(0, 2) === this.baseVersion.slice(0, 2) &&
163-
this.baseVersion.localeCompare(
164-
tag,
165-
undefined,
166-
{ numeric: true, sensitivity: 'base' }
167-
) === -1
168-
});
144+
diffHtml() {
145+
return Diff2Html.html(this.diffString, {
146+
drawFileList: true,
147+
fileListToggle: true,
148+
fileListStartVisible: false,
149+
fileContentToggle: false,
150+
matching: 'lines',
151+
outputFormat: 'side-by-side',
152+
synchronizedScroll: true,
153+
highlight: true,
154+
renderNothingWhenEmpty: false,
155+
});
156+
},
157+
158+
upgradableVersions() {
159+
if (!this.baseVersion) {
160+
return [];
161+
}
162+
163+
let sameVersionTags = this.tags.filter(tag => {
164+
return tag.slice(0, 2) === this.baseVersion.slice(0, 2) &&
165+
this.baseVersion.localeCompare(
166+
tag,
167+
undefined,
168+
{numeric: true, sensitivity: 'base'}
169+
) === -1
170+
});
169171

170-
const lastIndex = this.tags.indexOf(sameVersionTags[sameVersionTags.length - 1])
172+
const lastIndex = this.tags.indexOf(sameVersionTags[sameVersionTags.length - 1])
171173

172-
if (lastIndex < this.tags.length - 1) {
173-
sameVersionTags.push(this.tags[lastIndex + 1])
174-
}
174+
if (lastIndex < this.tags.length - 1) {
175+
sameVersionTags.push(this.tags[lastIndex + 1])
176+
}
175177

176-
return sameVersionTags
177-
},
178+
return sameVersionTags
178179
},
179-
}).mount('#app')
180-
</script>
180+
},
181+
}).mount('#app')
182+
</script>
181183
</body>
182184

183-
</html>
185+
</html>

0 commit comments

Comments
 (0)