docs(releases-and-migrations): migrate page (#127)

* docs(Releases): migrate the notes component

* docs(Migration): add migrations component

* chore: format Sass

* docs: replace migration guide with md

Co-authored-by: MajesticPotatoe <amajesticpotatoe@gmail.com>

.markdownlintrc

@@ -25,6 +25,7 @@
       "layout-examples",
       "promoted-ad",
       "random-ad",
+      "release-notes",
       "sponsored-ad",
       "team-members",
       "up-next",

src/components/doc/Migration.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-card
+    outlined
+    class="pa-4"
+  >
+    <app-md>
+      {{ migration || ' ' }}
+    </app-md>
+  </v-card>
+</template>
+
+<script>
+  // Utilities
+  import { getBranch } from '@/util/helpers'
+
+  export default {
+    name: 'GettingStartedMigrations',
+
+    data: () => ({
+      branch: undefined,
+      migration: null,
+    }),
+
+    mounted () {
+      this.branch = getBranch()
+
+      fetch(`https://api.github.com/repos/vuetifyjs/vuetify/contents/MIGRATION.md?ref=${this.branch}`, {
+        method: 'get',
+        headers: { 'Content-Type': 'application/json' },
+      })
+        .then(res => res.json())
+        .then(res => {
+          this.migration = res.content ? Buffer.from(res.content, 'base64').toString() : ' '
+        })
+        .catch(err => console.log(err))
+    },
+  }
+</script>
+
+<style lang="sass" scoped>
+  ::v-deep pre
+    background: #2d2d2d !important
+    border-radius: 4px
+    margin: 16px 0
+    padding: 16px
+
+    code
+      background: transparent
+      background-color: unset !important
+      box-shadow: none !important
+      color: #ccc !important
+      font-family: "Inconsolata", monospace
+      font-weight: 300
+      font-size: 15px
+      line-height: 1.55
+
+  ::v-deep .migration-markdown
+    h1, h2, h3, h4, h5, p, pre, ul
+      margin-bottom: 16px !important
+</style>

src/components/doc/ReleaseNotes.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <v-autocomplete
+      v-model="releaseNotes"
+      :items="releases"
+      chips
+      clearable
+      hide-details
+      item-text="name"
+      label="Select Release Version"
+      prepend-inner-icon="$mdiDatabaseSearch"
+      return-object
+      solo
+    >
+      <template v-slot:selection="props">
+        <v-chip
+          :value="props.selected"
+          class="white--text"
+          color="primary"
+          label
+        >
+          <v-icon left>
+            mdi-tag
+          </v-icon>
+
+          <span v-text="props.item.name" />
+        </v-chip>
+      </template>
+
+      <template v-slot:item="props">
+        <v-list-item-action>
+          <v-icon>mdi-tag</v-icon>
+        </v-list-item-action>
+
+        <v-list-item-content>
+          <v-list-item-title
+            :id="props.attrs['aria-labelledby']"
+            v-text="props.item.name"
+          />
+
+          <v-list-item-subtitle v-text="`Published: ${new Date(props.item.published_at).toDateString()}`" />
+        </v-list-item-content>
+      </template>
+    </v-autocomplete>
+
+    <v-expand-transition>
+      <v-card
+        v-if="releaseNotes"
+        class="pa-4 mt-3"
+        outlined
+      >
+        <app-md>
+          {{ releaseNotes ? releaseNotes.body : ' ' }}
+        </app-md>
+      </v-card>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script>
+  // Utilities
+  import { sortBy } from 'lodash'
+
+  // TODO: remove this and use store
+  import { version } from 'vuetify'
+
+  export default {
+    name: 'ReleaseNotes',
+
+    data: () => ({
+      branch: undefined,
+      githubReleases: [],
+      releaseNotes: undefined,
+      currentVersion: version,
+    }),
+
+    computed: {
+      releases () {
+        const v1 = sortBy(
+          this.githubReleases.filter(release => release.name && release.name.substring(0, 3) === 'v1.'),
+          ['published_at'],
+        ).reverse()
+        const v2 = sortBy(
+          this.githubReleases.filter(release => release.name && release.name.substring(0, 3) === 'v2.'),
+          ['published_at'],
+        ).reverse()
+        if (v1.length > 0) {
+          v1.unshift({ header: 'v1.x' })
+        }
+        if (v2.length > 0) {
+          v2.unshift({ header: 'v2.x' })
+        }
+        return v2.concat(v1) || []
+      },
+    },
+
+    mounted () {
+      fetch('https://api.github.com/repos/vuetifyjs/vuetify/releases?per_page=100', {
+        method: 'get',
+        headers: { 'Content-Type': 'application/json' },
+      })
+        .then(res => res.json())
+        .then(res => {
+          this.githubReleases = res
+          this.releaseNotes = res.find(release => release.name === `v${this.currentVersion}`)
+        })
+        .catch(err => console.log(err))
+    },
+  }
+</script>