footer on root diff page, diff view inline/split

.husky/prepare-commit-msg

@@ -1,4 +1,14 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
+if [ "$2" = "message" ]; then
+ echo "Skipping prepare-commit-msg hook due to message."
+ exit 0
+fi
+
+if [ "$2" = "commit" ]; then
+ echo "Skipping prepare-commit-msg hook due to amend."
+ exit 0
+fi
+
 exec </dev/tty && npx cz --hook || true

components/buttons/copyLink.vue

@@ -1,48 +1,30 @@
 <template>
- <div>
- <button
- id="copyLinkButton"
- type="button"
- class="
- inline-flex
- items-center
- justify-center
- gap-1
- p-2
- text-sm
- transition-transform
- transform
- rounded-md
- shadow
- justify-self-end
- focus-visible:ring-4
- active:scale-y-75
- hover:scale-105 hover:shadow-lg
- copy-uri-button
- "
- aria-label="Click here to copy url to clipboard"
- :class="{
- 'bg-blue-500 text-white': !copied,
- 'bg-green-500 text-gray-800': copied,
- }"
- @click="clickHandler"
+ <button
+ id="copyLinkButton"
+ type="button"
+ class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow justify-self-end focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
+ aria-label="Click here to copy url to clipboard"
+ :class="{
+ 'bg-blue-500 text-white': !copied,
+ 'bg-green-500 text-gray-800': copied,
+ }"
+ @click="clickHandler"
+ >
+ <span
+ class="inline-flex items-center justify-center gap-1"
+ aria-live="assertive"
+ role="status"
  >
- <span
- class="inline-flex items-center justify-center gap-1"
- aria-live="assertive"
- role="status"
- >
- <span v-show="copied" class="inline" aria-hidden="true">
- <Copied />
- </span>
- <span v-show="copied" class="hidden md:inline-block">Copied</span>
- <span v-show="!copied" class="inline" aria-hidden="true">
- <Link />
- </span>
- <span v-show="!copied" class="hidden md:inline-block">Copy link</span>
+ <span v-show="copied" class="inline" aria-hidden="true">
+ <Copied />
  </span>
- </button>
- </div>
+ <span v-show="copied" class="hidden md:inline-block">Copied</span>
+ <span v-show="!copied" class="inline" aria-hidden="true">
+ <Link />
+ </span>
+ <span v-show="!copied" class="hidden md:inline-block">Copy link</span>
+ </span>
+ </button>
 </template>
 <script lang="ts">
 import Vue from 'vue'

components/buttons/diffStyle.vue

@@ -0,0 +1,53 @@
+<template>
+ <button
+ class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75"
+ role="button"
+ :aria-label="label"
+ :title="label"
+ @click="handleClick"
+ >
+ <span
+ aria-live="assertive"
+ role="status"
+ :class="{
+ 'inline-block transition-transform bg-gray-100': true,
+ 'rotate-90': sideBySide,
+ }"
+ >
+ <DiffStyle class="w-6 h-6" />
+ </span>
+ </button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import DiffStyle from '~/components/icons/diffStyle.vue'
+export default Vue.extend({
+ components: { DiffStyle },
+ props: {
+ clickHandler: {
+ type: Function,
+ required: true,
+ },
+ },
+ data() {
+ return {
+ sideBySide: true,
+ }
+ },
+ computed: {
+ label() {
+ if (this.sideBySide) {
+ return 'Switch unified diff layout'
+ }
+ return 'Switch to split diff layout'
+ },
+ },
+ methods: {
+ handleClick() {
+ this.sideBySide = !this.sideBySide
+ this.clickHandler(this.sideBySide === true)
+ },
+ },
+})
+</script>

components/buttons/nextDiff.vue

@@ -2,24 +2,7 @@
  <div id="nextDiffSection" class="inline-flex items-center gap-1">
  <button
  id="nextDiff"
- class="
- inline-flex
- items-center
- justify-center
- px-1
- py-1
- text-sm text-gray-600
- transition-transform
- transform
- bg-gray-300
- border border-gray-800
- rounded-sm
- dark:border-gray-400 dark:text-white dark:bg-gray-800
- align-center
- focus-visible:ring-4
- active:scale-y-75
- hover:scale-105 hover:shadow-lg
- "
+ class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
  aria-label="Go to next diff"
  type="button"
  @click="clickHandler"

