Skip to content

Commit 1695d1d

Browse files
technikhil314technikhil314
authored
Merge pull request #13 from technikhil314/develop
Develop
2 parents bdf31cc + 35f8760 commit 1695d1d

File tree

11 files changed

+90
-26
lines changed

11 files changed

+90
-26
lines changed

‎app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" {{ HTML_ATTRS }}>
2+
<html lang="en" {{ HTML_ATTRS }} class="hidden">
33

44
<head {{ HEAD_ATTRS }}>
55
<script>(function (w, d, s, l, i) {

‎components/RTStickyCopyButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="sticky top-0 pt-12 text-right z-1">
2+
<div class="sticky top-0 text-right z-1">
33
<button
44
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"
55
:class="{

‎components/footer.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<footer
3+
class="py-4 mt-4 text-center text-gray-800 bg-inherit dark:text-gray-50 min-h-max"
4+
>
5+
Made with &hearts; by &copy;
6+
<a href="https://technikhil314.netlify.app">Nikhil Mehta</a>
7+
</footer>
8+
</template>

‎components/navbar.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<header
3-
class="fixed top-0 left-0 right-0 text-gray-800 shadow-lg dark:shadow-dark bg-gray-50 dark:bg-gray-900 z-100 dark:text-gray-50"
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"
44
>
5-
<div class="container flex items-center h-full py-4 m-auto">
5+
<div class="container flex items-center py-4 m-auto">
66
<div v-if="showBackButton" class="hidden mr-4 md:block">
77
<NuxtLink to="/">
88
<svg
@@ -147,7 +147,7 @@
147147
</ul>
148148
</nav>
149149
</div>
150-
</header>
150+
</nav>
151151
</template>
152152

153153
<script>
@@ -176,6 +176,7 @@ export default {
176176
'dark'
177177
)
178178
document.cookie = `darkMode=${this.darkMode}; Secure; max-age=31536000; path=/;`
179+
document.documentElement.classList.remove('hidden')
179180
},
180181
},
181182
}

