Skip to content

Commit

Permalink
Merge pull request #137 from technikhil314/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
technikhil314 authored Dec 5, 2023
2 parents 8eebc75 + c905f2d commit a47a966
Show file tree
Hide file tree
Showing 16 changed files with 3,033 additions and 1,120 deletions.
21 changes: 21 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": [
"run",
"dev"
],
"runtimeExecutable": "npm",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
}
]
}
28 changes: 14 additions & 14 deletions app.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }} class="hidden">
<head {{ HEAD_ATTRS }}>
<script>
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'G-HBV7K2PRX6')
</script>
{{ HEAD }}
</head>

<head {{ HEAD_ATTRS }}>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-HBV7K2PRX6');
</script>
{{ HEAD }}
</head>

<body {{ BODY_ATTRS }}>
{{ APP }}
</body>

<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
103 changes: 103 additions & 0 deletions components/v2/diffActionBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<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
"
>
<div class="flex gap-4">
<NextDiff :click-handler="goToNextDiff" />
<PrevDiff :click-handler="goToPreviousDiff" />
</div>
<CopyLink :click-handler="copyUrlToClipboard" :copied="copied"></CopyLink>
</section>
</template>

<script lang="ts">
import Vue from 'vue'
import PrevDiff from '../buttons/prevDiff.vue'
import NextDiff from '../buttons/nextDiff.vue'
import CopyLink from '../buttons/copyLink.vue'
import { putToClipboard } from '~/helpers/utils'
import { DiffActionBarData } from '~/helpers/types'
export default Vue.extend({
components: {
PrevDiff,
NextDiff,
CopyLink,
},
props: {
diffNavigator: {
type: Object,
required: true,
},
},
data(): DiffActionBarData {
return {
copied: false,
comparator: null,
comparer: null,
treeWalker: null,
}
},
mounted() {
document.addEventListener('keydown', this.handleCtrlC)
},
beforeDestroy() {
document.removeEventListener('keydown', this.handleCtrlC)
},
methods: {
handleCtrlC(event: KeyboardEvent) {
const { metaKey, ctrlKey, key } = event
if (
(metaKey || ctrlKey) &&
key === 'c' &&
!window?.getSelection()?.toString()
) {
const button: HTMLButtonElement = document.getElementById(
'copyLinkButton'
) as HTMLButtonElement
button.click()
}
},
copyUrlToClipboard() {
putToClipboard(
window.location.href,
'Link copied to your clipboard',
this.$store
)
this.copied = true
setTimeout(() => {
this.copied = false
}, 5000)
},
goToNextDiff() {
this.diffNavigator.next()
},
goToPreviousDiff() {
this.diffNavigator.previous()
},
},
})
</script>
<style lang="scss">
.copy-uri-button:hover svg {
@apply rotate-12;
}
</style>
192 changes: 192 additions & 0 deletions components/v2/navbar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<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"
>
<div class="container flex items-center py-4 m-auto">
<div
v-if="showBackButton"
id="backToDataLink"
class="hidden mr-4 md:block hover:scale-110 filter hover:drop-shadow-md"
>
<NuxtLink to="/v2">
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 19l-7-7m0 0l7-7m-7 7h18"
></path>
</svg>
</NuxtLink>
</div>
<div class="flex-shrink-0 mr-6">
<NuxtLink to="/v2">
<svg
height="40px"
width="40px"
class="dark:text-white"
fill="#000000"
stroke="currentColor"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
x="0px"
y="0px"
viewBox="0 0 100 100"
enable-background="new 0 0 100 100"
xml:space="preserve"
>
<path
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"
></path>
</svg>
</NuxtLink>
</div>

<div class="flex items-center justify-between flex-1">
<div class="items-center w-1/2">
<a
href="https://github.com/technikhil314/offline-diff-viewer/stargazers"
title="github stars on this open source project"
>
<img
src="https://img.shields.io/github/stars/technikhil314/offline-diff-viewer?style=social"
alt=""
/>
</a>
<slot name="left" />
</div>
<div class="flex items-center justify-end w-1/2 gap-4">
<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"
aria-label="Toggle Dark Mode"
@click="toggleDarkMode"
>
<svg
v-if="darkMode"
fill="none"
stroke="currentColor"
class="w-6 h-6"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
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"
></path>
</svg>
<svg
v-if="!darkMode"
fill="none"
class="w-6 h-6"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
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"
></path>
</svg>
</button>
</div>
</div>
<!-- buttons -->
<nav class="contents">
<ul class="flex items-center justify-end">
<li class="relative inline-block ml-2 lg:ml-4">
<a
href="https://github.com/technikhil314/offline-diff-viewer"
title="go to github repository of this open source project"
>
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="40"
height="40"
viewBox="0 0 48 48"
style="fill: #000"
>
<linearGradient
id="rL2wppHyxHVbobwndsT6Ca_AZOZNnY73haj_gr1"
x1="4"
x2="44"
y1="23.508"
y2="23.508"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#4c4c4c"></stop>
<stop offset="1" stop-color="#343434"></stop>
</linearGradient>
<path
fill="url(#rL2wppHyxHVbobwndsT6Ca_AZOZNnY73haj_gr1)"
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"
></path>
<path
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"
opacity=".05"
></path>
<path
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"
opacity=".07"
></path>
<path
fill="#fff"
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"
></path>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</nav>
</template>

<script lang="ts">
import Vue from 'vue'
let darkMode: Boolean | null = null
export default Vue.extend({
props: {
showBackButton: {
type: Boolean,
default: false,
},
},
data() {
return {
darkMode,
}
},
mounted() {
if (darkMode === null) {
darkMode = this.$cookies.isDarkMode
if (darkMode) {
document.documentElement.classList.add('dark')
document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
}
}
document.documentElement.classList.remove('hidden')
},
methods: {
toggleDarkMode() {
darkMode = !darkMode
document.documentElement.classList[darkMode ? 'add' : 'remove']('dark')
document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
},
},
})
</script>
File renamed without changes.
31 changes: 17 additions & 14 deletions helpers/driverjsTutorials.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,21 +75,24 @@ const copyLinkShortcutTutorial: Tutorial[] = [
},
]

const diffTutorials: TutorialMetadata[] = [
{
tutorial: actionBarTutorial,
cookieName: 'isSkipScrollInSyncTutorial',
},
{
tutorial: backButtonTutorial,
cookieName: 'isSkipBackButtonPersistsDataTutorial',
},
{
tutorial: copyLinkShortcutTutorial,
cookieName: 'isSkipCopyLinkShortcutTutorial',
},
]

const tutorialsMetadata: TutorialsMetadata = {
'/v1/diff': [
{
tutorial: actionBarTutorial,
cookieName: 'isSkipScrollInSyncTutorial',
},
{
tutorial: backButtonTutorial,
cookieName: 'isSkipBackButtonPersistsDataTutorial',
},
{
tutorial: copyLinkShortcutTutorial,
cookieName: 'isSkipCopyLinkShortcutTutorial',
},
],
'/v1/diff': diffTutorials,
'v2/diff': diffTutorials,
'/': [
{
tutorial: labelsTutorial,
Expand Down
Loading

1 comment on commit a47a966

@vercel
Copy link

@vercel vercel bot commented on a47a966 Dec 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.