index.html

<!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/diff2html@3.4.18/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">
      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 <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;
      },

      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 => {
          return tag.slice(0, 2) === this.baseVersion.slice(0, 2) &&
            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>