‎nuxt.config.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ const domainAliases = [
66
const canonicalLinks = domainAliases.map(x => ({ rel: "canonical", href: x }))
77
const DESCRIPTION = "A text diff viewer that is privacy focused, secure, sharable and simple";
88
export default {
9-
target: 'static',
9+
ssr: true,
1010
head: {
1111
title: `Diff viewer - ${DESCRIPTION}`,
1212
meta: [
1313
{ charset: 'utf-8' },
14+
{ name: 'color-scheme', content: 'dark light' },
1415
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
1516
{ name: 'format-detection', content: 'telephone=no' },
1617
{ name: "theme-color", content: "#2563EB" },
@@ -106,6 +107,7 @@ export default {
106107
sitemap: {
107108
hostname: BASE_URL
108109
},
110+
109111
// Build Configuration: https://go.nuxtjs.dev/config-build
110112
build: {
111113
extractCSS: true,
@@ -114,5 +116,9 @@ export default {
114116
config.devtool = 'source-map'
115117
}
116118
}
117-
}
119+
},
120+
121+
serverMiddleware: [
122+
{ path: '/test', handler: '~/serverMiddleware/ok.js' },
123+
]
118124
}

‎pages/diff.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="contents">
2+
<div class="page-contents">
33
<Navbar :show-back-button="true">
44
<template #right>
55
<button
@@ -82,13 +82,16 @@
8282
</div>
8383
</div>
8484
</main>
85+
<Footer />
8586
</div>
8687
</template>
8788

8889
<script>
8990
import pako from 'pako'
9091
import { undoUrlSafeBase64, escapeHtml } from '../helpers/utils'
92+
import footer from '~/components/footer.vue'
9193
export default {
94+
components: { footer },
9295
layout: 'main',
9396
data() {
9497
return {
@@ -97,6 +100,9 @@ export default {
97100
copied: false,
98101
}
99102
},
103+
asyncData() {
104+
return { name: 'World' }
105+
},
100106
mounted() {
101107
const _diff = this.$route.hash
102108
const gunzip = pako.ungzip(Buffer.from(undoUrlSafeBase64(_diff), 'base64'))

‎pages/index.vue‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
<template>
2-
<div class="contents">
2+
<div class="page-contents">
33
<Navbar />
44
<main class="text-gray-800 dark:text-gray-50">
5-
<h1 class="w-full mb-2 text-xl text-center">
6-
Find difference in any two text blocks and get easy sharable link
7-
</h1>
8-
<h2 class="w-full mb-2 text-center text-md">
9-
Don’t worry, We don’t store any of your data
10-
</h2>
11-
<form class="w-full h-full" @submit="checkForm">
12-
<div class="flex flex-wrap w-full h-full gap-4">
5+
<section>
6+
<header>
7+
<h1 class="w-full mb-2 text-xl text-center">
8+
Find difference in any two text blocks and get easy sharable link
9+
</h1>
10+
<h2 class="w-full mb-2 text-center text-md">
11+
Don’t worry, We don’t store any of your data
12+
</h2>
13+
</header>
14+
</section>
15+
<form class="w-full" @submit="checkForm">
16+
<div class="flex flex-wrap w-full gap-4">
1317
<textarea
18+
rows="28"
1419
id="lhs"
15-
class="flex-1 h-full max-h-full bg-transparent rounded-md resize-none form-textarea"
20+
class="flex-1 bg-transparent rounded-md resize-none form-textarea"
1621
></textarea>
1722
<textarea
1823
id="rhs"
19-
class="flex-1 h-full max-h-full bg-transparent rounded-md resize-none form-textarea"
24+
rows="28"
25+
class="flex-1 bg-transparent rounded-md resize-none form-textarea"
2026
></textarea>
2127
<div class="self-end flex-grow-0 w-full text-center">
2228
<button
@@ -28,6 +34,7 @@
2834
</div>
2935
</form>
3036
</main>
37+
<Footer />
3138
</div>
3239
</template>
3340

@@ -88,8 +95,14 @@ export default Vue.extend({
8895
},
8996
})
9097
</script>
91-
<style>
92-
.page-root {
93-
max-height: calc(100% - 14rem);
98+
99+
<style scoped>
100+
main {
101+
@apply grid gap-4;
102+
103+
grid-template-rows: 100px 1fr;
104+
@media screen and (min-width: 768px) {
105+
grid-template-rows: 60px 1fr;
106+
}
94107
}
95108
</style>

‎serverMiddleware/ok.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function handler(_req, res) {
2+
res.end('Everything ok!')
3+
}

‎styles/global.scss‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,21 @@
22
:root {
33
color-scheme: dark light;
44
}
5+
6+
html,
7+
body,
8+
#__nuxt,
9+
#__layout,
10+
.page-root {
11+
@apply min-h-[100vh];
12+
}
13+
514
html,
615
body,
716
#__nuxt,
817
#__layout,
918
.page-root,
1019
main {
11-
@apply h-full;
1220
@apply bg-gray-50 dark:bg-gray-900;
1321
}
1422

@@ -20,9 +28,14 @@ body {
2028
@apply flow-root w-full;
2129
}
2230

31+
.page-contents {
32+
@apply grid;
33+
grid-template-rows: 80px 1fr 80px;
34+
}
35+
2336
main {
2437
@apply flex flex-wrap xl:container;
25-
margin-top: 5.5rem;
38+
margin-top: 2rem;
2639
}
2740

2841
/* custom scrollbar */

‎tailwind.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ module.exports = {
1515
},
1616
zIndex: {
1717
'1': 1,
18-
'2': 2
18+
'2': 2,
19+
'10': 10
1920
},
2021
minHeight: {
2122
'80': '20rem'

0 commit comments

Comments
 (0)