|
| 1 | +<template> |
| 2 | + <nav |
| 3 | + 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" |
| 4 | + > |
| 5 | + <div class="container flex items-center py-4 m-auto"> |
| 6 | + <div |
| 7 | + v-if="showBackButton" |
| 8 | + id="backToDataLink" |
| 9 | + class="hidden mr-4 md:block hover:scale-110 filter hover:drop-shadow-md" |
| 10 | + > |
| 11 | + <NuxtLink to="/v2"> |
| 12 | + <svg |
| 13 | + class="w-6 h-6" |
| 14 | + fill="none" |
| 15 | + stroke="currentColor" |
| 16 | + viewBox="0 0 24 24" |
| 17 | + xmlns="http://www.w3.org/2000/svg" |
| 18 | + > |
| 19 | + <path |
| 20 | + stroke-linecap="round" |
| 21 | + stroke-linejoin="round" |
| 22 | + stroke-width="2" |
| 23 | + d="M10 19l-7-7m0 0l7-7m-7 7h18" |
| 24 | + ></path> |
| 25 | + </svg> |
| 26 | + </NuxtLink> |
| 27 | + </div> |
| 28 | + <div class="flex-shrink-0 mr-6"> |
| 29 | + <NuxtLink to="/v2"> |
| 30 | + <svg |
| 31 | + height="40px" |
| 32 | + width="40px" |
| 33 | + class="dark:text-white" |
| 34 | + fill="#000000" |
| 35 | + stroke="currentColor" |
| 36 | + xmlns="http://www.w3.org/2000/svg" |
| 37 | + xmlns:xlink="http://www.w3.org/1999/xlink" |
| 38 | + version="1.1" |
| 39 | + x="0px" |
| 40 | + y="0px" |
| 41 | + viewBox="0 0 100 100" |
| 42 | + enable-background="new 0 0 100 100" |
| 43 | + xml:space="preserve" |
| 44 | + > |
| 45 | + <path |
| 46 | + d="M21.245,67.833V51.896h6.188c1.572,0,2.742,0.071,3.511,0.211c0.768,0.141,1.437,0.374,2.007,0.698 c1.104,0.649,1.933,1.562,2.488,2.737s0.833,2.622,0.833,4.338c0,1.804-0.345,3.32-1.033,4.55s-1.704,2.144-3.046,2.742 c-0.519,0.238-1.17,0.408-1.952,0.509c-0.783,0.101-2.036,0.151-3.76,0.151H21.245z M26.362,63.798h1.374 c1.276,0,2.162-0.285,2.656-0.855c0.494-0.569,0.741-1.59,0.741-3.062c0-1.435-0.253-2.452-0.758-3.051s-1.363-0.897-2.574-0.897 h-1.439V63.798z M40.945,67.833V51.896h5.214v15.937H40.945z M51.513,67.833V51.896h12.052v4.014H56.63v2.467h5.518v3.852H56.63 v5.604H51.513z M67.751,67.833V51.896h12.052v4.014h-6.935v2.467h5.518v3.852h-5.518v5.604H67.751z M85.248,2.083h-6.916H21.33 H7.531c-2.205,0-4,1.795-4,4v34.854v37.89v15.09c0,2.205,1.795,4,4,4h84.932c2.205,0,4-1.795,4-4v-15.09v-37.89V14.593L85.248,2.083 z M59.998,21.166h4.416c1.381,0,2.5-1.245,2.5-2.782V5.083h8.418v19.166c0,0.552-0.449,1-1,1H33.459V5.083h24.039v13.301 C57.498,19.921,58.617,21.166,59.998,21.166z M30.459,5.083v20.166H25.33c-0.553,0-1-0.448-1-1V5.083H30.459z M6.531,43.938h86.932 v31.89H6.531V43.938z M93.463,93.917c0,0.551-0.449,1-1,1H7.531c-0.551,0-1-0.449-1-1v-15.09h86.932V93.917z M6.531,40.938V6.083 c0-0.551,0.449-1,1-1H21.33v19.166c0,2.206,1.793,4,4,4h49.002c2.205,0,4-1.794,4-4V5.083h5.576l9.555,10.657v25.197H6.531z" |
| 47 | + ></path> |
| 48 | + </svg> |
| 49 | + </NuxtLink> |
| 50 | + </div> |
| 51 | + |
| 52 | + <div class="flex items-center justify-between flex-1"> |
| 53 | + <div class="items-center w-1/2"> |
| 54 | + <a |
| 55 | + href="https://github.com/technikhil314/offline-diff-viewer/stargazers" |
| 56 | + title="github stars on this open source project" |
| 57 | + > |
| 58 | + <img |
| 59 | + src="https://img.shields.io/github/stars/technikhil314/offline-diff-viewer?style=social" |
| 60 | + alt="" |
| 61 | + /> |
| 62 | + </a> |
| 63 | + <slot name="left" /> |
| 64 | + </div> |
| 65 | + <div class="flex items-center justify-end w-1/2 gap-4"> |
| 66 | + <slot name="right" /> |
| 67 | + <button |
| 68 | + type="button" |
| 69 | + 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" |
| 70 | + aria-label="Toggle Dark Mode" |
| 71 | + @click="toggleDarkMode" |
| 72 | + > |
| 73 | + <svg |
| 74 | + v-if="darkMode" |
| 75 | + fill="none" |
| 76 | + stroke="currentColor" |
| 77 | + class="w-6 h-6" |
| 78 | + viewBox="0 0 24 24" |
| 79 | + xmlns="http://www.w3.org/2000/svg" |
| 80 | + > |
| 81 | + <path |
| 82 | + stroke-linecap="round" |
| 83 | + stroke-linejoin="round" |
| 84 | + stroke-width="2" |
| 85 | + d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" |
| 86 | + ></path> |
| 87 | + </svg> |
| 88 | + <svg |
| 89 | + v-if="!darkMode" |
| 90 | + fill="none" |
| 91 | + class="w-6 h-6" |
| 92 | + stroke="currentColor" |
| 93 | + viewBox="0 0 24 24" |
| 94 | + xmlns="http://www.w3.org/2000/svg" |
| 95 | + > |
| 96 | + <path |
| 97 | + stroke-linecap="round" |
| 98 | + stroke-linejoin="round" |
| 99 | + stroke-width="2" |
| 100 | + d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" |
| 101 | + ></path> |
| 102 | + </svg> |
| 103 | + </button> |
| 104 | + </div> |
| 105 | + </div> |
| 106 | + <!-- buttons --> |
| 107 | + <nav class="contents"> |
| 108 | + <ul class="flex items-center justify-end"> |
| 109 | + <li class="relative inline-block ml-2 lg:ml-4"> |
| 110 | + <a |
| 111 | + href="https://github.com/technikhil314/offline-diff-viewer" |
| 112 | + title="go to github repository of this open source project" |
| 113 | + > |
| 114 | + <svg |
| 115 | + xmlns="http://www.w3.org/2000/svg" |
| 116 | + x="0px" |
| 117 | + y="0px" |
| 118 | + width="40" |
| 119 | + height="40" |
| 120 | + viewBox="0 0 48 48" |
| 121 | + style="fill: #000" |
| 122 | + > |
| 123 | + <linearGradient |
| 124 | + id="rL2wppHyxHVbobwndsT6Ca_AZOZNnY73haj_gr1" |
| 125 | + x1="4" |
| 126 | + x2="44" |
| 127 | + y1="23.508" |
| 128 | + y2="23.508" |
| 129 | + gradientUnits="userSpaceOnUse" |
| 130 | + > |
| 131 | + <stop offset="0" stop-color="#4c4c4c"></stop> |
| 132 | + <stop offset="1" stop-color="#343434"></stop> |
| 133 | + </linearGradient> |
| 134 | + <path |
| 135 | + fill="url(#rL2wppHyxHVbobwndsT6Ca_AZOZNnY73haj_gr1)" |
| 136 | + d="M24,4C12.954,4,4,12.954,4,24c0,8.887,5.801,16.411,13.82,19.016h12.36 C38.199,40.411,44,32.887,44,24C44,12.954,35.046,4,24,4z" |
| 137 | + ></path> |
| 138 | + <path |
| 139 | + d="M30.01,41.996L30,36.198c0-0.939-0.22-1.856-0.642-2.687c5.641-1.133,8.386-4.468,8.386-10.177 c0-2.255-0.665-4.246-1.976-5.92c0.1-0.317,0.174-0.645,0.22-0.981c0.188-1.369-0.023-2.264-0.193-2.984l-0.027-0.116 c-0.186-0.796-0.409-1.364-0.418-1.388l-0.111-0.282l-0.111-0.282l-0.302-0.032l-0.303-0.032c0,0-0.199-0.021-0.501-0.021 c-0.419,0-1.04,0.042-1.627,0.241l-0.196,0.066c-0.74,0.249-1.439,0.485-2.417,1.069c-0.286,0.171-0.599,0.366-0.934,0.584 C27.334,12.881,25.705,12.69,24,12.69c-1.722,0-3.365,0.192-4.889,0.571c-0.339-0.22-0.654-0.417-0.942-0.589 c-0.978-0.584-1.677-0.819-2.417-1.069l-0.196-0.066c-0.585-0.199-1.207-0.241-1.626-0.241c-0.302,0-0.501,0.021-0.501,0.021 l-0.302,0.032l-0.3,0.031l-0.112,0.281l-0.113,0.283c-0.01,0.026-0.233,0.594-0.419,1.391l-0.027,0.115 c-0.17,0.719-0.381,1.615-0.193,2.983c0.048,0.346,0.125,0.685,0.23,1.011c-1.285,1.666-1.936,3.646-1.936,5.89 c0,5.695,2.748,9.028,8.397,10.17c-0.194,0.388-0.345,0.798-0.452,1.224c-0.197,0.067-0.378,0.112-0.538,0.137 c-0.238,0.036-0.487,0.054-0.739,0.054c-0.686,0-1.225-0.134-1.435-0.259c-0.313-0.186-0.872-0.727-1.414-1.518 c-0.463-0.675-1.185-1.558-1.992-1.927c-0.698-0.319-1.437-0.502-2.029-0.502c-0.138,0-0.265,0.01-0.376,0.028 c-0.517,0.082-0.949,0.366-1.184,0.78c-0.203,0.357-0.235,0.773-0.088,1.141c0.219,0.548,0.851,0.985,1.343,1.255 c0.242,0.133,0.765,0.619,1.07,1.109c0.229,0.368,0.335,0.63,0.482,0.992c0.087,0.215,0.183,0.449,0.313,0.732 c0.47,1.022,1.937,1.924,2.103,2.023c0.806,0.483,2.161,0.638,3.157,0.683l0.123,0.003c0,0,0.001,0,0.001,0 c0.24,0,0.57-0.023,1.004-0.071v2.613c0.002,0.529-0.537,0.649-1.25,0.638l0.547,0.184C19.395,43.572,21.645,44,24,44 c2.355,0,4.605-0.428,6.703-1.176l0.703-0.262C30.695,42.538,30.016,42.422,30.01,41.996z" |
| 140 | + opacity=".05" |
| 141 | + ></path> |
| 142 | + <path |
| 143 | + d="M30.781,42.797c-0.406,0.047-1.281-0.109-1.281-0.795v-5.804c0-1.094-0.328-2.151-0.936-3.052 c5.915-0.957,8.679-4.093,8.679-9.812c0-2.237-0.686-4.194-2.039-5.822c0.137-0.365,0.233-0.75,0.288-1.147 c0.175-1.276-0.016-2.086-0.184-2.801l-0.027-0.116c-0.178-0.761-0.388-1.297-0.397-1.319l-0.111-0.282l-0.303-0.032 c0,0-0.178-0.019-0.449-0.019c-0.381,0-0.944,0.037-1.466,0.215l-0.196,0.066c-0.714,0.241-1.389,0.468-2.321,1.024 c-0.332,0.198-0.702,0.431-1.101,0.694C27.404,13.394,25.745,13.19,24,13.19c-1.762,0-3.435,0.205-4.979,0.61 c-0.403-0.265-0.775-0.499-1.109-0.699c-0.932-0.556-1.607-0.784-2.321-1.024l-0.196-0.066c-0.521-0.177-1.085-0.215-1.466-0.215 c-0.271,0-0.449,0.019-0.449,0.019l-0.302,0.032l-0.113,0.283c-0.009,0.022-0.219,0.558-0.397,1.319l-0.027,0.116 c-0.169,0.715-0.36,1.524-0.184,2.8c0.056,0.407,0.156,0.801,0.298,1.174c-1.327,1.62-1.999,3.567-1.999,5.795 c0,5.703,2.766,8.838,8.686,9.806c-0.395,0.59-0.671,1.255-0.813,1.964c-0.33,0.13-0.629,0.216-0.891,0.256 c-0.263,0.04-0.537,0.06-0.814,0.06c-0.69,0-1.353-0.129-1.69-0.329c-0.44-0.261-1.057-0.914-1.572-1.665 c-0.35-0.51-1.047-1.417-1.788-1.755c-0.635-0.29-1.298-0.457-1.821-0.457c-0.11,0-0.21,0.008-0.298,0.022 c-0.366,0.058-0.668,0.252-0.828,0.534c-0.128,0.224-0.149,0.483-0.059,0.708c0.179,0.448,0.842,0.85,1.119,1.002 c0.335,0.184,0.919,0.744,1.254,1.284c0.251,0.404,0.37,0.697,0.521,1.067c0.085,0.209,0.178,0.437,0.304,0.712 c0.331,0.719,1.353,1.472,1.905,1.803c0.754,0.452,2.154,0.578,2.922,0.612l0.111,0.002c0.299,0,0.8-0.045,1.495-0.135v3.177 c0,0.779-0.991,0.81-1.234,0.81c-0.031,0,0.503,0.184,0.503,0.184C19.731,43.64,21.822,44,24,44c2.178,0,4.269-0.36,6.231-1.003 C30.231,42.997,30.812,42.793,30.781,42.797z" |
| 144 | + opacity=".07" |
| 145 | + ></path> |
| 146 | + <path |
| 147 | + fill="#fff" |
| 148 | + d="M36.744,23.334c0-2.31-0.782-4.226-2.117-5.728c0.145-0.325,0.296-0.761,0.371-1.309 c0.172-1.25-0.031-2-0.203-2.734s-0.375-1.25-0.375-1.25s-0.922-0.094-1.703,0.172s-1.453,0.469-2.422,1.047 c-0.453,0.27-0.909,0.566-1.27,0.806C27.482,13.91,25.785,13.69,24,13.69c-1.801,0-3.513,0.221-5.067,0.652 c-0.362-0.241-0.821-0.539-1.277-0.811c-0.969-0.578-1.641-0.781-2.422-1.047s-1.703-0.172-1.703-0.172s-0.203,0.516-0.375,1.25 s-0.375,1.484-0.203,2.734c0.077,0.562,0.233,1.006,0.382,1.333c-1.31,1.493-2.078,3.397-2.078,5.704 c0,5.983,3.232,8.714,9.121,9.435c-0.687,0.726-1.148,1.656-1.303,2.691c-0.387,0.17-0.833,0.33-1.262,0.394 c-1.104,0.167-2.271,0-2.833-0.333s-1.229-1.083-1.729-1.813c-0.422-0.616-1.031-1.331-1.583-1.583 c-0.729-0.333-1.438-0.458-1.833-0.396c-0.396,0.063-0.583,0.354-0.5,0.563c0.083,0.208,0.479,0.521,0.896,0.75 c0.417,0.229,1.063,0.854,1.438,1.458c0.418,0.674,0.5,1.063,0.854,1.833c0.249,0.542,1.101,1.219,1.708,1.583 c0.521,0.313,1.562,0.491,2.688,0.542c0.389,0.018,1.308-0.096,2.083-0.206v3.75c0,0.639-0.585,1.125-1.191,1.013 C19.756,43.668,21.833,44,24,44c2.166,0,4.243-0.332,6.19-0.984C29.585,43.127,29,42.641,29,42.002v-5.804 c0-1.329-0.527-2.53-1.373-3.425C33.473,32.071,36.744,29.405,36.744,23.334z M11.239,32.727c-0.154-0.079-0.237-0.225-0.185-0.328 c0.052-0.103,0.22-0.122,0.374-0.043c0.154,0.079,0.237,0.225,0.185,0.328S11.393,32.806,11.239,32.727z M12.451,33.482 c-0.081,0.088-0.255,0.06-0.389-0.062s-0.177-0.293-0.096-0.381c0.081-0.088,0.255-0.06,0.389,0.062S12.532,33.394,12.451,33.482z M13.205,34.732c-0.102,0.072-0.275,0.005-0.386-0.15s-0.118-0.34-0.016-0.412s0.275-0.005,0.386,0.15 C13.299,34.475,13.307,34.66,13.205,34.732z M14.288,35.673c-0.069,0.112-0.265,0.117-0.437,0.012s-0.256-0.281-0.187-0.393 c0.069-0.112,0.265-0.117,0.437-0.012S14.357,35.561,14.288,35.673z M15.312,36.594c-0.213-0.026-0.371-0.159-0.353-0.297 c0.017-0.138,0.204-0.228,0.416-0.202c0.213,0.026,0.371,0.159,0.353,0.297C15.711,36.529,15.525,36.62,15.312,36.594z M16.963,36.833c-0.227-0.013-0.404-0.143-0.395-0.289c0.009-0.146,0.2-0.255,0.427-0.242c0.227,0.013,0.404,0.143,0.395,0.289 C17.381,36.738,17.19,36.846,16.963,36.833z M18.521,36.677c-0.242,0-0.438-0.126-0.438-0.281s0.196-0.281,0.438-0.281 c0.242,0,0.438,0.126,0.438,0.281S18.762,36.677,18.521,36.677z" |
| 149 | + ></path> |
| 150 | + </svg> |
| 151 | + </a> |
| 152 | + </li> |
| 153 | + </ul> |
| 154 | + </nav> |
| 155 | + </div> |
| 156 | + </nav> |
| 157 | +</template> |
| 158 | + |
| 159 | +<script lang="ts"> |
| 160 | +import Vue from 'vue' |
| 161 | +let darkMode: Boolean | null = null |
| 162 | +export default Vue.extend({ |
| 163 | + props: { |
| 164 | + showBackButton: { |
| 165 | + type: Boolean, |
| 166 | + default: false, |
| 167 | + }, |
| 168 | + }, |
| 169 | + data() { |
| 170 | + return { |
| 171 | + darkMode, |
| 172 | + } |
| 173 | + }, |
| 174 | + mounted() { |
| 175 | + if (darkMode === null) { |
| 176 | + darkMode = this.$cookies.isDarkMode |
| 177 | + if (darkMode) { |
| 178 | + document.documentElement.classList.add('dark') |
| 179 | + document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;` |
| 180 | + } |
| 181 | + } |
| 182 | + document.documentElement.classList.remove('hidden') |
| 183 | + }, |
| 184 | + methods: { |
| 185 | + toggleDarkMode() { |
| 186 | + darkMode = !darkMode |
| 187 | + document.documentElement.classList[darkMode ? 'add' : 'remove']('dark') |
| 188 | + document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;` |
| 189 | + }, |
| 190 | + }, |
| 191 | +}) |
| 192 | +</script> |
0 commit comments