Skip to content

Commit 01625c5

Browse files
semiherdogansemiherdogan
committed
Add website html file
1 parent 1c0b8cd commit 01625c5

File tree

1 file changed

+164
-0
lines changed

1 file changed

+164
-0
lines changed

‎index.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Laravel Upgrade Helper</title>
6+
<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.">
8+
<link rel="shortcut icon" href="https://laravel.com/img/favicon/favicon.ico">
9+
<script src="https://cdn.tailwindcss.com"></script>
10+
<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" />
12+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/js/diff2html.min.js"></script>
13+
</head>
14+
<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">It shows what's new in the files you're using and between the new version. We
32+
know, there are release notes. This is just a quick overview.</p>
33+
<div>
34+
<p class="mt-5">
35+
<select v-model="baseVersion" @change="upgradeVersion = upgradableVersions[0]"
36+
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">
37+
<option value="null">Current Version</option>
38+
<template v-for="tag in tags">
39+
<option :value="tag" v-text="tag"></option>
40+
</template>
41+
</select>
42+
</p>
43+
<p class="mt-5">
44+
<select v-model="upgradeVersion"
45+
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">
46+
<option value="null">Upgrade To</option>
47+
<template v-for="upgradableVersions in upgradableVersions">
48+
<option :value="upgradableVersions" v-text="upgradableVersions"></option>
49+
</template>
50+
</select>
51+
</p>
52+
<button @click="showDiff" id="showBtn"
53+
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">
54+
<span
55+
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">
56+
Show
57+
</span>
58+
</button>
59+
</div>
60+
</div>
61+
</section>
62+
</div>
63+
64+
<section class="container mx-auto">
65+
<h3 v-text="diffText" class="text-center mt-5 font-bold"></h3>
66+
<div v-show="diffString !==''" v-html="diffHtml"></div>
67+
</section>
68+
</main>
69+
70+
<script>
71+
const { createApp } = Vue
72+
73+
createApp({
74+
data() {
75+
return {
76+
tags: [],
77+
baseVersion: null,
78+
upgradeVersion: null,
79+
diffText: "",
80+
diffString: "",
81+
};
82+
},
83+
84+
mounted() {
85+
fetch('tags.txt')
86+
.then(response => response.text())
87+
.then(data => this.tags = data.trim().split('\n'));
88+
},
89+
90+
methods: {
91+
showDiff() {
92+
if (!this.tags.includes(this.baseVersion) ||
93+
!this.tags.includes(this.upgradeVersion)
94+
) {
95+
alert('select version'); // TODO: modal here!
96+
return;
97+
}
98+
99+
this.diffText = '';
100+
this.diffString = '';
101+
102+
this.diffText = `${this.baseVersion} -> ${this.upgradeVersion}`
103+
104+
fetch(`diffs/${this.baseVersion}...${this.upgradeVersion}.diff`)
105+
.then(response => {
106+
if (!response.ok) {
107+
alert('Cannot find diff');
108+
109+
throw new Error("Cannot find diff");
110+
}
111+
112+
return response.text();
113+
})
114+
.then(diffString => {
115+
this.diffString = diffString;
116+
117+
document.getElementById('showBtn').scrollIntoView({ behavior: "smooth" });
118+
});
119+
},
120+
},
121+
122+
computed: {
123+
diffHtml() {
124+
return Diff2Html.html(this.diffString, {
125+
drawFileList: true,
126+
fileListToggle: true,
127+
fileListStartVisible: false,
128+
fileContentToggle: false,
129+
matching: 'lines',
130+
outputFormat: 'side-by-side',
131+
synchronizedScroll: true,
132+
highlight: true,
133+
renderNothingWhenEmpty: false,
134+
});
135+
},
136+
137+
upgradableVersions() {
138+
if (!this.baseVersion) {
139+
return [];
140+
}
141+
142+
let sameVersionTags = this.tags.filter(tag => {
143+
return tag.slice(0, 2) === this.baseVersion.slice(0, 2) &&
144+
this.baseVersion.localeCompare(
145+
tag,
146+
undefined,
147+
{ numeric: true, sensitivity: 'base' }
148+
) === -1
149+
});
150+
151+
const lastIndex = this.tags.indexOf(sameVersionTags[sameVersionTags.length - 1])
152+
153+
if (lastIndex < this.tags.length - 1) {
154+
sameVersionTags.push(this.tags[lastIndex + 1])
155+
}
156+
157+
return sameVersionTags
158+
},
159+
},
160+
}).mount('#app')
161+
</script>
162+
</body>
163+
164+
</html>

0 commit comments

Comments
 (0)