Skip to content

Commit

Permalink
Merge pull request #20 from technikhil314/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@technikhil314
technikhil314 authored May 30, 2022
2 parents 55c293a + 5c216f0 commit 268674d
Show file tree
Hide file tree
Showing 3 changed files with 318 additions and 52 deletions.
37 changes: 15 additions & 22 deletions pages/diff.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
v-for="(lineDiff, index) in lhsDiff"
:key="index"
:class="{
'bg-red-100 dark:bg-yellow-700': lineDiff.includes('isModified'),
'bg-red-200 dark:bg-red-800': lineDiff.includes('isModified'),
}"
>
<p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
Expand All @@ -74,7 +74,7 @@
v-for="(lineDiff, index) in rhsDiff"
:key="index"
:class="{
'bg-green-100 dark:bg-green-700': lineDiff.includes('isModified'),
'bg-green-200 dark:bg-green-700': lineDiff.includes('isModified'),
}"
>
<p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
Expand All @@ -89,9 +89,9 @@
<script>
import pako from 'pako'
import { undoUrlSafeBase64, escapeHtml } from '../helpers/utils'
import footer from '~/components/footer.vue'
import Footer from '~/components/footer.vue'
export default {
components: { footer },
components: { Footer },
layout: 'main',
data() {
return {
Expand All @@ -100,9 +100,6 @@ export default {
copied: false,
}
},
asyncData() {
return { name: 'World' }
},
mounted() {
const _diff = this.$route.hash
const gunzip = pako.ungzip(Buffer.from(undoUrlSafeBase64(_diff), 'base64'))
Expand All @@ -112,7 +109,7 @@ export default {
const hunkState = item[0]
if (hunkState === -1 || hunkState === 0) {
const className =
hunkState === -1 ? 'isModified bg-red-300 dark:bg-yellow-900' : ''
hunkState === -1 ? 'isModified bg-red-300 dark:bg-red-500' : ''
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
item[1]
)}</span>`
Expand All @@ -127,7 +124,7 @@ export default {
const hunkState = item[0]
if (hunkState === 1 || hunkState === 0) {
const className =
hunkState === 1 ? 'isModified bg-green-300 dark:bg-green-900' : ''
hunkState === 1 ? 'isModified bg-green-400 dark:bg-green-900' : ''
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
item[1]
)}</span>`
Expand Down Expand Up @@ -191,6 +188,9 @@ export default {
</script>

<style lang="scss">
::selection {
@apply bg-gray-800 text-gray-300 dark:bg-gray-200 dark:text-gray-800;
}
.copy-uri-button:hover {
@apply shadow-lg;
svg {
Expand All @@ -206,31 +206,24 @@ export default {
&::before {
content: '';
width: var(--line-number-gutter-width);
@apply bg-gray-200 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
@apply bg-gray-300 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
}
@apply relative;
p {
padding-left: calc(var(--line-number-gutter-width) - 10px);
line-height: 1.65;
@apply relative;
&:hover {
@apply bg-gray-200 dark:bg-gray-700;
@apply bg-gray-200 dark:bg-gray-600;
span {
@apply dark:mix-blend-hard-light dark:bg-blend-multiply;
}
}
&::before {
counter-increment: line-numbers;
content: counter(line-numbers);
width: var(--line-number-gutter-width);
@apply absolute left-0 top-0 -mx-4 bottom-0 text-center bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 flex justify-center text-sm;
}
&:first-of-type {
&::before {
@apply -mt-2 pt-2;
}
}
&:last-of-type {
&::before {
@apply -mb-2 pb-2;
}
@apply absolute left-0 top-0 -mx-4 bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 inline-flex justify-center items-center text-sm h-full;
}
}
}
Expand Down
86 changes: 56 additions & 30 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,47 @@
</h2>
</header>
</section>
<form class="w-full" @submit="checkForm">
<div class="flex flex-wrap w-full gap-4">
<textarea
rows="28"
id="lhs"
class="flex-1 bg-transparent rounded-md resize-none form-textarea"
></textarea>
<textarea
id="rhs"
rows="28"
class="flex-1 bg-transparent rounded-md resize-none form-textarea"
></textarea>
<div class="self-end flex-grow-0 w-full text-center">
<button
class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none text-gray-50 focus:ring-4 active:scale-y-75"
>
Compare
</button>
<form class="flex flex-col w-full gap-4" @submit="checkForm">
<section class="flex w-full gap-4">
<div class="flex flex-col flex-wrap w-1/2 gap-4">
<label for="lhsLabel" class="relative">
<input
id="lhsLabel"
name="lhsLabel"
type="text"
class="flex-1 flex-grow-0 w-full bg-transparent rounded-md material-input"
placeholder="Add label to this text block"
/>
</label>
<textarea
id="lhs"
rows="28"
name="lhs"
class="flex-1 w-full bg-transparent rounded-md resize-none form-textarea"
></textarea>
</div>
<div class="flex flex-col flex-wrap w-1/2 gap-4">
<input
id="rhsLabel"
name="rhsLabel"
type="text"
class="flex-1 flex-grow-0 w-full bg-transparent rounded-md material-input"
placeholder="Add label to this text block"
/>
<textarea
id="rhs"
rows="28"
name="rhs"
class="flex-1 w-full bg-transparent rounded-md resize-none form-textarea"
></textarea>
</div>
</section>
<div class="self-end flex-grow-0 w-full text-center">
<button
class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none text-gray-50 focus:ring-4 active:scale-y-75"
>
Compare
</button>
</div>
</form>
</main>
Expand All @@ -49,14 +71,12 @@ export default Vue.extend({
methods: {
checkForm(e: Event) {
e.preventDefault()
const lhsTextArea: HTMLTextAreaElement = document.getElementById(
'lhs'
) as HTMLTextAreaElement
const lhs: string = lhsTextArea?.value || ''
const rhsTextArea: HTMLTextAreaElement = document.getElementById(
'rhs'
) as HTMLTextAreaElement
const rhs: string = rhsTextArea?.value || ''
const formData = new FormData(e.currentTarget as HTMLFormElement)
// const formDataJson = Object.fromEntries(formData.entries())
const lhs = formData.get('lhs')
const rhs = formData.get('rhs')
const lhsLabel = formData.get('lhsLabel')
const rhsLabel = formData.get('rhsLabel')
if (!lhs || !rhs) {
this.$store.commit('toast/show', {
show: true,
Expand Down Expand Up @@ -84,11 +104,17 @@ export default Vue.extend({
const originalLhs = lhs
const originalRhs = rhs
const diff = dmp.diff_main(originalLhs, originalRhs)
const gzip = Buffer.from(pako.gzip(JSON.stringify(diff))).toString(
'base64'
)
const gzip = Buffer.from(
pako.gzip(
JSON.stringify({
diff,
lhsLabel,
rhsLabel,
})
)
).toString('base64')
this.$router.push({
path: '/diff',
path: '/v1/diff',
hash: `#${doUrlSafeBase64(gzip)}`,
})
},
Expand Down
Loading

1 comment on commit 268674d

@vercel
Copy link

@vercel vercel bot commented on 268674d May 30, 2022

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

offline-diff-viewer – ./

diffviewer.vercel.app
textdiff.vercel.app
offline-diff-viewer-git-main-technikhil314.vercel.app
differencer.vercel.app
offline-diff-viewer.vercel.app
differencefinder.vercel.app
diffchecker.vercel.app
offline-diff-viewer-technikhil314.vercel.app
diffie.vercel.app

Please sign in to comment.