components/buttons/prevDiff.vue

@@ -2,24 +2,7 @@
  <div id="prevDiffSection" class="inline-flex items-center gap-1">
  <button
  id="prevDiff"
- class="
- inline-flex
- items-center
- justify-center
- px-1
- py-1
- text-sm text-gray-600
- transition-transform
- transform
- bg-gray-300
- border border-gray-800
- rounded-sm
- focus-visible:ring-4
- dark:border-gray-400 dark:text-white dark:bg-gray-800
- align-center
- active:scale-y-75
- hover:scale-105 hover:shadow-lg
- "
+ class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm focus-visible:ring-4 dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center active:scale-y-75 hover:scale-105 hover:shadow-lg"
  aria-label="Go to previous diff"
  type="button"
  @click="clickHandler"

components/buttons/stickyCopy.vue

@@ -1,20 +1,7 @@
 <template>
  <div class="sticky top-0 text-right z-1">
  <button
- class="
- absolute
- top-0
- right-0
- p-2
- text-gray-800
- transition-all
- transform
- rounded-full
- shadow
- dark:text-gray-50
- z-1
- hover:shadow-lg hover:scale-110 hover:rotate-12
- "
+ class="absolute top-0 right-0 p-2 text-gray-800 transition-all transform rounded-full shadow dark:text-gray-50 z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
  :class="{
  'bg-gray-100 dark:bg-gray-600': !copied,
  'bg-green-500': copied,

components/buttons/toggleInSync.vue

@@ -1,16 +1,16 @@
 <template>
  <div id="toggleScrollInSyncSection" class="inline-flex items-center gap-1">
  <label
+ id="toggleScrollInSyncLabel"
  for="toggleScrollInSync"
  class="text-gray-800 select-none dark:text-gray-50"
- id="toggleScrollInSyncLabel"
  aria-controls="toggleScrollInSync"
  >
  Scroll in sync
  </label>
  <input
- aria-labelledby="toggleScrollInSyncLabel"
  id="toggleScrollInSync"
+ aria-labelledby="toggleScrollInSyncLabel"
  type="checkbox"
  :checked="isEnabled"
  class="form-checkbox"

components/buttons/toggleInlineDiffView.vue

@@ -3,25 +3,7 @@
  <button
  id="toggleInlineDiffView"
  type="button"
- class="
- inline-flex
- items-center
- justify-center
- px-1
- py-1
- text-sm text-gray-600
- transition-transform
- transform
- bg-gray-300
- border border-gray-800
- rounded-sm
- outline-none
- dark:border-gray-400 dark:text-white dark:bg-gray-800
- align-center
- focus:ring-4
- active:scale-y-75
- hover:scale-105 hover:shadow-lg
- "
+ class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
  @click="toggleInlineDiffView"
  >
  <svg

components/diffActionBar.vue

@@ -1,6 +1,25 @@
 <template>
  <section
- class="flex items-center justify-between px-4 py-2 mb-4 sticky top-[70px] dark:bg-gray-700 bg-gray-300 dark:bg-opacity-50 bg-opacity-50 backdrop-blur-sm rounded-md shadow-lg border border-gray-500 w-full z-10"
+ class="
+ flex
+ items-center
+ justify-between
+ px-4
+ py-2
+ mb-4
+ sticky
+ top-[70px]
+ dark:bg-gray-700
+ bg-gray-300
+ dark:bg-opacity-50
+ bg-opacity-50
+ backdrop-blur-sm
+ rounded-md
+ shadow-lg
+ border border-gray-500
+ w-full
+ z-10
+ "
  >
  <div class="flex gap-4">
  <ToggleInSync />

components/footer.vue

@@ -1,15 +1,6 @@
 <template>
  <footer
- class="
- sticky
- py-4
- mt-4
- text-center text-gray-800
- top-full
- bg-inherit
- dark:text-gray-50
- min-h-max
- "
+ class="sticky py-4 mt-4 text-center text-gray-800 top-full bg-inherit dark:text-gray-50 min-h-max"
  >
  Made with &hearts; using
  <a

components/icons/diffStyle.vue

@@ -0,0 +1,26 @@
+<template>
+ <svg
+ id="Layer_1"
+ viewBox="0 0 122.742 122.881"
+ enable-background="new 0 0 122.742 122.881"
+ stroke="currentColor"
+ :class="className"
+ >
+ <g>
+ <path
+ d="M5.709,23.974h47.709V5.691c0-1.581,0.643-3.015,1.679-4.05C56.108,0.629,57.492,0,59,0h58.163 c1.508,0,2.891,0.628,3.902,1.641c1.035,1.036,1.678,2.469,1.678,4.05v87.524c0,1.582-0.643,3.016-1.678,4.051 c-1.012,1.012-2.395,1.641-3.902,1.641H69.453v18.283c0,1.582-0.645,3.016-1.68,4.051c-1.012,1.012-2.395,1.641-3.902,1.641H5.709 c-1.509,0-2.891-0.629-3.903-1.641c-1.036-1.035-1.679-2.469-1.679-4.051V74.389C0.044,74.082,0,73.76,0,73.428 c0-0.334,0.044-0.656,0.127-0.963V29.666c0-1.582,0.643-3.016,1.679-4.051C2.818,24.603,4.2,23.974,5.709,23.974L5.709,23.974z M94.113,29.137c1.395-1.468,3.717-1.525,5.184-0.129c1.469,1.396,1.525,3.718,0.129,5.185L88.514,45.609h27.131V7.319H60.517 v16.655h3.354c1.508,0,2.891,0.628,3.902,1.641c1.035,1.035,1.68,2.469,1.68,4.051v61.922h46.191V52.963h-27.15l10.932,11.476 c1.396,1.469,1.34,3.789-0.129,5.186c-1.467,1.396-3.789,1.338-5.184-0.129L77.27,51.815c-1.34-1.407-1.354-3.634,0-5.057 L94.113,29.137L94.113,29.137z M22.943,58.333c-1.396-1.468-1.338-3.789,0.129-5.185c1.468-1.396,3.789-1.338,5.185,0.129 L45.1,70.898c1.354,1.424,1.34,3.65-0.001,5.057L28.257,93.637c-1.396,1.467-3.717,1.525-5.185,0.129 c-1.467-1.395-1.525-3.717-0.129-5.184l10.932-11.479H7.227v38.459h55.127v-84.27H7.227V69.75h26.628L22.943,58.333L22.943,58.333z"
+ />
+ </g>
+ </svg>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+ props: {
+ className: {
+ type: String,
+ required: false,
+ },
+ },
+})
+</script>

components/navbar.vue

@@ -1,17 +1,6 @@
 <template>
  <nav
- class="
- sticky
- top-0
- left-0
- right-0
- z-10
- text-gray-800
- shadow-lg
- dark:shadow-dark
- bg-gray-50
- dark:bg-gray-900 dark:text-gray-50
- "
+ class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
  >
  <div class="container flex items-center py-4 m-auto">
  <div
@@ -46,20 +35,7 @@
  <slot name="right" />
  <button
  type="button"
- class="
- inline-flex
- items-center
- justify-center
- ml-4
- bg-transparent
- border-2 border-gray-700
- rounded-full
- shadow-lg
- w-9
- h-9
- active:scale-y-75
- hover:scale-105 hover:shadow-lg
- "
+ class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
  aria-label="Toggle Dark Mode"
  @click="toggleDarkMode"
  >

components/singleDiff.vue

@@ -5,7 +5,7 @@
  </p>
  <div
  :id="id"
- class="relative flex-1 px-4 py-2 border-2 rounded-md dark:border-gray-500 line-number-gutter min-h-80"
+ class="relative flex-1 px-4 py-2 border-2 rounded-md  dark:border-gray-500 line-number-gutter min-h-80"
  :class="{
  'overflow-y-auto max-h-screen--nav': !isSrollInSyncEnabled,
  }"
@@ -18,7 +18,7 @@
  lineDiff.includes('isModified'),
  }"
  >
  <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
  </div>
  </div>
  </div>